* {margin: 0; padding: 0; box-sizing: border-box; font-weight: 500; scrollbar-width: none;}
*::-webkit-scrollbar {display: none;}
.sidebar-logo-text {font-weight: 600 !important;}
body {min-height: 100vh; background: #080808; font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif; color: #fff; display: flex; overflow-x: hidden;}
:root {--pink: #d4d4d4; --pink-bg: rgba(255,255,255,0.08); --pink-border: rgba(255,255,255,0.13); --pink-hover: rgba(255,255,255,0.13); --dark-bg: #141414; --dark-border: #191919; --dark-light-bg: #1a1a1a; --panel-border: #191919; --icon-blue: brightness(0) invert(0.72); --slider-blue: #888;}
.sidebar {position:fixed; left:0; top:0; bottom:0; width:260px; background:transparent; border-radius:0; display:flex; flex-direction:column; padding:24px 16px; z-index:999; transition:transform 0.3s cubic-bezier(0.34,1.2,0.64,1);}
.sidebar-logo {display:flex; align-items:center; justify-content:center; padding:14px 12px 18px 12px; margin-bottom:4px;}
.sidebar-sep {border-bottom:1px solid var(--panel-border); margin:8px 0 12px;}
.sidebar-brand{display:flex; align-items:center; gap:12px; cursor:pointer;}
.brand-logo{width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(74,158,255,0.6)) drop-shadow(0 0 24px rgba(74,158,255,0.3));}
.sidebar-logo-text {font-family: 'Urbanist', sans-serif;font-size:1.6rem; font-weight:600; color:#fff; letter-spacing:0.5px; text-shadow:0 0 12px rgba(255,255,255,0.6), 0 0 28px rgba(255,255,255,0.35), 0 0 60px rgba(255,255,255,0.15); -webkit-text-stroke:0.5px rgba(255,255,255,0.4);}
.sidebar-logo-text .dot {color:#4a9eff; font-size:2.2rem; text-shadow:0 0 10px rgba(74,158,255,0.9), 0 0 25px rgba(74,158,255,0.6), 0 0 50px rgba(74,158,255,0.3);}
.sidebar-search {display:flex; align-items:center; gap:12px; padding:9px 14px; border-radius:18px; border:1px solid transparent; background:transparent; color:#fff; font-size:0.92rem; font-weight:500; cursor:pointer; margin-bottom:0; transition:all 0.18s; width:100%;}
.sidebar-search:hover {background:#141414; color:#bbb;}
.sidebar-search:hover img {filter:brightness(0) invert(0.6);}
.sidebar-search img {width:18px; height:18px; object-fit:contain; filter:brightness(0) invert(0.54); flex-shrink:0; transition:0.18s;}
.sidebar-search span {flex:1;}
.sidebar-search-kbd {font-size:0.7rem; color:#2a2a2a; background:#161616; border:1px solid #191919; border-radius:6px; padding:2px 6px; flex:0 0 auto !important;}
.search-overlay {position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; justify-content:center; align-items:flex-start; padding-top:80px; z-index:99999; backdrop-filter:blur(4px);}
.search-overlay.open {display:flex;}
.search-modal {background:#0d0d0d; border:1px solid #191919; border-radius:30px; width:100%; max-width:620px; overflow:hidden; animation:modalPop 0.2s cubic-bezier(0.34,1.56,0.64,1) both;}
.search-input-row {display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid #191919;}
.search-input-row img {width:18px; height:18px; object-fit:contain; filter:brightness(0) invert(0.54); flex-shrink:0;}
.search-input-row input {flex:1; background:transparent !important; border:none !important; outline:none; color:#fff; font-size:1rem; font-family:inherit; border-radius:0 !important; padding:0 !important;}
.search-input-row input::placeholder {color:#333;}
.search-close-btn {width:28px; height:28px; border-radius:8px; border:none; background:transparent; color:#555; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:0.15s; flex-shrink:0; font-family:inherit;}
.search-close-btn:hover {background:rgba(255,255,255,0.08); color:#fff;}
.search-body {max-height:500px; overflow-y:auto; padding:10px 0;}
.search-body::-webkit-scrollbar {width:3px;}
.search-body::-webkit-scrollbar-thumb {background:#222; border-radius:4px;}
.search-cat {font-size:0.7rem; color:#333; letter-spacing:0.08em; padding:8px 20px 4px; text-transform:uppercase;}
.search-item {display:flex; align-items:center; gap:12px; padding:10px 20px; cursor:pointer; transition:background 0.12s;}
.search-item:hover, .search-item.active {background:rgba(255,255,255,0.04);}
.search-item-icon {width:32px; height:32px; border-radius:10px; background:#0d0d0d; border:2px solid #191919; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.search-item-icon img {width:15px; height:15px; object-fit:contain; filter:brightness(0) invert(0.54);}
.search-item-label {flex:1; font-size:0.9rem; color:#ccc;}
.search-item-sub {font-size:0.75rem; color:#555; margin-top:1px;}
.search-item-path {font-size:0.75rem; color:#2a2a2a; flex-shrink:0;}
.search-item.is-page .search-item-icon img {filter:var(--icon-blue);}
.search-item.is-page .search-item-icon {background:rgba(210,210,210,0.08); border-color:rgba(210,210,210,0.15);}
.search-item.is-page .search-item-label {color:#fff;}
.search-sub-item {padding-left:64px;}
.search-sub-item .search-item-label {font-size:0.83rem; color:#555;}
.search-sub-item:hover .search-item-label {color:#888;}
.search-empty {padding:32px 20px; text-align:center; color:#333; font-size:0.88rem;}
.sidebar-nav {display:flex; flex-direction:column; gap:2px; flex:1;}
.nav-section {display:flex; flex-direction:column;}
.nav-section-header {display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:18px; background:transparent; color:#fff; font-size:0.92rem; font-weight:500; cursor:pointer; transition:all 0.18s; position:relative;}
.nav-section-header:hover {background:#141414; color:#bbb;}
.nav-section-header .icon {width:18px; height:18px; object-fit:contain; filter:brightness(0) invert(0.75); flex-shrink:0;}
.nav-section-header:hover .icon {filter:brightness(0) invert(0.6);}
.nav-section-header .breadcrumb {width:16px; height:16px; object-fit:contain; filter:brightness(0) invert(0.54); margin-left:auto; transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1); transform:rotate(-90deg);}
.nav-section-header:hover .breadcrumb {filter:brightness(0) invert(0.5);}
.nav-section.expanded .nav-section-header .breadcrumb {transform:rotate(0deg);}
.nav-section-content {display:none; flex-direction:column; gap:2px; padding-left:8px; overflow:hidden; max-height:0; opacity:0;}
.nav-section.expanded .nav-section-content {display:flex; max-height:500px; opacity:1; margin-top:2px; animation:slideDown 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;}
.nav-subsection {display:flex; flex-direction:column; gap:2px;}
.nav-subsection-header {display:flex; align-items:center; gap:10px; padding:8px 12px; padding-left:20px; border-radius:14px; background:transparent; color:#fff; font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.18s; position:relative;}
.nav-subsection-header:hover {background:#141414; color:#888;}
.nav-subsection-header .breadcrumb {width:14px; height:14px; object-fit:contain; filter:brightness(0) invert(0.54); margin-left:auto; transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1); transform:rotate(-90deg);}
.nav-subsection-header:hover .breadcrumb {filter:brightness(0) invert(0.4);}
.nav-subsection.expanded .nav-subsection-header .breadcrumb {transform:rotate(0deg);}
.nav-subsection-content {display:none; flex-direction:column; gap:1px; padding-left:12px; overflow:hidden; max-height:0; opacity:0;}
.nav-subsection.expanded .nav-subsection-content {display:flex; max-height:300px; opacity:1; margin-top:2px;}
.nav-subitem {display:flex; align-items:center; gap:12px; padding:9px 14px; padding-left:20px; border-radius:18px; background:transparent; color:#fff; font-size:0.88rem; font-weight:500; cursor:pointer; transition:all 0.18s; text-decoration:none; animation:slideDown 0.3s cubic-bezier(0.34,1.56,0.64,1) both;}
.nav-subitem .subicon {width:18px; height:18px; object-fit:contain; filter:brightness(0) invert(0.75); flex-shrink:0;}
.nav-subitem:hover {background:#141414; color:#bbb;}
.nav-subitem:hover .subicon {filter:brightness(0) invert(0.6);}
.nav-subitem.active {background:rgba(210,210,210,0.08); color:var(--pink);}
.nav-subitem.active .subicon {filter:var(--icon-blue);}
.nav-item.simple {display:flex; align-items:center; gap:12px; padding:9px 14px; border-radius:18px; background:transparent; color:#fff; font-size:0.88rem; font-weight:500; cursor:pointer; transition:all 0.18s; text-decoration:none;}
.nav-item.simple:hover {background:#141414; color:#bbb;}
.nav-item.simple.active {background:rgba(210,210,210,0.08); color:var(--pink);}
.nav-item.simple .icon {width:18px; height:18px; object-fit:contain; filter:brightness(0) invert(0.75); flex-shrink:0;}
.nav-item.simple.active .icon {filter:var(--icon-blue);}
.nav-item.simple:hover:not(.active) .icon {filter:brightness(0) invert(0.6);}
@keyframes slideDown {from {opacity: 0; transform: translateY(-8px);} to {opacity: 1; transform: translateY(0);}}
.sidebar-bottom {display:flex; flex-direction:column; gap:8px; padding-top:16px;}
.sidebar-user {display:flex; align-items:center; gap:10px; padding:10px 12px; background:#0d0d0d; border:1px solid #191919; border-radius:20px; position:relative;}
.sidebar-avatar {width:36px; height:36px; border-radius:10px; object-fit:cover; background:#222; flex-shrink:0;}
.sidebar-username {font-size:0.85rem; font-weight:500; color:#fff;}
.sidebar-tag {font-size:0.72rem; color:#555; font-weight:200;}
.sidebar-dots {width:28px; height:28px; border-radius:8px; border:none; background:transparent; color:#aaa; font-size:1.1rem; cursor:pointer; letter-spacing:1px; display:flex; align-items:center; justify-content:center; transition:0.15s; flex-shrink:0; font-family:inherit;}
.sidebar-dots:hover {background:rgba(255,255,255,0.07); color:#aaa;}
.sidebar-usermenu {position:absolute; bottom:calc(100% + 10px); left:0; right:0; background:#0d0d0d; border:1px solid #191919; border-radius:30px; padding:8px; display:none; flex-direction:column; gap:5px; z-index:1000; animation:modalPop 0.2s cubic-bezier(0.34,1.56,0.64,1) both; box-shadow:0 8px 32px rgba(0,0,0,0.5);}
.sidebar-usermenu.open {display:flex;}
.sidebar-usermenu button {display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:12px; border:2px solid transparent; font-size:0.84rem; font-weight:600; cursor:pointer; font-family:inherit; text-align:left; width:100%; transition:0.15s;}
.sidebar-usermenu button img {width:15px; height:15px; object-fit:contain; flex-shrink:0;}
.sidebar-usermenu-sep {display:none;}
.sidebar-usermenu button.profile {background:rgba(210,210,210,0.1); border-color:rgba(210,210,210,0.2); color:var(--pink);}
.sidebar-usermenu button.profile img {filter:var(--icon-blue);}
.sidebar-usermenu button.profile:hover {background:rgba(210,210,210,0.18); border-color:rgba(210,210,210,0.35);}
.sidebar-usermenu button.leaderboard {background:rgba(255,200,60,0.08); border-color:rgba(255,200,60,0.2); color:#ffc83c;}
.sidebar-usermenu button.leaderboard img {filter:brightness(0) saturate(100%) invert(85%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(1.1);}
.sidebar-usermenu button.leaderboard:hover {background:rgba(255,200,60,0.15); border-color:rgba(255,200,60,0.38);}
.sidebar-usermenu button.danger {background:rgba(200,60,60,0.1); border-color:rgba(200,60,60,0.25); color:#ff7070;}
.sidebar-usermenu button.danger img {filter:brightness(0) saturate(100%) invert(55%) sepia(60%) saturate(800%) hue-rotate(310deg);}
.sidebar-usermenu button.danger:hover {background:rgba(200,60,60,0.18); border-color:rgba(200,60,60,0.4);}
.btn-sidebar {display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; border:1px solid var(--panel-border); background:#0d0d0d; color:#666; font-size:0.85rem; font-weight:500; font-family:inherit; cursor:pointer; text-decoration:none; transition:all 0.18s; width:100%; justify-content:center;}
.btn-sidebar:hover {background:#0d0d0d; color:#aaa; border-color:var(--panel-border);}
.btn-share-profile {display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:20px; border:1px solid rgba(255,255,255,1); background:rgba(255,255,255,0.35); color:#fff; font-size:0.85rem; font-weight:600; font-family:inherit; cursor:pointer; width:100%; margin-bottom:8px; transition:opacity 0.15s; flex-shrink:0;}
.btn-share-profile:hover {opacity:0.75;}
.btn-share-profile svg {opacity:0.85; stroke:#fff;}
/* ── QR Modal ─────────────────────────────────── */
.qr-modal-overlay {position:fixed;inset:0;z-index:200000;background:rgba(0,0,0,0.85);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:16px;}
.qr-modal-overlay.open {display:flex;}
.qr-modal {background:#0d0d0d;border:1px solid #191919;border-radius:30px;padding:28px;width:100%;max-width:440px;animation:modalPop 0.25s cubic-bezier(0.34,1.56,0.64,1) both;}
.qr-modal-hdr {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;}
.qr-modal-title {font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:4px;}
.qr-modal-sub {font-size:0.8rem;color:#555;}
.qr-display-wrap {display:flex;justify-content:center;align-items:center;background:#141414;border:1px solid #191919;border-radius:20px;padding:24px;margin-bottom:20px;}
.qr-color-section {display:flex;flex-direction:column;gap:14px;margin-bottom:20px;}
.qr-color-section .input-group {margin-bottom:0;}
.qr-download-row {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.qr-dl-btn {padding:13px;border-radius:14px;border:1px solid #252525;background:#141414;color:#fff;font-size:0.88rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background 0.15s;}
.qr-dl-btn:hover {background:#1a1a1a;}

/* ── Share Modal ──────────────────────────────── */
.share-modal-overlay {position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,0.85);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:16px;}
.share-modal-overlay.open {display:flex;}
.share-modal {background:#0d0d0d;border:1px solid #191919;border-radius:30px;padding:28px;width:100%;max-width:460px;animation:modalPop 0.25s cubic-bezier(0.34,1.56,0.64,1) both;}
.share-modal-header {display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:16px;}
.share-modal-title {font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:4px;}
.share-modal-sub {font-size:0.8rem;color:#555;line-height:1.4;}
.share-modal-close {width:28px;height:28px;border-radius:7px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:0.15s;}
.share-modal-close:hover {background:rgba(255,255,255,0.08);}
.share-modal-actions {display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.share-modal-btn {display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid #1f1f1f;background:#141414;color:#fff;font-size:0.88rem;font-weight:600;font-family:inherit;cursor:pointer;text-align:left;transition:background 0.15s;width:100%;}
.share-modal-btn:hover {background:#1c1c1c;}
.share-qr-wrap {display:none;align-items:center;justify-content:center;padding:4px 0 8px;}
.share-qr-wrap.visible {display:flex;}
.share-qr-wrap img {border-radius:12px;width:150px;height:150px;}
.share-modal-url-label {font-size:0.8rem;font-weight:600;color:#fff;margin-bottom:10px;}
.share-modal-url-row {position:relative;display:flex;align-items:center;}
.share-modal-url-row svg {position:absolute;left:14px;pointer-events:none;z-index:1;}
.share-modal-url-row input {width:100%;background:#141414;border:1px solid #191919;border-radius:20px;padding:11px 44px;outline:none;color:#888;font-size:0.82rem;font-family:inherit;text-align:center;-webkit-appearance:none;appearance:none;}
.share-copy-btn {position:absolute;right:10px;width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:#555;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.15s;}
.share-copy-btn:hover {color:#fff;}
.btn-icon-square {width:48px; height:48px; border-radius:12px; border:1px solid var(--panel-border); background:#0d0d0d; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.18s; flex-shrink:0;}
.btn-icon-square img {width:20px; height:20px; object-fit:contain; filter:brightness(0) invert(0.54);}
.btn-icon-square.green {border-color:rgba(70,200,100,0.4); background:rgba(70,200,100,0.12);}
.btn-icon-square.green img {filter:brightness(0) saturate(100%) invert(70%) sepia(60%) saturate(400%) hue-rotate(80deg);}
.btn-icon-square.green:hover {background:rgba(70,200,100,0.2); border-color:rgba(70,200,100,0.4);}
.btn-icon-square.green:hover img {filter:brightness(0) saturate(100%) invert(70%) sepia(60%) saturate(400%) hue-rotate(80deg);}
.btn-icon-square.red {border-color:rgba(192,64,64,0.4); background:rgba(192,64,64,0.12);}
.btn-icon-square.red img {filter:brightness(0) saturate(100%) invert(45%) sepia(80%) saturate(500%) hue-rotate(310deg);}
.btn-icon-square.red:hover {background:rgba(192,64,64,0.2); border-color:rgba(192,64,64,0.4);}
.btn-icon-square.red:hover img {filter:brightness(0) saturate(100%) invert(45%) sepia(80%) saturate(500%) hue-rotate(310deg);}
.main {margin-left:260px; padding:10px; min-height:100vh; flex:1; min-width:0;}
.content-wrap {background:#0d0d0d; border:1px solid #191919; border-radius:24px; padding:28px; min-height:calc(100vh - 20px); width:100%; box-sizing:border-box;}
.mobile-topbar {display:none; position:fixed; top:12px; left:14px; right:14px; height:52px; background:#0d0d0d; border:1px solid #191919; border-radius:28px; z-index:500; align-items:center; justify-content:space-between; padding:0 18px; box-shadow:0 4px 24px rgba(0,0,0,0.4);}
.mobile-topbar-brand {display:flex; align-items:center; gap:10px;}
.mobile-topbar-logo {width:26px; height:26px; object-fit:contain;}
.mobile-topbar-title {font-size:1rem; font-weight:600; color:#fff; letter-spacing:0.3px;}
.mobile-topbar-title .dot {color:var(--pink);}
.hamburger {display:none; flex-direction:column; gap:5px; cursor:pointer; border:none; background:transparent; border-radius:10px; padding:6px; align-items:center; justify-content:center;}
.ham-line {display:block; width:22px; height:2px; background:#aaa; border-radius:2px; transition:transform 0.28s cubic-bezier(0.34,1.2,0.64,1), opacity 0.2s ease; transform-origin:center;}
.hamburger.open .ham-top {transform:translateY(7px) rotate(45deg); background:var(--pink);}
.hamburger.open .ham-mid {opacity:0; transform:scaleX(0);}
.hamburger.open .ham-bot {transform:translateY(-7px) rotate(-45deg); background:var(--pink);}
.sidebar-overlay {display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:998; backdrop-filter:blur(2px);}
.sidebar-overlay.open {display:block;}
.haunt-wrap {}
.haunt-body {padding:0;}
.sec-hdr {display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; margin-top:0;}
.sec-title {font-size:1.75rem; font-weight:500; color:#fff; line-height:1;}
.sec-sub {font-size:0.82rem; color:#444; margin-top:5px; line-height:1.4; font-weight:400;}
.pill {padding:7px 16px; background:#0d0d0d; border:1px solid #191919; border-radius:99px; font-size:0.8rem; color:#888; font-weight:500;}
.inner-card {background: #0d0d0d !important; border: 1px solid var(--panel-border); border-radius: 28px; padding: 34px 24px;}
.form-grid {display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.input-group {display:flex; flex-direction:column; gap:0;}
label {font-size:0.95rem; color:#fff; font-weight:500; margin-bottom:4px; display:flex; align-items:center; gap:6px; text-transform:none !important; letter-spacing:0.5px ;}
input[type=text], input[type=password], textarea, select {background:#0c0c0c; border:1px solid #181818; border-radius:18px; padding:11px 14px; color:#fff; font-size:0.9rem; outline:none; transition:border-color 0.2s; width:100%; font-family:inherit;}
input[type=text]:focus, textarea:focus, select:focus {border-color:rgba(255,255,255,0.1);}
select option {background:#0a0a0a;}
textarea {resize:vertical; min-height:90px;}
.color-field {display:flex; align-items:stretch; gap:10px;}
.color-swatch-wrap {position:relative; width:40px; height:40px; flex-shrink:0; border-radius:12px; overflow:hidden; border:2px solid rgba(255,255,255,0.2); cursor:pointer; transition:border-color 0.2s;}
.color-swatch-wrap input[type=color] {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:200%; height:200%; border:none; padding:0; cursor:pointer; opacity:1;}
.color-hex-input {flex:1; background:#0c0c0c; border:1px solid #181818; border-radius:20px; padding:0 14px; height:40px; color:#fff; font-size:0.9rem; outline:none; width:100%; font-family:inherit; transition:border-color 0.2s; box-sizing:border-box;}
.color-hex-input:focus {border-color:rgba(255,255,255,0.1);}
.toggle-row {display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:30px; border:1px solid #181818; background:#0c0c0c; cursor:pointer; transition:0.2s; font-size:0.88rem; color:#555; font-weight:500;}
.toggle-row:hover {background:rgba(255,255,255,0.04);}
.toggle-row.active {border-color:var(--pink-border); background:var(--pink-bg); color:var(--pink);}
.toggle-dot {width:20px; height:20px; border-radius:50%; border:2px solid #333; transition:0.2s; flex-shrink:0;}
.toggle-row.active .toggle-dot {background:var(--pink); border-color:var(--pink);}
.grad-toggle-btn {width:100%; height:44px; border-radius:14px; border:2px solid; font-size:0.85rem; font-weight:500; cursor:pointer; font-family:inherit; transition:0.2s;}
.grad-toggle-btn.off {background:rgba(255,60,60,0.08); border-color:rgba(255,60,60,0.25); color:#ff6060;}
.grad-toggle-btn.on {background:rgba(70,200,100,0.08); border-color:rgba(70,200,100,0.25); color:#6bffaa;}
.sl-hdr {display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.sl-title {font-size:0.95rem; font-weight:600; color:#fff; text-transform:none !important; letter-spacing:0.5px;}
.sl-reset {width:36px; height:36px; border-radius:6px; border:none !important; background:transparent !important; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:0.15s;}
.sl-reset:hover {background:rgba(255,255,255,0.07) !important;}
.slider-base {width:100%; padding:0 14px; display:flex; flex-direction:column; justify-content:center; position:relative;}
.slider-track {position:relative; height:8px; background:#141414; border:1px solid #202020; border-radius:8px; cursor:pointer;}
.slider-filler {position:absolute; left:0; top:0; height:100%; background:var(--slider-blue); border-radius:9999px; pointer-events:none;}
.slider-thumb {position:absolute; top:50%; transform:translate(-50%,-50%); width:20px; height:20px; background:#0d0d0d; border:2px solid var(--slider-blue); border-radius:9999px; box-shadow:0 0 10px rgba(0,0,0,0.4); cursor:grab; transition:box-shadow 0.15s; z-index:2;}
.slider-thumb:active {cursor:grabbing; box-shadow:0 0 0 4px rgba(74,120,196,0.2);}
.sl-tooltip {position:absolute; background:#0d0d0d; border:1px solid #191919; border-radius:8px; padding:4px 10px; font-size:0.75rem; font-weight:500; color:#fff; pointer-events:none; opacity:0; transition:opacity 0.15s; white-space:nowrap; z-index:99; transform:translateX(-50%); top:-36px;}
.slider {-webkit-appearance:none; width:100%; height:12px; border-radius:8px; background:var(--dark-bg); border:1px solid var(--dark-border); outline:none; padding:0; cursor:pointer;}
.slider::-webkit-slider-thumb {-webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--dark-light-bg); border:2px solid var(--slider-blue); cursor:pointer; box-shadow:0 0 10px rgba(0,0,0,0.4);}
.btn-primary {display:inline-flex; align-items:center; gap:8px; padding:0 20px; height:40px; border-radius:14px; border:2px solid var(--pink-border); background:var(--pink-bg); color:var(--pink); font-weight:500; font-size:0.85rem; cursor:pointer; font-family:inherit; transition:0.2s; white-space:nowrap;}
.btn-primary:hover {background:var(--pink-hover);}
.btn-pink {display:inline-flex; align-items:center; gap:8px; padding:0 20px; height:40px; border-radius:14px; border:2px solid var(--pink-border); background:var(--pink-bg); color:var(--pink); font-weight:500; font-size:0.85rem; cursor:pointer; font-family:inherit; transition:0.2s; white-space:nowrap;}
.btn-pink:hover {background:var(--pink-hover);}
@keyframes btnPress {0%{transform:scale(1)} 40%{transform:scale(0.93) translateY(3px)} 100%{transform:scale(1) translateY(0)}}
.btn-press {animation:btnPress 0.22s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes modalPop {from{opacity:0;transform:scale(0.88);} to{opacity:1;transform:scale(1);}}
@keyframes modalPopOut {from{opacity:1;transform:scale(1);} to{opacity:0;transform:scale(0.88);}}
@keyframes overlayFadeIn {from{opacity:0;} to{opacity:1;}}
@keyframes overlayFadeOut {from{opacity:1;} to{opacity:0;}}
.modal-closing {animation:modalPopOut 0.2s cubic-bezier(0.34,1.56,0.64,1) forwards !important;}
.overlay-closing {animation:overlayFadeOut 0.2s ease forwards !important;}
@keyframes saveBarIn {from {opacity:0; transform:translateX(-50%) translateY(20px) scale(0.93);}
to   {opacity:1; transform:translateX(-50%) translateY(0) scale(1);}}
.save-bar {display:none; position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:8888; background:#0d0d0d; border:1px solid #191919; border-radius:99px; padding:10px 12px 10px 24px; align-items:center; gap:16px; box-shadow:0 8px 40px rgba(0,0,0,0.6); width:520px; max-width:90vw;}
.save-bar.visible {display:flex; animation:saveBarIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;}
.save-bar span {font-size:0.9rem; font-weight:500; color:#fff; flex:1; white-space:nowrap;}
.reset-btn {background:transparent; border:none; color:rgba(255,255,255,0.55); cursor:pointer; font-size:0.88rem; font-weight:500; font-family:inherit; padding:6px 14px; border-radius:99px; transition:0.15s; white-space:nowrap; flex-shrink:0;}
.reset-btn:hover {color:#fff; background:rgba(255,255,255,0.06);}
.save-btn {background:var(--pink-bg) !important; border:2px solid var(--pink-border) !important; color:var(--pink) !important; cursor:pointer; font-size:0.88rem; font-weight:500; font-family:inherit; padding:0 24px; height:40px; border-radius:30px !important; transition:0.2s; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center;}
.save-btn:hover {background:var(--pink-hover) !important;}
@keyframes toastIn {from{opacity:0;transform:translateY(-10px) scale(0.95);} to{opacity:1;transform:translateY(0) scale(1);}}
.toast {position:fixed; top:24px; right:24px; background:#0d0d0d; border:1px solid rgba(70,200,100,0.3); border-radius:30px; padding:10px 20px; font-size:0.88rem; font-weight:500; color:#6bffaa; opacity:0; pointer-events:none; transition:opacity 0.25s; z-index:99999; white-space:nowrap;}
.toast.show {opacity:1; animation:toastIn 0.25s cubic-bezier(0.34,1.56,0.64,1) both;}
.toast.error {border-color:rgba(255,60,60,0.35); color:#ff7070; background:#0d0d0d;}
.del-overlay {position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; justify-content:center; align-items:center; z-index:10001; backdrop-filter:blur(4px);}
.del-overlay.open {display:flex;}
.del-modal {background:#0d0d0d; border:1px solid #191919; border-radius:30px; padding:24px; width:100%; max-width:420px; position:relative; animation:modalPop 0.25s cubic-bezier(0.34,1.56,0.64,1) both;}
.del-close {position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:7px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:0.15s;}
.del-close:hover {background:rgba(255,255,255,0.08);}
.del-hdr {display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.del-icon-wrap {width:48px; height:48px; border-radius:12px; background:rgba(180,40,40,0.25); border:1px solid rgba(180,40,40,0.4); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.del-title {font-size:1rem; font-weight:500; color:#fff; margin-bottom:4px;}
.del-sub {font-size:0.75rem; color:#666;}
.del-body {font-size:0.9rem; color:#aaa; margin-bottom:28px;}
.del-footer {display:flex; justify-content:flex-end; align-items:center; gap:14px;}
.del-cancel {background:transparent; border:none; color:rgba(255,255,255,0.4); cursor:pointer; font-size:0.88rem; font-weight:500; font-family:inherit; padding:8px 14px; border-radius:8px; transition:0.15s;}
.del-cancel:hover {color:#fff; background:rgba(255,255,255,0.05);}
.del-confirm {display:inline-flex; align-items:center; gap:8px; padding:9px 22px; border-radius:99px; border:1px solid rgba(200,60,60,0.45); background:rgba(200,60,60,0.18); color:#ff7070; font-size:0.88rem; font-weight:500; cursor:pointer; font-family:inherit; transition:0.2s;}
.del-confirm:hover {background:rgba(200,60,60,0.28);}
.modal-overlay {position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; justify-content:center; align-items:center; z-index:9999; backdrop-filter:blur(4px);}
.modal-overlay.open {display:flex;}
.topbar {display:flex; align-items:center; gap:8px; margin-bottom:28px; font-size:0.85rem;}
.topbar-link {color:var(--pink); font-weight:500; text-shadow:0 0 8px rgba(210,210,210,0.5); text-decoration:none;}
.topbar-sep {color:#2a2a2a;}
.topbar-current {color:#555;}
.page-wrapper {background:#0e0e0e; border:1px solid #1a1a1a; border-radius:34px; padding:36px;}
.page-header {margin-bottom:28px;}
.page-title {font-size:2rem; font-weight:500; margin-bottom:4px; color:var(--pink); letter-spacing:0.5px; text-shadow:0 0 8px rgba(210,210,210,0.2);}
.page-sub {color:#181818; font-size:0.85rem;}
.section {margin-bottom:28px;}
.section-title {display:flex; align-items:center; gap:12px; font-size:1.25rem; font-weight:500; color:var(--pink); margin-bottom:16px; letter-spacing:0.5px; text-shadow:0 0 6px rgba(210,210,210,0.15);}
.section-title img {width:48px; height:48px; object-fit:contain; filter:var(--icon-blue) drop-shadow(0 0 6px rgba(210,210,210,0.25));}
.btn-view {display:inline-flex; align-items:center; padding:0 20px; height:40px; border-radius:99px; border:2px solid var(--pink-border); background:var(--pink-bg); color:var(--pink); cursor:pointer; font-size:0.85rem; font-weight:500; transition:0.2s; text-decoration:none; white-space:nowrap; flex-shrink:0;}
.btn-view:hover {background:var(--pink-hover);}

/* ── Press-down animation ────────────────────────────────────────────────── */
.btn-primary, .btn-pink, .btn-view, .btn-sidebar,
.globe-close { width:28px;height:28px;border-radius:7px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.15s;flex-shrink:0; }
.globe-close:hover { background:rgba(255,255,255,0.08); }

.account-btn, .account-btn-full, .manage-btn, .save-btn,
.ov-modal-btn, .verified-modal-btn, .badge-action-btn,
.del-confirm, .grad-toggle-btn, .bug-btn-pink, .bug-btn-cancel,
.btn-cancel, .modal-confirm-btn, .social-add-btn, .type-btn,
.border-style-btn { transition: transform 0.1s ease; }

.btn-primary:active, .btn-pink:active, .btn-view:active, .btn-sidebar:active,
.account-btn:active, .account-btn-full:active, .manage-btn:active, .save-btn:active,
.ov-modal-btn:active, .verified-modal-btn:active, .badge-action-btn:active,
.del-confirm:active, .grad-toggle-btn:active, .bug-btn-pink:active, .bug-btn-cancel:active,
.btn-cancel:active, .modal-confirm-btn:active, .social-add-btn:active, .type-btn:active,
.border-style-btn:active { transform: translateY(3px); }

@media(max-width:768px){
.mobile-topbar {display:flex;}
.hamburger {display:flex;}
.sidebar {transform:translateX(-100%); background:#080808; border:1px solid #191919; border-radius:0 24px 24px 0; box-shadow:4px 0 32px rgba(0,0,0,0.6);}
.sidebar.open {transform:translateX(0);}
.sidebar-overlay.open {display:block;}
html, body {overflow-x:hidden !important; max-width:100% !important;}
.main {margin-left:0 !important; padding:76px 14px 24px 14px !important; width:100% !important; max-width:100vw !important; box-sizing:border-box !important;}
.form-grid {grid-template-columns:1fr !important;}
.page-wrapper {padding:18px !important;}
.inner-card {padding:20px 16px !important; min-width:0 !important; box-sizing:border-box !important; width:100% !important; max-width:100% !important;}
.haunt-wrap, .haunt-body {min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; overflow-x:hidden !important; width:100% !important;}
.media-grid {grid-template-columns:1fr !important; width:100% !important; min-width:0 !important;}
.media-card, .upload-box {min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; overflow-x:hidden !important; width:100% !important;}}