/* Общая основа страниц сервиса: гостевой /raffle/ и админки /raffle/admin/.
   Один файл, чтобы у них совпадали цвета, отступы и элементы управления —
   ведущий переключается между ними во время розыгрыша. */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f3;
  --line: #e6e8ec;
  --line-soft: #f0f2f5;

  --ink: #14161c;
  --ink-2: #4b5565;
  --ink-3: #8a93a3;

  --gold: #926f12;
  --gold-line: #e3c97e;
  --gold-soft: #fdf6e6;
  --gold-fill: #d9b64a;
  --gold-fill-2: #c79f2c;

  --green: #14803b;
  --green-line: #8bd6a5;
  --green-soft: #eaf7ee;
  --danger: #c22b2b;
  --danger-soft: #fdecec;

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 22, 28, 0.05), 0 8px 24px -12px rgba(20, 22, 28, 0.15);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.wrap { max-width: 620px; margin: 0 auto; padding: 26px 16px 60px; }
.wrap.wide { max-width: 900px; }

/* ── типографика ── */
h1 { font-size: 27px; line-height: 1.15; margin: 10px 0 6px; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 18px; margin: 0 0 10px; font-weight: 700; }
.lead { color: var(--ink-2); font-size: 15px; margin: 0; }
.cap {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.hint { font-size: 12px; color: var(--ink-3); }
.muted { color: var(--ink-2); }
.error {
  color: var(--danger); background: var(--danger-soft); border: 1px solid #f4c4c4;
  border-radius: var(--r-sm); padding: 9px 12px; font-size: 13px;
}

/* ── карточки ── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.card.gold {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, var(--gold-soft), var(--surface) 62%);
}
.card.tight { padding: 14px 16px; }

/* ── элементы управления ── */
button, .btn {
  padding: 13px 18px; font-size: 15px; font-weight: 700; border: none;
  border-radius: var(--r-md); cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, var(--gold-fill), var(--gold-fill-2));
  color: #241d06;
}
button:disabled { opacity: 0.5; cursor: default; }
button.ghost {
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line);
  font-weight: 600; font-size: 13px; padding: 9px 14px;
}
button.ghost:hover:not(:disabled) { background: var(--surface-2); }
button.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid #f4c4c4; }

input, select, textarea {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold-fill); box-shadow: 0 0 0 3px rgba(217, 182, 74, 0.2);
}
label { font-size: 13px; color: var(--ink-2); display: block; margin-bottom: 5px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 160px; }
.row > .fit { flex: 0 0 auto; }

/* ── бейджи ── */
.pill {
  display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px;
  font-weight: 600; background: var(--surface-3); color: var(--ink-2);
}
.pill.live { background: var(--green-soft); color: var(--green); }
.pill.done { background: var(--gold-soft); color: var(--gold); }

/* ── плитки чисел ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.tile {
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 11px 13px;
}
.tile b { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; }
.tile span { font-size: 12px; color: var(--ink-3); }

/* ── таблицы ── */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-weight: 600; color: var(--ink-3); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 6px;
  background: var(--surface); position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid var(--line);
}
td { padding: 9px 6px; border-top: 1px solid var(--line-soft); color: var(--ink-2); }
tbody tr:nth-child(even) td { background: var(--surface-2); }
.scroll { max-height: 58vh; overflow: auto; border-radius: var(--r-md); }

/* ── медали ── */
.medal {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff;
}
.medal.p1 { background: linear-gradient(160deg, #e8c65c, #b8891a); }
.medal.p2 { background: linear-gradient(160deg, #cfd4dc, #9aa2ae); }
.medal.p3 { background: linear-gradient(160deg, #e0a874, #ad7238); }
.medal.px { background: linear-gradient(160deg, #cbd2dc, #aab2be); }

footer { margin-top: 24px; font-size: 12px; color: var(--ink-3); text-align: center; }
footer a { color: var(--ink-2); }