/* Hallmark · shape: app screen · theme: custom (Vice City dusk, scoped to .gta inside the M Bypass cabinet) · genre: playful · type: Onest, the cabinet face · signature: the sunset band with the GTA VI wordmark, then the order ticket · v2.0.0 */
/* critique: one sunset band carries the mood; tiles, ticket and chat below it stay on the cabinet tokens so the screen still reads as part of the app */
/* answered: no drawn illustration, the band is gradients and one striped sun; no Rockstar logo or art; motion only for state, off under reduced motion */

/* GTA VI в «Сервисах» кабинета (07.11.2026). Всё под .gta, токены кабинета (--ink, --surface, --line…) не переопределяются. */
.gta{
  --gta-night:#1b0f33;--gta-dusk:#5b1a6e;--gta-rose:#ff3d7f;--gta-ember:#ff7a3d;--gta-sun:#ffc94d;
  --gta-sea:#0b3d4c;--gta-sea-2:#0a2633;--gta-foam:rgba(255,201,77,.55);
  --gta-on:#fff4ec;--gta-on-2:rgba(255,244,236,.78);--gta-on-line:rgba(255,244,236,.34);--gta-on-fill:rgba(255,244,236,.12);--gta-on-fill-2:rgba(255,244,236,.2);--gta-on-dim:rgba(27,15,51,.42);
  --gta-pay-ink:#1b0f33;--gta-mask:#000;
  --gta-accent:#d61f69;--gta-accent-bg:rgba(214,31,105,.09);--gta-accent-line:rgba(214,31,105,.55);
  --gta-me:rgba(214,31,105,.1);
  --gta-r:var(--r,24px);--gta-r2:var(--r2,20px);
  --gta-dur:.18s;
  display:grid;gap:18px;min-width:0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gta{
    --gta-accent:#ff5c95;--gta-accent-bg:rgba(255,92,149,.12);--gta-accent-line:rgba(255,92,149,.6);--gta-me:rgba(255,92,149,.16);
  }
}
:root[data-theme="dark"] .gta{
  --gta-accent:#ff5c95;--gta-accent-bg:rgba(255,92,149,.12);--gta-accent-line:rgba(255,92,149,.6);--gta-me:rgba(255,92,149,.16);
}

/* ---------- закатная полоса ---------- */
.gta-hero{
  position:relative;overflow:hidden;isolation:isolate;border-radius:var(--gta-r);
  min-height:300px;padding:16px 18px 20px;display:grid;align-content:start;gap:10px;color:var(--gta-on);
  background:linear-gradient(180deg,var(--gta-night) 0%,var(--gta-dusk) 38%,var(--gta-rose) 62%,var(--gta-ember) 71%,var(--gta-sun) 76%);
}
.gta-hero::before{ /* море под горизонтом с бликами */
  content:"";position:absolute;left:0;right:0;bottom:0;top:76%;z-index:-1;
  background:
    repeating-linear-gradient(180deg,transparent 0 7px,var(--gta-foam) 7px 8px),
    linear-gradient(180deg,var(--gta-sea),var(--gta-sea-2));
}
.gta-sun{
  position:absolute;z-index:-2;right:5%;top:calc(76% - 75px);width:150px;height:150px;border-radius:50%;
  background:linear-gradient(180deg,var(--gta-sun) 8%,var(--gta-ember) 52%,var(--gta-rose) 92%);
  -webkit-mask:linear-gradient(180deg,var(--gta-mask) 0 52%,transparent 52% 56%,var(--gta-mask) 56% 63%,transparent 63% 68%,var(--gta-mask) 68% 74%,transparent 74% 80%,var(--gta-mask) 80% 86%,transparent 86%);
  mask:linear-gradient(180deg,var(--gta-mask) 0 52%,transparent 52% 56%,var(--gta-mask) 56% 63%,transparent 63% 68%,var(--gta-mask) 68% 74%,transparent 74% 80%,var(--gta-mask) 80% 86%,transparent 86%);
  pointer-events:none;
}
.gta-hero.is-compact{min-height:204px}
.gta-hero.is-compact .gta-sun{width:110px;height:110px;top:calc(76% - 55px)}
.gta-back{
  appearance:none;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px 8px 12px;
  border-radius:100px;border:1px solid var(--gta-on-line);background:var(--gta-on-fill);color:var(--gta-on);font-size:14px;font-weight:500;
  transition:background var(--gta-dur) ease,border-color var(--gta-dur) ease;
}
.gta-back:hover{background:var(--gta-on-fill-2);border-color:var(--gta-on-2)}
.gta-back:active{transform:translateY(1px)}
.gta-back:focus-visible,.gta-hero .gta-date:focus-visible{outline:2px solid var(--gta-sun);outline-offset:2px}
.gta-mark{
  margin:6px 0 0;font-weight:900;font-size:clamp(64px,19vw,128px);line-height:.84;letter-spacing:-.055em;
  overflow-wrap:break-word;min-width:0;
  background:linear-gradient(180deg,var(--gta-sun) 10%,var(--gta-ember) 52%,var(--gta-rose) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gta-hero.is-compact .gta-mark{font-size:clamp(40px,11vw,64px)}
.gta-sub{color:var(--gta-on);font-size:15px;font-weight:500;max-width:17ch}
.gta-date{
  justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:100px;
  background:var(--gta-on-dim);border:1px solid var(--gta-on-line);color:var(--gta-on);font-size:13px;font-weight:500;
}
.gta-hero .gta-status{justify-self:start}

/* ---------- шаги ---------- */
.gta-progress{display:grid;gap:8px}
.gta-progress ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.gta-progress li{height:4px;border-radius:4px;background:var(--line-strong)}
.gta-progress li.is-done,.gta-progress li.is-on{background:var(--gta-accent)}
.gta-progress p{font-size:13px;color:var(--muted)}
.gta-step{display:grid;gap:14px;min-width:0}
.gta-step h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.gta-step h3:focus{outline:none}
.gta-home{margin-bottom:14px}
.gta-step > p{font-size:14px;max-width:46ch}
.gta-step-enter{animation:gtaIn .24s ease}
@keyframes gtaIn{from{transform:translateY(8px)}to{transform:none}}

/* ---------- плитки выбора ---------- */
.gta-choices{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:560px){.gta-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gta-choice{
  appearance:none;position:relative;text-align:left;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:4px 14px;
  min-height:84px;padding:16px;border-radius:var(--gta-r2);border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  transition:border-color var(--gta-dur) ease,background var(--gta-dur) ease,box-shadow var(--gta-dur) ease,transform var(--gta-dur) ease;
}
.gta-choice .gta-ico{grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ink);font-size:19px}
.gta-choice strong{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.gta-choice small{grid-column:2;font-size:13px;color:var(--muted);line-height:1.35}
.gta-choice .gta-price{grid-row:1 / span 2;grid-column:3;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.gta-choice:hover{border-color:var(--gta-accent-line)}
.gta-choice:active{transform:scale(.99)}
.gta-choice:focus-visible{outline:2px solid var(--gta-accent);outline-offset:2px}
.gta-choice[aria-pressed="true"]{border-color:var(--gta-accent);background:var(--gta-accent-bg);box-shadow:inset 0 0 0 1px var(--gta-accent)}
.gta-choice[aria-pressed="true"] .gta-ico{background:var(--gta-accent);color:var(--gta-on)}
.gta-choice:disabled{cursor:not-allowed;border-style:dashed;color:var(--muted);background:transparent;transform:none}
.gta-choice:disabled .gta-ico{color:var(--muted)}
.gta-choice:disabled:hover{border-color:var(--line-strong)}

/* ---------- билет заказа ---------- */
.gta-ticket{position:relative;border-radius:var(--gta-r2);border:1px solid var(--line-strong);padding:6px 18px;min-width:0}
.gta-ticket::before,.gta-ticket::after{ /* вырезы, как у билета */
  content:"";position:absolute;bottom:62px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong);
}
.gta-ticket::before{left:-10px;clip-path:inset(0 0 0 50%)}
.gta-ticket::after{right:-10px;clip-path:inset(0 50% 0 0)}
.gta-ticket dl{margin:0;display:grid}
.gta-ticket .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.gta-ticket .row:last-child{border-bottom:0;border-top:1px dashed var(--line-strong);margin-top:6px;padding:16px 0 14px}
.gta-ticket dt{font-size:13px;color:var(--muted)}
.gta-ticket dd{margin:0;font-size:15px;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}
.gta-ticket .row:last-child dd{font-size:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- кнопки ---------- */
.gta-pay{
  appearance:none;width:100%;min-height:56px;border:0;border-radius:100px;padding:14px 22px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(90deg,var(--gta-sun),var(--gta-ember) 45%,var(--gta-rose));color:var(--gta-pay-ink);
  font-size:16px;font-weight:700;letter-spacing:-.01em;
  transition:transform var(--gta-dur) ease,box-shadow var(--gta-dur) ease,opacity var(--gta-dur) ease;
}
.gta-pay:hover{box-shadow:0 14px 30px -16px var(--gta-rose)}
.gta-pay:active{transform:translateY(1px)}
.gta-pay:focus-visible{outline:2px solid var(--gta-accent);outline-offset:3px}
.gta-pay:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.gta-pay.is-busy{cursor:progress}
.gta-pay.is-busy i{animation:gtaSpin .9s linear infinite}
@keyframes gtaSpin{to{transform:rotate(360deg)}}
.gta-link{appearance:none;background:none;border:0;padding:6px 0;color:var(--gta-accent);font-size:14px;font-weight:500;justify-self:start}
.gta-link:hover{text-decoration:underline}
.gta-link:focus-visible{outline:2px solid var(--gta-accent);outline-offset:2px;border-radius:6px}
.gta-ghost{
  appearance:none;min-height:44px;padding:10px 16px;border-radius:100px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;
  transition:border-color var(--gta-dur) ease,background var(--gta-dur) ease;
}
.gta-ghost:hover{border-color:var(--gta-accent-line)}
.gta-ghost:active{transform:translateY(1px)}
.gta-ghost:focus-visible{outline:2px solid var(--gta-accent);outline-offset:2px}
.gta-ghost:disabled{opacity:.55;cursor:not-allowed}
.gta-note{font-size:13px;color:var(--muted);line-height:1.45}
.gta-actions{display:grid;gap:10px}

/* ---------- статусы ---------- */
.gta-status{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:100px;font-size:13px;font-weight:500;border:1px solid var(--line-strong);color:var(--ink-2);white-space:nowrap}
.gta-status.is-pending{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent);background:var(--warn-bg)}
.gta-status.is-paid,.gta-status.is-working{color:var(--gta-accent);border-color:var(--gta-accent-line);background:var(--gta-accent-bg)}
.gta-status.is-done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:var(--ok-bg)}
.gta-status.is-canceled,.gta-status.is-refunded{color:var(--muted)}
.gta-hero .gta-status{color:var(--gta-on);border-color:var(--gta-on-line);background:var(--gta-on-dim)}

/* ---------- мои заказы ---------- */
.gta-orders{display:grid;gap:10px}
.gta-orders h3{margin:0;font-size:18px;font-weight:600}
.gta-order-row{
  appearance:none;width:100%;text-align:left;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;
  padding:14px 16px;border-radius:var(--gta-r2);border:1px solid var(--line);background:transparent;color:var(--ink);
  transition:border-color var(--gta-dur) ease,background var(--gta-dur) ease;
}
.gta-order-row:hover{border-color:var(--gta-accent-line)}
.gta-order-row:focus-visible{outline:2px solid var(--gta-accent);outline-offset:2px}
.gta-order-row strong{font-size:15px;font-weight:600}
.gta-order-row small{grid-column:1;font-size:13px;color:var(--muted)}
.gta-order-row .gta-side{grid-row:1 / span 2;grid-column:2;display:flex;align-items:center;gap:8px}
.gta-badge{min-width:22px;height:22px;padding:0 7px;border-radius:100px;display:inline-grid;place-items:center;background:var(--gta-accent);color:var(--gta-on);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- ход заказа ---------- */
.gta-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gta-track li{display:grid;gap:8px;font-size:13px;color:var(--muted)}
.gta-track li::before{content:"";height:4px;border-radius:4px;background:var(--line-strong)}
.gta-track li.is-done,.gta-track li.is-on{color:var(--ink)}
.gta-track li.is-done::before,.gta-track li.is-on::before{background:var(--gta-accent)}
.gta-facts{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;border-top:1px solid var(--line)}
.gta-facts > div{padding:11px 0;border-bottom:1px solid var(--line);min-width:0}
.gta-facts dt{font-size:12px;color:var(--muted)}
.gta-facts dd{margin:2px 0 0;font-size:14px;font-weight:500;overflow-wrap:anywhere}

/* ---------- чат заказа ---------- */
.gta-chat{display:grid;gap:10px;min-width:0}
.gta-chat h3{margin:0;font-size:18px;font-weight:600}
.gta-msgs{
  display:flex;flex-direction:column;gap:8px;min-height:180px;max-height:min(58vh,560px);overflow-y:auto;overscroll-behavior:contain;
  padding:14px;border-radius:var(--gta-r2);border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent);
}
.gta-msg{max-width:84%;padding:10px 13px 8px;border-radius:18px;display:grid;gap:4px;font-size:15px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.gta-msg.is-me{align-self:flex-end;background:var(--gta-me);border-bottom-right-radius:6px}
.gta-msg.is-them{align-self:flex-start;background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:6px}
.gta-msg .who{font-size:12px;font-weight:600;color:var(--gta-accent);white-space:normal}
.gta-msg time{justify-self:end;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:normal}
.gta-msg.is-system{align-self:center;max-width:92%;background:none;border:0;padding:4px 8px;text-align:center;font-size:13px;color:var(--muted)}
.gta-msgs .gta-empty{margin:auto;text-align:center;font-size:14px;color:var(--muted);max-width:32ch}
.gta-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.gta-compose textarea{
  width:100%;min-height:48px;max-height:140px;resize:none;border-radius:22px;padding:12px 16px;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink);font-size:16px;line-height:1.35;outline:none;
  transition:border-color var(--gta-dur) ease,box-shadow var(--gta-dur) ease;
}
.gta-compose textarea::placeholder{color:var(--muted)}
.gta-compose textarea:focus-visible{border-color:var(--gta-accent);box-shadow:0 0 0 3px var(--gta-accent-bg)}
.gta-send{
  appearance:none;width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center;
  background:var(--gta-accent);color:var(--gta-on);font-size:17px;
  transition:transform var(--gta-dur) ease,opacity var(--gta-dur) ease;
}
.gta-send:hover{opacity:.9}
.gta-send:active{transform:scale(.96)}
.gta-send:focus-visible{outline:2px solid var(--gta-accent);outline-offset:3px}
.gta-send:disabled{opacity:.45;cursor:not-allowed;transform:none}
.gta-closed{font-size:13px;color:var(--muted);padding:12px 14px;border-radius:14px;border:1px dashed var(--line-strong)}

/* ---------- состояния ---------- */
.gta-skel{border-radius:var(--gta-r2);background:var(--surface);min-height:84px}
.gta-error{display:grid;gap:10px;justify-items:start;padding:14px 16px;border-radius:14px;background:var(--bad-bg);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);font-size:14px;color:var(--ink)}
.gta-off{padding:16px;border:1px dashed var(--line-strong);border-radius:var(--gta-r2);color:var(--muted);font-size:14px}

/* ---------- кнопка в «Сервисах» ---------- */
.gta-entry{
  appearance:none;position:relative;overflow:hidden;isolation:isolate;width:100%;min-height:88px;border:0;border-radius:var(--gta-r2);
  padding:16px 18px;text-align:left;color:var(--gta-on);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;
  background:linear-gradient(120deg,var(--gta-night) 0%,var(--gta-dusk) 42%,var(--gta-rose) 78%,var(--gta-ember) 100%);
  transition:transform var(--gta-dur) ease,box-shadow var(--gta-dur) ease;
}
.gta-entry b{font-size:28px;font-weight:900;letter-spacing:-.05em;line-height:1}
.gta-entry small{grid-column:1;font-size:13px;color:var(--gta-on-2)}
.gta-entry .gta-side{grid-row:1 / span 2;grid-column:2;display:flex;align-items:center;gap:8px;font-size:18px}
.gta-entry .gta-badge{background:var(--gta-on);color:var(--gta-night)}
.gta-entry:hover{box-shadow:0 16px 34px -20px var(--gta-rose)}
.gta-entry:active{transform:translateY(1px)}
.gta-entry:focus-visible{outline:2px solid var(--gta-accent);outline-offset:3px}

/* ---------- ПК ---------- */
@media (min-width:900px){
  .gta{max-width:760px}
  .gta-hero{min-height:320px;padding:20px 26px 26px}
  .gta-sun{width:220px;height:220px;top:calc(76% - 110px)}
  .gta-sub{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .gta *,.gta *::before,.gta *::after{animation:none!important;transition:none!important}
  .gta-step-enter{transform:none}
}