/* Night Manager · design "dark nightclub premium" */
:root {
  --bg: #07070B; --bg2: #040407;
  --card: rgba(255,255,255,.045); --card-solid: #121219; --card-hi: rgba(255,255,255,.075);
  --stroke: rgba(255,255,255,.08); --stroke-hi: rgba(255,255,255,.16);
  --ink: #F4F2FA; --on-ink: #0B0B10; --muted: #8E8A9E; --line: rgba(255,255,255,.07);
  --field: rgba(255,255,255,.04); --field-b: rgba(255,255,255,.1); --btn2: rgba(255,255,255,.07); --chip0: rgba(255,255,255,.08);
  --dash: rgba(255,255,255,.16); --dim: rgba(255,255,255,.025);
  --violet: #8B5CF6; --magenta: #EC4899; --cyan: #22D3EE; --gold: #F5C451; --green: #34D399;
  --grad: linear-gradient(135deg, #8B5CF6 0%, #D946EF 55%, #EC4899 100%);
  --glow: 0 10px 40px -10px rgba(217,70,239,.55);
  --on-soft: #F4F2FA; --sideW: 268px; --shadow: 0 24px 60px rgba(0,0,0,.6);
  --r-lg: 22px; --r-md: 16px;
  --display: "Sora", "Inter", system-ui, sans-serif;
  color-scheme: dark;
}

html, body { overscroll-behavior-y: none; }
body {
  margin: 0; color: var(--ink); font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 15px; letter-spacing: -.005em;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(236,72,153,.14), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; transition: transform .12s ease, filter .15s ease, background .15s ease, border-color .15s ease; }
button:active:not(:disabled) { transform: scale(.98); }
button:disabled { opacity: .4; cursor: not-allowed; }
a { color: #C4B5FD; }
code { color: #F0ABFC; }
.muted { color: var(--muted); }
.fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; } .fs-17 { font-size: 17px; } .fs-20 { font-size: 20px; }
.fw-6 { font-weight: 500; } .fw-7 { font-weight: 600; } .fw-8 { font-weight: 700; font-family: var(--display); letter-spacing: -.02em; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minw0 { min-width: 0; }
.big-num { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.1; }

/* ---------- layout ---------- */
.shell { min-height: 100dvh; }
.main { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; background: rgba(7,7,11,.72);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid transparent;
  padding: calc(env(safe-area-inset-top) + 14px) 20px 12px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
}
.topbar .title { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.05; letter-spacing: -.03em; text-wrap: pretty; }
.topbar .back { border: 0; background: none; padding: 0 0 6px; font-weight: 600; font-size: 14px; text-align: left; color: #C4B5FD; }
.avatar { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--stroke-hi); font-weight: 700; flex: none; display: grid; place-items: center; color: #fff; font-family: var(--display); }
.content { flex: 1; padding: 6px 16px 120px; display: flex; flex-direction: column; gap: 12px; }
.content.with-actions { padding-bottom: 130px; }

.tabbar {
  position: fixed; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 30;
  background: rgba(18,18,26,.78); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--stroke-hi); border-radius: 999px; display: flex; padding: 6px; box-shadow: var(--shadow);
}
.tabbar button { flex: 1; border: 0; border-radius: 999px; padding: 11px 4px; font-size: 13px; font-weight: 600; background: transparent; color: var(--muted); position: relative; white-space: nowrap; }
.tabbar button.on { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.badge-dot { position: absolute; top: 1px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #1a1405; font-size: 11px; display: grid; place-items: center; font-weight: 700; box-shadow: 0 0 12px rgba(245,196,81,.6); }

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 16px); border-top: 1px solid var(--stroke);
  background: rgba(7,7,11,.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.actionbar > button { flex: 1; white-space: nowrap; }
.actionbar > .primary { flex: 1.6; }

.sidebar { display: none; }

@media (min-width: 992px) {
  .sidebar {
    display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: var(--sideW);
    background: rgba(10,10,16,.75); backdrop-filter: blur(20px); border-right: 1px solid var(--stroke);
    padding: 28px 16px 18px; gap: 4px; z-index: 40; overflow-y: auto;
  }
  .sidebar .brand { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.04em; padding: 0 12px 8px;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .sidebar .ev { margin: 8px 4px 18px; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r-md); padding: 12px 14px; font-size: 13px; }
  .sidebar .nav-i { border: 0; background: transparent; color: var(--muted); text-align: left; border-radius: 12px; padding: 11px 14px; font-weight: 500; font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .sidebar .nav-i:hover { background: var(--card-hi); color: var(--ink); }
  .sidebar .nav-i.on { background: linear-gradient(90deg, rgba(139,92,246,.28), rgba(236,72,153,.12)); color: #fff; box-shadow: inset 2px 0 0 #D946EF; }
  .sidebar .nav-i .badge-dot { position: static; }
  .sidebar .me { margin-top: auto; display: flex; align-items: center; gap: 10px; border: 1px solid var(--stroke); background: var(--card); color: var(--ink); border-radius: var(--r-md); padding: 10px; text-align: left; }
  .sidebar .me:hover { background: var(--card-hi); }
  .main { margin-left: var(--sideW); }
  .topbar { padding: 28px 40px 16px; }
  .topbar .title { font-size: 34px; }
  .topbar .avatar { display: none; }
  .content { padding: 8px 40px 48px; max-width: 1320px; width: 100%; }
  .content.with-actions { padding-bottom: 120px; }
  .tabbar { display: none; }
  .actionbar { left: var(--sideW); padding: 14px 40px; justify-content: flex-end; }
  .actionbar > button { flex: 0 0 auto; min-width: 170px; }
  .actionbar > .primary { flex: 0 0 auto; min-width: 220px; }
  .tap:hover { border-color: var(--stroke-hi) !important; background-color: var(--card-hi); }
}

/* ---------- grids ---------- */
.grid-auto { display: grid; gap: 12px; grid-template-columns: 1fr; }
.cols-2 { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .grid-auto { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } }
@media (min-width: 1100px) { .cols-2 { grid-template-columns: 1.1fr 1fr; } }

/* ---------- surfaces ---------- */
.card-nm { background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.hero { border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
/* superfici colorate per zona: tinta scura + bordo e bagliore del colore */
.soft {
  --h: 290;
  background: linear-gradient(160deg, oklch(.30 .09 var(--h) / .55), oklch(.18 .04 var(--h) / .55));
  border: 1px solid oklch(.62 .16 var(--h) / .32); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.hero.soft { box-shadow: 0 20px 50px -25px oklch(.6 .2 var(--h) / .55), inset 0 1px 0 rgba(255,255,255,.05); }
.dark-card {
  background: radial-gradient(120% 140% at 100% 0%, rgba(217,70,239,.22), transparent 55%), linear-gradient(160deg, #17131F, #0E0C14);
  border: 1px solid rgba(217,70,239,.28); color: #fff; border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 24px 60px -30px rgba(217,70,239,.6);
}
.dark-card .row-l { display: flex; justify-content: space-between; font-size: 14px; opacity: .8; gap: 8px; }
.row-sep { border-top: 1px solid var(--line); padding-top: 10px; }
.empty { background: var(--card); border: 1px dashed var(--stroke-hi); border-radius: var(--r-lg); padding: 28px; text-align: center; color: var(--muted); }
.section-t { font-family: var(--display); font-weight: 700; font-size: 17px; padding: 8px 4px 0; letter-spacing: -.02em; }

.stat { flex: 1; min-width: 0; border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--stroke); }
.stat .l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 10.5px; }
.stat .v { font-family: var(--display); font-weight: 700; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; margin-top: 2px; }
.stat.dark { background: var(--grad); border-color: transparent; box-shadow: var(--glow); }
.stat.dark .l { color: rgba(255,255,255,.8); }
.stats { display: flex; gap: 8px; }
@media (min-width: 992px) { .stat { padding: 18px 20px; } .stat .v { font-size: 30px; } }

.chip {
  --h: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: oklch(.55 .17 var(--h) / .16); color: oklch(.86 .13 var(--h)); border: 1px solid oklch(.7 .16 var(--h) / .28);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.chip.none { background: var(--chip0); color: var(--muted); border-color: var(--stroke); }
.chip.none::before { box-shadow: none; }
.chip.white { background: rgba(0,0,0,.35); color: #fff; border-color: rgba(255,255,255,.15); }
.chip.white::before { display: none; }
.pills { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: none; border: 1px solid var(--stroke); border-radius: 999px; padding: 8px 15px; font-size: 14px; font-weight: 500; background: var(--card); color: var(--muted); }
.pill.on { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.pill.on.soft { background: oklch(.6 .18 var(--h) / .3); color: #fff; border-color: oklch(.7 .18 var(--h) / .6); box-shadow: 0 0 18px -4px oklch(.65 .2 var(--h) / .7); }
@media (min-width: 992px) { .pills { margin: 0; padding: 0; flex-wrap: wrap; } }

/* ---------- rows ---------- */
.trow { border: 1px solid var(--stroke); background: rgba(10,10,16,.55); border-radius: var(--r-md); padding: 12px; display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; color: var(--ink); }
.trow.free { border: 1px dashed var(--dash); background: transparent; padding: 10px 12px; color: var(--muted); }
.trow.free .fw-8 { color: #F0ABFC; font-family: inherit; font-weight: 600; letter-spacing: 0; }
.trow.ghost { background: rgba(255,255,255,.02); opacity: .7; }
.trow.soft { background: linear-gradient(160deg, oklch(.30 .09 var(--h) / .5), oklch(.18 .04 var(--h) / .5)); }
.code { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid var(--stroke-hi); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 13px; flex: none; }
.code.outline { background: transparent; color: var(--muted); border: 1px dashed var(--dash); }
.code.lg { width: 56px; height: 56px; border-radius: 16px; font-size: 19px; }
.ini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; background: var(--btn2); color: var(--ink); border: 1px solid var(--stroke); }
.ini.lg { width: 56px; height: 56px; font-size: 22px; background: var(--grad); color: #fff; border: 0; box-shadow: var(--glow); font-family: var(--display); }
.ini.soft, .code.soft { background: oklch(.55 .18 var(--h) / .25); color: oklch(.9 .1 var(--h)); border: 1px solid oklch(.7 .18 var(--h) / .45); }
.prow { border: 0; background: none; text-align: left; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; width: 100%; color: var(--ink); }
.lrow { display: flex; justify-content: space-between; font-size: 14px; gap: 8px; }

/* ---------- buttons ---------- */
.b { border: 1px solid transparent; border-radius: 14px; padding: 12px 16px; font-weight: 600; }
.b-ink { background: #F4F2FA; color: #0B0B10; }
.b-ink:hover { filter: brightness(.92); }
.b-accent { background: var(--grad); color: #fff; font-weight: 700; box-shadow: var(--glow); }
.b-accent:hover { filter: brightness(1.08); }
.b-ok { background: rgba(52,211,153,.16); color: #6EE7B7; border-color: rgba(52,211,153,.4); }
.b-soft { background: var(--btn2); color: var(--ink); border-color: var(--stroke); font-weight: 500; }
.b-white { background: var(--card-hi); color: var(--ink); border-color: var(--stroke-hi); font-weight: 500; }
.b-ghost { background: transparent; color: var(--muted); font-weight: 500; }
.b.soft { background: oklch(.55 .18 var(--h) / .22); color: oklch(.9 .1 var(--h)); border: 1px solid oklch(.7 .18 var(--h) / .5); }
.b-dash { border: 1px dashed rgba(217,70,239,.5); background: rgba(217,70,239,.06); border-radius: var(--r-md); padding: 14px; font-weight: 600; color: #F0ABFC; width: 100%; }
.b-dash:hover { background: rgba(217,70,239,.12); }
.b-lg { padding: 15px 16px; font-size: 15px; }
.b-sm { padding: 8px 12px; font-size: 13px; border-radius: 11px; }
.rb { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--stroke); font-size: 18px; flex: none; display: grid; place-items: center; line-height: 1; }
.rb.lg { width: 44px; height: 44px; font-size: 22px; border-radius: 14px; }
.rb-ink { background: var(--grad); color: #fff; border-color: transparent; }
.rb-soft { background: var(--btn2); color: var(--ink); }
a.b { text-decoration: none; text-align: center; display: inline-block; }

/* ---------- form ---------- */
.field { width: 100%; box-sizing: border-box; border: 1px solid var(--field-b); border-radius: 13px; padding: 12px 14px; font-size: 16px; background: var(--field); outline: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.field::placeholder { color: #5f5b70; }
.field:focus { border-color: #A78BFA; box-shadow: 0 0 0 4px rgba(139,92,246,.18); }
.field.big { font-size: 18px; font-weight: 600; }
.field.huge { font-family: var(--display); font-size: 30px; font-weight: 700; }
.field.on-soft { background: rgba(0,0,0,.35); }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8E8A9E 50%), linear-gradient(135deg, #8E8A9E 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
select.field option { background: #121219; }
input[type=time].field, input[type=date].field { color-scheme: dark; }
textarea.field { resize: vertical; font-family: inherit; }
.lbl { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.lbl > span { font-size: 12px; color: var(--muted); font-weight: 500; }
.err { background: rgba(244,63,94,.12); border: 1px solid rgba(244,63,94,.4); color: #FDA4AF; border-radius: var(--r-md); padding: 12px 14px; font-weight: 500; font-size: 14px; }
.form-check-input { background-color: rgba(255,255,255,.1); border-color: var(--stroke-hi); }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.form-check-input:checked { background-color: #A855F7; border-color: #A855F7; }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(139,92,246,.2); border-color: #A78BFA; }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--field); border: 1px solid var(--stroke); border-radius: 14px; }
.seg button { flex: 1; border: 0; border-radius: 10px; padding: 10px; font-weight: 600; background: transparent; color: var(--muted); }
.seg button.on { background: var(--grad); color: #fff; box-shadow: var(--glow); }
input[type=range] { accent-color: #D946EF; width: 100%; }

/* ---------- progress / steps ---------- */
.bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.bar > div { height: 100%; background: linear-gradient(90deg, #34D399, #22D3EE); box-shadow: 0 0 12px rgba(52,211,153,.6); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.steps .s { display: flex; flex-direction: column; gap: 5px; }
.steps .s > div { height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); }
.steps .s.on > div { background: var(--grad); box-shadow: 0 0 10px rgba(217,70,239,.6); }
.steps .s span { font-size: 10px; font-weight: 600; opacity: .45; text-transform: uppercase; letter-spacing: .05em; }
.steps .s.on span, .steps .s.cur span { opacity: 1; }

/* ---------- sheet / toast ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column; justify-content: flex-end; animation: fade .18s ease; }
.sheet-wrap .spacer { flex: 1; }
.sheet { background: linear-gradient(180deg, #16131F, #0D0C13); border: 1px solid var(--stroke-hi); border-bottom: 0; border-radius: 28px 28px 0 0; padding: 22px 18px calc(env(safe-area-inset-bottom) + 26px); display: flex; flex-direction: column; gap: 12px; max-height: 92dvh; overflow-y: auto; animation: up .24s cubic-bezier(.2,.8,.2,1); }
.sheet::before { content: ""; width: 40px; height: 4px; border-radius: 9px; background: rgba(255,255,255,.2); align-self: center; margin: -10px 0 4px; }
.sheet .sh-t { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; }
.sheet .x { border: 0; background: none; font-size: 14px; font-weight: 600; color: #C4B5FD; }
.sheet .pill { background: var(--card-hi); }
.sheet .pill.on { background: var(--grad); color: #fff; }
@media (min-width: 768px) {
  .sheet-wrap { justify-content: center; align-items: center; padding: 24px; }
  .sheet-wrap .spacer { display: none; }
  .sheet { width: min(540px, 100%); border-radius: 26px; border-bottom: 1px solid var(--stroke-hi); padding: 26px; box-shadow: var(--shadow), 0 0 80px -30px rgba(217,70,239,.5); }
  .sheet::before { display: none; }
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.toast-nm { position: fixed; left: 16px; right: 16px; top: calc(env(safe-area-inset-top) + 14px); z-index: 80; border-radius: var(--r-md); padding: 13px 16px; font-weight: 500; font-size: 14px; box-shadow: var(--shadow); background: rgba(24,22,34,.92); backdrop-filter: blur(16px); border: 1px solid var(--stroke-hi); color: var(--ink); animation: up .2s ease; }
.toast-nm.ok { border-color: rgba(52,211,153,.5); box-shadow: var(--shadow), 0 0 30px -10px rgba(52,211,153,.6); }
.toast-nm.ok::before { content: "✓  "; color: #6EE7B7; font-weight: 700; }
.toast-nm.bad { border-color: rgba(244,63,94,.55); box-shadow: var(--shadow), 0 0 30px -10px rgba(244,63,94,.6); }
.toast-nm.bad::before { content: "!  "; color: #FDA4AF; font-weight: 700; }
@media (min-width: 992px) { .toast-nm { left: auto; right: 28px; top: 24px; width: 380px; } }

/* ---------- login / public ---------- */
.public { min-height: 100dvh; display: flex; justify-content: center; padding: calc(env(safe-area-inset-top) + 48px) 22px 30px; }
.public > .inner { width: min(440px, 100%); display: flex; flex-direction: column; gap: 22px; }
.brand-xl { font-family: var(--display); font-weight: 800; font-size: 54px; line-height: .95; letter-spacing: -.05em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgba(217,70,239,.35)); }
.qr { width: 120px; height: 120px; flex: none; border-radius: 16px; background: #fff; padding: 8px; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 40px -8px rgba(217,70,239,.7); }
.qr img, .qr canvas { width: 100% !important; height: auto !important; }
.qr.xl { width: 230px; height: 230px; padding: 12px; margin: 0 auto; }
#reader { width: 100%; border-radius: 18px; overflow: hidden; background: #000; min-height: 260px; border: 1px solid var(--stroke-hi); }
#reader video { object-fit: cover; }
.spinner-nm { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255,255,255,.1); border-top-color: #D946EF; animation: spin .8s linear infinite; margin: 60px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--ink); }
.tbl th { font-size: 10.5px; color: var(--muted); font-weight: 600; text-align: left; padding: 6px 8px; text-transform: uppercase; letter-spacing: .06em; }
.tbl td { padding: 10px 8px; border-top: 1px solid var(--line); }
.tbl .r { text-align: right; }
.hbar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.hbar > div { height: 100%; background: var(--grad); }