:root {
  color-scheme: dark;
  --bg: #17212b;
  --panel: #232e3c;
  --line: #344456;
  --text: #f1f5f9;
  --muted: #aebdcc;
  --accent: #75beff;
  --success: #91dba4;
  --well: #1c2936;
  --primary-bg: #1e70b1;
  --primary-text: #fff;
  --wins-text: #ffda89;
  --wins-laurel: #e0b468;
  --danger-text: #ffabb0;
  --backdrop: #0b1219ba;
  --avatar-bg: #277db9;
  --avatar-text: #fff;
  --settings-icon: #257fc2;
  --support-icon: #278451;
  --bolt-fill: #ffd85a;
  --bolt-highlight: #fff3ae;
  --art-slate: #789dbf;
  --art-teal: #48aeab;
  --art-gold: #d8a34e;
  --selected: color-mix(in srgb, var(--accent) 15%, var(--panel));
  --role-border: color-mix(in srgb, var(--accent) 35%, var(--panel));
  --banner-start: color-mix(in srgb, var(--accent) 13%, var(--panel));
  --level-liquid: color-mix(in srgb, var(--accent) 24%, var(--panel));
  --danger-border: color-mix(in srgb, var(--danger-text) 54%, var(--panel));
  --shine: color-mix(in srgb, var(--primary-text) 17%, transparent);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edf2f6;
  --panel: #fff;
  --line: #d6e0e9;
  --text: #172433;
  --muted: #526579;
  --accent: #0868a8;
  --success: #246e43;
  --well: #f3f7fa;
  --primary-bg: #116aac;
  --wins-text: #785018;
  --wins-laurel: #95671f;
  --danger-text: #a92a38;
  --backdrop: #18283870;
  --avatar-bg: #d4eaff;
  --avatar-text: #12568a;
}
@supports not (color: color-mix(in srgb, black, white)) {
  :root {
    --selected: var(--line);
    --role-border: var(--accent);
    --banner-start: var(--well);
    --level-liquid: var(--line);
    --danger-border: var(--danger-text);
    --shine: #ffffff24;
  }
  .card { --tint: var(--well); --glow: var(--line); }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; background: var(--bg); color: var(--text); }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
input[type="checkbox"] { accent-color: var(--primary-bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.shell {
  width: min(100%, 610px);
  margin: auto;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
}
.brand { display: flex; gap: 12px; align-items: center; padding: 0 2px 20px; }
.avatar { display: grid; place-items: center; font-weight: 800; }
.mark { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.brand h1 { font-size: 25px; letter-spacing: -.045em; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.icon-button {
  flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center;
  margin-left: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 23px;
}
.roles { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 18px; }
.roles button, .segmented button {
  border: 1px solid transparent; border-radius: 100px; background: transparent; color: var(--muted);
}
.roles button { padding: 8px 13px; font-size: 15px; font-weight: 650; }
.roles button[data-role="manage"] { padding-inline: 8px; }
.roles button[aria-pressed=true] { background: var(--selected); border-color: var(--role-border); color: var(--accent); }
.avatar {
  position: relative;
  margin-left: auto; width: 34px; height: 34px; padding: 0; border: 0; overflow: hidden;
  border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-text);
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.profile, #winner-profile[open] { display: grid; gap: 14px; }
#profile-back { justify-self: start; }
.profile-identity { display: grid; justify-items: center; gap: 8px; padding: 2px 0 8px; }
.profile-avatar { width: 96px; height: 96px; margin: 0; font-size: 38px; }
.profile-identity h2 { font-size: 22px; letter-spacing: -.03em; text-align: center; overflow-wrap: anywhere; }
#profile-handle { color: var(--muted); font-size: 13px; }
#profile-handle:empty { display: none; }
.level-button {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; border-radius: 100px; padding: 8px 15px; font-size: 13px; font-weight: 750;
  color: var(--primary-text); background: var(--primary-bg);
}
.level-button[data-flame="mint"] { --flame-edge: #c8ffdf; --flame-fill: #a9ffc229; --flame-core: #a9ffc2; }
.level-button[data-flame="gold"] { --flame-edge: #fff0a7; --flame-fill: #ffca63a8; --flame-core: #fff6ce; }
.level-button[data-flame="red"] { --flame-edge: #ffd0ad; --flame-fill: #ff694e; --flame-core: #fff0ad; }
.level-button[data-flame="blue"] { --flame-edge: #d2fbff; --flame-fill: #55d6f8; --flame-core: #edfcff; }
.level-flame { flex: none; width: 18px; height: 18px; overflow: visible; }
.level-button:disabled .level-flame { visibility: hidden; }
.level-flame-body {
  transform-box: fill-box; transform-origin: center bottom;
  animation: level-flame-shimmer 1.5s ease-in-out infinite alternate;
}
.level-flame-shape {
  fill: var(--flame-fill, none); stroke: var(--flame-edge, currentColor);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.level-flame-core, .level-flame-spark { fill: var(--flame-core, currentColor); }
.level-flame-spark { display: none; }
:is([data-flame="gold"], [data-flame="red"], [data-flame="blue"]) .spark-one,
:is([data-flame="red"], [data-flame="blue"]) .spark-two,
[data-flame="blue"] .spark-three { display: block; }
@keyframes level-flame-shimmer {
  from { opacity: .8; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .level-flame-body { animation-name: level-flame-flicker; }
  .level-flame-spark { animation: level-flame-spark-rise 1.8s ease-out infinite; }
  .spark-two { animation-delay: -.7s; }
  .spark-three { animation-delay: -1.2s; }
  @keyframes level-flame-flicker {
    0%, 100% { transform: scale(.96, .97) rotate(-5deg); opacity: .85; }
    45% { transform: scale(1.04, 1.09) rotate(4deg); opacity: 1; }
    75% { transform: scale(.99, 1.02) rotate(-2deg); opacity: .93; }
  }
  @keyframes level-flame-spark-rise {
    0% { transform: translateY(2px); opacity: 0; }
    32% { opacity: 1; }
    100% { transform: translateY(-3px); opacity: 0; }
  }
}
.profile-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 10px;
  margin: 0; padding: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.profile-stats div { display: flex; flex-direction: column-reverse; gap: 2px; }
.profile-stats dt { color: var(--muted); font-size: 12px; }
.profile-stats dd { margin: 0; font-weight: 750; font-size: 17px; overflow-wrap: anywhere; }
.profile-win-count {
  display: flex; align-items: center; gap: 3px;
  width: 100%; min-height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: var(--wins-text); font-variant-numeric: tabular-nums;
}
.profile-win-laurel { display: block; flex: none; width: 10px; height: 18px; color: var(--wins-laurel); }
.profile-win-laurel.mirrored { transform: scaleX(-1); }
.profile-registration-date { display: flex; align-items: center; flex-wrap: wrap; }
.profile-date-info {
  display: inline-grid; place-items: center; width: 26px; height: 24px;
  padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text);
}
.profile-date-info span {
  display: grid; place-items: center; width: 14px; height: 14px;
  border-radius: 50%; background: var(--text); color: var(--panel); font: italic 700 11px/1 Georgia, serif;
}
#profile-date-dialog { width: min(calc(100% - 16px), 380px); border-radius: 10px; padding: 16px 18px; }
#profile-date-dialog form { float: none; display: grid; gap: 8px; }
#profile-date-dialog p { margin: 0; color: var(--text); font-size: 14px; }
.profile-date-dismiss, .profile-date-confirm {
  justify-self: end; border: 0; border-radius: 6px; background: transparent;
}
.profile-date-dismiss { color: var(--muted); font-size: 21px; line-height: 1; padding: 2px 5px; }
.profile-date-confirm { color: var(--accent); font-size: 14px; padding: 7px 5px 3px; }
.profile-links { display: grid; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.profile-link { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 10px; background: none; border: 0; text-align: left; }
.profile-link + .profile-link { border-top: 1px solid var(--line); }
.profile-icon {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; color: #fff; background: var(--profile-icon-bg);
}
.profile-icon.settings { --profile-icon-bg: var(--settings-icon); }
.profile-icon.support { --profile-icon-bg: var(--support-icon); }
.profile-icon svg { display: block; width: 20px; height: 20px; }
.profile-icon-dots { fill: var(--profile-icon-bg); }
.profile-dialog-close { float: right; }
.theme-options { margin-top: 10px; gap: 7px; }
.theme-options button { flex: 1; padding: 9px 8px; border-color: var(--line); font-size: 13px; }
.level-ring { width: 150px; margin: 18px auto; position: relative; }
.level-ring > svg { position: relative; display: block; width: 100%; fill: none; stroke-width: 7px; }
.level-outline { stroke: var(--accent); }
.level-liquid { position: absolute; inset: 9%; overflow: hidden; border-radius: 50%; }
.level-liquid-fill {
  position: absolute; inset: 0; background: linear-gradient(var(--level-liquid), var(--selected));
  transform: translateY(var(--level-fill-offset, 100%));
}
.level-wave {
  position: absolute; top: -11px; left: 0; width: 200%; height: 12px;
  display: block; fill: var(--level-liquid);
}
.level-ring[data-progress="0"] { --level-fill-offset: 92%; }
.level-ring[data-progress="1"] { --level-fill-offset: 66.667%; }
.level-ring[data-progress="2"] { --level-fill-offset: 33.333%; }
@media (prefers-reduced-motion: no-preference) {
  #level-dialog[open] .level-liquid-fill {
    animation: level-fill-rise 750ms cubic-bezier(.2, .75, .3, 1) both;
  }
  #level-dialog[open] .level-wave {
    animation: level-wave-flow 3s linear infinite;
  }
  @keyframes level-fill-rise {
    from { transform: translateY(calc(100% + 12px)); }
    to { transform: translateY(var(--level-fill-offset)); }
  }
  @keyframes level-wave-flow {
    to { transform: translateX(-50%); }
  }
}
.level-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; }
.level-ring strong { font-size: 26px; color: var(--accent); }
.level-ring small { color: var(--muted); }
.level-note { text-align: center; }
.section-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 10px; }
.section-line h2 { font-size: 14px; font-weight: 700; color: var(--muted); }
.segmented { display: flex; gap: 3px; }
.segmented button { padding: 5px 7px; font-size: 11px; font-weight: 650; }
.segmented button[aria-pressed=true] { color: var(--text); background: var(--selected); }
.notice, .empty {
  grid-column: 1 / -1; padding: 14px 11px; border-radius: 13px; background: var(--panel);
  color: var(--muted); font-size: 13px; text-align: center; line-height: 1.45;
}
.notice { margin-bottom: 14px; }
.surface {
  border: 1px solid var(--line); border-radius: 13px; background: var(--panel); padding: 11px 12px; font-weight: 650;
}
.browse { display: flex; justify-content: space-between; width: 100%; margin-top: 8px; font-size: 13px; }
.browse span:last-child { color: var(--accent); }
.catalog { margin-top: 26px; }
.tag { color: var(--success); font-size: 11px; font-weight: 650; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.filters select {
  min-width: 0; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); font-size: 12px; font-weight: 600;
}
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.card {
  --art-color: var(--accent);
  --tint: color-mix(in srgb, var(--art-color) 26%, var(--panel));
  --glow: color-mix(in srgb, var(--art-color) 42%, var(--panel));
  --card-text: var(--text);
  --card-muted: var(--muted);
  --card-pill: var(--panel);
  --card-button: var(--selected);
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-width: 0; min-height: 186px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; color: var(--card-text);
  background: var(--panel);
  background: radial-gradient(ellipse at 50% 0%, var(--glow), transparent 70%),
    linear-gradient(var(--tint), var(--panel) 82%);
}
.card[data-tone="1"] { --art-color: var(--art-slate); }
.card[data-tone="2"] { --art-color: var(--art-teal); }
.card[data-tone="3"] { --art-color: var(--art-gold); }
.card-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.card.has-photo {
  --card-text: #fff;
  --card-muted: #e6edf5;
  --card-pill: #111827b8;
  --card-button: #ffffff24;
}
.card.has-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #080b1124 0%, #080b116b 42%, #080b11ed 100%);
}
.card-info {
  position: absolute; z-index: 2; top: 7px; right: 7px; display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--card-pill);
}
.card-info svg, .card-people svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.card-main {
  position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 10px; min-width: 0; text-align: center;
}
.card-emblem {
  display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%;
  background: var(--card-pill); font-size: 17px;
}
.card h3, .card-people {
  max-width: 100%; border-radius: 999px; background: var(--card-pill);
}
.card h3 {
  padding: 4px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; line-height: 1.15;
}
.card-meta {
  display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%;
}
.card-people {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; font-size: 12px; font-weight: 750;
}
.card-meta time { color: var(--card-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.card-ticket { color: var(--card-muted); font-size: 11px; }
.card-action {
  width: 100%; min-height: 34px; margin-top: auto; padding: 5px;
  border: 0; border-radius: 999px; background: var(--card-button); font-size: 11px; font-weight: 800;
}
.primary {
  width: 100%; border: 0; border-radius: 10px; background: var(--primary-bg); color: var(--primary-text);
  font-size: 14px; font-weight: 800; padding: 8px 5px; min-height: 41px;
}
.creator-banner {
  padding: 17px; margin-bottom: 14px; border-radius: 17px; border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--banner-start), var(--panel) 72%);
}
.creator-banner h2 { margin: 5px 0; font-size: 22px; }
.creator-banner p:not(.eyebrow) { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.create-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--primary-bg); color: var(--primary-text);
}
.create-cta::before {
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 38%;
  background: linear-gradient(90deg, transparent, var(--shine), transparent);
  transform: translateX(-125%) skewX(-22deg);
  pointer-events: none;
}
.create-cta-bolt { flex: none; fill: var(--bolt-fill); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--bolt-fill) 45%, transparent)); }
.create-cta-bolt-highlight { fill: var(--bolt-highlight); }
@media (prefers-reduced-motion: no-preference) {
  .create-cta::before { animation: create-cta-shine 2.7s linear infinite; }
  .create-cta-bolt { animation: create-cta-bolt 1.65s ease-in-out infinite; }
}
@keyframes create-cta-shine {
  to { transform: translateX(385%) skewX(-22deg); }
}
@keyframes create-cta-bolt {
  0%, 100% { transform: rotate(-5deg) scale(.94); }
  50% { transform: rotate(6deg) scale(1.13); }
}
.creator-giveaways .section-line { margin: 0 9px 8px; }
.creator-giveaways .segmented button { padding: 6px 9px; border-radius: 20px; }
.creator-giveaways .empty, .creator-giveaways .browse { min-height: 41px; padding: 10px 12px; }
.creator-giveaways .browse { align-items: center; border-color: transparent; color: var(--muted); }
.creator-giveaways .browse span:last-child { color: var(--text); }
.creator-channels, .creator-posts { display: grid; gap: 7px; margin: 16px 0; }
.creator-channels h3, .creator-posts h3 { color: var(--muted); font-size: 13px; }
#creator-posts-status { text-align: center; color: var(--muted); }
#creator-posts-list { display: grid; gap: 7px; }
#creator-posts-list:empty { display: none; }
#creator-posts-status, .creator-post-row { margin: 0; padding: 11px 12px; }
.creator-post-row { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#manage-creator-posts { display: flex; justify-content: space-between; align-items: center; }
.channel-list { display: grid; gap: 7px; }
#creator-channel-list { max-height: 230px; overflow-y: auto; }
.saved-channel {
  display: flex; align-items: center; gap: 9px; min-height: 61px; padding: 9px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.saved-channel-avatar {
  position: relative; display: grid; place-items: center; flex: 0 0 32px; height: 32px;
  border-radius: 50%; overflow: hidden; background: var(--line);
}
.saved-channel-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.saved-channel-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.saved-channel-copy strong, .saved-channel-copy small { display: block; }
.saved-channel-copy small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.saved-channel-actions:not([hidden]), .channel-confirm-actions { display: flex; gap: 5px; }
.channel-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#channel-dialog-title { margin: 0; }
.channel-icon-button {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: var(--well); color: var(--muted);
}
.channel-icon-button svg, #add-managed-channel svg {
  display: block; flex: none; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.channel-icon-button.channel-refresh { color: var(--accent); background: var(--selected); }
.channel-icon-button.channel-delete {
  color: var(--danger-text); background: var(--well);
  background: color-mix(in srgb, var(--danger-text) 12%, var(--panel));
}
.channel-icon-button:not(:disabled):active { opacity: .75; }
#manage-channels { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.channel-dialog-body { min-height: min(270px, 40vh); padding: 7px; border-radius: 13px; background: var(--well); }
#managed-channel-list { max-height: 36vh; overflow-y: auto; }
#channel-dialog .channel-legend { margin: 10px 0; text-align: center; font-size: 11px; }
#managed-channels-status, #remove-channel-confirm { margin: 8px 0; }
#add-managed-channel { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; }
footer { margin-top: 24px; text-align: center; color: var(--muted); font-size: 12px; }
dialog {
  width: min(92%, 435px); max-height: 85dvh; padding: 18px; color: var(--text);
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: auto;
}
dialog::backdrop { background: var(--backdrop); }
body:has(#joined-dialog[open]) { overflow: hidden; }
#joined-dialog {
  position: fixed; inset: 0; width: min(100%, 620px); height: 100%;
  max-height: none; max-width: none; margin: auto; border: 0; border-radius: 0;
  padding: max(24px, env(safe-area-inset-top)) 6px max(10px, env(safe-area-inset-bottom));
  background: var(--bg); overflow: hidden;
}
#joined-dialog[open] { display: flex; flex-direction: column; }
.joined-dialog-header { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 12px 0; }
#joined-dialog-title { margin: 0; color: var(--muted); font-size: 19px; }
.joined-switch {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 11px; background: var(--panel);
}
.joined-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 3px; border-radius: 12px; background: var(--panel); }
.joined-filters button { min-height: 29px; padding: 4px 1px; border-radius: 9px; }
.joined-dialog-body { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: auto; }
.joined-dialog-empty { display: grid; justify-items: center; gap: 8px; margin: auto; padding: 12px; text-align: center; }
.joined-dialog-empty:has(#joined-dialog-status:empty) { display: none; }
#joined-dialog-status { max-width: 255px; }
#joined-create {
  border: 0; border-radius: 11px; background: var(--primary-bg); color: var(--primary-text);
  min-height: 48px; padding: 10px 14px; font-size: 16px;
}
#joined-dialog-status:empty, #joined-dialog-list:empty { display: none; }
#joined-dialog-list { padding: 12px 2px; }
#joined-pages { padding: 6px 2px 0; }
dialog form { float: right; }
dialog h2 { font-size: 20px; margin: 6px 42px 12px 0; overflow-wrap: anywhere; }
dialog p:not(.eyebrow), dialog li { color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
dialog #detail-description { white-space: pre-wrap; }
dialog .detail-giveaway-id { margin: 0 0 8px; font-size: 12px; user-select: text; }
dialog #detail-meta { display: grid; gap: 3px; margin: 12px 0; }
dialog .ticket-number { margin: 0 0 12px; }
.ticket-number code { color: var(--accent); font-size: 16px; font-weight: 700; letter-spacing: .12em; user-select: text; }
dialog #detail-check-ticket { width: 100%; margin-bottom: 8px; font-size: 13px; }
dialog #detail-message { margin-bottom: 8px; color: var(--accent); }
#detail-join, #detail-open { width: 100%; margin-bottom: 8px; }
dialog :is(#detail-listing, #detail-finish) { width: 100%; margin-top: 7px; font-size: 13px; }
#detail[data-finished] {
  position: fixed; inset: 0; width: min(100%, 570px); height: 100%; max-width: none; max-height: none;
  margin: auto; padding: max(15px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
  border: 0; border-radius: 0; background: var(--bg); text-align: center; overflow: auto;
}
#detail[data-finished][open] { display: flex; flex-direction: column; }
#winner-profile {
  position: fixed; inset: 0; width: min(100%, 570px); height: 100%;
  max-width: none; max-height: none; margin: auto; padding: 14px;
  border: 0; border-radius: 0; background: var(--bg);
}
#winner-profile:not([open]) { display: none; }
#winner-profile[open] { align-content: start; }
#winner-profile-back { justify-self: start; }
#winner-profile-title { margin: 0; }
#winner-profile #winner-profile-status { text-align: center; }
#winner-profile #winner-profile-status:empty { display: none; }
#detail[data-finished] > * { flex-shrink: 0; }
#detail[data-finished] > form { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; }
#detail[data-finished] > .eyebrow { margin: 0 46px 3px; }
#detail[data-finished] > h2 { margin: 0 46px 8px; color: var(--muted); font-size: 14px; }
#detail-results-hero { display: grid; justify-items: center; gap: 7px; margin: 12px 0 8px; }
.finished-illustration {
  position: relative; display: grid; place-items: center; width: min(43vw, 154px); aspect-ratio: 1;
  border-radius: 34%;
  background: radial-gradient(circle, var(--selected), transparent 72%);
}
.finished-gift { position: relative; width: 76%; height: 71%; margin-top: 10%; }
.finished-gift-box, .finished-gift-lid {
  position: absolute; left: 50%; translate: -50% 0;
  background: linear-gradient(90deg, transparent 40%, #d92646 40% 60%, transparent 60%),
    linear-gradient(105deg, #ffce64, #f5a62b 58%, #e18121);
}
.finished-gift-box {
  bottom: 3%; width: 88%; height: 59%; border-radius: 5px 5px 14px 14px;
  box-shadow: inset 0 -6px #803a201f, 0 10px 18px #0b14234d;
}
.finished-gift-lid {
  top: 28%; width: 100%; height: 21%; border-radius: 7px;
  box-shadow: inset 0 3px #ffe8a978, 0 3px 4px #803a2033;
}
.finished-gift-bow { position: absolute; inset: -100% 0 0; }
.finished-gift-bow::before, .finished-gift-bow::after {
  content: ""; position: absolute; top: 15%; width: 25%; height: 38%;
  border: 5px solid #ef4259; box-sizing: border-box;
}
.finished-gift-bow::before { right: 49%; border-radius: 70% 65% 30% 70%; rotate: 24deg; }
.finished-gift-bow::after { left: 49%; border-radius: 65% 70% 70% 30%; rotate: -24deg; }
.finished-gift-star {
  display: none; position: absolute; inset: -8% 0 auto; color: var(--wins-text);
  font-size: clamp(26px, 10vw, 45px); text-shadow: 0 0 14px #ffcf5566;
}
#detail[data-won] .finished-gift-lid { transform: translate(-25%, -120%) rotate(-24deg); }
#detail[data-won] .finished-gift-star { display: block; }
#detail-win-message { color: var(--wins-text); font-weight: 750; }
.finished-fireworks {
  position: absolute; inset: -15% -35% -10%; pointer-events: none;
}
.finished-fireworks i {
  position: absolute; top: 25%; left: 4%; width: 32%; aspect-ratio: 1;
  border-radius: 50%; opacity: 0; --spark: #ffca63; --burst-delay: .38s;
  background: repeating-conic-gradient(from 8deg, var(--spark) 0deg 6deg, transparent 6deg 36deg);
  mask-image: radial-gradient(circle, transparent 0 25%, #000 29% 48%, transparent 66%);
}
.finished-fireworks i:nth-child(2) { top: 8%; left: 66%; --spark: #81dbff; --burst-delay: .54s; }
.finished-fireworks i:nth-child(3) { top: 49%; left: 67%; width: 24%; --spark: #ff86ad; --burst-delay: .72s; }
@media (prefers-reduced-motion: no-preference) {
  #detail[open][data-finished]:not([data-won]) .finished-gift { animation: finished-gift-sway 2.7s ease-in-out infinite; }
  #detail[open][data-won] .finished-gift-lid { animation: finished-gift-open .85s cubic-bezier(.18, .7, .35, 1) both; }
  #detail[open][data-won] .finished-gift-star { animation: finished-gift-star .55s .34s ease-out both; }
  #detail[open][data-won] .finished-fireworks i { animation: finished-firework .83s var(--burst-delay) ease-out both; }
}
@keyframes finished-gift-sway {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-5%) rotate(4deg); }
}
@keyframes finished-gift-open {
  0%, 20% { transform: none; }
  67% { transform: translate(-32%, -158%) rotate(-32deg); }
}
@keyframes finished-gift-star {
  from { opacity: 0; transform: translateY(80%) scale(.4); }
  to { opacity: 1; transform: none; }
}
@keyframes finished-firework {
  0% { opacity: 0; transform: scale(.2); }
  23% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.32); }
}
#detail-results-hero h3 { font-size: 24px; }
#detail-results-hero p { color: var(--text); font-size: 15px; }
#detail-winners {
  display: grid; justify-items: center; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0;
}
#detail-winners li { max-width: 100%; }
.finished-winner {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 4px 12px 4px 4px; border: 0; border-radius: 999px;
  background: var(--selected); color: var(--text); font-weight: 700; text-align: start;
}
button.finished-winner::after { content: "›"; font-size: 17px; line-height: 1; }
.finished-winner-initial {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px;
  border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-text);
}
#detail[data-finished] :is(#detail-description, #detail-message):empty { display: none; }
#detail[data-finished] #detail-meta { margin: 8px 0; }
#detail-results-copy { width: 100%; min-height: 80px; margin-bottom: 8px; }
#detail-results-footer {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin-top: auto; padding-top: 10px;
}
#detail-results-footer button { min-height: 46px; }
#detail-results-footer p { grid-column: 1 / -1; font-size: 11px; }
#manage-finish { margin-bottom: 7px; }
.compact { padding: 6px 9px; font-size: 12px; }
#manage-close { float: right; }
.manage-items { display: grid; gap: 7px; }
.manage-search { display: flex; gap: 8px; margin-block: 8px; }
.manage-search input { flex: 1; min-width: 0; }
.manage-extra-rules summary { cursor: pointer; font-weight: 700; }
.manage-extra-rules label { margin-top: 8px; }
#manage-entries li + li, #manage-winners li + li { margin-top: 6px; }
.manage-entry-note { display: block; color: var(--muted); }
.manage-row { width: 100%; display: grid; gap: 5px; text-align: left; overflow-wrap: anywhere; }
.manage-row small, .pager span { color: var(--muted); font-size: 12px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 9px 0; }
.manage-subtitle { font-size: 14px; margin: 13px 0 5px; }
.admin-names { margin: 0; padding-left: 18px; }
.admin-names:empty { display: none; }
.manage-editor { display: grid; gap: 9px; margin-top: 14px; }
.manage-editor fieldset { display: grid; gap: 9px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.manage-editor legend { font-size: 13px; padding: 0 5px; }
.manage-editor label { display: grid; gap: 4px; font-size: 12px; }
.manage-editor .check-line { display: flex; align-items: center; }
.manage-editor :is(input:not([type=checkbox]), textarea, select), #chances-link, #chances-story-url {
  width: 100%; min-width: 0; color: var(--text); font: inherit; padding: 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--well);
}
.manage-editor textarea { resize: vertical; }
.danger { color: var(--danger-text); border-color: var(--danger-border); }
.remove-confirm { padding: 10px; border: 1px solid var(--danger-border); border-radius: 12px; margin-top: 8px; }
#creator-finish-dialog { width: min(calc(100% - 24px), 320px); padding: 12px; border: 1px solid var(--danger-border); border-radius: 12px; }
.creator-finish-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.creator-finish-actions #creator-finish-apply { flex: 1; min-width: 0; white-space: normal; }
#creator-finish-status { margin-top: 8px; }
#manage-detail-notice { min-height: 1em; margin: 7px 0; }
#create-in-bot { margin-top: 8px; }
body:has(#create-dialog[open]) { overflow: hidden; }
#create-dialog {
  position: fixed; inset: 0; width: min(100%, 560px); height: 100%; margin: auto;
  max-width: none; max-height: none; padding: 0; border: 0; border-radius: 0;
  background: var(--bg); overflow: hidden;
}
#create-dialog[open] { display: flex; flex-direction: column; }
#create-close {
  position: absolute; z-index: 2; top: max(10px, env(safe-area-inset-top)); right: 12px;
  width: 32px; height: 32px; font-size: 20px;
}
.wizard-scroll { flex: 1; min-height: 0; overflow: auto; padding: 34px 12px 20px; }
.wizard-heading { display: grid; justify-items: center; gap: 11px; margin: 0 auto 20px; text-align: center; }
#create-icon { font-size: 57px; line-height: 1.18; }
@media (prefers-reduced-motion: no-preference) {
  #create-icon { animation: create-icon-float 3.2s ease-in-out infinite; }
  @keyframes create-icon-float {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    25% { transform: translateY(-5px) rotate(0deg) scale(1.025); }
    50% { transform: translateY(-8px) rotate(4deg) scale(1.05); }
    75% { transform: translateY(-5px) rotate(0deg) scale(1.025); }
  }
}
#create-title { max-width: 360px; margin: 0 16px; font-size: 20px; }
#create-title:focus { outline: none; }
.wizard-progress {
  display: flex; align-items: center; gap: 6px; padding: 10px 11px;
  border-radius: 999px; background: var(--panel);
}
.wizard-progress span { width: 7px; height: 7px; border-radius: 999px; background: var(--line); }
.wizard-progress .current { width: 20px; background: var(--accent); }
.wizard-form { float: none; }
.wizard-form section, #create-friends-fields, #create-boost-fields, .wizard-channel-list {
  display: grid; gap: 8px; min-width: 0;
}
#create-dialog .wizard-form p { padding: 0 10px; }
#create-dialog .wizard-warning { color: var(--danger-text); }
.wizard-row, .wizard-type {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 11px 13px;
  border: 0; border-radius: 13px; background: var(--panel); text-align: left;
}
.wizard-row { justify-content: space-between; }
.wizard-row strong, .wizard-type strong { font-weight: 650; }
.wizard-type { min-height: 74px; cursor: pointer; }
.wizard-type input { flex: none; width: 18px; height: 18px; accent-color: var(--primary-bg); }
.wizard-type:has(input:checked) { box-shadow: inset 0 0 0 2px var(--role-border); }
.wizard-type small, .wizard-post small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.35; }
.wizard-row :is(input:not([type="checkbox"]), select) {
  flex: 1; min-width: 0; max-width: 62%; padding: 4px 0;
  border: 0; background: transparent; color: var(--text); text-align: right; font: inherit;
}
.wizard-row input[type="datetime-local"] { font-size: 13px; }
#create-pick-post, .wizard-color summary { width: 100%; cursor: pointer; }
#create-post-label { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.wizard-presets button { flex: 1; }
.wizard-presets button[aria-pressed="true"] { background: var(--selected); color: var(--accent); border-color: var(--role-border); }
.wizard-color { position: relative; }
.wizard-color summary::-webkit-details-marker { display: none; }
#create-color-label::after { content: "⌄"; margin-inline-start: 7px; color: var(--muted); }
.wizard-colors {
  position: absolute; z-index: 1; top: 100%; right: 0; min-width: 168px; display: grid;
  padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  box-shadow: 0 6px 18px var(--backdrop);
}
.wizard-colors button { padding: 9px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.wizard-colors button:hover { background: var(--selected); }
[data-create-color]::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px;
  vertical-align: -.02em; border: 1px solid var(--line); border-radius: 50%; background: var(--color-dot, var(--well));
}
[data-create-color="primary"] { --color-dot: #0089ed; }
[data-create-color="danger"] { --color-dot: #ed283e; }
[data-create-color="success"] { --color-dot: #28bd48; }
.wizard-check {
  display: grid; flex: none; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line);
  border-radius: 50%; background: var(--well); color: transparent;
}
.wizard-channel[aria-pressed="true"] .wizard-check { background: var(--primary-bg); color: var(--primary-text); border-color: transparent; }
.wizard-switch {
  appearance: none; display: inline-grid; align-items: center; flex: none;
  width: 38px; height: 22px; margin: 0; padding: 2px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--well);
}
.wizard-switch::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); }
.wizard-switch:checked { justify-items: end; border-color: transparent; background: var(--primary-bg); }
.wizard-switch:checked::before { background: var(--primary-text); }
.wizard-switch:disabled { opacity: .7; }
.wizard-footer {
  display: grid; gap: 8px; padding: 9px 12px max(12px, env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
}
.wizard-nav { display: flex; gap: 8px; }
.wizard-nav > button { flex: 1; min-width: 0; min-height: 44px; }
#create-notice { margin: 0; color: var(--text); }
#create-cancel { background: #be303b; color: #fff; }
#create-review section { display: grid; gap: 6px; margin-bottom: 20px; }
#create-review h3 { margin: 0 4px 3px; font-size: 17px; }
.wizard-summary-row { align-items: baseline; flex-wrap: wrap; }
.wizard-summary-row span { color: var(--muted); }
.wizard-summary-row strong, #create-post-preview { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.wizard-edit { width: 100%; }
#create-post-title { margin: 0; }
#create-post-dialog[data-mode="creator"][data-empty] .post-dialog-content {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: min(340px, 58dvh);
}
#create-post-status:empty { display: none; }
#create-post-dialog[data-mode="creator"][data-empty] #create-post-status { color: var(--text); }
#create-post-dialog[data-mode="creator"][data-empty] #create-new-post { width: auto; padding-inline: 20px; }
#create-post-list { display: grid; gap: 7px; max-height: 40dvh; overflow: auto; }
.wizard-post { gap: 5px; }
.wizard-post > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wizard-post .channel-icon-button { width: 30px; height: 30px; }
.wizard-post [data-preview-post][aria-expanded="true"] {
  background: var(--selected);
  color: var(--accent);
}
#create-post-preview, #create-new-post { margin-top: 10px; }
body:has(#participation-screen[open]) { overflow: hidden; }
#participation-screen {
  position: fixed; inset: 0; width: min(100%, 570px); height: 100%; margin: auto;
  max-width: none; max-height: none; padding: 0; border: 0; border-radius: 0;
  background: var(--bg); overflow: hidden;
}
#participation-screen[open] { display: flex; flex-direction: column; }
.participation-header {
  display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 8px;
  padding: max(9px, env(safe-area-inset-top)) 12px 8px; text-align: center;
}
.participation-header button { margin: 0; width: 34px; height: 34px; font-size: 25px; }
.participation-header strong, .participation-header span, .participation-header time {
  display: block; overflow-wrap: anywhere;
}
.participation-header strong { font-size: 14px; }
.participation-header span, .participation-header time { margin-top: 3px; color: var(--muted); font-size: 12px; }
#participation-giveaway-id { user-select: text; }
#participation-time { font-variant-numeric: tabular-nums; }
.participation-body { flex: 1; min-height: 0; overflow: auto; padding: 6px 12px 12px; }
.participation-hero { display: grid; justify-items: center; gap: 7px; margin: 12px 0 15px; text-align: center; }
#participation-screen:is([data-screen="loading"], [data-screen="success"], [data-screen="pending"]) .participation-hero {
  margin-top: clamp(20px, 8vh, 70px);
}
.participation-art { width: min(48vw, 180px); height: auto; }
.participation-art-tile { fill: #20a5cf; }
[data-screen="loading"] .participation-art-tile { fill: #7863da; }
[data-screen="success"] .participation-art-tile { fill: url(#participation-success-gold) #efa638; }
[data-screen="pending"] .participation-art-tile { fill: #a77cd4; }
.participation-art-check { display: none; }
.participation-success-ring, .participation-success-confetti, .participation-success-shimmer { opacity: 0; }
[data-screen="success"] .participation-art-check { display: inline; }
[data-screen="success"] .participation-art-search { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #participation-screen[open]:is([data-screen="loading"], [data-screen="missing"]) .participation-art-search {
    animation: participation-scan 1.35s ease-in-out infinite alternate;
  }
  #participation-screen[open][data-screen="success"] .participation-art { overflow: visible; }
  #participation-screen[open][data-screen="success"] .participation-art-ticket {
    transform-box: fill-box; transform-origin: center;
    animation: participation-ticket-pop 540ms cubic-bezier(.22, .75, .32, 1) backwards,
      participation-ticket-float 3.2s 540ms ease-in-out infinite;
  }
  #participation-screen[open][data-screen="success"] .participation-art-check {
    transform-box: fill-box; transform-origin: center;
    animation: participation-check-pop 400ms 180ms cubic-bezier(.2, .8, .35, 1.3) backwards,
      participation-check-pulse 3.2s 580ms ease-in-out infinite;
  }
  #participation-screen[open][data-screen="success"] .participation-success-mark {
    stroke-dasharray: 1;
    animation: participation-check-draw 280ms 360ms ease-out both;
  }
  #participation-screen[open][data-screen="success"] .participation-success-ring {
    transform-origin: center; animation: participation-success-ripple 3.2s 160ms ease-out infinite;
  }
  #participation-screen[open][data-screen="success"] .participation-success-confetti {
    transform-origin: center; animation: participation-confetti-burst 3.2s 300ms ease-out infinite;
  }
  #participation-screen[open][data-screen="success"] .participation-success-shimmer {
    opacity: 1;
  }
  #participation-screen[open][data-screen="success"] .participation-success-shimmer path {
    animation: participation-success-sweep 3.2s 540ms ease-in-out infinite;
  }
  #participation-screen[open][data-screen="success"] #participation-ticket {
    animation: participation-number-reveal 420ms 300ms ease-out both;
  }
}
@keyframes participation-scan {
  from { transform: translate(-46px, 7px); }
  to { transform: translate(9px, -6px); }
}
@keyframes participation-ticket-pop {
  0% { transform: translateY(12px) scale(.76) rotate(-8deg); }
  65% { transform: translateY(-6px) scale(1.1) rotate(4deg); }
  100% { transform: none; }
}
@keyframes participation-check-pop {
  from { opacity: 0; transform: scale(.3); }
  to { opacity: 1; transform: none; }
}
@keyframes participation-check-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes participation-ticket-float {
  0%, 100% { transform: none; }
  40% { transform: translateY(-5px) rotate(5deg); }
  75% { transform: translateY(2px) rotate(-3deg); }
}
@keyframes participation-check-pulse {
  0%, 44%, 100% { transform: none; }
  18% { transform: scale(1.13) rotate(-4deg); }
  32% { transform: scale(.98); }
}
@keyframes participation-success-ripple {
  0% { opacity: 0; transform: scale(.82); }
  12% { opacity: .78; }
  43%, 100% { opacity: 0; transform: scale(1.43); }
}
@keyframes participation-confetti-burst {
  0% { opacity: 0; transform: scale(.68); }
  13% { opacity: 1; }
  36% { opacity: .72; }
  62%, 100% { opacity: 0; transform: translateY(8px) scale(1.14) rotate(7deg); }
}
@keyframes participation-success-sweep {
  0% { transform: translateX(0); }
  42%, 100% { transform: translateX(223px); }
}
@keyframes participation-number-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
#participation-title { margin: 0; max-width: 370px; font-size: 23px; line-height: 1.18; }
#participation-title:focus { outline: none; }
#participation-screen #participation-message { max-width: 335px; font-size: 14px; }
#participation-about { width: 100%; }
#participation-requirements { margin-top: 14px; }
#participation-requirements h3 { margin: 0 3px 7px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
#participation-channels { display: grid; gap: 1px; border-radius: 14px; background: var(--line); overflow: hidden; }
.participation-channel {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 8px; background: var(--panel);
}
.participation-channel strong { overflow-wrap: anywhere; font-size: 13px; }
.participation-channel-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--avatar-bg); color: var(--avatar-text); font-weight: 750;
}
.participation-channel button { width: auto; min-height: 34px; padding-inline: 8px; font-size: 12px; }
#participation-screen #participation-ticket { margin: 12px 0 0; text-align: center; }
.participation-captcha { display: grid; gap: 8px; padding: 12px; margin-bottom: 10px; }
.participation-captcha img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 10px; }
.participation-captcha input { width: 100%; }
#participation-captcha-status:empty { display: none; }
.participation-bonuses { margin-top: 12px; padding: 10px; background: var(--panel); border-radius: 12px; }
.participation-bonuses dl { margin: 6px 0 0; }
.participation-bonuses dt { margin-top: 6px; color: var(--muted); font-size: 12px; }
.participation-bonuses dd { margin: 2px 0 0; }
.bonus-ticket-numbers { font-family: monospace; overflow-wrap: anywhere; color: var(--text); }
.participation-actions {
  display: grid; gap: 7px; padding: 8px 12px max(12px, env(safe-area-inset-bottom));
  background: var(--bg);
}
.participation-actions button { width: 100%; min-height: 44px; }
[data-screen="missing"] #participation-home { background: var(--primary-bg); color: var(--primary-text); border-color: transparent; }
#chances-sheet {
  position: fixed; inset: auto 0 0; width: min(100%, 570px); max-width: none; margin: 0 auto;
  max-height: calc(100% - 54px); padding: 35px 12px max(12px, env(safe-area-inset-bottom));
  border-radius: 19px 19px 0 0; overflow: visible; text-align: center;
}
#chances-sheet[open] { display: flex; flex-direction: column; gap: 9px; }
@media (prefers-reduced-motion: no-preference) {
  #chances-sheet[open] { animation: chances-sheet-enter 360ms cubic-bezier(.22, 1, .36, 1) both; }
}
@keyframes chances-sheet-enter {
  from { transform: translateY(calc(100% + 40px)); opacity: .5; }
  to { transform: translateY(0); opacity: 1; }
}
#chances-title { margin: 0; padding: 0 33px; font-size: 17px; }
#chances-close { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; font-size: 20px; }
.chances-badge {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -53%);
  padding: 9px 16px; border: 3px solid var(--bg); border-radius: 100px;
  background: linear-gradient(110deg, #7d329d, #1467bf); color: #fff; font-size: 20px; font-weight: 800; white-space: nowrap;
}
.chances-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 12px; background: var(--well); }
.chances-tabs button { min-height: 32px; border-radius: 8px; }
.chances-content { display: grid; gap: 8px; min-height: 0; overflow: auto; padding: 6px 2px; }
.chances-content p:empty { display: none; }
#chances-sheet #chances-count { color: var(--accent); font-size: 15px; font-weight: 700; }
#chances-sheet #chances-notice { color: var(--text); }
#chances-link { font-size: 13px; }
#chances-boost-links { display: grid; gap: 5px; }
#chances-boost-links button { overflow-wrap: anywhere; }
.chances-actions { display: grid; gap: 6px; }
#manage-broadcast, #manage-blocks { margin-bottom: 10px; }
#blocks-items { display: grid; gap: 6px; }
#blocks-items li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
#blocks-pages:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#broadcast-dialog textarea { width: 100%; resize: vertical; }
#broadcast-photo { max-width: 100%; }
#broadcast-picture:not([hidden]) { display: block; max-width: 100%; max-height: 260px; margin: 10px auto; border-radius: 10px; object-fit: contain; }
#broadcast-sample { white-space: pre-wrap; margin: 10px 0; }
@media (min-width: 480px) {
  .shell { padding-right: 22px; padding-left: 22px; }
  .card { min-height: 210px; }
  .card h3 { font-size: 16px; }
  .card-action { font-size: 13px; }
}