@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
    /* -- Font Variables -- */
    --font-family: 'Inter', sans-serif;
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
    --text-tertiary: #888888;
    
    /* -- Card & Component Variables -- */
    --card-bg: rgba(20, 20, 22, 0.75);
    --card-border: 1px solid rgba(255, 255, 255, 0.05);
    --profile-avatar-border-width: 3px;
    --card-backdrop-blur: blur(12px);
    --card-header-bg: rgba(20, 20, 22, 0.65);
    --card-header-border: rgba(255,255,255,0.08);
    --card-header-blur: blur(10px);
    --feed-item-border: rgba(255,255,255,0.05);
    --feed-title-color: #ffffff;
    --feed-text-color: #aaaaaa;
    --feed-footer-color: #888888;
    --card-glow-shadow: none;
    --header-bg: linear-gradient(to right, #333, #222);
    --feed-item-bg: #252528;
    --feed-item-hover-bg: #333333;
    --feed-item-hover-border: rgba(255,255,255,0.16);
    --social-icon-color: #888888;
    --social-icon-hover-color: #ffffff;
    --social-bg: rgba(255,255,255,0.04);
    --social-border: rgba(255,255,255,0.08);
    --bg-overlay-blur: blur(8px);
    --music-player-bg: linear-gradient(180deg, rgba(27, 27, 27, 0.92), rgba(14, 14, 14, 0.95));
    --music-player-hover-bg: rgba(255,255,255,0.1);
    --music-player-accent: #1db954;

    --custom-cursor: default;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); background-color: #050608; background-image: radial-gradient(circle at top left, rgba(58, 190, 154, 0.14), transparent 28%), radial-gradient(circle at top right, rgba(108, 80, 194, 0.12), transparent 22%), linear-gradient(180deg, #08090d 0%, #050608 55%, #030405 100%); color: var(--text-primary); overflow-y: auto; overflow-x: hidden; perspective: 1000px; cursor: var(--custom-cursor); }
body { color-scheme: dark; }

/* --- INTRO & MAIN LAYOUT --- */
#intro-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; z-index: 1000; cursor: pointer; transition: opacity 1.5s ease-in-out; }
#intro-screen.hidden { opacity: 0; pointer-events: none; }
#intro-content { text-align: center; }
#intro-content h1 { font-weight: 500; font-size: 1.5rem; letter-spacing: 1px; }
#intro-content .logo-text { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-size: 0.9rem; color: #888; }
#main-content { position: relative; z-index: 0; opacity: 0; transition: opacity 1s ease-in 1s; }
#main-content.visible { opacity: 1; }
.hidden { display: none !important; }

.page-loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: radial-gradient(circle at top, rgba(115, 74, 255, 0.18), transparent 30%), rgba(3,4,7,0.94); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease; pointer-events: none; }
.page-loader.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.page-loader-mark { display: flex; align-items: center; gap: 14px; color: #fff; letter-spacing: 0.18em; font-size: 0.82rem; font-weight: 700; }
.page-loader-ring { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.16); border-top-color: #f194ff; border-right-color: #baf9e9; animation: page-loader-spin 0.8s linear infinite; box-shadow: 0 0 20px rgba(241,148,255,0.2); }
.page-loader-text { color: rgba(255,255,255,0.88); }
@keyframes page-loader-spin { to { transform: rotate(360deg); } }

/* --- BACKGROUND & OVERLAYS --- */
.video-background, .background-overlay, .audio-visualizer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
.video-background { z-index: -2; }
#bg-video { width: 100%; height: 100%; object-fit: cover; }
.background-overlay { z-index: -1; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: var(--bg-overlay-blur); }
.audio-visualizer { z-index: 0; top: 50%; transform: translateY(-50%); opacity: 0.15; pointer-events: none; }
.audio-visualizer img { width: 100%; height: auto; }

/* --- PROFILE CARD CONTAINER & CENTERING --- */
#profile-container { position: relative; z-index: 4; width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; }
#profile-container.is-home { display: block; padding: 0; }
#profile-container:not(.is-home) { min-height: 100vh; height: 100vh; align-items: center; padding: 10vh 0; overflow: hidden; }
#profile-container:not(.is-home) .profile-card { margin-top: 0; }

/* --- PROFILE CARD (Default 'card' style) --- */
.profile-card { position: relative; width: min(100%, 500px); background: var(--card-bg); border: var(--card-border); border-radius: 28px; padding: 14px; z-index: 10; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 54px rgba(0,0,0,0.34), var(--card-glow-shadow); animation: pulseGlow 5s infinite alternate; transform-style: preserve-3d; transform-origin: top center; transform: scale(var(--card-scale, 1)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 0.12s linear; backdrop-filter: var(--card-backdrop-blur); }
.profile-stack { width: min(100%, 520px); display: flex; flex-direction: column; gap: 10px; align-items: center; transform: scale(var(--stack-scale, 1)); transform-origin: center center; }
.profile-card-public { width: min(100%, 520px); padding: 12px; border-radius: 26px; }
@keyframes pulseGlow { from { box-shadow: var(--card-glow-shadow); } to { filter: brightness(1.2); box-shadow: var(--card-glow-shadow); } }
.profile-shell { position: relative; display: flex; flex-direction: column; gap: 8px; }
.profile-actions-row { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.profile-actions-row-copy-only { justify-content: flex-end; }
.profile-owner-btn, .profile-copy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; cursor: pointer; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.profile-owner-btn:hover, .profile-copy-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }
.profile-owner-btn.secondary, .profile-copy-btn { color: rgba(255,255,255,0.86); }
.profile-copy-btn { flex-shrink: 0; }
.profile-owner-btn { width: 42px; height: 42px; padding: 0; border-radius: 14px; background: rgba(8,10,14,0.66); border-color: rgba(255,255,255,0.16); backdrop-filter: blur(10px); }
.profile-owner-btn span { display: none; }
.profile-copy-btn.is-copied { color: #baf9e9; border-color: rgba(186, 249, 233, 0.35); background: rgba(186, 249, 233, 0.12); }
.profile-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-meta-item { padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.075); }
.profile-meta-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; }
.profile-meta-value { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-section { display: flex; flex-direction: column; gap: 8px; }
.profile-section-head { display: flex; flex-direction: column; gap: 5px; }
.profile-section-kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
.profile-section-title { font-size: 0.92rem; font-weight: 700; color: #fff; }
.profile-summary { margin-top: 8px; color: rgba(255,255,255,0.72); font-size: 0.86rem; line-height: 1.55; max-width: 520px; }
.profile-summary-placeholder { color: rgba(255,255,255,0.46); }
.profile-live-zone { position: relative; }
.profile-live-zone-banner { min-height: 48px; }
.profile-live-zone-summary { margin-top: 8px; min-height: 24px; }
.profile-live-edit-btn { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(6,8,12,0.72); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; opacity: 0; transform: translateY(4px); transition: opacity 0.14s ease, transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease; backdrop-filter: blur(12px); }
.profile-live-zone:hover .profile-live-edit-btn, body.is-live-edit-mode .profile-live-edit-btn { opacity: 1; transform: translateY(0); }
.profile-live-edit-btn:hover { background: rgba(186,249,233,0.14); border-color: rgba(186,249,233,0.28); color: #baf9e9; }
.profile-live-zone-summary .profile-live-edit-btn { top: 0; right: 0; }
.profile-live-zone-header .profile-live-edit-btn, .profile-live-zone-links .profile-live-edit-btn, .profile-live-zone-socials .profile-live-edit-btn { top: 12px; right: 12px; }
.profile-live-empty, .profile-live-empty-banner { border: 1px dashed rgba(255,255,255,0.12); border-radius: 20px; color: rgba(255,255,255,0.46); display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; background: rgba(255,255,255,0.025); min-height: 74px; }
.profile-live-empty-banner { min-height: 104px; margin: -12px -12px 10px -12px; border-top-left-radius: 26px; border-top-right-radius: 26px; }
.live-editor-modal { position: fixed; inset: 0; z-index: 2400; display: flex; align-items: stretch; justify-content: flex-end; padding: 16px; pointer-events: none; }
.live-editor-backdrop { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,4,7,0.02) 0%, rgba(3,4,7,0.08) 55%, rgba(3,4,7,0.42) 100%); pointer-events: none; }
.live-editor-panel { position: relative; z-index: 1; width: min(460px, calc(100vw - 32px)); height: calc(100vh - 32px); max-height: none; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; pointer-events: auto; border-radius: 26px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(10,10,14,0.96), rgba(7,8,12,0.94)); box-shadow: 0 28px 64px rgba(0,0,0,0.38); }
.live-editor-head, .live-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.live-editor-head { border-bottom: 1px solid rgba(255,255,255,0.08); }
.live-editor-kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 6px; }
.live-editor-head h2 { font-size: 1.1rem; }
.live-editor-close, .live-editor-secondary, .live-editor-primary, .live-editor-add-btn, .live-editor-row-remove { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: #fff; cursor: pointer; }
.live-editor-close { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
.live-editor-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.live-editor-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.live-editor-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.live-editor-field span { color: rgba(255,255,255,0.66); font-size: 0.78rem; font-weight: 600; }
.live-editor-field input, .live-editor-field textarea, .live-editor-field select { width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: #fff; padding: 12px 14px; outline: none; }
.live-editor-field input[type="color"] { padding: 6px; min-height: 52px; cursor: pointer; }
.live-editor-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.live-editor-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 10px; }
.live-editor-field input[type="color"]::-moz-color-swatch { border: none; border-radius: 10px; }
.live-editor-field textarea { min-height: 104px; resize: vertical; }
.live-editor-field-wide { grid-column: 1 / -1; }
.live-editor-upload-field { grid-column: span 1; }
.live-editor-upload-card { min-height: 108px; border-radius: 18px; border: 1px dashed rgba(255,255,255,0.14); background: rgba(255,255,255,0.025); display: flex; align-items: center; gap: 14px; padding: 14px; cursor: pointer; transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.14s ease; }
.live-editor-upload-card:hover { transform: translateY(-1px); border-color: rgba(186,249,233,0.3); background: rgba(186,249,233,0.04); }
.live-editor-upload-card.is-dragover { border-color: rgba(186,249,233,0.46); background: rgba(186,249,233,0.08); }
.live-editor-upload-preview { width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.72); overflow: hidden; }
.live-editor-upload-preview.is-image { width: 76px; height: 76px; border-radius: 20px; }
.live-editor-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.live-editor-upload-preview i { font-size: 1.1rem; }
.live-editor-upload-copy { display: flex; flex-direction: column; gap: 4px; }
.live-editor-upload-copy strong { font-size: 0.86rem; color: #fff; }
.live-editor-upload-copy small { font-size: 0.75rem; color: rgba(255,255,255,0.54); line-height: 1.45; }
.live-editor-subsection { display: flex; flex-direction: column; gap: 12px; }
.live-editor-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live-editor-subhead strong { font-size: 0.9rem; }
.live-editor-add-btn { min-height: 38px; padding: 0 12px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; }
.live-editor-list { display: flex; flex-direction: column; gap: 10px; }
.live-editor-row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; padding-right: 58px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.025); align-items: start; overflow: hidden; }
.live-editor-row .live-editor-field:last-child:nth-child(5), .live-editor-row .live-editor-field:last-child:nth-child(6) { grid-column: 1 / -1; }
.live-editor-row-remove { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.live-editor-footer { border-top: 1px solid rgba(255,255,255,0.08); }
.live-editor-status { color: rgba(255,255,255,0.64); font-size: 0.82rem; min-height: 1.2em; }
.live-editor-actions { display: flex; align-items: center; gap: 10px; }
.live-editor-secondary, .live-editor-primary { min-height: 42px; padding: 0 14px; border-radius: 14px; }
.live-editor-primary { background: rgba(186,249,233,0.12); border-color: rgba(186,249,233,0.28); color: #baf9e9; }
.live-editor-sidebar { position: fixed; top: 96px; left: 20px; z-index: 26; width: 180px; padding: 14px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.1); background: rgba(8,10,14,0.8); box-shadow: 0 24px 52px rgba(0,0,0,0.28); backdrop-filter: blur(16px); }
.live-editor-sidebar-head { margin-bottom: 12px; }
.live-editor-sidebar-kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 4px; }
.live-editor-sidebar-title { font-size: 0.95rem; font-weight: 700; color: #fff; }
.live-editor-sidebar-list { display: flex; flex-direction: column; gap: 8px; }
.live-editor-sidebar-btn { width: 100%; min-height: 42px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.76); display: flex; align-items: center; gap: 10px; cursor: pointer; transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.live-editor-sidebar-btn:hover { transform: translateX(2px); background: rgba(255,255,255,0.06); color: #fff; }
.live-editor-sidebar-btn.is-active { background: rgba(186,249,233,0.12); border-color: rgba(186,249,233,0.24); color: #baf9e9; }
.live-editor-sidebar-btn i { width: 16px; text-align: center; }
body.is-live-edit-mode #intro-screen { display: none; }
body.is-live-edit-mode #main-content { opacity: 1; }
body.live-editor-open { overflow: hidden; }

/* --- 'minimal' (non-card) Style --- */
.minimal-style .profile-card { background: transparent; border: none; box-shadow: none; padding: 0; }

/* --- Card Content (Styled with variables) --- */
.card-banner {
    width: calc(100% + 24px);
    margin: -12px -12px 8px -12px;
    height: 94px;
    object-fit: cover; 
    border-top-left-radius: 26px;
    border-top-right-radius: 26px;
}
.minimal-style .card-banner { width: 100%; margin: 0 0 16px 0; border-radius: 24px; }

/* --- UPDATED FADE MASK CLASS (bottom to top) --- */
.fade-mask {
    mask-image: linear-gradient(to top, 
        rgba(0,0,0,0) 0%,   /* Fully transparent at the very bottom */
        rgba(0,0,0,0.5) 30%, /* Starts to become visible */
        rgba(0,0,0,1) 50%    /* Fully visible from the middle upwards */
    );
    -webkit-mask-image: linear-gradient(to top, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0.5) 30%,
        rgba(0,0,0,1) 50%
    );
}

.card-header { background: var(--card-header-bg); border-radius: 20px; padding: 10px 12px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; text-align: left; margin-top: -36px; position: relative; z-index: 2; border: 1px solid var(--card-header-border); backdrop-filter: var(--card-header-blur); }
.profile-pic { width: 64px; height: 64px; border-radius: 20px; object-fit: cover; box-shadow: 0 12px 26px rgba(0,0,0,0.24); margin-top: 0; position: relative; z-index: 3; border: var(--profile-avatar-border-width) solid rgba(255,255,255,0.92); background: #111; }
.header-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.name-and-badges { display: flex; align-items: center; justify-content: flex-start; gap: 6px; }
.header-text h2 { font-size: 1.18rem; font-weight: 800; margin-right: 0; color: var(--text-primary); letter-spacing: -0.03em; text-shadow: 0 0 10px rgba(255,255,255,0.12); }
.badge-wrapper { position: relative; display: flex; align-items: center; }
.badge-wrapper::before, .badge-wrapper::after { position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; pointer-events: none; }
.badge-wrapper::before { content: attr(data-tooltip); bottom: 150%; background-color: #111; color: #fff; font-size: 0.8rem; padding: 6px 10px; border-radius: 5px; white-space: nowrap; z-index: 100; }
.badge-wrapper::after { content: ''; bottom: 150%; margin-bottom: -10px; border: 5px solid transparent; border-top-color: #111; z-index: 101; }
.badge-wrapper:hover::before, .badge-wrapper:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-5px); }
.badge-icon { width: 18px; height: 18px; }
.header-text p { font-size: 0.82rem; color: var(--text-secondary); margin-top: 1px; line-height: 1.35; }
.profile-summary { margin-top: 5px; padding: 8px 10px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.035); color: var(--text-secondary); font-size: 0.78rem; line-height: 1.38; }
.profile-bio { margin: 0; padding: 8px 10px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.035); }
.bio-line { font-size: 0.74rem; line-height: 1.42; color: var(--text-secondary); white-space: normal; overflow: visible; text-overflow: clip; }
.bio-line + .bio-line { margin-top: 8px; }
.bio-label { color: var(--text-primary); font-weight: 700; margin-right: 4px; }
.bio-value { color: var(--text-secondary); }
.profile-feature-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.feed-item { background: var(--feed-item-bg); border: 1px solid var(--feed-item-border); border-radius: 16px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; transition: background-color 0.3s, transform 0.2s, border-color 0.3s, box-shadow 0.2s; overflow: hidden; min-height: 68px; box-shadow: 0 8px 18px rgba(0,0,0,0.14); }
.feed-item:hover { background-color: var(--feed-item-hover-bg); border-color: var(--feed-item-hover-border); transform: translateY(-2px); box-shadow: 0 18px 34px rgba(0,0,0,0.22); }
.feed-item .icon { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); }
.feed-item .content { flex: 1; min-width: 0; }
.feed-item .title { font-weight: 700; font-size: 0.9rem; line-height: 1.2; color: var(--feed-title-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-item .text { margin-top: 2px; font-size: 0.72rem; line-height: 1.32; color: var(--feed-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-item .meta { margin-top: 4px; min-width: 0; }
.feed-item .meta .footer { display: block; font-size: 0.66rem; line-height: 1.2; color: var(--feed-footer-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-arrow { width: 36px; height: 36px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.74); }
.biolink-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 10px; }
.biolink-card { background: rgba(20,20,22,0.55); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; color: inherit; transition: background-color 0.25s, transform 0.2s; backdrop-filter: blur(12px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.biolink-card:hover { background: rgba(40,40,48,0.6); transform: translateY(-2px); }
.biolink-left { display: flex; align-items: center; }
.biolink-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); box-shadow: 0 0 0 3px rgba(255,255,255,0.06) inset; }
.biolink-avatar .social-image-icon { width: 22px; height: 22px; background-color: var(--social-icon-color); }
.biolink-card i { font-size: 1rem; color: var(--social-icon-color); }
.biolink-card:hover i, .biolink-card:hover .social-image-icon { color: var(--social-icon-hover-color); background-color: var(--social-icon-hover-color); }
.biolink-content { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.biolink-title { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biolink-subtitle { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biolink-right { display: flex; align-items: center; gap: 10px; }
.biolink-right-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: var(--text-secondary); }
.biolink-card[data-platform="discord"] .biolink-avatar { box-shadow: 0 0 0 3px #5865F2 inset; }
.biolink-card[data-platform="youtube"] .biolink-avatar { box-shadow: 0 0 0 3px #FF0033 inset; }
.biolink-card[data-platform="twitch"] .biolink-avatar { box-shadow: 0 0 0 3px #9146FF inset; }
.biolink-card[data-platform="kick"] .biolink-avatar { box-shadow: 0 0 0 3px #53FC18 inset; }
.biolink-card[data-platform="roblox"] .biolink-avatar { box-shadow: 0 0 0 3px #00A2FF inset; }
.biolink-card[data-platform="github"] .biolink-avatar { box-shadow: 0 0 0 3px #ffffff inset; }
.biolink-card[data-platform="spotify"] .biolink-avatar { box-shadow: 0 0 0 3px #1DB954 inset; }
.biolink-card[data-platform="steam"] .biolink-avatar { box-shadow: 0 0 0 3px #66C0F4 inset; }
.card-socials { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 0; padding-top: 2px; border-top: none; flex-wrap: wrap; }
.minimal-style .card-socials { border-top: none; }
.card-socials-public { margin-top: 2px; }
.card-socials a { color: var(--social-icon-color); text-decoration: none; transition: color 0.3s, transform 0.3s, filter 0.3s, background-color 0.3s, border-color 0.3s; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--social-border); background: var(--social-bg); filter: drop-shadow(0 0 6px rgba(255,255,255,0.15)); }
.card-socials a:hover { color: var(--social-icon-hover-color); transform: translateY(-2px) scale(1.06); background: color-mix(in srgb, var(--social-bg) 78%, white 22%); border-color: color-mix(in srgb, var(--social-border) 74%, white 26%); filter: drop-shadow(0 0 10px rgba(255,255,255,0.28)); }
.card-socials a i { font-size: 1rem; }
.social-image-icon { width: 100%; height: 100%; background-color: var(--social-icon-color); transition: background-color 0.3s; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.card-socials a:hover .social-image-icon { background-color: var(--social-icon-hover-color); }
.profile-rating-star { width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.38); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease; }
.profile-rating-star:hover { transform: translateY(-1px); color: #ffd86b; background: rgba(255,216,107,0.1); border-color: rgba(255,216,107,0.24); }
.profile-rating-star.is-active { color: #ffd86b; background: rgba(255,216,107,0.12); border-color: rgba(255,216,107,0.28); }
#profile-container.is-home .card-socials { display: none; }
.profile-footer-row { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 0; color: rgba(255,255,255,0.68); font-size: 0.72rem; }
.profile-footer-meta { display: inline-flex; align-items: center; gap: 8px; }
.music-shell { width: 100%; }
.music-player { background: var(--mp-bg, var(--music-player-bg)); border: var(--mp-border, 1px solid rgba(255,255,255,0.1)); border-radius: var(--mp-radius, 16px); padding: var(--mp-padding, 12px); color: var(--mp-color, #fff); font-family: var(--mp-font-family, 'Inter', sans-serif); font-size: var(--mp-font-size, 14px); display: flex; flex-direction: column; gap: 8px; margin-top: 0; box-shadow: 0 12px 26px rgba(0,0,0,0.2); }
.mp-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mp-cover { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
.mp-track { min-width: 0; flex: 1; }
.mp-title { font-size: 0.88rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-artist { font-size: 0.72rem; color: rgba(255,255,255,0.64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mp-brand { color: #1db954; font-size: 1rem; }
.mp-main { display: flex; align-items: center; gap: 10px; }
.mp-controls { display: flex; align-items: center; gap: 8px; }
.mp-btn { border: none; background: transparent; color: rgba(255,255,255,0.82); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s, color 0.2s, background-color 0.2s; }
.mp-btn:hover { transform: scale(1.08); color: #fff; background: var(--music-player-hover-bg); }
.mp-btn.is-active { color: var(--music-player-accent); background: var(--music-player-hover-bg); }
.mp-play { width: 34px; height: 34px; background: #fff; color: #111; }
.mp-play:hover { background: #fff; color: #111; transform: scale(1.08); }
.mp-progress-row { display: flex; align-items: center; gap: 8px; }
.mp-seek-slider { flex: 1; accent-color: var(--music-player-accent); }
.mp-time { min-width: 96px; text-align: right; color: rgba(255,255,255,0.72); font-size: 0.76em; }
.mp-volume-group { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mp-volume { width: 90px; accent-color: var(--music-player-accent); }

/* --- UI CONTROLS --- */
#volume-control { position: fixed; top: 20px; left: 20px; width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0); border-radius: 20px; display: none; justify-content: center; align-items: center; font-size: 1rem; cursor: pointer; z-index: 20; transition: all 0.3s; padding: 0 12px; }
#volume-control:hover { height: 150px; }
#volume-control i { transition: transform 0.3s; }
#volume-control:hover i { transform: translateY(-45px); }
#volume-slider { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%) rotate(270deg); opacity: 0; visibility: hidden; transition: opacity 0.3s 0.1s, visibility 0.3s 0.1s; width: 80px; }
#volume-control:hover #volume-slider { opacity: 1; visibility: visible; }
input[type=range] { -webkit-appearance: none; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: #555; border-radius: 2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; background: #fff; border-radius: 50%; margin-top: -6px; }
.view-counter { position: fixed; bottom: 20px; left: 20px; display: none; align-items: center; gap: 10px; z-index: 20; }
.profile-floating-stat { min-height: 44px; padding: 8px 14px; font-size: 0.78rem; display: inline-flex; align-items: center; gap: 8px; background-color: rgba(6,6,8,0.72); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; backdrop-filter: blur(12px); }
.profile-floating-rating { padding-right: 10px; }
.profile-floating-rating-copy { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.76); white-space: nowrap; }
.profile-floating-rating-copy strong { color: #fff; }
.profile-floating-stars { display: inline-flex; align-items: center; gap: 6px; }
.profile-floating-stars .profile-rating-star { width: 28px; height: 28px; border-radius: 999px; }

/* ======================================= */
/* ====== JUMPSCARE STYLES ====== */
/* ======================================= */
#jumpscare-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; display: none; justify-content: center; align-items: center; overflow: hidden; }
#jumpscare-image { max-width: 100%; max-height: 100%; object-fit: contain; }
.jumpscare-animation { animation: jumpscare-shake 0.8s ease-in-out; }
@keyframes jumpscare-shake { 0% { transform: scale(0.5) translate(0, 0); } 10% { transform: scale(1.2) translate(5px, -5px); } 20% { transform: scale(1.2) translate(-5px, 5px); } 30% { transform: scale(1.2) translate(5px, 5px); } 40% { transform: scale(1.2) translate(-5px, -5px); } 50%, 100% { transform: scale(1.2) translate(0, 0); } }

/* ======================================= */
/* ====== VISUAL & TEXT EFFECTS ====== */
/* ======================================= */
#visual-effects-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
#matrix-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: none; opacity: 0.12; }
.rain-effect { background: radial-gradient(circle at top, rgba(255,255,255,0.05), transparent 38%); }
.rain-effect .rain-drop { position: absolute; top: -14%; width: 1.5px; border-radius: 999px; background: linear-gradient(180deg, rgba(220,233,255,0), rgba(220,233,255,0.55), rgba(220,233,255,0.12)); box-shadow: 0 0 8px rgba(180,210,255,0.12); transform: rotate(12deg); animation: rain-fall linear infinite; }
.aurora-effect { background: radial-gradient(circle at 50% 18%, rgba(114,255,226,0.08), transparent 30%); }
.aurora-effect .aurora-band { position: absolute; left: -18%; width: 136%; height: 22%; border-radius: 999px; background: linear-gradient(90deg, rgba(102,255,214,0), rgba(102,255,214,0.16), rgba(120,156,255,0.22), rgba(255,109,198,0.16), rgba(255,109,198,0)); filter: blur(26px); opacity: 0.85; animation: aurora-shift linear infinite alternate; }
.fireflies-effect .firefly { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,244,160,0.96); box-shadow: 0 0 8px rgba(255,244,160,0.8), 0 0 16px rgba(255,244,160,0.4); animation: firefly-drift ease-in-out infinite, firefly-blink ease-in-out infinite; }
.embers-effect .ember { position: absolute; bottom: -16px; border-radius: 50%; background: radial-gradient(circle, rgba(255,226,166,0.95) 0%, rgba(255,133,69,0.82) 55%, rgba(255,92,32,0) 100%); box-shadow: 0 0 12px rgba(255,120,64,0.28); animation: ember-rise linear infinite; }
.fog-effect { background: radial-gradient(circle at 50% 78%, rgba(255,255,255,0.08), transparent 52%); }
.fog-effect .fog-layer { position: absolute; left: -18%; width: 136%; height: 26%; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.12), rgba(222,232,255,0.22), rgba(255,255,255,0.1), rgba(255,255,255,0)); filter: blur(36px); opacity: 0.56; animation: fog-drift ease-in-out infinite alternate; }
.starscape-effect { background: radial-gradient(circle at 50% 10%, rgba(120,156,255,0.08), transparent 28%); }
.starscape-effect .starscape-star { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.95); box-shadow: 0 0 8px rgba(180,210,255,0.4); animation: starscape-twinkle ease-in-out infinite; }
.lightning-effect { background: radial-gradient(circle at top, rgba(167,193,255,0.09), transparent 36%); }
.lightning-effect .lightning-flash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(210,225,255,0.22) 35%, rgba(255,255,255,0)); opacity: 0; animation: lightning-flash 5.8s linear infinite; }
.lightning-effect .lightning-bolt { position: absolute; top: 0; width: 3px; height: 48%; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(228,238,255,0.98) 20%, rgba(190,215,255,0.86) 55%, rgba(255,255,255,0)); clip-path: polygon(50% 0%, 62% 16%, 42% 32%, 58% 48%, 36% 70%, 52% 100%, 18% 72%, 40% 50%, 24% 34%, 46% 18%); filter: drop-shadow(0 0 10px rgba(196,218,255,0.7)) drop-shadow(0 0 22px rgba(196,218,255,0.34)); opacity: 0; animation: lightning-bolt 5.8s linear infinite; transform: skewX(-10deg); }
.bubbles-effect { background: radial-gradient(circle at 50% 88%, rgba(173,231,255,0.06), transparent 30%); }
.bubbles-effect .bubble { position: absolute; bottom: -14%; border-radius: 50%; border: 1px solid rgba(206,244,255,0.28); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), rgba(173,231,255,0.05) 55%, rgba(173,231,255,0)); box-shadow: inset 0 0 10px rgba(255,255,255,0.04), 0 0 18px rgba(173,231,255,0.06); animation: bubble-rise ease-in infinite; }
.laser-grid-effect { background: radial-gradient(circle at 50% 18%, rgba(118,255,222,0.08), transparent 28%); }
.laser-grid-effect .laser-line { position: absolute; opacity: 0.5; animation: laser-pulse ease-in-out infinite alternate; }
.laser-grid-effect .laser-line.is-vertical { top: 0; width: 1px; height: 100%; background: linear-gradient(180deg, rgba(90,255,219,0), rgba(90,255,219,0.32), rgba(90,255,219,0)); box-shadow: 0 0 12px rgba(90,255,219,0.18); }
.laser-grid-effect .laser-line.is-horizontal { left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(152,112,255,0), rgba(152,112,255,0.26), rgba(152,112,255,0)); box-shadow: 0 0 12px rgba(152,112,255,0.16); }
.petals-effect .petal { position: absolute; top: -12%; width: 16px; height: 12px; border-radius: 70% 30% 70% 30%; background: linear-gradient(135deg, rgba(255,216,235,0.9), rgba(255,145,182,0.72)); box-shadow: 0 0 10px rgba(255,145,182,0.08); opacity: 0.92; animation: petal-fall linear infinite; }
.galaxy-effect { background: radial-gradient(circle at 50% 18%, rgba(103,112,255,0.14), transparent 30%), radial-gradient(circle at 50% 75%, rgba(255,100,216,0.1), transparent 40%), radial-gradient(circle at 18% 40%, rgba(120,140,255,0.1), transparent 24%); }
.galaxy-effect .galaxy-cloud { position: absolute; width: 44%; height: 30%; border-radius: 999px; background: radial-gradient(circle, rgba(120,140,255,0.3), rgba(255,95,210,0.2) 42%, rgba(66,14,108,0.06) 72%, transparent 78%); filter: blur(34px); opacity: 0.76; animation: galaxy-drift ease-in-out infinite alternate; }
.galaxy-effect .galaxy-spark { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.98); box-shadow: 0 0 14px rgba(174,192,255,0.52), 0 0 26px rgba(120,140,255,0.18); animation: galaxy-twinkle ease-in-out infinite; }
.shooting-stars-effect .star { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; background: #fff; border-radius: 50%; box-shadow: 0 0 4px #fff, 0 0 8px #fff; animation: star-animation 3s linear infinite; }
.shooting-stars-effect .star::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 150px; height: 1px; background: linear-gradient(90deg, #fff, transparent); }
@keyframes star-animation { 0% { transform: rotate(315deg) translateX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(315deg) translateX(-1500px); opacity: 0; } }
.shooting-stars-effect .star:nth-child(1) { top: 0; right: 0; animation-delay: 0s; animation-duration: 2.2s; }
.shooting-stars-effect .star:nth-child(2) { top: 0; right: 800px; animation-delay: 1.4s; animation-duration: 3s; }
.shooting-stars-effect .star:nth-child(3) { top: 100px; right: 0px; animation-delay: 2.8s; animation-duration: 2.5s; }
.particles-effect .particle { position: absolute; bottom: -20px; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; animation: float-up 15s linear infinite; }
@keyframes rain-fall { from { transform: translate3d(0, -10vh, 0) rotate(12deg); opacity: 0; } 15% { opacity: 1; } to { transform: translate3d(24px, 118vh, 0) rotate(12deg); opacity: 0.08; } }
@keyframes float-up { 0% { transform: translateY(0) translateX(0); opacity: 1; } 100% { transform: translateY(-110vh) translateX(25px); opacity: 0; } }
@keyframes aurora-shift { from { transform: translate3d(-4%, 0, 0) rotate(-4deg); } to { transform: translate3d(4%, 14px, 0) rotate(4deg); } }
@keyframes firefly-drift { 0% { transform: translate3d(0, 0, 0) scale(0.9); } 25% { transform: translate3d(12px, -20px, 0) scale(1); } 50% { transform: translate3d(-10px, -36px, 0) scale(0.85); } 75% { transform: translate3d(14px, -14px, 0) scale(1.05); } 100% { transform: translate3d(0, 0, 0) scale(0.9); } }
@keyframes firefly-blink { 0%, 100% { opacity: 0.18; } 35% { opacity: 0.92; } 60% { opacity: 0.34; } }
@keyframes ember-rise { from { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0; } 20% { opacity: 0.9; } to { transform: translate3d(26px, -110vh, 0) scale(0.35); opacity: 0; } }
@keyframes fog-drift { from { transform: translate3d(-3%, 0, 0) scaleX(1); } to { transform: translate3d(5%, 14px, 0) scaleX(1.06); } }
@keyframes starscape-twinkle { 0%, 100% { opacity: 0.18; transform: scale(0.8); } 40% { opacity: 0.95; transform: scale(1); } 70% { opacity: 0.34; transform: scale(0.88); } }
@keyframes lightning-flash { 0%, 34%, 100% { opacity: 0; } 35% { opacity: 0.36; } 35.4% { opacity: 0.06; } 35.8% { opacity: 0.62; } 36.2% { opacity: 0; } 61% { opacity: 0; } 61.3% { opacity: 0.28; } 61.6% { opacity: 0; } }
@keyframes lightning-bolt { 0%, 34%, 100% { opacity: 0; } 35% { opacity: 0.94; } 35.35% { opacity: 0.18; } 35.75% { opacity: 1; } 36.2% { opacity: 0; } 61%, 61.25% { opacity: 0; } 61.4% { opacity: 0.72; } 61.6% { opacity: 0; } }
@keyframes bubble-rise { from { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0; } 20% { opacity: 0.8; } to { transform: translate3d(22px, -115vh, 0) scale(1.08); opacity: 0; } }
@keyframes laser-pulse { from { opacity: 0.2; } to { opacity: 0.72; } }
@keyframes petal-fall { from { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; } 15% { opacity: 1; } to { transform: translate3d(56px, 112vh, 0) rotate(280deg); opacity: 0.08; } }
@keyframes galaxy-drift { from { transform: translate3d(-4%, 0, 0) scale(0.98); } to { transform: translate3d(4%, 12px, 0) scale(1.08); } }
@keyframes galaxy-twinkle { 0%, 100% { opacity: 0.16; transform: scale(0.85); } 45% { opacity: 0.92; transform: scale(1); } 70% { opacity: 0.28; transform: scale(0.9); } }
.thunder-effect::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; animation: thunder-flash 7s linear infinite; }
@keyframes thunder-flash { 0% { opacity: 0; } 50% { opacity: 0; } 50.1% { opacity: 0.4; } 50.2% { opacity: 0.1; } 50.3% { opacity: 0.6; } 50.4% { opacity: 0.2; } 50.5% { opacity: 0; } 100% { opacity: 0; } }
.snow-effect .snowflake { position: absolute; top: -20px; color: rgba(255, 255, 255, 0.9); user-select: none; pointer-events: none; text-shadow: 0 0 5px #fff, 0 0 10px #fff; animation: snowfall linear infinite; }
@keyframes snowfall { to { transform: translateY(105vh) translateX(50px) rotate(360deg); opacity: 0; } }
.static-effect::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: url(https://i.imgur.com/xI9Vn8g.gif); opacity: 0.04; }
p.typewriter { position: relative; }
p.typewriter-cursor::after { content: '|'; position: absolute; right: -0.1em; animation: blink-caret 1s step-end infinite; }
@keyframes blink-caret { from, to { color: transparent; } 50% { color: inherit; } }
p.glow { animation: text-glow 2s ease-in-out infinite alternate; }
@keyframes text-glow { from { text-shadow: 0 0 4px #fff, 0 0 8px #0073e6; } to { text-shadow: 0 0 8px #fff, 0 0 16px #0073e6; } }
p.glitch { animation: text-glitch 1.5s linear infinite; position: relative; }
p.glitch::before, p.glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--header-bg); overflow: hidden; }
p.glitch::before { left: 2px; text-shadow: -1px 0 red; animation: glitch-anim-1 2.5s linear infinite reverse; }
p.glitch::after { left: -2px; text-shadow: -1px 0 blue; animation: glitch-anim-2 2.5s linear infinite reverse; }
@keyframes glitch-anim-1 { 0%, 100% { clip-path: inset(45% 0 56% 0); } 20% { clip-path: inset(55% 0 10% 0); } 40% { clip-path: inset(13% 0 63% 0); } 60% { clip-path: inset(85% 0 5% 0); } 80% { clip-path: inset(45% 0 25% 0); } }
@keyframes glitch-anim-2 { 0%, 100% { clip-path: inset(15% 0 86% 0); } 20% { clip-path: inset(35% 0 30% 0); } 40% { clip-path: inset(93% 0 3% 0); } 60% { clip-path: inset(25% 0 65% 0); } 80% { clip-path: inset(5% 0 85% 0); } }
p.rainbow { background: linear-gradient(to right, #ff8c00, #ff0080, #7928a1, #0099ff); -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow-animation 8s ease-in-out infinite; background-size: 200% 100%; }
@keyframes rainbow-animation { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
p.fire { animation: fire-glow 1.5s ease-in-out infinite alternate; color: #ffae42; }
@keyframes fire-glow { from { text-shadow: 0 0 5px #ff8c00, 0 0 10px #ff4500; } to { text-shadow: 0 0 10px #ff8c00, 0 0 25px #ff4500; } }
p.smoke { animation: smoke-text 4s ease-in-out infinite alternate; color: transparent; }
@keyframes smoke-text { 0% { text-shadow: 0 0 5px rgba(255,255,255,0.8); opacity: 1; } 100% { text-shadow: 0 0 25px rgba(255,255,255,0.5); opacity: 0.6; transform: scale(1.05); } }
p.outline { color: transparent; -webkit-text-stroke: 1px #fff; animation: outline-glow 2.5s ease-in-out infinite alternate; }
@keyframes outline-glow { from { text-shadow: 0 0 5px #fff; } to { text-shadow: 0 0 15px #fff, 0 0 25px #0073e6; } }

#home-container { width: 100%; min-height: 100vh; display: flex; flex-direction: column; padding: 16px; gap: 16px; max-width: 1080px; margin: 0 auto; }
.lp-navbar { position: sticky; top: 14px; height: 68px; display: flex; align-items: center; justify-content: flex-start; padding: 0 18px; border-radius: 18px; background: rgba(15,15,18,0.72); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); z-index: 20; }
.lp-brand { display: flex; align-items: center; gap: 11px; }
.lp-logo { width: 34px; height: 34px; object-fit: contain; }
.lp-title { font-weight: 700; letter-spacing: 0.16em; color: #f5f5f5; font-size: 0.86rem; }
.lp-mobile-toggle { display: none; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #fff; font-family: inherit; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.lp-mobile-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
.lp-mobile-toggle i { font-size: 0.88rem; }
.lp-nav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lp-nav a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; padding: 10px 10px; border-radius: 12px; border: 1px solid transparent; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.lp-nav a:hover { color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.lp-nav-link { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08) !important; }
.lp-nav-cta { color: #baf9e9 !important; background: rgba(186, 249, 233, 0.08); border-color: rgba(186, 249, 233, 0.22) !important; }
.lp-nav-cta:hover { background: rgba(186, 249, 233, 0.12); border-color: rgba(186, 249, 233, 0.35) !important; }
.lp-user-menu { position: relative; }
.lp-user-trigger { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #fff; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.lp-user-trigger:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); transform: translateY(-1px); }
.lp-user-trigger i { font-size: 0.74rem; color: rgba(255,255,255,0.56); }
.lp-user-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); }
.lp-user-name { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; }
.lp-user-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 188px; padding: 8px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); background: rgba(9,10,14,0.92); backdrop-filter: blur(18px); box-shadow: 0 22px 44px rgba(0,0,0,0.34); display: grid; gap: 4px; }
.lp-user-dropdown a, .lp-user-dropdown button { width: 100%; min-height: 42px; display: flex; align-items: center; padding: 0 12px; border-radius: 12px; border: none; background: transparent; color: rgba(255,255,255,0.78); text-decoration: none; text-align: left; cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: background-color 0.16s ease, color 0.16s ease; }
.lp-user-dropdown a:hover, .lp-user-dropdown button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.lp-user-dropdown button { font-family: inherit; }
.lp-hero { margin-top: 4px; min-height: 185px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr); align-items: center; gap: 18px; padding: 30px 28px; border-radius: 26px; background: linear-gradient(140deg, rgba(16,17,21,0.9), rgba(8,9,12,0.78) 68%), radial-gradient(850px 280px at 0% 0%, rgba(207, 75, 255, 0.18), transparent 65%); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 50px rgba(0,0,0,0.28); overflow: hidden; }
.lp-hero-copy { display: flex; flex-direction: column; gap: 12px; }
.lp-kicker { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.62); }
.lp-hero h1 { font-size: clamp(1.6rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.05em; color: #fbfbfb; max-width: 620px; }
.lp-subtitle { max-width: 520px; color: rgba(255,255,255,0.72); font-size: 0.95rem; line-height: 1.6; }
.access-requirement-card { margin-top: 8px; max-width: 640px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(180deg, rgba(18,18,24,0.76), rgba(10,10,14,0.72)); box-shadow: 0 14px 30px rgba(0,0,0,0.18); }
.access-requirement-card p { color: rgba(255,255,255,0.7); font-size: 0.82rem; line-height: 1.6; }
.access-requirement-title { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #baf9e9; margin-bottom: 8px; }
.access-id-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; margin: 0 4px 4px 0; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: #fff; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; }
.access-requirement-link { display: inline-flex; align-items: center; margin-top: 10px; color: #baf9e9; text-decoration: none; font-size: 0.8rem; font-weight: 700; }
.access-requirement-link:hover { color: #d8fff5; }
.lp-primary-btn, .lp-secondary-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 14px; text-decoration: none; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.lp-primary-btn { color: #05110e; background: #baf9e9; border: 1px solid rgba(186, 249, 233, 0.45); box-shadow: 0 10px 20px rgba(186, 249, 233, 0.18); }
.lp-primary-btn:hover { transform: translateY(-1px); background: #c8fbef; }
.lp-secondary-btn { color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.lp-secondary-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.1); }
.lp-hero-visual { position: relative; min-height: 290px; display: grid; place-items: center; border-radius: 28px; background: transparent; border: none; overflow: visible; }
.lp-hero-visual-glow { position: absolute; inset: auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(214,120,255,0.26), rgba(186,249,233,0.06) 45%, transparent 72%); filter: blur(10px); }
.lp-hero-logo-mark { position: relative; z-index: 1; display: block; width: min(92%, 360px); max-height: 240px; object-fit: contain; filter: drop-shadow(0 18px 44px rgba(186,249,233,0.18)); }
.lp-hero-visual-badge { position: absolute; right: 24px; bottom: 24px; z-index: 1; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(9,11,15,0.72); color: #fff; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.18em; }
.whitelist-hero-visual { min-height: 250px; }
.whitelist-hero-icon { position: relative; z-index: 1; width: 132px; height: 132px; border-radius: 34px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(186,249,233,0.12), rgba(241,148,255,0.08)); display: grid; place-items: center; box-shadow: 0 18px 40px rgba(0,0,0,0.24); }
.whitelist-hero-icon i { font-size: 3rem; color: #fff; }
.lp-hero-chip { position: absolute; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: #fff; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(10px); }
.lp-hero-chip.muted { right: 138px; bottom: 24px; color: rgba(255,255,255,0.78); }
.lp-hero-chip.small { right: 24px; bottom: 72px; min-height: 32px; font-size: 0.7rem; }
.lp-hero-chip:first-of-type { left: 48px; top: 28px; color: #baf9e9; }
.lp-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-quick-card { padding: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(18,18,24,0.82), rgba(9,10,14,0.72)); box-shadow: 0 14px 32px rgba(0,0,0,0.18); }
.lp-quick-index { display: inline-flex; margin-bottom: 14px; color: #f194ff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; }
.lp-quick-card h3 { font-size: 0.98rem; color: #fff; margin-bottom: 8px; }
.lp-quick-card p { font-size: 0.82rem; line-height: 1.55; color: rgba(255,255,255,0.64); }
.lp-features { display: flex; flex-direction: column; gap: 14px; }
.lp-section-head { display: flex; flex-direction: column; gap: 6px; }
.lp-section-kicker { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.52); }
.lp-section-head h2 { font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.2; color: #fff; }
.lp-features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-features-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-feature-card { padding: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(20,20,24,0.76), rgba(12,12,16,0.68)); box-shadow: 0 14px 32px rgba(0,0,0,0.22); }
.lp-feature-card i { font-size: 1.1rem; color: #baf9e9; margin-bottom: 14px; }
.lp-feature-card h3 { font-size: 0.96rem; color: #fff; margin-bottom: 8px; }
.lp-feature-card p { font-size: 0.82rem; line-height: 1.55; color: rgba(255,255,255,0.65); }
.lp-feature-card span { color: #baf9e9; }
.lp-feature-card .lp-secondary-btn { margin-top: 14px; }
.home-section { display: flex; flex-direction: column; gap: 10px; }
.home-section-title { font-size: 1.05rem; color: #f4f4f4; font-weight: 600; letter-spacing: 0.02em; }
.home-tools { width: 100%; display: flex; }
#member-search { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(12,12,14,0.55); color: #fff; outline: none; transition: border-color 0.25s ease, background-color 0.25s ease; }
#member-search::placeholder { color: rgba(255,255,255,0.45); }
#member-search:focus { border-color: rgba(171, 255, 234, 0.6); background: rgba(12,12,14,0.82); }
.home-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 280px)); gap: 12px; justify-content: start; }
.home-card { width: 100%; max-width: 280px; position: relative; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(160deg, rgba(23,24,29,0.92), rgba(12,13,18,0.94)); overflow: hidden; cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 16px 30px rgba(0,0,0,0.3); }
.home-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 45%); }
.home-card:hover { transform: translateY(-3px); border-color: rgba(171,255,234,0.44); box-shadow: 0 14px 28px rgba(0,0,0,0.34); }
.home-card-banner { width: 100%; height: 90px; background-size: cover; background-position: center; filter: saturate(0.92) contrast(1.05); opacity: 0.86; }
.home-card-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 10px; margin-top: -20px; }
.home-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.home-card-avatar { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.06); box-shadow: 0 10px 18px rgba(0,0,0,0.22); }
.home-card-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.home-card-text h3 { font-size: 0.9rem; color: #f6f6f6; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-card-text p { font-size: 0.74rem; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-card-footer { position: relative; z-index: 1; padding: 0 12px 12px; }
.home-card-cta { width: 100%; text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #baf9e9; border: 1px solid rgba(186, 249, 233, 0.22); border-radius: 12px; padding: 9px 10px; background: rgba(186, 249, 233, 0.06); white-space: nowrap; }

@media (max-width: 860px) {
    .feed-container { grid-template-columns: 1fr; }
    #home-container { padding: 12px; gap: 12px; }
    .lp-navbar { top: 8px; height: 62px; padding: 0 14px; border-radius: 14px; }
    .lp-nav a { padding: 9px 9px; }
    .lp-user-name { display: none; }
    .lp-user-trigger { min-height: 42px; padding-right: 10px; }
    .lp-hero { grid-template-columns: 1fr; padding: 18px 14px; border-radius: 14px; min-height: 145px; }
    .lp-hero-visual { min-height: 210px; }
    .lp-hero-logo-mark { width: min(74%, 180px); }
    .lp-hero-visual-badge { right: 16px; bottom: 16px; padding: 8px 12px; font-size: 0.68rem; }
    .lp-hero-chip { font-size: 0.66rem; }
    .lp-quick-grid { grid-template-columns: 1fr; }
    .lp-features-grid { grid-template-columns: 1fr; }
    .home-grid { grid-template-columns: 1fr; }
    .home-card { max-width: none; }
}

.lp-contact { display: none; }
.lp-footer { text-align: center; color: var(--text-tertiary); margin-top: auto; padding: 8px 0 10px; }

.site-actions, .site-action, .site-action-cta { display: none !important; }

/* --- Minimal public site (keeps biolink profile styling intact) --- */
body[data-page="home"],
body[data-page="features"],
body[data-page="members"],
body[data-page="whitelist"] {
    background-color: #050608;
    background-image: linear-gradient(180deg, #07080b 0%, #050608 100%);
}

#profile-container.is-home #home-container {
    max-width: 1120px;
    padding: 28px 24px 20px;
    gap: 28px;
}

#profile-container.is-home .lp-navbar,
#profile-container.is-home .lp-hero,
#profile-container.is-home .access-requirement-card,
#profile-container.is-home .lp-hero-visual,
#profile-container.is-home .lp-quick-card,
#profile-container.is-home .lp-feature-card,
#profile-container.is-home .home-card,
#profile-container.is-home #member-search,
#profile-container.is-home .home-card-cta,
#profile-container.is-home .lp-user-dropdown,
#profile-container.is-home .lp-user-trigger,
#profile-container.is-home .lp-nav a,
#profile-container.is-home .lp-primary-btn,
#profile-container.is-home .lp-secondary-btn,
#profile-container.is-home .access-id-chip,
#profile-container.is-home .lp-hero-visual-badge,
#profile-container.is-home .whitelist-hero-icon,
#profile-container.is-home .lp-hero-chip {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#profile-container.is-home .lp-navbar {
    top: 0;
    min-height: 72px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

#profile-container.is-home .lp-brand {
    gap: 14px;
}

#profile-container.is-home .lp-title {
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    color: rgba(255,255,255,0.92);
}

#profile-container.is-home .lp-nav {
    gap: 2px;
}

#profile-container.is-home .lp-nav a,
#profile-container.is-home .lp-user-trigger {
    min-height: 44px;
    padding: 0 14px;
    background: transparent;
    color: rgba(255,255,255,0.68);
}

#profile-container.is-home .lp-nav a:hover,
#profile-container.is-home .lp-user-trigger:hover {
    background: rgba(255,255,255,0.04);
    color: #fff;
    transform: none;
}

#profile-container.is-home .lp-nav-cta {
    color: #fff !important;
    background: rgba(255,255,255,0.08);
}

#profile-container.is-home .lp-nav-cta:hover {
    background: rgba(255,255,255,0.12);
}

#profile-container.is-home .lp-user-avatar {
    border: none;
}

#profile-container.is-home .lp-user-dropdown {
    top: calc(100% + 12px);
    padding: 8px 0;
    min-width: 200px;
    background: rgba(10,11,14,0.98);
}

#profile-container.is-home .lp-user-dropdown a,
#profile-container.is-home .lp-user-dropdown button {
    min-height: 44px;
    border-radius: 0;
}

#profile-container.is-home .lp-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 36px;
    min-height: 0;
    padding: 44px 0 20px;
    background: transparent;
    overflow: visible;
}

#profile-container.is-home .lp-kicker,
#profile-container.is-home .lp-section-kicker {
    color: rgba(255,255,255,0.48);
}

#profile-container.is-home .lp-hero h1 {
    max-width: 760px;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    letter-spacing: -0.07em;
}

#profile-container.is-home .lp-subtitle {
    max-width: 620px;
    font-size: 1rem;
    color: rgba(255,255,255,0.64);
}

#profile-container.is-home .access-requirement-card {
    max-width: 720px;
    padding: 18px 0 0;
    background: transparent;
}

#profile-container.is-home .access-requirement-title {
    color: rgba(255,255,255,0.52);
}

#profile-container.is-home .access-requirement-card p {
    color: rgba(255,255,255,0.64);
}

#profile-container.is-home .access-id-chip {
    min-height: 0;
    padding: 0;
    margin: 0 4px 0 0;
    background: transparent;
    color: #fff;
}

#profile-container.is-home .access-requirement-link {
    margin-top: 14px;
    color: #fff;
}

#profile-container.is-home .lp-primary-btn,
#profile-container.is-home .lp-secondary-btn {
    min-height: 46px;
    padding: 0 16px;
    background: rgba(255,255,255,0.06);
    color: #fff;
}

#profile-container.is-home .lp-primary-btn:hover,
#profile-container.is-home .lp-secondary-btn:hover {
    background: rgba(255,255,255,0.1);
    transform: none;
}

#profile-container.is-home .lp-hero-visual {
    min-height: 320px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

#profile-container.is-home .lp-hero-visual-glow {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 68%);
    filter: blur(24px);
}

#profile-container.is-home .lp-hero-logo-mark {
    width: min(72%, 220px);
    filter: none;
    opacity: 0.92;
}

#profile-container.is-home .lp-hero-visual-badge,
#profile-container.is-home .lp-hero-chip,
#profile-container.is-home .whitelist-hero-icon {
    background: rgba(255,255,255,0.06);
}

#profile-container.is-home .lp-quick-grid,
#profile-container.is-home .lp-features-grid,
#profile-container.is-home .home-grid {
    gap: 18px;
}

#profile-container.is-home .lp-quick-card,
#profile-container.is-home .lp-feature-card,
#profile-container.is-home .home-card {
    padding: 0;
    background: transparent;
}

#profile-container.is-home .lp-quick-card,
#profile-container.is-home .lp-feature-card {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 16px;
}

#profile-container.is-home .lp-quick-card h3,
#profile-container.is-home .lp-feature-card h3,
#profile-container.is-home .home-card-text h3,
#profile-container.is-home .home-section-title,
#profile-container.is-home .lp-section-head h2 {
    letter-spacing: -0.03em;
}

#profile-container.is-home .lp-quick-card p,
#profile-container.is-home .lp-feature-card p,
#profile-container.is-home .home-card-text p {
    color: rgba(255,255,255,0.6);
}

#profile-container.is-home .lp-feature-card .lp-secondary-btn {
    margin-top: 16px;
    justify-content: flex-start;
    padding-left: 0;
    background: transparent;
}

#profile-container.is-home .home-tools {
    padding-top: 4px;
}

#profile-container.is-home #member-search {
    padding: 14px 0;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

#profile-container.is-home #member-search:focus {
    background: transparent;
    border-color: rgba(255,255,255,0.4);
    box-shadow: none;
}

#profile-container.is-home .home-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

#profile-container.is-home .home-card {
    max-width: none;
    background: rgba(255,255,255,0.015);
    transition: background-color 0.18s ease;
}

#profile-container.is-home .home-card::before {
    display: none;
}

#profile-container.is-home .home-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
    background: rgba(255,255,255,0.035);
}

#profile-container.is-home .home-card-banner {
    height: 104px;
    opacity: 0.72;
    filter: grayscale(0.12) saturate(0.75) contrast(1.02);
}

#profile-container.is-home .home-card-content {
    margin-top: 0;
    padding: 14px 0 10px;
}

#profile-container.is-home .home-card-avatar {
    border-radius: 0;
    border: none;
    box-shadow: none;
}

#profile-container.is-home .home-card-footer {
    padding: 0 0 10px;
}

#profile-container.is-home .home-card-cta {
    padding: 10px 0 0;
    background: transparent;
    color: rgba(255,255,255,0.92);
    border-top: 1px solid rgba(255,255,255,0.08);
}

#profile-container.is-home .lp-footer {
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.panel-body { padding: 24px; }
.panel { max-width: 1260px; margin: 0 auto; }
.panel-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.panel-subtitle { max-width: 720px; color: rgba(255,255,255,0.56); font-size: 0.9rem; line-height: 1.55; margin-top: 6px; }
.panel-top { margin-bottom: 18px; }
.panel-user { color: var(--text-secondary, #aaa); font-size: 15px; margin-top: 4px; }
.panel-top #guest-actions { display: flex; align-items: center; }
.panel-top #guest-actions.hidden { display: none !important; }
.panel-top #user-actions.hidden { display: none !important; }
.panel-title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.panel-card { background: linear-gradient(180deg, rgba(10,10,12,0.78), rgba(7,7,9,0.66)); border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; padding: 22px; backdrop-filter: blur(16px); box-shadow: 0 28px 56px rgba(0,0,0,0.28); }
.panel-guest-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-bottom: 18px; }
.panel-guest-copy h2 { font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.03em; margin: 8px 0 10px; }
.panel-guest-copy p { max-width: 720px; color: rgba(255,255,255,0.62); line-height: 1.65; }
.panel-access-requirement { margin-top: 14px; max-width: 720px; }
.panel-guest-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.panel-guest-primary, .panel-guest-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 16px; text-decoration: none; border: 1px solid rgba(255,255,255,0.12); color: #fff; background: rgba(255,255,255,0.06); }
.panel-guest-primary { background: rgba(186, 249, 233, 0.12); border-color: rgba(186, 249, 233, 0.32); color: #baf9e9; }
.panel-sidebar-kicker, .panel-block-kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
.panel-sidebar-title, .panel-block-title { font-size: 1.05rem; font-weight: 700; color: #fff; }
.panel-sidebar-stats { display: grid; gap: 10px; }
.panel-mini-stat { padding: 14px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.panel-mini-label { display: block; color: rgba(255,255,255,0.42); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.panel-mini-value { display: block; color: #fff; font-size: 0.88rem; font-weight: 600; word-break: break-all; }
.panel-main-column { min-width: 0; }
.panel-workbench-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-workbench-copy { color: rgba(255,255,255,0.58); font-size: 0.86rem; line-height: 1.55; margin-top: 8px; }
.panel-workbench-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.panel-workbench-actions a, .panel-workbench-actions button, .panel-footer-nav button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: #fff; text-decoration: none; cursor: pointer; }
.panel-workbench-actions a:hover, .panel-workbench-actions button:hover, .panel-footer-nav button:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.panel-icon-action { width: 44px; min-width: 44px; padding: 0 !important; font-size: 0.92rem; }
.panel-live-editor-action { width: auto; min-width: 124px; gap: 8px; padding: 0 14px !important; background: rgba(186, 249, 233, 0.1) !important; border-color: rgba(186, 249, 233, 0.24) !important; color: #baf9e9 !important; font-weight: 700; }
.panel-live-editor-action:hover { background: rgba(186, 249, 233, 0.16) !important; border-color: rgba(186, 249, 233, 0.36) !important; }
.panel-live-editor-action span { white-space: nowrap; font-size: 0.8rem; letter-spacing: 0.02em; }
.panel-tabs { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; padding: 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); }
.panel-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,0.62); cursor: pointer; font-size: 0.78rem; font-weight: 700; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; }
.panel-tab:hover { transform: translateY(-1px); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.88); }
.panel-tab.is-active { background: rgba(186,249,233,0.12); border-color: rgba(186,249,233,0.22); color: #baf9e9; box-shadow: 0 0 0 3px rgba(186,249,233,0.06); }
.panel-step-note { margin-bottom: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(186,249,233,0.06); border: 1px solid rgba(186,249,233,0.14); color: rgba(255,255,255,0.72); font-size: 0.82rem; line-height: 1.5; }
.panel-section-block { display: flex; flex-direction: column; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 18px; }
.panel-section-block:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.panel-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-advanced-group { padding: 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); }
.panel-theme-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.panel-theme-block { padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.18); display: flex; flex-direction: column; gap: 12px; }
.panel-theme-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-editor-card { min-width: 0; }
.panel-preview-card { position: sticky; top: 24px; background: linear-gradient(180deg, rgba(10,10,12,0.82), rgba(12,12,16,0.7)); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 16px; backdrop-filter: blur(14px); box-shadow: 0 24px 48px rgba(0,0,0,0.28); }
.panel-preview-head { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; margin-bottom: 14px; }
.panel-preview-subtitle { color: rgba(255,255,255,0.55); font-size: 0.78rem; line-height: 1.45; margin-top: 4px; }
.panel-preview-phone { background: transparent; }
.panel-preview-banner { height: 108px; background: linear-gradient(135deg, #151820, #0e1015); background-size: cover; background-position: center; }
.panel-preview-phone { --panel-preview-card-bg: rgba(20,20,22,0.82); --panel-preview-card-border: #2d2d33; --panel-preview-avatar-border-width: 3px; --panel-preview-card-blur: blur(10px); --panel-preview-header-bg: rgba(20,20,22,0.62); --panel-preview-header-border: rgba(255,255,255,0.08); --panel-preview-text-primary: #ffffff; --panel-preview-text-secondary: #aaaaaa; --panel-preview-text-tertiary: #888888; --panel-preview-link-bg: #1a1a1f; --panel-preview-link-border: #2d2d33; --panel-preview-link-title: #ffffff; --panel-preview-link-text: #aaaaaa; --panel-preview-link-footer: #888888; --panel-preview-social-bg: #111218; --panel-preview-social-border: #2d2d33; --panel-preview-social-icon: #aaaaaa; }
.panel-preview-shell { overflow: hidden; border-radius: 28px; border: 1px solid var(--panel-preview-card-border); background: var(--panel-preview-card-bg); box-shadow: 0 20px 40px rgba(0,0,0,0.32); backdrop-filter: var(--panel-preview-card-blur); }
.panel-preview-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.panel-preview-body-actual { gap: 10px; margin-top: -34px; }
.panel-preview-header-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 20px; background: var(--panel-preview-header-bg); border: 1px solid var(--panel-preview-header-border); backdrop-filter: var(--panel-preview-card-blur); }
.panel-preview-header-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.panel-preview-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.panel-preview-avatar { width: 64px; height: 64px; border-radius: 20px; object-fit: cover; border: var(--panel-preview-avatar-border-width) solid rgba(255,255,255,0.92); background: #171922; box-shadow: 0 10px 22px rgba(0,0,0,0.28); flex-shrink: 0; }
.panel-preview-name { font-size: 1.08rem; font-weight: 800; color: var(--panel-preview-text-primary); letter-spacing: -0.02em; }
.panel-preview-badges { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.panel-preview-badge { width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 6px 16px rgba(0,0,0,0.2); overflow: hidden; }
.panel-preview-badge img { width: 100%; height: 100%; object-fit: cover; }
.panel-preview-status { font-size: 0.78rem; line-height: 1.35; color: var(--panel-preview-text-secondary); }
.panel-preview-bio, .panel-preview-links { display: flex; flex-direction: column; gap: 8px; }
.panel-preview-item { position: relative; cursor: grab; transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease; }
.panel-preview-item.is-preview-dragging { opacity: 0.6; transform: scale(0.985); }
.panel-preview-item.is-drop-before { box-shadow: inset 0 2px 0 rgba(186,249,233,0.72); }
.panel-preview-item.is-drop-after { box-shadow: inset 0 -2px 0 rgba(186,249,233,0.72); }
.panel-preview-bio-line { font-size: 0.78rem; line-height: 1.38; color: var(--panel-preview-text-primary); display: flex; align-items: flex-start; }
.panel-preview-bio-summary { padding: 8px 10px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.035); color: var(--panel-preview-text-secondary); }
.panel-preview-bio-line strong { color: var(--panel-preview-text-primary); }
.panel-preview-empty-summary { color: var(--panel-preview-text-secondary); }
.panel-preview-links { display: flex; flex-direction: column; gap: 8px; }
.panel-preview-link-card-inner { display: flex; align-items: center; min-height: 74px; padding: 12px 14px; border-radius: 18px; background: var(--preview-link-item-bg, var(--panel-preview-link-bg)); border: 1px solid var(--preview-link-item-border, var(--panel-preview-link-border)); box-shadow: 0 8px 18px rgba(0,0,0,0.14); }
.panel-preview-link-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.panel-preview-link-title { color: var(--preview-link-item-title, var(--panel-preview-link-title)); font-size: 0.84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-preview-link-text { color: var(--preview-link-item-text, var(--panel-preview-link-text)); font-size: 0.71rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-preview-link-footer { color: var(--preview-link-item-footer, var(--panel-preview-link-footer)); font-size: 0.67rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-preview-music-card { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(27,27,27,0.92), rgba(14,14,14,0.95)); box-shadow: 0 12px 26px rgba(0,0,0,0.2); }
.panel-preview-music-cover { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
.panel-preview-music-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.panel-preview-music-title { font-size: 0.84rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-preview-music-artist { font-size: 0.7rem; color: rgba(255,255,255,0.64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-preview-empty { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.12); color: rgba(255,255,255,0.46); font-size: 0.78rem; line-height: 1.5; }
.panel-preview-socials { display: grid; grid-template-columns: repeat(4, minmax(0, 44px)); justify-content: center; gap: 8px; }
.panel-preview-social { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-preview-social-bg); border: 1px solid var(--panel-preview-social-border); color: var(--panel-preview-social-icon); user-select: none; -webkit-user-drag: element; }
.panel-preview-social.is-drop-before { box-shadow: inset 2px 0 0 rgba(186,249,233,0.72); }
.panel-preview-social.is-drop-after { box-shadow: inset -2px 0 0 rgba(186,249,233,0.72); }
.panel-preview-social i { font-size: 1rem; }
.panel-preview-social-image { width: 18px; height: 18px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.panel-preview-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--panel-preview-text-secondary); font-size: 0.78rem; padding-top: 2px; }
.panel-section { padding: 12px 0; }
.panel-section + .panel-section { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 8px; }
.panel-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-section-title { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: 0.02em; }
.panel-badge-upload-field { grid-column: 1 / -1; }
.panel-badge-dropzone { min-height: 118px; border-radius: 18px; border: 1px dashed rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; text-align: center; }
.panel-badge-preview { width: 72px; height: 72px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(135deg, rgba(26,26,32,0.96), rgba(14,14,18,0.92)); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.panel-badge-preview img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.14s ease; }
.panel-badge-preview.has-image img { opacity: 1; }
.panel-badge-copy { color: rgba(255,255,255,0.88); font-size: 0.78rem; font-weight: 700; }
.panel-badge-helper { margin-top: 8px; color: rgba(255,255,255,0.46); font-size: 0.72rem; }
.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.asset-grid-wide { grid-template-columns: 1fr; }
.asset-card { padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.asset-card-wide { min-height: 0; }
.asset-card-label { font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.88); margin-bottom: 12px; }
.asset-preview { position: relative; height: 150px; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, rgba(27,27,36,0.96), rgba(14,14,18,0.92)); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px; }
.asset-dropzone { cursor: pointer; transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease; }
.asset-dropzone:hover { border-color: rgba(186,249,233,0.28); transform: translateY(-1px); }
.asset-dropzone.is-dragover { border-color: rgba(186,249,233,0.55); background-color: rgba(186,249,233,0.06); }
.asset-preview-banner { background-size: cover; background-position: center; }
.asset-preview-audio { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: rgba(255,255,255,0.62); }
.asset-preview-audio i { font-size: 2rem; color: rgba(255,255,255,0.88); }
.asset-preview-avatar { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(81,21,32,0.82), rgba(26,17,28,0.92)); }
.asset-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.asset-preview-cursor { height: 118px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; color: rgba(255,255,255,0.62); }
.asset-preview-video { height: 118px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.62); }
.asset-drop-copy { position: absolute; left: 12px; right: 12px; bottom: 12px; display: inline-flex; justify-content: center; padding: 10px 12px; border-radius: 12px; background: rgba(10,10,12,0.68); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.86); font-size: 0.72rem; font-weight: 700; text-align: center; backdrop-filter: blur(10px); }
.asset-badge { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(10,10,12,0.68); border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 0.72rem; font-weight: 700; }
.panel-file-input { display: none; }
.panel-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.88); cursor: pointer; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.panel-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.95); }
.panel-upload-inline { display: flex; align-items: center; gap: 10px; }
.panel-upload-inline input { flex: 1 1 auto; min-width: 0; }
.panel-upload-inline-btn { flex: 0 0 auto; white-space: nowrap; }
.panel-field-hint { margin-top: 8px; color: rgba(255,255,255,0.48); font-size: 0.75rem; line-height: 1.45; }
.panel-section-actions { display: flex; align-items: center; gap: 12px; }
.panel-section-hint { color: rgba(255,255,255,0.46); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; }
.panel-list { display: flex; flex-direction: column; gap: 10px; }
.panel-item { border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); background: rgba(10,10,12,0.55); padding: 12px; }
.panel-item.is-dragging { opacity: 0.55; border-color: rgba(186,249,233,0.46); box-shadow: 0 14px 30px rgba(0,0,0,0.24); }
.panel-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.panel-item-title { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.panel-drag-handle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.46); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: grab; }
.panel-drag-handle i { font-size: 0.86rem; }
.panel-item-actions { display: flex; align-items: center; gap: 8px; }
.panel-icon-btn { width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.86); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.panel-icon-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.95); }
.panel-icon-btn.danger { background: rgba(190,0,0,0.12); border-color: rgba(190,0,0,0.35); color: rgba(255,255,255,0.92); }
.panel-icon-btn.danger:hover { background: rgba(190,0,0,0.18); border-color: rgba(190,0,0,0.5); }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.panel-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.panel-field label { color: rgba(255,255,255,0.62); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }
.panel-field input, .panel-field textarea, .panel-field select { width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.35); color: var(--text-primary, #fff); padding: 10px 12px; outline: none; }
.panel-field select { color-scheme: dark; background-color: #11141a; }
.panel-field select option { background: #11141a; color: #f4f7fb; }
.panel-field input[type="color"] { padding: 6px; min-height: 52px; border-radius: 16px; background: rgba(0,0,0,0.35); cursor: pointer; }
.panel-field input[type="range"] { padding: 0; min-height: 38px; accent-color: #baf9e9; background: transparent; border: none; box-shadow: none; }
.panel-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.panel-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 12px; }
.panel-field input[type="color"]::-moz-color-swatch { border: none; border-radius: 12px; }
.panel-field textarea { min-height: 86px; resize: vertical; }
.panel-inline { display: flex; align-items: center; gap: 10px; }
.panel-inline input[type="checkbox"] { width: 18px; height: 18px; }
.panel-inline-box { min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.74); }
.panel-inline-box span { font-size: 0.82rem; line-height: 1.4; }
.panel-toggle { position: relative; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.panel-toggle input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.panel-toggle-control { width: 46px; height: 26px; padding: 3px; display: inline-flex; align-items: center; flex-shrink: 0; border-radius: 999px; background: rgba(255,255,255,0.12); cursor: pointer; transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }
.panel-toggle-knob { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.28); transition: transform 0.16s ease; }
.panel-toggle-copy { cursor: pointer; color: rgba(255,255,255,0.82); font-size: 0.82rem; line-height: 1.45; user-select: none; }
.panel-toggle input[type="checkbox"]:checked + .panel-toggle-control { background: rgba(186,249,233,0.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.panel-toggle input[type="checkbox"]:checked + .panel-toggle-control .panel-toggle-knob { transform: translateX(20px); }
.panel-toggle input[type="checkbox"]:focus-visible + .panel-toggle-control { box-shadow: 0 0 0 3px rgba(186,249,233,0.18); }
.panel-advanced { margin-top: 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.35); padding: 10px 12px; }
.panel-advanced > summary { cursor: pointer; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72); list-style: none; }
.panel-advanced > summary::-webkit-details-marker { display: none; }
.panel-advanced[open] > summary { margin-bottom: 10px; }
.panel-advanced textarea { min-height: 150px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }
.panel-row { display: grid; grid-template-columns: 210px 1fr; gap: 14px; margin: 12px 0; }
.panel-field-stack { display: grid; gap: 8px; }
.panel-lock-field { position: relative; }
.panel-lock-badge { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(243,203,136,0.2); background: rgba(243,203,136,0.1); color: #f3cb88; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; pointer-events: none; }
.panel-field-hint { color: rgba(255,255,255,0.48); font-size: 0.76rem; line-height: 1.45; }
.panel-field-hint.is-locked { color: #f3cb88; }
.panel-field-hint a { color: #f3cb88; text-decoration: none; font-weight: 700; }
.panel-field-hint a:hover { color: #ffe4b2; }
.panel-row-stack { align-items: start; }
.panel-row label { color: rgba(255,255,255,0.62); font-size: 0.84rem; padding-top: 10px; font-weight: 600; }
.panel-row input, .panel-row textarea, .panel-row select { width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: var(--text-primary, #fff); padding: 12px 14px; outline: none; transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease; }
.panel-row input.is-locked,
.panel-row input[readonly] { color: rgba(255,255,255,0.58); background: rgba(255,255,255,0.02); border-color: rgba(243,203,136,0.18); cursor: not-allowed; padding-right: 96px; }
.panel-row select { color-scheme: dark; background-color: #11141a; color: #f4f7fb; }
.panel-row select option { background: #11141a; color: #f4f7fb; }
.panel-row input:focus, .panel-row textarea:focus, .panel-row select:focus, .panel-field input:focus, .panel-field textarea:focus, .panel-field select:focus { border-color: rgba(186,249,233,0.42); background: rgba(255,255,255,0.05); box-shadow: 0 0 0 4px rgba(186,249,233,0.08); }
.panel-row textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }
.panel-effect-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.panel-effect-card { width: 100%; min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025)); color: #fff; cursor: pointer; text-align: left; transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease; }
.panel-effect-card:hover { transform: translateY(-1px); border-color: rgba(186,249,233,0.26); background: linear-gradient(180deg, rgba(186,249,233,0.08), rgba(255,255,255,0.035)); }
.panel-effect-card.is-active { border-color: rgba(186,249,233,0.42); background: linear-gradient(180deg, rgba(186,249,233,0.14), rgba(255,255,255,0.04)); box-shadow: 0 0 0 4px rgba(186,249,233,0.08); }
.panel-effect-name { font-size: 0.88rem; font-weight: 800; letter-spacing: 0.02em; color: #fff; }
.panel-effect-copy { font-size: 0.74rem; line-height: 1.45; color: rgba(255,255,255,0.64); }
.live-editor-effect-picker { margin-top: 2px; }
.live-editor-effect-picker .panel-effect-card { min-height: 88px; }
.panel-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.panel-actions button, .panel-actions a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; cursor: pointer; transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease; }
.panel-actions button:hover, .panel-actions a:hover { transform: translateY(-1px); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); }
.panel-actions button.primary { background: rgba(186, 249, 233, 0.12); border-color: rgba(186, 249, 233, 0.35); color: #baf9e9; }
.panel-actions button.primary:hover { background: rgba(186, 249, 233, 0.16); border-color: rgba(186, 249, 233, 0.5); }
.panel-msg { margin-top: 12px; color: var(--text-secondary, #aaa); font-size: 14px; }
.panel-icon-action[disabled] { opacity: 0.42; cursor: not-allowed; pointer-events: none; }
.panel-toast { position: fixed; right: 24px; bottom: 24px; z-index: 120; min-width: 240px; max-width: min(360px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(8,9,12,0.94); color: rgba(255,255,255,0.92); box-shadow: 0 20px 44px rgba(0,0,0,0.34); backdrop-filter: blur(18px); font-size: 0.84rem; line-height: 1.45; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease; }
.panel-toast.is-visible { opacity: 1; transform: translateY(0); }
.panel-toast.is-success { border-color: rgba(186,249,233,0.32); }
.panel-toast.is-error { border-color: rgba(255,120,120,0.34); }
.panel-footer-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.hidden { display:none; }
@media (max-width: 760px) {
    .panel-body { padding: 14px; }
    .panel-layout { grid-template-columns: 1fr; }
    .panel-guest-card { grid-template-columns: 1fr; }
    .panel-top, .panel-workbench-head, .panel-footer-bar { flex-direction: column; align-items: stretch; }
    .panel-row { grid-template-columns: 1fr; }
    .panel-row label { padding-top: 0; }
    .panel-grid { grid-template-columns: 1fr; }
    .asset-grid { grid-template-columns: 1fr; }
    .panel-theme-layout { grid-template-columns: 1fr; }
    .panel-effect-picker { grid-template-columns: 1fr; }
    .panel-preview-links { grid-template-columns: 1fr; }
    .profile-actions-row, .profile-meta, .lp-hero-stats { grid-template-columns: 1fr; display: grid; }
    .profile-actions-row { gap: 8px; }
    .profile-owner-btn, .profile-copy-btn { width: 100%; }
    .panel-preview-card { position: static; }
    .panel-workbench-actions { justify-content: flex-start; }
    .panel-section-actions { flex-direction: column; align-items: flex-end; }
    .panel-toast { right: 14px; bottom: 14px; max-width: calc(100vw - 28px); }
    .profile-actions-row { top: 10px; right: 10px; }
    .view-counter { left: 14px; bottom: 14px; flex-direction: column; align-items: flex-start; }
    .profile-stack { width: min(100%, 340px); gap: 10px; }
    .profile-card { width: 100%; padding: 12px; border-radius: 20px; }
    .profile-card-public { width: 100%; }
    .card-banner { width: calc(100% + 24px); margin: -12px -12px 8px -12px; height: 92px; border-top-left-radius: 20px; border-top-right-radius: 20px; }
    .card-header { margin-top: -30px; border-radius: 16px; padding: 10px 12px; }
    .profile-pic { width: 60px; height: 60px; border-radius: 16px; }
    .header-text h2 { font-size: 1.06rem; }
    .header-text p { font-size: 0.82rem; }
    .profile-summary { font-size: 0.75rem; }
    .profile-feature-grid { grid-template-columns: 1fr; }
    .profile-footer-row { justify-content: flex-end; }
    .live-editor-modal { padding: 12px; align-items: flex-end; }
    .live-editor-panel { width: 100%; height: min(72vh, 760px); border-radius: 22px; }
    .live-editor-sidebar { left: 12px; right: 12px; top: auto; bottom: calc(min(72vh, 760px) + 24px); width: auto; padding: 12px; }
    .live-editor-sidebar-list { flex-direction: row; flex-wrap: wrap; }
    .live-editor-sidebar-btn { flex: 1 1 calc(50% - 8px); }
    .live-editor-form-grid, .live-editor-row { grid-template-columns: 1fr; }
    .live-editor-row { padding-right: 12px; padding-top: 54px; }
    .live-editor-row-remove { top: 12px; right: 12px; }
}

@media (max-width: 860px) {
    #profile-container.is-home #home-container {
        padding: 18px 14px 16px;
        gap: 22px;
    }
    #profile-container.is-home .lp-navbar {
        min-height: auto;
        padding-bottom: 14px;
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
    #profile-container.is-home .lp-nav {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0;
    }
    #profile-container.is-home .lp-nav a,
    #profile-container.is-home .lp-user-trigger {
        padding-left: 0;
        padding-right: 12px;
    }
    #profile-container.is-home .lp-hero {
        grid-template-columns: 1fr;
        padding: 18px 0 10px;
        gap: 18px;
    }
    #profile-container.is-home .lp-hero h1 {
        font-size: clamp(1.8rem, 9vw, 3rem);
    }
    #profile-container.is-home .lp-hero-visual {
        min-height: 220px;
    }
    #profile-container.is-home .lp-hero-visual-badge,
    #profile-container.is-home .lp-hero-chip {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.home-features, .features-grid, .feature-card, .feature-icon, .home-about, .home-contact { display: none; }

/* --- Final spacing pass for minimal public pages --- */
#profile-container.is-home #home-container {
    max-width: 1180px;
    padding: 24px 28px 20px;
    gap: 28px;
}

#profile-container.is-home .lp-navbar {
    min-height: 54px;
}

#profile-container.is-home .lp-nav a,
#profile-container.is-home .lp-user-trigger {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#profile-container.is-home .lp-brand {
    gap: 10px;
}

#profile-container.is-home .lp-title {
    font-size: 0.74rem;
    letter-spacing: 0.28em;
}

#profile-container.is-home .lp-nav {
    gap: 0;
}

#profile-container.is-home .lp-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
    gap: 44px;
    padding: 42px 0 6px;
    align-items: start;
}

#profile-container.is-home .lp-hero h1 {
    max-width: 760px;
    font-size: clamp(2.4rem, 5.8vw, 5.2rem);
    letter-spacing: -0.08em;
    line-height: 0.92;
}

#profile-container.is-home .lp-subtitle {
    max-width: 620px;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.58);
}

#profile-container.is-home .access-requirement-card {
    max-width: 560px;
    padding-top: 18px;
}

#profile-container.is-home .access-requirement-link {
    margin-top: 12px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

#profile-container.is-home .lp-primary-btn,
#profile-container.is-home .lp-secondary-btn {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    justify-content: flex-start;
    background: transparent;
}

#profile-container.is-home .lp-primary-btn::after,
#profile-container.is-home .lp-secondary-btn::after,
#profile-container.is-home .access-requirement-link::after {
    content: " /";
    opacity: 0.55;
    margin-left: 4px;
}

#profile-container.is-home .lp-hero-visual {
    min-height: 260px;
    background: rgba(255,255,255,0.02);
    align-self: stretch;
}

#profile-container.is-home .lp-hero-visual-glow {
    width: 180px;
    height: 180px;
    opacity: 0.55;
}

#profile-container.is-home .lp-hero-logo-mark {
    width: min(62%, 160px);
    opacity: 0.72;
    filter: grayscale(1);
}

#profile-container.is-home .lp-hero-visual-badge,
#profile-container.is-home .lp-hero-chip,
#profile-container.is-home .whitelist-hero-icon {
    background: transparent;
    color: rgba(255,255,255,0.72);
}

#profile-container.is-home .whitelist-hero-icon i,
#profile-container.is-home .lp-feature-card i,
#profile-container.is-home .lp-quick-index {
    color: rgba(255,255,255,0.76);
}

#profile-container.is-home .lp-quick-grid,
#profile-container.is-home .lp-features-grid,
#profile-container.is-home .home-grid {
    gap: 28px 18px;
}

#profile-container.is-home .lp-quick-card,
#profile-container.is-home .lp-feature-card {
    padding-top: 14px;
}

#profile-container.is-home .lp-quick-card h3,
#profile-container.is-home .lp-feature-card h3,
#profile-container.is-home .home-card-text h3 {
    font-size: 1.08rem;
    font-weight: 700;
}

#profile-container.is-home .lp-quick-card p,
#profile-container.is-home .lp-feature-card p,
#profile-container.is-home .home-card-text p {
    line-height: 1.6;
    color: rgba(255,255,255,0.54);
}

#profile-container.is-home .lp-feature-card .lp-secondary-btn {
    margin-top: 14px;
}

#profile-container.is-home .home-tools {
    padding-top: 0;
}

#profile-container.is-home #member-search {
    max-width: 520px;
    padding: 12px 0;
    font-size: 0.9rem;
}

#profile-container.is-home .home-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
    justify-content: start;
}

#profile-container.is-home .home-card-banner {
    height: 96px;
    filter: grayscale(0.2) saturate(0.55) contrast(1);
}

#profile-container.is-home .home-card-content {
    padding: 12px 0 10px;
}

#profile-container.is-home .home-card-footer {
    padding: 0 0 8px;
}

#profile-container.is-home .home-card-cta {
    padding: 10px 0 0;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
}

#profile-container.is-home .lp-footer {
    padding-top: 16px;
    color: rgba(255,255,255,0.45);
}

/* --- Final flattening pass for the panel --- */
body.panel-body {
    background-image: linear-gradient(180deg, #07080b 0%, #050608 100%);
}

body.panel-body .lp-navbar.panel-top {
    min-height: 58px;
    padding: 0 0 10px;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    box-shadow: none;
}

body.panel-body .panel {
    max-width: 1180px;
}

body.panel-body .panel-top {
    margin-bottom: 12px;
}

body.panel-body .panel-card,
body.panel-body .panel-guest-primary,
body.panel-body .panel-guest-secondary,
body.panel-body .panel-workbench-actions a,
body.panel-body .panel-workbench-actions button,
body.panel-body .panel-footer-nav button,
body.panel-body .panel-tabs,
body.panel-body .panel-tab,
body.panel-body .panel-step-note,
body.panel-body .panel-advanced-group,
body.panel-body .panel-theme-block,
body.panel-body .panel-preview-card,
body.panel-body .panel-btn,
body.panel-body .panel-item,
body.panel-body .panel-icon-btn,
body.panel-body .panel-actions button,
body.panel-body .panel-actions a,
body.panel-body .panel-field input,
body.panel-body .panel-field textarea,
body.panel-body .panel-field select,
body.panel-body .panel-row input,
body.panel-body .panel-row textarea,
body.panel-body .panel-row select,
body.panel-body .panel-inline-box,
body.panel-body .panel-advanced,
body.panel-body .panel-toast,
body.panel-body .asset-card,
body.panel-body .asset-preview,
body.panel-body .asset-drop-copy,
body.panel-body .asset-badge,
body.panel-body .panel-badge-dropzone,
body.panel-body .panel-badge-preview {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

body.panel-body .panel-card {
    padding: 20px 0 14px;
    background: transparent;
}

body.panel-body .panel-guest-card {
    gap: 12px;
}

body.panel-body .panel-guest-primary,
body.panel-body .panel-guest-secondary,
body.panel-body .panel-workbench-actions a,
body.panel-body .panel-workbench-actions button,
body.panel-body .panel-btn,
body.panel-body .panel-actions button,
body.panel-body .panel-actions a,
body.panel-body .panel-icon-btn {
    min-height: 34px;
    padding: 0 10px;
    background: transparent;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.panel-body .panel-live-editor-action {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
}

body.panel-body .panel-workbench-head {
    margin-bottom: 16px;
}

body.panel-body .panel-workbench-copy {
    max-width: 540px;
    font-size: 0.84rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.52);
}

body.panel-body .panel-tabs {
    gap: 14px;
    margin-bottom: 16px;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 10px;
}

body.panel-body .panel-tab {
    min-height: 30px;
    padding: 0;
    color: rgba(255,255,255,0.44);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.panel-body .panel-tab:hover {
    transform: none;
    background: transparent;
    color: rgba(255,255,255,0.82);
}

body.panel-body .panel-tab.is-active {
    background: transparent;
    color: #fff;
    box-shadow: none;
}

body.panel-body .panel-step-note {
    margin-bottom: 16px;
    padding: 0 0 10px;
    background: transparent;
    color: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

body.panel-body .panel-section-block {
    gap: 14px;
    padding-bottom: 10px;
    margin-bottom: 18px;
}

body.panel-body .panel-row {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 16px;
    margin: 12px 0;
}

body.panel-body .panel-row input,
body.panel-body .panel-row textarea,
body.panel-body .panel-row select,
body.panel-body .panel-field input,
body.panel-body .panel-field textarea,
body.panel-body .panel-field select,
body.panel-body .panel-inline-box,
body.panel-body .panel-advanced {
    background: rgba(255,255,255,0.025);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

body.panel-body .panel-row input:focus,
body.panel-body .panel-row textarea:focus,
body.panel-body .panel-row select:focus,
body.panel-body .panel-field input:focus,
body.panel-body .panel-field textarea:focus,
body.panel-body .panel-field select:focus {
    box-shadow: none;
    background: rgba(255,255,255,0.04);
    border-bottom-color: rgba(255,255,255,0.2);
}

body.panel-body .panel-item {
    padding: 12px 0;
    background: transparent;
    border-top: 1px solid rgba(255,255,255,0.08);
}

body.panel-body .panel-item.is-dragging {
    box-shadow: none;
}

body.panel-body .panel-preview-card {
    padding: 18px 0 0;
    background: transparent;
}

body.panel-body .panel-preview-shell {
    border-radius: 0;
    box-shadow: none;
}

body.panel-body .panel-preview-head {
    margin-bottom: 10px;
}

body.panel-body .panel-preview-subtitle {
    color: rgba(255,255,255,0.46);
}

@media (max-width: 860px) {
    #profile-container.is-home #home-container {
        padding: 16px 14px 14px;
        gap: 18px;
    }
    #profile-container.is-home .lp-navbar {
        padding-bottom: 10px;
        gap: 10px;
    }
    #profile-container.is-home .lp-hero {
        grid-template-columns: 1fr;
        padding: 18px 0 4px;
        gap: 16px;
    }
    #profile-container.is-home .lp-hero h1 {
        font-size: clamp(1.9rem, 10vw, 3.2rem);
    }
    #profile-container.is-home .lp-hero-visual {
        min-height: 160px;
    }
}

@media (max-width: 760px) {
    body.panel-body .panel-row {
        grid-template-columns: 1fr;
    }
    body.panel-body .panel-card {
        padding: 12px 0 10px;
    }
}

/* --- Sleek alignment pass --- */
#profile-container.is-home #home-container,
body.panel-body .panel {
    max-width: 1200px;
}

#profile-container.is-home .lp-navbar,
body.panel-body .lp-navbar.panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 0 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
    border-bottom: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    backdrop-filter: blur(14px);
}

#profile-container.is-home .lp-brand,
body.panel-body .lp-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 0 0 auto;
}

#profile-container.is-home .lp-logo,
body.panel-body .lp-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    opacity: 0.92;
}

#profile-container.is-home .lp-title,
body.panel-body .lp-title {
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.94);
}

#profile-container.is-home .lp-nav,
body.panel-body .lp-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
}

#profile-container.is-home .lp-nav a,
#profile-container.is-home .lp-user-trigger,
body.panel-body .lp-nav a,
body.panel-body .lp-user-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.74);
    background: transparent;
}

#profile-container.is-home .lp-nav a:hover,
#profile-container.is-home .lp-user-trigger:hover,
body.panel-body .lp-nav a:hover,
body.panel-body .lp-user-trigger:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

#profile-container.is-home .lp-nav-cta,
body.panel-body .lp-nav-cta {
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05));
    color: #fff !important;
}

#profile-container.is-home .lp-user-menu,
body.panel-body .lp-user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

#profile-container.is-home .lp-user-trigger,
body.panel-body .lp-user-trigger {
    gap: 8px;
    padding-right: 10px;
}

#profile-container.is-home .lp-user-avatar,
body.panel-body .lp-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255,255,255,0.06);
}

#profile-container.is-home .lp-user-name,
body.panel-body .lp-user-name {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

#profile-container.is-home .lp-user-dropdown,
body.panel-body .lp-user-dropdown {
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    padding: 6px;
    background: rgba(10,12,16,0.96);
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

#profile-container.is-home .lp-user-dropdown a,
#profile-container.is-home .lp-user-dropdown button,
body.panel-body .lp-user-dropdown a,
body.panel-body .lp-user-dropdown button {
    justify-content: flex-start;
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

#profile-container.is-home .lp-hero,
body.panel-body .panel-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008));
}

#profile-container.is-home .lp-hero {
    padding: 34px 0 10px;
    gap: 36px;
}

#profile-container.is-home .lp-hero h1 {
    font-size: clamp(2.2rem, 5.4vw, 4.6rem);
}

#profile-container.is-home .lp-subtitle {
    color: rgba(255,255,255,0.62);
}

#profile-container.is-home .lp-hero-visual {
    min-height: 240px;
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,0.08), transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

#profile-container.is-home .lp-hero-logo-mark {
    width: min(64%, 176px);
    opacity: 0.82;
    filter: none;
}

#profile-container.is-home .lp-quick-card,
#profile-container.is-home .lp-feature-card,
#profile-container.is-home .home-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008));
    padding: 14px 14px 12px;
}

#profile-container.is-home .lp-quick-card,
#profile-container.is-home .lp-feature-card {
    border-top: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

#profile-container.is-home .home-card {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

#profile-container.is-home .home-card-content,
#profile-container.is-home .home-card-footer {
    padding-left: 0;
    padding-right: 0;
}

body.panel-body .panel-card {
    padding: 18px 18px 16px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

body.panel-body .panel-tabs {
    gap: 8px;
    padding: 0;
    border-bottom: none;
}

body.panel-body .panel-tab {
    min-height: 34px;
    padding: 0 10px;
    color: rgba(255,255,255,0.68);
    background: rgba(255,255,255,0.03);
}

body.panel-body .panel-tab:hover,
body.panel-body .panel-tab.is-active {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

body.panel-body .panel-step-note {
    padding: 10px 12px;
    background: rgba(255,255,255,0.035);
    border-bottom: none;
}

body.panel-body .panel-row input,
body.panel-body .panel-row textarea,
body.panel-body .panel-row select,
body.panel-body .panel-field input,
body.panel-body .panel-field textarea,
body.panel-body .panel-field select,
body.panel-body .panel-inline-box,
body.panel-body .panel-advanced {
    background: rgba(255,255,255,0.03);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    border-bottom: none;
}

body.panel-body .panel-row input:focus,
body.panel-body .panel-row textarea:focus,
body.panel-body .panel-row select:focus,
body.panel-body .panel-field input:focus,
body.panel-body .panel-field textarea:focus,
body.panel-body .panel-field select:focus {
    background: rgba(255,255,255,0.05);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

@media (max-width: 860px) {
    #profile-container.is-home .lp-navbar,
    body.panel-body .lp-navbar.panel-top {
        padding: 10px 12px;
        min-height: auto;
        flex-direction: column;
        align-items: stretch;
    }
    #profile-container.is-home .lp-brand,
    body.panel-body .lp-brand {
        justify-content: flex-start;
    }
    #profile-container.is-home .lp-nav,
    body.panel-body .lp-nav {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: 0;
    }
    #profile-container.is-home .lp-nav a,
    #profile-container.is-home .lp-user-trigger,
    body.panel-body .lp-nav a,
    body.panel-body .lp-user-trigger {
        min-height: 36px;
        padding: 0 10px;
    }
    #profile-container.is-home .lp-hero {
        gap: 20px;
        padding-top: 22px;
    }
    #profile-container.is-home .lp-hero h1 {
        font-size: clamp(1.95rem, 9vw, 3.3rem);
    }
}

@media (max-width: 640px) {
    #profile-container {
        padding: 14px;
    }

    #profile-container:not(.is-home) {
        height: auto;
        min-height: 100vh;
        padding: 18px 0 32px;
        overflow: visible;
    }

    .profile-stack,
    .profile-card,
    .profile-card-public {
        width: 100%;
    }

    .profile-actions-row {
        position: static;
        justify-content: stretch;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }

    .profile-owner-btn,
    .profile-copy-btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .profile-meta {
        grid-template-columns: 1fr;
    }

    #profile-container.is-home #home-container,
    body.panel-body .panel {
        padding-left: 12px;
        padding-right: 12px;
    }

    #profile-container.is-home .lp-navbar,
    body.panel-body .lp-navbar.panel-top {
        gap: 12px;
        padding: 12px;
    }

    #profile-container.is-home .lp-brand,
    body.panel-body .lp-brand {
        width: 100%;
        justify-content: center;
    }

    #profile-container.is-home .lp-nav,
    body.panel-body .lp-nav {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
    }

    #profile-container.is-home .lp-nav a,
    #profile-container.is-home .lp-user-menu,
    body.panel-body .lp-nav a,
    body.panel-body .lp-user-menu {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }

    #profile-container.is-home .lp-user-trigger,
    body.panel-body .lp-user-trigger {
        width: 100%;
        justify-content: center;
        padding: 0 12px;
    }

    #profile-container.is-home .lp-user-dropdown,
    body.panel-body .lp-user-dropdown {
        left: 0;
        right: 0;
        min-width: 0;
    }

    #profile-container.is-home .lp-hero {
        padding: 18px 0 0;
        gap: 16px;
    }

    #profile-container.is-home .lp-hero h1 {
        font-size: clamp(1.75rem, 11vw, 2.7rem);
        line-height: 0.98;
    }

    #profile-container.is-home .lp-subtitle,
    #profile-container.is-home .access-requirement-card p {
        font-size: 0.92rem;
        line-height: 1.6;
    }

    #profile-container.is-home .lp-hero-visual {
        min-height: 180px;
    }

    #profile-container.is-home .lp-quick-grid,
    #profile-container.is-home .lp-features-grid,
    #profile-container.is-home .home-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #profile-container.is-home .home-card {
        max-width: none;
    }

    body.panel-body {
        padding: 12px;
    }

    body.panel-body .panel-card {
        padding: 14px 12px;
    }

    body.panel-body .panel-guest-copy h2 {
        font-size: 1.45rem;
    }

    body.panel-body .panel-guest-actions,
    body.panel-body .panel-workbench-head,
    body.panel-body .panel-workbench-actions,
    body.panel-body .panel-block-head,
    body.panel-body .panel-section-head,
    body.panel-body .panel-section-actions,
    body.panel-body .panel-footer-bar,
    body.panel-body .panel-actions,
    body.panel-body .panel-upload-inline {
        flex-direction: column;
        align-items: stretch;
    }

    body.panel-body .panel-workbench-actions a,
    body.panel-body .panel-workbench-actions button,
    body.panel-body .panel-guest-primary,
    body.panel-body .panel-guest-secondary,
    body.panel-body .panel-upload-inline-btn,
    body.panel-body .panel-actions button,
    body.panel-body .panel-actions a {
        width: 100%;
    }

    body.panel-body .panel-live-editor-action,
    body.panel-body .panel-icon-action {
        width: 100%;
        min-width: 0;
        padding: 0 12px !important;
    }

    body.panel-body .panel-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.panel-body .panel-tab {
        width: 100%;
        min-height: 38px;
        justify-content: center;
    }

    body.panel-body .panel-theme-layout,
    body.panel-body .panel-grid,
    body.panel-body .panel-row,
    body.panel-body .asset-grid,
    .live-editor-form-grid,
    .live-editor-row {
        grid-template-columns: 1fr;
    }

    body.panel-body .panel-row {
        gap: 8px;
    }

    body.panel-body .panel-row label {
        padding-top: 0;
    }

    body.panel-body .panel-preview-head,
    body.panel-body .panel-preview-header-card,
    .live-editor-head,
    .live-editor-footer,
    .live-editor-subhead,
    .live-editor-actions,
    .live-editor-upload-card {
        flex-direction: column;
        align-items: stretch;
    }

    body.panel-body .panel-preview-shell {
        border-radius: 20px;
    }

    body.panel-body .panel-preview-socials {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .live-editor-modal {
        padding: 0;
        align-items: stretch;
    }

    .live-editor-backdrop {
        background: rgba(3, 4, 7, 0.72);
        pointer-events: auto;
    }

    .live-editor-panel {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .live-editor-head,
    .live-editor-body,
    .live-editor-footer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .live-editor-sidebar {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        border-radius: 18px 18px 0 0;
    }

    .live-editor-sidebar-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-editor-sidebar-btn {
        flex: none;
    }

    .panel-toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}

@media (max-width: 420px) {
    #profile-container.is-home .lp-nav a,
    #profile-container.is-home .lp-user-menu,
    body.panel-body .lp-nav a,
    body.panel-body .lp-user-menu {
        flex-basis: 100%;
    }

    #profile-container.is-home .lp-title,
    body.panel-body .lp-title {
        letter-spacing: 0.16em;
    }

    body.panel-body .panel-tabs,
    .live-editor-sidebar-list {
        grid-template-columns: 1fr;
    }

    body.panel-body .panel-preview-socials {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .lp-mobile-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    #profile-container.is-home .lp-navbar,
    body.panel-body .lp-navbar.panel-top {
        position: sticky;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        overflow: visible;
    }

    #profile-container.is-home .lp-brand,
    body.panel-body .lp-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    #profile-container.is-home .lp-nav,
    body.panel-body .lp-nav {
        position: absolute;
        top: calc(100% + 8px);
        right: 12px;
        width: min(220px, calc(100vw - 40px));
        margin-left: 0;
        display: none;
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(7, 9, 13, 0.96);
        box-shadow: 0 22px 44px rgba(0,0,0,0.34);
        backdrop-filter: blur(18px);
        z-index: 40;
    }

    #profile-container.is-home .lp-navbar.is-mobile-nav-open .lp-nav,
    body.panel-body .lp-navbar.panel-top.is-mobile-nav-open .lp-nav {
        display: grid;
    }

    #profile-container.is-home .lp-nav a,
    #profile-container.is-home .lp-user-menu,
    #profile-container.is-home .lp-user-trigger,
    body.panel-body .lp-nav a,
    body.panel-body .lp-user-menu,
    body.panel-body .lp-user-trigger {
        width: 100%;
        min-width: 0;
    }

    #profile-container.is-home .lp-nav a,
    body.panel-body .lp-nav a {
        justify-content: flex-start;
        padding: 0 12px;
        min-height: 40px;
        border-radius: 12px;
        background: rgba(255,255,255,0.03);
    }

    #profile-container.is-home .lp-user-menu,
    body.panel-body .lp-user-menu {
        display: block;
    }

    #profile-container.is-home .lp-user-trigger,
    body.panel-body .lp-user-trigger {
        justify-content: space-between;
        min-height: 42px;
        border-radius: 12px;
    }

    #profile-container.is-home .lp-user-dropdown,
    body.panel-body .lp-user-dropdown {
        position: static;
        left: auto;
        right: auto;
        min-width: 0;
        margin-top: 6px;
        border-radius: 12px;
        box-shadow: none;
    }
}

@media (max-width: 640px) {
    #profile-container.is-home .lp-brand,
    body.panel-body .lp-brand {
        width: auto;
        justify-content: flex-start;
    }

    #profile-container.is-home .lp-navbar,
    body.panel-body .lp-navbar.panel-top {
        align-items: center;
        min-height: 64px;
    }

    #profile-container.is-home .lp-mobile-toggle,
    body.panel-body .lp-mobile-toggle {
        width: auto;
        margin-left: auto;
    }

    #profile-container.is-home .lp-nav,
    body.panel-body .lp-nav {
        right: 10px;
        width: min(210px, calc(100vw - 32px));
    }
}

#profile-container.is-home .lp-hero-visual {
    min-height: 240px;
    background: transparent;
    border: none;
    box-shadow: none;
}

#profile-container.is-home .lp-hero-logo-mark {
    display: block;
    width: min(88%, 320px);
    max-height: 220px;
    opacity: 0.96;
    filter: drop-shadow(0 18px 44px rgba(186,249,233,0.16));
}

@media (max-width: 860px) {
    #profile-container.is-home .lp-hero-visual {
        min-height: 210px;
    }

    #profile-container.is-home .lp-hero-logo-mark {
        width: min(82%, 260px);
        max-height: 180px;
    }
}