:root {
  color-scheme: dark;
  --background: #0e0b14;
  --panel: #18131f;
  --panel-light: #211a2c;
  --text: #f6f2fb;
  --muted: #aaa0b7;
  --border: rgba(255, 255, 255, 0.09);
  --orange: #ff7a1a;
  --orange-light: #ff9d52;
  --purple: #6f42d9;
  --purple-light: #9b76f2;
  --danger: #e34b5f;
  --radius: 18px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; }

.landing-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 0%, rgba(111, 66, 217, 0.26), transparent 34rem),
    radial-gradient(circle at 10% 100%, rgba(255, 122, 26, 0.16), transparent 32rem),
    var(--background);
}
.landing-topbar {
  min-height: 72px;
  padding: 14px max(24px, calc((100% - 1180px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
}
.landing-brand { display: flex; align-items: center; color: var(--text); text-decoration: none; font-size: 18px; font-weight: 800; }
.landing-status { padding: 7px 11px; color: #cbb9f8; background: rgba(111, 66, 217, 0.12); border: 1px solid rgba(155, 118, 242, 0.34); border-radius: 999px; font-size: 12px; font-weight: 750; }
.landing-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 88px 0 70px; }
.landing-hero { max-width: 880px; }
.landing-hero h1 { margin: 14px 0 22px; font-size: clamp(42px, 7vw, 76px); letter-spacing: -0.045em; line-height: 1.02; }
.landing-hero > p { max-width: 720px; margin: 0; color: var(--muted); font-size: clamp(18px, 2.3vw, 23px); line-height: 1.55; }
.landing-actions { margin: 32px 0 15px; display: flex; flex-wrap: wrap; gap: 10px; }
.landing-actions .button { min-height: 50px; padding-inline: 22px; }
.landing-hero > small { color: #776d82; }
.landing-steps { margin-top: 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.landing-steps article { padding: 22px; background: rgba(24, 19, 31, 0.78); border: 1px solid var(--border); border-radius: 16px; }
.landing-steps article > span { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 18px; color: #180c03; background: var(--orange); border-radius: 9px; font-weight: 900; }
.landing-steps strong { font-size: 17px; }
.landing-steps p { margin: 8px 0 0; color: var(--muted); line-height: 1.45; }

.control-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 0%, rgba(111, 66, 217, 0.18), transparent 28rem),
    radial-gradient(circle at 0% 100%, rgba(255, 122, 26, 0.12), transparent 30rem),
    var(--background);
}

.topbar {
  height: 72px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: rgba(14, 11, 20, 0.8);
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 9px;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(145deg, var(--orange), var(--purple));
  box-shadow: 0 7px 22px rgba(111, 66, 217, 0.32);
}

.brand-name { font-size: 18px; font-weight: 750; vertical-align: middle; }
.connection { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.connection span:first-child { width: 9px; height: 9px; border-radius: 50%; background: #c49332; }
.connection span.online { background: #45c985; box-shadow: 0 0 12px rgba(69, 201, 133, 0.7); }
.connection span.offline { background: var(--danger); }

.control-shell {
  width: min(1500px, calc(100% - 48px));
  margin: 24px auto;
}

.control-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(500px, 1.28fr);
  gap: 20px;
  align-items: start;
}

.setup-strip {
  margin-bottom: 20px;
  padding: 17px 20px;
  display: grid;
  grid-template-columns: 1.25fr repeat(3, 1fr);
  gap: 14px;
  align-items: center;
  background: rgba(24, 19, 31, 0.92);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.setup-intro { display: grid; gap: 5px; }
.setup-intro strong { font-size: 17px; }
.setup-step { min-height: 48px; display: flex; align-items: center; gap: 11px; }
.setup-step > span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 9px; color: #160b03; background: var(--orange); font-weight: 900; }
.setup-step div { display: grid; gap: 4px; }
.setup-step small { color: var(--muted); }
.setup-step a, .setup-step button { padding: 0; color: #cbb9f8; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.setup-step a:hover, .setup-step button:hover { color: var(--orange-light); }

.panel {
  padding: 26px;
  background: rgba(24, 19, 31, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.panel-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.panel-heading-actions .button { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.auction-history-panel { margin-top: 20px; }
.history-library-heading h2 { margin-bottom: 8px; }
.history-library-heading p { margin: 0; max-width: 820px; color: var(--muted); line-height: 1.45; }
.auction-list { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.auction-record { min-width: 0; padding: 15px; display: grid; gap: 12px; background: rgba(255, 255, 255, 0.028); border: 1px solid var(--border); border-radius: 13px; }
.auction-record-top { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.auction-record-title { min-width: 0; display: grid; gap: 5px; }
.auction-record-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auction-record-title small { color: var(--muted); }
.auction-record-status { flex: 0 0 auto; padding: 5px 8px; color: var(--muted); background: var(--panel-light); border-radius: 999px; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.auction-record-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.auction-record-stats div { padding: 9px; display: grid; gap: 3px; background: rgba(255, 255, 255, 0.025); border-radius: 9px; }
.auction-record-stats span { color: var(--muted); font-size: 10px; }
.auction-record-stats strong { color: var(--orange-light); font-size: 14px; }
.auction-record-winner { overflow: hidden; color: #cbb9f8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.auction-record-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.auction-record-actions .button { min-height: 35px; padding: 7px 10px; font-size: 11px; }

.management-dialog, .template-editor-dialog, .archive-dialog { max-height: calc(100vh - 40px); padding: 24px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7); }
.management-dialog { width: min(1060px, calc(100% - 28px)); }
.template-editor-dialog { width: min(720px, calc(100% - 28px)); }
.archive-dialog { width: min(760px, calc(100% - 28px)); }
.management-dialog::backdrop, .template-editor-dialog::backdrop, .archive-dialog::backdrop { background: rgba(5, 3, 8, 0.78); backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dialog-heading h2 { margin-bottom: 8px; }
.dialog-heading p { margin: 0; color: var(--muted); }
.dialog-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.dialog-section-heading { margin-bottom: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog-section-heading h3 { margin: 0 0 5px; font-size: 18px; }
.dialog-section-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.dialog-actions .button { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.template-list-heading { display: grid; grid-template-columns: 170px 1fr; gap: 9px; align-items: stretch; }
.template-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.template-record { min-width: 0; display: grid; grid-template-rows: 1fr auto; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.template-card { width: 100%; min-height: 112px; padding: 14px; display: grid; align-content: start; gap: 7px; color: var(--text); text-align: left; background: transparent; border: 0; cursor: pointer; }
.template-card:hover:not(:disabled) { background: rgba(255, 122, 26, 0.08); }
.template-card:disabled { opacity: 0.4; cursor: not-allowed; }
.template-card strong { font-size: 14px; }
.template-card span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.template-card-custom { min-height: 100%; border: 1px dashed rgba(155, 118, 242, 0.42); border-radius: 12px; background: rgba(111, 66, 217, 0.07); }
.template-record-actions { padding: 8px 10px; display: flex; gap: 12px; border-top: 1px solid var(--border); }
.text-button { padding: 0; color: #cbb9f8; background: none; border: 0; cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--orange-light); }
.danger-text { color: #ff8997; }
#restore-templates { margin-top: 14px; color: var(--muted); }
.draft-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.draft-record { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(111, 66, 217, 0.07); border: 1px solid rgba(155, 118, 242, 0.2); border-radius: 11px; }
.draft-record-copy { min-width: 0; display: grid; gap: 5px; }
.draft-record-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-record-copy small { color: var(--muted); }
.draft-record .button { min-height: 34px; padding: 7px 10px; font-size: 11px; }
.template-editor-dialog form { margin-top: 16px; }
.template-settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.template-settings-grid small { color: var(--muted); }
#add-template-lot { width: 100%; margin: 2px 0 17px; }
.archive-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.archive-dialog-heading h2 { margin-bottom: 16px; }
.archive-result-summary { margin-bottom: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.archive-result-summary div { padding: 12px; display: grid; gap: 4px; background: rgba(255, 255, 255, 0.035); border-radius: 10px; }
.archive-result-summary span { color: var(--muted); font-size: 11px; }
.archive-result-summary strong { color: var(--orange-light); }
.archive-lots { display: grid; gap: 7px; }
.archive-lot { padding: 11px 12px; display: flex; justify-content: space-between; gap: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-radius: 9px; }
.archive-lot.winner { border-color: rgba(255, 122, 26, 0.45); }
.archive-lot strong { color: var(--orange-light); }
.archive-history-title { margin: 18px 0 9px; }

.panel-heading, .live-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

h1, h2 { margin: 4px 0 18px; line-height: 1.15; }
h1 { font-size: 30px; }
h2 { font-size: 21px; }
.eyebrow { color: var(--orange-light); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

label { display: grid; gap: 8px; margin-bottom: 17px; color: var(--muted); font-size: 14px; }
.field-title { margin-bottom: 8px; color: var(--muted); font-size: 14px; }
.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.toggle-field { padding: 12px; display: flex; align-items: flex-start; gap: 10px; color: var(--text); background: rgba(111, 66, 217, 0.1); border: 1px solid rgba(155, 118, 242, 0.24); border-radius: 11px; cursor: pointer; }
.toggle-field input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--orange); }
.toggle-field > span { display: grid; gap: 4px; }
.toggle-field small { color: var(--muted); line-height: 1.35; }
.anti-snipe-field[hidden] { display: none; }
input, textarea {
  width: 100%;
  padding: 12px 13px;
  color: var(--text);
  background: #100c16;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}
textarea { resize: vertical; }
input:focus, textarea:focus { border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(111, 66, 217, 0.18); }
select {
  width: 100%;
  padding: 9px 32px 9px 10px;
  color: var(--text);
  background: #100c16;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
}
select:focus { border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(111, 66, 217, 0.18); }
select:disabled { opacity: 0.48; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.lot-input-row { display: grid; grid-template-columns: 1fr 42px; gap: 8px; margin-bottom: 8px; }
.remove-lot { border: 1px solid var(--border); border-radius: 10px; background: transparent; cursor: pointer; font-size: 24px; }
.remove-lot:hover { border-color: var(--danger); color: #ff8997; }

.button {
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 750;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.button:disabled { opacity: 0.42; cursor: not-allowed; }
.button-primary { color: #160b03; background: linear-gradient(135deg, var(--orange), var(--orange-light)); }
.button-secondary { background: rgba(111, 66, 217, 0.16); border-color: rgba(155, 118, 242, 0.42); }
.button-danger { background: rgba(227, 75, 95, 0.14); border-color: rgba(227, 75, 95, 0.45); }
.button-ghost { color: var(--muted); background: transparent; border-color: var(--border); }
.full-width { width: 100%; margin-top: 5px; }
#add-lot { width: 100%; margin: 2px 0 17px; }

.status-badge { padding: 7px 11px; border-radius: 999px; background: var(--panel-light); color: var(--muted); font-size: 13px; font-weight: 750; }
.status-badge[data-status="running"] { color: #64e1a0; background: rgba(69, 201, 133, 0.13); }
.status-badge[data-status="finished"] { color: #ff8494; background: rgba(227, 75, 95, 0.13); }
.status-badge[data-status="paused"] { color: #bba4f6; background: rgba(111, 66, 217, 0.18); }

.big-timer { min-width: 115px; text-align: right; color: var(--orange-light); font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; }
.live-rules { margin: -10px 0 15px; color: var(--muted); font-size: 13px; }
.action-row { display: flex; flex-wrap: wrap; gap: 9px; }
.live-summary { margin-top: 18px; display: grid; grid-template-columns: 0.7fr 1fr 1.6fr; gap: 9px; }
.live-summary > div { min-width: 0; padding: 13px 14px; display: grid; gap: 5px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border); border-radius: 11px; }
.live-summary span { color: var(--muted); font-size: 12px; }
.live-summary strong { overflow: hidden; color: var(--orange-light); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.winner-card { margin-top: 12px; padding: 15px 17px; display: grid; gap: 5px; border: 1px solid rgba(255, 122, 26, 0.45); border-radius: 12px; background: linear-gradient(135deg, rgba(111, 66, 217, 0.22), rgba(255, 122, 26, 0.16)); }
.winner-card[hidden] { display: none; }
.winner-card span { color: var(--orange-light); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.winner-card strong { font-size: 19px; }
.moderation-section { margin-top: 22px; }
.moderation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.moderation-heading h2 { margin-bottom: 11px; }
.proposal-count { padding: 6px 9px; color: var(--muted); background: var(--panel-light); border-radius: 999px; font-size: 12px; font-weight: 800; }
.proposal-count.has-items { color: #1a0c02; background: var(--orange); }
.proposal-list { display: grid; gap: 8px; }
.proposal-card { padding: 13px; display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(420px, 1.7fr); gap: 13px; align-items: center; background: rgba(255, 122, 26, 0.06); border: 1px solid rgba(255, 122, 26, 0.22); border-radius: 12px; }
.proposal-copy { min-width: 0; display: grid; gap: 4px; }
.proposal-copy span, .proposal-copy small { color: var(--muted); font-size: 12px; }
.proposal-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proposal-actions { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto auto; gap: 7px; }
.proposal-actions .button { min-height: 38px; padding: 8px 10px; font-size: 12px; }
.empty-state.compact { padding: 14px; }
.divider { height: 1px; margin: 24px 0; background: var(--border); }
.link-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.history-heading { margin-top: 24px; }
.history-heading h2 { margin-bottom: 9px; }
.history-heading p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.history { display: grid; gap: 6px; }
.history-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(140px, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, 0.025); border-radius: 9px; }
.history-row.excluded { opacity: 0.62; }
.history-row.excluded > strong { text-decoration: line-through; }
.history-donor-cell { min-width: 0; display: grid; gap: 3px; }
.history-donor, .history-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-message { color: var(--muted); }
.history-lot-control { margin: 0; }
.history-row strong { color: var(--orange-light); }
.history-action { padding: 7px 9px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 12px; }
.history-action:hover { color: var(--text); border-color: var(--purple-light); }
.empty-state { padding: 22px; color: var(--muted); text-align: center; border: 1px dashed var(--border); border-radius: 10px; }

.toast { position: fixed; right: 24px; bottom: 24px; padding: 13px 18px; border-radius: 11px; background: #2d2340; opacity: 0; transform: translateY(12px); pointer-events: none; transition: 160ms ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { background: #5b202c; }

.overlay-page { min-height: 100vh; overflow: hidden; background: transparent; }
.overlay-card {
  position: relative;
  width: min(850px, calc(100vw - 40px));
  margin: 20px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(18, 13, 26, 0.94), rgba(28, 19, 40, 0.94));
  box-shadow: 0 25px 75px rgba(0, 0, 0, 0.45);
}
.overlay-topline { display: flex; justify-content: space-between; align-items: center; }
.overlay-brand { color: #d9cfdf; font-size: 16px; font-weight: 800; }
.overlay-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
.overlay-timer { color: var(--orange-light); font-size: 32px; font-weight: 900; font-variant-numeric: tabular-nums; }
.overlay-timer[data-status="paused"] { color: var(--purple-light); }
.overlay-timer[data-status="finished"] { color: #ff8494; }
.overlay-card h1 { margin: 22px 0; max-width: 700px; font-size: 34px; }
.overlay-lots { display: grid; gap: 11px; }
.overlay-lot { padding: 14px 16px; border-radius: 13px; background: rgba(255, 255, 255, 0.055); border: 1px solid transparent; transition: 180ms ease; }
.overlay-lot.leader { border-color: rgba(255, 122, 26, 0.65); background: rgba(255, 122, 26, 0.09); }
.overlay-lot-info { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; }
.overlay-position { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #cdbce1; background: rgba(111, 66, 217, 0.25); font-weight: 850; }
.overlay-lot-title { font-size: 19px; font-weight: 750; }
.overlay-lot strong { color: var(--orange-light); font-size: 20px; }
.progress-track { height: 6px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.075); }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--orange)); transition: width 380ms cubic-bezier(.2,.8,.2,1); }
.overlay-result { margin-top: 16px; padding: 14px 16px; border-radius: 12px; text-align: center; color: #fff; font-size: 20px; font-weight: 850; background: linear-gradient(135deg, rgba(111, 66, 217, 0.65), rgba(255, 122, 26, 0.65)); }
.donation-flash { position: absolute; left: 50%; bottom: -65px; max-width: calc(100% - 70px); padding: 12px 18px; border-radius: 999px; background: var(--orange); color: #1a0c02; font-weight: 850; opacity: 0; transform: translate(-50%, 15px) scale(0.96); transition: 220ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donation-flash.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

.viewer-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% -10%, rgba(111, 66, 217, 0.28), transparent 32rem),
    radial-gradient(circle at -10% 80%, rgba(255, 122, 26, 0.18), transparent 34rem),
    var(--background);
}
.viewer-topbar {
  min-height: 72px;
  padding: 14px max(20px, calc((100% - 860px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(14, 11, 20, 0.82);
}
.viewer-brand { display: flex; align-items: center; font-size: 18px; font-weight: 800; }
.demo-badge { padding: 7px 11px; border: 1px solid rgba(155, 118, 242, 0.35); border-radius: 999px; color: #cbb9f8; background: rgba(111, 66, 217, 0.12); font-size: 12px; font-weight: 750; }
.viewer-shell { width: min(820px, calc(100% - 28px)); margin: 40px auto 70px; }
.viewer-intro { margin-bottom: 22px; }
.viewer-intro h1 { margin: 7px 0 10px; font-size: clamp(30px, 5vw, 48px); }
.viewer-intro p { max-width: 680px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
.viewer-payment-card {
  padding: 26px;
  background: rgba(24, 19, 31, 0.94);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}
.viewer-state { margin-bottom: 24px; padding: 13px 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); }
.viewer-state span { color: var(--muted); }
.viewer-timer { color: var(--orange-light); font-size: 20px; font-variant-numeric: tabular-nums; }
.viewer-state[data-status="running"] { background: rgba(69, 201, 133, 0.12); }
.viewer-state[data-status="running"] strong { color: #67daa0; }
.viewer-state[data-status="finished"] { background: rgba(227, 75, 95, 0.1); }
fieldset { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
legend { width: 100%; margin-bottom: 12px; color: #d6cce0; font-size: 14px; font-weight: 800; }
.viewer-lots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.viewer-lots legend { grid-column: 1 / -1; }
.viewer-lot {
  min-height: 108px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--text);
  text-align: left;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: 150ms ease;
}
.viewer-lot:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(255, 122, 26, 0.65); }
.viewer-lot.selected { border-color: var(--orange); background: rgba(255, 122, 26, 0.1); box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.08); }
.viewer-lot-custom { border-style: dashed; }
.viewer-lot.leader:not(.selected) { border-color: rgba(155, 118, 242, 0.42); }
.viewer-lot:disabled { opacity: 0.45; cursor: not-allowed; }
.viewer-lot-check { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 8px; color: transparent; background: rgba(255, 255, 255, 0.07); font-weight: 900; }
.viewer-lot.selected .viewer-lot-check { color: #190c02; background: var(--orange); }
.viewer-lot-copy { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.viewer-lot-copy strong { overflow-wrap: anywhere; }
.viewer-lot-copy small { color: var(--muted); }
.viewer-lot-copy em { width: max-content; padding: 3px 7px; color: #cbb9f8; background: rgba(111, 66, 217, 0.2); border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.proposal-field { margin: -10px 0 24px; padding: 14px; background: rgba(111, 66, 217, 0.1); border: 1px solid rgba(155, 118, 242, 0.28); border-radius: 12px; }
.proposal-field[hidden] { display: none; }
.proposal-field small { color: var(--muted); line-height: 1.4; }
.amount-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.amount-buttons button { padding: 12px 8px; color: var(--text); background: #110d17; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 800; }
.amount-buttons button.selected { color: #1a0c02; background: var(--orange); border-color: var(--orange); }
.amount-buttons button:disabled { opacity: 0.35; cursor: not-allowed; }
.minimum-donation-note { margin: -5px 0 11px; color: var(--muted); font-size: 12px; }
.custom-amount { margin: 13px 0 0; }
.custom-amount div { position: relative; }
.custom-amount div span { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--muted); }
.custom-amount input { padding-right: 38px; }
.viewer-details { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; }
.viewer-details legend { grid-column: 1 / -1; }
.viewer-details label { margin: 0; }
.viewer-details small { color: #776d82; }
.viewer-pay-button { width: 100%; min-height: 54px; font-size: 17px; }
.payment-note { margin-top: 11px; color: #776d82; text-align: center; font-size: 12px; }
.payment-success { padding: 26px; display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; background: rgba(24, 19, 31, 0.94); border: 1px solid rgba(69, 201, 133, 0.32); border-radius: 22px; }
.payment-success[hidden] { display: none; }
.success-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #092014; background: #58d393; font-size: 26px; font-weight: 900; }
.payment-success strong { font-size: 20px; }
.payment-success p { margin: 6px 0 0; color: var(--muted); }

@media (max-width: 980px) {
  .auction-list { grid-template-columns: 1fr 1fr; }
  .setup-strip { grid-template-columns: 1fr 1fr; }
  .control-layout { grid-template-columns: 1fr; }
  .proposal-card { grid-template-columns: 1fr; }
  .template-list-heading { grid-template-columns: 1fr; }
  .template-card-custom { min-height: 92px; }
}

@media (max-width: 620px) {
  .landing-topbar { padding-inline: 16px; }
  .landing-status { max-width: 130px; text-align: center; }
  .landing-main { width: calc(100% - 28px); padding-top: 54px; }
  .landing-hero h1 { font-size: 42px; }
  .landing-steps { margin-top: 48px; grid-template-columns: 1fr; }
  .topbar { padding: 0 16px; }
  .connection-text { display: none; }
  .control-shell { width: calc(100% - 24px); margin: 12px auto; }
  .setup-strip { grid-template-columns: 1fr; padding: 16px; }
  .panel { padding: 18px; }
  .panel-heading { display: grid; }
  .panel-heading-actions { justify-content: flex-start; margin-bottom: 14px; }
  .live-header { display: block; }
  .link-actions { justify-content: flex-start; margin: 12px 0; }
  .big-timer { text-align: left; margin-bottom: 14px; }
  .settings-row, .live-summary, .template-settings-grid { grid-template-columns: 1fr; }
  .proposal-actions { grid-template-columns: 1fr; }
  .history-row { grid-template-columns: 1fr auto; }
  .history-lot-control { grid-column: 1 / -1; grid-row: 2; }
  .auction-list, .template-list, .draft-list { grid-template-columns: 1fr; }
  .management-dialog, .template-editor-dialog, .archive-dialog { padding: 18px; }
  .dialog-heading, .dialog-section-heading { display: grid; }
  .dialog-actions { justify-content: flex-start; }
  .archive-result-summary { grid-template-columns: 1fr; }
  .viewer-topbar { align-items: flex-start; }
  .demo-badge { max-width: 150px; text-align: center; }
  .viewer-shell { margin-top: 26px; }
  .viewer-payment-card { padding: 18px; }
  .viewer-state { grid-template-columns: 1fr auto; }
  .viewer-state span { grid-column: 1 / -1; grid-row: 2; }
  .viewer-timer { grid-column: 2; grid-row: 1; }
  .viewer-lots { grid-template-columns: 1fr; }
  .amount-buttons { grid-template-columns: 1fr 1fr; }
  .viewer-details { grid-template-columns: 1fr; }
  .viewer-details legend { grid-column: auto; }
  .payment-success { grid-template-columns: 52px 1fr; }
  .payment-success .button { grid-column: 1 / -1; }
}