/* PropertyOS shell: boot, welcome/lock, status bar, home widgets, dock, panels. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0a2b72; }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.4; color: var(--ink);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overscroll-behavior: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

#root { position: fixed; inset: 0; overflow: hidden; }
.os { position: absolute; inset: 0; }
.os * { -webkit-user-select: none; user-select: none; }
.os input, .os textarea, .os .selectable { -webkit-user-select: text; user-select: text; }

/* press feedback: springy scale */
.press { transition: transform var(--spring-t) var(--spring), filter 200ms; will-change: transform; }
.press:active { transform: scale(.955); transition-duration: 90ms; transition-timing-function: ease-out; }

/* ---------- boot ---------- */
.boot { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: #0a2b72; color: #fff; z-index: 99; }
.boot-mark { width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(135deg, #5ab4ff, #2f6df0 55%, #5a3fe0); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 30px rgba(0,0,0,.3); animation: boot-pulse 1.4s ease-in-out infinite; }
.boot-name { font-weight: 600; letter-spacing: .02em; opacity: .9; }
@keyframes boot-pulse { 50% { transform: scale(.94); opacity: .85; } }
.boot.out { animation: fade-out 320ms ease forwards; pointer-events: none; }
@keyframes fade-out { to { opacity: 0; visibility: hidden; } }

/* ---------- screen (welcome / home) ---------- */
.screen {
  position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; color: #fff;
  transition: transform var(--smooth-t) var(--smooth), filter var(--smooth-t) var(--smooth), opacity var(--smooth-t) ease;
  scrollbar-width: none; overscroll-behavior: contain;
}
.screen::-webkit-scrollbar { display: none; }
.screen.under { transform: scale(.94); filter: brightness(.72); opacity: .7; }
.screen.gone { visibility: hidden; }

/* ---------- status bar ---------- */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: calc(48px + var(--safe-t)); padding: var(--safe-t) 14px 0 18px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #fff; text-shadow: 0 1px 8px rgba(5,16,44,.3); pointer-events: none;
}
.statusbar > * { pointer-events: auto; }
.sb-time { font-weight: 650; font-size: 15px; font-variant-numeric: tabular-nums; }
.sb-right { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.sb-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.sb-btn .badge { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ff4b3e; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(10,43,114,.7); }

/* the live pill (our "dynamic island") */
.pill {
  height: 32px; min-width: 104px; max-width: 200px; padding: 0 14px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(8, 14, 28, .74); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.25);
  transition: min-width var(--spring-t) var(--spring), background 300ms;
}
.pill.pop { animation: pill-pop var(--spring-t) var(--spring); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; flex: none; }
.pill.off .dot { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.pill.alert { min-width: 150px; background: rgba(12, 20, 40, .86); }
.pill.alert .dot { background: #ff7a5a; box-shadow: 0 0 8px #ff7a5a; }
@keyframes pill-pop { 0% { transform: scale(.82); } 100% { transform: scale(1); } }

/* ---------- welcome (signed-out lock screen) ---------- */
.welcome { min-height: 100%; padding: 0 22px calc(28px + var(--safe-b)); display: flex; flex-direction: column; }
.clock { text-align: center; margin-top: calc(var(--safe-t) + 9vh); text-shadow: 0 2px 22px rgba(5,16,44,.3); }
.clock-date { font-size: 17px; font-weight: 600; opacity: .92; }
.clock-time { font-size: clamp(76px, 24vw, 108px); font-weight: 250; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.brand { margin: 26px auto 0; display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 44px; height: 44px; border-radius: 13px; flex: none; }
.brand-name { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.brand-tag { font-size: 14px; opacity: .85; margin-top: 2px; max-width: 260px; }
.welcome-card { margin-top: auto; padding: 18px; border-radius: var(--r-xl); display: grid; gap: 10px; }
.welcome-card .lead { font-size: 15px; opacity: .92; text-align: center; padding: 2px 6px 6px; }
.wbtn { height: 52px; border-radius: 26px; font-weight: 650; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.wbtn.primary { background: #fff; color: #0b2a66; box-shadow: 0 6px 18px rgba(5,16,44,.28), inset 0 -2px 0 rgba(10,43,114,.08); }
.wbtn.soft { background: rgba(255,255,255,.2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.demo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-chip { height: 56px; border-radius: 18px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); display: grid; place-items: center; align-content: center; gap: 2px; font-size: 12.5px; font-weight: 600; }
.demo-label { text-align: center; font-size: 12.5px; opacity: .82; margin-top: 4px; }
.lang-switch { position: absolute; top: calc(var(--safe-t) + 7px); right: 62px; z-index: 6; height: 34px; padding: 0 14px; border-radius: 17px; font-size: 13px; font-weight: 650; color: #fff; display: flex; align-items: center; gap: 6px; }

/* PIN lock */
.lock { position: absolute; inset: 0; z-index: 60; color: #fff; display: flex; flex-direction: column; align-items: center; padding: calc(var(--safe-t) + 8vh) 24px calc(24px + var(--safe-b)); background: transparent; animation: fade-in 260ms ease both; }
.lock .wall { z-index: -1; }
.lock-title { font-size: 20px; font-weight: 650; margin-top: 18px; text-shadow: 0 1px 12px rgba(5,16,44,.3); }
.lock-sub { opacity: .85; font-size: 14px; margin-top: 4px; min-height: 20px; }
.dots { display: flex; gap: 16px; margin: 26px 0 auto; }
.dots i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.9); transition: background 120ms, transform var(--spring-t) var(--spring); }
.dots i.on { background: #fff; transform: scale(1.12); }
.dots.shake { animation: shake 380ms ease; }
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px 22px; justify-content: center; margin-top: 18px; }
.key { width: 76px; height: 76px; border-radius: 50%; font-size: 30px; font-weight: 400; display: grid; place-items: center; align-content: center; color: #fff; background: rgba(255,255,255,.17); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.12); }
.key small { font-size: 10px; letter-spacing: .14em; opacity: .8; margin-top: -2px; }
.key.blank { background: none; box-shadow: none; pointer-events: none; }
.key.txt { font-size: 15px; background: none; box-shadow: none; }
.keypad.solid .key { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); width: 100%; height: 60px; border-radius: 18px; font-size: 24px; }
.keypad.solid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ---------- home ---------- */
.home { padding-top: calc(52px + var(--safe-t)); padding-bottom: calc(118px + var(--safe-b)); }
.greet { padding: 6px 22px 14px; text-shadow: 0 1px 14px rgba(5,16,44,.3); }
.greet h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.greet p { opacity: .88; font-size: 15px; margin-top: 4px; }
.demo-banner { margin: 0 16px 12px; padding: 10px 14px; border-radius: 18px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: space-between; }
.demo-banner b { font-weight: 700; }
.demo-switch { display: flex; gap: 4px; }
.demo-switch button { height: 28px; padding: 0 11px; white-space: nowrap; border-radius: 14px; font-size: 12px; font-weight: 650; color: #fff; background: rgba(255,255,255,.18); }
.demo-switch button.on { background: #fff; color: #0b2a66; }

.widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
.widget { border-radius: var(--r-xl); padding: 16px 16px 14px; text-align: left; min-height: 148px; display: flex; flex-direction: column; overflow: hidden; text-shadow: 0 1px 10px rgba(5,16,44,.25); contain: layout paint; }
.widget.lg { grid-column: 1 / -1; min-height: 184px; }
.w-title { font-size: 13.5px; font-weight: 650; opacity: .95; letter-spacing: .01em; display: flex; align-items: center; gap: 6px; }
.widget:not(.lg) .w-title { max-width: 60%; line-height: 1.2; }
.w-art { position: absolute; top: 8px; right: 10px; width: 68px; height: 68px; filter: drop-shadow(0 8px 10px rgba(5,16,44,.28)); animation: float 7s ease-in-out infinite; pointer-events: none; }
.widget.lg .w-art { width: 84px; height: 84px; top: 10px; right: 14px; }
@keyframes float { 50% { transform: translateY(-4px) rotate(2deg); } }
html[data-glass="0"] .w-art, .reduce-motion .w-art { animation: none; }
.w-num { font-size: 40px; font-weight: 300; letter-spacing: -.03em; line-height: 1; margin-top: auto; font-variant-numeric: tabular-nums; }
.widget:not(.lg) .w-num { font-size: 34px; }
.w-num small { font-size: 18px; font-weight: 400; opacity: .85; margin-right: 2px; }
.w-sub { font-size: 14px; opacity: .92; margin-top: 4px; font-weight: 500; }
.w-stats { display: flex; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.28); font-size: 13px; }
.w-stats > div { flex: 1; display: flex; flex-direction: column; }
.w-stats > div + div { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.28); }
.w-stats b { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.w-stats span { opacity: .82; font-size: 12px; }
.w-cta { margin-top: 12px; align-self: flex-start; height: 38px; padding: 0 18px; border-radius: 19px; background: #fff; color: #0b2a66; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; text-shadow: none; box-shadow: 0 4px 14px rgba(5,16,44,.25); }
.w-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 650; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); margin-top: 6px; align-self: flex-start; }
.w-chip.hot { background: rgba(255,92,72,.9); box-shadow: none; }
.skel { background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.3), rgba(255,255,255,.14)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; padding: 22px 16px 0; }
.appicon { display: grid; justify-items: center; gap: 7px; color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 8px rgba(5,16,44,.45); position: relative; }
.ico { width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; color: #fff; position: relative; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.12), 0 6px 14px rgba(5,16,44,.3); }
.ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 70% at 25% -10%, rgba(255,255,255,.4), transparent 55%); pointer-events: none; }
.ico svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.ico .badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff4b3e; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2.5px rgba(10,43,114,.55); z-index: 1; }
.ico.rent { background: linear-gradient(150deg, #3fe0a8, #0c9a74); }
.ico.repairs { background: linear-gradient(150deg, #ffc15c, #f07a1c); }
.ico.visitors { background: linear-gradient(150deg, #9c8cff, #5a3fe0); }
.ico.properties { background: linear-gradient(150deg, #5fc3ff, #2a6df0); }
.ico.gate { background: linear-gradient(150deg, #ff9a7a, #e5483c); }
.ico.settings { background: linear-gradient(150deg, #aab5c8, #5d6a82); }
.ico.join { background: linear-gradient(150deg, #ff8fc0, #d6409a); }

.dock { position: absolute; left: 14px; right: 14px; bottom: calc(10px + var(--safe-b)); z-index: 4; height: 80px; border-radius: 34px; padding: 10px 14px; display: flex; justify-content: space-around; align-items: center; transition: transform var(--smooth-t) var(--smooth), opacity 240ms; }
.dock.hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
.dock .appicon { gap: 0; }
.dock .ico { width: 58px; height: 58px; border-radius: 17px; }
.dock .appicon span { display: none; }

/* ---------- layers: apps open from their icon ---------- */
#layers { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#layers > * { pointer-events: auto; }

/* ---------- top panels (notifications, control centre) ---------- */
.scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade-in 240ms ease both; }
.scrim.out { animation: fade-out 200ms ease forwards; }
@keyframes fade-in { from { opacity: 0; } }
.panel { position: absolute; left: 10px; right: 10px; top: calc(8px + var(--safe-t)); max-height: calc(100% - 24px - var(--safe-t) - var(--safe-b)); border-radius: 34px; padding: 16px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; transform-origin: 50% 0; animation: panel-in var(--spring-t) var(--spring) both; }
.panel::-webkit-scrollbar { display: none; }
.panel.out { animation: panel-out 220ms ease-in forwards; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-24px) scale(.94); } }
@keyframes panel-out { to { opacity: 0; transform: translateY(-16px) scale(.96); } }
.panel h2 { font-size: 20px; font-weight: 700; padding: 2px 4px 12px; display: flex; justify-content: space-between; align-items: center; }
.panel .mini { height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(255,255,255,.2); font-size: 12.5px; font-weight: 650; color: #fff; }

.note { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start; padding: 12px; border-radius: 20px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); width: 100%; text-align: left; color: #fff; }
.note + .note { margin-top: 8px; }
.note.unread { background: rgba(255,255,255,.22); }
.note .ni { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.note b { display: block; font-size: 14.5px; font-weight: 650; }
.note span { font-size: 13px; opacity: .88; display: block; margin-top: 1px; }
.note time { font-size: 11.5px; opacity: .7; white-space: nowrap; }
.panel-empty { text-align: center; padding: 28px 12px; opacity: .85; font-size: 14.5px; }

.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-tile { border-radius: 24px; padding: 14px; min-height: 84px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background 200ms; }
.cc-tile.on { background: rgba(255,255,255,.92); color: #0b2a66; }
.cc-tile b { font-size: 14px; font-weight: 650; }
.cc-tile span { font-size: 12px; opacity: .8; }
.cc-wide { grid-column: 1 / -1; }
.cc-seg { display: flex; gap: 4px; padding: 4px; border-radius: 18px; background: rgba(0,0,0,.2); margin-top: 8px; }
.cc-seg button { flex: 1; height: 34px; border-radius: 14px; font-size: 12.5px; font-weight: 650; color: #fff; opacity: .85; transition: background 200ms; }
.cc-seg button.on { background: #fff; color: #0b2a66; opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.cc-label { font-size: 12.5px; font-weight: 650; opacity: .85; padding: 6px 4px 0; }
.walls { display: flex; gap: 10px; margin-top: 8px; }
.walls button { flex: 1; height: 54px; border-radius: 16px; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); overflow: hidden; }
.walls button.on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px #fff; }
.walls .w-auto { background: conic-gradient(from 0deg, #2db7ff, #18c795, #ff6b5b, #8b5cff, #2db7ff); }
.walls .w-sky { background: linear-gradient(135deg, #2db7ff, #6a5cff, #0a2b72); }
.walls .w-emerald { background: linear-gradient(135deg, #18c795, #2a9dff, #05342f); }
.walls .w-coral { background: linear-gradient(135deg, #ff6b5b, #b045ff, #3b1030); }
.walls .w-dusk { background: linear-gradient(135deg, #ff6fa6, #8b5cff, #1d1352); }
.walls .w-graphite { background: linear-gradient(135deg, #6b5bd2, #3a4a6b, #0f131b); }

/* toasts */
.toasts { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 54px); z-index: 90; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { max-width: 420px; padding: 11px 18px; border-radius: 22px; background: rgba(12, 20, 40, .9); color: #fff; font-size: 14px; font-weight: 550; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 28px rgba(0,0,0,.32); animation: toast-in var(--spring-t) var(--spring) both; display: flex; align-items: center; gap: 8px; }
.toast.out { animation: toast-out 240ms ease-in forwards; }
.toast.bad { background: rgba(160, 30, 24, .94); }
.toast.good { background: rgba(10, 100, 70, .94); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-18px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px) scale(.96); } }

@media (min-width: 560px) {
  /* tablets and desktop previews: keep the phone proportions */
  #root { max-width: 480px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 80px rgba(0,0,0,.5); }
  html, body { background: #05070d; }
  .dock { left: 14px; right: 14px; }
}