* { margin: 0; padding: 0; box-sizing: border-box; }
        
        :root {
            --bg-base: #0c0c0f;
            --bg-surface: #141419;
            --bg-elevated: #1c1c24;
            --text-primary: #f0f0f5;
            --text-secondary: #9898a8;
            --text-muted: #5c5c6c;
            --accent: #e63946;
            --accent-hover: #ff4d5a;
            --accent-soft: rgba(230, 57, 70, 0.15);
            --success: #2dd4bf;
            --success-soft: rgba(45, 212, 191, 0.15);
            --warning: #fbbf24;
            --purple: #a78bfa;
            --purple-soft: rgba(167, 139, 250, 0.15);
            --border: rgba(255, 255, 255, 0.06);
            --border-hover: rgba(255, 255, 255, 0.12);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 24px;
            --sidebar-width: 260px;
            --profession-color: #e63946;
            --profession-soft: rgba(230, 57, 70, 0.15);
        }
        
        /* Profession Themes - Dramatically Different */
        [data-theme="Guardian"] {
            --profession-color: #72C1D9;
            --profession-soft: rgba(114, 193, 217, 0.2);
            --accent: #72C1D9;
            --accent-hover: #9dd7eb;
            --accent-soft: rgba(114, 193, 217, 0.2);
            --bg-base: #050a0f;
            --bg-surface: #0a1520;
            --bg-elevated: #0f2030;
            --border: rgba(114, 193, 217, 0.2);
            --border-hover: rgba(114, 193, 217, 0.4);
            --glow-color: rgba(114, 193, 217, 0.5);
        }
        
        [data-theme="Warrior"] {
            --profession-color: #FFD166;
            --profession-soft: rgba(255, 209, 102, 0.2);
            --accent: #FFD166;
            --accent-hover: #ffe599;
            --accent-soft: rgba(255, 209, 102, 0.2);
            --bg-base: #0f0a05;
            --bg-surface: #1a1208;
            --bg-elevated: #2a1c0a;
            --border: rgba(255, 209, 102, 0.2);
            --border-hover: rgba(255, 209, 102, 0.4);
            --glow-color: rgba(255, 209, 102, 0.5);
        }
        
        [data-theme="Engineer"] {
            --profession-color: #D09C59;
            --profession-soft: rgba(208, 156, 89, 0.2);
            --accent: #D09C59;
            --accent-hover: #e0b070;
            --accent-soft: rgba(208, 156, 89, 0.2);
            --bg-base: #0a0805;
            --bg-surface: #15100a;
            --bg-elevated: #251a10;
            --border: rgba(208, 156, 89, 0.2);
            --border-hover: rgba(208, 156, 89, 0.4);
            --glow-color: rgba(208, 156, 89, 0.5);
        }
        
        [data-theme="Ranger"] {
            --profession-color: #8CDC82;
            --profession-soft: rgba(140, 220, 130, 0.2);
            --accent: #8CDC82;
            --accent-hover: #a8e8a0;
            --accent-soft: rgba(140, 220, 130, 0.2);
            --bg-base: #050a05;
            --bg-surface: #0a150a;
            --bg-elevated: #102510;
            --border: rgba(140, 220, 130, 0.2);
            --border-hover: rgba(140, 220, 130, 0.4);
            --glow-color: rgba(140, 220, 130, 0.5);
        }
        
        [data-theme="Thief"] {
            --profession-color: #C08F95;
            --profession-soft: rgba(192, 143, 149, 0.2);
            --accent: #C08F95;
            --accent-hover: #d5a8ae;
            --accent-soft: rgba(192, 143, 149, 0.2);
            --bg-base: #0a0508;
            --bg-surface: #150a10;
            --bg-elevated: #251018;
            --border: rgba(192, 143, 149, 0.2);
            --border-hover: rgba(192, 143, 149, 0.4);
            --glow-color: rgba(192, 143, 149, 0.5);
        }
        
        [data-theme="Elementalist"] {
            --profession-color: #F68A87;
            --profession-soft: rgba(246, 138, 135, 0.2);
            --accent: #F68A87;
            --accent-hover: #ffa8a5;
            --accent-soft: rgba(246, 138, 135, 0.2);
            --bg-base: #0f0505;
            --bg-surface: #1a0808;
            --bg-elevated: #2a0c0c;
            --border: rgba(246, 138, 135, 0.2);
            --border-hover: rgba(246, 138, 135, 0.4);
            --glow-color: rgba(246, 138, 135, 0.5);
        }
        
        [data-theme="Mesmer"] {
            --profession-color: #B679D5;
            --profession-soft: rgba(182, 121, 213, 0.2);
            --accent: #B679D5;
            --accent-hover: #ca98e5;
            --accent-soft: rgba(182, 121, 213, 0.2);
            --bg-base: #08050a;
            --bg-surface: #100a18;
            --bg-elevated: #1a1028;
            --border: rgba(182, 121, 213, 0.2);
            --border-hover: rgba(182, 121, 213, 0.4);
            --glow-color: rgba(182, 121, 213, 0.5);
        }
        
        [data-theme="Necromancer"] {
            --profession-color: #52A76F;
            --profession-soft: rgba(82, 167, 111, 0.2);
            --accent: #52A76F;
            --accent-hover: #70c090;
            --accent-soft: rgba(82, 167, 111, 0.2);
            --bg-base: #050805;
            --bg-surface: #081008;
            --bg-elevated: #0c1a0c;
            --border: rgba(82, 167, 111, 0.2);
            --border-hover: rgba(82, 167, 111, 0.4);
            --glow-color: rgba(82, 167, 111, 0.5);
        }
        
        [data-theme="Revenant"] {
            --profession-color: #D16E5A;
            --profession-soft: rgba(209, 110, 90, 0.2);
            --accent: #D16E5A;
            --accent-hover: #e58878;
            --accent-soft: rgba(209, 110, 90, 0.2);
            --bg-base: #0a0505;
            --bg-surface: #150a08;
            --bg-elevated: #28120c;
            --border: rgba(209, 110, 90, 0.2);
            --border-hover: rgba(209, 110, 90, 0.4);
            --glow-color: rgba(209, 110, 90, 0.5);
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-base);
            color: var(--text-primary);
            min-height: 100vh;
            line-height: 1.5;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: var(--bg-base);
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--accent-soft);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }
        
        /* Selection color */
        ::selection {
            background: var(--accent);
            color: white;
        }
        
        .app-container { display: flex; min-height: 100vh; }
        
        /* Sidebar */
        .sidebar {
            width: var(--sidebar-width);
            background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            z-index: 100;
        }
        
        .sidebar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 50%, var(--accent) 100%);
            box-shadow: 0 0 20px var(--glow-color, var(--accent-soft));
        }
        
        .sidebar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 200px;
            background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
            pointer-events: none;
            opacity: 0.3;
        }
        
        .sidebar-header {
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            max-width: 100%;
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            min-width: 40px;
            min-height: 40px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            font-weight: 700;
            color: white;
        }
        
        .logo-text { font-size: 1.1rem; font-weight: 700; }
        .logo-sub { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
        
        .sidebar-nav { flex: 1; padding: 1rem 0.75rem; overflow-y: auto; display: flex; flex-direction: column; }
        .nav-section { margin-bottom: 1.5rem; }
        .nav-section-bottom {
            margin-top: auto;
            margin-bottom: 0;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }
        .nav-section-title {
            font-size: 0.65rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 0 0.75rem;
            margin-bottom: 0.5rem;
        }
        
        .nav-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.7rem 0.75rem;
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s ease;
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
        .nav-item.active { 
            background: var(--accent-soft); 
            color: var(--accent); 
            border-left: 3px solid var(--accent);
            box-shadow: inset 0 0 20px var(--accent-soft), 0 0 10px var(--glow-color, var(--accent-soft));
        }
        .nav-icon { width: 20px; text-align: center; display: flex; align-items: center; justify-content: center; }
        
        .nav-discord {
            text-decoration: none;
        }
        .nav-discord:hover {
            background: rgba(88, 101, 242, 0.15);
            color: #5865F2;
        }
        .nav-discord:hover svg {
            color: #5865F2;
        }
        
        .nav-badge {
            margin-left: auto;
            background: var(--bg-elevated);
            color: var(--text-muted);
            font-size: 0.7rem;
            font-weight: 600;
            padding: 0.15rem 0.5rem;
            border-radius: 10px;
        }
        
        .sidebar-footer { padding: 1rem; border-top: 1px solid var(--border); }
        
        .user-card {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem;
            background: var(--bg-elevated);
            border-radius: var(--radius-md);
        }
        
        .user-card-main {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex: 1;
            padding: 0.25rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            min-width: 0;
        }
        
        .user-card-main:hover {
            background: var(--bg-surface);
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--purple) 0%, #818cf8 100%);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: white;
            flex-shrink: 0;
        }
        
        .user-info { flex: 1; min-width: 0; }
        .user-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .user-account { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        
        .settings-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 1.1rem;
            color: var(--text-muted);
            transition: all 0.15s;
            flex-shrink: 0;
        }
        
        .settings-btn:hover {
            background: var(--bg-surface);
            color: var(--text-primary);
        }
        
        /* Main Content */
        .main-content {
            flex: 1;
            margin-left: var(--sidebar-width);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            height: 64px;
            background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5rem;
            position: sticky;
            top: 0;
            z-index: 50;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        
        .page-title { 
            font-size: 1.25rem; 
            font-weight: 700; 
            color: var(--accent);
            text-shadow: 0 0 20px var(--glow-color, var(--accent-soft));
        }
        .header-left { display: flex; align-items: center; gap: 0.75rem; }
        .header-right { display: flex; gap: 0.75rem; }
        
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.25rem;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            background: var(--bg-elevated);
            color: var(--text-secondary);
            transition: all 0.15s ease;
        }
        
        .btn:hover { background: var(--bg-base); color: var(--text-primary); border-color: var(--accent); }
        .btn-primary { 
            background: var(--accent); 
            border-color: var(--accent); 
            color: white;
            box-shadow: 0 0 15px var(--glow-color, var(--accent-soft));
        }
        .btn-primary:hover { 
            background: var(--accent-hover); 
            box-shadow: 0 0 25px var(--glow-color, var(--accent-soft)), 0 0 40px var(--accent-soft);
            transform: translateY(-1px);
        }
        
        .btn-link {
            background: none;
            border: none;
            color: var(--accent);
            cursor: pointer;
            font-size: 0.85rem;
            padding: 0;
            text-decoration: none;
        }
        
        .btn-link:hover {
            text-decoration: underline;
        }
        
        .page-content { flex: 1; padding: 1.5rem; }
        .page-section { display: none; }
        .page-section.active { display: block; }
        
        /* Cards */
        .card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            margin-bottom: 1rem;
            transition: border-color 0.2s;
        }
        
        .card:hover {
            border-color: var(--border-hover);
        }
        
        .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
        .card-title { font-size: 1rem; font-weight: 600; color: var(--accent); }
        .card-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
        
        /* Dramatic ambient glow effects */
        .main-content {
            position: relative;
        }
        
        .main-content::before {
            content: '';
            position: fixed;
            top: -30%;
            right: -10%;
            width: 60%;
            height: 80%;
            background: radial-gradient(ellipse at center, var(--glow-color, var(--accent-soft)) 0%, transparent 60%);
            pointer-events: none;
            z-index: -1;
            opacity: 0.4;
            animation: pulse 8s ease-in-out infinite alternate;
        }
        
        .main-content::after {
            content: '';
            position: fixed;
            bottom: -20%;
            left: -10%;
            width: 50%;
            height: 60%;
            background: radial-gradient(ellipse at center, var(--glow-color, var(--accent-soft)) 0%, transparent 60%);
            pointer-events: none;
            z-index: -1;
            opacity: 0.2;
            animation: pulse 10s ease-in-out infinite alternate-reverse;
        }
        
        @keyframes pulse {
            0% { opacity: 0.2; transform: scale(1); }
            100% { opacity: 0.4; transform: scale(1.1); }
        }
        
        /* Profile Hero */
        .profile-hero {
            background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-surface) 50%, var(--bg-elevated) 100%);
            border: 1px solid var(--accent);
            border-radius: var(--radius-xl);
            padding: 2rem;
            margin-bottom: 1.5rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 40px var(--accent-soft), inset 0 0 60px var(--accent-soft);
        }
        
        .profile-hero-bg {
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background-size: cover;
            background-position: center left;
            opacity: 0.4;
            mask-image: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
            -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
            pointer-events: none;
            filter: saturate(1.2);
            transform: scaleX(-1);
        }
        
        .profile-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, var(--bg-surface) 40%, transparent 100%);
            pointer-events: none;
            z-index: 1;
        }
        
        .profile-hero-content { 
            display: flex; 
            align-items: center;
            gap: 1.5rem; 
            position: relative;
            z-index: 2;
        }
        
        .profile-avatar {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--profession-color) 0%, var(--accent-hover) 100%);
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: 700;
            color: white;
            border: 2px solid var(--profession-color);
            box-shadow: 0 0 20px var(--profession-soft);
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .profile-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
        .profile-meta { display: flex; gap: 1rem; color: var(--text-secondary); font-size: 0.85rem; }
        
        /* Icon-based stats row */
        .profile-icon-stats {
            display: flex;
            gap: 1.5rem;
            margin: 0.75rem 0;
        }
        
        .profile-icon-stat {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--bg-elevated);
            padding: 0.4rem 0.75rem;
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
        }
        
        .profile-icon-stat img {
            width: 24px;
            height: 24px;
            object-fit: contain;
        }
        
        .profile-icon-stat span {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--text-primary);
        }
        
        @media (max-width: 768px) {
            .profile-icon-stats {
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            
            .profile-icon-stat {
                padding: 0.3rem 0.5rem;
            }
            
            .profile-icon-stat img {
                width: 20px;
                height: 20px;
            }
            
            .profile-icon-stat span {
                font-size: 0.85rem;
            }
        }
        
        .profile-info { flex: 1; }
        
        .profile-stats { display: flex; gap: 2rem; margin-top: 1rem; }
        .profile-stat { text-align: center; }
        .profile-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--profession-color); }
        .profile-stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }
        
        /* Profession/Crafting Icons */
        .profile-discipline-icon {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .profile-discipline-icon:hover {
            transform: scale(1.1);
            z-index: 5;
        }
        
        .profile-discipline-icon.inactive {
            opacity: 0.25;
            filter: grayscale(1);
        }
        
        .profile-discipline-icon img {
            width: 28px;
            height: 28px;
        }
        
        .profile-discipline-level {
            position: absolute;
            bottom: -2px;
            right: -2px;
            background: rgba(0, 0, 0, 0.9);
            border-radius: 3px;
            padding: 1px 3px;
            font-size: 0.55rem;
            font-weight: 600;
            color: var(--text-secondary);
        }
        
        .profile-discipline-level.max-level {
            background: var(--accent);
            color: #000;
        }
        
        .logo-img {
            width: 40px;
            height: 40px;
            min-width: 40px;
            min-height: 40px;
            max-width: 40px;
            max-height: 40px;
            border-radius: var(--radius-md);
            object-fit: contain;
        }
        
        
        /* Character Grid */
        .character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
        
        .character-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1.25rem;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        
        .character-card:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }
        
        .character-card.main {
            border-color: var(--accent);
            background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-surface) 100%);
        }
        
        .character-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .character-info {
            flex: 1;
            min-width: 0;
        }
        
        .set-main-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.15s;
            flex-shrink: 0;
        }
        
        .set-main-btn:hover {
            border-color: var(--warning);
            color: var(--warning);
            background: rgba(251, 191, 36, 0.1);
        }
        
        .set-main-btn.is-main {
            border-color: var(--warning);
            color: var(--warning);
            background: rgba(251, 191, 36, 0.2);
        }
        
        .character-card:hover { border-color: var(--accent); transform: translateY(-2px); }
        .character-card.main { border-color: var(--warning); }
        
        .character-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
        
        .character-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            background: var(--bg-elevated);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .character-icon img { width: 36px; height: 36px; }
        .character-name { font-size: 1rem; font-weight: 600; }
        .character-spec { font-size: 0.8rem; color: var(--accent); }
        .character-details { display: flex; gap: 1.5rem; font-size: 0.8rem; color: var(--text-secondary); }
        
        /* Build Tabs */
        .build-tabs {
            display: flex;
            gap: 0.25rem;
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border);
        }
        
        .build-tab {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .build-tab:hover {
            border-color: var(--accent);
            color: var(--accent);
        }
        
        .build-tab.active {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
        }
        
        /* Build Tooltip */
        .build-tooltip {
            position: fixed;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1rem;
            min-width: 320px;
            max-width: 400px;
            z-index: 1000;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
        }
        
        .build-tooltip-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }
        
        .build-tooltip-name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 1rem;
        }
        
        .spec-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .spec-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.75rem;
            background: var(--bg-elevated);
            border-radius: var(--radius-md);
        }
        
        .spec-item img {
            flex-shrink: 0;
        }
        
        .spec-item-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        /* Fashion Gallery */
        .glamour-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .glamour-tabs {
            display: flex;
            gap: 0.5rem;
        }
        
        .glamour-tab {
            padding: 0.6rem 1.25rem;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s;
            font-size: 0.9rem;
        }
        
        .glamour-tab:hover {
            border-color: var(--accent);
            color: var(--text-primary);
        }
        
        .glamour-tab.active {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
        }
        
        .glamour-filters {
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
        }
        
        .glamour-filter-row {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .glamour-search {
            flex: 1;
            min-width: 200px;
        }
        
        .glamour-search input {
            width: 100%;
        }
        
        .glamour-filter-select {
            min-width: 140px;
            max-width: 160px;
        }
        
        @media (max-width: 768px) {
            .glamour-filter-row {
                flex-direction: column;
            }
            .glamour-search,
            .glamour-filter-select {
                width: 100%;
                max-width: none;
            }
        }
        
        .glamour-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.25rem;
        }
        
        .glamour-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .glamour-card:hover {
            border-color: var(--accent);
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 20px var(--accent-soft);
        }
        
        .glamour-card-image {
            aspect-ratio: 880/1200;
            background: var(--bg-elevated);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            overflow: visible;
            position: relative;
        }
        
        .glamour-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            pointer-events: none;
        }
        
        .glamour-card-placeholder {
            font-size: 3rem;
            opacity: 0.3;
        }
        
        .glamour-card-profession {
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            width: 32px;
            height: 32px;
            background: var(--bg-base);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            z-index: 5;
            pointer-events: none;
        }
        
        .glamour-card-profession img {
            width: 24px;
            height: 24px;
            pointer-events: none;
        }
        
        .glamour-image-indicators {
            position: absolute;
            bottom: 0.75rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.6rem;
            z-index: 10;
            background: rgba(0,0,0,0.8);
            padding: 0.5rem 0.75rem;
            border-radius: 20px;
            cursor: default;
        }
        
        .glamour-image-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
            cursor: pointer !important;
            transition: background 0.2s, transform 0.2s;
            border: 2px solid rgba(255,255,255,0.5);
            display: block;
        }
        
        .glamour-image-dot:hover {
            background: rgba(255,255,255,1);
            transform: scale(1.3);
        }
        
        .glamour-image-dot.active {
            background: var(--accent);
            border-color: var(--accent);
        }
        
        .glamour-card-body {
            padding: 1rem;
        }
        
        .glamour-card-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .glamour-card-author {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 0.75rem;
        }
        
        .glamour-card-items {
            display: flex;
            gap: 0.25rem;
            flex-wrap: wrap;
        }
        
        .glamour-item-icon {
            width: 36px;
            height: 36px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .glamour-item-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .glamour-card-dyes {
            display: flex;
            gap: 4px;
            margin-top: 0.75rem;
        }
        
        .glamour-dye-swatch {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            border: 1px solid rgba(255,255,255,0.15);
        }
        
        /* Wardrobe Grid - Card View */
        .wardrobe-grid {
            display: flex;
            gap: 6px;
            margin: 0.75rem 0;
            padding: 8px;
            background: rgba(0,0,0,0.2);
            border-radius: 6px;
        }
        
        .wardrobe-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
        }
        
        .wardrobe-item.empty {
            opacity: 0.3;
        }
        
        .wardrobe-item-icon {
            width: 36px;
            height: 36px;
            background: rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .wardrobe-item-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .wardrobe-item-dyes {
            display: flex;
            gap: 2px;
            justify-content: center;
        }
        
        .wardrobe-item-dye {
            width: 8px;
            height: 8px;
            border-radius: 2px;
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        /* Glamour Detail Modal - Clean Redesign */
        .glamour-modal {
            max-width: min(900px, 90vw);
            width: 90vw;
            max-height: 85vh;
            background: #1a1a2e;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .glamour-modal-top {
            display: flex;
            gap: 1.5rem;
            padding: 1.5rem;
            background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
            flex-shrink: 0;
        }
        
        .glamour-modal-preview {
            width: min(180px, 25vw);
            height: min(180px, 25vw);
            border-radius: 8px;
            overflow: hidden;
            background: #0f0f1a;
            flex-shrink: 0;
            position: relative;
        }
        
        .glamour-modal-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
        }
        
        .glamour-modal-image-nav {
            position: absolute;
            bottom: 0.5rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.3rem;
        }
        
        .glamour-modal-nav-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: none;
            background: rgba(0,0,0,0.6);
            color: white;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .glamour-modal-nav-btn:hover {
            background: rgba(0,0,0,0.8);
        }
        
        .glamour-modal-nav-btn.active {
            background: var(--accent);
        }
        
        .glamour-modal-preview-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            opacity: 0.2;
        }
        
        .glamour-modal-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        
        .glamour-modal-title {
            font-size: clamp(1rem, 2vw, 1.4rem);
            font-weight: 700;
            margin: 0 0 0.25rem 0;
            color: #fff;
        }
        
        .glamour-modal-author {
            color: #888;
            font-size: clamp(0.75rem, 1.5vw, 0.9rem);
            margin-bottom: 1rem;
        }
        
        .glamour-modal-author span {
            font-weight: 600;
        }
        
        .glamour-modal-code {
            margin-top: auto;
        }
        
        .glamour-modal-code label {
            display: block;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #666;
            margin-bottom: 0.5rem;
        }
        
        .glamour-modal-code-input {
            display: flex;
            gap: 0.5rem;
        }
        
        .glamour-modal-code-input input {
            flex: 1;
            padding: 0.5rem 0.6rem;
            background: #0f0f1a;
            border: 1px solid #333;
            border-radius: 6px;
            color: #aaa;
            font-family: monospace;
            font-size: clamp(0.65rem, 1.2vw, 0.8rem);
            min-width: 0;
        }
        
        .glamour-modal-code-input button {
            padding: 0.5rem 0.8rem;
            background: #8b5cf6;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            font-size: clamp(0.75rem, 1.3vw, 0.85rem);
            white-space: nowrap;
        }
        
        .glamour-modal-code-input button:hover {
            background: #7c3aed;
        }
        
        .glamour-modal-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
        }
        
        .glamour-modal-actions .btn {
            font-size: 0.8rem;
        }
        
        .glamour-modal-body {
            padding: 1.25rem;
            overflow-y: auto;
            flex: 1;
        }
        
        .glamour-section {
            margin-bottom: 1.25rem;
        }
        
        .glamour-section:last-child {
            margin-bottom: 0;
        }
        
        .glamour-section-title {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #666;
            margin-bottom: 0.75rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #2a2a3e;
        }
        
        .glamour-items-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 0.6rem;
        }
        
        .glamour-item {
            background: #0f0f1a;
            border-radius: 8px;
            padding: 0.6rem;
            text-align: center;
        }
        
        .glamour-item-icon {
            width: clamp(36px, 5vw, 48px);
            height: clamp(36px, 5vw, 48px);
            margin: 0 auto 0.4rem;
            border-radius: 6px;
            overflow: hidden;
            background: #1a1a2e;
            border: 2px solid #333;
        }
        
        .glamour-item-icon.legendary {
            border-color: #a855f7;
            box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
        }
        
        .glamour-item-icon.ascended {
            border-color: #ec4899;
            box-shadow: 0 0 8px rgba(236, 72, 153, 0.3);
        }
        
        .glamour-item-icon.exotic {
            border-color: #f97316;
        }
        
        .glamour-item-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .glamour-item-name {
            font-size: clamp(0.6rem, 1vw, 0.7rem);
            color: #ccc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 0.3rem;
        }
        
        .glamour-item-dyes {
            display: flex;
            justify-content: center;
            gap: 2px;
        }
        
        .glamour-item-dye {
            width: clamp(8px, 1.2vw, 12px);
            height: clamp(8px, 1.2vw, 12px);
            border-radius: 2px;
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        /* Responsive adjustments for smaller screens */
        @media (max-width: 1200px) {
            .glamour-items-grid {
                grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            }
        }
        
        @media (max-height: 800px) {
            .glamour-modal {
                max-height: 90vh;
            }
            .glamour-modal-top {
                padding: 1rem;
                gap: 1rem;
            }
            .glamour-modal-body {
                padding: 1rem;
            }
            .glamour-section {
                margin-bottom: 1rem;
            }
        }
        
        @media (max-width: 600px) {
            .glamour-modal-top {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            .glamour-modal-preview {
                width: 120px;
                height: 120px;
            }
            .glamour-items-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        .glamour-dyes-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        
        .glamour-dye-tag {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: #0f0f1a;
            border-radius: 20px;
            font-size: 0.75rem;
            color: #ccc;
        }
        
        .glamour-dye-tag-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.15);
        }
        
        .glamour-modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: none;
            background: rgba(0,0,0,0.3);
            color: #888;
            cursor: pointer;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .glamour-modal-close:hover {
            background: rgba(0,0,0,0.5);
            color: #fff;
        }
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .detail-slot {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 0.75rem;
            background: var(--bg-elevated);
            border-radius: var(--radius-md);
            min-width: 90px;
        }
        
        .detail-slot-icon {
            width: 52px;
            height: 52px;
            background: var(--bg-base);
            border: 2px solid var(--border);
            border-radius: var(--radius-sm);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .detail-slot-icon.legendary {
            border-color: #a855f7;
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
        }
        
        .detail-slot-icon.ascended {
            border-color: #fb3e8d;
            box-shadow: 0 0 8px rgba(251, 62, 141, 0.3);
        }
        
        .detail-slot-icon.exotic {
            border-color: #ffa405;
        }
        
        .detail-slot-icon.rare {
            border-color: #fcd00b;
        }
        
        .detail-slot-icon.masterwork {
            border-color: #1a9306;
        }
        
        .detail-slot-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .detail-slot-name {
            font-size: 0.7rem;
            color: var(--text-secondary);
            text-align: center;
            max-width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .detail-slot-dyes {
            display: flex;
            gap: 4px;
            justify-content: center;
        }
        
        .detail-slot-dye {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            border: 1px solid rgba(255,255,255,0.3);
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        .glamour-modal-dyes {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        
        .dye-chip {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 20px;
            font-size: 0.8rem;
        }
        
        .dye-chip-color {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        
        .glamour-modal-footer {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
        }
        
        /* Legacy support */
        .detail-section {
            margin-bottom: 1.5rem;
        }
        
        .detail-section-title {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .detail-wardrobe-row {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        
        .detail-slot.empty {
            opacity: 0.3;
        }
        
        /* Dye Chips */
        .dye-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .dye-chip {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: var(--bg-elevated);
            border-radius: 20px;
            font-size: 0.8rem;
        }
        
        .dye-chip-color {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        /* Chat Code Box */
        .chatcode-box {
            display: flex;
            gap: 8px;
        }
        
        .chatcode-box input {
            flex: 1;
            padding: 10px 12px;
            background: var(--bg-base);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            font-family: monospace;
            font-size: 0.85rem;
        }
        
        .chatcode-box button {
            padding: 10px 16px;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-weight: 500;
        }
        
        .chatcode-box button:hover {
            opacity: 0.9;
        }
        
        .glamour-card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        
        .glamour-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border);
        }
        
        .glamour-card-actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }
        
        .glamour-like-btn {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 0.25rem 0.5rem;
            cursor: pointer;
            transition: all 0.15s ease;
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        
        .glamour-like-btn:hover {
            border-color: #f43f5e;
            background: rgba(244, 63, 94, 0.1);
        }
        
        .glamour-like-btn.liked {
            border-color: #f43f5e;
            background: rgba(244, 63, 94, 0.15);
            color: #f43f5e;
        }
        
        .glamour-like-btn .like-icon {
            font-size: 0.9rem;
        }
        
        .glamour-like-btn .like-count {
            font-weight: 600;
            min-width: 1ch;
        }
        
        .glamour-delete-btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.7rem;
        }
        
        /* Glamour Detail Modal */
        .glamour-detail {
            max-width: 800px;
            width: 95vw;
        }
        
        .glamour-detail-header {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .glamour-detail-image {
            width: 200px;
            height: 200px;
            background: var(--bg-elevated);
            border-radius: var(--radius-lg);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .glamour-detail-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .glamour-detail-info {
            flex: 1;
        }
        
        .glamour-detail-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .glamour-detail-author {
            color: var(--text-muted);
            margin-bottom: 1rem;
        }
        
        .glamour-detail-desc {
            color: var(--text-secondary);
            line-height: 1.6;
        }
        
        .glamour-equipment-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }
        
        .glamour-equipment-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
        }
        
        .glamour-equipment-icon {
            width: 48px;
            height: 48px;
            background: var(--bg-base);
            border-radius: var(--radius-sm);
            flex-shrink: 0;
            overflow: hidden;
        }
        
        .glamour-equipment-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .glamour-equipment-info {
            flex: 1;
            min-width: 0;
        }
        
        .glamour-equipment-slot {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .glamour-equipment-name {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .glamour-equipment-dyes {
            display: flex;
            gap: 3px;
            margin-top: 4px;
        }
        
        .glamour-equipment-dye {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        .glamour-chatcode {
            margin-top: 1rem;
            padding: 1rem;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
        }
        
        .glamour-chatcode-label {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
        }
        
        .glamour-chatcode-input {
            display: flex;
            gap: 0.5rem;
        }
        
        .glamour-chatcode-input input {
            flex: 1;
            font-family: monospace;
            font-size: 0.85rem;
        }
        
        /* Create Glamour Form */
        .glamour-form-section {
            margin-bottom: 1.5rem;
        }
        
        .glamour-form-title {
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--text-secondary);
        }
        
        .glamour-slot-inputs {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 0.75rem;
        }
        
        .glamour-slot-input {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .glamour-slot-label {
            width: 80px;
            font-size: 0.8rem;
            color: var(--text-muted);
            flex-shrink: 0;
        }
        
        .glamour-slot-input .form-input {
            flex: 1;
            font-family: monospace;
            font-size: 0.85rem;
        }
        
        .glamour-dye-inputs {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        
        .glamour-dye-input {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .glamour-dye-input .form-input {
            width: 120px;
            font-size: 0.85rem;
        }
        
        .glamour-empty {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-muted);
        }
        
        .glamour-empty-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0.3;
        }
        
        /* Image Upload */
        .glamour-images-row {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .glamour-images-row .glamour-image-upload {
            flex: 1;
            min-width: 180px;
            max-width: 250px;
        }
        
        .glamour-image-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }
        
        .glamour-image-upload {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .glamour-image-preview {
            width: 100%;
            aspect-ratio: 3/4;
            background: var(--bg-elevated);
            border: 2px dashed var(--border);
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            overflow: hidden;
            transition: border-color 0.2s, background 0.2s;
        }
        
        .glamour-image-preview:hover {
            border-color: var(--accent);
            background: var(--accent-soft);
        }
        
        .glamour-image-preview.drag-over {
            border-color: var(--accent);
            background: var(--accent-soft);
            border-width: 3px;
            transform: scale(1.02);
        }
        
        .glamour-image-preview.has-image {
            border-style: solid;
            border-color: var(--accent);
        }
        
        .glamour-image-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .glamour-image-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        
        .glamour-image-actions {
            display: flex;
            gap: 0.5rem;
        }
        
        .glamour-image-hint {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        
        /* Settings Page */
        .settings-container {
            max-width: 700px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .settings-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }
        
        .settings-card-danger {
            border-color: rgba(239, 68, 68, 0.3);
        }
        
        .settings-card-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            background: var(--bg-elevated);
        }
        
        .settings-card-icon {
            font-size: 1.5rem;
        }
        
        .settings-card-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .settings-card-desc {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin: 0;
        }
        
        .settings-card-body {
            padding: 1.5rem;
        }
        
        .settings-actions {
            display: flex;
            gap: 0.75rem;
            margin-top: 1rem;
        }
        
        .api-key-display {
            display: flex;
            gap: 0.5rem;
        }
        
        .api-key-display .form-input {
            flex: 1;
            font-family: monospace;
        }
        
        /* Toggle Switch */
        .settings-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        
        .settings-toggle-info {
            flex: 1;
        }
        
        .settings-toggle-label {
            display: block;
            font-weight: 500;
            margin-bottom: 0.25rem;
        }
        
        .settings-toggle-desc {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        
        .toggle-switch {
            position: relative;
            width: 52px;
            height: 28px;
            flex-shrink: 0;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 28px;
            transition: 0.2s;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background: var(--text-muted);
            border-radius: 50%;
            transition: 0.2s;
        }
        
        .toggle-switch input:checked + .toggle-slider {
            background: var(--accent);
            border-color: var(--accent);
        }
        
        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(24px);
            background: white;
        }
        
        .settings-info-box {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            margin-top: 1rem;
            padding: 0.75rem 1rem;
            background: var(--bg-elevated);
            border-radius: var(--radius-sm);
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .info-icon {
            flex-shrink: 0;
        }
        
        /* Danger Zone */
        .danger-action {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid var(--border);
        }
        
        .danger-action:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .danger-action:first-child {
            padding-top: 0;
        }
        
        .btn-danger {
            background: #ef4444;
            border-color: #ef4444;
            color: white;
        }
        
        .btn-danger:hover {
            background: #dc2626;
        }
        
        .btn-danger-outline {
            background: transparent;
            border-color: #ef4444;
            color: #ef4444;
        }
        
        .btn-danger-outline:hover {
            background: rgba(239, 68, 68, 0.1);
        }
        
        /* Info Rows */
        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border);
        }
        
        .info-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .info-row:first-child {
            padding-top: 0;
        }
        
        .info-label {
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        
        .info-value {
            font-weight: 500;
            color: var(--text-primary);
        }
        
        /* Loading Overlay */
        .loading-overlay {
            position: fixed;
            inset: 0;
            background: rgba(12, 12, 15, 0.95);
            z-index: 500;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .loading-content {
            text-align: center;
            padding: 2rem;
        }
        
        .loading-spinner {
            width: 48px;
            height: 48px;
            border: 3px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 1.5rem;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .loading-text {
            color: var(--text-secondary);
            font-size: 1rem;
            margin-bottom: 1rem;
        }
        
        .loading-progress {
            width: 300px;
            height: 4px;
            background: var(--bg-elevated);
            border-radius: 2px;
            overflow: hidden;
            margin: 0 auto;
        }
        
        .loading-progress-bar {
            height: 100%;
            width: 0%;
            background: var(--accent);
            transition: width 0.3s ease;
        }
        
        /* Collection Grid */
        .collection-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); 
            gap: 0.5rem;
            max-height: 600px;
            overflow-y: auto;
            padding: 0.5rem;
        }
        
        .collection-item {
            aspect-ratio: 1;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.15s, border-color 0.15s;
        }
        
        .collection-item:hover {
            transform: scale(1.05);
            border-color: var(--accent);
        }
        
        .collection-item img { 
            width: 56px; 
            height: 56px; 
            border-radius: 4px;
        }
        
        .collection-item.locked { 
            opacity: 0.25; 
            filter: grayscale(1); 
        }
        
        .collection-item.locked:hover {
            opacity: 0.5;
        }
        
        .loading-small {
            text-align: center;
            padding: 2rem;
            color: var(--text-muted);
        }
        
        .error-text {
            text-align: center;
            padding: 2rem;
            color: var(--accent);
        }
        
        .collection-item.legendary {
            border-color: #a855f7;
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, var(--bg-elevated) 100%);
            box-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
        }
        
        .collection-item.legendary:hover {
            box-shadow: 0 0 16px rgba(168, 85, 247, 0.5);
        }
        
        /* Empty State */
        .empty-state { text-align: center; padding: 3rem 2rem; }
        .empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
        .empty-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
        .empty-text { color: var(--text-muted); margin-bottom: 1.5rem; }
        
        /* Modal */
        .modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .modal-backdrop.show { display: flex; }
        
        .modal {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            max-width: 450px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .modal-title { font-size: 1.1rem; font-weight: 600; }
        
        .modal-close {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-elevated);
            border: none;
            border-radius: var(--radius-sm);
            color: var(--text-secondary);
            cursor: pointer;
        }
        
        .modal-body { padding: 1.5rem; }
        .modal-footer { display: flex; gap: 0.75rem; justify-content: flex-end; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
        
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s ease;
            padding: 1rem;
            pointer-events: none;
        }
        
        .modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }
        
        .modal-overlay .modal {
            max-width: 900px;
            width: 100%;
            transform: translateY(20px);
            transition: transform 0.2s ease;
            position: relative;
        }
        
        .modal-overlay.active .modal {
            transform: translateY(0);
        }
        
        /* Forms */
        .form-group { margin-bottom: 1rem; }
        .form-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.5rem; }
        
        .form-input {
            width: 100%;
            padding: 0.75rem 1rem;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-size: 0.9rem;
            font-family: inherit;
        }
        
        .form-input:focus { outline: none; border-color: var(--accent); }
        
        /* Progress */
        .progress-bar { width: 100%; height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; display: none; }
        .progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.3s; }
        
        /* Image Cropper */
        .cropper-modal {
            max-width: 900px;
            width: 95%;
        }
        
        .cropper-hint {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 1rem;
            text-align: center;
        }
        
        .cropper-container {
            position: relative;
            width: 100%;
            height: 500px;
            background: #000;
            border-radius: var(--radius-md);
            overflow: hidden;
            cursor: grab;
        }
        
        .cropper-container:active {
            cursor: grabbing;
        }
        
        #cropperImage {
            position: absolute;
            max-width: none;
            max-height: none;
            user-select: none;
            -webkit-user-drag: none;
        }
        
        .cropper-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
        
        .cropper-overlay::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 293px;  /* 880/3 for preview scale */
            height: 400px; /* 1200/3 for preview scale */
            transform: translate(-50%, -50%);
            border: 2px dashed var(--accent);
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
        }
        
        .cropper-controls {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1rem;
        }
        
        /* Toast */
        .toast {
            position: fixed;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0.75rem 1.5rem;
            font-size: 0.9rem;
            z-index: 300;
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
        
        /* Landing Page */
        .landing-page {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .landing-hero {
            text-align: center;
            padding: 3rem 2rem;
            background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-base) 100%);
            border-radius: var(--radius-lg);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }
        
        .landing-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 20%, var(--accent-soft) 0%, transparent 50%),
                        radial-gradient(circle at 70% 80%, var(--accent-soft) 0%, transparent 50%);
            opacity: 0.5;
        }
        
        .landing-hero-content {
            position: relative;
            z-index: 1;
        }
        
        .landing-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 1rem;
            background: var(--bg-elevated);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            border: 3px solid var(--accent);
            box-shadow: 0 0 30px var(--accent-soft);
        }
        
        .landing-title {
            font-size: 2.25rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, var(--text-primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .landing-subtitle {
            font-size: 1.1rem;
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .landing-cta {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .landing-cta .btn {
            padding: 1rem 2rem;
            font-size: 1.1rem;
        }
        
        .landing-features {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        @media (min-width: 900px) {
            .landing-features {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        @media (max-width: 600px) {
            .landing-features {
                grid-template-columns: 1fr;
            }
        }
        
        .feature-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 2rem;
            text-align: center;
            transition: all 0.2s ease;
        }
        
        .feature-card:hover {
            border-color: var(--accent);
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.2);
        }
        
        .feature-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 1rem;
            background: var(--bg-elevated);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }
        
        .feature-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .feature-desc {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.6;
        }
        
        .landing-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            padding: 2rem;
            background: var(--bg-surface);
            border-radius: var(--radius-lg);
            margin-bottom: 2rem;
            text-align: center;
        }
        
        .landing-stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--accent);
        }
        
        .landing-stat-label {
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        
        /* Landing Section */
        .landing-section {
            margin-bottom: 2rem;
        }
        
        .landing-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .landing-section-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0;
        }
        
        .btn-sm {
            padding: 0.4rem 0.8rem;
            font-size: 0.85rem;
        }
        
        .landing-glamour-row {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
            max-width: 100%;
        }
        
        .landing-glamour-row .glamour-card {
            min-width: 0;
        }
        
        @media (min-width: 900px) {
            .landing-glamour-row {
                grid-template-columns: repeat(5, 1fr);
            }
        }
        
        /* Profile Search */
        .search-section {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 2rem;
            margin-bottom: 2rem;
        }
        
        .search-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-secondary);
        }
        
        .search-box {
            display: flex;
            gap: 0.75rem;
        }
        
        .search-input {
            flex: 1;
            padding: 0.75rem 1rem;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-size: 0.95rem;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--accent);
        }
        
        .search-results {
            margin-top: 1rem;
        }
        
        .search-result {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .search-result:hover {
            border-color: var(--accent);
            transform: translateX(4px);
        }
        
        .search-result-avatar {
            width: 48px;
            height: 48px;
            background: var(--bg-base);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            font-weight: 600;
        }
        
        .search-result-info {
            flex: 1;
        }
        
        .search-result-name {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .search-result-meta {
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        
        .search-empty {
            text-align: center;
            padding: 2rem;
            color: var(--text-muted);
        }
        
        /* Browse Page */
        .browse-page {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .browse-profile-header {
            display: flex;
            align-items: center;
            padding: 1rem;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            margin-bottom: 1rem;
        }
        
        /* Browse Overview Styles */
        .browse-overview {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .browse-section {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1.25rem;
        }
        
        .browse-section-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .browse-profession-row,
        .browse-crafting-row {
            display: flex !important;
            flex-direction: row !important;
            justify-content: center;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: nowrap;
        }
        
        .browse-profession-row .profession-icon,
        .browse-crafting-row .crafting-icon {
            width: 56px;
            height: 56px;
            min-width: 56px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: var(--bg-elevated);
            border-radius: var(--radius-md);
            border: 2px solid var(--border);
            opacity: 0.4;
            transition: all 0.2s;
        }
        
        .browse-profession-row .profession-icon.active,
        .browse-crafting-row .crafting-icon.active {
            opacity: 1;
            border-color: var(--prof-color, var(--accent));
            box-shadow: 0 0 10px var(--prof-color, var(--accent));
        }
        
        .browse-profession-row .profession-icon.max-level,
        .browse-crafting-row .crafting-icon.max-level {
            border-color: #ffd700;
            box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
        }
        
        .browse-profession-row .profession-icon img,
        .browse-crafting-row .crafting-icon img {
            width: 40px;
            height: 40px;
            object-fit: contain;
        }
        
        .browse-profession-row .profession-level,
        .browse-crafting-row .crafting-level {
            position: absolute;
            bottom: -8px;
            right: -8px;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 2px 6px;
            font-size: 0.7rem;
            font-weight: 600;
        }
        
        /* Collections display */
        .browse-collections {
            display: flex;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
        }
        
        .browse-collection-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            min-width: 120px;
        }
        
        .browse-collection-icon {
            font-size: 2rem;
        }
        
        .browse-collection-label {
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        
        .browse-collection-value {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        /* Mobile adjustments for browse rows */
        @media (max-width: 768px) {
            .browse-profession-row,
            .browse-crafting-row {
                gap: 0.4rem;
            }
            
            .browse-profession-row .profession-icon,
            .browse-crafting-row .crafting-icon {
                width: 38px;
                height: 38px;
                min-width: 38px;
            }
            
            .browse-profession-row .profession-icon img,
            .browse-crafting-row .crafting-icon img {
                width: 28px;
                height: 28px;
            }
            
            .browse-profession-row .profession-level,
            .browse-crafting-row .crafting-level {
                font-size: 0.6rem;
                padding: 1px 4px;
                bottom: -6px;
                right: -6px;
            }
            
            .browse-collections {
                gap: 1rem;
            }
            
            .browse-collection-stat {
                min-width: 90px;
            }
            
            .browse-collection-icon {
                font-size: 1.5rem;
            }
        }
        
        /* Responsive adjustments for larger screens */
        @media (min-width: 1400px) {
            .browse-profession-row,
            .browse-crafting-row {
                gap: 1.25rem;
            }
            
            .browse-profession-row .profession-icon,
            .browse-crafting-row .crafting-icon {
                width: 64px;
                height: 64px;
                min-width: 64px;
            }
            
            .browse-profession-row .profession-icon img,
            .browse-crafting-row .crafting-icon img {
                width: 48px;
                height: 48px;
            }
            
            .browse-collections {
                gap: 3rem;
            }
        }
        
        @media (min-width: 1800px) {
            .browse-profession-row,
            .browse-crafting-row {
                gap: 2rem;
            }
            
            .browse-profession-row .profession-icon,
            .browse-crafting-row .crafting-icon {
                width: 72px;
                height: 72px;
                min-width: 72px;
            }
            
            .browse-profession-row .profession-icon img,
            .browse-crafting-row .crafting-icon img {
                width: 56px;
                height: 56px;
            }
        }
        
        /* Profile Tabs */
        .profile-tabs {
            display: flex;
            gap: 0.25rem;
            background: var(--bg-surface);
            padding: 0.25rem;
            border-radius: var(--radius-md);
            margin-bottom: 1.5rem;
            overflow-x: auto;
        }
        
        .profile-tab {
            padding: 0.75rem 1.25rem;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            white-space: nowrap;
            transition: all 0.15s;
        }
        
        .profile-tab:hover {
            color: var(--text-primary);
            background: var(--bg-elevated);
        }
        
        .profile-tab.active {
            background: var(--accent);
            color: white;
        }
        
        .profile-tab-badge {
            display: inline-block;
            background: var(--bg-base);
            padding: 0.1rem 0.5rem;
            border-radius: 10px;
            font-size: 0.75rem;
            margin-left: 0.5rem;
        }
        
        .profile-tab.active .profile-tab-badge {
            background: rgba(255,255,255,0.2);
        }
        
        .profile-tab-content {
            display: none;
        }
        
        .profile-tab-content.active {
            display: block;
        }
        
        /* Summary Tab - 3 Column Layout */
        .summary-three-col {
            display: grid;
            grid-template-columns: 1fr 280px 220px;
            gap: 1rem;
            align-items: start;
        }
        
        .summary-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1rem;
        }
        
        .summary-card-equipment {
            /* Equipment takes up available space */
        }
        
        .summary-card-fashion {
            /* Fashion column */
        }
        
        .summary-card-stats {
            /* Stats column */
        }
        
        .summary-card-title {
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .summary-section-divider {
            height: 1px;
            background: var(--border);
            margin: 1rem 0;
        }
        
        .summary-stats-vertical {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .summary-stat-row {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.4rem 0.5rem;
            background: var(--bg-elevated);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
        }
        
        .summary-stat-row img {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }
        
        .summary-stat-num {
            font-size: 1rem;
            font-weight: 700;
            color: var(--profession-color, var(--accent));
            min-width: 40px;
        }
        
        .summary-stat-lbl {
            font-size: 0.7rem;
            color: var(--text-muted);
        }
        
        .summary-sidebar-label {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.5rem;
        }
        
        .summary-sidebar-icons {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
        }
        
        /* Fashion preview in summary - larger images */
        .summary-fashion-grid {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .summary-fashion-item {
            width: 100%;
            aspect-ratio: 3/4;
            border-radius: var(--radius-md);
            overflow: hidden;
            cursor: pointer;
            border: 2px solid var(--border);
            transition: border-color 0.2s, transform 0.2s;
        }
        
        .summary-fashion-item:hover {
            border-color: var(--accent);
            transform: scale(1.01);
        }
        
        .summary-fashion-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
        }
        
        @media (max-width: 1200px) {
            .summary-three-col {
                grid-template-columns: 1fr 220px;
                grid-template-rows: auto auto;
            }
            
            .summary-card-equipment {
                grid-column: 1 / 2;
                grid-row: 1 / 3;
            }
            
            .summary-card-fashion {
                grid-column: 2 / 3;
                grid-row: 1 / 2;
            }
            
            .summary-card-stats {
                grid-column: 2 / 3;
                grid-row: 2 / 3;
            }
        }
        
        @media (max-width: 900px) {
            .summary-three-col {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
            }
            
            .summary-card-equipment,
            .summary-card-fashion,
            .summary-card-stats {
                grid-column: 1;
                grid-row: auto;
            }
            
            .summary-fashion-grid {
                flex-direction: row;
                flex-wrap: wrap;
            }
            
            .summary-fashion-item {
                width: calc(50% - 0.375rem);
            }
        }
        
        .summary-section {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1rem;
            margin-bottom: 1rem;
        }
        
        .summary-title {
            font-size: 0.75rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        /* Build Layout - Sidebar, Equipment & Traits */
        .build-layout {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }
        
        .build-sidebar {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 1rem;
            width: 200px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .build-sidebar-section {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .build-sidebar-label {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .build-sidebar-row {
            display: flex;
            gap: 0.5rem;
        }
        
        .build-stat {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            padding: 0.5rem;
            background: var(--bg-base);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
        }
        
        .build-stat img {
            width: 24px;
            height: 24px;
        }
        
        .build-stat span {
            font-size: 1rem;
            font-weight: 700;
            color: var(--accent);
        }
        
        .build-stat label {
            font-size: 0.6rem;
            color: var(--text-muted);
            text-transform: uppercase;
            text-align: center;
            line-height: 1.2;
        }
        
        .build-sidebar-icons {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
        }
        
        .build-equipment {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 1rem;
            flex: 1;
            min-width: 0;
        }
        
        .build-traits {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 1rem;
            flex-shrink: 0;
        }
        
        .equipment-column {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }
        
        .equipment-section-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .equipment-section-title {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .equipment-section-badge {
            font-size: 0.7rem;
            background: var(--accent);
            color: #000;
            padding: 0.15rem 0.5rem;
            border-radius: 4px;
            font-weight: 600;
        }
        
        .equipment-group {
            min-width: 0;
        }
        
        .equipment-group-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 0.5rem;
            letter-spacing: 0.5px;
        }
        
        .equipment-slots-row {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        
        .equipment-slots-row .equipment-slot {
            width: 48px;
            height: 48px;
        }
        
        @media (max-width: 1200px) {
            .build-layout {
                flex-wrap: wrap;
            }
            
            .build-sidebar {
                width: 100%;
                flex-direction: row;
                flex-wrap: wrap;
            }
            
            .build-sidebar-section {
                flex: 1;
                min-width: 150px;
            }
        }
        
        @media (max-width: 1100px) {
            .build-layout {
                flex-direction: column;
            }
            
            .build-equipment {
                width: 100%;
            }
            
            .build-traits {
                width: 100%;
            }
            
            .equipment-column {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 1.5rem;
            }
            
            .equipment-group {
                flex: 1;
                min-width: 120px;
            }
        }
        
        .build-specs {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .build-spec {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--bg-base);
            padding: 0.5rem 0.75rem;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
        }
        
        .build-spec img {
            width: 24px;
            height: 24px;
        }
        
        .build-spec span {
            font-size: 0.85rem;
        }
        
        /* Trait Lines */
        .trait-lines {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .trait-line {
            position: relative;
            border-radius: var(--radius-md);
            overflow: hidden;
            width: 645px;
            height: 135px;
        }
        
        .trait-line-bg {
            position: absolute;
            inset: 0;
            background-image: var(--spec-bg);
            background-size: cover;
            background-position: center;
            opacity: 0.6;
        }
        
        .trait-line-content {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            height: 100%;
            padding: 0.5rem 0.75rem;
            background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.5) 100%);
        }
        
        .trait-spec-icon {
            width: 90px;
            height: 90px;
            flex-shrink: 0;
            background: rgba(0,0,0,0.5);
            border-radius: 8px;
            padding: 6px;
            border: 2px solid rgba(255,255,255,0.2);
            margin-right: 1rem;
        }
        
        .trait-spec-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .trait-grid {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            flex: 1;
            min-width: 0;
        }
        
        .trait-minor {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            background: rgba(0,0,0,0.6);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0.5rem;
        }
        
        .trait-minor img {
            width: 32px;
            height: 32px;
        }
        
        .trait-major-column {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .trait-major {
            width: 38px;
            height: 38px;
            background: rgba(0,0,0,0.7);
            border: 2px solid rgba(100,100,100,0.5);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.4;
            transition: all 0.2s;
        }
        
        .trait-major.selected {
            opacity: 1;
            border-color: var(--accent);
            box-shadow: 0 0 10px var(--accent-soft);
            background: rgba(0,0,0,0.5);
        }
        
        .trait-major img {
            width: 30px;
            height: 30px;
        }
        
        @media (max-width: 1100px) {
            .trait-line {
                width: 100%;
                height: auto;
                min-height: 120px;
            }
            
            .trait-line-content {
                flex-wrap: wrap;
                padding: 0.75rem;
            }
            
            .trait-spec-icon {
                width: 70px;
                height: 70px;
            }
            
            .trait-grid {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .trait-minor {
                width: 34px;
                height: 34px;
                margin: 0 0.3rem;
            }
            
            .trait-minor img {
                width: 26px;
                height: 26px;
            }
            
            .trait-major {
                width: 32px;
                height: 32px;
            }
            
            .trait-major img {
                width: 26px;
                height: 26px;
            }
        }
        
        /* Equipment Templates (legacy) */
        .equipment-templates {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .equipment-template {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 1rem;
        }
        
        .equipment-template-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }
        
        .equipment-template-name {
            font-weight: 600;
            font-size: 1rem;
        }
        
        .equipment-template-tab {
            font-size: 0.75rem;
            color: var(--text-muted);
            background: var(--bg-base);
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
        }
        
        .equipment-slots {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
            gap: 0.5rem;
        }
        
        .equipment-slot {
            aspect-ratio: 1;
            background: var(--bg-base);
            border: 1px solid var(--border);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .equipment-slot:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }
        
        .equipment-slot img {
            width: 80%;
            height: 80%;
            object-fit: contain;
        }
        
        .equipment-slot.empty {
            opacity: 0.3;
        }
        
        .equipment-slot.empty::after {
            content: '?';
            color: var(--text-muted);
            font-size: 1.25rem;
        }
        
        .equipment-slot-rarity {
            position: absolute;
            inset: 0;
            border-radius: 6px;
            pointer-events: none;
        }
        
        .equipment-slot-rarity.Legendary { box-shadow: inset 0 0 0 2px #4c139d; }
        .equipment-slot-rarity.Ascended { box-shadow: inset 0 0 0 2px #fb3e8d; }
        .equipment-slot-rarity.Exotic { box-shadow: inset 0 0 0 2px #ffa405; }
        .equipment-slot-rarity.Rare { box-shadow: inset 0 0 0 2px #fcd00b; }
        .equipment-slot-rarity.Masterwork { box-shadow: inset 0 0 0 2px #1a9306; }
        
        .text-muted {
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        
        /* Hamburger Menu */
        .hamburger {
            display: none;
            width: 40px;
            height: 40px;
            align-items: center;
            justify-content: center;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 1.25rem;
        }
        
        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99;
        }
        
        .sidebar-overlay.show {
            display: block;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .hamburger { display: flex; }
            
            .sidebar { 
                position: fixed;
                left: -280px;
                top: 0;
                bottom: 0;
                z-index: 100;
                transition: left 0.3s ease;
            }
            
            .sidebar.open {
                left: 0;
            }
            
            .main-content { margin-left: 0; }
            .character-grid { grid-template-columns: 1fr; }
            
            .header-left {
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }
            
            .profile-tabs {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            
            .profile-tabs::-webkit-scrollbar {
                display: none;
            }
            
            .profile-tab {
                white-space: nowrap;
                flex-shrink: 0;
                padding: 0.5rem 0.75rem;
                font-size: 0.85rem;
            }
            
            .profile-hero-content {
                flex-direction: column;
                text-align: center;
                gap: 1rem;
            }
            
            .profile-avatar {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }
            
            .profile-stats {
                justify-content: center;
                gap: 1rem;
            }
            
            .profile-stat-value {
                font-size: 1.2rem;
            }
            
            .glamour-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.75rem;
            }
            
            .glamour-card-body {
                padding: 0.75rem;
            }
            
            .glamour-card-title {
                font-size: 0.9rem;
            }
            
            .glamour-card-author {
                font-size: 0.75rem;
            }
            
            .glamour-card-footer {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .glamour-modal-top {
                flex-direction: column;
                align-items: center;
            }
            
            .glamour-modal-preview {
                width: 150px;
                height: 150px;
            }
            
            .glamour-modal-info {
                text-align: center;
            }
            
            .glamour-items-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .build-layout {
                flex-direction: column;
            }
            
            .build-sidebar {
                width: 100%;
                flex-direction: row;
                flex-wrap: wrap;
            }
            
            .build-main {
                width: 100%;
            }
            
            .equipment-grid {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .header-right .btn {
                padding: 0.5rem;
                font-size: 0.85rem;
            }
            
            .header-right .btn span:not(.btn-icon) {
                display: none;
            }
            
            .settings-card {
                padding: 1rem;
            }
            
            .settings-card-header {
                flex-direction: column;
                text-align: center;
                gap: 0.5rem;
            }
            
            .form-row {
                flex-direction: column;
            }
            
            .form-group {
                width: 100%;
            }
        }
        
        @media (max-width: 480px) {
            .glamour-grid {
                grid-template-columns: 1fr;
            }
            
            .glamour-images-row {
                flex-direction: column;
            }
            
            .glamour-images-row .glamour-image-upload {
                max-width: 100%;
            }
            
            .profile-name {
                font-size: 1.25rem;
            }
            
            .browse-collections {
                flex-direction: column;
            }
            
            .browse-collection-stat {
                justify-content: space-between;
            }
        }