:root {
  --accent: #44BAC6;
  --accent-strong: #2e8c97;
  --btn-gradient: linear-gradient(135deg, #2e8c97, #44BAC6);
  --border: #e5e5e8;
  --bg: #f7f7f8;
  --text: #18181b;
  --text-muted: #71717a;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text); background: #ffffff;
  display: flex; flex-direction: column;
}
.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 16px; color: var(--text); text-decoration: none; }
.logout-link { font-size: 13px; color: var(--text-muted); text-decoration: none; }

.page { max-width: 480px; margin: 0 auto; padding: 24px 20px 60px; flex: 1; min-height: 0; }
/* Room Styler's own layout needs the full viewport, not the default
   480px-centered column -- its own extensive CSS lives inline in
   room_styler.html (ported from dreamdeco-visual, scoped to that page
   only), same convention the source uses. This just clears the base
   page's constraints so that CSS has a clean flex container to work
   with. */
.page.rs-page { max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; }

.flash { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }

.auth-card { text-align: center; padding-top: 40px; }
.auth-card h1 { font-size: 24px; margin: 0 0 8px; }
.auth-card .sub { color: var(--text-muted); font-size: 14px; margin: 0 0 28px; }

.btn-google {
  display: block; width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border);
  background: #fff; color: var(--text); font-weight: 600; text-decoration: none; font-size: 14px;
}
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.email-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.email-form label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.email-form input {
  padding: 12px; border-radius: 10px; border: 1px solid var(--border); font-size: 15px; font-family: inherit;
}
.fine-print { font-size: 12px; color: var(--text-muted); margin-top: 16px; }

.btn-primary {
  background: var(--btn-gradient); color: #fff; border: none; border-radius: 999px;
  padding: 13px 20px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-primary:hover { filter: brightness(0.95); }
.btn-primary:disabled { opacity: 0.5; cursor: default; filter: none; }

.admin-page { max-width: 400px; }
.admin-form { display: flex; flex-direction: column; gap: 10px; }
.admin-form label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.admin-form input { padding: 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; }