:root {
  --canvas: #F6F3ED;
  --surface: #EDE9E0;
  --elevated: #E2DDD3;
  --ink: #1C1917;
  --ink-sec: #78716C;
  --ink-muted: #A8A29E;
  --bake: #B84C2A;
  --bake-light: rgba(184,76,42,0.1);
  --bake-hover: #A34224;
  --ok: #3D8B5F;
  --ok-light: rgba(61,139,95,0.1);
  --warn: #C48820;
  --border: #D6D0C5;
  --white: #FFFFFF;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height:100%; overflow:hidden;
  font-family:'Manrope',-apple-system,sans-serif;
  background:var(--canvas); color:var(--ink);
  user-select:none; -webkit-user-select:none;
}

/* Layout */
.app { height:100vh; display:flex; flex-direction:column; }

/* Top bar */
.topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 24px; background:var(--white);
  border-bottom:1px solid var(--border);
}
.topbar-left { display:flex; align-items:center; gap:12px; }
.topbar-hotel {
  font-family:'Newsreader',Georgia,serif;
  font-size:18px; font-weight:700; color:var(--ink);
}
.topbar-stars { font-size:10px; color:var(--bake); letter-spacing:4px; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar-time {
  font-family:'Newsreader',Georgia,serif;
  font-size:24px; font-weight:400; color:var(--ink);
}
.topbar-weather {
  font-size:13px; color:var(--ink-sec);
  display:flex; align-items:center; gap:6px;
}
.topbar-temp { font-size:20px; font-weight:700; color:var(--ink); }

/* Content area */
.content { flex:1; overflow:hidden; position:relative; }
.screen {
  position:absolute; top:0; left:0; right:0; bottom:0;
  display:none; flex-direction:column; overflow-y:auto;
  padding:24px;
  -webkit-overflow-scrolling:touch;
}
.screen.active { display:flex; }
.screen-fade { animation:screenFade 0.3s ease; }
@keyframes screenFade {
  from { opacity:0; transform:translateX(20px); }
  to { opacity:1; transform:translateX(0); }
}

/* Bottom nav */
.nav {
  display:flex; background:var(--white);
  border-top:1px solid var(--border);
  padding:4px 0 8px;
}
.nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:8px 4px; cursor:pointer;
  color:var(--ink-muted); font-size:10px; font-weight:600;
  transition:color 0.2s; border:none; background:none;
  font-family:inherit;
}
.nav-item.active { color:var(--bake); }
.nav-item:active { transform:scale(0.95); }
.nav-icon { font-size:22px; }

/* ── Welcome Screen ── */
.welcome {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; gap:20px;
}
.welcome-greeting {
  font-size:14px; color:var(--ink-sec);
  text-transform:uppercase; letter-spacing:3px;
}
.welcome-name {
  font-family:'Newsreader',Georgia,serif;
  font-size:36px; font-weight:700; color:var(--ink);
}
.welcome-room {
  font-size:14px; color:var(--ink-muted);
}
.welcome-line { width:60px; height:3px; background:var(--bake); }
.welcome-msg {
  font-family:'Newsreader',Georgia,serif;
  font-size:18px; font-weight:400; font-style:italic;
  color:var(--ink-sec); line-height:1.6; max-width:400px;
}

/* Quick actions grid */
.quick-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:12px; margin-top:24px; width:100%; max-width:500px;
}
.quick-card {
  background:var(--white); border-radius:10px;
  padding:20px 12px; text-align:center;
  box-shadow:0 1px 4px rgba(28,25,23,0.06);
  cursor:pointer; transition:all 0.2s; border:none;
  font-family:inherit;
}
.quick-card:active { transform:scale(0.96); box-shadow:0 1px 2px rgba(28,25,23,0.1); }
.quick-icon { font-size:28px; margin-bottom:6px; }
.quick-label { font-size:12px; font-weight:600; color:var(--ink-sec); }

/* ── Cards ── */
.card {
  background:var(--white); border-radius:10px;
  padding:20px; margin-bottom:12px;
  box-shadow:0 1px 4px rgba(28,25,23,0.06);
}
.card-title {
  font-family:'Newsreader',Georgia,serif;
  font-size:20px; font-weight:700; color:var(--ink);
  margin-bottom:12px; padding-bottom:8px;
  border-bottom:2px solid var(--bake);
  display:flex; align-items:center;
}
.card-icon { font-size:22px; margin-right:14px; flex-shrink:0; }

/* ── Restaurant Screen ── */
.resto-hero {
  position:relative; border-radius:10px; overflow:hidden;
  height:200px; margin-bottom:16px;
}
.resto-hero img { width:100%; height:100%; object-fit:cover; }
.resto-hero-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:20px 24px;
  background:linear-gradient(transparent, rgba(28,25,23,0.7));
}
.resto-hero-title {
  font-family:'Newsreader',Georgia,serif;
  font-size:28px; font-weight:700; color:white;
}
.resto-hero-sub { font-size:14px; color:rgba(255,255,255,0.8); margin-top:4px; }

.resto-book {
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:16px; border-radius:10px;
  background:var(--bake); color:white;
  font-size:16px; font-weight:700; cursor:pointer;
  border:none; width:100%; font-family:inherit;
  margin-bottom:16px; transition:background 0.2s;
}
.resto-book:active { background:var(--bake-hover); }
.resto-book-icon { font-size:20px; }

.menu-item {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:8px 0; border-bottom:1px solid var(--surface);
}
.menu-item:last-child { border-bottom:none; }
.menu-name { font-size:15px; font-weight:600; color:var(--ink); }
.menu-desc { font-size:12px; color:var(--ink-muted); margin-top:2px; }
.menu-price {
  font-family:'Newsreader',Georgia,serif;
  font-size:17px; font-weight:700; color:var(--ink);
  margin-left:12px; white-space:nowrap;
}
.menu-cat {
  font-family:'Newsreader',Georgia,serif;
  font-size:16px; font-weight:700; color:var(--ink);
  margin:14px 0 6px; padding-bottom:4px;
  border-bottom:2px solid var(--surface);
}
.menu-cat:first-child { margin-top:0; }

/* ── Ferry / Events rows ── */
.list-item {
  display:flex; align-items:center; padding:10px 0;
  border-bottom:1px solid var(--surface);
}
.list-item:last-child { border-bottom:none; }
.list-time {
  font-family:'Newsreader',Georgia,serif;
  font-size:22px; font-weight:700; min-width:65px;
}
.list-info { flex:1; margin-left:14px; }
.list-title { font-size:15px; font-weight:600; color:var(--ink); }
.list-sub { font-size:12px; color:var(--ink-sec); margin-top:2px; }
.list-badge {
  font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:4px; text-transform:uppercase;
}

/* ── Service Screen ── */
.service-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.service-card {
  background:var(--white); border-radius:10px;
  padding:24px 16px; text-align:center;
  box-shadow:0 1px 4px rgba(28,25,23,0.06);
  cursor:pointer; border:none; font-family:inherit;
  transition:all 0.2s;
}
.service-card:active { transform:scale(0.96); }
.service-icon { font-size:36px; margin-bottom:8px; }
.service-label { font-size:14px; font-weight:600; color:var(--ink); }
.service-desc { font-size:11px; color:var(--ink-sec); margin-top:4px; }

/* ── Phone ── */
.phone-status {
  display:flex; align-items:center; gap:10px;
  padding:16px 20px; border-radius:10px;
  margin-bottom:16px;
}
.phone-dot { width:10px; height:10px; border-radius:50%; }
.phone-label { font-size:14px; font-weight:600; }

.phone-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
  max-width:300px; margin:0 auto;
}
.phone-key {
  background:var(--white); border-radius:10px;
  padding:16px; text-align:center; cursor:pointer;
  border:1px solid var(--border); font-family:inherit;
  transition:all 0.1s;
}
.phone-key:active { background:var(--surface); }
.phone-digit { font-size:24px; font-weight:700; color:var(--ink); }
.phone-letters { font-size:9px; color:var(--ink-muted); letter-spacing:2px; }
.phone-call {
  grid-column:1/-1; background:var(--ok); color:white;
  border:none; border-radius:10px; padding:14px;
  font-size:18px; font-weight:700; cursor:pointer;
  font-family:inherit; margin-top:4px;
}
.phone-call:active { opacity:0.9; }
.phone-display {
  background:var(--white); border-radius:10px;
  padding:16px 20px; text-align:center; margin-bottom:16px;
  border:1px solid var(--border);
  font-family:'Newsreader',Georgia,serif;
  font-size:28px; font-weight:400; color:var(--ink);
  min-height:60px; display:flex; align-items:center; justify-content:center;
}

/* ── Info A-Z ── */
.info-item {
  padding:12px 0; border-bottom:1px solid var(--surface);
}
.info-item:last-child { border-bottom:none; }
.info-q { font-size:15px; font-weight:700; color:var(--ink); }
.info-a { font-size:13px; color:var(--ink-sec); margin-top:4px; line-height:1.5; }

/* Bath highlight */
.bath-highlight {
  background:var(--ok-light); border-radius:8px;
  padding:12px 16px; display:flex; align-items:center; gap:12px;
}
.bath-hl-label { font-size:14px; font-weight:700; color:var(--ok); }
.bath-hl-value {
  font-family:'Newsreader',Georgia,serif;
  font-size:24px; font-weight:700; color:var(--ok);
}

/* ── PWA additions (post-mockup) ── */

/* Connection badge (top-left, near hotel name) */
.conn-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:6px; vertical-align:middle;
  background:var(--ink-muted); transition:background 0.3s;
}
.conn-dot.connected   { background:var(--ok); }
.conn-dot.connecting  { background:var(--warn); animation:pulse 1.2s ease-in-out infinite; }
.conn-dot.offline     { background:var(--bake); }
@keyframes pulse { 50% { opacity:0.4; } }

/* DCMD message overlay — full-screen dimmer with center card */
.overlay {
  position:fixed; inset:0; background:rgba(28,25,23,0.7);
  display:none; align-items:center; justify-content:center;
  z-index:1000; padding:40px;
}
.overlay.show { display:flex; animation:fadeIn 0.25s ease; }
.overlay-card {
  background:var(--white); border-radius:14px;
  padding:40px 32px; max-width:520px; width:100%;
  text-align:center; box-shadow:0 8px 40px rgba(0,0,0,0.3);
}
.overlay-card .overlay-icon { font-size:48px; margin-bottom:12px; }
.overlay-card .overlay-text {
  font-family:'Newsreader',Georgia,serif;
  font-size:22px; font-weight:600; color:var(--ink); line-height:1.4;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* Toast (bottom, ephemeral feedback) */
.toast {
  position:fixed; left:50%; bottom:80px; transform:translateX(-50%);
  background:var(--ink); color:var(--white);
  padding:12px 22px; border-radius:24px;
  font-size:14px; font-weight:600;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
  opacity:0; pointer-events:none; transition:opacity 0.3s, transform 0.3s;
  z-index:900; max-width:80vw;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); }
.toast.ok      { background:var(--ok); }
.toast.warn    { background:var(--warn); }
.toast.error   { background:var(--bake); }

/* Service-card pressed state with checkmark */
.service-card.sent {
  background:var(--ok-light);
  pointer-events:none;
}
.service-card.sent .service-icon::after { content:" ✓"; color:var(--ok); }

/* Alert banner (operations/alert topic) */
.alert-banner {
  display:none; padding:14px 24px;
  font-size:15px; font-weight:700; text-align:center;
  color:var(--white);
}
.alert-banner.show { display:block; }
.alert-banner.info     { background:var(--ink-sec); }
.alert-banner.warn     { background:var(--warn); }
.alert-banner.critical { background:var(--bake); animation:flash 1s ease-in-out infinite; }
@keyframes flash { 50% { opacity:0.7; } }