@font-face {
  font-family: "Manrope";
  src: url("/public/assets/fonts/manrope-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0400-052F, U+1C80-1C8A, U+20B4, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  src: url("/public/assets/fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  color-scheme: dark;
  --bg: #090711;
  --surface: #120d20;
  --surface-2: #1a1230;
  --line: rgba(255,255,255,.09);
  --text: #f8f6ff;
  --muted: #aaa2bd;
  --purple: #8b5cf6;
  --pink: #f13f9b;
  --cyan: #2dd4d8;
  --green: #4ee88b;
  --party-gold: #f6c85f;
  --party-coral: #ff8a5b;
  --party-lilac: #c4b5fd;
  --danger: #ff4f87;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0,0,0,.34);
  font-family: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); min-height: 100%; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -15%, #2f155c 0, transparent 42%),
    radial-gradient(circle at 12% 18%, rgba(246,200,95,.09), transparent 22%),
    radial-gradient(circle at 88% 28%, rgba(255,138,91,.08), transparent 24%),
    var(--bg);
  overflow-x: hidden;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.16;
  background-image:
    radial-gradient(circle, var(--party-gold) 0 2px, transparent 2.5px),
    radial-gradient(circle, var(--party-coral) 0 1.5px, transparent 2px),
    linear-gradient(35deg, transparent 0 46%, var(--party-lilac) 46% 54%, transparent 54%);
  background-size:96px 96px,132px 132px,118px 118px;
  background-position:12px 20px,60px 72px,30px 42px;
}
body.sheet-visible { overflow:hidden; }
button, input, textarea, select {
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
button { color: inherit; }
.ambient { position: fixed; width: 280px; height: 280px; border-radius: 50%; filter: blur(100px); opacity: .1; pointer-events: none; }
.ambient-one { background: var(--pink); right: -180px; top: 15%; }
.ambient-two { background: var(--cyan); left: -190px; bottom: 10%; }
.app-shell { width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto; position: relative; padding: max(20px, env(safe-area-inset-top)) 16px calc(92px + env(safe-area-inset-bottom)); }
.splash { min-height: 75vh; display: grid; place-items: center; align-content: center; gap: 14px; font-size: 24px; }
.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg,var(--purple),var(--pink) 62%,var(--party-gold)); box-shadow: 0 0 30px rgba(246,200,95,.22), 0 0 34px rgba(139,92,246,.36); }
.brand-mark svg { width: 30px; height: 30px; fill: none; stroke: white; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.spinner { width: 24px; height: 24px; border: 2px solid var(--line); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.home { display: flex; flex-direction: column; min-height: calc(100dvh - 120px); }
.home-hero { padding: 42px 4px 28px; }
.eyebrow { color: var(--cyan); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 14px; font-size: clamp(34px,10vw,48px); line-height: .98; letter-spacing: -.045em; }
h2 { margin-bottom: 8px; font-size: 26px; letter-spacing: -.025em; }
h3 { margin-bottom: 8px; font-size: 17px; }
.muted { color: var(--muted); line-height: 1.5; }
.panel, .question-card, .leader-row {
  background: linear-gradient(145deg, rgba(26,18,48,.96), rgba(16,11,29,.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel { padding: 18px; margin-bottom: 14px; }
.home-actions { margin-top: auto; }
.home-create { width:100%; margin-top:12px; }
.btn {
  min-height: 48px; border: 0; border-radius: 14px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 800; cursor: pointer; transition: transform .15s, opacity .15s, border-color .15s; text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { width: 100%; background: linear-gradient(110deg,var(--purple),var(--pink) 58%,var(--party-coral)); box-shadow: 0 10px 30px rgba(139,92,246,.25), 0 0 18px rgba(246,200,95,.12); }
.btn-secondary { width: 100%; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.btn-ghost { background: transparent; border: 1px solid var(--line); min-height: 44px; }
.btn-danger { background: rgba(255,79,135,.12); border: 1px solid rgba(255,79,135,.35); color: #ff8db3; }
.btn-success { background: rgba(78,232,139,.12); border: 1px solid rgba(78,232,139,.34); color: var(--green); }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; }
.icon-btn {
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.05);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; -webkit-appearance: none; appearance: none;
}
.icon-btn svg, .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field label { font-size: 13px; color: var(--muted); font-weight: 700; }
.input {
  width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,3,11,.72); color: var(--text); padding: 12px 14px; outline: none; font-size: 16px;
}
.input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(139,92,246,.14); }
textarea.input { resize: vertical; min-height: 78px; }
.code-cells { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.code-cell {
  width:100%; min-width:0; height:56px; padding:0; border:1px solid var(--line); border-radius:12px; background:rgba(5,3,11,.72);
  color:var(--text); outline:none; text-align:center; text-transform:uppercase; font-size:22px; font-weight:900; caret-color:var(--cyan);
  -webkit-appearance:none; appearance:none;
}
.code-cell::placeholder { color:rgba(248,246,255,.32); opacity:1; }
.code-cell:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,92,246,.14); }
.field-status { min-height: 18px; font-size: 13px; font-weight: 700; color: var(--muted); }
.field-status.checking { color: var(--cyan); }
.field-status.success { color: var(--green); }
.field-status.error { color: #ff8db3; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.page-head > div { min-width: 0; }
.page-head h2 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.question-editor { padding: 14px; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; background: rgba(255,255,255,.025); }
.editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.option-edit { display: flex; gap: 8px; margin-top: 8px; }
.option-edit .input { min-height: 44px; }
.options + .btn { margin-top: 16px; }
.room-header {
  position:sticky; z-index:20; top:env(safe-area-inset-top); min-height:72px; margin:-4px -16px 14px; padding:8px 16px;
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px;
  background:rgba(9,7,17,.9); border-bottom:1px solid var(--line); backdrop-filter:blur(20px);
}
.room-header::before { content:""; position:absolute; left:0; right:0; bottom:100%; height:max(20px,env(safe-area-inset-top)); background:rgba(9,7,17,.9); pointer-events:none; }
.room-code {
  min-width:80px; height:42px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(246,200,95,.45); border-radius:13px; background:linear-gradient(110deg,rgba(139,92,246,.22),rgba(241,63,155,.16),rgba(246,200,95,.10));
  color:var(--text); font-weight:900; letter-spacing:.08em; -webkit-appearance:none; appearance:none;
}
.room-heading { min-width:0; text-align:right; }
.room-heading h1 { margin:0 0 3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:17px; line-height:1.2; letter-spacing:-.02em; }
.room-heading span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:12px; font-weight:700; }
.chip { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:99px; background:rgba(8,5,15,.72); border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(8px); font-size:12px; font-weight:800; }
.balance { color: var(--green); font-variant-numeric: tabular-nums; }
.tabs { display:flex; gap:7px; overflow:auto; padding:2px 1px 10px; scrollbar-width:none; }
.tab { border:1px solid var(--line); background:rgba(255,255,255,.04); border-radius:99px; min-height:44px; padding:0 13px; white-space:nowrap; font-weight:700; color:var(--muted); }
.tab.active { color:white; border-color:rgba(139,92,246,.55); background:rgba(139,92,246,.19); }
.question-card { position:relative; padding:16px; margin-bottom:12px; overflow:hidden; }
.question-card::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,rgba(246,200,95,.28),rgba(139,92,246,.18),rgba(241,63,155,.22)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.question-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font-size:12px; margin-bottom:10px; }
.status { font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.status-open { color:var(--green); text-shadow:0 0 12px rgba(78,232,139,.18); }
.status-closed { color:#ffbc66; }
.status-settled { color:var(--cyan); }
.status-cancelled { color:#ff8db3; }
.question-title { font-size:17px; line-height:1.32; margin-bottom:14px; }
.option-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.option-row.winning { margin:4px -8px; padding:12px 8px; border:1px solid rgba(246,200,95,.48); border-radius:12px; background:linear-gradient(110deg,rgba(139,92,246,.16),rgba(241,63,155,.12),rgba(246,200,95,.10)); box-shadow:0 0 22px rgba(246,200,95,.10); animation:winner-shine 2.8s ease-in-out infinite; }
.option-row.winning .option-name { color:var(--green); font-weight:800; }
.option-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.option-data { min-width:0; font-size:13px; font-variant-numeric:tabular-nums; font-weight:800; text-align:right; overflow-wrap:anywhere; }
.option-data strong { color:var(--cyan); }
.own-bet { margin-top:12px; padding:10px 12px; border-radius:12px; color:var(--green); background:rgba(78,232,139,.08); font-size:13px; font-weight:700; }
.admin-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; }
.empty { text-align:center; color:var(--muted); padding:34px 14px; border:1px dashed var(--line); border-radius:var(--radius); }
.bottom-nav { position:fixed; z-index:20; bottom:0; left:50%; transform:translateX(-50%); width:min(480px,100%); padding:9px 16px calc(9px + env(safe-area-inset-bottom)); background:rgba(9,7,17,.86); border-top:1px solid var(--line); backdrop-filter:blur(20px); display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.nav-item { min-height:50px; border:0; border-radius:14px; background:transparent; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:8px; font-weight:800; }
.nav-item.active { color:white; background:rgba(139,92,246,.16); }
.nav-item svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.leader-row { min-height:66px; padding:12px 14px; margin-bottom:9px; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; }
.leader-row.current { border-color:rgba(45,212,216,.5); box-shadow:0 0 24px rgba(45,212,216,.08); }
.rank { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.06); font-weight:900; }
.leader-row:nth-child(1) .rank { background:#e6b93c; color:#241900; }
.leader-row:nth-child(2) .rank { background:#b8c1ce; color:#19202a; }
.leader-row:nth-child(3) .rank { background:#ba7547; color:#251005; }
.history-row { margin-bottom:10px; padding:13px 14px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(26,18,48,.94),rgba(12,8,24,.96)); box-shadow:var(--shadow); }
.history-row.income { border-color:rgba(78,232,139,.22); }
.history-row.expense { border-color:rgba(246,200,95,.16); }
.history-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.history-top span { font-weight:900; font-variant-numeric:tabular-nums; }
.history-row.income .history-top span { color:var(--green); }
.history-row.expense .history-top span { color:var(--party-gold); }
.history-question { font-weight:800; line-height:1.3; margin-bottom:8px; }
.history-meta { display:flex; flex-wrap:wrap; gap:7px; color:var(--muted); font-size:12px; }
.history-meta span { padding:5px 8px; border-radius:99px; background:rgba(255,255,255,.045); }
.history-meta b { color:var(--cyan); font-weight:900; }
.modal-backdrop {
  position:fixed; z-index:50; inset:0; background:rgba(3,2,7,.72); backdrop-filter:blur(8px);
  display:flex; align-items:flex-end; justify-content:center; opacity:1; transition:opacity .24s ease;
}
.modal-backdrop.backdrop-exit { opacity:0; }
.sheet {
  width:min(480px,100%); max-height:92dvh; overflow:auto; border:1px solid var(--line); border-bottom:0; border-radius:24px 24px 0 0;
  background:#120d20; padding:12px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -20px 60px rgba(0,0,0,.45);
  transform:translateY(0); will-change:transform; transition:transform .24s cubic-bezier(.22,.8,.3,1);
}
.sheet.sheet-enter { transform:translateY(100%); }
.sheet.sheet-enter.sheet-open { transform:translateY(0); }
.sheet.sheet-exit { transform:translateY(100%); }
.sheet.sheet-dragging { transition:none; user-select:none; -webkit-user-select:none; }
.sheet.sheet-snapping { transition:transform .24s cubic-bezier(.22,.8,.3,1); }
.sheet-handle {
  width:calc(100% + 36px); height:38px; margin:-12px -18px 6px; display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-appearance:none; appearance:none;
}
.sheet-handle::before { content:""; display:block; width:42px; height:4px; border-radius:99px; background:rgba(255,255,255,.22); box-shadow:0 0 14px rgba(246,200,95,.12); }
.sheet-handle:active { cursor:grabbing; }
.choice { width:100%; min-height:52px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); padding:10px 13px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; }
.choice-label { min-width:0; display:grid; gap:2px; }
.choice-label small { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.choice > strong { flex:0 0 auto; color:var(--cyan); font-variant-numeric:tabular-nums; }
.figure-changed { animation:figure-pulse .55s ease-out; }
@keyframes figure-pulse { 0% { color:var(--green); transform:scale(1.08); } 100% { transform:scale(1); } }
@keyframes winner-shine { 0%,100% { box-shadow:0 0 20px rgba(246,200,95,.08); } 50% { box-shadow:0 0 26px rgba(246,200,95,.18); } }
.choice.selected { border-color:var(--purple); background:rgba(139,92,246,.15); box-shadow:0 0 0 2px rgba(139,92,246,.09); }
.quick-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.quick { min-height:44px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.04); font-weight:700; }
.toast { position:fixed; z-index:100; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); transform:translate(-50%,15px); width:min(420px,calc(100% - 32px)); padding:12px 14px; border-radius:14px; background:#211735; border:1px solid var(--line); box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.2s; text-align:center; font-weight:700; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.connection { width:8px; height:8px; border-radius:50%; background:#ffb255; box-shadow:0 0 9px currentColor; }
.connection.online { background:var(--green); }
.copy-grid { display:grid; grid-template-columns:1fr auto; gap:8px; margin-bottom:10px; }
.copy-grid .input { min-width:0; }
.qr-card { margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.03); text-align:center; }
.qr-card img { display:block; width:min(360px,100%); height:auto; aspect-ratio:4/5; margin:0 auto 10px; border-radius:14px; background:#21103f; object-fit:contain; }
.qr-actions { display:grid; gap:9px; }
.access-panel > .qr-card { margin-top:0; }
.access-backdrop { align-items:stretch; }
.access-sheet { max-height:100dvh; border-radius:0; border:0; padding-top:max(8px,env(safe-area-inset-top)); }
.access-handle { margin-top:0; margin-bottom:0; }
.admin-tabs { position:sticky; z-index:19; top:calc(72px + env(safe-area-inset-top)); display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:0 0 14px; padding:8px 0; background:linear-gradient(180deg,var(--bg) 80%,transparent); }
.admin-tab {
  min-width:0; min-height:44px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04); color:var(--muted);
  font-weight:800; -webkit-appearance:none; appearance:none;
}
.admin-tab.active { color:var(--text); border-color:rgba(139,92,246,.55); background:rgba(139,92,246,.19); }
.section-title { display:flex; justify-content:space-between; align-items:center; margin:22px 0 12px; }
.section-title h3 { margin:0; }
@media (min-width: 700px) {
  .app-shell { border-inline:1px solid rgba(255,255,255,.04); box-shadow:0 0 80px rgba(0,0,0,.28); }
}
@media (max-width: 340px) {
  .option-row { grid-template-columns:minmax(0,1fr); gap:5px; }
  .option-data { text-align:left; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .sheet { will-change:auto; }
}