* { box-sizing: border-box; }
        body {
            min-height: 100vh;
            margin: 0;
            color: #f4f8f2;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background:#040814;
            position:relative;
            isolation:isolate;
            overflow-x:hidden;
        }
        body::before {
            content:"";
            position:fixed;
            inset:0;
            z-index:-2;
            pointer-events:none;
            background:url("/assets/optimized/tloprofil.webp") center top / cover no-repeat;
            transform:translateZ(0);
        }
        body::after {
            content:"";
            position:fixed;
            inset:0;
            z-index:-1;
            pointer-events:none;
            background:
                linear-gradient(90deg, rgba(2, 7, 21, 0.70), rgba(5, 13, 28, 0.42), rgba(4, 4, 10, 0.20)),
                radial-gradient(circle at 70% 16%, rgba(125,248,232,.12), transparent 34%);
        }
        .wrap { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 60px; }
        .top { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:24px; }
        .brand {
            display:inline-flex;
            align-items:center;
            gap:14px;
            color:#f4f8f2;
            font-size:clamp(28px, 2.1vw, 38px);
            font-weight:1000;
            letter-spacing:0;
            text-decoration:none;
            text-transform:uppercase;
            text-shadow:0 5px 24px rgba(0,0,0,.74);
        }
        .brand-mark {
            display:grid;
            width:68px;
            height:68px;
            place-items:center;
            overflow:hidden;
            border:1px solid rgba(255,238,189,.32);
            border-radius:50%;
            background:rgba(4,10,18,.46);
            box-shadow:0 0 0 1px rgba(125,248,232,.14), 0 14px 34px rgba(0,0,0,.34);
        }
        .brand-mark img { display:block; width:100%; height:100%; object-fit:cover; }
        .brand-word {
            background:linear-gradient(90deg, #fff7c2 0%, #f0bd42 36%, #7df8e8 100%);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
        }
        .brand-block { display:grid; gap:6px; }
        .mobile-menu-toggle { display:none; font:inherit; }
        .top-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-left:auto; }
        .top-actions .btn { min-height:40px; padding:0 14px; border:1px solid rgba(255,238,189,.26); border-radius:8px; color:#fff7c2; font-weight:900; text-decoration:none; cursor:pointer; background:linear-gradient(135deg,rgba(40,214,194,.16),rgba(240,189,66,.09) 46%,rgba(255,115,92,.10)),rgba(5,12,22,.60); box-shadow:0 10px 30px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(10px); display:inline-flex; align-items:center; justify-content:center; gap:8px; }
        .top-actions .btn:hover { border-color:rgba(125,248,232,.48); box-shadow:0 14px 34px rgba(0,0,0,.30),0 0 24px rgba(40,214,194,.10); }
        h1, h2, h3, p { margin:0; }
        h1 { color:#fff7c2; font-size:clamp(34px,7vw,70px); line-height:.9; text-shadow:0 6px 32px rgba(0,0,0,.85); }
        h2 { color:#fff7c2; }
        a { color:#7df8e8; font-weight:900; text-decoration:none; }
        [hidden] { display:none !important; }
        .panel {
            display:grid;
            gap:14px;
            padding:18px;
            border:1px solid rgba(255,238,189,.22);
            border-radius:8px;
            background:rgba(7,12,24,.78);
            box-shadow:0 22px 70px rgba(0,0,0,.38);
            backdrop-filter:blur(18px);
        }
        .grid { display:grid; gap:10px; }
        .profile-grid { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(320px,1.15fr); gap:14px; align-items:start; }
        .split-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
        input, textarea, select {
            width:100%;
            min-height:44px;
            padding:0 12px;
            border:1px solid rgba(244,248,242,.18);
            border-radius:8px;
            color:#f4f8f2;
            background:rgba(0,0,0,.28);
            font:inherit;
        }
        textarea { min-height:90px; padding:12px; resize:vertical; }
        button, .btn {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:42px;
            padding:0 14px;
            border:0;
            border-radius:8px;
            color:#101211;
            background:#28d6c2;
            font:inherit;
            font-weight:1000;
            cursor:pointer;
            transition: filter .14s ease, box-shadow .14s ease;
        }
        button:not(.secondary):not(.danger):hover, .btn:not(.secondary):not(.danger):hover { filter:brightness(1.08); box-shadow:0 4px 18px rgba(40,214,194,.36); }
        .btn.secondary, button.secondary { color:#f4f8f2; border:1px solid rgba(255,238,189,.18); background:linear-gradient(135deg,rgba(40,214,194,.10),rgba(240,189,66,.06)),rgba(5,12,22,.42); box-shadow:0 2px 8px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.05); transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
        .btn.secondary:hover, button.secondary:hover { border-color:rgba(255,238,189,.30); background:linear-gradient(135deg,rgba(40,214,194,.16),rgba(240,189,66,.09)),rgba(5,12,22,.50); box-shadow:0 4px 16px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07); }
        button.danger { color:#fff; border:1px solid rgba(255,79,109,.38); background:rgba(255,79,109,.22); transition: filter .14s ease; }
        button.danger:hover { filter:brightness(1.12); }
        .section-toggle { width:100%; justify-content:space-between; gap:10px; min-height:48px; }
        .section-toggle .toggle-label { display:inline-flex; align-items:center; gap:8px; }
        .toggle-icon { flex-shrink:0; width:17px; height:17px; opacity:.82; }

        /* ── themed section toggles ── */
        .toggle-mailbox { background:linear-gradient(135deg,rgba(40,214,194,.20),rgba(125,248,232,.06)),rgba(5,12,22,.52); border-color:rgba(40,214,194,.38); color:#7df8e8; }
        .toggle-mailbox:hover { background:linear-gradient(135deg,rgba(40,214,194,.30),rgba(125,248,232,.12)),rgba(5,12,22,.62); border-color:rgba(40,214,194,.65); box-shadow:0 4px 22px rgba(40,214,194,.18),inset 0 1px 0 rgba(255,255,255,.06); }
        .toggle-friends { background:linear-gradient(135deg,rgba(168,100,255,.18),rgba(200,140,255,.05)),rgba(5,12,22,.52); border-color:rgba(168,100,255,.36); color:#c99cff; }
        .toggle-friends:hover { background:linear-gradient(135deg,rgba(168,100,255,.28),rgba(200,140,255,.12)),rgba(5,12,22,.62); border-color:rgba(168,100,255,.62); box-shadow:0 4px 22px rgba(168,100,255,.18),inset 0 1px 0 rgba(255,255,255,.06); }
        .toggle-history { background:linear-gradient(135deg,rgba(240,189,66,.18),rgba(255,247,194,.05)),rgba(5,12,22,.52); border-color:rgba(240,189,66,.36); color:#f0bd42; }
        .toggle-history:hover { background:linear-gradient(135deg,rgba(240,189,66,.28),rgba(255,247,194,.12)),rgba(5,12,22,.62); border-color:rgba(240,189,66,.62); box-shadow:0 4px 22px rgba(240,189,66,.18),inset 0 1px 0 rgba(255,255,255,.06); }
        .toggle-settings { background:linear-gradient(135deg,rgba(148,178,210,.15),rgba(190,215,235,.05)),rgba(5,12,22,.52); border-color:rgba(170,198,224,.26); color:#b8d0e8; }
        .toggle-settings:hover { background:linear-gradient(135deg,rgba(148,178,210,.24),rgba(190,215,235,.10)),rgba(5,12,22,.62); border-color:rgba(170,198,224,.50); box-shadow:0 4px 18px rgba(148,178,210,.14),inset 0 1px 0 rgba(255,255,255,.06); }

        /* ── friends toggle stat pills ── */
        .friends-toggle-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
        .friend-stat-pill { padding:3px 9px; border-radius:999px; font-size:11px; font-weight:900; white-space:nowrap; line-height:1.4; }
        .friend-stat-pill.total { background:rgba(168,100,255,.18); border:1px solid rgba(168,100,255,.36); color:#c99cff; }
        .friend-stat-pill.online { background:rgba(40,214,194,.14); border:1px solid rgba(40,214,194,.30); color:#7df8e8; }

        /* ── inner mailbox sub-buttons ── */
        .mailbox-sub-btn { background:linear-gradient(135deg,rgba(40,214,194,.12),rgba(125,248,232,.04)),rgba(5,12,22,.44); border-color:rgba(40,214,194,.26); color:#a8e8e0; }
        .mailbox-sub-btn:hover { background:linear-gradient(135deg,rgba(40,214,194,.20),rgba(125,248,232,.08)),rgba(5,12,22,.54); border-color:rgba(40,214,194,.50); }
        .check-row { display:flex; gap:10px; align-items:flex-start; color:#cdd6d0; font-size:13px; line-height:1.45; }
        .check-row input { width:18px; min-width:18px; height:18px; min-height:18px; margin-top:2px; padding:0; accent-color:#28d6c2; }
        .legal-check-all {
            justify-self:start;
            min-height:34px;
            padding:0 12px;
            border:1px solid rgba(125,248,232,.28);
            color:#fff7c2;
            background:linear-gradient(135deg, rgba(40,214,194,.14), rgba(240,189,66,.08));
            box-shadow:none;
            font-size:12px;
        }
        .legal-check-all:hover { border-color:rgba(125,248,232,.46); }
        .toggle-row { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; color:#cdd6d0; font-size:14px; }
        .toggle-row input[type=checkbox] { width:18px; min-width:18px; height:18px; margin:0; padding:0; accent-color:#28d6c2; cursor:pointer; }
        .settings-group { display:grid; gap:10px; padding-bottom:16px; border-bottom:1px solid rgba(244,248,242,.10); }
        .settings-group:last-child { border-bottom:none; padding-bottom:0; }
        .settings-group-label { font-size:11px; font-weight:1000; text-transform:uppercase; letter-spacing:.08em; color:#7dff9b; margin:0; }
        .lobby-invite-notice { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; background:rgba(40,214,194,.12); border:1px solid rgba(40,214,194,.28); color:#cdd6d0; font-size:13px; }
        .lobby-invite-notice a { color:#28d6c2; font-weight:900; text-decoration:none; white-space:nowrap; }
        .lobby-invite-notice a:hover { text-decoration:underline; }
        .oauth-box { display:grid; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,238,189,.14); }
        .oauth-box .muted { font-size:13px; }
        .oauth-buttons { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
        .oauth-consent-form { display:grid; gap:8px; padding:10px; border:1px solid rgba(255,238,189,.14); border-radius:8px; background:rgba(244,248,242,.04); }
        .oauth-consent-form .check-row { font-size:12px; }
        .oauth-consent-form .legal-check-all { min-height:32px; font-size:11px; }
        .oauth-button { min-height:46px; justify-content:center; gap:10px; color:#f4f8f2; border:1px solid rgba(255,238,189,.24); background:rgba(244,248,242,.08); }
        .oauth-button.google { color:#1f1f1f; border-color:#747775; background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.18); }
        .oauth-google-mark { display:grid; width:20px; height:20px; place-items:center; flex:0 0 20px; }
        .oauth-google-mark svg { display:block; width:18px; height:18px; }
        .oauth-quick-panel { border-radius:8px; overflow:hidden; }
        .oauth-quick-panel .oauth-box { margin-top:0; padding:12px; border-top:none; border:1px solid rgba(255,238,189,.18); border-radius:8px; background:linear-gradient(135deg,rgba(7,12,24,.82),rgba(18,10,24,.72)); backdrop-filter:blur(10px); }
        .btn.oauth-switcher-btn { gap:8px; color:#1f1f1f; border-color:#dadce0; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.9); transition:box-shadow .14s ease, filter .14s ease; }
        .btn.oauth-switcher-btn:hover { filter:brightness(.97); box-shadow:0 8px 26px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.9); }
        .btn.btn-register-cta { position:relative; overflow:hidden; color:#1a0e00; border:1px solid rgba(240,189,66,.65); background:linear-gradient(135deg,#c9920a 0%,#f0bd42 46%,#ffd87a 100%); box-shadow:0 6px 24px rgba(240,189,66,.45),0 0 0 1px rgba(255,215,80,.22); font-weight:1000; letter-spacing:.01em; transition:box-shadow .15s ease, filter .15s ease; }
        .btn.btn-register-cta::before { content:''; position:absolute; inset:0; background:linear-gradient(160deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 48%); pointer-events:none; }
        .btn.btn-register-cta:hover { filter:brightness(1.09); box-shadow:0 8px 32px rgba(240,189,66,.62),0 0 0 1px rgba(255,215,80,.40); }
        .switcher, .actions { display:flex; flex-wrap:wrap; gap:8px; }
        .msg, .err { margin-bottom:12px; padding:10px 12px; border-radius:8px; background:rgba(40,214,194,.16); }
        .err { background:rgba(255,79,109,.18); }
        .muted { color:#aab4ae; font-size:13px; line-height:1.45; }
        .notification-badge {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:22px;
            height:22px;
            padding:0 7px;
            border-radius:999px;
            background:#ff4f6d;
            color:#fff;
            font-size:12px;
            font-weight:900;
            line-height:1;
            box-shadow:0 0 0 2px rgba(4,7,15,.9), 0 8px 20px rgba(255,79,109,.35);
        }
        .password-wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
        .match-note.ok { color:#7dff9b; }
        .match-note.bad { color:#ff9a9f; }
        .avatar-trigger {
            display:grid;
            justify-items:center;
            gap:22px;
            width:max-content;
            margin:10px auto 12px;
            padding:0;
            border:0;
            color:#fff7c2;
            background:transparent;
            cursor:pointer;
            text-align:center;
            font:inherit;
            font-weight:900;
            justify-self:center;
        }
        .avatar-trigger > span:not(.profile-avatar-frame) { position:relative; z-index:4; }
        .profile-avatar { width:118px; height:118px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,238,189,.34); background:rgba(0,0,0,.24); box-shadow:0 0 0 10px rgba(240,189,66,.08), 0 18px 44px rgba(0,0,0,.34); }
        .profile-avatar-frame { display:inline-grid; width:118px; height:118px; place-items:center; position:relative; margin-bottom:8px; }
        .profile-avatar-frame.premium-ring > .profile-avatar { position:absolute; inset:0; width:100%; height:100%; border:none; box-shadow:none; object-fit:cover; }
        .profile-avatar-frame.premium-ring.char-img > .profile-avatar { inset:-21%; width:142%; height:142%; }
        .avatar-camera-btn { display:grid; min-height:96px; place-items:center; gap:6px; padding:10px; border:1px dashed rgba(40,214,194,.48); border-radius:8px; color:#071018; background:#28d6c2; font-weight:1000; text-align:center; cursor:pointer; font:inherit; }
        .avatar-camera-btn small { font-weight:400; }
        .auth-camera-overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.84); }
        .auth-camera-card { display:grid; gap:12px; width:min(300px,100%); padding:16px; border:1px solid rgba(255,238,189,.22); border-radius:8px; background:rgba(7,12,24,.96); text-align:center; }
        .camera-outer { position:relative; width:220px; height:220px; margin:0 auto; }
        .camera-viewport { position:absolute; inset:0; overflow:hidden; border-radius:50%; background:#000; cursor:grab; touch-action:none; user-select:none; }
        .camera-viewport:active { cursor:grabbing; }
        .camera-inner { position:absolute; inset:0; transform-origin:center; }
        #cameraVideo { width:100%; height:100%; object-fit:cover; pointer-events:none; display:block; }
        .camera-ring-overlay { position:absolute; inset:-30%; pointer-events:none; z-index:2; background:center / contain no-repeat; }
        .camera-preview-outer { position:relative; width:220px; height:220px; margin:0 auto; }
        #cameraPreviewCanvas { display:block; width:220px; height:220px; border-radius:50%; }
        .camera-controls { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
        .camera-hint { font-size:12px; color:rgba(255,247,194,.55); text-align:center; margin:8px 0 0; }
        .camera-error { color:#ff9a9f; font-size:13px; text-align:center; margin:4px 0; }
        .profile-avatar-frame .profile-avatar { width:100%; height:100%; }
        .premium-name { color:#ffe18a; text-shadow:0 0 18px rgba(240,189,66,.28); }
        .premium-pill {
            display:inline-flex; width:max-content; align-items:center; gap:7px; min-height:28px; padding:0 10px;
            border:1px solid rgba(240,189,66,.62); border-radius:999px; color:#fff7c2;
            background:linear-gradient(135deg, rgba(240,189,66,.26), rgba(255,247,194,.10));
            font-size:12px; font-weight:1000; text-transform:uppercase;
        }
        .premium-panel { border-color:rgba(240,189,66,.38); background:linear-gradient(145deg, rgba(42,28,5,.36), rgba(7,12,24,.72)); }
        .premium-panel > .section-toggle { background:linear-gradient(135deg, rgba(240,189,66,.28), rgba(255,247,194,.10) 50%, rgba(200,150,30,.18)); border-color:rgba(240,189,66,.55); color:#fff7c2; letter-spacing:.02em; }
        .premium-panel > .section-toggle:hover { border-color:rgba(240,189,66,.85); background:linear-gradient(135deg, rgba(240,189,66,.38), rgba(255,247,194,.20) 50%, rgba(200,150,30,.26)); }
        #premiumVisualForm .hidden-select-label,
        #premiumVisualForm > button[type="submit"] { display:none; }
        .prem-save-footer { display:none; align-items:center; gap:12px; grid-column:1 / -1; margin-top:4px; }
        .prem-save-footer.visible { display:flex; }
        #premiumSaveBtn { padding:10px 22px; font-weight:800; background:linear-gradient(135deg,rgba(240,189,66,.72),rgba(200,140,20,.80)); border:1px solid rgba(240,189,66,.70); color:#1a1200; border-radius:10px; cursor:pointer; font-size:14px; transition:opacity .15s; }
        #premiumSaveBtn:disabled { opacity:.55; cursor:not-allowed; }
        #premiumSaveBtn:not(:disabled):hover { opacity:.85; }
        .prem-save-status { font-size:13px; font-weight:700; }
        .prem-save-status.ok { color:#69db7c; }
        .prem-save-status.err { color:#ff8787; }
        .prem-settings-list { display:grid; gap:6px; grid-column:1 / -1; width:100%; }
        .prem-setting-item { display:grid; }
        .prem-setting-row {
            display:flex; align-items:center; gap:14px; width:100%;
            padding:12px 14px; font:inherit; cursor:pointer; text-align:left;
            border:1px solid rgba(240,189,66,.20); border-radius:10px;
            background:rgba(240,189,66,.04); color:#f4f8f2;
            transition:border-color .15s, background .15s;
        }
        .prem-setting-row:hover { border-color:rgba(240,189,66,.48); background:rgba(240,189,66,.10); }
        .prem-setting-row.open { border-radius:10px 10px 0 0; border-color:rgba(240,189,66,.52); background:rgba(240,189,66,.12); }
        .prem-setting-icon {
            width:52px; height:52px; flex-shrink:0;
            display:flex; align-items:center; justify-content:center;
            border-radius:8px; background:rgba(0,0,0,.32); overflow:hidden;
        }
        .prem-setting-info { flex:1; min-width:0; }
        .prem-setting-name { display:block; font-weight:900; color:#fff7c2; font-size:15px; }
        .prem-setting-desc { display:block; font-size:12px; color:#aab4ae; margin-top:3px; line-height:1.45; }
        .prem-setting-current { display:block; font-size:12px; color:rgba(240,189,66,.85); margin-top:4px; font-weight:700; }
        .prem-setting-arrow { color:rgba(240,189,66,.45); font-size:22px; flex-shrink:0; transition:transform .2s; line-height:1; font-weight:300; }
        .prem-setting-row.open .prem-setting-arrow { transform:rotate(90deg); color:rgba(240,189,66,.85); }
        .prem-setting-item .premium-choice-panel {
            padding:14px 14px 16px; border:1px solid rgba(240,189,66,.30);
            border-top:0; border-radius:0 0 10px 10px; background:rgba(0,0,0,.22);
        }
        .premium-choice-panel { display:grid; gap:10px; }
        .premium-choice-panel-title { font-size:13px; font-weight:700; color:#fff7c2; margin-bottom:2px; }
        .premium-preview-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:10px; margin-top:10px; }
        .premium-glow-choices { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; }
        .premium-glow-choice { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 8px; border:1px solid rgba(255,238,189,.20); border-radius:8px; background:rgba(244,248,242,.06); font-weight:900; font-size:12px; color:#fff7c2; cursor:pointer; font:inherit; }
        .premium-glow-choice.active { border-color:#ffe18a; box-shadow:0 0 0 2px rgba(240,189,66,.22); }
        .glow-dot { width:24px; height:24px; border-radius:50%; border:1px solid rgba(255,255,255,.30); }
        .glow-none-icon { width:24px; height:24px; display:grid; place-items:center; font-size:16px; color:rgba(255,255,255,.40); }
        .premium-glow-custom { display:flex; align-items:center; gap:8px; padding:10px 8px; border:1px solid rgba(255,238,189,.20); border-radius:8px; background:rgba(244,248,242,.06); }
        .premium-badge-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(90px, 1fr)); gap:8px; }
        .premium-badge-choice { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; border:1px solid rgba(255,238,189,.20); border-radius:8px; background:rgba(244,248,242,.06); cursor:pointer; font:inherit; color:#fff7c2; }
        .premium-badge-choice.active { border-color:#ffe18a; box-shadow:0 0 0 2px rgba(240,189,66,.22); }
        .premium-badge-preview { font-size:22px; line-height:1; }
        .premium-color-section { display:grid; gap:6px; }
        .premium-color-section-title { font-size:12px; color:rgba(255,247,194,.70); font-weight:700; }
        .premium-choice {
            position:relative;
            display:grid;
            gap:8px;
            padding:8px;
            border:1px solid rgba(255,238,189,.20);
            border-radius:8px;
            color:#fff7c2;
            background:rgba(244,248,242,.06);
            cursor:pointer;
            font:inherit;
            font-weight:1000;
            text-align:center;
        }
        .premium-choice.active { border-color:#ffe18a; box-shadow:0 0 0 2px rgba(240,189,66,.22), 0 16px 36px rgba(0,0,0,.24); }
        .premium-ring-choice {
            min-height:150px;
            place-items:center;
            align-content:center;
        }
        .premium-ring-choice .ring-face {
            display:grid;
            width:74px;
            height:74px;
            place-items:center;
            border:2px solid rgba(255,238,189,.58);
            border-radius:50%;
            background:rgba(0,0,0,.30) url("/assets/optimized/malelogostrona.webp") center / 52% no-repeat;
        }
        .premium-profile-preview {
            display:flex;
            align-items:center;
            gap:12px;
            padding:10px;
            border:1px solid rgba(255,238,189,.20);
            border-radius:8px;
            background:rgba(0,0,0,.18);
        }
        .premium-profile-preview img {
            display:block;
            width:92px;
            height:92px;
            object-fit:contain;
            border-radius:8px;
            background:rgba(0,0,0,.18);
        }
        .premium-profile-preview b { color:#fff7c2; }
        .premium-current-previews { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
        .color-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:8px; }
        .color-choice { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid rgba(255,238,189,.20); border-radius:8px; background:rgba(244,248,242,.06); font-weight:900; cursor:pointer; font:inherit; color:#fff7c2; }
        .color-choice.active { border-color:#ffe18a; box-shadow:0 0 0 2px rgba(240,189,66,.22); }
        .color-choice input { width:auto; min-height:0; }
        .color-dot { width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,.45); box-shadow:0 0 18px currentColor; }
        .premium-card-preview-mini {
            display:grid;
            min-height:158px;
            align-content:space-between;
            padding:10px;
            border:1px solid rgba(255,238,189,.22);
            border-radius:8px;
            background:linear-gradient(180deg, rgba(255,247,194,.12), rgba(16,32,24,.72));
            color:#fff7c2;
            font-weight:1000;
            text-align:center;
        }
        .premium-card-preview-mini.spy { background:linear-gradient(180deg, rgba(255,247,194,.12), rgba(52,14,18,.78)); }
        .premium-card-preview-mini.standard { background:linear-gradient(180deg, rgba(125,248,232,.14), rgba(11,17,31,.82)); }
        .premium-card-preview-mini.set2 { background-image:url("/assets/optimized/prem2pc.webp"); background-size:cover; background-position:center; }
        .premium-card-preview-mini.set3 { background-image:url("/assets/optimized/prem3pw.webp"); background-size:cover; background-position:center; }
        .premium-card-preview-mini.classic { background-image:url("/assets/optimized/premc.webp"); background-size:cover; background-position:center; }
        .premium-card-preview-mini span { text-shadow:0 3px 12px rgba(0,0,0,.85); }
        .premium-ring.ring-1 { border-color:#c6a15b; box-shadow:0 0 0 3px #1a1d22, inset 0 0 0 3px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-2 { border-color:#b88a48; box-shadow:0 0 0 4px #7b5a34, 0 0 0 8px #1d1a16, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-3 { border-color:#9a1f1f; box-shadow:0 -6px 0 -2px #cfb071, 0 0 0 4px #211612, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-4 { border-color:#d9c08a; box-shadow:0 -8px 0 -2px #d9c08a, -8px 0 0 -2px #2e263f, 8px 0 0 -2px #2e263f, 0 0 0 5px #19151e, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-5 { border-color:#b59a62; box-shadow:0 0 0 3px #241d14, 0 9px 0 -2px #2b2116, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-6 { border-color:#20b8bd; box-shadow:0 0 0 3px #101820, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-7 { border-color:#1fb8bd; box-shadow:0 0 0 3px #102027, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-8 { border-color:#b49562; box-shadow:0 0 0 3px #1a1c22, 9px 0 0 -2px #3b4250, -9px 0 0 -2px #3b4250, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-9 { border-color:#c79b4b; box-shadow:0 -8px 0 -3px #d6b36d, 0 0 0 4px #392614, 0 9px 0 -2px #8c1f1f, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-10 { border-color:#c3c3c3; box-shadow:0 0 0 4px #30343a, -7px 7px 0 -2px #9b2020, 7px 7px 0 -2px #9b2020, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-11 { border-color:#789c43; box-shadow:0 0 0 4px #172313, 0 -8px 0 -2px #c4a047, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-12 { border-color:#2a3340; box-shadow:0 -10px 0 -2px #202936, 0 0 0 5px #10151d, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-13 { border-color:#dd3030; box-shadow:0 0 0 4px #1d2229, 0 14px 34px rgba(0,0,0,.38); }
        .premium-glow-on.premium-ring.ring-13 { box-shadow:0 0 0 4px #1d2229, 0 0 24px rgba(255,36,36,.44), 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-14 { border-color:#242938; box-shadow:0 -8px 0 -1px #11151e, 0 0 0 5px #171b25, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-15 { border-color:#b58a50; box-shadow:0 0 0 4px #4d3821, 0 -8px 0 -2px #d7bf90, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring.ring-16 { border-color:#8f52c8; box-shadow:0 -8px 0 -2px #d3a844, 0 0 0 4px #281734, 0 14px 34px rgba(0,0,0,.38); }
        .premium-ring { --premium-ring-image:url("/pierscienie/clean/opt/celownik.png"); position:relative; overflow:visible !important; box-shadow:none !important; }
        .premium-glow-none { filter:none; }
        .premium-glow-on { filter:drop-shadow(0 0 16px var(--premium-glow-color, #ffe18a)); }
        .premium-ring.ring-1 { --premium-ring-image:url("/pierscienie/clean/opt/celownik.png"); }
        .premium-ring.ring-2 { --premium-ring-image:url("/pierscienie/clean/opt/top_secret.png"); }
        .premium-ring.ring-3 { --premium-ring-image:url("/pierscienie/clean/opt/dagger.png"); }
        .premium-ring.ring-4 { --premium-ring-image:url("/pierscienie/clean/opt/maska.png"); }
        .premium-ring.ring-5 { --premium-ring-image:url("/pierscienie/clean/opt/klucznik.png"); }
        .premium-ring.ring-6 { --premium-ring-image:url("/pierscienie/clean/opt/zagadka.png"); }
        .premium-ring.ring-7 { --premium-ring-image:url("/pierscienie/clean/opt/runy.png"); }
        .premium-ring.ring-8 { --premium-ring-image:url("/pierscienie/clean/opt/tajemne.png"); }
        .premium-ring.ring-9 { --premium-ring-image:url("/pierscienie/clean/opt/pieczec.png"); }
        .premium-ring.ring-10 { --premium-ring-image:url("/pierscienie/clean/opt/assassin.png"); }
        .premium-ring.ring-11 { --premium-ring-image:url("/pierscienie/clean/opt/posion.png"); }
        .premium-ring.ring-12 { --premium-ring-image:url("/pierscienie/clean/opt/sztylety.png"); }
        .premium-ring.ring-13 { --premium-ring-image:url("/pierscienie/clean/opt/laser.png"); }
        .premium-ring.ring-14 { --premium-ring-image:url("/pierscienie/clean/opt/wanted.png"); }
        .premium-ring::after { content:""; position:absolute; inset:-30%; z-index:2; pointer-events:none; background:var(--premium-ring-image) center / contain no-repeat; }
        .ring-face.premium-ring { width:112px; height:112px; border:0 !important; border-image:none !important; background:var(--premium-ring-image) center / contain no-repeat !important; box-shadow:none !important; }
        .ring-face.premium-ring::after { content:none; }
        .avatar-dialog {
            position: fixed;
            inset: 0;
            z-index: 40;
            display: grid;
            place-items: center;
            padding: 18px;
            background: rgba(0,0,0,.72);
            overflow-y: auto;
        }
        .avatar-dialog-card {
            position: relative;
            display: grid;
            gap: 14px;
            width: min(620px, 100%);
            max-height: min(760px, calc(100vh - 36px));
            overflow: auto;
            padding: 18px;
            border: 1px solid rgba(255,238,189,.26);
            border-radius: 12px;
            background: rgba(7,12,24,.96);
            box-shadow: 0 28px 80px rgba(0,0,0,.48);
        }
        .avatar-dialog-close {
            position: absolute;
            top: 12px;
            right: 12px;
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            border: 1px solid rgba(255,238,189,.22);
            border-radius: 50%;
            color: #fff;
            background: rgba(255,79,109,.24);
            font-size: 24px;
            line-height: 1;
            cursor: pointer;
        }
        .avatar-dialog-card > .friend-row { padding-right: 48px; }
        @media (max-width: 640px) {
            .avatar-dialog {
                align-items: flex-start;
                padding: max(env(safe-area-inset-top, 0px) + 14px, 14px) 10px 24px;
            }
            .avatar-dialog-card {
                max-height: none;
                border-radius: 10px;
            }
            .avatar-dialog-card > .friend-row {
                flex-direction: column;
                align-items: flex-start;
                padding-right: 48px;
                gap: 6px;
            }
            .avatar-dialog-card > .friend-row > button[data-avatar-dialog-close] {
                display: none;
            }
        }
        .character-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(76px, 1fr)); gap:10px; }
        .character-form { margin:0; }
        .character-option {
            display:grid;
            width:100%;
            gap:6px;
            place-items:center;
            min-height:96px;
            padding:8px;
            border:1px solid rgba(255,238,189,.18);
            border-radius:8px;
            color:#fff7c2;
            background:rgba(244,248,242,.08);
            cursor:pointer;
        }
        .character-option.active { border-color:rgba(40,214,194,.68); background:rgba(40,214,194,.14); }
        .character-option.locked { opacity:.58; filter:saturate(.55); cursor:not-allowed; }
        .character-option img { width:62px; height:62px; object-fit:cover; border-radius:50%; }
        .avatar-upload-label {
            display:grid;
            min-height:96px;
            place-items:center;
            gap:6px;
            padding:10px;
            border:1px dashed rgba(125,248,232,.48);
            border-radius:8px;
            color:#101211;
            background:#28d6c2;
            font-weight:1000;
            text-align:center;
            cursor:pointer;
        }
        .avatar-upload-label input { display:none; }
        .friend-row, .message-row, .history-row {
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            padding:9px 10px;
            border-radius:8px;
            background:rgba(244,248,242,.08);
        }
        .history-row { align-items:flex-start; flex-direction:column; }
        .history-details { width:100%; color:rgba(244,248,242,.78); }
        .history-details summary { cursor:pointer; font-weight:900; color:#7df8e8; }
        .history-details p { margin:6px 0 0; }
        .friend-row .actions { flex:0 0 auto; justify-content:flex-end; }
        .friend-row .actions form { margin:0; }
        .friend-row .actions button { min-width:96px; }
        .friend-main { display:flex; align-items:center; gap:10px; min-width:0; }
        a.friend-main { color:#f4f8f2; text-decoration:none; }
        a.friend-main:hover b { color:#7df8e8; }
        .friend-main b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .friend-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; background:rgba(0,0,0,.24); }
        .friend-profile-hero { display:flex; align-items:flex-start; gap:28px; flex-wrap:wrap; }
        .friend-profile-hero .profile-avatar,
        .friend-profile-hero .profile-avatar-frame { width:86px; height:86px; flex-shrink:0; margin-bottom:0; margin-top:6px; }
        .nick-badge-hero { font-size:.85em; opacity:.85; }
        .profile-panel-nick { margin-bottom:24px; text-align:center; }
        .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#778079; margin-right:5px; }
        .dot.online { background:#7dff9b; }
        .mailbox { display:grid; grid-template-columns:240px minmax(0,1fr); gap:12px; }
        .mailbox-list { display:grid; grid-template-columns:1fr; gap:8px; align-content:start; max-height:420px; overflow-y:auto; padding-right:4px; }
        .mailbox-list .btn { width:100%; min-height:46px; justify-content:flex-start; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px; }
        .mailbox-heading { margin:6px 0 0; color:#fff7c2; font-size:13px; font-weight:1000; text-transform:uppercase; }
        .mailbox-pages { display:flex; flex-wrap:wrap; gap:6px; }
        .mailbox-pages .btn { min-height:32px; padding:0 10px; }
        .mailbox-panel { display:grid; gap:10px; padding:12px; border:1px solid rgba(255,238,189,.14); border-radius:8px; background:rgba(244,248,242,.045); }
        .mailbox-panel-toggle { width:100%; justify-content:space-between; }
        .inbox-thread { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; width:100%; min-height:58px; padding:10px 12px; border:1px solid rgba(244,248,242,.12); border-radius:8px; color:#f4f8f2; background:rgba(244,248,242,.07); text-align:left; text-decoration:none; transition:border-color .14s,background .14s; }
        .inbox-thread:hover:not(.active) { border-color:rgba(125,248,232,.22); background:rgba(244,248,242,.11); }
        .inbox-thread.active { border-color:rgba(40,214,194,.48); background:rgba(40,214,194,.13); }
        .inbox-thread b, .inbox-thread span, .inbox-thread small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .inbox-thread small { grid-column:1 / -1; color:#aab4ae; font-weight:700; }
        .mail-send-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
        .mail-send-grid textarea { grid-column:1 / -1; }
        .chat-shell { position:relative; display:grid; gap:8px; }
        .chat-scroll-btn { position:absolute; right:12px; bottom:92px; z-index:3; min-height:34px; padding:0 11px; border-radius:999px; color:#101211; background:#7df8e8; box-shadow:0 12px 28px rgba(0,0,0,.32); }
        .chat-scroll-btn[hidden] { display:none !important; }
        .emoji-row { display:flex; flex-wrap:wrap; gap:6px; }
        .emoji-toggle, .emoji-btn { min-height:34px; padding:0 10px; border:1px solid rgba(255,238,189,.20); color:#fff7c2; background:rgba(244,248,242,.08); box-shadow:none; }
        .emoji-panel { display:flex; flex-wrap:wrap; gap:6px; padding:8px; border:1px solid rgba(255,238,189,.14); border-radius:8px; background:rgba(0,0,0,.20); }
        .group-create-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; max-height:220px; overflow:auto; padding-right:4px; }
        .group-create-list label { display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; background:rgba(244,248,242,.07); font-weight:800; }
        .group-create-list input { width:auto; min-height:0; }
        @keyframes chatFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
        .conversation { display:flex; flex-direction:column; gap:6px; max-height:420px; overflow-y:auto; padding:12px 8px; border:1px solid rgba(255,238,189,.08); border-radius:8px; background:rgba(0,0,0,.12); }
        .conversation.chat-loading { opacity:.4; pointer-events:none; }
        .conversation.chat-fade-in { animation:chatFadeIn .22s ease forwards; }
        .message-row { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; max-width:82%; gap:2px; background:none; padding:0; }
        .message-row.mine { align-self:flex-end; align-items:flex-end; }
        .message-row > b { font-size:11px; color:#5a7870; font-weight:700; padding:0 4px; line-height:1.2; }
        .message-row.mine > b { color:#3daaa2; }
        .message-row > span { display:block; padding:8px 13px; border-radius:16px 16px 16px 4px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.08); line-height:1.5; font-size:14px; word-break:break-word; color:#dce8e4; }
        .message-row.mine > span { border-radius:16px 16px 4px 16px; background:linear-gradient(135deg,rgba(40,214,194,.28),rgba(125,248,232,.14)); border-color:rgba(40,214,194,.24); color:#d0f5f0; }
        .message-row > p.muted { font-size:10px; margin:0; padding:0 4px; color:#5a7870; }
        .stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:10px; }
        .stat-card { padding:12px; border-radius:8px; background:rgba(0,0,0,.22); }
        .stat-card b { display:block; color:#fff7c2; font-size:28px; }
        .stat-card small { display:block; margin-top:3px; color:#aab4ae; font-weight:800; }
        .stat-card-locked { border:1px dashed rgba(240,189,66,.28); background:rgba(240,189,66,.04); }
        .stat-card-locked b { font-size:16px; }
        .stat-card-locked a { color:#f0bd42; text-decoration:none; font-weight:900; font-size:14px; }
        .stat-card-locked a:hover { text-decoration:underline; }
        .ach-panel-header { display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:1px solid rgba(240,189,66,.16); margin-bottom:16px; }
        .ach-trophy-icon { flex:0 0 48px; width:48px; height:48px; }
        .ach-header-text { flex:1; min-width:0; }
        .ach-title { font-size:18px; font-weight:1000; background:linear-gradient(90deg,#fff7c2 0%,#f0bd42 48%,#7df8e8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-transform:uppercase; letter-spacing:.8px; line-height:1.1; }
        .ach-count-label { font-size:13px; color:#aab4ae; font-weight:400; margin-left:6px; }
        .ach-progress-bar { height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:7px; }
        .ach-progress-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#f0bd42,#7df8e8); box-shadow:0 0 8px rgba(125,248,232,.35); transition:width .5s ease; }
        .ach-progress-label { font-size:10px; color:#5c7065; margin-top:4px; display:block; }
        .achievements-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; }
        .ach-badge { position:relative; display:flex; flex-direction:column; align-items:center; padding:18px 10px 13px; border:1px solid rgba(240,189,66,.28); border-radius:12px; background:linear-gradient(160deg,rgba(240,189,66,.10) 0%,rgba(7,12,24,.96) 55%); text-align:center; overflow:hidden; transition:transform .18s ease,box-shadow .18s ease; cursor:default; }
        .ach-badge::before { content:''; position:absolute; top:0; left:0; right:0; height:45%; background:radial-gradient(ellipse at 50% -10%,rgba(240,189,66,.22),transparent 70%); pointer-events:none; }
        .ach-badge:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 12px 36px rgba(240,189,66,.22),0 0 0 1px rgba(240,189,66,.45); }
        .ach-icon-wrap { position:relative; z-index:1; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle,rgba(240,189,66,.20),rgba(240,189,66,.04)); box-shadow:0 0 0 1px rgba(240,189,66,.35),0 0 22px rgba(240,189,66,.20); margin-bottom:10px; flex-shrink:0; }
        .ach-icon { font-size:24px; line-height:1; display:block; }
        .ach-name { display:block; font-weight:900; font-size:12px; color:#fff7c2; z-index:1; position:relative; }
        .ach-desc { display:block; font-size:10px; color:#7a8d82; line-height:1.35; margin-top:3px; z-index:1; position:relative; }
        .ach-date { display:block; font-size:10px; color:#3d5044; margin-top:6px; z-index:1; position:relative; }
        .ach-empty-state { display:grid; place-items:center; gap:10px; padding:30px 20px; text-align:center; }
        .ach-empty-state p { color:#5c7065; font-size:13px; margin:0; line-height:1.5; }
        @media (max-width:800px) {
            body::before { background-image:url("/assets/optimized/tlomobprofil.webp"); background-position:center top; }
            body::after { background:linear-gradient(180deg, rgba(2,7,21,.44), rgba(2,7,21,.20) 38%, rgba(3,5,10,.58)); }
            .wrap { width:min(100% - 20px, 1120px); padding-top:18px; }
            .top { flex-wrap:wrap; }
            .brand { gap:9px; font-size:clamp(18px, 6.2vw, 23px); line-height:1; }
            .brand-mark { width:44px; height:44px; }
            .mobile-menu-toggle {
                display:inline-flex; min-height:36px; width:min(110px,30vw); align-items:center; justify-content:center; gap:6px;
                margin-left:auto; padding:0 10px; border:1px solid rgba(255,238,189,.32); border-radius:8px;
                color:#fff7c2; background:linear-gradient(135deg,rgba(40,214,194,.16),rgba(240,189,66,.10)),rgba(5,12,22,.70);
                box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08); font-weight:1000; cursor:pointer; backdrop-filter:blur(10px);
            }
            .top-actions {
                display:none; width:100%; order:3; grid-template-columns:1fr; gap:8px; margin-left:0; padding:10px;
                border:1px solid rgba(255,238,189,.18); border-radius:8px;
                background:linear-gradient(145deg,rgba(7,12,24,.90),rgba(18,10,24,.84)),rgba(5,12,22,.86);
                box-shadow:0 20px 52px rgba(0,0,0,.34); backdrop-filter:blur(14px);
            }
            .top.menu-open .top-actions { display:grid; }
            .top-actions .btn { width:100%; min-height:42px; justify-content:center; font-size:14px; }
            .panel { padding:14px; background:rgba(7,12,24,.66); backdrop-filter:blur(10px); }
            .profile-grid, .mailbox { grid-template-columns:1fr; }
            .friend-row { align-items:stretch; flex-direction:column; }
            .friend-row .actions { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); width:100%; }
            .friend-row .actions button { width:100%; min-width:0; }
            .prem-settings-list { gap:5px; }
            .oauth-buttons { grid-template-columns:1fr; }
            .mailbox-list { grid-template-columns:1fr; }
            .mailbox-list .btn { justify-content:center; }
            .mail-send-grid { grid-template-columns:1fr; }
            .mail-send-grid textarea { grid-column:auto; }
            .avatar-trigger { margin-inline:auto; }
            .character-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
            .lobby-invite-notice { flex-wrap:wrap; gap:8px; }
        }

        .account-hero {
            display: grid;
            gap: 18px;
            padding: clamp(20px, 3vw, 32px) clamp(18px, 3vw, 28px);
            margin-bottom: 18px;
            border: 1px solid rgba(240, 189, 66, 0.42);
            border-radius: 12px;
            background:
                radial-gradient(circle at 90% 10%, rgba(240, 189, 66, 0.18), transparent 38%),
                radial-gradient(circle at 10% 80%, rgba(125, 248, 232, 0.12), transparent 38%),
                linear-gradient(135deg, rgba(7, 12, 24, 0.92), rgba(18, 10, 24, 0.82));
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(240, 189, 66, 0.10) inset;
            backdrop-filter: blur(12px);
        }

        .account-hero-badge {
            display: inline-flex;
            width: max-content;
            align-items: center;
            gap: 8px;
            padding: 5px 12px;
            border: 1px solid rgba(240, 189, 66, 0.54);
            border-radius: 20px;
            color: #f0bd42;
            background: rgba(240, 189, 66, 0.10);
            font-size: 12px;
            font-weight: 1000;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .account-hero h2 {
            margin: 0;
            font-size: clamp(22px, 4vw, 36px);
            font-weight: 1000;
            line-height: 1.1;
            color: #fff7c2;
            text-shadow: 0 4px 20px rgba(240, 189, 66, 0.24);
        }

        .account-hero h2 span {
            background: linear-gradient(90deg, #fff7c2, #f0bd42 50%, #7df8e8);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .account-hero-lead {
            margin: 0;
            color: rgba(244, 248, 242, 0.78);
            font-size: 15px;
            line-height: 1.5;
            font-weight: 600;
            max-width: 600px;
        }

        .account-hero-perks {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 8px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .account-hero-perks li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 11px 13px;
            border: 1px solid rgba(255, 238, 189, 0.14);
            border-radius: 8px;
            background: rgba(255, 247, 194, 0.05);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.4;
            color: rgba(244, 248, 242, 0.88);
        }

        .account-hero-perks li .perk-icon {
            font-size: 18px;
            line-height: 1;
            flex-shrink: 0;
        }

        .account-hero-cta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .account-hero-cta .btn-hero-register {
            min-height: 48px;
            padding: 0 24px;
            border-color: rgba(255, 247, 194, 0.72);
            color: #281805;
            background: linear-gradient(135deg, #fff7c2, #f0bd42 52%, #7df8e8);
            box-shadow: 0 14px 38px rgba(240, 189, 66, 0.28), 0 0 28px rgba(240, 189, 66, 0.16);
            font-size: 16px;
            font-weight: 1000;
            text-decoration: none;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .account-hero-cta .btn-hero-login {
            color: rgba(244, 248, 242, 0.72);
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            padding: 0 4px;
        }

        .account-hero-cta .btn-hero-login:hover { color: #7df8e8; }

        /* Desktop: CTA buttons inside hero are replaced by the renamed switcher tabs */
        .account-hero-cta { display: none; }

        /* Mobile-only hero toggle button */
        .hero-toggle-btn {
            display: none;
        }

        @media (max-width: 600px) {
            .account-hero-perks { grid-template-columns: 1fr; }

            /* On mobile the hero panel is collapsed by default */
            .account-hero {
                display: none;
                margin-bottom: 0;
                border-radius: 0 0 12px 12px;
                border-top: none;
            }
            .account-hero.hero-open {
                display: grid;
            }

            /* Reveal the toggle button on mobile */
            .hero-toggle-btn {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                width: 100%;
                padding: 15px 18px;
                margin-bottom: 14px;
                border: none;
                border-radius: 12px;
                cursor: pointer;
                font-family: inherit;
                font-size: 15px;
                font-weight: 1000;
                color: #1a0e00;
                background: linear-gradient(115deg, #fff7c2 0%, #f0bd42 45%, #7df8e8 100%);
                box-shadow:
                    0 8px 28px rgba(240, 189, 66, 0.45),
                    0 2px 8px rgba(0,0,0,0.28),
                    0 0 0 1px rgba(255,247,194,0.5) inset;
                text-shadow: 0 1px 0 rgba(255,255,255,0.28);
                letter-spacing: 0.01em;
                line-height: 1.2;
                transition: box-shadow .18s, transform .12s;
                -webkit-tap-highlight-color: transparent;
            }
            .hero-toggle-btn:active {
                transform: scale(0.985);
                box-shadow: 0 4px 16px rgba(240, 189, 66, 0.38);
            }
            .hero-toggle-btn .htb-left {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .hero-toggle-btn .htb-icon {
                font-size: 20px;
                line-height: 1;
                flex-shrink: 0;
            }
            .hero-toggle-btn .htb-arrow {
                font-size: 20px;
                font-weight: 900;
                flex-shrink: 0;
                transition: transform .22s ease;
                line-height: 1;
            }
            .hero-toggle-btn.hero-open .htb-arrow {
                transform: rotate(90deg);
            }
            /* When open, fuse hero visually with toggle */
            .hero-toggle-btn.hero-open {
                border-radius: 12px 12px 0 0;
                margin-bottom: 0;
                box-shadow:
                    0 4px 16px rgba(240, 189, 66, 0.32),
                    0 0 0 1px rgba(255,247,194,0.4) inset;
            }
        }
        @media (hover:none), (pointer:coarse) {
            body::before,
            body::after { position:absolute; transform:none; }
            *,
            *::before,
            *::after { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
        }