:root {
  --bg: #090909;
  --panel: #fffaf0;
  --paper: #f5efe3;
  --ink: #16130d;
  --muted: #786f5e;
  --gold: #d8a72d;
  --line: #e3d3aa;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100%; background: radial-gradient(circle at top, #3c2416, #090909 46%); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }

.login, .app { width: min(980px, 100%); margin: 0 auto; padding: 16px; }
.login {
  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.login::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .92)),
    url("/assets/mino.png") center 40% / cover no-repeat;
  transform: scale(1.035);
  animation: poster-drift 18s ease-in-out infinite alternate;
}
.login::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background: linear-gradient(0deg, #050505 4%, rgba(5, 5, 5, .82) 38%, transparent 100%);
  z-index: -1;
}
.login__panel {
  width: min(430px, 100%);
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 22px;
  border: 1px solid rgba(216, 167, 45, .45);
  background: rgba(10, 10, 10, .78);
  color: white;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .58), 0 0 34px rgba(216, 167, 45, .14);
  backdrop-filter: blur(14px);
  animation: panel-in 560ms cubic-bezier(.2, .8, .2, 1) both;
}
.login__logo {
  width: min(220px, 76vw);
  height: 96px;
  display: block;
  margin: 0 auto 12px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(5, 5, 5, .68);
  padding: 4px;
  border: 1px solid rgba(216, 167, 45, .42);
  animation: float 4s ease-in-out infinite;
}
.login__panel p, .card p, .hero p { margin: 0; color: var(--gold); font-weight: 800; text-transform: uppercase; font-size: 12px; }
.login__panel p, .login__panel h1, .login__panel > span { text-align: center; display: block; }
.login__panel h1 { margin: 8px 0 7px; font-size: clamp(30px, 7vw, 42px); line-height: .98; letter-spacing: -.03em; }
.login__panel > span { color: #f4e7c7; margin: 0 auto 20px; max-width: 32ch; line-height: 1.35; }
.hero span, .meta { color: var(--muted); }
.login__form { display: grid; gap: 12px; }
.login__form label { color: #f7ecd2; }
.login__form input {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(216, 167, 45, .52);
}
.login__form small {
  color: #d9caa9;
  text-align: center;
  line-height: 1.35;
}

.app { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 9px 10px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 205, 61, .18);
  border-radius: 16px;
  background: rgba(10, 10, 12, .82);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
}
.topbar img { width: 110px; height: 52px; border-radius: 10px; object-fit: contain; padding: 3px; background: #000; }
.topbar strong, .topbar span { display: block; }
.topbar span { color: #ead9a2; font-size: 13px; }
.topbar .ghost { margin-left: auto; }

.hero { min-height: 260px; position: relative; overflow: hidden; border-radius: 20px; background: #000; margin-bottom: 16px; border: 1px solid rgba(216, 167, 45, .34); box-shadow: 0 20px 50px rgba(0, 0, 0, .42); }
.hero img { width: 100%; height: 100%; min-height: 260px; display: block; object-fit: cover; opacity: .9; transform: scale(1.015); transition: transform 700ms ease; }
.hero:hover img { transform: scale(1.045); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(0,0,0,.38), transparent 55%); pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.96), rgba(0,0,0,.06) 70%); }
.hero div { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; color: white; }
.hero h1 { margin: 6px 0; font-size: clamp(34px, 8vw, 64px); line-height: .95; letter-spacing: 0; }

.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; position: sticky; top: 82px; z-index: 5; padding: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(14,14,16,.8); backdrop-filter: blur(14px); }
.tab, .primary, .ghost { min-height: 46px; border-radius: 11px; border: 1px solid var(--line); font-weight: 800; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease; }
.tab { background: linear-gradient(135deg, #fffdf7, #eae3d4); color: var(--ink); box-shadow: inset 0 1px rgba(255,255,255,.9); }
.tab:hover, .ghost:hover { transform: translateY(-2px); }
.tab.is-active, .primary { background: linear-gradient(135deg, #ffd95a, #d69b10 74%); color: #161006; border-color: #f8cf47; box-shadow: 0 8px 20px rgba(216,167,45,.28), inset 0 1px rgba(255,255,255,.58); }
.tab.is-active::before { content: "●"; margin-right: 7px; font-size: 9px; vertical-align: 1px; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(216,167,45,.38), inset 0 1px rgba(255,255,255,.58); }
.primary:active, .tab:active, .ghost:active { transform: translateY(1px) scale(.985); }
.ghost { background: rgba(255,255,255,.12); color: inherit; padding: 0 14px; }
.install-app { min-height: 43px; border: 1px solid rgba(255, 211, 83, .64); border-radius: 11px; background: rgba(255, 207, 61, .12); color: #ffe59a; font-weight: 800; padding: 0 14px; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.install-app:hover { transform: translateY(-2px); background: rgba(255, 207, 61, .22); box-shadow: 0 8px 18px rgba(216,167,45,.2); }
.install-app--compact { margin-left: auto; min-height: 40px; white-space: nowrap; }
.topbar .ghost { color: white; border-color: rgba(255,255,255,.26); }

.view { display: none; gap: 14px; }
.view.is-visible { display: grid; animation: view-in 300ms ease-out both; }
.card, .result { padding: 18px; margin-bottom: 14px; border: 1px solid rgba(226,211,170,.22); border-radius: 16px; background: linear-gradient(145deg, rgba(35,31,26,.96), rgba(12,12,14,.98)); color: #fffaf0; box-shadow: 0 14px 34px rgba(0,0,0,.24); }
.card h2 { margin: 4px 0 14px; font-size: 26px; color: #fffaf0; }
.card p { color: #f1bf35; letter-spacing: .06em; }
.form { display: grid; gap: 12px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 800; color: #f2dfac; }
input, select { width: 100%; min-height: 48px; border-radius: 11px; border: 1px solid rgba(244,205,105,.42); background: rgba(255,253,250,.98); padding: 0 12px; color: var(--ink); box-shadow: inset 0 1px 2px rgba(0,0,0,.08); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
input:focus, select:focus { outline: none; border-color: #ffd657; box-shadow: 0 0 0 3px rgba(255, 205, 61, .18); transform: translateY(-1px); }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.metrics article { padding: 16px; border: 1px solid rgba(216,167,45,.24); border-radius: 14px; background: linear-gradient(135deg, #241d12, #101012); color: #fffaf0; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.metrics span { color: #e2c97d; font-size: 13px; }
.metrics strong { display: block; margin-top: 5px; font-size: 28px; color: #fff6dd; }
.list { display: grid; gap: 10px; }
.item { padding: 14px; border-radius: 12px; border: 1px solid rgba(226,211,170,.28); background: rgba(255,253,248,.96); }
.item strong, .item span { display: block; }
.item a { color: #5d4100; font-weight: 800; }

#qrVideo { width: 100%; max-height: 380px; background: #111; border-radius: 12px; margin-bottom: 10px; }
.result.ok { border-color: #3da35d; }
.result.bad { border-color: #cc3333; }
.ticket-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; }
.ticket-links a { display: block; padding: 9px 10px; border: 1px solid rgba(226,211,170,.35); border-radius: 9px; color: #f5c842; text-align: center; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.ticket-links a:hover { transform: translateY(-2px); background: rgba(226,174,30,.16); }
.loading-message { display: inline-flex; align-items: center; gap: 10px; }
.loading-message::before { content: ''; width: 14px; height: 14px; border: 2px solid rgba(245,200,66,.35); border-top-color: #f5c842; border-radius: 50%; animation: spin .8s linear infinite; }
button.is-loading { opacity: .75; cursor: wait; }
.danger-action { margin-top: 10px; color: #ffb0a8; border-color: rgba(220,70,60,.55); }
.print-sale { margin-top: 10px; }
.item .print-sale { color: #5b4300; background: #f7e5ab; border-color: #d8a72d; text-shadow: none; }
.item .print-sale:hover { background: #ffe39a; }
button:disabled { opacity: .55; cursor: not-allowed; }
.print-filters { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; margin: 12px 0 14px; }
@media (max-width: 640px) { .print-filters { grid-template-columns: 1fr; } }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 14px; right: 14px; bottom: 14px; min-height: 46px; display: grid; place-items: center; background: #111; color: white; border: 1px solid var(--gold); border-radius: 12px; opacity: 0; transform: translateY(12px); transition: 160ms; pointer-events: none; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes poster-drift { from { transform: scale(1.035) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-.8%, -.6%, 0); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 680px) {
  .app { padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .metrics, .two { grid-template-columns: 1fr; }
  .hero { min-height: 240px; }
  .hero img { min-height: 240px; }
  .hero h1 { font-size: 34px; }
  .login { place-items: center; }
  .login::before {
    background-color: #050505;
    background-position: center top;
    background-size: 100% auto;
    transform: none;
  }
  .login::after { height: 78%; background: linear-gradient(0deg, #050505 18%, rgba(5, 5, 5, .94) 58%, rgba(5, 5, 5, .1) 100%); }
  .login__panel { padding: 20px; }
  .login__logo { width: min(210px, 68vw); height: 82px; margin-bottom: 9px; }
  .login__panel p { font-size: 11px; }
  .login__panel > span { margin-bottom: 16px; font-size: 14px; }
  .topbar { top: max(0px, env(safe-area-inset-top)); border-radius: 14px; }
  .topbar img { width: 92px; height: 46px; }
  .install-app--compact { font-size: 12px; padding: 0 10px; }
  .tabs { grid-template-columns: repeat(4, minmax(106px, 1fr)); overflow-x: auto; top: 78px; padding: 7px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { min-height: 48px; }
  .hero { min-height: 238px; border-radius: 16px; }
  .hero img { min-height: 238px; }
  .hero div { left: 16px; right: 16px; bottom: 16px; }
  .card, .result { padding: 16px; border-radius: 14px; }
}

@media (max-width: 380px), (max-height: 680px) {
  .login { place-items: center; }
  .login__panel { padding: 16px; border-radius: 18px; }
  .login__logo { height: 66px; margin-bottom: 5px; }
  .login__panel h1 { font-size: 29px; }
  .login__form { gap: 8px; }
  .login__form input, .login__form button { min-height: 42px; }
}

@media (min-width: 681px) {
  .login::before { background-position: center 38%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}