:root {
  --bg: #07060b;
  --paper: #140d18;
  --paper-2: #0c0810;
  --ink: #faf7ff;
  --muted: #b8adc5;
  --purple: #b06cff;
  --purple2: #641dff;
  --acid: #6df4ff;
  --pink: #ff4fd8;
  --line: #76698c;
  --silver: #e8ddff;
  --black: #050505;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--acid) 22%, transparent), transparent 24rem),
    radial-gradient(circle at 83% 10%, color-mix(in srgb, var(--pink) 24%, transparent), transparent 25rem),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--purple) 26%, transparent), transparent 28rem),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, #050409 0%, var(--bg) 35%, #090513 100%);
  background-size: auto, auto, auto, 20px 20px, 20px 20px, auto;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  overflow-x: hidden;
  position: relative;
}

body::before,
body::after {
  content: '';
  position: fixed;
  width: 34rem;
  height: 34rem;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(80px);
  opacity: .16;
  z-index: -1;
}
body::before {
  left: -10rem;
  top: 8rem;
  background: color-mix(in srgb, var(--pink) 75%, transparent);
}
body::after {
  right: -10rem;
  bottom: 8rem;
  background: color-mix(in srgb, var(--acid) 70%, transparent);
}

body.alt-vibe {
  --purple: #ff3eb5;
  --purple2: #8f164f;
  --acid: #6dffdf;
  --pink: #b4ff32;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  z-index: 999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

a { color: var(--acid); }
a:hover { color: var(--pink); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 10px 3vw;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 92%, transparent), color-mix(in srgb, var(--paper) 95%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--pink) 8%, transparent), color-mix(in srgb, var(--acid) 8%, transparent));
  border-bottom: 2px solid color-mix(in srgb, var(--purple) 85%, white 15%);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 24px color-mix(in srgb, var(--purple) 22%, transparent);
  backdrop-filter: blur(10px);
}

.brand {
  color: white;
  text-decoration: none;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.65rem);
  font-style: italic;
  letter-spacing: -1.5px;
  transform: skew(-8deg);
  text-shadow:
    -2px 0 0 var(--acid),
    2px 0 0 var(--pink),
    0 0 16px color-mix(in srgb, var(--purple) 50%, transparent),
    4px 4px 0 rgba(0,0,0,.45);
  filter: saturate(1.15);
}
.brand span {
  background: linear-gradient(90deg, var(--purple), var(--pink), var(--acid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand sup { color: var(--acid); font-size: .55em; margin-left: 3px; text-shadow: 0 0 10px var(--acid); }

.top-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.top-nav a,
.tiny-btn {
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--purple) 55%, var(--silver) 45%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, white 8%), color-mix(in srgb, var(--paper-2) 96%, black 4%));
  box-shadow: inset 0 0 0 1px #050505, 0 0 0 1px rgba(255,255,255,.04), 0 0 12px rgba(0,0,0,.28);
}
.top-nav a:hover, .tiny-btn:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--purple2) 88%, white 12%), color-mix(in srgb, var(--pink) 60%, var(--purple2) 40%));
  color: white;
  box-shadow: 0 0 0 1px var(--acid), 0 0 16px color-mix(in srgb, var(--pink) 28%, transparent);
}
.header-actions { display: flex; gap: 6px; }

.marquee-wrap {
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--purple) 45%, var(--line) 55%);
  background: linear-gradient(90deg, var(--acid), #d7fbff 30%, var(--pink) 72%, var(--purple));
  color: #050505;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  white-space: nowrap;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--purple) 20%, transparent);
}
.marquee { display: inline-block; padding: 7px 0; animation: marquee 20s linear infinite; }
@keyframes marquee { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }

.page-shell {
  width: min(1450px, 96vw);
  margin: 24px auto;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 300px);
  gap: 14px;
  align-items: start;
}
.left-column, .center-column, .right-column { display: grid; gap: 14px; }

.panel, .hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, white 8%), color-mix(in srgb, var(--paper-2) 94%, black 6%));
  border: 1px solid color-mix(in srgb, var(--purple) 38%, var(--silver) 62%);
  box-shadow: 7px 7px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04), inset 0 0 0 1px rgba(255,255,255,.04), inset 0 0 38px rgba(255,255,255,.02), 0 0 24px rgba(100,29,255,.08);
}
.panel::before,
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,.03) 54%, rgba(255,255,255,0) 55%);
  mix-blend-mode: screen;
  opacity: .65;
}
.panel::after,
.hero-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--acid), var(--pink), var(--purple), transparent);
  opacity: .75;
}
.panel-title {
  padding: 8px 9px;
  color: white;
  background: linear-gradient(90deg, var(--purple2), color-mix(in srgb, var(--pink) 55%, var(--purple2) 45%) 55%, #101010);
  border-bottom: 1px solid color-mix(in srgb, var(--silver) 65%, var(--purple) 35%);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-shadow: -1px 0 0 var(--acid), 1px 0 0 var(--pink), 1px 1px #000;
}
.panel-title.split { display: flex; justify-content: space-between; gap: 10px; }
.panel-title a { font-size: 9px; color: var(--acid); }

.profile-top { padding: 14px; display: grid; grid-template-columns: 92px 1fr; gap: 12px; }
.avatar-wrap { position: relative; }
.avatar {
  display: block;
  width: 92px;
  height: 112px;
  object-fit: cover;
  border: 3px double var(--silver);
  filter: contrast(1.08) saturate(.85) grayscale(.1);
}
.online-dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #111;
  background: var(--acid);
  box-shadow: 0 0 10px var(--acid);
}
.profile-top h1 { margin: 0 0 5px; font-size: 20px; font-family: Georgia, serif; font-style: italic; }
.tagline { color: #cfc7d2; font-size: 11px; line-height: 1.5; }
.status { color: var(--acid); font-size: 10px; font-weight: bold; }
.mood-box { margin: 0 14px 14px; padding: 8px; border: 1px dashed color-mix(in srgb, var(--purple) 65%, white 35%); font-size: 11px; background: linear-gradient(180deg, #0b0a10, #120814); box-shadow: inset 0 0 12px rgba(109,244,255,.06); }
.kaomoji { color: var(--pink); }
.contact-grid { padding: 0 14px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.contact-grid button { padding: 7px 4px; color: #f5f0fb; background: linear-gradient(180deg, #100b14, #0a090c); border: 1px outset #7b6698; font-size: 9px; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.contact-grid button:hover { color: #050505; background: linear-gradient(90deg, var(--acid), var(--pink)); }

.fake-player { padding: 12px; display: grid; grid-template-columns: 54px 1fr 35px; gap: 8px; align-items: center; }
.album-art { width: 54px; height: 54px; display: grid; place-items: center; font-size: 26px; color: #050505; background: conic-gradient(from 180deg, var(--acid), var(--purple), var(--pink), var(--acid)); border: 2px solid #d6d0dd; box-shadow: 0 0 16px color-mix(in srgb, var(--pink) 24%, transparent); }
.track-info { min-width: 0; }
.track-info strong, .track-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-info strong { font-size: 11px; }
.track-info span { color: var(--muted); font-size: 9px; margin-top: 3px; }
.progress { height: 6px; margin-top: 8px; background: #000; border: 1px solid #443e48; }
.progress span { width: 38%; height: 100%; background: var(--acid); }
.play-btn { width: 33px; height: 33px; border-radius: 50%; border: 2px solid white; color: white; background: var(--purple2); }
.microcopy { margin: 0; padding: 0 12px 12px; color: var(--muted); font-size: 9px; line-height: 1.4; }

.details-panel dl { margin: 0; padding: 8px 12px 12px; }
.details-panel dl div { display: grid; grid-template-columns: 70px 1fr; gap: 8px; border-bottom: 1px dotted #49414d; padding: 7px 0; font-size: 10px; }
dt { color: var(--purple); text-transform: uppercase; font-weight: bold; }
dd { margin: 0; color: #d3ccd6; }

.hero-card { overflow: hidden; min-height: 270px; padding: 34px 30px; background:
  linear-gradient(120deg, color-mix(in srgb, var(--purple) 24%, transparent), transparent 45%),
  repeating-linear-gradient(-7deg, transparent 0 22px, rgba(255,255,255,.025) 23px 24px),
  var(--paper-2);
}
.hero-card::before {
  content: "STATIC / STATIC / STATIC / STATIC";
  position: absolute;
  right: -65px;
  top: 38px;
  width: 360px;
  transform: rotate(90deg);
  color: rgba(255,255,255,.035);
  font: 900 30px Impact, sans-serif;
  letter-spacing: 5px;
}
.stamp { position: absolute; right: 20px; top: 18px; transform: rotate(6deg); padding: 7px 10px; border: 3px double var(--pink); color: var(--pink); font: 900 10px monospace; }
.eyebrow { color: var(--acid); font: 800 10px monospace; letter-spacing: 2px; }
.hero-card h2 { max-width: 760px; margin: 12px 0; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(2rem, 5vw, 4.5rem); line-height: .92; letter-spacing: -3px; text-shadow: 4px 4px 0 #3f155d; }
.hero-card > p:not(.eyebrow) { max-width: 660px; color: #c9c1cc; font-size: 13px; line-height: 1.7; }
.blink-row { margin-top: 24px; display: flex; gap: 6px; flex-wrap: wrap; }
.blink-row span { padding: 6px 8px; background: linear-gradient(180deg, #050505, #140914); border: 1px solid #7f7390; color: var(--pink); font-size: 9px; font-weight: 900; animation: flicker 3.8s infinite; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .2; } 95% { opacity: 1; } 97% { opacity: .4; } }

.bulletin { display: grid; grid-template-columns: 55px 1fr; gap: 14px; padding: 14px; border-bottom: 1px dotted #504856; }
.bulletin:last-child { border-bottom: 0; }
.date-box { width: 50px; height: 56px; display: grid; place-items: center; border: 1px solid #756b7c; background: #09080a; }
.date-box span { color: var(--pink); font-size: 8px; font-weight: bold; }
.date-box strong { font-size: 22px; line-height: 1; }
.bulletin h3 { margin: 0 0 5px; font-size: 13px; text-transform: lowercase; }
.bulletin p { margin: 0 0 8px; color: #bcb3bf; font-size: 11px; line-height: 1.5; }
.bulletin a { font-size: 9px; }

.interest-grid { display: grid; grid-template-columns: 1fr 1fr; }
.interest-grid > div { padding: 13px; min-height: 92px; border-right: 1px dotted #504856; border-bottom: 1px dotted #504856; }
.interest-grid > div:nth-child(even) { border-right: 0; }
.interest-grid span { color: var(--acid); font: 900 9px monospace; text-transform: uppercase; letter-spacing: 1px; }
.interest-grid p { margin: 8px 0 0; color: #c4bdc7; font-size: 11px; line-height: 1.5; }

.comment-form { padding: 12px; display: grid; gap: 7px; border-bottom: 1px solid #4a434d; }
.comment-form input, .comment-form textarea, .modal input, .modal textarea { width: 100%; padding: 9px; color: white; background: #080709; border: 1px inset #655c69; outline: none; }
.comment-form textarea, .modal textarea { min-height: 80px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus, .modal input:focus, .modal textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
.comment-form button, .save-btn { justify-self: start; padding: 8px 12px; background: var(--purple2); color: white; border: 2px outset #a889bd; font-size: 9px; font-weight: 900; }
.comment { padding: 12px; display: grid; grid-template-columns: 46px 1fr; gap: 10px; border-bottom: 1px dotted #4f4854; }
.mini-avatar, .friend-pic { display: grid; place-items: center; color: #050505; border: 2px double #d8d1dc; font-weight: 900; }
.mini-avatar { width: 46px; height: 46px; }
.checker { background: conic-gradient(var(--purple) 25%,#fff 0 50%,var(--purple) 0 75%,#fff 0); background-size: 16px 16px; }
.stripes { background: repeating-linear-gradient(-45deg,var(--acid) 0 7px,#111 7px 14px); }
.comment-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.comment-meta strong { color: var(--pink); }
.comment-meta span { color: #807784; font-size: 8px; }
.comment p { margin: 6px 0; font-size: 11px; }
.comment a { font-size: 9px; }

.friends-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
.friends-grid a { text-align: center; color: white; text-decoration: none; font-size: 9px; }
.friend-pic { width: 100%; aspect-ratio: 1; margin-bottom: 5px; font-size: 24px; }
.f1 { background: linear-gradient(45deg,#ff63bc,#7e32ad); }
.f2 { background: repeating-radial-gradient(circle,#c3c3c3 0 5px,#111 6px 12px); }
.f3 { background: linear-gradient(135deg,#baff4a,#161616); }
.f4 { background: repeating-linear-gradient(45deg,#ff4fc8 0 5px,#3d164a 5px 10px); }
.f5 { background: #c8c8c8; }
.f6 { background: linear-gradient(135deg,#41205e,#a4ff4f); }
.f7 { background: repeating-linear-gradient(90deg,#111 0 8px,#884bb2 8px 16px); }
.f8 { background: linear-gradient(180deg,#f657c9,#dfdfdf); }
.friends-grid a:hover .friend-pic { filter: invert(1); }

.counter-panel { text-align: center; }
.hit-counter { display: inline-block; margin: 16px auto 5px; padding: 5px 8px; background: linear-gradient(180deg, #000, #080808); border: 2px inset #a799c0; color: var(--acid); font: 18px 'Courier New', monospace; letter-spacing: 4px; text-shadow: -1px 0 0 var(--pink), 0 0 8px var(--acid); box-shadow: 0 0 18px rgba(109,244,255,.12); }
.counter-panel p { margin: 5px 0 14px; font-size: 9px; color: var(--muted); }
.badge-stack { padding: 12px; display: grid; gap: 7px; }
.blinkie { min-height: 28px; display: grid; place-items: center; padding: 5px; border: 2px ridge #d1c8d5; color: #070707; text-align: center; font: 900 8px monospace; letter-spacing: .6px; }
.purple { background: repeating-linear-gradient(90deg,#a45adb,#c98beb 5px,#632584 6px 10px); }
.acid { background: repeating-linear-gradient(0deg,#c5ff56,#8be840 4px,#e8ff9c 5px 9px); }
.silver { background: linear-gradient(#fff,#7d7d7d,#fff); }
.pink { background: repeating-linear-gradient(45deg,#ff74d4,#ff74d4 4px,#fff 4px 8px); }

.code-panel p { padding: 10px 10px 0; margin: 0; color: var(--muted); font-size: 9px; }
.tag-cloud { padding: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.tag-cloud span { padding: 5px 7px; background: linear-gradient(180deg, #080709, #120914); border: 1px solid #6b5f79; color: var(--acid); font: 8px monospace; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }

footer { width: min(1450px, 96vw); margin: 20px auto 40px; padding: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid #504955; color: #8e858f; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
footer strong { color: var(--purple); }

.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.82); }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(560px, 100%); max-height: 90vh; overflow-y: auto; position: relative; padding: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 94%, white 6%), var(--paper-2)); border: 2px solid var(--purple); box-shadow: 10px 10px 0 #000, 0 0 26px rgba(100,29,255,.16); }
.modal h2 { margin-top: 0; font-family: Georgia, serif; font-style: italic; font-size: 28px; }
.modal label { display: grid; gap: 5px; margin: 12px 0; color: var(--acid); font-size: 9px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; }
.close-btn { position: absolute; right: 10px; top: 8px; border: 0; color: white; background: transparent; font-size: 28px; }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .top-nav { grid-column: 1 / -1; order: 3; }
  .page-shell { grid-template-columns: 240px 1fr; }
  .right-column { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .site-header { position: static; grid-template-columns: 1fr; gap: 8px; }
  .header-actions { justify-content: flex-start; }
  .page-shell { grid-template-columns: 1fr; width: min(94vw, 620px); }
  .left-column, .center-column, .right-column { grid-column: 1; }
  .right-column { grid-template-columns: 1fr; }
  .hero-card { padding: 28px 20px; }
  .hero-card h2 { letter-spacing: -1.5px; }
  .interest-grid { grid-template-columns: 1fr; }
  .interest-grid > div { border-right: 0; }
  .friends-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 470px) {
  .friends-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-top { grid-template-columns: 78px 1fr; }
  .avatar { width: 78px; height: 98px; }
  .contact-grid { grid-template-columns: 1fr; }
  .bulletin { grid-template-columns: 45px 1fr; gap: 9px; }
  .date-box { width: 42px; height: 50px; }
}

/* ===== THEME CUSTOMIZER ===== */
.theme-modal { width: min(760px, 100%); }
.theme-kicker {
  margin: 0 0 5px;
  color: var(--acid);
  font: 900 9px 'Courier New', monospace;
  letter-spacing: 2px;
}
.theme-intro {
  margin: -6px 0 18px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}
.theme-section-title {
  margin: 18px 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px dotted var(--line);
  color: var(--pink);
  font: 900 10px 'Courier New', monospace;
  letter-spacing: 1.5px;
}
.theme-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.preset-card {
  min-width: 0;
  padding: 10px;
  text-align: left;
  color: var(--ink);
  background: linear-gradient(180deg, #0a090d, #14101b);
  border: 1px solid #6d5d82;
  box-shadow: inset 0 0 0 1px #050505, inset 0 1px 0 rgba(255,255,255,.08);
}
.preset-card:hover,
.preset-card.active {
  border-color: var(--acid);
  box-shadow: 0 0 0 1px var(--acid), 0 0 18px rgba(109,244,255,.18), 4px 4px 0 #000;
  transform: translate(-1px, -1px);
}
.preset-card strong,
.preset-card small { display: block; }
.preset-card strong { margin-top: 8px; font-size: 9px; letter-spacing: .8px; }
.preset-card small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.preset-swatches { display: grid; grid-template-columns: repeat(4, 1fr); height: 26px; border: 1px solid #5e5666; overflow: hidden; }
.preset-swatches i { display: block; background: var(--swatch); }
.manual-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.color-control {
  margin: 0 !important;
  padding: 9px;
  background: linear-gradient(180deg, #09080b, #130f18);
  border: 1px solid #5e5566;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.color-control > span:first-child { color: var(--acid); }
.color-inputs {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 7px;
  align-items: center;
  margin-top: 7px;
}
.color-inputs input[type="color"] {
  width: 46px;
  height: 34px;
  padding: 2px;
  border: 1px solid #69606d;
  background: #050505;
  cursor: pointer;
}
.color-inputs input[type="text"] {
  min-width: 0;
  padding: 8px;
  font: 10px 'Courier New', monospace;
  text-transform: uppercase;
}
.theme-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.reset-theme-btn {
  padding: 8px 12px;
  color: var(--ink);
  background: #0a090c;
  border: 1px solid #625a67;
  font-size: 9px;
  font-weight: 900;
}
.reset-theme-btn:hover { color: #050505; background: var(--acid); }

@media (max-width: 650px) {
  .theme-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manual-theme-grid { grid-template-columns: 1fr; }
}