:root {
  color-scheme:dark;
  --bg:#0a1320;
  --surface:#111e2f;
  --line:#233145;
  --ink:#f2f3f5;
  --muted:#98a6b8;
  --gold:#D9A31F;
  --mint:#92d9b9;
  --cream:#f3f0e8;
  --radius:6px;
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-synthesis:none;
  --gold-hi:#F2CE63;
  --alarm:#E0603C;
  --alarm-hi:#F08C6B;
}
/* Гостевые краски и скругления. Объявлены на гостевой области, а не на :root:
   :root общий с админкой и в этой задаче не трогается. Значения — из
   утверждённого макета (CRM/_review/design/Эталон гостевой части.css, раздел 1). */
.vlp-ui.vlp-guest, .adm-theme { --g-bg:#0A1320; --g-surface:#111E2F; --g-surface-2:#16243A; --g-raised:#1B2C44; --g-line:#233145; --g-line-soft:#1A2636; --g-ink:#F2F3F5; --g-muted:#8FA0B4; --g-faint:#7C8CA6; --g-gold:#D9A31F; --g-gold-hi:#F2CE63; --g-gold-dim:rgba(217,163,31,.14); --g-mint:#5FB58C; --g-alarm:#E0603C; --g-r-card:14px; --g-r-item:10px; --g-r-ctl:4px; --g-app-w:430px; background:#060C16; }
:where(.vlp-ui) * { box-sizing:border-box; }
html:has(body.vlp-ui) { min-width:320px; background:var(--bg); scrollbar-color:var(--line) var(--bg); scroll-behavior:smooth; }
body.vlp-ui.vlp-guest { font-family:"Golos Text","Segoe UI",system-ui,sans-serif; display:flex; flex-direction:column; }
body.vlp-ui { margin:0; color:var(--ink); background:radial-gradient(ellipse at 75% -25%,color-mix(in srgb, var(--surface) 33.3%, transparent),transparent 65%),var(--bg); min-height:100svh; -webkit-font-smoothing:antialiased; }
:where(.vlp-ui) button, :where(.vlp-ui) a { -webkit-tap-highlight-color:transparent; }
:where(.vlp-ui) button { font:inherit; color:inherit; cursor:pointer; }
:where(.vlp-ui) a { color:inherit; text-decoration:none; }
:where(.vlp-ui) button:disabled { cursor:wait; }
:where(.vlp-ui) button { border:0; }
:where(.vlp-ui) h1, :where(.vlp-ui) h2, :where(.vlp-ui) p { margin:0; }
:where(.vlp-ui) [hidden] { display:none!important; }
:where(.vlp-ui.vlp-guest) .icon { width:22px; height:22px; flex-shrink:0; }
:where(.vlp-ui.vlp-guest) .app-shell { max-width:var(--g-app-w); width:100%; flex:1; margin:0 auto; background:var(--g-bg); padding:0 20px calc(112px + env(safe-area-inset-bottom)); }
:where(.vlp-ui.vlp-guest) .header { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--g-line); height:88px; }
:where(.vlp-ui) .brand { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:1.25px; line-height:1.55; }
:where(.vlp-ui) .brand img { object-fit:contain; width:39px; height:43px; }
:where(.vlp-ui) .brand__second { display:block; color:var(--gold); letter-spacing:3.15px; font-size:10px; }
:where(.vlp-ui.vlp-guest) .venue { display:flex; gap:5px; align-items:center; font-size:11px; color:var(--g-ink); }
:where(.vlp-ui.vlp-guest) .venue .icon { width:14px; color:var(--g-gold); }
:where(.vlp-ui.vlp-guest) .venue__city { display:none; }
:where(.vlp-ui.vlp-guest) .main { padding-top:28px; }
:where(.vlp-ui.vlp-guest) .page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:24px; }
:where(.vlp-ui) .eyebrow { font-weight:650; line-height:1.5; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
:where(.vlp-ui) h1 { font-size:40px; line-height:1.18; letter-spacing:-1.5px; font-weight:570; margin:9px 0; }
:where(.vlp-ui) .title-dot { color:var(--gold); }
:where(.vlp-ui.vlp-guest) .greeting { font-size:12px; color:var(--g-muted); line-height:1.6; max-width:280px; }
:where(.vlp-ui.vlp-guest) .member { display:flex; gap:11px; align-items:center; min-width:0; max-width:250px; padding:12px 0 0; flex-shrink:0; }
:where(.vlp-ui.vlp-guest) .member__avatar { width:37px; height:37px; flex-shrink:0; background:var(--g-surface); border:1px solid var(--g-line); border-radius:50%; display:grid; place-items:center; color:var(--g-gold); font-size:14px; }
:where(.vlp-ui.vlp-guest) .member__text { display:flex; flex-direction:column; gap:4px; font-size:13px; min-width:0; }
:where(.vlp-ui.vlp-guest) .member__text>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:where(.vlp-ui.vlp-guest) .member__text>span:last-child { font-size:11px; color:var(--g-muted); }
:where(.vlp-ui.vlp-guest) .member>.icon { transform:rotate(-90deg); color:var(--g-muted); width:16px; }
:where(.vlp-ui.vlp-guest) .wallet-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:21px; align-items:start; }
:where(.vlp-ui.vlp-guest) .balance-panel { min-width:0; }
:where(.vlp-ui.vlp-guest) .balance-card { position:relative; isolation:isolate; overflow:hidden; padding:18px; border-radius:16px; border:1px solid #27374D; background:radial-gradient(120% 90% at 88% -10%, rgba(217,163,31,.17), transparent 58%),linear-gradient(158deg,#16263C 0%,#111E2F 55%,#0E1826 100%); box-shadow:0 18px 40px -20px rgba(0,0,0,.9); }
:where(.vlp-ui.vlp-guest) .balance-card__top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
:where(.vlp-ui.vlp-guest) .card-wordmark { font-size:9px; letter-spacing:1.7px; font-weight:700; color:var(--g-ink); }
:where(.vlp-ui.vlp-guest) .card-status { display:flex; align-items:center; gap:5px; font-size:10px; white-space:nowrap; color:var(--g-ink); }
:where(.vlp-ui.vlp-guest) .card-status .icon { width:14px; height:14px; color:var(--g-gold); }
:where(.vlp-ui.vlp-guest) .balance-body { padding:22px 0 21px; position:relative; }
:where(.vlp-ui.vlp-guest) .balance-label { display:flex; align-items:center; gap:7px; color:var(--g-ink); }
:where(.vlp-ui.vlp-guest) .balance-label h2 { font-weight:450; line-height:1.5; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--g-muted); }
:where(.vlp-ui.vlp-guest) .icon-button { display:grid; place-items:center; width:38px; height:36px; background:transparent;   border-radius:4px; }
:where(.vlp-ui.vlp-guest) .icon-button .icon { width:18px; height:18px; }
:where(.vlp-ui.vlp-guest) .icon-button:hover { background:color-mix(in srgb, var(--g-ink) 5.1%, transparent); }
:where(.vlp-ui.vlp-guest) .balance-toggle { position:relative; color:var(--g-muted); margin-top:-7px; margin-bottom:-7px; }
:where(.vlp-ui.vlp-guest) .eye-slash { position:absolute; width:22px; height:1.5px; background:currentColor; transform:rotate(-42deg); display:none; }
:where(.vlp-ui.vlp-guest) .balance-toggle[aria-pressed=true] .eye-slash { display:block; }
:where(.vlp-ui.vlp-guest) .balance-value { display:block; white-space:nowrap; font-family:Oswald,"Golos Text",sans-serif; font-weight:300; font-variant-numeric:tabular-nums; font-size:42px; line-height:1.05; margin:6px 0 0; min-height:1.05em; background:linear-gradient(172deg,#FBEBB8 2%,#EFCD78 32%,#D9A31F 68%,#F7E3AC 98%); -webkit-background-clip:text; background-clip:text; color:transparent; }
:where(.vlp-ui.vlp-guest) .balance-value--compact { font-size:clamp(26px,7vw,34px); }
:where(.vlp-ui.vlp-guest) .balance-value .currency { font-size:.48em; letter-spacing:.02em; }
:where(.vlp-ui.vlp-guest) .balance-value[data-hidden=true] { letter-spacing:5px; }
:where(.vlp-ui.vlp-guest) .balance-purpose { font-size:12px; line-height:1.6; color:var(--g-muted); margin-top:2px; }
:where(.vlp-ui.vlp-guest) .card-bottom { padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid color-mix(in srgb, var(--g-line) 14.1%, transparent); }
:where(.vlp-ui.vlp-guest) .card-holder { font-size:11px; letter-spacing:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
:where(.vlp-ui.vlp-guest) .card-number { font-size:10px; white-space:nowrap; color:var(--g-ink); font-variant-numeric:tabular-nums; font-family:Oswald,"Golos Text",sans-serif; }
:where(.vlp-ui.vlp-guest) .card-pattern { position:absolute; inset:0; z-index:-1; overflow:hidden; opacity:.5; pointer-events:none; }
:where(.vlp-ui.vlp-guest) .card-pattern span { position:absolute; width:280px; height:470px; border:1px solid color-mix(in srgb, var(--g-gold) 30.2%, transparent); border-radius:50%; right:-163px; top:-97px; transform:rotate(-28deg); }
:where(.vlp-ui.vlp-guest) .card-pattern span:nth-child(2) { right:-183px; }
:where(.vlp-ui.vlp-guest) .card-pattern span:nth-child(3) { right:-203px; }
:where(.vlp-ui.vlp-guest) .card-pattern span:nth-child(4) { right:-223px; }
:where(.vlp-ui.vlp-guest) .card-pattern span:nth-child(5) { right:-243px; }
:where(.vlp-ui.vlp-guest) .card-pattern span:nth-child(6) { right:-263px; }
:where(.vlp-ui.vlp-guest) .balance-note { display:flex; gap:8px; margin:12px 0 0; padding:12px 13px; color:var(--g-ink); background:var(--g-surface); border:1px solid var(--g-line-soft); border-radius:var(--g-r-card); box-shadow:none; }
:where(.vlp-ui.vlp-guest) .balance-note .icon { width:14px; height:14px; margin-top:2px; color:var(--g-muted); }
:where(.vlp-ui.vlp-guest) .balance-note p { font-size:11px; line-height:1.8; }
:where(.vlp-ui.vlp-guest) .balance-note p span { color:var(--g-muted); }
:where(.vlp-ui.vlp-guest) .qr-card { background:var(--g-surface); color:var(--g-ink); border:1px solid var(--g-line-soft); border-radius:var(--g-r-card); box-shadow:none; padding:18px; display:grid; align-items:start; position:relative; grid-template-columns:154px minmax(0,1fr); grid-template-rows:auto auto auto 1fr; column-gap:18px; min-height:195px; }
:where(.vlp-ui.vlp-guest) .qr-card__heading { width:100%; display:flex; flex-direction:column; gap:5px; align-items:flex-start; margin-bottom:14px; grid-column:2; grid-row:1; margin:2px 0 0; }
:where(.vlp-ui.vlp-guest) .qr-card h2 { font-size:16px; font-weight:620; letter-spacing:-.3px; }
:where(.vlp-ui.vlp-guest) .qr-caption { font-weight:600; color:var(--g-faint); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; line-height:1.6; max-width:124px; }
:where(.vlp-ui.vlp-guest) .qr-button { position:relative; display:block; width:198px; max-width:100%; padding:0; background:var(--cream); border:1px solid var(--g-line); border-radius:4px; aspect-ratio:1; line-height:0; color:var(--g-bg); }
:where(.vlp-ui.vlp-guest) .qr-button:hover { box-shadow:0 0 0 4px var(--g-gold-dim); }
:where(.vlp-ui.vlp-guest) .qr-button svg { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:4px; }
:where(.vlp-ui.vlp-guest) .qr-expand { position:absolute; bottom:-5px; right:-5px; width:26px; height:26px; border:1px solid var(--g-line); border-radius:var(--g-r-ctl); display:grid; place-items:center; background:var(--g-surface-2); color:var(--g-muted); }
:where(.vlp-ui.vlp-guest) .qr-expand .icon { width:15px; height:15px; border-radius:0; }
:where(.vlp-ui.vlp-guest) .qr-countdown { font-family:Oswald,"Golos Text",sans-serif; display:flex; align-items:center; justify-content:flex-start; gap:5px; font-size:10px; margin-top:13px; color:var(--g-muted); min-height:18px; font-variant-numeric:tabular-nums; grid-column:2; grid-row:2; line-height:1.8; flex-wrap:wrap; }
:where(.vlp-ui.vlp-guest) .qr-countdown b { font-weight:500; color:var(--g-ink); }
:where(.vlp-ui.vlp-guest) .status-dot { width:5px; height:5px; border-radius:50%; background:var(--g-gold); flex-shrink:0; }
:where(.vlp-ui.vlp-guest) .status-dot--paused { background:var(--g-faint); }
:where(.vlp-ui.vlp-guest) .qr-timeline { width:100%; height:2px; background:var(--g-line); border-radius:var(--g-r-ctl); overflow:hidden; margin:7px 0 8px; grid-column:2; grid-row:3; max-width:110px; }
:where(.vlp-ui.vlp-guest) .qr-timeline>span { display:block; background:var(--g-gold); height:100%; width:100%; transform-origin:left; transition:transform 150ms cubic-bezier(.2,.8,.25,1); }
:where(.vlp-ui.vlp-guest) .qr-help { font-size:10px; line-height:1.7; text-align:left; color:var(--g-muted); grid-column:2; grid-row:4; margin-top:2px; }
:where(.vlp-ui.vlp-guest) .qr-expired { border:1px dashed var(--g-line); border-radius:var(--g-r-ctl); display:flex; align-items:center; justify-content:center; gap:8px; flex-direction:column; font-size:11px; color:var(--g-muted); background:var(--g-surface-2); }
:where(.vlp-ui.vlp-guest) .connection-message { font-size:12px; line-height:1.6; margin:14px 4px 0; color:var(--g-gold-hi); display:flex; flex-wrap:wrap; gap:7px; }
:where(.vlp-ui.vlp-guest) .connection-message button { padding:3px 0; color:var(--g-gold); text-decoration:underline; background:transparent; }
:where(.vlp-ui.vlp-guest) .history { margin-top:18px; background:var(--g-surface); border:1px solid var(--g-line-soft); border-radius:var(--g-r-card); box-shadow:none; overflow:hidden; }
:where(.vlp-ui.vlp-guest) .history summary { cursor:pointer; display:flex; list-style:none; align-items:center; gap:11px; user-select:none; padding:16px; }
:where(.vlp-ui.vlp-guest) .history summary::-webkit-details-marker { display:none; }
:where(.vlp-ui.vlp-guest) .history summary:hover { background:var(--g-surface-2); }
:where(.vlp-ui.vlp-guest) .history-symbol { display:grid; place-items:center; width:32px; height:34px; background:var(--g-surface-2); border:1px solid var(--g-line); border-radius:var(--g-r-item); color:var(--g-muted); flex-shrink:0; }
:where(.vlp-ui.vlp-guest) .history-symbol .icon { width:17px; height:19px; }
:where(.vlp-ui.vlp-guest) .history-heading { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:550; min-width:0; }
:where(.vlp-ui.vlp-guest) .history-subtitle { color:var(--g-muted); font-size:9px; font-weight:400; line-height:1.6; }
:where(.vlp-ui.vlp-guest) .history-count { font-family:Oswald,"Golos Text",sans-serif; font-size:13px; font-variant-numeric:tabular-nums; color:var(--g-muted); }
:where(.vlp-ui.vlp-guest) .history-action { margin-left:auto; display:flex; gap:0; align-items:center; font-size:11px; color:var(--g-muted); }
:where(.vlp-ui.vlp-guest) .history-action .icon { width:17px; height:17px; transition:transform 150ms cubic-bezier(.2,.8,.25,1); }
:where(.vlp-ui.vlp-guest) .when-open { display:none; }
:where(.vlp-ui.vlp-guest) .history[open] .when-open { display:inline; }
:where(.vlp-ui.vlp-guest) .history[open] .when-closed { display:none; }
:where(.vlp-ui.vlp-guest) .history[open] .history-action .icon { transform:rotate(180deg); }
:where(.vlp-ui.vlp-guest) .history[open] summary { border-bottom:1px solid var(--g-line-soft); }
:where(.vlp-ui.vlp-guest) .history-content { padding:0 16px; }
:where(.vlp-ui) .operation-list { list-style:none; padding:0; margin:0; }
:where(.vlp-ui.vlp-guest) .operation { display:flex; align-items:center; gap:10px; padding:17px 0; border-bottom:1px solid var(--g-line-soft); flex-wrap:wrap; }
:where(.vlp-ui.vlp-guest) .operation:last-child { border-bottom:none; }
:where(.vlp-ui.vlp-guest) .operation-icon { flex:none; width:29px; height:29px; border-radius:var(--g-r-item); display:grid; place-items:center; border:1px solid var(--g-line); background:var(--g-surface-2); color:var(--g-muted); font-size:18px; }
:where(.vlp-ui.vlp-guest) .operation-icon .icon { width:15px; height:15px; }
:where(.vlp-ui.vlp-guest) .operation-icon--credit { color:var(--g-mint); }
:where(.vlp-ui.vlp-guest) .operation-description { display:flex; flex-direction:column; gap:6px; flex:1;  min-width:min(160px, 100%); }
:where(.vlp-ui.vlp-guest) .operation-title { display:block; font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:where(.vlp-ui.vlp-guest) .operation-date { font-size:9px; color:var(--g-muted); }
:where(.vlp-ui.vlp-guest) .operation-separator { margin:0 4px; }
:where(.vlp-ui.vlp-guest) .operation-amount { flex:none; font-family:Oswald,"Golos Text",sans-serif; font-size:12px; font-weight:400; font-variant-numeric:tabular-nums; white-space:normal; color:var(--g-muted); max-width:100%; overflow-wrap:anywhere; }
:where(.vlp-ui.vlp-guest) .operation-amount--credit { color:var(--g-mint); }
:where(.vlp-ui.vlp-guest) .history-footnote { font-size:9px; color:var(--g-muted); border-top:1px solid var(--g-line); padding:14px 0 16px; }
:where(.vlp-ui.vlp-guest) .history-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:52px 24px; color:var(--g-muted); }
:where(.vlp-ui.vlp-guest) .history-empty>.icon { width:26px; height:26px; color:var(--g-faint); padding:17px; box-sizing:content-box; border:1px solid var(--g-line); border-radius:50%; background:var(--g-surface); margin:0; }
:where(.vlp-ui.vlp-guest) .history-empty p { margin:4px 0 0; font-size:16px; font-weight:600; color:var(--g-ink); }
:where(.vlp-ui.vlp-guest) .history-empty>span { margin:0; font-size:13.5px; color:var(--g-muted); max-width:30ch; line-height:1.55; }
:where(.vlp-ui) .quiet-footer { margin-top:30px; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:10px; }
:where(.vlp-ui) .league-mark { color:var(--muted); letter-spacing:2px; font-size:10px; font-weight:650; }
:where(.vlp-ui) .footer-rule { flex:1; height:1px; background:color-mix(in srgb, var(--ink) 3.9%, transparent); margin:0 10px; }
:where(.vlp-ui) .footer-city { font-size:10px; }
:where(.vlp-ui.vlp-guest) .navigation { position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(5,1fr); background:var(--g-bg); border-top:1px solid var(--g-line); padding:8px 4px 6px; padding-bottom:calc(6px + env(safe-area-inset-bottom,0px)); }
:where(.vlp-ui.vlp-guest) .nav-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 0 2px; min-width:0; color:var(--g-muted); text-decoration:none; transition:color .14s; font-size:10px; font-weight:500; }
:where(.vlp-ui.vlp-guest) .nav-item .icon { width:21px; height:21px; stroke-width:1.7; }
:where(.vlp-ui.vlp-guest) .nav-item:hover { color:var(--g-muted); }
:where(.vlp-ui.vlp-guest) .nav-item--active { color:var(--g-gold-hi); }
:where(.vlp-ui.vlp-guest) .qr-dialog { width:min(440px,calc(100% - 32px)); padding:37px 30px 28px; background:var(--cream); color:var(--g-bg); border:0; border-radius:var(--g-r-card); text-align:center; box-shadow:0 32px 100px color-mix(in srgb, var(--g-bg) 60.0%, transparent); max-height:calc(100svh - 40px); overflow:auto; }
:where(.vlp-ui.vlp-guest) .qr-dialog::backdrop { background:color-mix(in srgb, var(--g-bg) 79.6%, transparent); }
:where(.vlp-ui) .qr-dialog .eyebrow { font-size:9px;  color:var(--line); }
:where(.vlp-ui.vlp-guest) .qr-dialog h2 { font-size:27px; letter-spacing:-.8px; font-weight:600; margin:8px 0 20px; }
:where(.vlp-ui.vlp-guest) .dialog-close { position:absolute; top:9px; right:9px; color:var(--g-line); width:40px; height:40px; }
:where(.vlp-ui.vlp-guest) .dialog-close:hover { background:color-mix(in srgb, var(--g-bg) 3.9%, transparent); }
:where(.vlp-ui.vlp-guest) .dialog-qr { width:min(290px,100%); aspect-ratio:1; background:var(--cream); border-radius:var(--g-r-item); margin:0 auto 19px; display:grid; place-items:center; }
:where(.vlp-ui.vlp-guest) .dialog-qr svg { width:100%; height:auto; border-radius:var(--g-r-item); }
:where(.vlp-ui.vlp-guest) .dialog-status { font-size:12px; color:var(--g-bg); line-height:1.6; }
:where(.vlp-ui.vlp-guest) .dialog-name { font-size:11px; color:var(--g-line); margin-top:7px; overflow-wrap:anywhere; }
body.vlp-ui:has(dialog[open]) { overflow:hidden; }
:where(.vlp-ui.vlp-guest) .stub { max-width:570px; margin:20px auto 0; text-align:center; padding:42px 0 70px; padding-top:25px; }
:where(.vlp-ui.vlp-guest) .stub-icon { width:26px; height:26px; padding:17px; box-sizing:content-box; border-radius:50%; background:var(--g-surface); color:var(--g-faint); display:grid; place-items:center; margin:0 auto 22px; border:1px solid var(--g-line); }
:where(.vlp-ui.vlp-guest) .stub-icon .icon { width:26px; height:26px; }
:where(.vlp-ui.vlp-guest) .stub h1 { font-size:37px; margin:12px 0 19px; }
:where(.vlp-ui.vlp-guest) .stub-lead { font-size:15px; line-height:1.7; color:var(--g-ink); }
:where(.vlp-ui.vlp-guest) .stub-description { font-size:13px; line-height:1.8; color:var(--g-muted); max-width:350px; margin:10px auto 30px; }
:where(.vlp-ui.vlp-guest) .back-link { display:inline-flex; align-items:center; gap:9px; color:var(--g-gold); font-size:13px; padding:8px 14px; }
:where(.vlp-ui.vlp-guest) .back-link .icon { width:18px; }
:where(.vlp-ui) .skip-link { position:fixed; top:10px; left:20px; z-index:30; background:var(--cream); padding:12px 18px; border-radius:var(--radius); transform:translateY(-180%);  color:var(--bg); }
:where(.vlp-ui) .skip-link:focus { transform:translateY(0); }
@media(max-width:640px) {
:where(.vlp-ui) .brand { font-size:10px; letter-spacing:1px; gap:9px; }
:where(.vlp-ui) .brand img { width:32px; height:35px; }
:where(.vlp-ui) .brand__second { font-size:9px; letter-spacing:2.4px; }
:where(.vlp-ui) .eyebrow { font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
:where(.vlp-ui) h1 { font-size:31px; letter-spacing:-1.2px; margin:7px 0; }
:where(.vlp-ui) .quiet-footer { margin-top:23px; font-size:9px; gap:8px; }
:where(.vlp-ui) .league-mark { font-size:9px; }
:where(.vlp-ui) .footer-city { display:none; }
:where(.vlp-ui) .footer-rule { margin:0 0 0 5px; }
}
@media(prefers-reduced-motion:reduce) {
:where(.vlp-ui) * { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}

/* Reuse the verified local font and its original OFL/vendor-lock without loading timer CSS. */
@font-face { font-family:"VLP Oswald"; font-style:normal; font-weight:300; font-display:swap; src:url(/account-assets/timer/fonts/font-87863bea6526d0.ttf) format('truetype'); }
@font-face { font-family:"VLP Oswald"; font-style:normal; font-weight:500; font-display:swap; src:url(/account-assets/timer/fonts/font-7a66272734160d.ttf) format('truetype'); }

/* Объявления гостевых шрифтов перенесены в гостевые шаблоны (base.html).
   Причина: wallet.css грузится и админкой, а страница турнира просит
   "Golos Text" для предпросмотра оформления таймера. Объявление здесь
   дало бы админке новый шрифт и изменило бы её вид. */
:where(.vlp-ui) :focus-visible { outline:2px solid var(--gold-hi); outline-offset:3px; }
:where(.vlp-ui.vlp-guest) .qr-dialog :focus-visible { outline-color:var(--g-bg); }
:where(.vlp-ui) :is(input,select,textarea)::placeholder { color:var(--muted); opacity:1; }
:where(.vlp-ui) :is(input,select,textarea) { border-radius:4px; font-size:13px; line-height:1.4; }
:where(.vlp-ui) :is(input,select,textarea)[aria-invalid="true"] { border-color:var(--alarm); }
:where(.vlp-ui) :is(h1,h2,h3,p,button,label) { overflow-wrap:anywhere; }
:where(.vlp-ui) :is(.page-heading,.admin-title,.admin-user,.guest-card__identity,.staff-card__top) > * { min-width:0; }
:where(.vlp-ui) :is(.amount-cell,.history-count,.test-code,.guest-balance,.operation-date,.card-number) { font-variant-numeric:tabular-nums; }
:where(.vlp-ui.vlp-guest) .operation-amount--debit { color:var(--g-alarm); }
:where(.vlp-ui.vlp-guest) .nav-item--active:hover { color:var(--g-gold-hi); }
@media (pointer:coarse) {
  :where(.vlp-ui:not(.vlp-guest)) :is(button,.primary-button,.secondary-button,.admin-link,.text-button,.back-link,.nav-item,.admin-nav a,summary,.check-label) { min-height:44px; }
  body.vlp-ui:where(:not(.vlp-guest)) :is(button,.primary-button,.secondary-button) { padding:13px 16px; font-size:14px; }
  body.vlp-ui:where(:not(.vlp-guest)) form input:not([type=checkbox]):not([type=hidden]),body.vlp-ui:where(:not(.vlp-guest)) select,body.vlp-ui:where(:not(.vlp-guest)) textarea { font-size:16px; padding:10px; min-height:44px; }
  body.vlp-ui.vlp-guest .qr-button { padding:0; }
  body.vlp-ui.vlp-guest .icon-button { width:44px; padding:10px; }
}
@media (prefers-reduced-motion:reduce) {
  html:has(body.vlp-ui) { scroll-behavior:auto; }
}

/* ======================================================================
   РАЗДЕЛЫ 8–9 ЭТАЛОНА — кнопки, поля, движение.
   Эти классы общие с админкой и описаны в accounts.css без префикса,
   поэтому гостевые значения задаются здесь с весом выше. Объявления
   админки при этом не трогаются и продолжают работать как раньше.
   ====================================================================== */
.vlp-ui.vlp-guest .primary-button,
.vlp-ui.vlp-guest .secondary-button { border-radius:var(--g-r-ctl); padding:11px 18px; font-size:14px; font-weight:600; border:1px solid var(--g-line); background:var(--g-surface-2); color:var(--g-ink); }
.vlp-ui.vlp-guest .primary-button { background:var(--g-gold); border-color:var(--g-gold); color:#1A1305; }
.vlp-ui.vlp-guest .primary-button:hover { background:var(--g-gold-hi); border-color:var(--g-gold-hi); }
.vlp-ui.vlp-guest .secondary-button:hover { background:var(--g-raised); box-shadow:none; }
.vlp-ui.vlp-guest .primary-button:disabled,
.vlp-ui.vlp-guest .secondary-button:disabled { background:var(--g-surface); border-color:var(--g-line); color:var(--g-faint); }
.vlp-ui.vlp-guest :is(input,select,textarea) { border-radius:var(--g-r-ctl); border:1px solid var(--g-line); background:var(--g-bg); color:var(--g-ink); padding:10px 12px; font-size:14px; }
.vlp-ui.vlp-guest .auth-form input:not([type="checkbox"]):not([type="hidden"]) { border-radius:var(--g-r-ctl); border:1px solid var(--g-line); background:var(--g-bg); padding:10px 12px; font-size:14px; }
@media (pointer:coarse) {
  .vlp-ui.vlp-guest .primary-button,
  .vlp-ui.vlp-guest .secondary-button { padding:13px 18px; }
  /* 16px обязателен: меньше — и Safari на iPhone приближает форму при касании */
  .vlp-ui.vlp-guest :is(input,select,textarea),
  .vlp-ui.vlp-guest .auth-form input:not([type="checkbox"]):not([type="hidden"]) { font-size:16px; padding:11px 12px; }
}
.vlp-ui.vlp-guest :focus-visible { outline:2px solid var(--g-gold-hi); outline-offset:2px; border-radius:var(--g-r-ctl); }

/* Карточки экранов входа, профиля и документа — обычная тихая карточка (раздел 5) */
.vlp-ui.vlp-guest .auth-panel { background:var(--g-surface); border:1px solid var(--g-line-soft); border-radius:var(--g-r-card); box-shadow:none; }
.vlp-ui.vlp-guest .profile-details { background:var(--g-surface-2); border:1px solid var(--g-line-soft); border-radius:var(--g-r-card); box-shadow:none; padding:14px 16px; }
.vlp-ui.vlp-guest .profile-details dt { color:var(--g-faint); }
.vlp-ui.vlp-guest .field-hint,
.vlp-ui.vlp-guest .auth-fine,
.vlp-ui.vlp-guest .auth-intro { color:var(--g-muted); }
.vlp-ui.vlp-guest .text-link,
.vlp-ui.vlp-guest .text-button,
.vlp-ui.vlp-guest .document-history a,
.vlp-ui.vlp-guest .check-label a { color:var(--g-gold-hi); }

/* РАЗДЕЛ 9 — движение: только opacity и transform, одна кривая */
.vlp-ui.vlp-guest .qr-dialog[open],
.vlp-ui.vlp-guest .confirm-dialog[open] { animation:vlp-rise .22s cubic-bezier(.2,.8,.25,1); }
@keyframes vlp-rise { from { transform:translateY(14px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .vlp-ui.vlp-guest *,
  .vlp-ui.vlp-guest *::before,
  .vlp-ui.vlp-guest *::after { animation:none !important; transition:none !important; }
}

/* ======================================================================
   РАЗДЕЛ 10 ЭТАЛОНА — телефонный формат на любом экране.
   Решение собственника: гостевое приложение не растягивается на мониторе.
   Нижняя панель прибита к краям окна, поэтому её тоже нужно центрировать
   вместе с колонкой, иначе на мониторе она растянется от края до края.
   ====================================================================== */
.vlp-ui.vlp-guest .local-banner { width:100%; max-width:var(--g-app-w); margin:0 auto; }
.vlp-ui.vlp-guest .navigation { left:50%; right:auto; transform:translateX(-50%); width:100%; max-width:var(--g-app-w); }
.vlp-ui.vlp-guest .wallet-layout, .vlp-ui.vlp-guest .auth-layout { grid-template-columns:1fr; gap:18px; }
.vlp-ui.vlp-guest .auth-panel--single { width:100%; margin:0 0 24px; }
/* на широком экране колонка отделяется от поля тонкой границей */
@media (min-width:520px) {
  .vlp-ui.vlp-guest .app-shell,
  .vlp-ui.vlp-guest .navigation { border-left:1px solid var(--g-line-soft); border-right:1px solid var(--g-line-soft); }
}
/* ширина колонки телефонная всегда, поэтому эти значения больше не зависят от окна */
:where(.vlp-ui.vlp-guest) .member__text, :where(.vlp-ui.vlp-guest) .member>.icon { display:none; }
:where(.vlp-ui.vlp-guest) .qr-button, :where(.vlp-ui.vlp-guest) .qr-expired { grid-column:1; grid-row:1/5; width:154px; height:154px; }
:where(.vlp-ui.vlp-guest) .history-action>span { display:none!important; }
:where(.vlp-ui.vlp-guest) .main--stub { min-height:calc(100svh - 250px); }

/* Эти классы общие с админкой, и их «узкие» значения в @media смотрят на ширину
   ОКНА. У гостя колонка телефонная всегда, поэтому телефонные значения задаются
   здесь без привязки к окну. Правила админки при этом не меняются. */
.vlp-ui.vlp-guest .brand { font-size:10px; letter-spacing:1px; gap:9px; }
.vlp-ui.vlp-guest .brand img { width:32px; height:35px; }
.vlp-ui.vlp-guest .brand__second { font-size:9px; letter-spacing:2.4px; }
.vlp-ui.vlp-guest h1 { font-size:31px; letter-spacing:-1.2px; margin:7px 0; }
.vlp-ui.vlp-guest .quiet-footer { margin-top:23px; font-size:9px; gap:8px; }
.vlp-ui.vlp-guest .league-mark { font-size:9px; }
.vlp-ui.vlp-guest .footer-city { display:none; }
.vlp-ui.vlp-guest .footer-rule { margin:0 0 0 5px; }
/* микроподписи — раздел 2 эталона */
.vlp-ui.vlp-guest .eyebrow,
.vlp-ui.vlp-guest .qr-caption,
.vlp-ui.vlp-guest .card-wordmark { font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--g-faint); font-weight:600; }

/* ======================================================================
   ОБОЛОЧКА ПРИЛОЖЕНИЯ (этап 1 концепта v2)
   Верхняя строка: логотип, клуб, уведомления, профиль.
   Нижняя панель: четыре вкладки и круглая кнопка карты по центру.
   ====================================================================== */
.vlp-ui.vlp-guest .header { display:flex; align-items:center; gap:12px; height:auto; min-height:64px; padding:14px 0 10px; padding-top:calc(14px + env(safe-area-inset-top,0px)); border-bottom:0; }
.vlp-ui.vlp-guest .header .brand { flex:none; gap:0; }
.vlp-ui.vlp-guest .header .brand img { width:34px; height:36px; }
.vlp-ui.vlp-guest .venue { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; flex:1; }
.vlp-ui.vlp-guest .venue__label { font-size:11px; color:var(--g-faint); letter-spacing:.04em; }
.vlp-ui.vlp-guest .venue__name { max-width:100%; font-size:15px; font-weight:600; color:var(--g-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vlp-ui.vlp-guest .venue__city { font-weight:600; color:var(--g-ink); display:inline; }
.vlp-ui.vlp-guest .header-actions { flex:none; display:flex; align-items:center; gap:8px; }
.vlp-ui.vlp-guest .guest-brand { display:flex; align-items:center; gap:9px; min-width:0; flex:1; color:var(--g-ink); font-size:14px; font-weight:600; line-height:1.25; }
.vlp-ui.vlp-guest .guest-brand img { flex:none; width:30px; height:34px; object-fit:contain; }
.vlp-ui.vlp-guest .guest-brand>span { min-width:0; }
.vlp-ui.vlp-guest .guest-brand>span>span { display:block; margin-top:2px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--g-gold-hi); }
.vlp-ui.vlp-guest .header-bell { width:38px; height:38px; padding:0; border:1px solid var(--g-line); border-radius:50%; background:var(--g-surface); color:var(--g-ink); }
.vlp-ui.vlp-guest .header-bell:disabled { cursor:default; opacity:1; }
.vlp-ui.vlp-guest .header-bell .icon { width:17px; height:17px; }
.vlp-ui.vlp-guest .header-avatar { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; border:1px solid var(--g-line); background:var(--g-surface-2); color:var(--g-ink); font-size:11px; font-weight:600; }
/* круглая кнопка карты приподнята над панелью */
.vlp-ui.vlp-guest .nav-card { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; text-decoration:none; color:var(--g-faint); font-size:10px; font-weight:500; padding:4px 0 2px; }
.vlp-ui.vlp-guest .nav-card__disc { width:52px; height:52px; margin-top:-22px; border-radius:50%; display:grid; place-items:center; background:var(--g-gold); color:#1A1305; box-shadow:0 6px 18px -6px rgba(0,0,0,.8); transition:background .14s; }
.vlp-ui.vlp-guest .nav-card__disc .icon { width:24px; height:24px; }
.vlp-ui.vlp-guest .nav-card:hover .nav-card__disc { background:var(--g-gold-hi); }
/* панели нужен запас сверху, иначе кнопка вылезает за край */
.vlp-ui.vlp-guest .navigation { padding-top:8px; overflow:visible; }
/* профиль теперь в верхней строке — второй аватар в заголовке лишний */
.vlp-ui.vlp-guest .member { display:none; }

/* ---- Экран «Главная»: действия под балансом, плитки, открытый список операций ---- */
.vlp-ui.vlp-guest .balance-actions { display:grid; grid-template-columns:1fr; margin-top:12px; }
.vlp-ui.vlp-guest .balance-actions .secondary-button { justify-content:center; margin:0; }
.vlp-ui.vlp-guest .tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.vlp-ui.vlp-guest .tile { display:flex; flex-direction:column; gap:2px; padding:14px; text-decoration:none; background:var(--g-surface); border:1px solid var(--g-line-soft); border-radius:var(--g-r-card); color:var(--g-ink); transition:border-color .14s; }
.vlp-ui.vlp-guest .tile:hover { border-color:var(--g-line); }
.vlp-ui.vlp-guest .tile__sign { width:36px; height:36px; margin-bottom:8px; border-radius:var(--g-r-item); display:grid; place-items:center; background:var(--g-surface-2); border:1px solid var(--g-line); color:var(--g-gold-hi); }
.vlp-ui.vlp-guest .tile__sign .icon { width:18px; height:18px; }
.vlp-ui.vlp-guest .tile b { font-size:14px; font-weight:600; }
.vlp-ui.vlp-guest .tile span { font-size:11.5px; color:var(--g-muted); }
/* список операций на Главной открыт сразу, без сворачивания */
.vlp-ui.vlp-guest .history--open { margin-top:18px; }
.vlp-ui.vlp-guest .history-head { display:flex; align-items:center; gap:10px; padding:14px 16px 2px; }
.vlp-ui.vlp-guest .history-head h2 { font-size:15px; font-weight:600; flex:1; }
.vlp-ui.vlp-guest .dialog-balance { font-size:12px; color:var(--g-line); margin-top:4px; }
.vlp-ui.vlp-guest .dialog-balance b { font-family:Oswald,"Golos Text",sans-serif; font-weight:400; font-variant-numeric:tabular-nums; color:var(--g-bg); }
.vlp-ui.vlp-guest .qr-dialog .qr-countdown { justify-content:center; color:var(--g-line); margin-top:12px; }
.vlp-ui.vlp-guest .qr-dialog .qr-countdown b { color:var(--g-bg); }
.vlp-ui.vlp-guest .qr-dialog .qr-timeline { margin:8px auto 0; background:rgba(0,0,0,.14); }
.vlp-ui.vlp-guest .qr-dialog .qr-timeline>span { background:var(--g-bg); }
.vlp-ui.vlp-guest .qr-dialog .status-dot { background:var(--g-bg); }
.vlp-ui.vlp-guest .qr-dialog .qr-expired { width:auto; height:auto; padding:18px; margin:0 auto 12px; color:var(--g-line); background:transparent; border-color:var(--g-line); }