:root {
  color-scheme: dark;
  --bg: #07101e;
  --panel: #0d1828;
  --panel-2: #111f33;
  --panel-3: #15263e;
  --line: #223653;
  --text: #f4f7fb;
  --muted: #9aabc1;
  --brand: #5cc8ff;
  --brand-2: #8b78ff;
  --ok: #51d2a1;
  --warn: #ffcc66;
  --danger: #ff7b8e;
  --info: #7eb8ff;
  --shadow: 0 18px 55px rgba(0,0,0,.28);
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 1.1fr) minmax(420px, .9fr);
  background:
    radial-gradient(circle at 15% 15%, rgba(92,200,255,.18), transparent 33%),
    radial-gradient(circle at 80% 20%, rgba(139,120,255,.16), transparent 30%),
    linear-gradient(135deg, #07101e, #0b1727 55%, #0a1322);
}
.login-visual { padding: 68px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: grid; place-items: center; color: #05111f; font-weight: 900; letter-spacing: -.06em; box-shadow: 0 14px 36px rgba(92,200,255,.22); }
.brand-title strong { display: block; font-size: 20px; }
.brand-title span { color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hero-copy { max-width: 730px; padding: 80px 0; }
.hero-copy .eyebrow, .page-eyebrow { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-copy h1 { font-size: clamp(46px, 6vw, 88px); line-height: .94; letter-spacing: -.055em; margin: 16px 0 22px; }
.hero-copy p { max-width: 680px; color: #bfd0e5; font-size: 18px; line-height: 1.6; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-pills span { padding: 10px 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius: 999px; font-size: 13px; color: #dce7f5; }
.visual-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.visual-card { min-height: 120px; padding: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); backdrop-filter: blur(12px); border-radius: 18px; }
.visual-card small { color: var(--muted); display: block; margin-bottom: 10px; }
.visual-card strong { font-size: 25px; }
.login-panel-wrap { display: grid; place-items: center; padding: 38px; background: rgba(2,8,16,.25); backdrop-filter: blur(10px); border-left: 1px solid rgba(255,255,255,.06); }
.login-panel { width: min(470px, 100%); background: rgba(13,24,40,.88); border: 1px solid rgba(255,255,255,.1); border-radius: 26px; padding: 34px; box-shadow: var(--shadow); }
.login-panel h2 { margin: 18px 0 8px; font-size: 30px; letter-spacing: -.035em; }
.login-panel > p { color: var(--muted); line-height: 1.55; margin-bottom: 28px; }
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label { color: #d8e4f2; font-size: 13px; font-weight: 700; }
.field input, .field select, .toolbar input, .toolbar select { width: 100%; border: 1px solid var(--line); background: #0a1525; color: var(--text); border-radius: 12px; padding: 12px 14px; outline: none; }
.field input:focus, .field select:focus, .toolbar input:focus, .toolbar select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(92,200,255,.1); }
.primary, .secondary, .ghost, .danger-btn, .mini-btn { border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 800; }
.primary { background: linear-gradient(135deg, var(--brand), #60a9ff); color: #04111f; }
.secondary { background: #172a44; color: #e8f2ff; border: 1px solid #294262; }
.ghost { background: transparent; color: #d9e8fa; border: 1px solid var(--line); }
.danger-btn { background: rgba(255,123,142,.12); color: #ff9bad; border: 1px solid rgba(255,123,142,.3); }
.login-panel .primary { width: 100%; margin-top: 8px; }
.login-note { margin-top: 18px; color: #6f829b; font-size: 12px; text-align: center; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 256px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 16px; border-right: 1px solid #1d2e48; background: #091423; overflow-y: auto; }
.sidebar-brand { padding: 6px 8px 20px; display: flex; align-items: center; gap: 11px; }
.sidebar-brand .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
.sidebar-brand strong { display: block; font-size: 14px; }
.sidebar-brand small { color: #7d90a8; }
.nav-section { margin: 14px 0 8px; padding: 0 10px; color: #657b96; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.nav-btn { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 12px; margin: 4px 0; background: transparent; color: #aebed1; border: 1px solid transparent; border-radius: 12px; text-align: left; }
.nav-btn:hover { background: #0f2036; color: #eff7ff; }
.nav-btn.active { background: linear-gradient(135deg, rgba(92,200,255,.14), rgba(139,120,255,.12)); border-color: rgba(92,200,255,.22); color: #fff; }
.nav-btn .icon { width: 20px; text-align: center; opacity: .9; }
.sidebar-bottom { margin-top: 18px; padding: 12px; border: 1px solid #203551; border-radius: 14px; background: #0e1c30; }
.sidebar-bottom small { display: block; color: #7f94ad; }
.sidebar-bottom strong { display: block; margin: 4px 0 10px; }
.sidebar-bottom button { width: 100%; padding: 9px 10px; }

.workspace { min-width: 0; }
.topbar { height: 72px; position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid #1e314c; background: rgba(7,16,30,.88); backdrop-filter: blur(14px); }
.topbar-left { display: flex; align-items: center; gap: 16px; }
.hotel-chip { padding: 9px 12px; border-radius: 10px; background: #10233a; color: #dbe8f6; font-size: 12px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.clock { color: #9eb1c8; font-variant-numeric: tabular-nums; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 5px rgba(81,210,161,.09); }
.user-pill { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid #243a58; border-radius: 999px; background: #0d1b2e; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #5cc8ff, #8b78ff); color: #07101e; font-weight: 900; }

.content { padding: 28px; max-width: 1700px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-head h1 { margin: 4px 0 6px; font-size: 34px; letter-spacing: -.045em; }
.page-head p { margin: 0; color: var(--muted); }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.grid { display: grid; gap: 16px; }
.grid.kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.two { grid-template-columns: 1.15fr .85fr; }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.card { background: linear-gradient(180deg, rgba(17,31,51,.96), rgba(12,24,40,.96)); border: 1px solid #203553; border-radius: var(--radius); box-shadow: 0 12px 34px rgba(0,0,0,.16); }
.card.pad { padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #203451; }
.card-head h3 { margin: 0; font-size: 16px; }
.card-head small { color: var(--muted); }
.kpi { padding: 18px; position: relative; overflow: hidden; }
.kpi::after { content:""; position:absolute; width:90px; height:90px; border-radius:50%; right:-36px; top:-38px; background: rgba(92,200,255,.06); }
.kpi small { color: var(--muted); font-weight: 700; }
.kpi strong { display: block; margin: 8px 0 5px; font-size: 28px; letter-spacing: -.045em; }
.delta { font-size: 12px; color: var(--ok); }
.delta.down { color: var(--danger); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid #2b4260; color: #d9e8f8; background: #12243a; }
.badge.ok { color: #81e9c2; background: rgba(81,210,161,.09); border-color: rgba(81,210,161,.25); }
.badge.warn { color: #ffd986; background: rgba(255,204,102,.08); border-color: rgba(255,204,102,.25); }
.badge.danger { color: #ff9aac; background: rgba(255,123,142,.08); border-color: rgba(255,123,142,.25); }
.badge.info { color: #9bcbff; background: rgba(126,184,255,.08); border-color: rgba(126,184,255,.24); }

.chart { height: 210px; padding: 20px; display: flex; align-items: end; gap: 10px; }
.bar-wrap { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: flex-end; height: 100%; }
.bar { width: 100%; max-width: 42px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #5cc8ff, #4f7dff); min-height: 8px; box-shadow: 0 8px 20px rgba(92,200,255,.12); }
.bar-wrap span { color: #6e839d; font-size: 10px; }
.timeline { padding: 6px 20px 18px; }
.timeline-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid #1b2f49; align-items: center; }
.timeline-row:last-child { border-bottom: 0; }
.timeline-row time { color: #6e839d; font-size: 12px; }
.timeline-row strong { display: block; font-size: 13px; }
.timeline-row small { color: var(--muted); }

.toolbar { display: grid; grid-template-columns: minmax(220px,1fr) repeat(2, 190px) auto; gap: 12px; margin-bottom: 18px; }
.stay-map { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.room { padding: 16px; border: 1px solid #223956; border-radius: 16px; background: #0d1d31; min-height: 134px; position: relative; transition: .18s ease; }
.room:hover { transform: translateY(-2px); border-color: #3a5c82; }
.room .room-code { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: #8298b3; }
.room h3 { margin: 8px 0 5px; font-size: 17px; }
.room p { margin: 0 0 12px; color: #9db0c7; font-size: 12px; line-height: 1.45; }
.room .status-strip { position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 16px 0 0 16px; background: #4e6f95; }
.room.ocupado .status-strip { background: var(--brand-2); }
.room.livre .status-strip { background: var(--ok); }
.room.limpeza .status-strip { background: var(--warn); }
.room.bloqueado .status-strip { background: var(--danger); }
.room-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.legend { display:flex; gap: 12px; flex-wrap:wrap; margin: 4px 0 18px; }
.legend span { display:flex; align-items:center; gap:6px; color:#9db0c7; font-size:12px; }
.legend i { width:8px; height:8px; border-radius:50%; display:inline-block; }

.integration-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.integration-card { padding:20px; }
.integration-brand { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.integration-logo { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:#152a45; font-weight:900; color:#dff4ff; }
.integration-card h3 { margin:0; }
.integration-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px; }
.integration-metrics div { padding:10px; background:#0b192b; border:1px solid #1d324d; border-radius:11px; }
.integration-metrics small { display:block; color:#778da8; font-size:10px; }
.integration-metrics strong { display:block; margin-top:4px; font-size:15px; }
.log-list { margin-top:16px; display:grid; gap:8px; }
.log-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid #1b2e47; font-size:12px; }
.log-row:last-child { border-bottom:0; }

.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th, td { padding:13px 16px; border-bottom:1px solid #1b304a; text-align:left; font-size:12px; }
th { color:#8197b2; font-size:10px; text-transform:uppercase; letter-spacing:.1em; background:#0d1a2c; position:sticky; top:0; }
td strong { font-size:13px; }
td small { display:block; color:#7f94ad; margin-top:4px; }
.amount { font-variant-numeric:tabular-nums; font-weight:800; }

.cash-layout { display:grid; grid-template-columns:340px 1fr; gap:16px; }
.cash-register { padding:20px; }
.cash-total { font-size:36px; letter-spacing:-.05em; margin:10px 0 18px; }
.cash-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cash-summary { display:grid; gap:10px; margin-top:18px; }
.cash-summary-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #1d314b; }
.cash-summary-row span { color:#899db5; }

.pdv-layout { display:grid; grid-template-columns:1fr 380px; gap:16px; }
.menu-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:18px; }
.menu-item { padding:16px; border:1px solid #213852; background:#0d1d31; border-radius:14px; }
.menu-item strong { display:block; margin-bottom:4px; }
.menu-item small { color:#8298b2; }
.menu-item .price { margin-top:12px; display:flex; align-items:center; justify-content:space-between; }
.ticket { padding:18px; }
.ticket-row { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid #1d3048; }
.ticket-total { display:flex; justify-content:space-between; gap:14px; padding:18px 0; font-size:20px; font-weight:900; }

.messaging-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; }
.chat-card { min-height:690px; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; }
.chat-header { padding:16px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #213650; background:#0d1b2e; }
.chat-person { display:flex; align-items:center; gap:11px; }
.chat-person .avatar { width:38px; height:38px; }
.chat-person strong { display:block; }
.chat-person small { color:#7990aa; }
.chat-stream { padding:22px; display:flex; flex-direction:column; gap:12px; overflow:auto; max-height:570px; background: radial-gradient(circle at 80% 10%, rgba(92,200,255,.045), transparent 28%), #091727; }
.message { max-width:74%; padding:12px 14px; border-radius:15px; line-height:1.45; font-size:13px; box-shadow:0 8px 20px rgba(0,0,0,.08); }
.message.guest { align-self:flex-start; background:#172940; border:1px solid #27415f; border-bottom-left-radius:5px; }
.message.agent { align-self:flex-end; background:linear-gradient(135deg,#174264,#263a6d); border:1px solid rgba(92,200,255,.2); border-bottom-right-radius:5px; }
.message.system { align-self:center; max-width:90%; color:#98adc5; background:#0e1d2f; border:1px dashed #2c4664; text-align:center; font-size:11px; }
.message small { display:block; margin-top:6px; color:#7890aa; font-size:10px; }
.photo-pack { align-self:flex-end; max-width:82%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.demo-photo { min-height:130px; border-radius:14px; border:1px solid rgba(255,255,255,.12); position:relative; overflow:hidden; background:linear-gradient(135deg,#314764,#1a2337); }
.demo-photo::before { content:""; position:absolute; inset:30% -10% -20%; background:linear-gradient(145deg,rgba(82,186,136,.8),rgba(32,74,90,.3)); transform:skewY(-8deg); }
.demo-photo::after { content:""; position:absolute; width:74px; height:74px; border-radius:50%; background:rgba(255,210,117,.42); right:18px; top:15px; filter:blur(2px); }
.demo-photo span { position:absolute; z-index:2; left:12px; bottom:10px; font-size:11px; font-weight:800; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.chat-compose { padding:14px; display:flex; gap:10px; border-top:1px solid #20354f; background:#0d1b2e; }
.chat-compose input { flex:1; padding:11px 13px; border-radius:12px; border:1px solid #25405f; background:#091625; color:#fff; }
.chat-compose button { padding:11px 15px; }
.agent-panel { display:grid; gap:14px; }
.agent-step { padding:14px; border:1px solid #213852; border-radius:13px; background:#0d1b2e; }
.agent-step small { color:#7290ad; }
.agent-step strong { display:block; margin:4px 0; font-size:13px; }
.agent-step p { margin:0; color:#94a9c0; font-size:12px; line-height:1.45; }
.agent-step.done { border-color:rgba(81,210,161,.25); background:rgba(81,210,161,.045); }
.agent-step.active { border-color:rgba(92,200,255,.34); box-shadow:0 0 0 3px rgba(92,200,255,.04); }

.toast-reservation { position:fixed; right:24px; bottom:24px; width:min(390px, calc(100vw - 48px)); z-index:50; background:linear-gradient(180deg,#122640,#0d1a2d); border:1px solid rgba(92,200,255,.3); border-radius:18px; box-shadow:0 24px 70px rgba(0,0,0,.42); overflow:hidden; transform:translateY(140%); opacity:0; transition:.35s ease; }
.toast-reservation.show { transform:translateY(0); opacity:1; }
.toast-top { padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #24405f; }
.toast-top strong { font-size:13px; }
.toast-body { padding:16px; }
.toast-body h3 { margin:0 0 6px; font-size:18px; }
.toast-body p { margin:0 0 14px; color:#93aac1; font-size:12px; line-height:1.5; }
.toast-data { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.toast-data div { padding:10px; border:1px solid #223d5b; border-radius:10px; background:#0b192a; }
.toast-data small { display:block; color:#6f86a0; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.toast-data strong { display:block; margin-top:4px; font-size:12px; }
.toast-actions { padding:0 16px 16px; display:flex; gap:8px; }
.toast-actions button { flex:1; }

.drawer-backdrop { position:fixed; inset:0; z-index:70; background:rgba(1,6,12,.66); backdrop-filter:blur(4px); display:none; }
.drawer-backdrop.show { display:block; }
.drawer { position:absolute; right:0; top:0; height:100%; width:min(520px,100%); background:#0a1627; border-left:1px solid #27415f; padding:24px; overflow:auto; }
.drawer-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.drawer h2 { margin:4px 0; }
.drawer-section { margin-top:22px; padding-top:18px; border-top:1px solid #213650; }
.drawer-section h3 { margin:0 0 12px; font-size:14px; }
.drawer-info { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.drawer-info div { padding:12px; border-radius:12px; background:#0f1e31; border:1px solid #203653; }
.drawer-info small { display:block; color:#738aa4; }
.drawer-info strong { display:block; margin-top:5px; }

.split-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.metric-block { padding:15px; border:1px solid #203551; border-radius:14px; background:#0c1a2d; }
.metric-block small { color:#7e93ab; }
.metric-block strong { display:block; margin-top:7px; font-size:20px; }
.accounting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.account-tree { padding:18px; }
.account-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #1d3048; font-size:12px; }
.account-row span:first-child { color:#aebfd2; }

@media (max-width: 1280px) {
  .grid.kpis { grid-template-columns:repeat(3,1fr); }
  .stay-map { grid-template-columns:repeat(3,1fr); }
  .integration-grid { grid-template-columns:1fr 1fr; }
  .pdv-layout, .messaging-layout, .grid.two { grid-template-columns:1fr; }
}
@media (max-width: 980px) {
  .login-page { grid-template-columns:1fr; }
  .login-visual { display:none; }
  .shell { grid-template-columns:80px 1fr; }
  .sidebar { padding:16px 10px; }
  .sidebar-brand .brand-title, .nav-btn span:not(.icon), .nav-section, .sidebar-bottom { display:none; }
  .nav-btn { justify-content:center; }
  .stay-map, .integration-grid, .grid.three { grid-template-columns:1fr 1fr; }
  .grid.kpis { grid-template-columns:1fr 1fr; }
  .cash-layout { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .shell { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .content { padding:18px; }
  .topbar { padding:0 16px; }
  .hotel-chip, .clock { display:none; }
  .page-head { align-items:flex-start; flex-direction:column; }
  .grid.kpis, .stay-map, .integration-grid, .grid.three, .split-metrics, .accounting-grid { grid-template-columns:1fr; }
  .toolbar { grid-template-columns:1fr; }
  .menu-grid { grid-template-columns:1fr 1fr; }
}