html, body { height: 100%; }
body { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, .font-display { font-family: 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -0.02em; }
button { cursor: pointer; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Demo bar */
.demo-bar { height: 44px; background: #0B0F1F; color: #CBD2EA; position: sticky; top: 0; z-index: 1000; }
.shot .demo-bar { display: none; }

/* Stage around the phone */
.stage { min-height: calc(100vh - 44px); display: flex; align-items: center; justify-content: center; gap: 48px; padding: 28px 24px; }
.phone { width: 390px; height: 844px; border-radius: 54px; border: 11px solid #0E1330; background: #FBF8F3; position: relative; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(12,19,51,.45), 0 0 0 1px rgba(255,255,255,.4) inset; flex-shrink: 0; }
.phone-inner { position: absolute; inset: 0; display: flex; flex-direction: column; }
.phone-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }
.phone-scroll::-webkit-scrollbar { width: 0; }
.status-bar { height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 6px 28px 0; font: 600 15px/1 Inter, sans-serif; }
.notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 118px; height: 33px; border-radius: 20px; background: #0E1330; z-index: 60; }
.stage-note { width: 300px; }
@media (max-width: 860px) { .stage-note { display: none; } }
@media (max-width: 500px) {
  .stage { padding: 0; min-height: calc(100vh - 44px); }
  .phone { width: 100vw; height: calc(100dvh - 44px); border-radius: 0; border: 0; box-shadow: none; }
  .notch { display: none; }
}
.shot .stage { padding: 0; min-height: 100vh; }
.shot .stage-note { display: none; }
.shot .phone { width: 100vw; height: 100vh; border-radius: 0; border: 0; box-shadow: none; }
.shot .notch { display: none; }

/* Tab bar */
.tabbar { flex-shrink: 0; height: 84px; padding-bottom: 20px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid #EDE5D8; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #8C93AE; }
.tab.active { color: #1B2A6B; }
.tab svg { width: 23px; height: 23px; }
.tab-log { width: 54px; height: 54px; border-radius: 18px; background: #FF6B2C; color: white; display: grid; place-items: center; margin: -22px auto 0; box-shadow: 0 10px 22px -8px rgba(255,107,44,.8); }

/* Sheets */
.sheet-backdrop { position: absolute; inset: 0; background: rgba(12,19,51,.45); z-index: 80; animation: fade .2s ease; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; background: #fff; border-radius: 28px 28px 0 0; z-index: 81; animation: up .28s cubic-bezier(.2,.9,.3,1); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(12,19,51,.45); z-index: 900; display: grid; place-items: center; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0 } }
@keyframes up { from { transform: translateY(40%); opacity: .4 } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0 } 70% { transform: scale(1.08) } 100% { transform: scale(1); opacity: 1 } }
.pop { animation: pop .5s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255,107,44,.5) } 100% { box-shadow: 0 0 0 14px rgba(255,107,44,0) } }
.pulse { animation: pulse-ring 1.6s infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
.spin { animation: spin 1s linear infinite; }

.ring-anim circle.val { transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.bar-anim { transition: width 1.2s cubic-bezier(.2,.8,.2,1); }

/* Desktop app shell */
.desk { display: flex; min-height: calc(100vh - 44px); min-width: 1200px; }
.shot .desk { min-height: 100vh; }
.side { width: 248px; flex-shrink: 0; background: #fff; border-right: 1px solid #EDE5D8; padding: 20px 14px; display: flex; flex-direction: column; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: #4A5275; }
.nav-item:hover { background: #F5F0E7; }
.nav-item.active { background: #EEF1FA; color: #1B2A6B; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; }
.card { background: #fff; border-radius: 16px; border: 1px solid #EFE8DC; box-shadow: 0 1px 2px rgba(27,42,107,.04); }

/* Map */
.leaflet-container { background: #EEF0F2; font-family: Inter, sans-serif; }
.map-pin { background: #FF6B2C; color: #fff; border: 3px solid #fff; border-radius: 999px; width: 30px; height: 30px; display: grid; place-items: center; box-shadow: 0 6px 14px -4px rgba(12,19,51,.5); }
.map-pin.sel { background: #1B2A6B; transform: scale(1.15); }
.map-pin svg { width: 15px; height: 15px; }

/* Fixed-size canvases (share card etc.) */
.canvas-stage { min-height: calc(100vh - 44px); display: flex; align-items: flex-start; justify-content: center; padding: 28px; overflow: hidden; }
.shot .canvas-stage { padding: 0; min-height: 0; }
.canvas-fit { transform-origin: top center; }
.shot .canvas-fit { transform: none !important; }

#toast-root { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #0C1333; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); animation: up .25s ease; display: flex; gap: 8px; align-items: center; }
.toast svg { width: 16px; height: 16px; }
.shot #toast-root { display: none; }

input[type=range] { accent-color: #FF6B2C; }
.toggle { width: 44px; height: 26px; border-radius: 999px; background: #D5D9E6; position: relative; transition: background .2s; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s; }
.toggle.on { background: #1F9D6B; }
.toggle.on::after { left: 21px; }

.gi { display: inline-flex; vertical-align: -0.14em; line-height: 1; }
.gi svg { width: 1em; height: 1em; stroke-width: 2; fill: currentColor; fill-opacity: .14; }