:root{
  --bg:#0b1824;
  --panel:#102235;
  --panel-2:#0c1c2d;
  --line:rgba(255,255,255,.09);
  --text:#e5e7eb;
  --muted:#9db0c4;
  --accent:#d4af37;
  --accent-2:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --radius:22px;
  --shadow:0 18px 40px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(212,175,55,.12), transparent 20%),
    linear-gradient(180deg, #08121d 0%, #0d1b2a 100%);
  min-height:100vh;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.page-shell{width:min(1400px, calc(100% - 24px));margin:0 auto 36px}
.topbar{
  width:min(1400px, calc(100% - 24px));
  margin:20px auto 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px}
.brand h1{margin:0;font-size:1.2rem}
.brand p{margin:4px 0 0;color:var(--muted);font-size:.95rem}
.brand-logo{
  width:70px;height:70px;border-radius:18px;
  background:transparent;display:grid;place-items:center;
}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.login-card{
  width:min(620px, 100%);
  margin:40px auto;
  padding:28px;
}
.hero{padding:24px;margin-bottom:18px}
.hero h2{margin:0 0 6px}
.muted{color:var(--muted)}
.eyebrow{
  display:inline-flex;
  border-radius:999px;
  padding:8px 12px;
  background:rgba(212,175,55,.12);
  border:1px solid rgba(212,175,55,.26);
  color:#f4d87f;
  font-size:.84rem;
  font-weight:700;
  margin-bottom:12px;
}
.hidden{display:none !important}
.form-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:8px}
.field span{color:#d4e0ec;font-size:.92rem}
.field.span-2{grid-column:1 / -1}
input,select,textarea{
  width:100%;
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.1);
  background:#0c1c2d;
  color:var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(212,175,55,.55);
  box-shadow:0 0 0 3px rgba(212,175,55,.12);
}
textarea{min-height:120px;resize:vertical}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  border:none;
  border-radius:14px;
  padding:12px 16px;
  cursor:pointer;
  font-weight:700;
}
.btn-primary{background:linear-gradient(135deg, var(--accent), #f6d769); color:#122033}
.btn-secondary{background:#13283d;color:var(--text);border:1px solid var(--line)}
.btn-danger{background:rgba(239,68,68,.16);color:#fecaca;border:1px solid rgba(239,68,68,.3)}
.btn-success{background:linear-gradient(135deg, #22c55e, #86efac); color:#0d1b2a}
.error{min-height:24px;color:#fca5a5}
.info-box{
  margin-top:18px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.22);
  color:#d1fae5;
  line-height:1.6;
}
.nav-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:12px;
  margin-bottom:18px;
}
.nav-bar .nav-btn.active{
  background:linear-gradient(135deg, var(--accent), #f6d769);
  color:#122033;
  border-color:transparent;
}
.section-stack{display:grid;gap:18px}
.section-card{padding:22px}
.section-card > h3{margin-top:0}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.table-wrap{overflow:auto;border-radius:16px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse}
th,td{
  text-align:left;
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
th{color:#d4e0ec;background:#0c1c2d;position:sticky;top:0}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:96px;padding:8px 12px;border-radius:999px;font-weight:700;font-size:.86rem
}
.badge-good{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.32);color:#d1fae5}
.badge-warn{background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.32);color:#fde68a}
.badge-danger{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.32);color:#fecaca}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat-card{padding:18px;border-radius:18px;background:var(--panel-2);border:1px solid var(--line)}
.stat-card h4{margin:0 0 10px;font-size:.95rem}
.stat-value{font-size:2rem;font-weight:800}
.grid-two{display:grid;grid-template-columns:1.2fr .9fr;gap:18px}
.room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.room-item,.detail-card{
  padding:14px;border-radius:16px;border:1px solid var(--line);background:#0c1c2d;
}
.permissions-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 14px;
}
.checkbox-row{display:flex;align-items:center;gap:10px;color:var(--text)}
.checkbox-row input{width:auto}
.note-box{
  padding:16px;border-radius:16px;border:1px solid var(--line);background:#0c1c2d;min-height:120px
}
.small{font-size:.88rem;color:var(--muted)}
code{background:#0c1c2d;padding:2px 6px;border-radius:8px}
.empty{color:var(--muted);padding:16px}
.status-select{min-width:170px}
@media (max-width: 1100px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-two{grid-template-columns:1fr}
  .permissions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 720px){
  .page-shell,.topbar{width:min(100% - 18px, 1400px)}
  .form-grid,.stats,.room-grid,.permissions-grid{grid-template-columns:1fr}
  .field.span-2{grid-column:auto}
  .top-actions,.actions,.toolbar{width:100%}
}
.top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.guest-portal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.guest-portal-grid h3{margin:6px 0 0}
@media (max-width: 900px){.guest-portal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 620px){.guest-portal-grid{grid-template-columns:1fr}}
.login-choice-card{max-width:860px}
.login-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.choice-card{
  min-height:190px;
  padding:22px;
  border-radius:20px;
  border:1px solid var(--line);
  background:#0c1c2d;
  color:var(--text);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.choice-card:hover{transform:translateY(-2px);border-color:rgba(212,175,55,.5);background:#13283d}
.choice-card strong{font-size:1.2rem}
.choice-card span:last-child{color:var(--muted);line-height:1.5}
.choice-icon{font-size:2.2rem;line-height:1}
.copy-card{
  margin:18px 0;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(212,175,55,.32);
  background:rgba(212,175,55,.08);
  display:grid;
  gap:14px;
}
.copy-card h3{margin:0 0 4px}
.copy-field{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.copy-field:has(.field + .field){grid-template-columns:1fr 1fr auto}
.copy-field input[readonly]{cursor:text;background:#081827}
@media (max-width: 720px){
  .login-choice-grid,.copy-field,.copy-field:has(.field + .field){grid-template-columns:1fr}
}