/* Frutiger Aero components: gel buttons, glossy orbs, capsules, frames,
   name styles, stationery and wax seals. */

/* Gel buttons ------------------------------------------------------------- */
.btn {
  --b: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.64em 1.3em;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 49%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--b) 72%, white), var(--b) 55%, color-mix(in srgb, var(--b) 78%, black));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px color-mix(in srgb, var(--b) 55%, black),
    inset 0 -3px 8px color-mix(in srgb, var(--b) 40%, white),
    0 4px 14px -3px color-mix(in srgb, var(--b) 70%, transparent),
    0 1px 2px rgba(0, 20, 50, 0.2);
  transition: transform 0.35s var(--spring), filter 0.2s, box-shadow 0.2s;
  isolation: isolate;
}
.btn::after {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 1px;
  height: 45%;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.6), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.btn:hover { filter: brightness(1.07) saturate(1.08); transform: translateY(-1px); }
.btn:active { transform: scale(0.94); }
.btn:disabled, .btn.disabled { filter: grayscale(0.6) opacity(0.6); cursor: not-allowed; transform: none; }
.btn .ic { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.btn.sm { padding: 0.45em 0.95em; font-size: 0.88rem; }
.btn.lg { padding: 0.85em 1.8em; font-size: 1.08rem; }
.btn.block { width: 100%; }
.btn.round { width: 2.6em; height: 2.6em; padding: 0; }
.btn.lime { --b: #3fb62f; }
.btn.sunny { --b: #ff9a1f; }
.btn.pink { --b: #ff4f9a; }
.btn.violet { --b: #8a5be0; }
.btn.teal { --b: #00a9bd; }
.btn.danger { --b: #e2405a; }
.btn.rose { --b: #e2407a; }
.btn.silver {
  --b: #aab8c8;
  color: #1b3350;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.btn.aurora {
  --b: #2fd6a8;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 49%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(110deg, #22d3a6, #3aa0ff 45%, #9b6bff 75%, #ff6fd8);
  background-size: 100% 100%, 220% 100%;
  animation: aurora-slide 6s linear infinite alternate;
}
@keyframes aurora-slide { to { background-position: 0 0, 100% 0; } }

.btn.ghost {
  color: var(--ink);
  text-shadow: var(--emboss);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 51%, rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(var(--ink-rgb), 0.12), 0 2px 8px -2px rgba(0, 30, 60, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
[data-ink='light'] .btn.ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.02) 51%, rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
}
.btn.ghost::after { opacity: 0.5; }

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.3s var(--spring), background 0.2s;
}
.icon-btn:hover { background: rgba(var(--ink-rgb), 0.08); transform: scale(1.08); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn.on { color: var(--accent); background: rgba(var(--accent-rgb), 0.14); }

/* Orbs: glossy spheres that hold an icon ----------------------------------- */
.orb {
  --o: var(--accent);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--o) 30%, white) 0%, transparent 55%),
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--o) 70%, white), var(--o) 58%, color-mix(in srgb, var(--o) 70%, black) 100%);
  box-shadow:
    inset 0 -4px 8px color-mix(in srgb, var(--o) 55%, black),
    inset 0 0 0 1px color-mix(in srgb, var(--o) 50%, black),
    0 4px 12px -3px color-mix(in srgb, var(--o) 65%, transparent);
  transition: transform 0.45s var(--spring);
}
.orb::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 16%;
  right: 16%;
  height: 46%;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.08));
  pointer-events: none;
}
.orb > .ic, .orb > .orb-glyph { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.orb-glyph { font-size: 1.35em; line-height: 1; text-shadow: none; }
.orb.orb-sm { width: 30px; height: 30px; }
.orb.orb-sm::before { top: 2px; }
.orb.orb-lg { width: 64px; height: 64px; }
.orb.orb-xl { width: 96px; height: 96px; font-size: 1.6rem; }
.orb-sky, .orb-info { --o: #1e9bff; }
.orb-lime, .orb-ok { --o: #3fb62f; }
.orb-sunny, .orb-mail { --o: #ff9a1f; }
.orb-aqua, .orb-bubbles { --o: #00b3c7; }
.orb-pink, .orb-love { --o: #ff4f9a; }
.orb-violet { --o: #8a5be0; }
.orb-rose { --o: #e2407a; }
.orb-silver { --o: #8fa3b8; }
.orb-gold, .orb-badge { --o: #f0b400; }
.orb-error { --o: #e2405a; }
.orb-aurora {
  --o: #38c9b0;
  background:
    radial-gradient(circle at 50% 118%, rgba(255, 255, 255, 0.35) 0%, transparent 55%),
    conic-gradient(from 200deg at 50% 60%, #21d4a4, #3aa0ff, #9b6bff, #ff6fd8, #21d4a4);
  box-shadow: inset 0 -4px 8px rgba(40, 0, 90, 0.4), inset 0 0 0 1px rgba(40, 20, 90, 0.5), 0 4px 14px -3px rgba(120, 90, 255, 0.6);
}

/* Capsules and chips ---------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(var(--ink-rgb), 0.1);
  white-space: nowrap;
}
[data-ink='light'] .chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
button.chip { border: 0; cursor: pointer; transition: transform 0.3s var(--spring); }
button.chip:hover { transform: scale(1.05); }
button.chip:active { transform: scale(0.93); }
.chip.on, .chip.mine {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 65%, white), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px -2px rgba(var(--accent-rgb), 0.7);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  background: linear-gradient(180deg, #ff8a8a, #ef2b45 55%, #c4122d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(200, 20, 50, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.badge:empty, .badge[data-n='0'] { display: none; }

.aurora-mark {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  vertical-align: -2px;
  margin-left: 4px;
  color: #fff;
  background: conic-gradient(from 180deg, #21d4a4, #3aa0ff, #9b6bff, #ff6fd8, #21d4a4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 4px rgba(120, 80, 255, 0.5);
  flex: none;
}
.aurora-mark .ic { width: 11px; height: 11px; }
.bot-mark {
  display: inline-block;
  margin-left: 5px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 16px;
  vertical-align: 2px;
  color: #fff;
  text-shadow: none;
  background: linear-gradient(#5fc2ff, #1e7fd8);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.28em 0.75em;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3);
}

/* Glossy progress capsule */
.meter {
  position: relative;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 20, 40, 0.18), rgba(0, 20, 40, 0.06));
  box-shadow: inset 0 2px 4px rgba(0, 20, 40, 0.25), 0 1px 0 rgba(255, 255, 255, 0.5);
}
.meter-fill {
  --m: var(--accent);
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 51%),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, color-mix(in srgb, var(--m) 70%, white), var(--m));
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.18);
  animation: meter-flow 1.6s linear infinite;
  background-size: 100% 100%, 22.6px 22.6px, 100% 100%;
  transition: width 0.6s var(--spring);
}
@keyframes meter-flow { to { background-position: 0 0, 22.6px 0, 0 0; } }

/* Segmented control with a sliding liquid pill */
.seg {
  position: relative;
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: 999px;
}
.seg button {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  cursor: pointer;
  font-weight: 800;
  padding: 0.45em 1em;
  border-radius: 999px;
  color: var(--ink-2);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  transition: color 0.2s;
  white-space: nowrap;
}
.seg button.on { color: var(--ink); }
.seg-pill {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55));
  box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(0, 30, 70, 0.18), inset 0 -2px 4px rgba(var(--accent-rgb), 0.15);
  transition: left 0.45s var(--spring), width 0.45s var(--spring);
}
[data-ink='light'] .seg-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Avatars and frames ------------------------------------------------------ */
.avatar {
  --size: 44px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: 50%;
}
.avatar-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #ffffff, #d7ecff 70%, #b6d6f2);
  box-shadow: inset 0 -3px 6px rgba(0, 40, 90, 0.18), inset 0 2px 3px rgba(255, 255, 255, 0.9);
}
.avatar-inner canvas {
  position: absolute;
  inset: 10%;
  width: 80%;
  height: 80%;
  image-rendering: pixelated;
}
.avatar-inner .avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-inner::after {
  content: '';
  position: absolute;
  top: 3%;
  left: 18%;
  right: 18%;
  height: 38%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* Frames sit just outside the picture, and grow a little with the avatar.
   `closest-side` makes 100% the ring's own radius, so the hole always
   matches the picture underneath. */
.avatar { --ring: max(3px, calc(var(--size) * 0.065)); }
.frame-gold, .frame-rainbow, .frame-holo { --ring: max(4px, calc(var(--size) * 0.08)); }
.frame-leaf { --ring: max(5px, calc(var(--size) * 0.09)); }
.frame-bubbles { --ring: max(6px, calc(var(--size) * 0.11)); }
.avatar-ring {
  position: absolute;
  inset: calc(var(--ring) * -1);
  border-radius: 50%;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - var(--ring) - 1px), #000 calc(100% - var(--ring)));
  mask: radial-gradient(circle closest-side, transparent calc(100% - var(--ring) - 1px), #000 calc(100% - var(--ring)));
}
.avatar-status {
  position: absolute;
  right: 1%;
  bottom: 1%;
  width: 28%;
  height: 28%;
  min-width: 9px;
  min-height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d6ffc9, #3fd13a 55%, #1f8f1d);
  box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(80, 230, 60, 0.8);
  z-index: 2;
}
.avatar-status.st-away { background: radial-gradient(circle at 35% 30%, #fff1c2, #ffb000 55%, #b87400); box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(255, 176, 0, 0.7); }
.avatar-status.st-busy { background: radial-gradient(circle at 35% 30%, #ffd0d8, #e2405a 55%, #9c1830); box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(226, 64, 90, 0.7); }
.frame-none .avatar-ring { display: none; }
.frame-aqua .avatar-ring { background: conic-gradient(from 210deg, #9be7ff, #1e9bff, #0b5fa8, #6fd0ff, #9be7ff); }
.frame-lime .avatar-ring { background: conic-gradient(from 210deg, #e1ffb0, #6bdc4f, #2b8a3e, #b6f58a, #e1ffb0); }
.frame-sunny .avatar-ring { background: conic-gradient(from 210deg, #fff4b0, #ffd23f, #ff8a00, #ffe27a, #fff4b0); }
.frame-rose .avatar-ring { background: conic-gradient(from 210deg, #ffd1e3, #ff5d8f, #b0204f, #ff9ec2, #ffd1e3); }
.frame-gold .avatar-ring { background: conic-gradient(from 200deg, #fff6c9, #f0b400, #9c6b00, #ffe27a, #fff6c9, #d49a00, #fff6c9); filter: drop-shadow(0 1px 3px rgba(150, 100, 0, 0.5)); }
.frame-rainbow .avatar-ring { background: conic-gradient(#ff5d5d, #ffb13b, #ffe93b, #58e05a, #3bc4ff, #7a6bff, #ff5dd8, #ff5d5d); animation: spin 5s linear infinite; }
.frame-holo .avatar-ring { background: conic-gradient(from 0deg, #c2fff4, #b3c7ff, #ffc2f2, #fff3b3, #c2fff4); animation: spin 3.5s linear infinite; filter: saturate(1.5) drop-shadow(0 0 4px rgba(180, 150, 255, 0.8)); }
.frame-leaf .avatar-ring { background: repeating-conic-gradient(from 0deg, #4cc94a 0 14deg, #2b8a3e 14deg 20deg, #8be26b 20deg 30deg); }
.frame-bubbles .avatar-ring {
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.95) 0 5%, rgba(155, 231, 255, 0.8) 6% 9%, transparent 10%),
    radial-gradient(circle at 88% 22%, rgba(255, 255, 255, 0.95) 0 4%, rgba(155, 231, 255, 0.8) 5% 8%, transparent 9%),
    radial-gradient(circle at 80% 88%, rgba(255, 255, 255, 0.95) 0 5%, rgba(155, 231, 255, 0.8) 6% 10%, transparent 11%),
    radial-gradient(circle at 18% 84%, rgba(255, 255, 255, 0.9) 0 3%, rgba(155, 231, 255, 0.8) 4% 6%, transparent 7%),
    conic-gradient(from 210deg, #c9f3ff, #5cc8ff, #c9f3ff);
  animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* Name styles ------------------------------------------------------------- */
.name { font-weight: 900; }
.name-aqua, .name-lime, .name-sunset, .name-candy, .name-gold, .name-chrome, .name-rainbow, .name-holo, .name-aurora {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
}
[data-ink='light'] .name-aqua, [data-ink='light'] .name-lime, [data-ink='light'] .name-sunset, [data-ink='light'] .name-candy,
[data-ink='light'] .name-gold, [data-ink='light'] .name-chrome, [data-ink='light'] .name-rainbow, [data-ink='light'] .name-holo, [data-ink='light'] .name-aurora {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
.name-aqua { background-image: linear-gradient(180deg, #43b8ff 0%, #1673d6 50%, #0a4f9a 51%, #2f9ff0 100%); }
.name-lime { background-image: linear-gradient(180deg, #9ae65a 0%, #3fae2f 50%, #2b8a1e 51%, #6fd84a 100%); }
.name-sunset { background-image: linear-gradient(90deg, #ff6a3d, #ff3d7f, #b347ff); }
.name-candy { background-image: repeating-linear-gradient(-45deg, #f0306f 0 6px, #ff7aa8 6px 12px); }
.name-gold { background-image: linear-gradient(180deg, #ffe680 0%, #e0a100 50%, #b37400 51%, #ffd54a 100%); }
.name-chrome { background-image: linear-gradient(180deg, #ffffff 0%, #9fb2c8 48%, #4a5d75 50%, #c9d6e4 100%); }
[data-ink='dark'] .name-chrome, :root:not([data-ink='light']) .name-chrome { filter: drop-shadow(0 1px 1px rgba(0, 20, 40, 0.5)); }
.name-rainbow { background-image: linear-gradient(90deg, #ff4d4d, #ffa726, #ffe53b, #4cd964, #34aadc, #8e5bff, #ff4dcc, #ff4d4d); background-size: 200% 100%; animation: name-slide 3s linear infinite; }
.name-holo { background-image: linear-gradient(100deg, #7af2ff, #b69cff, #ff9de0, #fff08a, #7af2ff); background-size: 250% 100%; animation: name-slide 4s ease-in-out infinite alternate; }
.name-aurora { background-image: linear-gradient(90deg, #21d4a4, #3aa0ff, #9b6bff, #ff6fd8, #21d4a4); background-size: 300% 100%; animation: name-slide 6s linear infinite; }
@keyframes name-slide { to { background-position: 200% 0; } }

/* Stationery -------------------------------------------------------------- */
.paper {
  --paper-ink: #24324a;
  position: relative;
  color: var(--paper-ink);
  text-shadow: none;
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 18px 40px -12px rgba(0, 30, 60, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  background-color: #fffdf8;
}
.paper-plain { background: repeating-linear-gradient(180deg, transparent 0 29px, rgba(80, 140, 220, 0.28) 29px 30px) 0 18px / 100% 100%, linear-gradient(90deg, transparent 44px, rgba(255, 90, 90, 0.35) 44px 45px, transparent 45px), #fffdf8; }
.paper-sky { background: radial-gradient(60px 30px at 85% 12%, rgba(255, 255, 255, 0.95), transparent 70%), radial-gradient(90px 40px at 15% 90%, rgba(255, 255, 255, 0.9), transparent 70%), linear-gradient(180deg, #c9ecff, #eaf7ff 45%, #ffffff); }
.paper-grid { background: linear-gradient(rgba(60, 120, 200, 0.14) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(60, 120, 200, 0.14) 1px, transparent 1px) 0 0 / 18px 18px, #fbfdff; }
.paper-kraft { --paper-ink: #3b2a18; background: radial-gradient(circle at 20% 30%, rgba(120, 80, 40, 0.08) 0 2px, transparent 3px) 0 0 / 23px 23px, radial-gradient(circle at 70% 60%, rgba(120, 80, 40, 0.06) 0 1.5px, transparent 2.5px) 0 0 / 17px 17px, linear-gradient(180deg, #dcc39c, #cfb285); }
.paper-ocean { --paper-ink: #0d3350; background: radial-gradient(circle at 80% 85%, rgba(255, 255, 255, 0.5) 0 6px, transparent 7px), radial-gradient(circle at 88% 70%, rgba(255, 255, 255, 0.45) 0 4px, transparent 5px), radial-gradient(circle at 75% 60%, rgba(255, 255, 255, 0.4) 0 3px, transparent 4px), linear-gradient(180deg, #d4f6ff, #8fdcf5 70%, #5cc2e6); }
.paper-meadow { --paper-ink: #1f3d14; background: radial-gradient(160% 40% at 50% 115%, #7fd65a 0 50%, transparent 51%), radial-gradient(120% 30% at 20% 110%, #5cc23f 0 50%, transparent 51%), linear-gradient(180deg, #e3f7ff, #f7fff0 60%); }
.paper-blossom { --paper-ink: #5a2140; background: radial-gradient(circle at 10% 12%, #ffb3cf 0 5px, transparent 6px), radial-gradient(circle at 90% 20%, #ffc9dd 0 4px, transparent 5px), radial-gradient(circle at 85% 88%, #ffb3cf 0 6px, transparent 7px), radial-gradient(circle at 20% 80%, #ffd6e6 0 3px, transparent 4px), linear-gradient(180deg, #fff0f6, #ffe3ee); }
.paper-night { --paper-ink: #eaf1ff; background: radial-gradient(circle at 15% 20%, #fff 0 1px, transparent 2px) 0 0 / 60px 60px, radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px) 0 0 / 45px 45px, radial-gradient(80px 80px at 85% 12%, rgba(255, 240, 180, 0.35), transparent 70%), linear-gradient(180deg, #0c1640, #1f2d6b); }
.paper-holo { --paper-ink: #2a2350; background: linear-gradient(125deg, #e4fff9, #e6e4ff 25%, #ffe4f6 50%, #fffbe0 75%, #e4fff9); background-size: 200% 200%; animation: holo-shift 8s ease-in-out infinite alternate; }
.paper-aurora { --paper-ink: #eafff8; background: radial-gradient(120% 60% at 30% 0%, rgba(40, 255, 180, 0.4), transparent 60%), radial-gradient(100% 60% at 80% 10%, rgba(160, 100, 255, 0.4), transparent 60%), linear-gradient(180deg, #061527, #0d2a4a); }
@keyframes holo-shift { to { background-position: 100% 100%; } }

/* Wax seals */
.seal {
  --s: #e2405a;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  color: rgba(255, 255, 255, 0.85);
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--s) 55%, white), var(--s) 50%, color-mix(in srgb, var(--s) 65%, black));
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.45), 0 3px 6px rgba(0, 0, 0, 0.3);
}
.seal::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.3);
}
.seal .ic { filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.3)); }

/* Stickers */
.sticker { width: 64px; height: 64px; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 3px 4px rgba(0, 30, 60, 0.25)); }
.sticker.sm { width: 40px; height: 40px; }
.sticker.lg { width: 110px; height: 110px; }

/* Pixel art frames */
.pixel-frame {
  display: inline-block;
  padding: 8px;
  border-radius: 16px;
  background:
    repeating-conic-gradient(rgba(0, 30, 60, 0.07) 0 25%, transparent 0 50%) 0 0 / 16px 16px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(235, 245, 255, 0.8));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0, 30, 60, 0.1), 0 6px 16px -6px rgba(0, 30, 60, 0.35);
}
.pixel-frame canvas { display: block; image-rendering: pixelated; }
.avatar-inner .avatar-preset { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }