:root {
    --bg: #05020a;
    --bg2: #10071d;
    --card: rgba(255,255,255,.075);
    --card2: rgba(255,255,255,.12);
    --text: #fff7ff;
    --muted: #d8c7ef;
    --purple: #a855f7;
    --purple2: #6d28d9;
    --pink: #ec4899;
    --red: #ef233c;
    --line: rgba(216,180,254,.22);
    --line-hot: rgba(248,113,113,.28);
    --shadow: 0 24px 90px rgba(0,0,0,.48);
    --radius: 28px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, Poppins, Arial, sans-serif;
    color: var(--text);
    min-height: 100vh;
    background:
        linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.74)),
        url('../imgs/background.jpeg'),
        radial-gradient(circle at 16% 0, rgba(168,85,247,.38), transparent 34%),
        radial-gradient(circle at 80% 10%, rgba(93,22,139,.28), transparent 32%),
        linear-gradient(180deg, var(--bg), #11071d 55%, #05020a);
    background-size: cover, cover, auto, auto, auto;
    background-attachment: fixed;
}
a { color: inherit; }
button, input, textarea, select { font-family: inherit; }
button:disabled { opacity: .55; cursor: not-allowed; }
.bg-photo-wash { position: fixed; inset: 0; pointer-events:none; z-index: -3; background: radial-gradient(circle at 50% 10%, rgba(88,28,135,.22), transparent 34%); }
.purple-orb { position: fixed; border-radius: 999px; filter: blur(54px); opacity: .28; pointer-events:none; z-index:-2; }
.orb-one { width: 300px; height: 300px; background: #a855f7; top: 90px; left: -80px; }
.orb-two { width: 360px; height: 360px; background: #6d28d9; right: -120px; top: 420px; }
.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px clamp(16px,4vw,54px); background: rgba(6,2,12,.82); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); box-shadow: 0 10px 40px rgba(0,0,0,.26); }
.brand-link { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-weight:900; letter-spacing:.02em; }
.brand-link img { width:42px; height:42px; object-fit:contain; }
.site-nav { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.site-nav a, .nav-cta, .nav-link-button { color:var(--muted); text-decoration:none; font-weight:800; font-size:14px; padding:10px 12px; border-radius:999px; transition:.25s; border:1px solid transparent; background:transparent; cursor:pointer; }
.site-nav a:hover, .nav-link-button:hover { background:rgba(168,85,247,.16); color:#fff; transform:translateY(-1px); }
.nav-cta { background:linear-gradient(135deg,var(--purple2),var(--purple)); color:#fff; box-shadow: 0 10px 28px rgba(168,85,247,.22); }
.nav-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nav-actions form { margin:0; }
.page-shell { width:min(1180px,calc(100% - 32px)); margin:0 auto; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:#e9d5ff; text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:900; }
.hero-section { display:grid; grid-template-columns:1.08fr .92fr; gap:38px; align-items:center; padding:76px 0 42px; }
.hero-copy h1, .page-hero h1, .lesson-hero h1 { font-size:clamp(46px,7vw,92px); line-height:.9; margin:16px 0; background:linear-gradient(135deg,#fff,#f5d0fe,#c084fc,#7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.06em; }
.hero-copy p, .page-hero p, .section-heading p, .lesson-hero p, .auth-copy p { color:var(--muted); font-size:18px; line-height:1.8; max-width:760px; }
.hero-card, .glass-panel, .quote-card, .timeline-card, .song-card, .member-tile, .gallery-card, .vote-card, .auth-card, .lesson-card, .asset-card, .quiz-card, .leader-row, .bt21-card, .stats-grid > div { border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055)); box-shadow:0 18px 60px rgba(0,0,0,.30); backdrop-filter:blur(16px); }
.hero-card { position:relative; border-radius:36px; padding:14px; box-shadow:var(--shadow); transform:rotate(1deg); }
.hero-card img { width:100%; height:520px; object-fit:cover; border-radius:26px; display:block; }
.legacy-image-card { background: linear-gradient(135deg, rgba(168,85,247,.18), rgba(0,0,0,.25)); }
.floating-badge { position:absolute; left:28px; bottom:28px; background:rgba(7,3,15,.80); border:1px solid var(--line); padding:12px 16px; border-radius:999px; font-weight:900; backdrop-filter:blur(12px); }
.hero-actions, .social-row, .tag-row, .filter-pills { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 18px; border-radius:999px; text-decoration:none; font-weight:900; border:1px solid var(--line); color:#fff; cursor:pointer; }
.btn.primary { background:linear-gradient(135deg,var(--purple2),var(--purple)); border-color:transparent; }
.btn.ghost { background:rgba(255,255,255,.08); }
.btn:hover { transform: translateY(-1px); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0 70px; }
.stats-grid > div { border-radius:24px; padding:22px; }
.stats-grid b { display:block; font-size:38px; }
.stats-grid span { color:var(--muted); font-weight:800; }
.section-block { padding:50px 0; }
.section-heading { margin-bottom:24px; }
.section-heading h2, .split-showcase h2, .glass-panel h2 { font-size:clamp(30px,4vw,54px); line-height:1; margin:10px 0; letter-spacing:-.04em; }
.member-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.member-tile { position:relative; overflow:hidden; min-height:320px; border-radius:var(--radius); padding:16px; text-decoration:none; color:#fff; }
.member-tile:before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.90)), radial-gradient(circle at top,var(--accent),transparent 45%); opacity:.82; }
.member-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; transition:.35s; filter:saturate(1.05) contrast(1.05); }
.member-tile:hover img { transform:scale(1.06); }
.member-tile div { position:absolute; left:18px; right:18px; bottom:18px; }
.member-tile span, .song-card span, .gallery-card span, .timeline-body span, .quote-card span, .lesson-card span, .asset-card span, .timeline-content span, .bt21-body span { color:#e9d5ff; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.member-tile h3, .song-card h3, .gallery-card h3, .lesson-card h3 { font-size:28px; margin:6px 0; }
.member-tile p, .song-card p, .gallery-card p, .lesson-card p, .asset-card p, .glass-panel p { color:var(--muted); line-height:1.65; }
.split-showcase { display:grid; grid-template-columns:.92fr 1.08fr; gap:24px; align-items:start; }
.quest-cards, .timeline-mini { display:grid; gap:12px; }
.quest-cards article, .timeline-mini article { border-left:3px solid var(--purple); background:rgba(255,255,255,.075); border-radius:18px; padding:18px; }
.quest-cards span { font-weight:900; color:#c084fc; }
.timeline-mini h3, .quest-cards h3 { margin:6px 0 0; }
.song-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.song-grid.compact { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.song-card { display:block; color:#fff; text-decoration:none; border-radius:var(--radius); overflow:hidden; }
.song-card img { width:100%; height:230px; object-fit:cover; display:block; }
.song-card div { padding:18px; }
.quote-strip, .quote-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.quote-strip blockquote, .quote-card { margin:0; border-radius:var(--radius); padding:24px; }
.quote-strip blockquote { background:linear-gradient(135deg,rgba(168,85,247,.25),rgba(255,255,255,.05)); border:1px solid var(--line); }
blockquote p, .quote-card p { font-size:20px; line-height:1.55; margin:0 0 12px; }
.quote-card h3, cite { color:#fff; font-style:normal; }
.site-footer { margin-top:80px; padding:60px clamp(18px,4vw,54px) 28px; border-top:1px solid var(--line); background:rgba(7,3,15,.78); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:28px; max-width:1180px; margin:auto; }
.footer-logo { width: 200px; height:auto; }
.site-footer p, .site-footer a { color:var(--muted); line-height:1.7; }
.site-footer a { display:block; text-decoration:none; margin:8px 0; }
.site-footer a:hover { color:#fff; }
.footer-bottom { max-width:1180px; margin:35px auto 0; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:#aa99c2; }
.page-hero.small { padding:70px 0 28px; }
.page-hero.small h1 { font-size:clamp(42px,6vw,72px); }
.member-hero { display:grid; grid-template-columns:.78fr 1.22fr; gap:30px; align-items:center; padding:64px 0; }
.member-portrait { border-radius:38px; padding:14px; background:radial-gradient(circle at top,var(--accent),rgba(255,255,255,.08)); border:1px solid var(--line); box-shadow:var(--shadow); }
.member-portrait img { width:100%; height:560px; object-fit:cover; border-radius:28px; display:block; }
.member-profile-copy h1 { font-size:clamp(56px,9vw,112px); line-height:.86; margin:14px 0; letter-spacing:-.07em; }
.member-profile-copy h2 { font-size:26px; color:#e9d5ff; }
.member-profile-copy small { color:var(--muted); font-size:18px; }
.lead { font-size:22px!important; color:#fff!important; }
.tag-row span, .filter-pills span, .move-row span { padding:9px 12px; border-radius:999px; background:rgba(168,85,247,.16); border:1px solid var(--line); font-weight:800; color:#fff; }
.profile-layout, .vote-layout { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.glass-panel { border-radius:var(--radius); padding:24px; }
.fact-list { display:grid; gap:12px; margin:0; }
.fact-list div, .vote-stat, .activity-list div { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
dt { color:var(--muted); font-weight:800; } dd { margin:0; font-weight:900; }
.pretty-list { padding-left:20px; color:var(--muted); line-height:1.8; }
.masonry-gallery { columns:3 250px; column-gap:18px; margin-top: 22px; }
.gallery-card { break-inside:avoid; border-radius:var(--radius); overflow:hidden; margin:0 0 18px; }
.gallery-card img { width:100%; display:block; }
.gallery-card div { padding:16px; }
.vote-card label, .auth-card label, .profile-form label { display:grid; gap:8px; font-weight:900; color:#e9d5ff; margin-bottom:14px; }
input, textarea, select { width:100%; border:1px solid var(--line); border-radius:16px; padding:13px 14px; background:rgba(9,3,19,.88); color:#fff; outline:none; }
textarea { min-height: 110px; resize: vertical; }
.check-row { display:flex!important; align-items:center; gap:8px; }
.check-row input { width:auto; }
.public-alert { padding:14px 18px; border-radius:18px; margin:16px 0; font-weight:900; }
.public-alert.success { background:rgba(34,197,94,.18); border:1px solid rgba(34,197,94,.35); }
.public-alert.error { background:rgba(239,68,68,.18); border:1px solid rgba(239,68,68,.35); }

/* Old achievements hero restored */
.hero-banner { position:relative; width:calc(100vw - 32px); left:50%; transform:translateX(-50%); height:800px; overflow:hidden; border-radius:0 0 42px 42px; margin-bottom: 0; }
.hero-banner img { width:100%; height:100%; object-fit:cover; opacity:.45; -webkit-mask-image:radial-gradient(ellipse, black 60%, transparent 85%); mask-image:radial-gradient(ellipse, black 60%, transparent 85%); }
.hero-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; background:rgba(0,0,0,.44); padding:58px 86px; border-radius:18px; border:1px solid rgba(216,180,254,.24); backdrop-filter:blur(10px); box-shadow:0 20px 70px rgba(0,0,0,.42); }
.hero-text h1 { font-size:clamp(36px,5vw,64px); color:#fff; margin:12px 0; letter-spacing:-.04em; }
.hero-text p { color:#e9d5ff; line-height:1.7; }
.timeline-container { max-width:1100px; margin:-100px auto 50px auto; padding:20px; position:relative; }
.timeline-item { display:flex; align-items:flex-start; gap:20px; margin-bottom:70px; }
.timeline-item.left { flex-direction:row; }
.timeline-item.right { flex-direction:row-reverse; }
.timeline-date { font-size:22px; font-weight:900; color:#fff; min-width:110px; padding-top:20px; text-shadow:0 2px 10px #000; }
.timeline-content { flex:1; background:#141018; border:1px solid rgba(216,180,254,.20); border-radius:18px; padding:22px; transition:transform .3s, box-shadow .3s; box-shadow:0 15px 50px rgba(0,0,0,.28); }
.timeline-content:hover { transform:translateY(-5px); box-shadow:0 22px 70px rgba(0,0,0,.48); }
.timeline-content h2 { color:#b983ff; margin:8px 0 10px; font-size:32px; }
.timeline-content p, .timeline-content li { line-height:1.7; color:#dfd2f2; }
.legacy-timeline-images { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.legacy-timeline-images img { width:min(220px,45%); height:150px; object-fit:cover; border-radius:14px; border:1px solid rgba(216,180,254,.20); }

/* BT21 anatomy */
.bt21-hero h1 { background:linear-gradient(135deg,#fff,#fde68a,#f0abfc,#93c5fd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bt21-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.bt21-card { position:relative; overflow:hidden; border-radius:34px; padding:22px; background: radial-gradient(circle at 20% 0, color-mix(in srgb, var(--accent), transparent 55%), transparent 42%), rgba(255,255,255,.08); }
.bt21-card:before { content:""; position:absolute; inset:-80px; background:conic-gradient(from 180deg, transparent, color-mix(in srgb, var(--accent), transparent 30%), transparent 38%); opacity:.22; animation: spinny 10s linear infinite; }
.bt21-orbit { position:relative; z-index:1; height:190px; display:grid; place-items:center; }
.bt21-orbit:after { content:""; position:absolute; width:170px; height:170px; border:2px dashed color-mix(in srgb, var(--accent), white 20%); border-radius:999px; animation: spinny 14s linear infinite reverse; opacity:.7; }
.bt21-orbit img { width:120px; height:120px; object-fit:contain; filter:drop-shadow(0 18px 18px rgba(0,0,0,.35)); animation: floaty 3s ease-in-out infinite; }
.bt21-body { position:relative; z-index:1; }
.bt21-body h2 { font-size:42px; margin:8px 0; }
.bt21-body strong { display:block; margin:12px 0; color:#fff; }
.anatomy-list { background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:16px; margin:16px 0; }
.move-row { display:flex; gap:8px; flex-wrap:wrap; }
@keyframes spinny { to { transform:rotate(360deg); } }
@keyframes floaty { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-12px) rotate(3deg); } }

/* Auth, dashboard, learn, profile */
.auth-shell { display:grid; grid-template-columns:1fr 460px; gap:34px; align-items:center; min-height:calc(100vh - 180px); padding:70px 0; }
.auth-copy h1 { font-size:clamp(42px,6vw,74px); line-height:.94; letter-spacing:-.05em; margin:14px 0; }
.auth-card { border-radius:32px; padding:28px; }
.form-note { color:var(--muted); }
.dashboard-hero { margin-top:60px; border:1px solid var(--line); border-radius:38px; padding:32px; display:grid; grid-template-columns:1fr 260px; gap:20px; align-items:center; background:var(--profile-gradient); box-shadow:var(--shadow); }
.dashboard-hero h1 { font-size:clamp(40px,6vw,76px); line-height:.92; margin:12px 0; }
.dashboard-hero p { color:#eadcff; line-height:1.7; }
.dashboard-score-card { background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.16); border-radius:30px; padding:24px; text-align:center; }
.dashboard-score-card b { display:block; font-size:52px; }
.dashboard-score-card span, .dashboard-score-card small { display:block; color:#e9d5ff; font-weight:900; }
.lesson-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.lesson-grid.full { margin-bottom: 60px; }
.lesson-card { display:block; text-decoration:none; color:#fff; border-radius:var(--radius); padding:24px; transition:.25s; }
.lesson-card.large { min-height:260px; }
.lesson-card:hover { transform:translateY(-5px); border-color:rgba(192,132,252,.5); }
.lesson-card h2 { font-size:32px; margin:10px 0; }
.lesson-card small { color:#c4b5fd; font-weight:900; }
.lesson-hero { padding:70px 0 24px; }
.lesson-body { color:#e8d9fb; line-height:1.85; font-size:18px; white-space:normal; }
.quiz-form { display:grid; gap:18px; }
.quiz-card { border-radius:var(--radius); padding:22px; }
.quiz-card h3 { margin-top:0; }
.quiz-options { display:grid; gap:10px; }
.quiz-options label { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.18); cursor:pointer; }
.quiz-options input { width:auto; }
.activity-list div span { color:#eadcff; }
.activity-list div b { color:#fff; }
.profile-form { display:grid; gap:12px; }
.profile-preview-card { border-radius:28px; padding:24px; background:linear-gradient(135deg,#2e1065,#581c87,#111827); border:1px solid rgba(255,255,255,.16); min-height:280px; display:grid; align-content:center; text-align:center; }
.profile-preview-card.crimson-stage { background:linear-gradient(135deg,#111827,#7f1d1d,#581c87); }

.profile-preview-card.galaxy-stage { background: linear-gradient(135deg,#0f172a,#4c1d95,#7e22ce); }
.profile-preview-card.night-black { background: linear-gradient(135deg,#020617,#111827,#3b0764); }
.profile-preview-card.galaxy-purple { background: linear-gradient(135deg,#2e1065,#581c87,#111827); }

.avatar-bubble{
    width:120px;
    height:auto;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111827;
    margin:auto;
}

.profile-avatar-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.asset-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.asset-card { border-radius:var(--radius); padding:22px; background:var(--asset-gradient); }
.asset-swatch {
    width:74px;
    height:auto;
    border-radius:22px;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.18);
    font-size:32px;
    margin-bottom:14px;
}

.asset-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.leaderboard-panel { display:grid; gap:14px; margin-bottom:60px; }
.leader-row { border-radius:24px; padding:18px; display:grid; grid-template-columns:90px 1fr 150px; gap:18px; align-items:center; }
.leader-row > b { font-size:30px; color:#e9d5ff; }
.leader-row h3 { margin:0; }
.leader-row p { color:var(--muted); margin:4px 0 0; }
.leader-row > span { font-weight:900; text-align:right; }
.top-rank { background:linear-gradient(135deg,rgba(168,85,247,.24),rgba(255,255,255,.08)); }

@media(max-width:900px) {
    .hero-section, .member-hero, .split-showcase, .profile-layout, .vote-layout, .auth-shell, .dashboard-hero { grid-template-columns:1fr; }
    .site-header { position:relative; align-items:flex-start; flex-direction:column; }
    .site-nav { justify-content:flex-start; }
    .stats-grid, .footer-grid { grid-template-columns:1fr 1fr; }
    .hero-card img, .member-portrait img { height:420px; }
    .timeline-item, .timeline-item.right, .timeline-item.left { flex-direction:column !important; }
    .timeline-container { margin:-60px auto 40px auto; }
    .hero-banner { height:620px; }
    .hero-text { width:min(90%, 720px); padding:32px; }
    .leader-row { grid-template-columns:70px 1fr; }
    .leader-row > span { grid-column:2; text-align:left; }
}
@media(max-width:560px) {
    .stats-grid, .footer-grid { grid-template-columns:1fr; }
    .page-shell { width:min(100% - 22px,1180px); }
    .hero-copy h1, .page-hero h1, .lesson-hero h1 { font-size:42px; }
    .hero-banner { width:100vw; border-radius:0 0 26px 26px; }
    .legacy-timeline-images img { width:100%; }
}


/* Global search */
.nav-search {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: min(320px, 28vw);
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(12, 6, 24, 0.66);
    backdrop-filter: blur(16px);
}

.nav-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    padding: 8px 10px;
    font-size: 0.86rem;
}

.nav-search input::placeholder { color: rgba(255, 255, 255, 0.55); }

.nav-search button,
.big-search-card button {
    border: 0;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(139, 92, 246, 0.28);
}

.search-page { max-width: 1120px; }

.big-search-card {
    display: flex;
    gap: 10px;
    padding: 12px;
    margin: 0 auto 24px;
    max-width: 780px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 28px;
    background: rgba(20, 10, 38, 0.78);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.big-search-card input {
    flex: 1;
    border: 0;
    outline: 0;
    border-radius: 20px;
    padding: 16px 18px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.search-summary,
.empty-state-card {
    text-align: center;
    margin: 18px auto;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.78);
}

.empty-state-card,
.result-panel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    padding: 24px;
    background: rgba(16, 8, 30, 0.74);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.search-result-stack {
    display: grid;
    gap: 22px;
}

.result-panel h2 {
    margin: 0 0 16px;
    color: #f5d0fe;
}

.mini-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.mini-result-card {
    display: grid;
    gap: 6px;
    min-height: 108px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.mini-result-card:hover {
    transform: translateY(-4px);
    border-color: rgba(216, 180, 254, 0.55);
}

.mini-result-card span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.92rem;
}

@media (max-width: 980px) {
    .site-header { flex-wrap: wrap; }
    .nav-search { order: 3; width: 100%; min-width: 100%; }
}

@media (max-width: 640px) {
    .big-search-card { flex-direction: column; }
    .big-search-card button { width: 100%; }
}

/* Dynamic CMS footer */
.site-footer {
    position: relative;
    overflow: hidden;
    margin-top: 90px;
    padding: 70px 22px 26px;
    color: #f8f3ff;
    background:
        radial-gradient(circle at 15% 10%, rgba(168,85,247,.28), transparent 32%),
        radial-gradient(circle at 90% 20%, rgba(236,72,153,.18), transparent 30%),
        linear-gradient(135deg, rgba(8,5,18,.98), rgba(22,8,39,.98), rgba(5,4,14,.98));
    border-top: 1px solid rgba(216,180,254,.25);
}
.footer-shell { position: relative; z-index: 2; max-width: 1250px; margin: 0 auto; }
.footer-glow { position:absolute; width:260px; height:260px; border-radius:999px; filter:blur(45px); opacity:.5; pointer-events:none; }
.footer-glow-one { left:-80px; top:20px; background:rgba(147,51,234,.55); }
.footer-glow-two { right:-90px; bottom:20px; background:rgba(236,72,153,.35); }
.footer-brand-card { display:flex; flex-direction:column; gap:18px; padding:26px; margin-bottom:28px; border:1px solid rgba(216,180,254,.22); border-radius:28px; background:rgba(255,255,255,.055); box-shadow:0 24px 80px rgba(0,0,0,.35); backdrop-filter:blur(18px); }
.footer-brand-link { display:flex!important; align-items:center; gap:16px; text-decoration:none; color:#fff!important; margin:0!important; }
.footer-logo { width:64px; height:64px; object-fit:contain; border-radius:20px; padding:8px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); }
.footer-brand-link h2 { margin:0; font-size:clamp(1.45rem,3vw,2.15rem); letter-spacing:-.04em; }
.footer-brand-link span { display:block; margin-top:4px; color:#d8b4fe; font-size:.95rem; }
.footer-brand-card p { max-width:780px; margin:0; color:rgba(248,243,255,.78); line-height:1.75; }

/* =========================================
   FOOTER MINI BUTTONS - BTS GLOW STYLE
========================================= */

.footer-mini-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.footer-mini-badges span,
.footer-mini-badges a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 18px;

    border-radius: 999px;

    color: #ffffff !important;
    text-decoration: none;

    font-size: 0.84rem;
    font-weight: 900;
    letter-spacing: 0.01em;

    border: 1px solid rgba(255,255,255,0.16);

    background:
        linear-gradient(
            135deg,
            rgba(168,85,247,0.36),
            rgba(236,72,153,0.24)
        );

    box-shadow:
        0 10px 28px rgba(168,85,247,0.24),
        inset 0 1px 0 rgba(255,255,255,0.14);

    backdrop-filter: blur(12px);

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.footer-mini-badges span::before,
.footer-mini-badges a::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.16),
            transparent
        );

    transform: translateX(-120%);
    transition: transform .55s ease;
}

.footer-mini-badges span:hover,
.footer-mini-badges a:hover {
    transform: translateY(-4px) scale(1.05);

    background:
        linear-gradient(
            135deg,
            rgba(192,132,252,0.48),
            rgba(244,114,182,0.34)
        );

    box-shadow:
        0 18px 40px rgba(168,85,247,0.34),
        inset 0 1px 0 rgba(255,255,255,0.18);
}

.footer-mini-badges span:hover::before,
.footer-mini-badges a:hover::before {
    transform: translateX(120%);
}

.footer-grid { display:grid; grid-template-columns:1fr 1fr 1.25fr 1.1fr; gap:22px; max-width:none; margin:0; }
.footer-column { padding:22px; border-radius:24px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10); }
.footer-column h3 { margin:0 0 16px; font-size:1rem; color:#fff; letter-spacing:.02em; }
.footer-column a { display:flex; align-items:center; gap:9px; width:fit-content; margin:9px 0; color:rgba(248,243,255,.74); text-decoration:none; line-height:1.35; transition:transform .2s ease, color .2s ease, background .2s ease; }
.footer-column a:hover { color:#fff; transform:translateX(5px); }
.footer-link-emoji { width:24px; height:24px; display:inline-grid; place-items:center; border-radius:999px; background:rgba(168,85,247,.18); }
.footer-bt21-column { background:linear-gradient(135deg, rgba(255,255,255,.055), rgba(168,85,247,.08)), rgba(255,255,255,.04); }
.footer-bt21-link { padding:9px 10px; border-radius:16px; width:100%!important; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); }
.footer-bt21-link:hover { background:rgba(168,85,247,.18); transform:translateY(-2px)!important; }
.footer-bt21-icon { width:34px; height:34px; display:inline-grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.10); font-size:1.1rem; flex:0 0 auto; }
.footer-bt21-link strong { display:block; color:#fff; font-size:.9rem; }
.footer-bt21-link small { display:block; margin-top:2px; color:rgba(248,243,255,.62); font-size:.75rem; }
.footer-contact-line { margin:8px 0; color:rgba(248,243,255,.72); word-break:break-word; }
.social-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.social-row a, .footer-login-link { padding:9px 12px; border-radius:999px; background:rgba(168,85,247,.16); border:1px solid rgba(216,180,254,.18); color:#f7eaff!important; font-size:.82rem; font-weight:800; }
.footer-login-link { margin-top:18px!important; }
.footer-bottom { max-width:none; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); color:rgba(248,243,255,.66); font-size:.88rem; }
@media (max-width:980px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .site-footer{padding:54px 16px 22px;} .footer-grid{grid-template-columns:1fr;} .footer-brand-card,.footer-column{padding:19px;border-radius:22px;} .footer-bottom{flex-direction:column;align-items:flex-start;} }

.bt21-footer-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bt21-footer-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            rgba(168, 85, 247, 0.26),
            rgba(236, 72, 153, 0.22)
        );
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 8px 22px rgba(168, 85, 247, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.12);
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
}

.bt21-footer-buttons a:hover {
    transform: translateY(-3px) scale(1.04);
    background:
        linear-gradient(
            135deg,
            rgba(192, 132, 252, 0.38),
            rgba(244, 114, 182, 0.3)
        );
    box-shadow:
        0 14px 32px rgba(168, 85, 247, 0.28);
}

/* =========================================
   PROFILE STUDIO GLOW-UP
========================================= */
.profile-studio-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) 360px;
    gap: 26px;
    align-items: center;
    padding: 74px 0 34px;
}

.profile-studio-hero::before {
    content: "";
    position: absolute;
    inset: 34px -4vw auto auto;
    width: min(460px, 48vw);
    height: min(460px, 48vw);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(236,72,153,.18), transparent 62%);
    filter: blur(4px);
    pointer-events: none;
    z-index: -1;
}

.profile-hero-copy h1 {
    max-width: 860px;
    margin: 14px 0;
    font-size: clamp(44px, 7vw, 88px);
    line-height: .9;
    letter-spacing: -.07em;
    background: linear-gradient(135deg, #fff, #fde7ff, #c084fc, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.profile-hero-copy p {
    max-width: 760px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}

.profile-hero-pills,
.preview-stat-row,
.profile-tools-row,
.profile-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-hero-pills span,
.preview-stat-row b,
.asset-type-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    padding: 9px 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.profile-hero-card {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 26px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 38px;
    background: var(--profile-card-gradient, linear-gradient(135deg,#2e1065,#581c87,#111827));
    box-shadow: var(--shadow);
    isolation: isolate;
    animation: profileFloat 5s ease-in-out infinite;
}

.profile-hero-card::after,
.profile-studio-preview::after {
    content: "";
    position: absolute;
    inset: -55%;
    z-index: -1;
    background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.22), transparent 32%);
    opacity: .36;
    animation: profileSpin 14s linear infinite;
}

.profile-hero-glow {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    filter: blur(30px);
}

.profile-mini-avatar,
.profile-avatar-bubble {
    position: relative;
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    overflow: hidden;
    border-radius: 38px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(5, 2, 12, .48);
    box-shadow: 0 20px 50px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.14);
}

.profile-mini-avatar img,
.profile-avatar-bubble img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

.profile-mini-avatar span,
.profile-avatar-bubble span {
    font-size: 56px;
}

.profile-hero-card strong {
    position: relative;
    z-index: 1;
    font-size: 28px;
    letter-spacing: -.03em;
}

.profile-hero-card small {
    position: relative;
    z-index: 1;
    color: #f5d0fe;
    font-weight: 900;
}

.profile-studio-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
    gap: 22px;
    align-items: start;
}

.profile-editor-card,
.profile-preview-panel {
    border-radius: 36px;
    overflow: hidden;
}

.profile-card-heading h2 {
    margin: 8px 0 6px;
    font-size: clamp(28px, 4vw, 48px);
    line-height: .96;
    letter-spacing: -.045em;
}

.profile-card-heading p,
.profile-field small,
.profile-choice-card small,
.profile-tip-card p {
    margin: 0;
    color: rgba(245, 230, 255, .76);
    line-height: 1.6;
}

.mini-heading { margin-top: 14px; }

.profile-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.profile-field {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    color: #f5d0fe;
    font-weight: 900;
}

.profile-field input,
.profile-field textarea,
.profile-tools-row input,
.profile-tools-row select {
    border-radius: 20px;
    background: rgba(8, 3, 18, .72);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.profile-field input:focus,
.profile-field textarea:focus,
.profile-tools-row input:focus,
.profile-tools-row select:focus {
    border-color: rgba(244, 114, 182, .55);
    box-shadow: 0 0 0 4px rgba(168, 85, 247, .14);
    transform: translateY(-1px);
}

.profile-tools-row {
    margin: 14px 0 18px;
}

.profile-tools-row input { flex: 1 1 260px; }
.profile-tools-row select { flex: 0 1 180px; }

.profile-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.profile-choice-card {
    position: relative;
    min-height: 238px;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 16px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 28px;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}

.profile-choice-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.14), transparent);
    transform: translateX(-120%);
    transition: transform .55s ease;
}

.profile-choice-card:hover,
.profile-choice-card.is-selected {
    transform: translateY(-5px) scale(1.015);
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 26px 70px rgba(0,0,0,.40), 0 0 0 4px rgba(244, 114, 182, .10);
    filter: saturate(1.08);
}

.profile-choice-card:hover::before,
.profile-choice-card.is-selected::before {
    transform: translateX(120%);
}

.profile-choice-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.profile-choice-card.is-selected::after {
    content: "✓";
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg,#22c55e,#14b8a6);
    box-shadow: 0 12px 24px rgba(20,184,166,.25);
}

.profile-choice-media {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.18);
}

.profile-choice-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    filter: drop-shadow(0 14px 16px rgba(0,0,0,.25));
}

.profile-choice-media span { font-size: 34px; }
.profile-choice-card strong { font-size: 17px; line-height: 1.15; }
.profile-choice-card em { color: #fff; font-style: normal; font-weight: 900; }

.profile-form-actions {
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.profile-save-btn {
    min-width: 190px;
    box-shadow: 0 16px 38px rgba(168, 85, 247, .28);
}

.profile-preview-sticky {
    position: sticky;
    top: 98px;
    display: grid;
    gap: 16px;
}

.profile-studio-preview {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    align-content: center;
    gap: 12px;
    padding: 30px;
    background: var(--profile-card-gradient, linear-gradient(135deg,#2e1065,#581c87,#111827)) !important;
    isolation: isolate;
}

.preview-orbit {
    position: absolute;
    inset: auto;
    border-radius: 999px;
    border: 1px dashed rgba(255,255,255,.30);
    pointer-events: none;
}

.orbit-a {
    width: 240px;
    height: 240px;
    top: 34px;
    right: -70px;
    animation: profileSpin 18s linear infinite;
}

.orbit-b {
    width: 180px;
    height: 180px;
    left: -52px;
    bottom: 38px;
    animation: profileSpin 13s linear infinite reverse;
}

.profile-avatar-bubble {
    width: 142px;
    height: 142px;
    margin: 0 auto 4px;
    animation: profileFloat 4s ease-in-out infinite;
}

.preview-asset-label {
    justify-self: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.16);
    color: #f5d0fe;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.profile-studio-preview h3 {
    margin: 4px 0 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: .95;
    letter-spacing: -.05em;
}

.profile-studio-preview p {
    max-width: 420px;
    margin: 0 auto;
    color: rgba(255,255,255,.82);
}

.preview-stat-row {
    justify-content: center;
    margin-top: 8px;
}

.profile-tip-card {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    padding: 18px;
    background: rgba(255,255,255,.055);
}

.profile-tip-card strong { color: #f5d0fe; }

.profile-shop-section { padding-top: 54px; }
.profile-shop-grid { margin-top: 18px; }
.profile-shop-card { min-height: 280px; display: grid; align-content: start; gap: 8px; }
.profile-shop-card form { margin-top: 8px; }
.profile-empty-state { grid-column: 1 / -1; }

@keyframes profileSpin { to { transform: rotate(360deg); } }
@keyframes profileFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 980px) {
    .profile-studio-hero,
    .profile-studio-grid {
        grid-template-columns: 1fr;
    }

    .profile-preview-sticky { position: static; }
}

@media (max-width: 680px) {
    .profile-studio-hero { padding-top: 46px; }
    .profile-field-grid { grid-template-columns: 1fr; }
    .profile-form-actions { align-items: stretch; }
    .profile-form-actions .btn { width: 100%; }
    .profile-hero-card { min-height: 270px; }
    .profile-mini-avatar,
    .profile-avatar-bubble { width: 116px; height: 116px; }
}

/* Fixed creative navbar: visible links + More dropdown */
.site-header {
    display: grid !important;
    grid-template-columns: auto minmax(360px, 1fr) minmax(210px, 300px) auto;
    align-items: center;
    gap: 14px;
}

.brand-link {
    min-width: 0;
    max-width: 260px;
}

.brand-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav {
    min-width: 0;
    max-width: 100%;
    display: flex !important;
    justify-content: center;
    flex-wrap: nowrap !important;
    overflow: visible;
}

.site-nav > a {
    white-space: nowrap;
}

.nav-more {
    position: relative;
}

.nav-more summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-weight: 900;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid rgba(216,180,254,.16);
    background: rgba(255,255,255,.055);
}

.nav-more summary::-webkit-details-marker {
    display: none;
}

.nav-more[open] summary,
.nav-more summary:hover {
    color: #fff;
    background: rgba(168,85,247,.18);
}

.nav-more-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 260px;
    max-height: 420px;
    overflow-y: auto;
    padding: 12px;
    border-radius: 22px;
    background: rgba(8, 3, 18, .96);
    border: 1px solid rgba(216,180,254,.22);
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
    backdrop-filter: blur(18px);
    z-index: 100;
    animation: navDrop .18s ease;
}

.nav-more-menu a {
    display: flex;
    margin: 0;
    padding: 12px 14px;
    border-radius: 16px;
    color: var(--muted);
    text-decoration: none;
    font-weight: 900;
}

.nav-more-menu a:hover {
    color: #fff;
    background: rgba(168,85,247,.18);
    transform: translateX(4px);
}

.nav-search {
    min-width: 0 !important;
    width: 100%;
}

.nav-search input {
    min-width: 0;
}

.nav-actions {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

@keyframes navDrop {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1180px) {
    .site-header {
        grid-template-columns: auto 1fr auto;
    }

    .nav-search {
        grid-column: 1 / -1;
        order: 5;
    }
}

@media (max-width: 900px) {
    .site-header {
        position: sticky !important;
        display: grid !important;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .brand-link {
        max-width: 100%;
    }

    .site-nav {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .nav-more-menu {
        left: 0;
        right: auto;
    }

    .nav-actions {
        justify-content: flex-start;
        flex-wrap: wrap !important;
    }
}

.dashboard-skin {
    --profile-gradient: linear-gradient(135deg,#2e1065,#581c87,#111827);
    background: var(--profile-gradient) !important;
}

.dashboard-hero.dashboard-skin {
    position: relative;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.dashboard-hero.dashboard-skin::before,
.public-profile-hero::before {
    content: "";
    position: absolute;
    inset: -120px;
    background: radial-gradient(circle at 18% 10%, rgba(255,255,255,.18), transparent 28%), radial-gradient(circle at 88% 4%, rgba(236,72,153,.20), transparent 30%);
    pointer-events: none;
}

.dashboard-identity-block,
.dashboard-profile-card,
.public-profile-copy,
.public-profile-avatar {
    position: relative;
    z-index: 1;
}

.dashboard-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.dashboard-badge-row span,
.dashboard-badge-row a,
.profile-hero-pills a {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
}

.dashboard-profile-card {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px;
    border-radius: 32px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.dashboard-avatar-ring,
.public-profile-avatar,
.public-mini-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(5,2,12,.44);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 20px 55px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14);
}

.dashboard-avatar-ring {
    width: 132px;
    height: 132px;
    border-radius: 36px;
}

.dashboard-avatar-ring img,
.public-profile-avatar img,
.public-mini-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.dashboard-profile-card b {
    display: block;
    font-size: 52px;
    line-height: 1;
}

.dashboard-profile-card span,
.dashboard-profile-card small {
    color: #f5d0fe;
    font-weight: 900;
}

.dashboard-material-card {
    min-height: 255px;
}

.public-profile-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    margin-top: 58px;
    padding: 36px;
    border-radius: 40px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: var(--shadow);
}

.public-profile-avatar {
    width: 220px;
    height: 220px;
    border-radius: 50px;
}

.public-profile-avatar strong,
.public-mini-avatar strong {
    font-size: 62px;
}

.public-profile-copy h1 {
    margin: 12px 0;
    font-size: clamp(42px, 7vw, 88px);
    line-height: .9;
    letter-spacing: -.07em;
}

.public-profile-copy p {
    max-width: 780px;
    color: rgba(255,255,255,.82);
    font-size: 18px;
    line-height: 1.75;
}

.public-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.community-grid {
    margin: 28px 0;
}

.public-mini-profile {
    display: grid;
    gap: 12px;
    min-height: 280px;
    padding: 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.public-mini-profile:hover {
    transform: translateY(-7px);
    border-color: rgba(216,180,254,.5);
    box-shadow: 0 30px 80px rgba(168,85,247,.20);
}

.public-mini-avatar {
    width: 94px;
    height: 94px;
    border-radius: 28px;
}

.public-mini-profile h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
}

.public-mini-profile p {
    margin: 0;
    color: rgba(255,255,255,.72);
    line-height: 1.55;
}

.public-mini-profile span {
    color: #f5d0fe;
    font-weight: 900;
}

.profile-choice-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.compact-profile-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.theme-swatch {
    border-radius: 28px;
}

.profile-share-panel {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.12);
}

.profile-share-panel strong {
    color: #f5d0fe;
}

.profile-share-panel input {
    font-size: 13px;
}

.public-pagination {
    margin: 30px 0 80px;
}

.swal2-popup {
    border: 1px solid rgba(216,180,254,.22) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.45) !important;
}

@media (max-width: 900px) {
    .dashboard-hero.dashboard-skin,
    .public-profile-hero {
        grid-template-columns: 1fr;
    }

    .public-profile-avatar {
        width: 170px;
        height: 170px;
    }
}

/* =====================================================
   SMART NAVBAR AUTO-MORE SYSTEM
   Moves links into More before navbar gets cramped
===================================================== */

.site-header {
    display: grid !important;
    grid-template-columns: auto minmax(180px, 1fr) minmax(230px, 320px) auto;
    align-items: center !important;
    gap: 10px !important;
}

.brand-link {
    min-width: 0;
    max-width: 260px;
}

.brand-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smart-site-nav {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap !important;
    overflow: visible;
}

.smart-nav-visible {
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.smart-nav-visible .smart-nav-item,
.smart-nav-hidden .smart-nav-item {
    white-space: nowrap;
}

.smart-nav-more {
    position: relative;
    flex: 0 0 auto;
}

.smart-nav-more[hidden] {
    display: none !important;
}

.smart-nav-more summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-weight: 900;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid rgba(216,180,254,.16);
    background: rgba(255,255,255,.055);
    user-select: none;
}

.smart-nav-more summary::-webkit-details-marker {
    display: none;
}

.smart-nav-more[open] summary,
.smart-nav-more summary:hover {
    color: #fff;
    background: rgba(168,85,247,.18);
}

.smart-nav-hidden {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 270px;
    max-height: 430px;
    overflow-y: auto;
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 22px;
    background: rgba(8, 3, 18, .97);
    border: 1px solid rgba(216,180,254,.22);
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
    backdrop-filter: blur(18px);
    z-index: 100;
    animation: navDrop .18s ease;
}

.smart-nav-hidden a {
    display: flex !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    color: var(--muted);
    text-decoration: none;
    font-weight: 900;
}

.smart-nav-hidden a:hover {
    color: #fff;
    background: rgba(168,85,247,.18);
    transform: translateX(4px);
}

.nav-search {
    min-width: 0 !important;
    width: 100%;
}

.nav-search input {
    min-width: 0;
}

.nav-actions {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

@keyframes navDrop {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1180px) {
    .site-header {
        grid-template-columns: auto minmax(160px, 1fr) auto;
    }

    .nav-search {
        grid-column: 1 / -1;
        order: 5;
    }
}

@media (max-width: 900px) {
    .site-header {
        position: sticky !important;
        grid-template-columns: 1fr;
        align-items: stretch !important;
    }

    .brand-link {
        max-width: 100%;
    }

    .smart-site-nav {
        justify-content: flex-start;
    }

    .smart-nav-visible {
        justify-content: flex-start;
    }

    .smart-nav-hidden {
        left: 0;
        right: auto;
    }

    .nav-actions {
        justify-content: flex-start;
        flex-wrap: wrap !important;
    }
}

/* =====================================================
   GLOBAL BULLET / LIST SPACING FIX - PUBLIC SITE
   Makes bullets readable and less cramped everywhere
===================================================== */

.page-shell ul,
.page-shell ol,
.site-footer ul,
.site-footer ol {
    margin: 16px 0 22px;
    padding-left: 26px;
}

.page-shell li,
.site-footer li {
    margin-bottom: 12px;
    padding-left: 4px;
    line-height: 1.75;
    color: rgba(255, 247, 255, 0.82);
}

.page-shell li:last-child,
.site-footer li:last-child {
    margin-bottom: 0;
}

.page-shell li::marker,
.site-footer li::marker {
    color: #c084fc;
    font-size: 1.05em;
}

.page-shell ul ul,
.page-shell ol ol,
.page-shell ul ol,
.page-shell ol ul {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Better spacing for content-heavy sections */
.lesson-body ul,
.lesson-body ol,
.material-body-copy ul,
.material-body-copy ol,
.learn-main-story ul,
.learn-main-story ol,
.learn-info-box ul,
.learn-info-box ol,
.glass-panel ul,
.glass-panel ol,
.profile-tip-card ul,
.profile-tip-card ol {
    display: grid;
    gap: 10px;
    margin: 18px 0 24px;
    padding-left: 28px;
}

.lesson-body li,
.material-body-copy li,
.learn-main-story li,
.learn-info-box li,
.glass-panel li,
.profile-tip-card li {
    line-height: 1.85;
}

/* Stop button/nav style links from being affected */
.site-nav,
.nav-actions,
.footer-mini-badges,
.social-row,
.hero-actions,
.dashboard-badge-row,
.profile-hero-pills {
    list-style: none;
}

/* =====================================================
   LATEST BTS UPDATES SYSTEM
===================================================== */

.updates-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: center;
    padding: 74px 0 34px;
}

.updates-hero h1 {
    max-width: 980px;
    margin: 14px 0;
    font-size: clamp(44px, 7vw, 92px);
    line-height: .9;
    letter-spacing: -.07em;
    background: linear-gradient(135deg, #fff, #f5d0fe, #c084fc, #fb7185);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.updates-hero p {
    max-width: 760px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}

.updates-live-card {
    min-height: 260px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    border-radius: 36px;
    background:
        radial-gradient(circle at 20% 0, rgba(236,72,153,.34), transparent 34%),
        linear-gradient(145deg, rgba(88,28,135,.84), rgba(9,3,19,.92));
    border: 1px solid rgba(216,180,254,.22);
    box-shadow: 0 28px 90px rgba(0,0,0,.38);
    animation: btsFloat 4s ease-in-out infinite;
}

.updates-live-card span {
    color: #f0abfc;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
}

.updates-live-card b {
    font-size: 78px;
    line-height: 1;
}

.updates-live-card small {
    color: #ddd6fe;
    font-weight: 900;
}

.updates-filter-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px auto;
    gap: 12px;
    padding: 12px;
    margin: 10px 0 28px;
    border-radius: 28px;
    background: rgba(20, 10, 38, .78);
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 24px 70px rgba(0,0,0,.30);
}

.updates-filter-card input,
.updates-filter-card select {
    border-radius: 20px;
}

.updates-filter-card button {
    border: 0;
    border-radius: 20px;
    padding: 0 22px;
    color: white;
    font-weight: 900;
    cursor: pointer;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 22px;
    margin: 28px 0 70px;
}

.update-card {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 24px 70px rgba(0,0,0,.24);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.update-card:hover {
    transform: translateY(-8px);
    border-color: rgba(216,180,254,.55);
    box-shadow: 0 34px 90px rgba(168,85,247,.20);
}

.update-card.is-featured::before {
    content: "";
    position: absolute;
    inset: -130px;
    background: conic-gradient(from 90deg, transparent, rgba(236,72,153,.24), rgba(168,85,247,.24), transparent 55%);
    animation: spinny 12s linear infinite;
    pointer-events: none;
}

.update-card-media {
    position: relative;
    display: block;
    height: 240px;
    overflow: hidden;
}

.update-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.update-card:hover .update-card-media img {
    transform: scale(1.08);
}

.update-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(9,3,19,.76));
}

.update-card-fallback {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: grid;
    place-items: center;
    font-size: 64px;
    font-weight: 900;
    letter-spacing: -.08em;
    background: radial-gradient(circle, rgba(168,85,247,.28), rgba(9,3,19,.92));
}

.update-pin {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 2;
    padding: 9px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    background: rgba(0,0,0,.38);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
}

.update-card-body {
    position: relative;
    z-index: 2;
    padding: 22px;
}

.update-meta-row,
.update-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.update-meta-row span,
.update-action-row span {
    display: inline-flex;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    color: #e9d5ff;
    background: rgba(168,85,247,.14);
    border: 1px solid rgba(216,180,254,.18);
    font-size: 12px;
    font-weight: 900;
}

.update-meta-row small {
    color: rgba(248,243,255,.62);
    font-weight: 800;
}

.update-card-body h2 {
    margin: 12px 0;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.update-card-body h2 a,
.update-action-row a {
    color: white;
    text-decoration: none;
}

.update-card-body p {
    color: rgba(248,243,255,.72);
    line-height: 1.7;
}

.update-action-row a {
    font-weight: 900;
    color: #f5d0fe;
}

.update-show-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 28px;
    align-items: center;
    padding: 70px 0 34px;
}

.update-show-copy h1 {
    margin: 14px 0;
    font-size: clamp(44px, 7vw, 88px);
    line-height: .9;
    letter-spacing: -.07em;
}

.update-show-copy p {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}

.update-show-media {
    overflow: hidden;
    min-height: 360px;
    border-radius: 36px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 28px 90px rgba(0,0,0,.34);
}

.update-show-media img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    display: block;
}

.update-video-section {
    margin: 28px 0;
}

.update-video-frame {
    overflow: hidden;
    border-radius: 34px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.update-video-frame iframe,
.update-video-frame video {
    width: 100%;
    min-height: 560px;
    display: block;
    border: 0;
}

.update-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    margin: 34px 0 70px;
}

.update-main-body,
.update-side-panel,
.related-update-card {
    border-radius: 30px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
}

.update-main-body {
    padding: 34px;
    color: rgba(255,247,255,.84);
    line-height: 2;
    font-size: 18px;
}

.update-side-panel {
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 96px;
}

.related-update-card {
    display: block;
    padding: 24px;
    color: white;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease;
}

.related-update-card:hover {
    transform: translateY(-6px);
    border-color: rgba(216,180,254,.48);
}

.related-update-card span {
    color: #e9d5ff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.related-update-card h3 {
    margin: 10px 0;
    font-size: 25px;
}

.related-update-card p {
    color: rgba(248,243,255,.72);
    line-height: 1.65;
}

.admin-update-preview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.admin-update-preview-row img {
    width: 160px;
    height: 92px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.16);
}

.admin-update-preview-row a {
    color: #f5d0fe;
    font-weight: 900;
}

@media (max-width: 980px) {
    .updates-hero,
    .update-show-hero,
    .update-content-layout {
        grid-template-columns: 1fr;
    }

    .update-side-panel {
        position: static;
    }
}

@media (max-width: 640px) {
    .updates-filter-card {
        grid-template-columns: 1fr;
    }

    .updates-filter-card button {
        padding: 14px;
    }

    .update-video-frame iframe,
    .update-video-frame video {
        min-height: 280px;
    }
}

/* =====================================================
   PROFILE EDIT SMOOTH PREVIEW FIX
===================================================== */

.profile-preview-card,
.profile-studio-preview {
    transition:
        background .28s ease,
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.profile-avatar-bubble,
.avatar-bubble.profile-avatar-bubble {
    width: 142px !important;
    height: 142px !important;
    min-width: 142px;
    min-height: 142px;
    border-radius: 38px;
}

.profile-avatar-bubble img,
.avatar-bubble.profile-avatar-bubble img,
.profile-avatar-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 12px;
}

.profile-choice-card {
    min-height: 250px;
}

.profile-choice-card[style*="display: none"] {
    display: none !important;
}

/* =====================================================
   PHONE-STYLE MEDIA GALLERY
===================================================== */

.phone-gallery-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 28px;
    align-items: center;
    padding: 74px 0 30px;
}

.phone-gallery-hero h1 {
    max-width: 980px;
    margin: 14px 0;
    font-size: clamp(44px, 7vw, 92px);
    line-height: .9;
    letter-spacing: -.07em;
    background: linear-gradient(135deg, #fff, #f5d0fe, #c084fc, #fb7185);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.phone-gallery-hero p {
    max-width: 760px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}

.phone-gallery-stat {
    min-height: 245px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    border-radius: 38px;
    background:
        radial-gradient(circle at 20% 0, rgba(236,72,153,.30), transparent 34%),
        linear-gradient(145deg, rgba(88,28,135,.84), rgba(9,3,19,.92));
    border: 1px solid rgba(216,180,254,.22);
    box-shadow: 0 28px 90px rgba(0,0,0,.38);
    animation: btsFloat 4s ease-in-out infinite;
}

.phone-gallery-stat span,
.phone-gallery-stat small {
    color: #f5d0fe;
    font-weight: 900;
}

.phone-gallery-stat b {
    font-size: 78px;
    line-height: 1;
}

.phone-gallery-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px auto;
    gap: 12px;
    padding: 12px;
    margin: 10px 0 24px;
    border-radius: 28px;
    background: rgba(20, 10, 38, .78);
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 24px 70px rgba(0,0,0,.30);
}

.phone-gallery-search input,
.phone-gallery-search select {
    border-radius: 20px;
}

.phone-gallery-search button {
    border: 0;
    border-radius: 20px;
    padding: 0 22px;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.phone-albums-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 2px 18px;
    margin-bottom: 14px;
    scroll-snap-type: x mandatory;
}

.phone-albums-strip::-webkit-scrollbar {
    height: 8px;
}

.phone-albums-strip::-webkit-scrollbar-thumb {
    background: rgba(216,180,254,.30);
    border-radius: 999px;
}

.phone-album-pill {
    flex: 0 0 auto;
    min-width: 170px;
    min-height: 86px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 50px;
    align-items: center;
    scroll-snap-align: start;
    padding: 12px;
    color: #fff;
    text-decoration: none;
    border-radius: 24px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.13);
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.phone-album-pill:hover,
.phone-album-pill.is-active {
    transform: translateY(-4px);
    border-color: rgba(216,180,254,.50);
    background: rgba(168,85,247,.18);
}

.phone-album-pill img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 16px;
}

.phone-album-pill span {
    font-weight: 900;
}

.phone-album-pill b {
    color: #f5d0fe;
}

.phone-selected-album {
    margin: 18px 0 28px;
    padding: 24px;
    border-radius: 30px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.13);
}

.phone-selected-album h2 {
    margin: 8px 0;
    font-size: clamp(30px, 4vw, 54px);
    letter-spacing: -.05em;
}

.phone-selected-album p {
    color: var(--muted);
}

.phone-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    grid-auto-flow: dense;
    gap: 12px;
    margin: 24px 0 80px;
}

.phone-media-card {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    padding: 0;
    border: 0;
    border-radius: 26px;
    text-align: left;
    color: white;
    cursor: pointer;
    background: rgba(255,255,255,.075);
    box-shadow: 0 18px 48px rgba(0,0,0,.26);
    transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.phone-media-card:nth-child(6n + 1),
.phone-media-card.video,
.phone-media-card.youtube {
    grid-row: span 2;
}

.phone-media-card:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 28px 70px rgba(168,85,247,.20);
    filter: saturate(1.08);
}

.phone-media-thumb {
    position: absolute;
    inset: 0;
}

.phone-media-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(7,3,15,.90));
}

.phone-media-thumb img,
.phone-media-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.phone-media-fallback {
    width: 100%;
    height: 100%;
    min-height: 240px;
    display: grid;
    place-items: center;
    font-size: 54px;
    font-weight: 900;
    background: radial-gradient(circle, rgba(168,85,247,.28), rgba(9,3,19,.92));
}

.media-type-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 7px 10px;
    border-radius: 999px;
    color: white;
    font-size: 12px;
    font-weight: 900;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
}

.phone-media-info {
    position: absolute;
    z-index: 2;
    left: 14px;
    right: 14px;
    bottom: 14px;
}

.phone-media-info strong {
    display: block;
    font-size: 16px;
    line-height: 1.2;
}

.phone-media-info span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 800;
}

.phone-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 76px 24px 120px;
    background: rgba(3, 1, 8, .92);
    backdrop-filter: blur(18px);
}

.phone-lightbox.is-open {
    display: flex;
}

.lightbox-stage {
    width: min(1100px, 92vw);
    height: min(720px, 72vh);
    display: grid;
    place-items: center;
}

.lightbox-stage img,
.lightbox-stage video,
.lightbox-stage iframe {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 26px;
    box-shadow: 0 28px 100px rgba(0,0,0,.55);
}

.lightbox-stage iframe {
    width: min(1100px, 92vw);
    height: min(620px, 68vh);
}

.lightbox-close,
.lightbox-arrow {
    position: fixed;
    z-index: 1001;
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
    cursor: pointer;
}

.lightbox-close {
    top: 22px;
    right: 22px;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    font-size: 34px;
    line-height: 1;
}

.lightbox-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 76px;
    border-radius: 999px;
    font-size: 54px;
    line-height: 1;
}

.lightbox-prev {
    left: 24px;
}

.lightbox-next {
    right: 24px;
}

.lightbox-close:hover,
.lightbox-arrow:hover {
    background: rgba(168,85,247,.28);
}

.lightbox-caption {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    width: min(820px, calc(100% - 32px));
    padding: 16px 20px;
    border-radius: 24px;
    text-align: center;
    background: rgba(8,3,18,.76);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(18px);
}

.lightbox-caption span {
    color: #f5d0fe;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.lightbox-caption h2 {
    margin: 6px 0;
    font-size: clamp(20px, 3vw, 34px);
}

.lightbox-caption p {
    margin: 0;
    color: rgba(255,255,255,.72);
    line-height: 1.5;
}

.admin-media-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.admin-media-preview img {
    width: 150px;
    height: 90px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.16);
}

.admin-media-preview a {
    color: #f5d0fe;
    font-weight: 900;
}

@media (max-width: 980px) {
    .phone-gallery-hero,
    .phone-gallery-search {
        grid-template-columns: 1fr;
    }

    .phone-gallery-search button {
        padding: 14px;
    }

    .lightbox-arrow {
        width: 46px;
        height: 60px;
        font-size: 42px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }
}

@media (max-width: 620px) {
    .phone-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phone-media-card {
        min-height: 190px;
    }

    .phone-media-card:nth-child(6n + 1),
    .phone-media-card.video,
    .phone-media-card.youtube {
        grid-row: span 1;
    }

    .phone-lightbox {
        padding: 70px 12px 150px;
    }
}

/* =========================================================
   BTS MEMBERS SHOWCASE
========================================================= */

.members-showcase-section {
    position: relative;
}

.members-showcase-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.member-showcase-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background:
        linear-gradient(
            180deg,
            rgba(24, 12, 36, 0.95) 0%,
            rgba(11, 7, 18, 0.98) 100%
        );

    border: 1px solid rgba(168, 85, 247, 0.16);

    text-decoration: none;
    color: white;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

    min-height: 560px;

    display: flex;
    flex-direction: column;

    isolation: isolate;
}

.member-showcase-card:hover {
    transform: translateY(-10px);

    border-color: rgba(168, 85, 247, 0.45);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(168, 85, 247, 0.18);
}

.member-showcase-image-wrap {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.member-showcase-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform .7s ease,
        filter .5s ease;
}

.member-showcase-card:hover img {
    transform: scale(1.06);

    filter:
        saturate(1.08)
        contrast(1.03);
}

.member-showcase-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 5, 8, 0.96) 0%,
            rgba(5, 5, 8, 0.25) 45%,
            rgba(5, 5, 8, 0) 100%
        );

    z-index: 1;
}

.member-showcase-glow {
    position: absolute;
    inset: auto 0 -90px 0;
    height: 180px;

    background:
        radial-gradient(
            circle,
            color-mix(in srgb, var(--accent) 60%, transparent) 0%,
            transparent 72%
        );

    opacity: .6;

    filter: blur(26px);

    z-index: 0;
}

.member-showcase-bt21 {
    position: absolute;
    top: 14px;
    right: 14px;

    z-index: 3;

    padding: 8px 12px;

    border-radius: 999px;

    background: rgba(0, 0, 0, 0.48);

    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(10px);

    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    color: #f5d0fe;
}

.member-showcase-content {
    position: relative;
    z-index: 2;

    padding: 22px 20px 20px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    flex: 1;
}

.member-showcase-role {
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;

    color: #c084fc;

    opacity: .92;
}

.member-showcase-content h3 {
    font-size: 1.35rem;
    line-height: 1.1;
    font-weight: 800;

    margin: 0;

    color: #fff;
}

.member-showcase-content p {
    margin: 0;

    color: rgba(255,255,255,0.72);

    line-height: 1.65;
    font-size: .95rem;
}

.member-showcase-footer {
    margin-top: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 18px;
}

.member-showcase-footer span {
    color: #f5d0fe;
    font-weight: 700;
    letter-spacing: .03em;
}

.member-showcase-arrow {
    width: 40px;
    height: 40px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(168,85,247,0.35),
            rgba(88,28,135,0.95)
        );

    font-size: 1.15rem;
    font-weight: 700;

    transition:
        transform .3s ease,
        background .3s ease;
}

.member-showcase-card:hover .member-showcase-arrow {
    transform: translateX(5px);

    background:
        linear-gradient(
            135deg,
            rgba(192,132,252,0.55),
            rgba(126,34,206,1)
        );
}

/* =========================================================
   BTS MEMBERS EXTRA MOTION / ANIMATION
========================================================= */

.members-showcase-grid {
    perspective: 1200px;
}

.member-showcase-card {
    animation: memberCardReveal .8s ease both;
    transform-style: preserve-3d;
}

.member-showcase-card:nth-child(1) { animation-delay: .05s; }
.member-showcase-card:nth-child(2) { animation-delay: .12s; }
.member-showcase-card:nth-child(3) { animation-delay: .19s; }
.member-showcase-card:nth-child(4) { animation-delay: .26s; }
.member-showcase-card:nth-child(5) { animation-delay: .33s; }
.member-showcase-card:nth-child(6) { animation-delay: .40s; }
.member-showcase-card:nth-child(7) { animation-delay: .47s; }

.member-showcase-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    background:
        conic-gradient(
            from var(--spin-angle, 0deg),
            transparent 0deg,
            color-mix(in srgb, var(--accent) 70%, #fff 10%) 70deg,
            transparent 140deg,
            transparent 360deg
        );
    opacity: 0;
    filter: blur(14px);
    transition: opacity .35s ease;
    animation: memberBorderSpin 5s linear infinite;
}

.member-showcase-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 38%,
            rgba(255,255,255,.18) 48%,
            transparent 58%,
            transparent 100%
        );
    transform: translateX(-140%);
    opacity: 0;
}

.member-showcase-card:hover {
    transform:
        translateY(-14px)
        rotateX(4deg)
        rotateY(-3deg)
        scale(1.015);
}

.member-showcase-card:hover::before {
    opacity: .65;
}

.member-showcase-card:hover::after {
    opacity: 1;
    animation: memberShine .85s ease;
}

.member-showcase-image-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 20%),
        radial-gradient(circle at 70% 10%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 26%);
    opacity: .42;
    mix-blend-mode: screen;
    animation: memberAuraPulse 3.4s ease-in-out infinite;
}

.member-showcase-glow {
    animation: memberGlowFloat 3.8s ease-in-out infinite;
}

.member-showcase-bt21 {
    animation: memberBadgeFloat 2.8s ease-in-out infinite;
}

.member-showcase-content h3 {
    transition:
        transform .35s ease,
        text-shadow .35s ease,
        color .35s ease;
}

.member-showcase-card:hover .member-showcase-content h3 {
    transform: translateY(-3px);
    color: #fff;
    text-shadow:
        0 0 18px color-mix(in srgb, var(--accent) 75%, #fff 10%),
        0 0 34px rgba(168,85,247,.45);
}

.member-showcase-content p {
    transition: transform .35s ease, color .35s ease;
}

.member-showcase-card:hover .member-showcase-content p {
    transform: translateY(-2px);
    color: rgba(255,255,255,.88);
}

.member-showcase-arrow {
    animation: memberArrowPulse 2.2s ease-in-out infinite;
}

.member-showcase-card:hover .member-showcase-arrow {
    animation: memberArrowRun .65s ease infinite alternate;
}

@keyframes memberCardReveal {
    from {
        opacity: 0;
        transform: translateY(34px) scale(.96);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes memberBorderSpin {
    to {
        --spin-angle: 360deg;
    }
}

@keyframes memberShine {
    from {
        transform: translateX(-140%);
    }

    to {
        transform: translateX(140%);
    }
}

@keyframes memberAuraPulse {
    0%, 100% {
        opacity: .32;
        transform: scale(1);
    }

    50% {
        opacity: .62;
        transform: scale(1.04);
    }
}

@keyframes memberGlowFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: .55;
    }

    50% {
        transform: translateY(-18px) scale(1.15);
        opacity: .85;
    }
}

@keyframes memberBadgeFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-6px) rotate(2deg);
    }
}

@keyframes memberArrowPulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(168,85,247,0);
    }

    50% {
        box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent);
    }
}

@keyframes memberArrowRun {
    from {
        transform: translateX(2px) scale(1);
    }

    to {
        transform: translateX(9px) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .member-showcase-card,
    .member-showcase-card::before,
    .member-showcase-card::after,
    .member-showcase-image-wrap::before,
    .member-showcase-glow,
    .member-showcase-bt21,
    .member-showcase-arrow {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1700px) {
    .members-showcase-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .members-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .members-showcase-grid {
        grid-template-columns: 1fr;
    }

    .member-showcase-card {
        min-height: unset;
    }

    .member-showcase-image-wrap {
        height: 360px;
    }
}

/* =====================================================
   PREMIUM NAVBAR HOVER - PixelCraftsLab inspired, BTS upgraded
===================================================== */

.site-nav a,
.nav-cta,
.nav-link-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --x: 50%;
    --y: 50%;
}

.site-nav a::before,
.nav-cta::before,
.nav-link-button::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -2;
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--x) var(--y), rgba(255,255,255,.36), transparent 24%),
        linear-gradient(135deg, rgba(168,85,247,.26), rgba(236,72,153,.16), rgba(255,255,255,.05));
    opacity: 0;
    transition: opacity .28s ease;
}

.site-nav a::after,
.nav-cta::after,
.nav-link-button::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #f5d0fe, #a855f7, transparent);
    transform: scaleX(0);
    transform-origin: center;
    opacity: .9;
    transition: transform .28s ease;
}

.site-nav a:hover,
.nav-link-button:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-color: rgba(216,180,254,.32);
    box-shadow:
        0 10px 26px rgba(168,85,247,.18),
        inset 0 1px 0 rgba(255,255,255,.12);
    transform: translateY(-2px);
}

.site-nav a:hover::before,
.nav-cta:hover::before,
.nav-link-button:hover::before {
    opacity: 1;
}

.site-nav a:hover::after,
.nav-cta:hover::after,
.nav-link-button:hover::after {
    transform: scaleX(1);
}

.nav-cta:hover {
    transform: translateY(-2px) scale(1.025);
    box-shadow:
        0 16px 38px rgba(168,85,247,.30),
        0 0 0 1px rgba(255,255,255,.12) inset;
}

/* =====================================================
   ADVANCED CMS PUBLIC PAGES
===================================================== */

.cms-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) 390px;
    gap: 34px;
    align-items: center;
    padding: 82px 0 44px;
}

.cms-hero::before {
    content: "";
    position: absolute;
    inset: 12% -8% auto auto;
    width: min(520px, 54vw);
    height: min(520px, 54vw);
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(236,72,153,.16), transparent 58%),
        radial-gradient(circle at 30% 30%, rgba(168,85,247,.18), transparent 55%);
    filter: blur(5px);
    z-index: -1;
    animation: cmsAura 8s ease-in-out infinite;
}

.cms-hero-copy h1 {
    margin: 14px 0;
    font-size: clamp(46px, 8vw, 96px);
    line-height: .88;
    letter-spacing: -.075em;
    background: linear-gradient(135deg, #fff, #fde7ff, #c084fc, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cms-hero-copy p {
    max-width: 760px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}

.cms-orbit-card {
    position: relative;
    min-height: 430px;
    border-radius: 42px;
    padding: 16px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(168,85,247,.32), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
    border: 1px solid rgba(216,180,254,.25);
    box-shadow: 0 28px 90px rgba(0,0,0,.42);
    backdrop-filter: blur(16px);
}

.cms-orbit-card::before {
    content: "";
    position: absolute;
    inset: -110px;
    background: conic-gradient(from 180deg, transparent, rgba(168,85,247,.34), transparent 34%, rgba(236,72,153,.24), transparent 62%);
    animation: spinny 12s linear infinite;
    opacity: .65;
}

.cms-orbit-card img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.14);
    filter: saturate(1.08) contrast(1.04);
}

.cms-orbit-card span {
    position: absolute;
    z-index: 2;
    left: 24px;
    bottom: 24px;
    padding: 10px 14px;
    border-radius: 999px;
    color: #fff;
    font-weight: 900;
    background: rgba(7,3,15,.76);
    border: 1px solid rgba(216,180,254,.24);
    backdrop-filter: blur(14px);
}

.cms-orbit-ring {
    position: absolute;
    z-index: 2;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 2px dashed rgba(245,208,254,.28);
    animation: spinny 18s linear infinite reverse;
    pointer-events: none;
}

.cms-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 28px;
}

.cms-intro-grid h2 {
    margin: 10px 0;
    font-size: clamp(30px, 4vw, 52px);
    letter-spacing: -.04em;
}

.cms-mini-status {
    border-radius: 28px;
    padding: 24px;
    display: grid;
    align-content: center;
    gap: 8px;
    background:
        radial-gradient(circle at 20% 0, rgba(236,72,153,.24), transparent 38%),
        rgba(255,255,255,.075);
    border: 1px solid rgba(216,180,254,.22);
    box-shadow: 0 18px 60px rgba(0,0,0,.30);
}

.cms-mini-status b {
    font-size: 28px;
}

.cms-mini-status span,
.cms-mini-status small {
    color: var(--muted);
    font-weight: 800;
}

.cms-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.cms-info-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 24px;
    min-height: 210px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055)),
        radial-gradient(circle at top right, rgba(168,85,247,.18), transparent 44%);
    border: 1px solid rgba(216,180,254,.22);
    box-shadow: 0 18px 60px rgba(0,0,0,.30);
    backdrop-filter: blur(16px);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.cms-info-card::before {
    content: "";
    position: absolute;
    inset: -60px;
    background: conic-gradient(from 120deg, transparent, rgba(236,72,153,.15), transparent 38%);
    opacity: 0;
    transition: opacity .28s ease;
}

.cms-info-card:hover {
    transform: translateY(-8px);
    border-color: rgba(245,208,254,.45);
    box-shadow: 0 24px 80px rgba(168,85,247,.22);
}

.cms-info-card:hover::before {
    opacity: 1;
}

.cms-info-card h3,
.cms-info-card p,
.cms-icon {
    position: relative;
    z-index: 1;
}

.cms-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    margin-bottom: 16px;
    font-size: 24px;
    background: rgba(168,85,247,.18);
    border: 1px solid rgba(216,180,254,.20);
}

.cms-info-card h3 {
    margin: 0 0 10px;
    font-size: 26px;
}

.cms-info-card p {
    color: var(--muted);
    line-height: 1.7;
}

.cms-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
    padding: 30px 0 70px;
}

.cms-rich-content {
    line-height: 1.85;
}

.cms-rich-content h2,
.cms-rich-content h3 {
    color: #fff;
    letter-spacing: -.03em;
}

.cms-rich-content h2 {
    font-size: clamp(30px, 4vw, 50px);
}

.cms-rich-content p,
.cms-rich-content li {
    color: rgba(248,243,255,.82);
}

.cms-rich-content a {
    color: #f5d0fe;
    font-weight: 900;
}

.cms-side-panel {
    position: sticky;
    top: 96px;
    border-radius: 28px;
    padding: 20px;
    display: grid;
    gap: 10px;
    background: rgba(7,3,15,.72);
    border: 1px solid rgba(216,180,254,.20);
    backdrop-filter: blur(16px);
}

.cms-side-panel a {
    padding: 12px 14px;
    border-radius: 16px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 900;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
}

.cms-side-panel a:hover {
    color: #fff;
    background: rgba(168,85,247,.18);
    transform: translateY(-2px);
}

.cms-faq-list {
    display: grid;
    gap: 12px;
    margin-bottom: 60px;
}

.cms-faq {
    border-radius: 22px;
    padding: 18px 20px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(216,180,254,.20);
}

.cms-faq summary {
    cursor: pointer;
    font-weight: 900;
    font-size: 18px;
}

.cms-faq p {
    color: var(--muted);
    line-height: 1.75;
}

/* Contact page */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
    padding-bottom: 70px;
}

.contact-form-panel h2 {
    margin: 10px 0;
    font-size: clamp(32px, 4vw, 54px);
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}

.contact-form .span-2 {
    grid-column: span 2;
}

.contact-form small {
    color: #fca5a5;
    font-weight: 800;
}

.contact-side-panel {
    display: grid;
    gap: 14px;
}

.contact-side-panel .cms-info-card {
    min-height: auto;
}

.contact-orbit img {
    object-position: center;
}

.reveal-pop {
    opacity: 0;
    transform: translateY(22px) scale(.985);
    transition: opacity .55s ease, transform .55s ease;
}

.reveal-pop.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@keyframes cmsAura {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: .95;
    }

    50% {
        transform: translateY(-18px) scale(1.05);
        opacity: .65;
    }
}

@media (max-width: 980px) {
    .cms-hero,
    .cms-intro-grid,
    .cms-content-layout,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .cms-orbit-card {
        min-height: 340px;
    }

    .cms-orbit-card img {
        height: 300px;
    }

    .cms-side-panel {
        position: static;
    }
}

@media (max-width: 680px) {
    .cms-hero {
        padding-top: 54px;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-form .span-2 {
        grid-column: auto;
    }

    .cms-orbit-card img {
        height: 250px;
    }
}

.footer-social-zone {
    position: relative;
    margin-top: 34px;
    padding: 26px;
    border: 1px solid rgba(196, 137, 255, 0.22);
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(168, 85, 247, 0.20), transparent 34%),
        radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.14), transparent 34%),
        rgba(15, 8, 28, 0.72);
    box-shadow:
        0 0 40px rgba(168, 85, 247, 0.12),
        inset 0 0 28px rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.footer-social-zone::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transform: translateX(-120%);
    animation: footerGalaxySweep 7s linear infinite;
    pointer-events: none;
}

.footer-social-heading {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 680px;
    margin: 0 auto 22px;
}

.footer-social-heading span {
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f5d0fe;
    background: rgba(168, 85, 247, 0.16);
    border: 1px solid rgba(216, 180, 254, 0.24);
}

.footer-social-heading h3 {
    margin: 12px 0 8px;
    font-size: clamp(1.35rem, 3vw, 2.15rem);
    color: #ffffff;
    text-shadow: 0 0 18px rgba(216, 180, 254, 0.28);
}

.footer-social-heading p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
}

.social-galaxy-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.social-galaxy-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 15px 15px;
    border-radius: 22px;
    color: #ffffff;
    text-decoration: none;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(10, 6, 22, 0.82);
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.28),
        inset 0 0 20px rgba(255, 255, 255, 0.03);
    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}

.social-galaxy-card::before {
    content: "";
    position: absolute;
    inset: auto -30% -55% -30%;
    height: 90px;
    background: radial-gradient(circle, rgba(196, 181, 253, 0.32), transparent 65%);
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.28s ease;
    z-index: -1;
}

.social-galaxy-card:hover {
    transform: translateY(-7px) scale(1.015);
    border-color: rgba(216, 180, 254, 0.55);
    box-shadow:
        0 20px 44px rgba(88, 28, 135, 0.32),
        0 0 24px rgba(216, 180, 254, 0.20);
}

.social-galaxy-card:hover::before {
    opacity: 1;
    transform: translateY(-12px);
}

.social-card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.14) 45%, transparent 70%);
    transform: translateX(-130%);
    transition: transform 0.65s ease;
    pointer-events: none;
}

.social-galaxy-card:hover .social-card-shine {
    transform: translateX(130%);
}

.social-icon-orb {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 1.35rem;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06)),
        rgba(168, 85, 247, 0.20);
    box-shadow:
        inset 0 0 16px rgba(255, 255, 255, 0.10),
        0 0 18px rgba(168, 85, 247, 0.22);
    transition: transform 0.28s ease;
}

.social-galaxy-card:hover .social-icon-orb {
    transform: rotate(-6deg) scale(1.08);
}

.social-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.social-info strong {
    font-size: 0.98rem;
    color: #ffffff;
}

.social-info small {
    color: #e9d5ff;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.social-info em {
    color: rgba(255, 255, 255, 0.62);
    font-style: normal;
    font-size: 0.72rem;
    line-height: 1.35;
}

.social-arrow {
    margin-left: auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.28s ease, background 0.28s ease;
}

.social-galaxy-card:hover .social-arrow {
    transform: translate(3px, -3px);
    background: rgba(255, 255, 255, 0.18);
}

.social-instagram {
    background:
        radial-gradient(circle at top left, rgba(236, 72, 153, 0.28), transparent 45%),
        radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.22), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-tiktok {
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.23), transparent 45%),
        radial-gradient(circle at bottom right, rgba(244, 63, 94, 0.22), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-youtube {
    background:
        radial-gradient(circle at top left, rgba(239, 68, 68, 0.30), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-x,
.social-github {
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.20), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-threads {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-pinterest {
    background:
        radial-gradient(circle at top left, rgba(244, 63, 94, 0.26), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-facebook,
.social-linkedin {
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.26), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-snapchat {
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.24), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-discord {
    background:
        radial-gradient(circle at top left, rgba(129, 140, 248, 0.28), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-whatsapp {
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.26), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-telegram {
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.26), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-reddit {
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, 0.26), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-spotify {
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.24), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-email {
    background:
        radial-gradient(circle at top left, rgba(216, 180, 254, 0.28), transparent 45%),
        rgba(10, 6, 22, 0.82);
}

.social-empty-card {
    grid-column: 1 / -1;
    padding: 22px;
    border-radius: 20px;
    text-align: center;
    color: #f5d0fe;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(216, 180, 254, 0.28);
}

.social-empty-card span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.68);
}

.footer-legal-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
}

.footer-legal-links a {
    font-size: 0.86rem;
}

.footer-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(216,180,254,0.7) 1px, transparent 1.5px);
    background-size: 70px 70px, 110px 110px;
    animation: footerStarsFloat 18s linear infinite;
}

.footer-credit-line {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.footer-credit-line a {
    display: inline !important;
    margin: 0 !important;
    color: #f5d0fe !important;
    font-weight: 900;
    text-decoration: none;
}

.footer-credit-line a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .footer-credit-line {
        white-space: normal;
        flex-wrap: wrap;
    }
}

@keyframes footerGalaxySweep {
    0% {
        transform: translateX(-120%);
    }

    45%,
    100% {
        transform: translateX(120%);
    }
}

@keyframes footerStarsFloat {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-90px);
    }
}

@media (max-width: 768px) {
    .footer-social-zone {
        padding: 18px;
        border-radius: 22px;
    }

    .social-galaxy-grid {
        grid-template-columns: 1fr;
    }

    .social-galaxy-card {
        min-height: 84px;
    }
}