:root {
  --text: #f4f4f7;
  --muted: #9a9aa8;
  --card: rgba(14, 14, 20, 0.6);
  --border: rgba(255, 255, 255, 0.12);
  --accent: #ffffff;
  --danger: #ff5c7a;
  --ok: #4ade80;
}
/* The page is always dark (the background is dark), so native pickers and scrollbars should be dark too. */
:root, html { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--text);
  background: #0b0b10;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* Full-screen background layer used by the public profile and editor preview */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #0b0b10; }
.bg img, .bg video { width: 100%; height: 100%; object-fit: cover; }

.app { min-height: 100vh; padding: 16px; display: flex; flex-direction: column; align-items: center; }
.center { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }

.card {
  width: 100%; max-width: 440px;
  background: var(--card);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.card h1 { font-size: 1.6rem; margin: 0 0 6px; }
.muted { color: var(--muted); font-size: 0.9rem; }
.hint { font-size: 0.8rem; color: var(--muted); margin-top: 4px; min-height: 1em; }
.hint.ok { color: var(--ok); }
.hint.bad { color: var(--danger); }

label { display: block; font-size: 0.85rem; color: var(--muted); margin: 14px 0 6px; }
input[type="text"], input[type="password"], input[type="url"], select, textarea {
  width: 100%; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.06); outline: none;
}
input[type="text"], input[type="password"], input[type="url"], select, textarea {
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input[type="text"]:hover, input[type="url"]:hover, select:hover, textarea:hover { background: rgba(255,255,255,0.09); }
input:focus, select:focus, textarea:focus {
  border-color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
textarea { resize: vertical; min-height: 80px; }
input[type="color"] { width: 48px; height: 36px; border: none; background: none; padding: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 18px; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.08); cursor: pointer; text-decoration: none; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 8px rgba(0,0,0,0.18);
  transition: transform .12s ease, background .2s, box-shadow .2s, border-color .2s;
  user-select: none;
}
.btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.btn:focus-visible, .tab:focus-visible, .intro-opt:focus-visible, .link-btn:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}
.btn.primary {
  background: #f3ece2; color: #000000; border-color: #f3ece2;
  box-shadow: 0 6px 20px rgba(255,255,255,0.15);
}
.btn.primary:hover { background: #ffffff; }
.btn.danger { color: #ff8aa0; border-color: rgba(255,92,122,0.35); }
.btn.danger:hover { background: rgba(255,92,122,0.14); border-color: rgba(255,92,122,0.6); }
.btn.small { padding: 6px 10px; font-size: 0.8rem; border-radius: 8px; font-weight: 500; }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 0 0 auto; }
.grow { flex: 1 1 auto !important; }
.spacer { height: 12px; }

.section { border-top: 1px solid var(--border); margin-top: 22px; padding-top: 6px; }
.section h2 { font-size: 1rem; margin: 10px 0 0; }

.links-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.link-item { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.link-item .btn { padding: 8px; }

.preview-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--accent); display: block; margin: 0 auto;
  background: rgba(255,255,255,0.08);
}

/* Public profile */
.profile-wrap { width: 100%; max-width: 440px; text-align: center; }
.profile-wrap .card { text-align: left; }
.profile-head { text-align: center; }
.avatar {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--accent); display: block; margin: -70px auto 12px;
  background: #1a1a22; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.display-name { font-size: 1.6rem; font-weight: 800; margin: 0; word-break: break-word; }
.username { color: var(--muted); margin: 2px 0 10px; font-size: 0.95rem; }
.bio { white-space: pre-wrap; word-break: break-word; line-height: 1.5; margin: 0 0 16px; text-align: center; }
.socials { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 16px; }
.chip {
  font-size: 0.8rem; padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border);
}
.link-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px; margin-bottom: 10px; border-radius: 14px;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border);
  text-decoration: none; font-weight: 600; transition: transform .15s ease, background .2s;
}
.link-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.16); }
.link-btn .brand-icon { width: 18px; height: 18px; margin-right: 10px; flex: 0 0 auto; }
.link-btn.has-brand { gap: 0; }
.views { text-align: center; font-size: 0.75rem; color: var(--muted); margin-top: 12px; }

/* Intro overlay */
.intro-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  cursor: pointer; transition: opacity .6s ease;
}
.intro-overlay.hide { opacity: 0; pointer-events: none; }
.intro-overlay .enter-btn { font-size: 1.05rem; padding: 14px 26px; border-radius: 999px; }
.intro-overlay .pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.06); opacity: 1 } }

/* Intro animations applied to the card */
.intro-fade { animation: in-fade 1s ease both; }
.intro-slide { animation: in-slide .9s cubic-bezier(.2,.8,.2,1) both; }
.intro-zoom { animation: in-zoom .8s cubic-bezier(.2,.9,.3,1.2) both; }
.intro-glitch { animation: in-glitch .9s steps(8) both; }
@keyframes in-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes in-slide { from { opacity: 0; transform: translateY(60px) } to { opacity: 1; transform: none } }
@keyframes in-zoom { from { opacity: 0; transform: scale(.6) } to { opacity: 1; transform: none } }
@keyframes in-glitch {
  0% { opacity: 0; transform: translateX(-20px) skewX(20deg); filter: hue-rotate(90deg) }
  20% { opacity: 1; transform: translateX(14px); filter: none }
  40% { transform: translateX(-8px) skewX(-6deg); filter: drop-shadow(3px 0 0 #f0f) drop-shadow(-3px 0 0 #0ff) }
  60% { transform: translateX(4px); filter: none }
  100% { transform: none }
}
.typing::after { content: "|"; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }

/* Music player, inside the card: title, seek bar with times, and controls. Colors follow the profile accent. */
.mp {
  margin: 16px 0 4px; padding: 14px 16px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
}
.mp-title {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; margin-bottom: 12px;
  font: 600 0.9rem/1.3 var(--profile-font, 'DM Sans', system-ui, sans-serif); color: #f4f4f7;
}
.mp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-eq { display: inline-flex; flex: none; align-items: flex-end; gap: 2px; height: 12px; }
.mp-eq i { width: 3px; height: 30%; border-radius: 1px; background: var(--accent, #ffffff); opacity: 0.7; }
.mp.playing .mp-eq i { opacity: 1; animation: mp-eq 0.9s ease-in-out infinite; }
.mp.playing .mp-eq i:nth-child(2) { animation-delay: 0.2s; }
.mp.playing .mp-eq i:nth-child(3) { animation-delay: 0.4s; }
@keyframes mp-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }

.mp-seek { display: flex; align-items: center; gap: 10px; }
.mp-time {
  flex: none; min-width: 38px; font: 500 0.72rem/1 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6);
}
.mp-left { text-align: right; }
.mp-bar {
  flex: 1; min-width: 0; height: 4px; margin: 0; padding: 0; border: 0; border-radius: 999px; outline: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, var(--accent, #ffffff) var(--pct, 0%), rgba(255, 255, 255, 0.18) var(--pct, 0%));
}
.mp-bar::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent, #ffffff);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); transition: transform 0.15s;
}
.mp-bar::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--accent, #ffffff); }
.mp-bar:hover::-webkit-slider-thumb, .mp-bar:focus-visible::-webkit-slider-thumb { transform: scale(1.3); }
.mp-bar:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); }

.mp-ctrls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 12px; }
.mp-btn {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: rgba(255, 255, 255, 0.82); cursor: pointer;
  transition: color 0.15s, background-color 0.15s, transform 0.12s;
}
.mp-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.mp-btn:hover { color: var(--accent, #ffffff); background: rgba(255, 255, 255, 0.08); }
.mp-btn:active { transform: scale(0.9); }
.mp-btn:focus-visible { outline: 2px solid var(--accent, #ffffff); outline-offset: 2px; }
.mp-play { width: 48px; height: 48px; background: var(--accent, #ffffff); color: #0b0b10; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.mp-play:hover { background: var(--accent, #ffffff); color: #0b0b10; transform: scale(1.06); }
.mp-play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
@media (prefers-reduced-motion: reduce) { .mp.playing .mp-eq i { animation: none; height: 70%; } }

.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: #111; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; font-size: 0.9rem;
  max-width: 90vw;
}
.toast.error { background: #6b0f22; }

.notfound { text-align: center; }

/* ---------- Starter page ---------- */
@keyframes float-glow { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-30px, 20px) } }
@keyframes line-in { from { opacity: 0; transform: translateY(20px); filter: blur(6px) } to { opacity: 1; transform: none; filter: none } }
.btn.big { padding: 14px 22px; font-size: 1rem; border-radius: 14px; }
@keyframes demo-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.steps-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.steps-list li {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 18px; width: min(360px, 100%);
  opacity: 0; transform: translateX(-12px); transition: opacity .5s ease, transform .5s ease;
}
.steps-list li.in { opacity: 1; transform: none; }

/* ---------- Mascot (husky in a gold hoodie) on the starter page ---------- */
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1) } 96% { transform: scaleY(0.1) } }
.bubble {
  position: relative; margin-bottom: 26px; padding: 10px 14px; border-radius: 6px;
  background: #f3ece2; color: #000000; font-weight: 600; font-size: 0.95rem;
}
.bubble::after {
  content: ""; position: absolute; left: -7px; bottom: 14px;
  border: 7px solid transparent; border-left: 0; border-right-color: #f3ece2;
}

/* Paws that slap over the eyes while the password is being typed */
.m-paws .paw { transform: translateY(54px); opacity: 0; transition: transform .5s cubic-bezier(.3,1.3,.5,1), opacity .3s ease; }
.m-paws .paw-l { transition-delay: 0s; }
.m-paws .paw-r { transition-delay: .07s; }

/* Husky on the password screens */

/* ---------- Editorial theme: sign up and editor (matches the starter page) ---------- */
body.is-editorial {
  --text: #f3ece2; --muted: #a39a8c; --border: #2c2823; --card: rgba(21,19,16,0.94);
  font-family: 'DM Sans', system-ui, sans-serif;
  background: #111210;
}
body.is-editorial::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    none;
  background-size: 64px 64px;
}
body.is-editorial h1, body.is-editorial h2 { font-family: 'Syne', system-ui, sans-serif; font-weight: 400; color: #f3ece2; letter-spacing: -0.01em; }
body.is-editorial h1 { font-size: 2.6rem; line-height: 1; }
body.is-editorial .card, body.is-editorial .card.signup, body.is-editorial .ed-form, body.is-editorial .ed-preview { border-radius: 6px; background: #151310; border-color: #2c2823; box-shadow: 0 30px 70px rgba(0,0,0,0.55); }
body.is-editorial input[type="text"], body.is-editorial input[type="password"], body.is-editorial input[type="url"], body.is-editorial select, body.is-editorial textarea { border-radius: 6px; background: #100e0c; border-color: #35302a; color: #f3ece2; }
body.is-editorial input:focus, body.is-editorial select:focus, body.is-editorial textarea:focus { border-color: #e3c99b; box-shadow: 0 0 0 3px rgba(227,201,155,0.15); }
body.is-editorial label, body.is-editorial .muted, body.is-editorial .hint { color: #a39a8c; }
body.is-editorial .btn { border-radius: 6px; background: #1b1815; border-color: #35302a; color: #f3ece2; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px rgba(0,0,0,0.35); }
body.is-editorial .btn:hover { background: #24201c; }
body.is-editorial .btn.primary { background: #f3ece2; color: #000000; border-color: #f3ece2; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.14), inset 0 0 0 1px rgba(255,255,255,0.6), 0 8px 22px rgba(0,0,0,0.4); }
body.is-editorial .btn.primary:hover { background: #ffffff; }
body.is-editorial .tab { border-radius: 6px; background: #1b1815; border-color: #35302a; color: #d8cfc0; }
body.is-editorial .tab.active { background: #f3ece2; color: #000000; border-color: #f3ece2; }
body.is-editorial .seg { border-radius: 6px; background: #100e0c; border-color: #35302a; }
body.is-editorial .seg-pill { border-radius: 4px; background: #f3ece2; box-shadow: none; }
body.is-editorial .seg button { border-radius: 4px; }
body.is-editorial .seg button.active { color: #000000; }
body.is-editorial .seg-pill { top: 4px; bottom: 4px; }
body.is-editorial .progress i.on { background: #e3c99b; }
body.is-editorial .savebar { background: rgba(0,0,0,0.96); border-top-color: #2c2823; }
body.is-editorial .intro-opt, body.is-editorial .box-swatch, body.is-editorial .tb-card, body.is-editorial .link-item { border-radius: 6px; background: #1b1815; border-color: #35302a; }
body.is-editorial .intro-opt.active, body.is-editorial .box-swatch.active { border-color: #e3c99b; }
body.is-editorial .chip { border-radius: 999px; background: #1b1815; border-color: #35302a; }
body.is-editorial .sound-toggle { background: #1b1815; border-color: #35302a; color: #a39a8c; }
body.is-editorial .url-preview span { color: #f3ece2; }
body.is-editorial .meter { background: #2c2823; }

/* ---------- Starter: editorial overrides (serif hero, grid texture, sharp frame, boxier buttons) ---------- */

/* Buttons: boxier with tactile inset borders. Pills stay on the filter tags. */

/* Preview: a flat, sharp-cornered device frame */

/* ---------- Sign up flow ---------- */
[hidden] { display: none !important; }
.card.signup { animation: card-in .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.98) } to { opacity: 1; transform: none } }
.fade-in { animation: fade-up .5s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.signup-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 190px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 999px; padding: 4px;
}
.seg button {
  position: relative; z-index: 1; background: none; border: 0; padding: 8px 4px; border-radius: 999px;
  cursor: pointer; color: var(--muted); font-weight: 600; transition: color .3s;
}
.seg button.active { color: #0b0b10; }
.seg-pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  background: #fff; border-radius: 999px; box-shadow: 0 6px 18px rgba(255,255,255,0.2);
  transition: transform .45s cubic-bezier(.3,1.2,.4,1);
}
.seg[data-mode="login"] .seg-pill { transform: translateX(100%); }

.progress { display: flex; gap: 6px; }
.progress i { width: 22px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.15); transition: background .4s, width .4s; }
.progress i.on { background: #fff; width: 34px; }

.steps { position: relative; min-height: 130px; }
.step.in-r { animation: step-in-r .5s cubic-bezier(.2,.8,.2,1) both; }
.step.in-l { animation: step-in-l .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes step-in-r { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
@keyframes step-in-l { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }

.field { position: relative; }
.field input { padding-right: 56px; }
.status { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.status svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; animation: draw .5s ease both; }
.status.ok { color: var(--ok); }
.status.bad { color: var(--danger); }
@keyframes draw { from { stroke-dashoffset: 40 } to { stroke-dashoffset: 0 } }
.spin { display: block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

.url-preview { margin-top: 12px; font-size: 0.85rem; color: var(--muted); font-family: ui-monospace, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.url-preview span { color: var(--text); display: inline-block; }
.url-preview span.pop { animation: pop-in .3s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop-in { from { transform: scale(.8); opacity: .4 } to { transform: none; opacity: 1 } }

.eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.8rem; padding: 6px 8px; }
.eye:hover { color: var(--text); }
.meter { height: 6px; border-radius: 6px; background: rgba(255,255,255,0.08); margin-top: 12px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .4s ease, background .4s; }

.review { text-align: center; padding: 6px 0; }
.review-name { font-size: 1.2rem; font-weight: 800; margin: 12px 0 6px; word-break: break-all; }
.check-burst svg { width: 84px; height: 84px; display: block; margin: 0 auto; }
.check-burst circle { fill: none; stroke: var(--ok); stroke-width: 2; stroke-dasharray: 152; stroke-dashoffset: 152; }
.check-burst path { fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.check-burst.pop circle { animation: draw-c .6s ease forwards; }
.check-burst.pop path { animation: draw-p .45s .45s ease forwards; }
@keyframes draw-c { to { stroke-dashoffset: 0 } }
@keyframes draw-p { to { stroke-dashoffset: 0 } }

.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-6px) } 40% { transform: translateX(6px) } 60% { transform: translateX(-4px) } 80% { transform: translateX(3px) } }

.nav { display: flex; gap: 10px; margin-top: 18px; }
.nav .btn { flex: 1; }
.btn.loading { position: relative; color: transparent; pointer-events: none; }
.btn.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid #0b0b10; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

.sound-toggle {
  position: fixed; left: 12px; bottom: 12px; z-index: 60;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer;
}
.sound-toggle:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .card.signup, .step, .fade-in, .shake, .status svg, .check-burst * { animation-duration: 0.01s !important; }
  .seg-pill, .progress i { transition: none; }
}

@media (max-width: 480px) {
  .card { padding: 22px 16px; border-radius: 18px; }
  .link-item { grid-template-columns: 1fr; }
}
/* More intro animations */
.intro-bounce { animation: in-bounce 1.1s both; }
.intro-drop { animation: in-drop .8s cubic-bezier(.3,.7,.4,1) both; }
.intro-flip { animation: in-flip .9s cubic-bezier(.2,.7,.3,1) both; }
.intro-spin { animation: in-spin 1s cubic-bezier(.2,.8,.2,1) both; }
.intro-blur { animation: in-blur 1s ease both; }
@keyframes in-bounce {
  0% { opacity: 0; transform: translateY(-140px) }
  55% { opacity: 1; transform: translateY(24px) }
  75% { transform: translateY(-12px) }
  90% { transform: translateY(5px) }
  100% { transform: none }
}
@keyframes in-drop {
  0% { opacity: 0; transform: translateY(-90px) scale(.92) }
  60% { opacity: 1; transform: translateY(8px) scale(1.02) }
  100% { transform: none }
}
@keyframes in-flip { from { opacity: 0; transform: perspective(700px) rotateX(-90deg) } to { opacity: 1; transform: perspective(700px) rotateX(0) } }
@keyframes in-spin { from { opacity: 0; transform: rotate(-300deg) scale(.4) } to { opacity: 1; transform: none } }
@keyframes in-blur { from { opacity: 0; filter: blur(18px); transform: scale(1.04) } to { opacity: 1; filter: blur(0); transform: none } }

/* Editor layout */
.editor { width: 100%; max-width: 1100px; margin: 0 auto; padding-bottom: 90px; }
.ed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.ed-head h1 { font-size: 1.4rem; margin: 0; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.tab {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; cursor: pointer; white-space: nowrap; color: var(--muted); font-weight: 500;
  transition: background .2s, color .2s, border-color .2s;
}
.tab:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.tab.active { background: #fff; color: #0b0b10; border-color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(255,255,255,0.12); }
.ed-body { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ed-form {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 20px; min-width: 0;
}
.panel h2 { font-size: 1.05rem; margin: 0 0 4px; }
.ed-preview { display: none; }
@media (min-width: 960px) {
  .ed-body { grid-template-columns: 1fr 380px; align-items: start; }
  .ed-preview {
    display: block; position: sticky; top: 16px;
    background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 12px;
  }
}
.ed-preview iframe { width: 100%; height: 640px; border: 0; border-radius: 14px; background: #000; margin-top: 8px; }
.intro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.intro-opt {
  padding: 12px 10px; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.05); cursor: pointer; color: var(--text);
  transition: transform .15s ease, background .2s, border-color .2s;
}
.intro-opt:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.intro-opt.active { border-color: #f3ece2; background: rgba(255,255,255,0.14); font-weight: 700; }
.savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--card); border-top: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.25);
}
.savebar .btn { min-width: 120px; }
.savebar #dirtyState { font-size: 0.9rem; }
.ed-form .btn.small { font-size: 0.82rem; }
.ed-form label { font-weight: 500; }
.ed-preview iframe { box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.dirty { color: #fbbf24 !important; }
.panel[hidden] { display: none; }

/* ---------- Editor: darker backdrop and higher-contrast text (only on /edit) ---------- */
body.is-editor { --muted: #c4c4d2; --border: rgba(255,255,255,0.16); --card: rgba(0,0,0,0.92); }
.is-editor .bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, rgba(10,10,16,0.55), rgba(5,5,9,0.92) 70%);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.is-editor .ed-form, .is-editor .ed-preview {
  background: rgba(0,0,0,0.9); border-color: rgba(255,255,255,0.12);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}
.is-editor .ed-head h1, .is-editor .panel h2 { color: #ffffff; }
.is-editor label { color: #dcdce6; font-weight: 500; }
.is-editor .muted, .is-editor .hint { color: #c4c4d2; }
.is-editor input[type="text"], .is-editor input[type="url"], .is-editor select, .is-editor textarea {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #ffffff;
}
.is-editor input::placeholder, .is-editor textarea::placeholder { color: #8f8fa3; }
.is-editor select option { background: #15151d; color: #fff; }
.is-editor .tab { background: rgba(24,24,32,0.85); color: #d0d0dc; border-color: rgba(255,255,255,0.14); }
.is-editor .tab.active { color: #0b0b10; }
.is-editor .btn { background: rgba(255,255,255,0.12); color: #ffffff; border-color: rgba(255,255,255,0.2); }
.is-editor .btn.primary { background: #ffffff; color: #0b0b10; }
.is-editor .btn.danger { color: #ff9bb0; }
.is-editor .tb-card, .is-editor .link-item { background: rgba(255,255,255,0.05); }
.is-editor .intro-opt, .is-editor .box-swatch { color: #ffffff; }
.is-editor .savebar { background: rgba(0,0,0,0.95); border-top-color: rgba(255,255,255,0.14); }
.is-editor .savebar #dirtyState { color: #d0d0dc; }
.is-editor .dirty { color: #fcd34d !important; }
.link-item .btn:disabled { opacity: .35; cursor: default; }

/* Top-of-card text sits above the avatar, so the avatar no longer overlaps the card edge */
.has-top-tb .avatar { margin-top: 10px; }
.has-top-tb .tb:first-child { margin-top: 0; }

/* ---------- Card effects (applied to the profile card) ---------- */
.profile-wrap.fx-float { animation: fx-float 6s ease-in-out infinite; }
@keyframes fx-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.profile-wrap.fx-tilt { will-change: transform; }
/* Tilt glare: a soft light that follows the pointer while the card is hovered (--gx, --gy and --glare are set in lantern-app.js). */
.profile-wrap.fx-tilt .card::after {
  content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 58%);
  opacity: var(--glare, 0);
}
.profile-wrap.fx-tilt .card.cs-none::after { display: none; }
.profile-wrap .card { position: relative; }
.profile-wrap.fx-pulse .card::before {
  content: ""; position: absolute; inset: -7px; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--box, #ffffff);
  animation: fx-pulse 3s ease-in-out infinite;
}
@keyframes fx-pulse { 0%, 100% { opacity: 0.25; transform: scale(1) } 50% { opacity: 0.95; transform: scale(1.015) } }
.profile-wrap.fx-shine .card { overflow: hidden; }
.profile-wrap.fx-shine .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
  transform: translateX(-120%); animation: fx-shine 4.5s ease-in-out infinite;
}
@keyframes fx-shine { 0%, 40% { transform: translateX(-120%) } 100% { transform: translateX(120%) } }
.profile-wrap.fx-glow .link-btn:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 22px var(--box, #ffffff); }
@media (prefers-reduced-motion: reduce) {
  .profile-wrap.fx-float, .profile-wrap.fx-pulse .card::before, .profile-wrap.fx-shine .card::after { animation: none !important; }
}

/* Text boxes: presets for size, font, alignment and weight */
.tb { white-space: pre-wrap; word-break: break-word; line-height: 1.4; margin: 8px 0; }
.tb-small { font-size: 0.85rem; }
.tb-medium { font-size: 1rem; }
.tb-large { font-size: 1.3rem; }
.tb-xl { font-size: 1.8rem; line-height: 1.2; }
.tb-sans { font-family: 'DM Sans', system-ui, sans-serif; }
.tb-serif { font-family: Georgia, "Times New Roman", serif; }
.tb-mono { font-family: ui-monospace, Consolas, monospace; }
.tb-display { font-family: Impact, "Arial Black", sans-serif; letter-spacing: 0.03em; text-transform: uppercase; }
/* Box behind the text: preset styles. --box is the color chosen in the editor. */
.tb[class*="tb-box-"]:not(.tb-box-none) { width: fit-content; max-width: 100%; padding: 12px 18px; border-radius: 16px; }
.tb-center[class*="tb-box-"]:not(.tb-box-none) { margin-left: auto; margin-right: auto; }
.tb-right[class*="tb-box-"]:not(.tb-box-none) { margin-left: auto; }
.tb-box-frost, .cs-frost { background: color-mix(in srgb, var(--box) 18%, rgba(255,255,255,0.1)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.25); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.tb-box-smoke, .cs-smoke { background: linear-gradient(160deg, color-mix(in srgb, var(--box) 45%, #222), color-mix(in srgb, var(--box) 25%, #000)); border: 1px solid rgba(255,255,255,0.08); }
.tb-box-float, .cs-float { background: color-mix(in srgb, var(--box) 25%, rgba(0,0,0,0.25)); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 18px 40px rgba(0,0,0,0.4); }
.tb-box-liquid, .cs-liquid { background: color-mix(in srgb, var(--box) 35%, transparent); border-radius: 28px 18px 30px 20px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 8px 24px rgba(0,0,0,0.3); }
.tb-box-neon, .cs-neon { background: rgba(0,0,0,0.55); border: 1px solid var(--box); border-radius: 14px; box-shadow: 0 0 12px var(--box), inset 0 0 12px color-mix(in srgb, var(--box) 30%, transparent); }
.tb-box-aurora, .cs-aurora { background: linear-gradient(120deg, color-mix(in srgb, var(--box) 40%, transparent), rgba(255,255,255,0.05), color-mix(in srgb, var(--box) 20%, transparent)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tb-box-spotlight, .cs-spotlight { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--box) 55%, transparent), rgba(0,0,0,0.55) 70%); border: 1px solid rgba(255,255,255,0.1); }
.tb-box-ember, .cs-ember { background: linear-gradient(0deg, color-mix(in srgb, var(--box) 45%, transparent), rgba(20,12,8,0.7)); border-bottom: 2px solid var(--box); border-radius: 14px; }
.tb-box-orbit, .cs-orbit { background: rgba(10,10,20,0.6); border: 1px solid color-mix(in srgb, var(--box) 60%, transparent); border-radius: 22px; box-shadow: 0 0 0 4px rgba(255,255,255,0.04); }
.tb-box-sparks, .cs-sparks { background-color: rgba(20,18,14,0.7); background-image: radial-gradient(circle at 20% 80%, var(--box) 0 1px, transparent 2px), radial-gradient(circle at 75% 30%, var(--box) 0 1px, transparent 2px), radial-gradient(circle at 60% 85%, var(--box) 0 1px, transparent 2px); border-radius: 16px; }

/* Box style picker (visual swatches) */
.box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.box-swatch { min-height: 58px; padding: 10px; font-size: 0.8rem; color: #fff; cursor: pointer; font-weight: 600; text-align: center; border: 1px solid var(--border); background: rgba(255,255,255,0.04); }
.box-swatch.active { outline: 2px solid #fff; outline-offset: 2px; }
.box-swatch:not([class*="tb-box-"]) { display: flex; align-items: center; justify-content: center; }
.tb-left { text-align: left; }
.tb-center { text-align: center; }
.tb-right { text-align: right; }
.tb-bold { font-weight: 800; }
.tb-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-top: 12px; background: rgba(255,255,255,0.04); }
.tb-card textarea { min-height: 64px; }
.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.tb-grid label { margin: 8px 0 0; }
.tb-grid select { padding: 8px 10px; }

/* Text animations: staggered per element, or per letter for the name */
.ta-fade { animation: ta-fade .7s ease backwards; }
.ta-rise { animation: ta-rise .6s cubic-bezier(.2,.8,.2,1) backwards; }
.ta-pop { animation: ta-pop .5s cubic-bezier(.3,1.4,.5,1) backwards; }
.ta-blur { animation: ta-blur .8s ease backwards; }
.ta-letter { display: inline-block; animation: ta-rise .5s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes ta-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ta-rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes ta-pop { 0% { opacity: 0; transform: scale(.6) } 70% { opacity: 1; transform: scale(1.08) } 100% { transform: none } }
@keyframes ta-blur { from { opacity: 0; filter: blur(10px) } to { opacity: 1; filter: blur(0) } }

@media (prefers-reduced-motion: reduce) {
  [class*="intro-"], [class*="ta-"] { animation-duration: 0.01s !important; }
}

/* Minecraft card on the profile (skin preview and NameMC link) */
.mc-card { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: transform .15s ease, background .2s; }
.mc-card:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); }
.mc-card img { width: 64px; height: auto; image-rendering: pixelated; flex: 0 0 auto; }
.mc-card span { display: flex; flex-direction: column; }
.mc-card small { color: var(--muted); font-size: 0.8rem; }

/* Editor: local time setting */
.clock-setting { display: grid; gap: 10px; margin-top: 12px; }
.clock-setting .check { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); }
/* Profile: local time widget */
.clock-widget { text-align: center; margin: 0 0 16px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
.clock-place { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.clock-time { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: 4px 0; }
.clock-date { font-size: 0.9rem; color: var(--muted); }

/* Profile: music volume slider (top right) */
.volume { position: fixed; top: 12px; right: 12px; z-index: 45; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.volume[hidden] { display: none; }
.volume span { font-size: 0.95rem; }
.volume input[type="range"] { width: 110px; accent-color: #ffffff; cursor: pointer; }

/* Profile: views on the left, UID on the right */
.views { display: flex; justify-content: space-between; text-align: left; padding: 0 4px; }

/* Badges (shown under the username) */
.badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 12px; }
.badge { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid var(--border); }

/* ---------- Dashboard ---------- */
.dash { width: 100%; min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
.dash-nav { background: #100e0c; border-right: 1px solid #2c2823; padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; }
.dash-logo { font-family: 'Syne', system-ui, sans-serif; font-size: 1.8rem; text-decoration: none; color: #f3ece2; margin: 0 0 18px 8px; }
.dash-label { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8f877a; margin: 16px 8px 6px; }
.dash-nav a, .dash-link-btn { display: block; padding: 10px 12px; border-radius: 6px; color: #d8cfc0; text-decoration: none; background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.dash-nav a:hover, .dash-link-btn:hover { background: #1b1815; color: #f3ece2; }
.dash-nav a.active { background: #1b1815; color: #f3ece2; box-shadow: inset 2px 0 0 #e3c99b; }
.dash-main { padding: 36px 44px 60px; max-width: 1040px; width: 100%; }
.dash-eyebrow { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #a39a8c; margin: 0 0 8px; }
.dash-eyebrow .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; margin-right: 6px; vertical-align: middle; }
.dash-title { font-family: 'Syne', system-ui, sans-serif; font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; margin: 0 0 10px; color: #f3ece2; }
.dash-card { background: #151310; border: 1px solid #2c2823; border-radius: 6px; padding: 22px; margin-top: 18px; }
.dash-card h2 { font-family: 'Syne', system-ui, sans-serif; font-weight: 400; font-size: 1.6rem; margin: 0 0 4px; color: #f3ece2; }
.dash-hero { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dash-url { font-family: 'Syne', system-ui, sans-serif; font-size: clamp(1.8rem, 4vw, 2.8rem); color: #f3ece2; word-break: break-all; }
.dash-id { min-width: 200px; background: #111210; border: 1px solid #2c2823; border-radius: 6px; padding: 16px; }
.dash-name { font-family: 'Syne', system-ui, sans-serif; font-size: 1.6rem; color: #f3ece2; }
.dash-uid { font-family: 'Syne', system-ui, sans-serif; font-size: 2rem; color: #e3c99b; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #2c2823; border-radius: 6px; overflow: hidden; margin-top: 18px; background: #151310; }
.dash-stats > div { padding: 18px 20px; border-right: 1px solid #2c2823; }
.dash-stats > div:last-child { border-right: 0; }
.dash-big { font-family: 'Syne', system-ui, sans-serif; font-size: 2.2rem; color: #f3ece2; }
.dash-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-checks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.dash-checks li { display: flex; gap: 10px; align-items: center; color: #d8cfc0; }
.dash-checks li span { width: 20px; text-align: center; color: #8f877a; }
.dash-checks li.done span { color: #4ade80; }
.dash-checks li.done a { color: #8f877a; text-decoration: line-through; }
.dash-checks a { color: #f3ece2; text-decoration: none; }
.dash-checks a:hover { text-decoration: underline; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 860px) {
  .dash { grid-template-columns: 1fr; }
  .dash-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #2c2823; padding: 12px; }
  .dash-logo, .dash-label { display: none; }
  .dash-nav a, .dash-link-btn { white-space: nowrap; }
  .dash-main { padding: 24px 18px 40px; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-stats > div:nth-child(2) { border-right: 0; }
  .dash-stats > div:nth-child(-n+2) { border-bottom: 1px solid #2c2823; }
  .dash-grid2 { grid-template-columns: 1fr; }
}

/* ---------- Front page: professional layout ---------- */
.center { text-align: center; }

/* ---------- Typography: a different font for each kind of text ---------- */
.btn, button, .tab, .seg button, .intro-opt, .box-swatch { font-family: 'Space Grotesk', system-ui, sans-serif; }
.dash-eyebrow, .dash-label, .url, .clock-place, .views, .progress, .hint, .url-preview, label {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
label { letter-spacing: 0.02em; }
.dash-eyebrow { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.72rem; }
.accent { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; }

/* Cleaner UI: no decorative dots or icons */
.dash-eyebrow .dot { display: none; }
.dash-checks li .state { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'JetBrains Mono', ui-monospace, monospace; color: #8f877a; }
.dash-checks li.done .state { color: #d8cfc0; }

/* Badges as icons (the name is in the tooltip and aria-label) */
.badges { gap: 8px; }
.badge { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: #f3ece2; }
.badge svg { width: 20px; height: 20px; }
[data-badge] { min-width: 56px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; }
[data-badge] svg { width: 20px; height: 20px; }

/* Badges: colour per badge, and a coloured label that appears on hover */
.badge, [data-badge] {
  position: relative;
  color: var(--badge, #f3ece2);
  border-color: color-mix(in srgb, var(--badge, #ffffff) 55%, transparent);
  background: color-mix(in srgb, var(--badge, #ffffff) 16%, transparent);
}
.badge::after, [data-badge]::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--badge, #ffffff);
  color: #000000;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}
.badge:hover::after, .badge:focus-visible::after, [data-badge]:hover::after, [data-badge]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.badge:focus-visible { outline: 2px solid var(--badge, #ffffff); outline-offset: 3px; }

/* Card style "None": no card background, border or shadow */
.card.cs-none { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Admin: grant badges, and locked badges in the editor */
.grant-row { margin-top: 14px; }
.grant-opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #35302a; border-radius: 6px; background: #1b1815; color: #f3ece2; cursor: pointer; }
.grant-opt input { width: auto; }
[data-badge].locked { opacity: 0.35; cursor: not-allowed; }

/* Dashboard: entrance, hover and progress */
.dash-main > * { animation: dash-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.dash-main > :nth-child(2) { animation-delay: 0.05s; }
.dash-main > :nth-child(3) { animation-delay: 0.1s; }
.dash-main > :nth-child(4) { animation-delay: 0.15s; }
.dash-main > :nth-child(5) { animation-delay: 0.2s; }
.dash-main > :nth-child(6) { animation-delay: 0.25s; }
@keyframes dash-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dash-card { transition: transform 0.25s ease, border-color 0.25s ease; }
.dash-card:hover { transform: translateY(-3px); border-color: #5a5247; }
.dash-bar { height: 6px; background: #2c2823; border-radius: 6px; overflow: hidden; margin-top: 14px; }
.dash-bar span { display: block; height: 100%; background: #e3c99b; border-radius: 6px; animation: dash-grow 1s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.3s; }
@keyframes dash-grow { from { width: 0 !important; } }
.dash-stats > div { transition: background 0.2s ease; }
.dash-stats > div:hover { background: #1b1815; }
@media (prefers-reduced-motion: reduce) {
  .dash-main > *, .dash-bar span { animation: none; }
}

/* Connected account chips with a picture */
.conn-chip, .socials a.chip { display: inline-flex; align-items: center; gap: 8px; }
.conn-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

/* Email verify card */
.dash-card input[type="email"], .dash-card input[type="text"] { flex: 1 1 200px; }
input[type="email"] { width: 100%; padding: 11px 13px; border-radius: 6px; border: 1px solid #35302a; background: #100e0c; color: #f3ece2; }

/* Minecraft head: the front of the head, cropped from the 64x64 skin */
.mc-head { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 8px; background-color: rgba(255,255,255,0.06); background-size: 512px 512px; background-position: -64px -64px; image-rendering: pixelated; }

/* Front page polish: preview column, mascot beside it, avatar */

/* Example profile on the front page */

/* Polish: editor tabs fade in when opened, smoother hover states */
.panel:not([hidden]) { animation: panel-in 0.35s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tab, .intro-opt, .btn { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; }
@media (prefers-reduced-motion: reduce) { .panel:not([hidden]) { animation: none; } }

/* ---------- GUI pass: main page and dashboard ---------- */

/* Dashboard: stronger hierarchy */
.dash-main { padding: 44px 52px 72px; max-width: 1120px; }
.dash-title { font-weight: 800; letter-spacing: -0.03em; font-size: clamp(2.2rem, 4.6vw, 3.2rem); }
.dash-eyebrow { color: #8f877a; }
.dash-card { border-color: #2a2622; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); padding: 24px; }
.dash-card h2 { font-family: 'Syne', system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 4px; }
.dash-url { font-family: 'Syne', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -0.02em; }
.dash-big { font-family: 'Syne', system-ui, sans-serif; font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; }
.dash-name { font-family: 'Syne', system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; }
.dash-uid { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.6rem; color: #e3c99b; font-weight: 600; }
.dash-stats { background: #100e0c; }
.dash-stats > div { padding: 20px 22px; }
.dash-hero { background: linear-gradient(180deg, #161411, #121110); }

/* Dashboard: sidebar */
.dash-nav { background: #0d0e0c; border-right-color: #2a2c25; }
.dash-logo { font-family: 'Syne', system-ui, sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 22px; }
.dash-nav a, .dash-link-btn { font-size: 0.93rem; padding: 9px 12px; }
.dash-nav a.active { color: #f3ece2; }

/* Buttons: clear focus and a little weight */
.btn { letter-spacing: 0.01em; }
.btn:focus-visible, .dash-nav a:focus-visible, .dash-link-btn:focus-visible { outline: 2px solid #e3c99b; outline-offset: 2px; }

/* Front page: calmer hero, tighter type */

@media (max-width: 860px) {
  .dash-main { padding: 26px 18px 48px; }
  .dash-card { padding: 18px; }
}

/* ---------- Editor panels: cleaner groups, fields and headings ---------- */
.ed-form { padding: 28px 28px 24px; border-radius: 10px; }
.panel { display: flex; flex-direction: column; gap: 0; }
.panel > h2 { font-family: 'Syne', system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; margin: 0 0 6px; color: #f3ece2; }
.panel > h2 + .muted { margin: 0 0 18px; max-width: 58ch; line-height: 1.5; }
.panel h2[style*="margin-top:22px"] { margin-top: 30px !important; padding-top: 22px; border-top: 1px solid #221f1b; }
.panel label { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; font-weight: 600; color: #b5ab9c; letter-spacing: 0.01em; margin: 16px 0 6px; display: block; }
.panel input[type="text"], .panel input[type="url"], .panel input[type="email"], .panel select, .panel textarea {
  min-height: 44px; border-radius: 8px; border: 1px solid #2f2a25; background: #0e0c0b; color: #f3ece2; padding: 10px 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.panel textarea { min-height: 96px; line-height: 1.5; }
.panel input:focus, .panel select:focus, .panel textarea:focus { outline: none; border-color: #e3c99b; box-shadow: 0 0 0 3px rgba(227,201,155,0.14); }
.panel input[type="color"] { width: 44px; height: 44px; border-radius: 8px; border: 1px solid #2f2a25; padding: 3px; background: #0e0c0b; cursor: pointer; }
.panel .row { gap: 10px; }
.panel .intro-grid { gap: 10px; }
.panel .intro-opt { border-radius: 8px; min-height: 44px; font-size: 0.88rem; }
.panel .btn.small { min-height: 34px; border-radius: 7px; padding: 6px 12px; }
.panel .link-item { background: #100e0c; border: 1px solid #221f1b; border-radius: 8px; padding: 10px; }
.panel .links-list { gap: 10px; }
.clock-setting, .panel .tb-card { border-radius: 8px; }
.ed-form .btn:focus-visible, .panel input:focus-visible { outline: 2px solid #e3c99b; outline-offset: 2px; }

/* ---------- Mobile pass: editor and profile ---------- */
@media (max-width: 640px) {
  .editor { padding: 0 0 96px; }
  .ed-head { margin: 4px 0 10px; }
  .ed-head h1 { font-size: 1.25rem; }
  .tabs { margin-left: -4px; margin-right: -4px; padding: 2px 4px 8px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .ed-form { padding: 20px 16px 18px; }
  .panel > h2 { font-size: 1.1rem; }
  .intro-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .box-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .savebar { padding: 10px 14px; }
  .savebar .btn { min-width: 110px; }
  .profile-wrap { max-width: 100%; }
  .volume { top: 8px; right: 8px; padding: 6px 10px; }
  .volume input[type="range"] { width: 84px; }
  .clock-time { font-size: 1.6rem; }
}

/* Loading frame: corners draw in around the area, a line sweeps through */
.scan-load { position: relative; width: min(320px, 80vw); height: 180px; margin: 24px auto; }
.scan-corner { position: absolute; width: 26px; height: 26px; border: 2px solid #f3ece2; animation: scan-corner 1.6s ease-in-out infinite alternate; }
.scan-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.scan-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.scan-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.scan-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.scan-corner.tr, .scan-corner.br { animation-delay: 0.2s; }
.scan-corner.bl, .scan-corner.br { animation-delay: 0.4s; }
@keyframes scan-corner {
  from { transform: translate(0, 0); opacity: 0.35; }
  to { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: 1; }
}
.scan-corner.tl { --dx: 8px; --dy: 8px; }
.scan-corner.tr { --dx: -8px; --dy: 8px; }
.scan-corner.bl { --dx: 8px; --dy: -8px; }
.scan-corner.br { --dx: -8px; --dy: -8px; }
.scan-line { position: absolute; left: 6px; right: 6px; height: 1px; top: 0; background: linear-gradient(90deg, transparent, #e3c99b, transparent); animation: scan-sweep 1.8s linear infinite; }
@keyframes scan-sweep { from { top: 6px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 6px); opacity: 0; } }
.scan-label { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: #8f877a; }
@media (prefers-reduced-motion: reduce) { .scan-corner, .scan-line { animation: none; } }

/* Scan frame intro: the frame sits around the card while it is revealed */
.profile-wrap { position: relative; }
.scan-frame { position: absolute; inset: -22px; pointer-events: none; z-index: 2; }
.scan-frame .scan-corner { position: absolute; width: 30px; height: 30px; border: 2px solid #f3ece2; animation: scan-draw 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.scan-frame .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.scan-frame .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.scan-frame .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.scan-frame .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.scan-frame .tr, .scan-frame .br { animation-delay: 0.12s; }
.scan-frame .bl, .scan-frame .br { animation-delay: 0.24s; }
.scan-frame .scan-line { position: absolute; left: 0; right: 0; height: 1px; top: 0; background: linear-gradient(90deg, transparent, #e3c99b, transparent); animation: scan-sweep 1.1s linear 0.2s both; }
@keyframes scan-draw { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: none; } }
.card.scan-reveal { animation: scan-reveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes scan-reveal { from { opacity: 0; filter: blur(6px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scan-frame .scan-corner, .scan-frame .scan-line, .card.scan-reveal { animation: none; } }

/* Scan intro: corner brackets around each element as it appears */
.el-frame { position: absolute; pointer-events: none; z-index: 3; }
.el-frame .scan-corner { position: absolute; width: 14px; height: 14px; border: 2px solid #f3ece2; animation: scan-draw 0.3s ease both; }
.el-frame .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.el-frame .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.el-frame .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.el-frame .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
@keyframes el-frame-out { to { opacity: 0; } }

/* Profile widgets: tiles with a tag, an icon, a large value and a pill */

/* Profile header image and share button */
.profile-header { display: block; width: calc(100% + 44px); max-width: none; height: 150px; margin: -28px -22px 0; object-fit: cover; border-radius: 22px 22px 0 0; }
.page-actions { position: fixed; top: 12px; left: 12px; z-index: 45; display: flex; gap: 8px; }
.page-action { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.page-action:hover { background: rgba(255,255,255,0.14); }

/* Profile cosmetics: original designs on top of the profile picture */
.avatar-stack { position: relative; width: 104px; margin: -70px auto 12px; }
.avatar-stack .avatar { margin: 0; }
.has-top-tb .avatar-stack { margin-top: 10px; }
.cos { position: absolute; left: 50%; transform: translateX(-50%); width: 170px; pointer-events: none; z-index: 2; }
.cos-svg { width: 100%; height: auto; overflow: visible; display: block; }
/* Toxin horns: glow that pulses, with drips */
.cos-toxin-horns { top: -58px; }
.cos-toxin-horns .cos-svg { filter: drop-shadow(0 0 10px rgba(150,255,80,0.55)); animation: tox-pulse 2.4s ease-in-out infinite; }
@keyframes tox-pulse { 50% { filter: drop-shadow(0 0 18px rgba(150,255,80,0.85)); } }
.drip { animation: drip-fall 2.2s ease-in infinite; }
.drip.d2 { animation-delay: 1.1s; }
@keyframes drip-fall { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
/* Ember halo: a ring that breathes */
.cos-ember-halo { top: -40px; width: 190px; }
.cos-ember-halo .halo { filter: drop-shadow(0 0 8px #ff9a3c); animation: halo-breathe 2s ease-in-out infinite; }
@keyframes halo-breathe { 50% { opacity: 0.55; } }
/* Frost crown: a slow shine */
.cos-frost-crown { top: -50px; }
.cos-frost-crown .frost { animation: frost-shine 3s ease-in-out infinite; }
@keyframes frost-shine { 50% { filter: brightness(1.35) drop-shadow(0 0 6px rgba(190,235,255,0.6)); } }
@media (prefers-reduced-motion: reduce) { .cos-svg, .drip, .halo, .frost { animation: none !important; } }

/* Cosmetics v2: positions and effects for the detailed artwork */
.cos { width: 200px; }
.cos-toxin-horns { top: -104px; }
.cos-ember-halo { top: -52px; width: 210px; }
.cos-frost-crown { top: -88px; width: 186px; }
.cos-toxin-horns .cos-svg { animation: tox-pulse 2.6s ease-in-out infinite; }
.bubble { animation: bubble-rise 2.8s ease-in infinite; }
.bubble.b2 { animation-delay: 1.4s; }
@keyframes bubble-rise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 0.9; } 100% { transform: translateY(-14px); opacity: 0; } }
.spark { animation: spark-twinkle 2.2s ease-in-out infinite; }
.spark.s2 { animation-delay: 0.7s; }
.spark.s3 { animation-delay: 1.4s; }
@keyframes spark-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.cos-frost-crown .frost { animation: frost-shine 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bubble, .spark { animation: none !important; } }

/* Cosmetics: smaller, sized to sit on the profile picture */
.cos-toxin-horns { width: 128px; top: -74px; }
.cos-ember-halo { width: 136px; top: -34px; }
.cos-frost-crown { width: 118px; top: -50px; }
@media (max-width: 480px) {
  .cos-toxin-horns { width: 112px; top: -66px; }
  .cos-ember-halo { width: 120px; top: -30px; }
  .cos-frost-crown { width: 104px; top: -44px; }
}

/* Layout fix: picture over the text on the left; widgets full width and tall enough for their content */
.avatar-stack { margin: -70px 0 12px 0 !important; }
.has-top-tb .avatar-stack { margin-top: -70px !important; }

/* Widgets: one clean row each (picture or icon, a small label over the main text, an action on the right) */
.widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.widgets > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd one out takes the full row */
.tile {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-width: 0; padding: 12px 14px; border-radius: 14px; color: inherit; text-decoration: none;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}
a.tile:hover, .tile:hover { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); }
a.tile:hover { transform: translateY(-1px); }
.tile-pic { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background-color: rgba(255, 255, 255, 0.06); }
.tile-pic.round { border-radius: 50%; }
.tile-icon { display: grid; place-items: center; color: var(--accent, #ffffff); }
.tile-icon svg { width: 22px; height: 22px; }
.tile-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-label {
  display: flex; align-items: center; gap: 6px;
  font: 500 0.62rem/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
}
.tile-ok { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #5865f2; color: #ffffff; }
.tile-ok svg { width: 9px; height: 9px; }
.tile-big {
  font: 700 1.02rem/1.25 var(--profile-font, 'DM Sans', system-ui, sans-serif); color: #f4f4f7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-sub { font-size: 0.76rem; color: rgba(255, 255, 255, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-time { grid-template-columns: 44px minmax(0, 1fr); }
.tile-time .tile-big { font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tile-go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: rgba(255, 255, 255, 0.55); transition: color 0.2s, background-color 0.2s; }
.tile-go svg { width: 16px; height: 16px; }
a.tile:hover .tile-go { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.tile-mc .mc-head { background-size: 352px 352px; background-position: -44px -44px; image-rendering: pixelated; }
.tile-pill {
  padding: 6px 12px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  font: 600 0.74rem/1 'DM Sans', system-ui, sans-serif; color: #f4f4f7;
  border: 1px solid rgba(255, 255, 255, 0.22); transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.tile-pill:hover { background: #f4f4f7; color: #0b0b10; border-color: #f4f4f7; }

/* Profile top: small italic bio in quotes, left-aligned; badges in the top-right corner of the card */
.profile-wrap .card .bio { text-align: left; font-size: 0.86rem; font-style: italic; color: #b9b0a2; line-height: 1.5; margin: 6px 0 16px; }
.profile-wrap .card .bio::before { content: '"'; }
.profile-wrap .card .bio::after { content: '"'; }
.profile-wrap .card .badges { position: absolute; top: 16px; right: 16px; z-index: 3; margin: 0; justify-content: flex-end; max-width: 60%; }
.profile-wrap .card .badge { width: 30px; height: 30px; border-radius: 8px; }
.profile-wrap .card .badge svg { width: 16px; height: 16px; }

/* Profile font: applied to the name, handle, bio and links */
.profile-wrap .display-name, .profile-wrap .username, .profile-wrap .bio, .profile-wrap .link-btn { font-family: var(--profile-font, 'DM Sans', system-ui, sans-serif); }
/* Cursor effects */
.cursor-fx, .cursor-fx * { cursor: none !important; }
.cur-dot { position: fixed; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #f3ece2; mix-blend-mode: difference; pointer-events: none; z-index: 9999; }
.cur-ring { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(243,236,226,0.75); border-radius: 50%; pointer-events: none; z-index: 9998; }
.cur-trail { position: fixed; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #e3c99b; pointer-events: none; z-index: 9998; }

/* Sign-up: the email code step */
.code-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.text-btn {
  padding: 0; border: 0; background: none; color: #e3c99b; cursor: pointer;
  font: inherit; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px;
}
.text-btn:hover { color: #f3ece2; }
.text-btn:disabled { color: #6f6d62; text-decoration: none; cursor: default; }
/* Code entry: six boxes over one invisible input (see otpBox in lantern-app.js) */
.otp { position: relative; margin: 2px 0 4px; }
.otp-input {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; opacity: 0; font-size: 16px; cursor: text;
}
.otp-cells { display: flex; justify-content: center; gap: 8px; }
.otp-cell {
  position: relative; display: grid; place-items: center; flex: 1 1 0; min-width: 0; max-width: 52px; height: 60px;
  background: #100e0c; border: 1px solid #35302a; border-radius: 10px;
  font: 600 1.6rem/1 'JetBrains Mono', ui-monospace, monospace; color: #f3ece2;
  transition: border-color 0.18s, background-color 0.18s, box-shadow 0.18s, color 0.18s;
}
.otp-cell:nth-child(4) { margin-left: 10px; } /* a small gap in the middle: 123 456 */
.otp-cell.filled { border-color: #6b5f4c; background: #17140f; }
.otp-cell.active { border-color: #e3c99b; box-shadow: 0 0 0 3px rgba(227, 201, 155, 0.16); }
.otp-cell.active::after { content: ''; width: 2px; height: 26px; border-radius: 1px; background: #e3c99b; animation: otp-blink 1s steps(1) infinite; }
.otp-cell.pop { animation: otp-pop 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) var(--d, 0ms) both; }
@keyframes otp-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes otp-pop {
  0% { transform: translateY(8px) scale(0.7); }
  60% { transform: translateY(-2px) scale(1.08); }
  100% { transform: none; }
}

/* Checking: a ripple runs across the boxes */
.otp.is-checking .otp-cell { border-color: #e3c99b; animation: otp-wave 0.9s ease-in-out infinite; }
.otp.is-checking .otp-cell:nth-child(2) { animation-delay: 0.08s; }
.otp.is-checking .otp-cell:nth-child(3) { animation-delay: 0.16s; }
.otp.is-checking .otp-cell:nth-child(4) { animation-delay: 0.24s; }
.otp.is-checking .otp-cell:nth-child(5) { animation-delay: 0.32s; }
.otp.is-checking .otp-cell:nth-child(6) { animation-delay: 0.4s; }
@keyframes otp-wave {
  0%, 100% { transform: none; }
  30% { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(227, 201, 155, 0.2); }
}

/* Right: the boxes turn green one after another, each with a small bounce */
.otp.is-ok .otp-cell {
  border-color: #4ade80; background: rgba(74, 222, 128, 0.1); color: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.12);
  animation: otp-ok 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.otp.is-ok .otp-cell:nth-child(2) { transition-delay: 0.05s; animation-delay: 0.05s; }
.otp.is-ok .otp-cell:nth-child(3) { transition-delay: 0.1s; animation-delay: 0.1s; }
.otp.is-ok .otp-cell:nth-child(4) { transition-delay: 0.15s; animation-delay: 0.15s; }
.otp.is-ok .otp-cell:nth-child(5) { transition-delay: 0.2s; animation-delay: 0.2s; }
.otp.is-ok .otp-cell:nth-child(6) { transition-delay: 0.25s; animation-delay: 0.25s; }
@keyframes otp-ok { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Wrong: the row shakes red, then clears */
.otp.is-bad .otp-cells { animation: otp-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.otp.is-bad .otp-cell { border-color: #ff5c7a; background: rgba(255, 92, 122, 0.08); color: #ff8aa0; }
@keyframes otp-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
@media (max-width: 400px) { .otp-cell { height: 54px; font-size: 1.4rem; } .otp-cells { gap: 6px; } }
@media (prefers-reduced-motion: reduce) {
  .otp-cell, .otp-cells, .otp-cell.active::after { animation: none !important; }
  .otp-cell { transition: none; }
}


/* Settings page (inside the dashboard layout) */
.set-list { display: grid; margin: 14px 0 0; }
.set-list > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #2a2c25; }
.set-list dt { font: 500 0.7rem/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #8f8b7e; }
.set-list dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #ece8dc; word-break: break-all; }
.set-pill { padding: 3px 9px; border: 1px solid #494c42; border-radius: 999px; font: 600 0.68rem/1.2 'DM Sans', system-ui, sans-serif; color: #a7a396; word-break: normal; }
.set-pill.ok { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.08); }
.set-panel { max-width: 580px; margin-top: 16px; padding: 16px; background: #111210; border: 1px solid #2a2c25; border-radius: 6px; }
.set-panel [data-part] > label:first-child, .set-panel > label:first-child { margin-top: 0; }
.set-panel .row { margin-top: 14px; }
.set-panel p { margin: 0 0 8px; }
.set-status {
  display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 14px; padding: 6px 12px;
  border: 1px solid #494c42; border-radius: 999px; font: 600 0.82rem/1.2 'DM Sans', system-ui, sans-serif; color: #a7a396;
}
.set-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #6f6d62; }
.set-status.on { color: #ece8dc; border-color: rgba(74, 222, 128, 0.45); }
.set-status.on::before { background: #4ade80; }
.set-note { margin: 0; font-size: 0.9rem; color: #e3c99b; }
.set-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.set-option {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; text-align: left; cursor: pointer;
  background: #151613; border: 1px solid #35382f; border-radius: 6px; color: #ece8dc; font: inherit;
  transition: border-color 0.15s;
}
.set-option:hover, .set-option:focus-visible { border-color: #e3c99b; outline: none; }
.set-option b { font-family: 'Syne', system-ui, sans-serif; font-size: 1.05rem; font-weight: 700; }
.set-option span { font-size: 0.85rem; line-height: 1.45; color: #a7a396; }
.set-qr-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.set-qr { width: 180px; height: 180px; padding: 8px; background: #ffffff; border-radius: 6px; }
.set-qr svg { display: block; width: 100%; height: 100%; }
.set-key {
  display: block; margin: 6px 0 14px; padding: 10px 12px; background: #0d0e0c; border: 1px solid #2a2c25; border-radius: 6px;
  font: 600 0.9rem/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; color: #ece8dc; word-break: break-all; user-select: all;
}
.set-main .set-code { max-width: 220px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.3rem; letter-spacing: 0.35em; text-align: center; }
@media (max-width: 640px) {
  .set-list > div { grid-template-columns: minmax(0, 1fr) auto; }
  .set-list dt { grid-column: 1 / -1; }
  .set-qr-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   EDITOR (body.is-editor): top bar, a tab rail on the left, the form in the middle,
   and a live preview on the right that shows the real profile at phone size.
   Colors follow the dashboard: #111210 base, #0d0e0c rails, #2a2c25 hairlines, #e3c99b gold.
   ========================================================================== */
body.is-editor .app { padding: 0; align-items: stretch; }
.ed2 { display: flex; flex-direction: column; min-height: 100vh; background: #111210; color: #ece8dc; }

/* Top bar */
.ed2-top {
  position: sticky; top: 0; z-index: 30; height: 60px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(17, 18, 16, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #2a2c25;
}
.ed2-top-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ed2-back {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: #a7a396; text-decoration: none;
  font: 500 0.72rem/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase;
}
.ed2-back::before { content: '←'; }
.ed2-back:hover { color: #ece8dc; }
.ed2-addr {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 10px;
  background: #0d0e0c; border: 1px solid #2a2c25; border-radius: 4px;
  font: 500 0.8rem/1 'JetBrains Mono', ui-monospace, monospace; color: #ece8dc;
}
.ed2-top-right { display: flex; flex-shrink: 0; gap: 8px; }

/* Three columns: tabs, form, preview */
.ed2-body { flex: 1; display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(340px, 440px); align-items: start; }
.ed2-nav {
  position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 18px 12px;
  background: #0d0e0c; border-right: 1px solid #2a2c25;
}
.ed2 .ed2-tab {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: none;
  color: #a7a396; text-align: left; cursor: pointer;
  font: 500 0.92rem/1.2 'DM Sans', system-ui, sans-serif;
  transition: background-color 0.15s, color 0.15s;
}
.ed2 .ed2-tab:hover { background: #171815; color: #ece8dc; }
.ed2 .ed2-tab.active { background: #1b1d18; color: #ece8dc; box-shadow: inset 2px 0 0 #e3c99b; }
.ed2 .ed2-tab:focus-visible { outline: 2px solid #e3c99b; outline-offset: -2px; }

/* Form column */
.ed2-form { min-width: 0; max-width: 720px; padding: 32px clamp(20px, 3vw, 44px) 120px; }
.ed2 .ed2-head { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid #2a2c25; }
.ed2 .ed2-head h1 {
  margin: 0; font-family: 'Syne', system-ui, sans-serif; font-weight: 700; font-size: 1.9rem;
  line-height: 1.1; letter-spacing: -0.01em; color: #ece8dc;
}
.ed2 .ed2-head p { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.5; color: #a7a396; }
.ed2 .ed2-sub {
  margin: 28px 0 10px; font: 500 0.7rem/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.16em; text-transform: uppercase; color: #8f8b7e;
}
.ed2-field { margin: 0 0 18px; }
.ed2 .ed2-field label { margin: 0 0 6px; }
.ed2 .ed2-hint { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.45; color: #8f8b7e; }
.ed2-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.ed2 .ed2-row .ed2-hint { margin: 0; }

/* Option buttons: one is picked at a time */
.ed2-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ed2 .ed2-choice {
  padding: 9px 14px; border: 1px solid #35382f; border-radius: 6px; background: #171815; color: #d8d3c5; cursor: pointer;
  font: 500 0.88rem/1.2 'DM Sans', system-ui, sans-serif;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.ed2 .ed2-choice:hover { border-color: #55594c; color: #ece8dc; }
.ed2 .ed2-choice.on { background: #ece8dc; border-color: #ece8dc; color: #111210; }
.ed2 .ed2-choice:focus-visible, .ed2 .ed2-swatch:focus-visible { outline: 2px solid #e3c99b; outline-offset: 2px; }

/* Photo, header, colors */
.ed2-photo { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.ed2-avatar { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 1px solid #35382f; }
.ed2-header {
  height: 120px; margin: 0 0 12px; border: 1px dashed #35382f; border-radius: 6px;
  background: #171815 center / cover no-repeat;
}
.ed2 .ed2-color { width: 56px; height: 36px; padding: 0; border: 1px solid #35382f; border-radius: 6px; background: none; cursor: pointer; }

/* Card style swatches use the real card style classes (tb-box-*), so each one looks like the style it picks.
   :where() keeps these fallbacks weaker than the card styles' own borders and corners. */
.ed2-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 0 0 18px; }
:where(.ed2-swatch) { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; }
.ed2 .ed2-swatch {
  min-height: 64px; padding: 10px; color: #fff; cursor: pointer; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  font: 600 0.8rem/1.2 'DM Sans', system-ui, sans-serif;
}
.ed2 .ed2-swatch.on { outline: 2px solid #e3c99b; outline-offset: 3px; }

/* Widgets */
.ed2-check { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 0.95rem; color: #ece8dc; cursor: pointer; }
.ed2-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.ed2 .ed2-badge {
  gap: 8px; min-width: 0; padding: 8px 12px 8px 10px; border: 1px solid #35382f; border-radius: 6px;
  background: #171815; color: #8f8b7e; cursor: pointer; font: 500 0.85rem/1 'DM Sans', system-ui, sans-serif;
}
.ed2 .ed2-badge svg { width: 18px; height: 18px; }
.ed2 .ed2-badge.on {
  color: var(--badge); border-color: color-mix(in srgb, var(--badge) 60%, transparent);
  background: color-mix(in srgb, var(--badge) 14%, #171815);
}
.ed2 .ed2-badge.on span { color: #ece8dc; }
.ed2 .ed2-badge::after { display: none; }
.ed2 .ed2-badge.locked { opacity: 0.35; cursor: not-allowed; }

/* Links and accounts */
.ed2-links { display: grid; gap: 10px; margin: 0 0 14px; }
.ed2-link { display: grid; gap: 10px; padding: 12px; background: #151613; border: 1px solid #2a2c25; border-radius: 6px; }
.ed2-link-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.ed2-link-actions { display: flex; justify-content: flex-end; gap: 6px; }
.ed2-accounts { display: grid; gap: 10px; }
.ed2-account {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
  background: #151613; border: 1px solid #2a2c25; border-radius: 6px;
}
.ed2-account strong { font-size: 1rem; color: #ece8dc; }
.ed2 .ed2-account .ed2-hint { margin-top: 2px; }

/* Live preview: the profile renders at phone size (390 x 780) and lantern-app.js scales it (--s) to fit. */
.ed2-preview {
  position: sticky; top: 60px; height: calc(100vh - 60px);
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 20px 24px;
  background: #0d0e0c; border-left: 1px solid #2a2c25;
}
.ed2-preview-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  font: 500 0.7rem/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: #8f8b7e;
}
.ed2-phone {
  position: relative; flex: 0 0 auto; width: 390px; height: 780px; margin-top: 10px; overflow: hidden;
  border-radius: 26px; background: #0b0b10;
  box-shadow: 0 0 0 1px #35382f, 0 0 0 9px #161713, 0 0 0 10px #2a2c25, 0 30px 70px rgba(0, 0, 0, 0.5);
}
.ed2-phone iframe {
  display: block; width: 390px; height: 780px; border: 0;
  transform: scale(var(--s, 1)); transform-origin: 0 0;
}
body.is-editor .ed2 .savebar { background: rgba(13, 14, 12, 0.96); border-top-color: #2a2c25; }

/* Narrow screens: tabs become a scrolling row under the top bar, and the preview moves below the form. */
@media (max-width: 1180px) {
  .ed2-body { grid-template-columns: 172px minmax(0, 1fr) minmax(300px, 380px); }
}
@media (max-width: 960px) {
  .ed2-body { grid-template-columns: minmax(0, 1fr); }
  .ed2-nav {
    position: sticky; top: 60px; z-index: 20; height: auto; flex-direction: row; overflow-x: auto;
    padding: 10px 12px; border-right: 0; border-bottom: 1px solid #2a2c25; scrollbar-width: none;
  }
  .ed2-nav::-webkit-scrollbar { display: none; }
  .ed2 .ed2-tab { flex: 0 0 auto; width: auto; white-space: nowrap; }
  .ed2 .ed2-tab.active { box-shadow: inset 0 -2px 0 #e3c99b; }
  .ed2-form { max-width: none; padding: 24px 16px 40px; }
  .ed2-preview { position: static; height: auto; padding-bottom: 110px; border-left: 0; border-top: 1px solid #2a2c25; }
}
@media (max-width: 560px) {
  .ed2-top { padding: 0 12px; }
  .ed2-addr { display: none; }
  .ed2-link-fields { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FRONT PAGE (body.is-landing): a camera that rides along a chain
   The 3D scene (canvas.cl-gl) is fixed behind everything. .cl-track makes the page
   tall enough to scroll, and lantern-app.js fades the fixed .cl-panel blocks in and out.
   Type: Archivo at its widest (headlines), DM Sans (body), JetBrains Mono (labels).
   ========================================================================== */
body.is-landing { background: #111210; color: #ece8dc; }
body.is-landing .app { padding: 0; align-items: stretch; }
.cl {
  --ink: #ece8dc;
  --ink-2: rgba(236, 232, 220, 0.64);
  --line: rgba(255, 255, 255, 0.16);
  --red: #e3c27a;
  --cyan: #f0d9a4;
  --cl-logo-ink: #ece8dc;
  --wide: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  position: relative;
  width: 100%;
  color: var(--ink);
  font-family: var(--sans);
}
.cl.cl-light { --ink: #111210; --ink-2: rgba(17, 18, 16, 0.62); --line: rgba(17, 18, 16, 0.16); }
.cl-bg { position: fixed; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--cl-top, #efebe1), var(--cl-bot, #d6cebd)); }
.cl-gl { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease; }
.cl-gl.on { opacity: 1; }
.cl-track { position: relative; height: 1000vh; pointer-events: none; }

/* Nav */
.cl-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 3vw, 36px);
}
.cl-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; transition: color 0.4s; }
.cl-logo svg { width: 30px; height: 30px; color: #111210; }
.cl-light .cl-logo svg { color: #111210; }
.cl:not(.cl-light) .cl-logo svg { color: #ece8dc; --cl-logo-ink: #111210; }
.cl-logo span { font: 800 1.05rem/1 var(--wide); font-stretch: 125%; letter-spacing: -0.01em; }
.cl-nav nav { display: flex; align-items: center; gap: 20px; }
.cl-navlink { color: var(--ink); font: 600 0.85rem/1 var(--sans); text-decoration: none; opacity: 0.8; transition: color 0.4s, opacity 0.2s; }
.cl-navlink:hover { opacity: 1; }
.cl-pill {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
  background: var(--red); color: #111210; font: 700 0.8rem/1 var(--sans); text-decoration: none;
  box-shadow: 0 6px 20px rgba(227, 194, 122, 0.35); transition: transform 0.2s, box-shadow 0.2s;
}
.cl-pill:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(227, 194, 122, 0.5); }

/* Panels */
.cl-panel { position: fixed; z-index: 4; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.cl-panel.on { visibility: visible; }
.cl-eyebrow { margin: 0 0 14px; font: 600 0.7rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }

.cl-hero { left: clamp(16px, 5vw, 72px); top: 27vh; max-width: 30rem; }
.cl-h1 { margin: 0; font: 800 clamp(1.7rem, 2.7vw, 2.55rem)/1.02 var(--wide); font-stretch: 125%; letter-spacing: -0.015em; text-transform: uppercase; color: var(--ink); }
/* Intro: lines slide up out of a mask, the rest fades in after the 3D lands */
.cl-h1 .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.cl-h1 .ln > span { display: block; animation: cl-up 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.5s both; }
.cl-h1 .ln + .ln > span { animation-delay: 1.64s; }
.cl-hero .cl-eyebrow { animation: cl-fade 0.8s ease 1.3s both; }
.cl-hero .cl-row { animation: cl-fade 0.8s ease 2s both; }
.cl-stat-n, .cl-stat p { animation: cl-fade 0.9s ease 1.8s both; }
.cl-nav { animation: cl-drop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; }
@keyframes cl-up { from { transform: translateY(108%); } }
@keyframes cl-fade { from { opacity: 0; transform: translateY(10px); } }
@keyframes cl-drop { from { opacity: 0; transform: translateY(-14px); } }
.cl-cue {
  display: flex; align-items: center; gap: 10px; margin: 30px 0 0; animation: cl-fade 0.8s ease 2.6s both;
  font: 600 0.66rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.cl-cue i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: cl-blink 1.4s ease-in-out infinite; }
@keyframes cl-blink { 50% { transform: translateY(3px); opacity: 0.35; } }

.cl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 24px; }
.cl-btn {
  display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 7px 0 20px; border: 0; border-radius: 999px;
  background: #111210; color: #fff; font: 700 0.86rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cl-btn i { width: 30px; height: 30px; border-radius: 50%; background: #fff; transition: transform 0.25s; }
.cl-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }
.cl-btn:hover i { transform: translateX(3px); }
.cl-ghost { color: var(--ink); font: 600 0.86rem/1 var(--sans); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.cl-stat {
  right: clamp(16px, 5vw, 72px); top: 48vh; width: 16.5rem; padding: 18px 20px 20px; border-radius: 16px;
  background: rgba(239, 235, 225, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 18px 40px rgba(17, 18, 16, 0.12);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.cl-stat-n { display: flex; gap: 12px; font: 800 2.7rem/1 var(--wide); font-stretch: 125%; letter-spacing: -0.02em; color: var(--ink); }
.cl-stat-n b:last-child { color: #a8812f; }
.cl-stat p { margin: 12px 0 0; font: 500 0.88rem/1.45 var(--sans); color: var(--ink-2); }

.cl-what { left: clamp(16px, 5vw, 72px); bottom: 11vh; width: min(31rem, calc(100vw - 32px)); }
.cl-list { list-style: none; margin: 0; padding: 0; counter-reset: cl; }
.cl-list li { counter-increment: cl; padding: 11px 0; border-top: 1px solid var(--line); opacity: 0.36; transition: opacity 0.35s; }
.cl-list li::before { content: '0' counter(cl); display: inline-block; width: 34px; font: 600 0.7rem/1 var(--mono); color: var(--cyan); vertical-align: 4px; }
.cl-list b { font: 800 clamp(1.05rem, 1.7vw, 1.45rem)/1.1 var(--wide); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; }
.cl-list p { max-height: 0; margin: 0; padding-left: 34px; overflow: hidden; font: 500 0.92rem/1.45 var(--sans); color: var(--ink-2); transition: max-height 0.45s, margin 0.45s; }
.cl-list li.on { opacity: 1; }
.cl-list li.on p { max-height: 4.5em; margin-top: 6px; }

.cl-made { inset: 13vh clamp(16px, 5vw, 72px) 9vh; pointer-events: none; }
.cl-big {
  margin: 0; font: 900 clamp(3rem, 9vw, 8.6rem)/0.86 var(--wide); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.04); -webkit-text-stroke: 1.5px #fff; text-shadow: 0 0 34px rgba(240, 217, 164, 0.28);
}
.cl-caption { position: absolute; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 14px; margin: 0; font: 700 clamp(1rem, 1.6vw, 1.3rem)/1.2 var(--sans); }
.cl-count { font: 600 0.75rem/1 var(--mono); color: var(--cyan); letter-spacing: 0.1em; }

.cl-end { left: clamp(16px, 6vw, 96px); top: 27vh; max-width: 34rem; }
.cl-h2 {
  margin: 0; max-width: 12ch; font: 900 clamp(2.1rem, 4.6vw, 4.2rem)/0.95 var(--wide); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--cyan); text-shadow: 0 0 26px rgba(240, 217, 164, 0.45);
}
.cl-claim {
  display: flex; align-items: center; max-width: 27rem; height: 54px; margin-top: 30px; padding: 0 6px 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cl-claim:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(240, 217, 164, 0.2); }
.cl-claim-pre { font: 500 0.88rem/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.cl-claim input { flex: 1; min-width: 0; height: 100%; padding: 0 6px 0 2px; border: 0; outline: 0; background: none; color: #fff; font: 600 0.95rem/1 var(--mono); }
.cl-claim .cl-btn { height: 42px; flex-shrink: 0; }
.cl-claim .cl-btn i { background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.cl-fine { margin: 12px 0 0; font: 500 0.82rem/1.4 var(--sans); color: var(--ink-2); }
.cl-foot { display: flex; gap: 22px; margin-top: 34px; font: 500 0.7rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.cl-foot a { color: var(--ink); text-decoration: none; opacity: 0.75; }
.cl-foot a:hover { opacity: 1; }

.cl-progress { position: fixed; left: 50%; bottom: 18px; z-index: 5; width: 120px; height: 2px; transform: translateX(-50%); background: var(--line); }
.cl-progress i { display: block; width: calc(var(--p, 0) * 100%); height: 100%; background: var(--ink); }

.cl a:focus-visible, .cl button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Phones: text above, the scene below it */
@media (max-width: 760px) {
  .cl-navlink { display: none; }
  .cl-hero { top: 84px; right: 16px; max-width: none; }
  .cl-stat, .cl-cue { display: none; }
  .cl-what { bottom: 7vh; }
  .cl-list b { font-size: 1rem; }
  .cl-made { inset: 90px 16px 8vh; }
  .cl-big { font-size: 16vw; }
  .cl-end { top: 84px; right: 16px; }
  .cl-h2 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .cl-claim { margin-top: 20px; }
  .cl-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-h1 .ln > span, .cl-hero .cl-eyebrow, .cl-hero .cl-row, .cl-stat-n, .cl-stat p, .cl-nav, .cl-cue, .cl-cue i { animation: none; }
  .cl-gl, .cl-list li, .cl-list p { transition: none; }
}

/* Compact widgets: two to a row */
.tile { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 10px 10px 10px 11px; border-radius: 12px; }
.tile-time { grid-template-columns: 34px minmax(0, 1fr); }
.tile-pic { width: 34px; height: 34px; border-radius: 8px; }
.tile-icon svg { width: 18px; height: 18px; }
.tile-label { font-size: 0.56rem; gap: 5px; letter-spacing: 0.12em; }
.tile-big { font-size: 0.9rem; }
.tile-time .tile-big { font-size: 1.1rem; }
.tile-sub { font-size: 0.7rem; }
.tile-ok { width: 12px; height: 12px; }
.tile-ok svg { width: 8px; height: 8px; }
.tile-go { width: 26px; height: 26px; color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.tile-go svg { width: 14px; height: 14px; }
.tile-mc .tile-go:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.tile-mc .mc-head { background-size: 272px 272px; background-position: -34px -34px; }
.tile-label { white-space: nowrap; }
@media (max-width: 420px) {
  /* On phones the half-width widgets drop the extras so the names fit: the whole Discord widget is the link anyway. */
  .tile-discord { grid-template-columns: 34px minmax(0, 1fr); }
  .tile-discord .tile-go { display: none; }
  .tile { gap: 9px; padding: 10px; }
}

/* Local time: a little watch face whose hands show the time there (the second hand ticks) */
.tile-face { display: block; border-radius: 50%; background: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tile-face svg { display: block; width: 100%; height: 100%; stroke-linecap: round; }
.tile-face .dial { fill: url(#clockDial); stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.tile-face .mk { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.tile-face .mk.big { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.6; }
.tile-face .hand-h { stroke: #f4f4f7; stroke-width: 2.8; }
.tile-face .hand-m { stroke: var(--accent, #ffffff); stroke-width: 1.9; }
.tile-face .hand-s { stroke: #ff5c7a; stroke-width: 0.9; }
.tile-face .hub { fill: #f4f4f7; }
.tile-face .hub-in { fill: #ff5c7a; }
.tile-time .tile-big small { margin-left: 3px; font-size: 0.62em; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.6); }
.tile-label { overflow: hidden; text-overflow: ellipsis; } /* long country names end in ... instead of spilling out */
@media (max-width: 420px) {
  .tile-label { letter-spacing: 0.06em; }
  .tile-time .tz { display: none; } /* phones: just the date under the time */
}

/* More widgets: status (full width, above the others), Spotify, Roblox, GitHub, countdown */
.tile-status { margin: 0 0 8px; grid-template-columns: 34px minmax(0, 1fr); }
.tile-dot { display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.06); }
.tile-dot i { width: 11px; height: 11px; border-radius: 50%; background: #3ba55c; box-shadow: 0 0 0 0 rgba(59, 165, 92, 0.55); animation: tile-dot 2.4s ease-out infinite; }
.mood-idle .tile-dot i { background: #f0b232; box-shadow: 0 0 0 0 rgba(240, 178, 50, 0.55); }
.mood-busy .tile-dot i { background: #f23f43; box-shadow: 0 0 0 0 rgba(242, 63, 67, 0.55); }
@keyframes tile-dot { 70% { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }
.tile-wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile-spot { background: #1db954; color: #0b0b10; }
.tile-spot svg { width: 20px; height: 20px; }
.tile-ok.spot { background: #1db954; color: #0b0b10; }
.tile-rbx-pic { background: rgba(255, 255, 255, 0.08) center / cover no-repeat; }
.tile-cd .tile-big { font-variant-numeric: tabular-nums; }
.ed2 input[type="datetime-local"] {
  width: 100%; padding: 11px 13px; border-radius: 6px; border: 1px solid #35302a; background: #100e0c; color: #f3ece2; color-scheme: dark; font: inherit;
}
@media (prefers-reduced-motion: reduce) { .tile-dot i { animation: none; } }

/* Official service logos: beside the widget label, and as the picture when there is no photo */
.tile-brand { display: inline-grid; place-items: center; width: 12px; height: 12px; margin-right: 1px; }
.tile-brand svg { width: 12px; height: 12px; }
.b-spotify { color: #1db954; }
.b-roblox, .b-github { color: #f4f4f7; }
.tile-brand-pic { display: grid; place-items: center; }
.tile-brand-pic svg { width: 100%; height: 100%; }
.tile-spot { background: #0b0b10; color: #1db954; }
.tile-rbx-pic { display: grid; place-items: center; color: #f4f4f7; }
.tile-rbx-pic svg { width: 20px; height: 20px; }
.tile-rbx-pic.has-photo svg { display: none; }

/* The "click to enter" screen: darkness and blur come from the profile (--enter-dim, --enter-blur) */
.intro-overlay {
  background: rgba(0, 0, 0, var(--enter-dim, 0.55));
  backdrop-filter: blur(var(--enter-blur, 6px)); -webkit-backdrop-filter: blur(var(--enter-blur, 6px));
}
.enter-title { font: 700 1.4rem/1.2 var(--profile-font, 'DM Sans', system-ui, sans-serif); color: #ffffff; text-align: center; padding: 0 20px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.enter-av { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); }
.intro-overlay .enter-btn { transition: transform 0.15s, background-color 0.2s, border-color 0.2s, color 0.2s; }
.intro-overlay .enter-btn:hover { transform: translateY(-1px) scale(1.03); }
.enter-outline .enter-btn { background: transparent; color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.85); box-shadow: none; }
.enter-outline .enter-btn:hover { background: rgba(255, 255, 255, 0.12); }
.enter-glass .enter-btn {
  background: rgba(255, 255, 255, 0.12); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.enter-glass .enter-btn:hover { background: rgba(255, 255, 255, 0.2); }
.enter-text .enter-btn {
  background: none; border: 0; box-shadow: none; padding: 8px 12px; color: rgba(255, 255, 255, 0.85);
  font: 500 0.95rem/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.22em; text-transform: lowercase;
  animation: pulse 2.2s ease-in-out infinite;
}
.enter-text .enter-btn:hover { background: none; color: #ffffff; }
.ed2-range { width: 100%; accent-color: #e3c99b; cursor: pointer; }
.ed2-val { float: right; font-family: 'JetBrains Mono', ui-monospace, monospace; color: #e3c99b; }
.ed2 .ed2-label-plain { display: block; margin: 0 0 8px; }

/* Community templates */
.tpl-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px; margin-top: 12px; }
.tpl-bar { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 12px; }
.tpl-sort { display: inline-flex; padding: 3px; gap: 3px; background: #100e0c; border: 1px solid #35302a; border-radius: 8px; }
.tpl-sort button { padding: 7px 14px; border: 0; border-radius: 6px; background: none; color: #a39a8c; font: 600 0.85rem/1 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.tpl-sort button.on { background: #f3ece2; color: #111210; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tpl-card { display: flex; flex-direction: column; overflow: hidden; background: #151310; border: 1px solid #2c2823; border-radius: 10px; transition: border-color 0.2s, transform 0.2s; }
.tpl-card:hover { border-color: #4a433b; transform: translateY(-2px); }
.tpl-thumb { position: relative; display: grid; place-items: center; height: 170px; overflow: hidden; }
.tpl-mini { width: 62%; max-width: 150px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.tpl-av { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
.tpl-mini b { font-size: 1rem; color: #f4f4f7; }
.tpl-mini i { display: block; width: 100%; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.tpl-tag { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #ece8dc; font: 500 0.62rem/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.tpl-info { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 4px; }
.tpl-info b { font-family: 'Syne', system-ui, sans-serif; font-size: 1.05rem; color: #f3ece2; }
.tpl-info span { font-size: 0.8rem; color: #8f8b7e; }
.tpl-info p { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.45; color: #b9b0a2; }
.tpl-actions { display: flex; gap: 8px; margin-top: auto; padding: 12px 14px 14px; }
@media (max-width: 640px) { .tpl-form { grid-template-columns: 1fr; } }
/* Template previews: the card style classes alone, so the dashboard's own card look cannot cover them */
:where(.tpl-mini) { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: rgba(14, 14, 20, 0.6); } /* :where keeps this weaker than every card style */
/* Landing: the chain canvas sits behind the content, fixed to the screen */