:root {
  --bg: #050505;
  --surface: rgba(32, 31, 31, .62);
  --surface-solid: #201f1f;
  --surface-high: rgba(53, 53, 52, .72);
  --line: rgba(255,255,255,.08);
  --line-gold: rgba(242,202,80,.32);
  --text: #e5e2e1;
  --muted: #d0c5af;
  --dim: #99907c;
  --gold: #d4af37;
  --gold-bright: #f2ca50;
  --blue: #007aff;
  --blue-soft: #4b8eff;
  --emerald: #34c759;
  --green: #5ce976;
  --red: #ffb4ab;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 10%, rgba(0,122,255,.16), transparent 32rem),
    radial-gradient(circle at 15% 85%, rgba(212,175,55,.12), transparent 34rem),
    radial-gradient(circle at 48% 20%, rgba(255,255,255,.045), transparent 22rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.luxury { font-family: "Playfair Display", Georgia, serif; letter-spacing: -.02em; }
.glass {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), var(--surface);
  backdrop-filter: blur(28px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.04), 0 28px 80px rgba(0,0,0,.28);
}
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  position: relative;
}
.cinema {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(5,5,5,.72) 35%, rgba(5,5,5,.26) 62%, rgba(0,0,0,.78) 100%),
    radial-gradient(circle at 72% 18%, rgba(242,202,80,.17), transparent 28rem),
    radial-gradient(circle at 52% 52%, rgba(0,122,255,.18), transparent 32rem),
    url("assets/hospitality-luxury-login.png");
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  animation: drift 18s ease-in-out infinite alternate;
}
.cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.62)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 110px);
  mix-blend-mode: screen;
  opacity: .46;
}
@keyframes drift { from { transform: scale(1.04) translateX(-8px); } to { transform: scale(1.09) translateX(12px); } }
.login-shell {
  position: relative;
  z-index: 2;
  width: min(1320px, 100%);
  display: grid;
  grid-template-columns: minmax(320px, 500px) minmax(430px, 1fr);
  gap: 18px;
  align-items: stretch;
}
.login-card {
  padding: 34px;
  border-color: rgba(242,202,80,.22);
  background: linear-gradient(180deg, rgba(7,7,7,.88), rgba(7,7,7,.64));
}
.login-kicker {
  display: inline-flex;
  padding: 7px 10px;
  border: 1px solid rgba(242,202,80,.28);
  border-radius: 999px;
  color: var(--gold-bright);
  background: rgba(242,202,80,.08);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.login-card h1 { margin: 24px 0 10px; font-size: clamp(40px, 5vw, 70px); line-height: .98; max-width: 10ch; }
.login-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.login-proof span {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(0,0,0,.30);
  font-size: 12px;
  font-weight: 800;
}
.login-experience {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 14px;
  min-height: 640px;
  align-content: end;
}
.arrival-card {
  align-self: end;
  max-width: 620px;
  justify-self: end;
  padding: 24px;
  border-color: rgba(242,202,80,.20);
  background: linear-gradient(160deg, rgba(10,10,10,.76), rgba(20,16,8,.58));
}
.arrival-card h2 { margin: 16px 0 8px; font-size: clamp(30px, 4vw, 50px); line-height: 1.02; }
.arrival-card p { margin: 0; color: var(--muted); line-height: 1.55; max-width: 58ch; }
.login-metrics { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.login-metrics .metric { padding: 12px; background: rgba(0,0,0,.28); }
.login-metrics .metric strong { font-size: 21px; }
.login-feed {
  padding: 18px;
  min-height: 0;
  max-width: 620px;
  justify-self: end;
  width: 100%;
  background: linear-gradient(180deg, rgba(5,5,5,.76), rgba(5,5,5,.48));
}
.perspective-page {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}
.perspective-shell {
  position: relative;
  z-index: 2;
  width: min(1240px, 100%);
  display: grid;
  gap: 18px;
}
.perspective-head {
  max-width: 760px;
}
.perspective-head h1 {
  margin: 20px 0 10px;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .96;
}
.perspective-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.perspective-card {
  min-height: 310px;
  padding: 26px;
  display: grid;
  align-content: end;
  gap: 12px;
  text-align: left;
  color: var(--text);
  border-color: rgba(242,202,80,.24);
}
.perspective-card.guest {
  border-color: rgba(0,122,255,.34);
  background: linear-gradient(160deg, rgba(0,122,255,.10), rgba(255,255,255,.025)), var(--surface);
}
.perspective-card h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
}
.perspective-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.perspective-card strong {
  width: fit-content;
  padding: 10px 13px;
  border-radius: 8px;
  color: #241a00;
  background: var(--gold-bright);
  font-size: 13px;
}
.dual-preview {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
}
.dual-preview h3 { margin: 6px 0 0; }
.logo {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #241a00;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  font-weight: 900;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand strong { display: block; font-weight: 800; }
.brand small, .eyebrow, .label {
  display: block;
  color: var(--dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.muted { color: var(--muted); line-height: 1.55; }
.field { display: grid; gap: 7px; margin-top: 14px; }
.input, select {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: var(--text);
  background: rgba(0,0,0,.44);
  outline: none;
}
.input:focus, select:focus { border-color: rgba(242,202,80,.55); box-shadow: 0 0 0 4px rgba(242,202,80,.10); }
.error { color: var(--red); font-weight: 800; font-size: 13px; }
.app { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0,1fr); }
.backdrop { display: none; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: rgba(10,10,10,.80);
  backdrop-filter: blur(32px);
}
.nav { display: grid; gap: 5px; }
.nav button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  font-weight: 750;
}
.nav button i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255,255,255,.055);
  color: var(--gold-bright);
  font-style: normal;
  font-size: 11px;
}
.nav button.active, .nav button:hover { color: var(--text); border-color: rgba(242,202,80,.22); background: rgba(242,202,80,.08); }
.side-card { margin-top: auto; padding: 13px; }
.main { min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(5,5,5,.72);
  backdrop-filter: blur(28px);
}
.menu { display: none; width: 42px; height: 42px; border:1px solid var(--line); border-radius:8px; color: var(--text); background: rgba(255,255,255,.04); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.mode-tabs, .perspective-switch { display:flex; gap: 4px; padding:4px; border-radius: 10px; }
.mode-tabs button, .perspective-switch button {
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}
.mode-tabs button.active, .perspective-switch button.active {
  color: #241a00;
  background: var(--gold-bright);
}
.perspective-switch {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}
.perspective-switch button { flex: 1; }
.lang { display: flex; gap: 4px; }
.lang button { border:1px solid var(--line); border-radius: 6px; padding: 7px 9px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 11px; font-weight: 850; }
.lang button.active { color: #241a00; background: var(--gold-bright); border-color: var(--gold-bright); }
.content { max-width: 1620px; margin: 0 auto; padding: 22px 24px 88px; }
.page-title { display:flex; justify-content:space-between; align-items:flex-end; gap: 16px; margin-bottom: 16px; }
.page-title h1 { margin: 0; font-size: clamp(30px, 3vw, 46px); line-height:1.05; }
.grid { display:grid; gap: 14px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.main-grid { grid-template-columns: minmax(0,1.35fr) 390px; }
.wide-grid { grid-template-columns: 330px minmax(0,1fr); }
.hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr); gap:14px; margin-bottom:14px; }
.panel, .card, .metric, .table-wrap { min-width:0; }
.panel, .card, .metric, .table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)), var(--surface); backdrop-filter: blur(24px); }
.panel { padding: 24px; }
.card { padding: 16px; }
.metric { padding: 14px; }
.metric strong { display:block; margin-top: 7px; font-size: 26px; font-variant-numeric: tabular-nums; }
.metric span { display:block; margin-top: 7px; color: var(--green); font-size: 12px; font-weight: 800; }
.split { display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.btn {
  min-height: 39px;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 9px 13px;
  border:1px solid var(--blue);
  border-radius: 8px;
  color: white;
  background: var(--blue);
  font-size: 13px;
  font-weight: 850;
}
.btn.gold { color: var(--gold-bright); background: transparent; border-color: var(--line-gold); }
.btn.secondary { color: var(--text); background: transparent; border-color: var(--line); }
.chip {
  display:inline-flex;
  align-items:center;
  width: fit-content;
  padding: 5px 8px;
  border:1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
  font-size: 11px;
  font-weight: 850;
}
.chip.ok { color: var(--green); border-color: rgba(92,233,118,.28); background: rgba(92,233,118,.08); }
.chip.gold { color: var(--gold-bright); border-color: var(--line-gold); background: rgba(212,175,55,.08); }
.chip.blue { color: var(--blue-soft); border-color: rgba(0,122,255,.30); background: rgba(0,122,255,.09); }
.chip.risk { color: var(--red); border-color: rgba(255,180,171,.32); background: rgba(255,180,171,.09); }
.pulse { width:8px; height:8px; border-radius:50%; background: var(--green); box-shadow:0 0 0 0 rgba(92,233,118,.45); animation:pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 9px rgba(92,233,118,0); } }
.activity { display:grid; gap: 9px; max-height: 640px; overflow:auto; }
.item, .row {
  display:grid;
  gap: 6px;
  padding: 10px;
  border:1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.032);
}
.item { border-left: 3px solid var(--gold); }
.item p, .row p { margin:0; font-size:13px; line-height:1.42; }
.item span, .row span { color: var(--dim); font-size:11px; }
.table-wrap { overflow:auto; }
table { width:100%; min-width: 820px; border-collapse: collapse; }
th, td { padding: 10px; border-bottom:1px solid rgba(255,255,255,.055); text-align:left; font-size:13px; vertical-align:top; }
th { color: var(--dim); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.bar-list { display:grid; gap: 10px; }
.bar-row { display:grid; gap: 6px; }
.bar-row span { color: var(--muted); font-size:12px; font-weight:800; }
.track { height:8px; overflow:hidden; border-radius:999px; background: rgba(255,255,255,.08); }
.track div { height:100%; border-radius:inherit; background: linear-gradient(90deg, var(--blue), var(--gold-bright), var(--green)); }
.journey { display:grid; grid-template-columns: repeat(7, minmax(150px,1fr)); gap:10px; overflow:auto; }
.step { padding:12px; border:1px solid var(--line); border-radius:10px; background: rgba(255,255,255,.035); }
.map { min-height: 430px; position:relative; overflow:hidden; }
.pin { position:absolute; width:170px; padding:10px; border:1px solid var(--line-gold); border-radius:10px; background: rgba(10,10,10,.78); }
.pin::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--gold-bright); position:absolute; right:9px; top:9px; box-shadow:0 0 18px rgba(242,202,80,.7); }
.guest-hero {
  min-height: 260px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 26px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.24)),
    url("assets/hospitality-luxury-login.png");
  background-size: cover;
  background-position: 70% center;
}
.guest-hero h2 { margin: 14px 0 6px; font-size: clamp(42px, 6vw, 72px); line-height: .95; }
.guest-hero p { margin: 0; color: var(--text); font-size: 20px; font-weight: 750; }
.guest-weather {
  min-width: 170px;
  padding: 16px;
  border: 1px solid rgba(242,202,80,.22);
  border-radius: 14px;
  background: rgba(0,0,0,.42);
}
.guest-weather strong { display:block; font-size: 42px; }
.guest-weather span { color: var(--muted); }
.service-card {
  min-height: 140px;
  text-align: left;
  align-content: start;
  color: var(--text);
}
.service-card p, .experience-card p { margin: 12px 0 0; }
.concierge {
  display: grid;
  gap: 12px;
}
.chat-row {
  max-width: 76%;
  padding: 12px 14px;
  border-radius: 14px;
  line-height: 1.45;
}
.chat-row.guest {
  justify-self: start;
  color: var(--text);
  background: rgba(255,255,255,.08);
}
.chat-row.ai {
  justify-self: end;
  color: #06130a;
  background: linear-gradient(135deg, var(--gold-bright), #fff0a8);
}
.experience-card {
  min-height: 210px;
  display: grid;
  gap: 10px;
  text-align: left;
  color: var(--text);
}
.experience-card strong { font-size: 24px; }
.dual-panel {
  margin-top: 14px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.dual-panel > div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.dual-panel h3 { margin: 6px 0 0; }
.live-stage {
  display: grid;
  grid-template-columns: 390px minmax(0,1fr);
  gap: 16px;
}
.phone {
  min-height: 680px;
  padding: 20px;
  border-radius: 32px;
  border-color: rgba(0,122,255,.34);
  background:
    linear-gradient(180deg, rgba(0,122,255,.13), rgba(0,0,0,.42)),
    rgba(5,5,5,.86);
}
.phone h2, .manager-live h2 { margin: 16px 0 8px; font-size: clamp(34px, 4vw, 52px); line-height: 1; }
.manager-live {
  min-height: 680px;
  padding: 20px;
}
.sim {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  width:min(480px, calc(100vw - 36px));
  max-height:58vh;
  overflow:auto;
  padding:14px;
  border:1px solid var(--line-gold);
  border-radius:14px;
  background: rgba(5,5,5,.88);
  backdrop-filter: blur(28px);
  box-shadow:0 0 50px rgba(212,175,55,.14);
}
.sim.min { width:auto; max-height:none; }
.sim-step { display:grid; grid-template-columns:24px 1fr; align-items:center; gap:9px; padding:8px; color: var(--muted); }
.sim-step b { display:grid; place-items:center; width:22px; height:22px; border-radius:6px; background: rgba(255,255,255,.09); font-size:11px; }
.sim-step.done { color: var(--text); }
.sim-step.done b { background: var(--green); color:#002107; }
.command { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:50; width:min(620px, calc(100vw - 36px)); padding:10px; display:flex; gap:8px; align-items:center; }
.app.has-sim .command { display:none; }
@media (max-width: 1180px) {
  .login-shell, .app, .perspective-grid, .dual-preview, .live-stage { grid-template-columns:1fr; }
  .login-experience { min-height:auto; grid-template-rows:auto; }
  .arrival-card, .login-feed { max-width:none; justify-self:stretch; }
  .sidebar { position:fixed; inset:0 auto 0 0; z-index:44; width:min(86vw,320px); transform:translateX(-104%); transition:transform .2s; }
  .app.sidebar-open .sidebar { transform:translateX(0); }
  .app.sidebar-open .backdrop { display:block; position:fixed; inset:0; z-index:40; border:0; background:rgba(0,0,0,.62); }
  .menu { display:grid; place-items:center; }
  .hero, .main-grid, .wide-grid, .cols-5, .cols-4, .cols-3, .cols-2 { grid-template-columns:1fr; }
  .topbar { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 680px) {
  .content, .topbar, .login, .perspective-page { padding:16px; }
  .page-title, .split, .top-actions, .guest-hero, .dual-panel { align-items:flex-start; flex-direction:column; grid-template-columns:1fr; }
  .cinema { background-position: 58% center; }
  .login-card { padding:22px; }
  .login-card h1 { max-width: 11ch; font-size: 40px; }
  .login-kicker { margin-bottom: 14px; }
  .login-proof { margin-top: 12px; }
  .login-metrics { grid-template-columns:1fr; }
  .arrival-card { padding:18px; }
  .login-proof span { width:100%; }
  .perspective-card { min-height: 240px; padding: 20px; }
  .mode-tabs { width:100%; }
  .mode-tabs button { flex:1; }
  .chat-row { max-width: 100%; }
  .phone, .manager-live { min-height: auto; }
  .journey { grid-template-columns:1fr; }
}