:root {
  color-scheme: dark;
  --bg: #091018;
  --surface: #111b26;
  --surface-2: #172432;
  --surface-3: #203044;
  --text: #f5f2e9;
  --muted: #a9b6c5;
  --gold: #e4ad47;
  --gold-2: #ffd67e;
  --aqua: #4fc0df;
  --green: #62d49d;
  --red: #ff7d7d;
  --blue: #79aef8;
  --border: rgba(255,255,255,.11);
  --shadow: 0 18px 45px rgba(0,0,0,.34);
  --radius: 18px;
  --focus: 0 0 0 3px rgba(79,192,223,.42);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #edf3f8;
  --surface-3: #dce7f1;
  --text: #142033;
  --muted: #5b6a7c;
  --gold: #d99b28;
  --gold-2: #f4bf55;
  --aqua: #167d9d;
  --green: #147c4d;
  --red: #c93945;
  --blue: #2e6fbb;
  --border: rgba(20,32,51,.14);
  --shadow: 0 16px 36px rgba(32,49,70,.12);
  --focus: 0 0 0 3px rgba(22,125,157,.28);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background:
  radial-gradient(circle at 90% 0%, rgba(79,192,223,.13), transparent 28rem),
  radial-gradient(circle at 10% 10%, rgba(228,173,71,.12), transparent 30rem),
  linear-gradient(180deg, #081018, #0c1520 48%, #091018); }
a { color: var(--aqua); }
button, input, select, textarea { font: inherit; }
button { min-height: 44px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus); }
button:disabled { opacity: .48; cursor: not-allowed; }
.btn { border: 1px solid transparent; border-radius: 13px; padding: .72rem 1rem; cursor: pointer; font-weight: 800; color: #171006; background: linear-gradient(135deg, var(--gold), var(--gold-2)); }
.btn.secondary { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.btn.info { color: #06171d; background: var(--aqua); }
.btn.success { color: #071710; background: var(--green); }
.btn.danger { color: #210606; background: var(--red); }
.btn.warning { color: #171006; background: #ffcf6a; }
.btn.ghost { color: var(--muted); background: transparent; border-color: var(--border); }
.btn.small { min-height: 36px; padding: .45rem .7rem; font-size: .88rem; }
.card { min-width: 0; background: linear-gradient(180deg, rgba(17,27,38,.96), rgba(12,22,32,.96)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); }
.card-header h2, .card-header h3 { margin: 0; font-size: 1.03rem; }
.card-body { min-width: 0; padding: 1rem 1.1rem; }
.field { display: grid; gap: .42rem; }
.field label { color: #dfe8f2; font-size: .9rem; font-weight: 650; }
input, select, textarea { width: 100%; color: var(--text); background: #0b141e; border: 1px solid var(--border); border-radius: 12px; padding: .76rem .82rem; }
textarea { min-height: 96px; resize: vertical; }
.stack { min-width: 0; display: grid; gap: 1rem; }
.row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .85rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .85rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .85rem; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.kicker { color: var(--gold-2); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 900; }
.badge { display: inline-flex; align-items: center; gap: .35rem; width: max-content; max-width: 100%; padding: .35rem .62rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.05); color: var(--muted); font-size: .76rem; font-weight: 800; }
.badge.live, .badge.confirmed, .badge.leading, .badge.won { color: #a8f4c9; background: rgba(98,212,157,.12); border-color: rgba(98,212,157,.32); }
.badge.preview, .badge.info { color: #b9d8ff; background: rgba(121,174,248,.12); border-color: rgba(121,174,248,.3); }
.badge.closed, .badge.failed, .badge.outbid, .badge.lost { color: #ffc1c1; background: rgba(255,125,125,.12); border-color: rgba(255,125,125,.3); }
.badge.premium, .badge.pending { color: #ffe4a9; background: rgba(228,173,71,.12); border-color: rgba(228,173,71,.3); }
.notice { padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: rgba(121,174,248,.08); color: #d9e8fb; }
.notice.error { background: rgba(255,125,125,.1); color: #ffd1d1; }
.notice.success { background: rgba(98,212,157,.1); color: #c8ffe0; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .72rem .65rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: #d6e0ec; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
td { font-size: .92rem; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; padding: 1rem; background: rgba(0,0,0,.76); }
.dialog-backdrop.open { display: grid; }
.dialog { width: min(760px, 100%); max-height: 92vh; overflow: auto; border: 1px solid var(--border); border-radius: 20px; background: #0e1823; box-shadow: var(--shadow); }
.dialog-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--border); background: rgba(14,24,35,.97); }
.dialog-header h2 { margin: 0; font-size: 1.1rem; }
.dialog-body { padding: 1rem; }
.toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; display: grid; gap: .65rem; width: min(390px, calc(100vw - 2rem)); }
.toast { padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: #152232; box-shadow: var(--shadow); }
.toast.error { border-color: rgba(255,125,125,.5); }
.toast.success { border-color: rgba(98,212,157,.5); }
.page-loader { position: fixed; inset: 0; z-index: 1900; display: grid; place-items: center; padding: 1rem; pointer-events: none; opacity: 0; transition: opacity .1s ease; background: rgba(3,8,13,.08); backdrop-filter: blur(.6px); }
.page-loader.visible { opacity: 1; }
.page-loader.blocking { pointer-events: auto; background: rgba(3,8,13,.2); backdrop-filter: blur(1.5px); }
.page-loader.strong { background: rgba(3,8,13,.32); backdrop-filter: blur(2px); }
.page-loader.auth { background: rgba(3,8,13,.18); backdrop-filter: blur(5px) saturate(1.08); }
.page-loader-card { display: inline-flex; align-items: center; gap: .75rem; max-width: min(92vw, 420px); padding: .72rem .9rem; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: rgba(17,27,38,.9); box-shadow: 0 12px 30px rgba(0,0,0,.24); font-weight: 800; }
.spinner { width: 1.1rem; height: 1.1rem; border: 2px solid rgba(255,255,255,.25); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; }
:root[data-theme="light"] body { background:
  radial-gradient(circle at 90% 0%, rgba(22,125,157,.13), transparent 28rem),
  radial-gradient(circle at 10% 10%, rgba(217,155,40,.16), transparent 30rem),
  linear-gradient(180deg, #f8fbff, #eef4f9 48%, #f6f8fb); }
:root[data-theme="light"] .btn { color: #1d1304; }
:root[data-theme="light"] .btn.secondary,
:root[data-theme="light"] .btn.ghost { color: var(--text); background: #f6f9fc; border-color: var(--border); }
:root[data-theme="light"] .card { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,253,.98)); }
:root[data-theme="light"] .field label,
:root[data-theme="light"] th { color: #26384d; }
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { color: var(--text); background: #fff; border-color: rgba(20,32,51,.18); }
:root[data-theme="light"] .badge { background: rgba(20,32,51,.05); color: #4d5c6e; }
:root[data-theme="light"] .badge.live,
:root[data-theme="light"] .badge.confirmed,
:root[data-theme="light"] .badge.leading,
:root[data-theme="light"] .badge.won { color: #075b37; background: rgba(20,124,77,.1); border-color: rgba(20,124,77,.28); }
:root[data-theme="light"] .badge.preview,
:root[data-theme="light"] .badge.info { color: #1d5f9e; background: rgba(46,111,187,.1); border-color: rgba(46,111,187,.24); }
:root[data-theme="light"] .badge.closed,
:root[data-theme="light"] .badge.failed,
:root[data-theme="light"] .badge.outbid,
:root[data-theme="light"] .badge.lost { color: #9b1e2a; background: rgba(201,57,69,.1); border-color: rgba(201,57,69,.26); }
:root[data-theme="light"] .badge.premium,
:root[data-theme="light"] .badge.pending { color: #7b4b04; background: rgba(217,155,40,.13); border-color: rgba(217,155,40,.34); }
:root[data-theme="light"] .notice { color: #25445f; background: rgba(46,111,187,.08); }
:root[data-theme="light"] .notice.error { color: #8d1d28; background: rgba(201,57,69,.08); }
:root[data-theme="light"] .notice.success { color: #075b37; background: rgba(20,124,77,.08); }
:root[data-theme="light"] .dialog-backdrop { background: rgba(17,25,36,.42); }
:root[data-theme="light"] .dialog { background: #ffffff; }
:root[data-theme="light"] .dialog-header { background: rgba(255,255,255,.96); }
:root[data-theme="light"] .toast { background: #ffffff; }
:root[data-theme="light"] .page-loader { background: rgba(255,255,255,.14); }
:root[data-theme="light"] .page-loader.blocking { background: rgba(255,255,255,.4); }
:root[data-theme="light"] .page-loader.strong { background: rgba(255,255,255,.58); }
:root[data-theme="light"] .page-loader.auth { background: rgba(255,255,255,.34); }
:root[data-theme="light"] .page-loader-card { background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(32,49,70,.16); }
:root[data-theme="light"] .spinner { border-color: rgba(20,32,51,.18); border-top-color: currentColor; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }