:root{
  color-scheme: light;
  --font-display: 'Sora', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-lg: 8px;
  --radius: 5px;
  --radius-sm: 3px;

  --bg: oklch(97.5% 0.004 260);
  --bg-elevated: oklch(100% 0 0);
  --card: oklch(99% 0.003 260);
  --card-hover: oklch(96% 0.006 260);
  --border: oklch(0% 0 0 / 0.08);
  --border-strong: oklch(0% 0 0 / 0.13);
  --fg: oklch(20% 0.012 260);
  --fg-muted: oklch(46% 0.014 260);
  --fg-faint: oklch(60% 0.012 260);

  --accent: oklch(54% 0.135 195);
  --accent-fg: oklch(100% 0 0);
  --accent-soft: oklch(54% 0.135 195 / 0.10);
  --ok: oklch(50% 0.13 155);
  --ok-soft: oklch(50% 0.13 155 / 0.10);
  --warn: oklch(58% 0.15 70);
  --warn-soft: oklch(58% 0.15 70 / 0.12);
  --danger: oklch(56% 0.20 25);
  --danger-soft: oklch(56% 0.20 25 / 0.10);

  --shadow: 0 10px 28px -16px rgba(20,20,40,.14);
  --shadow-lg: 0 24px 48px -20px rgba(20,20,40,.22);
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: oklch(16% 0.015 260);
  --bg-elevated: oklch(19% 0.016 260);
  --card: oklch(21% 0.017 260);
  --card-hover: oklch(25% 0.018 260);
  --border: oklch(100% 0 0 / 0.08);
  --border-strong: oklch(100% 0 0 / 0.14);
  --fg: oklch(95% 0.004 260);
  --fg-muted: oklch(72% 0.012 260);
  --fg-faint: oklch(54% 0.012 260);

  --accent: oklch(74% 0.125 195);
  --accent-fg: oklch(14% 0.01 260);
  --accent-soft: oklch(74% 0.125 195 / 0.16);
  --ok: oklch(72% 0.15 155);
  --ok-soft: oklch(72% 0.15 155 / 0.16);
  --warn: oklch(80% 0.15 80);
  --warn-soft: oklch(80% 0.15 80 / 0.16);
  --danger: oklch(70% 0.19 25);
  --danger-soft: oklch(70% 0.19 25 / 0.16);

  --shadow: 0 10px 30px -12px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-family:var(--font-display); letter-spacing:-.01em}
button{font:inherit}
input,select,textarea{
  font:inherit; color:var(--fg); background:var(--bg-elevated);
  padding:.55rem .7rem; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  width:100%; transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; resize:vertical}

button{
  padding:.55rem .95rem; border:1px solid var(--border-strong); background:var(--card);
  color:var(--fg); border-radius:var(--radius-sm); cursor:pointer; font-weight:600; font-size:.82rem;
  transition:background .15s, border-color .15s, transform .05s;
}
button:hover{background:var(--card-hover); border-color:var(--border-strong)}
button:active{transform:translateY(1px)}
button.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-fg)}
button.primary:hover{filter:brightness(1.06)}
button.ghost{background:transparent; border-style:dashed}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; padding:0; border-radius:999px; background:transparent; border-color:transparent;
}
.icon-btn:hover{background:var(--card-hover)}
.icon{stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round}
.icon-sun circle{fill:currentColor; stroke:none}
:root:not([data-theme="dark"]) .icon-moon{display:none}
:root[data-theme="dark"] .icon-sun{display:none}

/* ---------- tooltips ---------- */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  background:var(--fg); color:var(--bg); font-family:var(--font-body); font-weight:500; font-size:.72rem;
  line-height:1.4; padding:.5rem .65rem; border-radius:var(--radius-sm); width:220px; white-space:normal;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .12s; z-index:60;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after{opacity:1}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
  padding:.7rem 1.25rem; border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
}
.brand{display:flex; align-items:center; gap:.55rem}
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem;
  border-radius:var(--radius); background:var(--accent); color:var(--accent-fg);
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
}
.topbar h1{font-size:1rem; font-weight:700}
.tabs{display:flex; gap:.2rem; background:var(--bg-elevated); padding:.25rem; border-radius:999px; border:1px solid var(--border)}
.tab{border:none; background:transparent; border-radius:999px; padding:.4rem .9rem; color:var(--fg-muted); font-size:.85rem; font-weight:600}
.tab:hover{background:var(--card-hover); color:var(--fg)}
.tab[aria-selected="true"]{background:var(--accent); color:var(--accent-fg)}
.topbar-actions{display:flex; gap:.6rem; margin-left:auto; align-items:center}
.topbar-actions input{width:180px}

.session-email{font-size:.8rem; color:var(--fg-muted); margin-right:.1rem}

/* ---------- login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; background:var(--bg);
}
.login-card{
  width:min(380px, 100%); background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:2rem 1.9rem;
  display:flex; flex-direction:column; gap:1rem;
}
.login-brand{display:flex; align-items:center; gap:.6rem; justify-content:center}
.login-brand h1{font-size:1.15rem}
.login-sub{margin:0; text-align:center; color:var(--fg-muted); font-size:.85rem}
.login-card label{display:flex; flex-direction:column; gap:.35rem; font-size:.82rem; color:var(--fg-muted); font-weight:600; margin-bottom:.85rem}
#login-step-totp input{letter-spacing:.4em; text-align:center; font-size:1.1rem}
.login-card button.primary{width:100%}
.login-msg{margin:0; min-height:1.1em; text-align:center; font-size:.82rem; color:var(--danger)}

main{padding:1.25rem; max-width:1440px; margin:0 auto}

/* ---------- KPI cards ---------- */
.kpis{display:grid; grid-template-columns:repeat(6, 1fr); gap:.85rem; margin-bottom:1rem}
.kpi{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:.9rem 1.05rem;
}
.kpi-label{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-faint); font-weight:700}
.kpi-value{font-family:var(--font-display); font-size:1.7rem; font-weight:800; margin-top:.2rem}
.kpi-value.ok{color:var(--ok)}
.kpi-value.warn{color:var(--warn)}
.kpi-value.danger{color:var(--danger)}
@media (max-width:1200px){ .kpis{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:960px){ .kpis{grid-template-columns:repeat(2, 1fr)} }

.toolbar{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:.85rem}
.toolbar input[type="search"]{width:280px}
.toolbar select{width:auto}
.spacer{flex:1}

/* ---------- table ---------- */
.table-wrap{
  overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--card); box-shadow:var(--shadow);
}
table{border-collapse:collapse; width:100%; min-width:900px}
th,td{text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap}
th{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-faint); font-weight:700; background:transparent}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--card-hover)}
td.center,th.center{text-align:center}
.hotel-name{font-weight:700; display:block}
.hotel-sub{display:block; font-size:.8rem; color:var(--fg-faint); margin-top:.1rem}

.pill{
  display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .6rem; border-radius:999px;
  font-size:.71rem; font-weight:700; border:1px solid var(--border-strong); background:var(--bg-elevated);
}
.pill.a{color:var(--warn); background:var(--warn-soft); border-color:transparent}
.pill.b{color:var(--accent); background:var(--accent-soft); border-color:transparent}
.pill.live{color:var(--ok); background:var(--ok-soft); border-color:transparent}
.pill.down{color:var(--danger); background:var(--danger-soft); border-color:transparent}
.warn-pill{color:var(--danger); background:var(--danger-soft); font-size:.7rem; margin-top:.25rem; display:inline-flex; align-items:center; gap:.25rem; border-color:transparent}

.flag{display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font-size:.82rem; color:var(--fg-muted)}
.flag input{width:auto; accent-color:var(--accent)}
.flag.on{color:var(--ok); font-weight:700}

.row-actions{display:flex; gap:.3rem; flex-wrap:wrap; align-items:center; justify-content:flex-end}
.row-actions button{padding:.3rem .6rem; font-size:.75rem; border-radius:999px; font-weight:600}
.icon-action{
  display:inline-flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem;
  padding:0; border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--fg-muted);
}
.icon-action:hover{color:var(--fg); background:var(--card-hover)}

.empty{color:var(--fg-muted); padding:3rem; text-align:center}

/* ---------- dialogs ---------- */
dialog{
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:0; color:inherit;
  background:var(--bg-elevated); box-shadow:var(--shadow-lg);
  width:min(1080px, 94vw); max-height:88vh;
}
dialog::backdrop{background:oklch(10% 0.01 260 / 0.55); backdrop-filter:blur(2px)}

.dialog-head{
  display:flex; align-items:center; gap:.75rem; padding:1.1rem 1.4rem;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg-elevated); z-index:2;
}
.dialog-head h2{font-size:1.05rem}
.dialog-close{margin-left:.5rem}
.mode-switch{margin-left:auto; display:flex; gap:.2rem; background:var(--card); padding:.2rem; border-radius:999px; border:1px solid var(--border)}
.mode{border:none; background:transparent; border-radius:999px; padding:.35rem .8rem; font-size:.82rem; color:var(--fg-muted)}
.mode[aria-selected="true"]{background:var(--accent); color:var(--accent-fg)}

.fields{padding:1.4rem; max-height:calc(88vh - 130px); overflow:auto; display:flex; flex-direction:column; gap:1rem}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.2rem;
}
.card.highlight{
  border-color:transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(120deg, var(--accent), var(--ok)) border-box;
  border:1px solid transparent;
}
.card h3{font-size:.85rem; font-weight:700; margin-bottom:.9rem; color:var(--fg)}
.muted-inline{color:var(--fg-faint); font-weight:400; font-size:.78rem}
.grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:.85rem}
.grid label{display:flex; flex-direction:column; gap:.35rem; font-size:.8rem; color:var(--fg-muted); font-weight:600}
.grid label.span-2{grid-column:span 2}
label.req::after{content:" *"; color:var(--danger)}
.check-row{display:flex; gap:1.5rem; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--border)}
label.inline{flex-direction:row; align-items:center; gap:.45rem; display:inline-flex; font-size:.85rem; color:var(--fg-muted); font-weight:500}
label.inline input{width:auto; accent-color:var(--accent)}

.hint{color:var(--fg-faint); font-size:.78rem; margin:0 0 .7rem}
.room{display:grid; grid-template-columns:1.4fr 1.4fr .7fr auto; gap:.5rem; margin-bottom:.5rem; align-items:center}
.room button{padding:.4rem .6rem}

.dialog-foot{
  display:flex; align-items:center; gap:.75rem; padding:.9rem 1.4rem;
  border-top:1px solid var(--border); position:sticky; bottom:0; background:var(--bg-elevated);
}
.req-note{font-size:.78rem; color:var(--fg-faint)}
.req-mark{color:var(--danger)}
#dialog-msg{color:var(--danger); font-size:.85rem}

.infra-list{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.25rem; padding:1.25rem; margin:0; min-width:320px}
.infra-list dt{color:var(--fg-faint); font-size:.78rem}
.infra-list dd{margin:0; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.85rem; word-break:break-all}
.infra-list dd.missing{color:var(--fg-faint); font-style:italic; font-family:inherit}
#infra-dialog, #raw-dialog{padding:0}
#infra-dialog h2, #raw-dialog h2{padding:1.1rem 1.4rem 0}
#infra-dialog button, #raw-dialog button{margin:1rem 1.4rem 1.4rem}
pre{margin:0; padding:1.25rem 1.4rem; max-height:60vh; overflow:auto; font-size:12px}

.log{
  position:fixed; left:1rem; bottom:1rem; margin:0; padding:.55rem .85rem; border-radius:999px;
  background:var(--card); border:1px solid var(--border); font-size:.82rem; color:var(--fg-muted);
  max-width:60vw; box-shadow:var(--shadow); z-index:20;
}
.log:empty{display:none}

/* ---------- responsive ---------- */
@media (max-width: 960px){
  .grid{grid-template-columns:repeat(2, 1fr)}
  .grid label.span-2{grid-column:span 2}
}

@media (max-width: 720px){
  .topbar{padding:.6rem .8rem}
  .topbar h1{display:none}
  .tabs{order:3; width:100%; justify-content:space-between}
  .topbar-actions{width:100%}
  .topbar-actions input{flex:1; width:auto}
  main{padding:.75rem}
  .kpis{grid-template-columns:1fr 1fr}
  .toolbar input[type="search"]{width:100%}
  .toolbar{gap:.5rem}

  dialog{
    width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    border-radius:0; margin:0; inset:0;
  }
  .fields{max-height:calc(100dvh - 128px)}
  .grid{grid-template-columns:1fr}
  .grid label.span-2{grid-column:span 1}
  .room{grid-template-columns:1fr 1fr; grid-template-areas:"name name" "link price" "actions actions"}
  .dialog-foot{flex-wrap:wrap}
  .req-note{order:1; width:100%}
}