@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#f0f4f9;--surface:#fff;--surface-2:#eef2f8;--text:#0f172a;--muted:#64748b;
  --border:#dde3ef;--primary:#2563eb;--primary-soft:rgba(37,99,235,.1);
  --primary-contrast:#fff;--danger:#ef4444;--success:#22c55e;
  --shadow:0 1px 4px rgba(15,23,42,.07),0 4px 20px rgba(15,23,42,.07);
  --shadow-hover:0 4px 12px rgba(15,23,42,.12),0 8px 32px rgba(15,23,42,.1);
  --radius:16px;--nav-h:72px;--sidebar-w:220px;
}
body.theme-dark{
  --bg:#070e1a;--surface:#0d1625;--surface-2:#111e30;--text:#e2eaf5;
  --muted:#8097b1;--border:#1a2d45;--primary:#4f9dff;--primary-soft:rgba(79,157,255,.12);
  --primary-contrast:#05101e;--shadow:0 2px 8px rgba(0,0,0,.35),0 6px 28px rgba(0,0,0,.25);
  --shadow-hover:0 4px 16px rgba(0,0,0,.5),0 12px 40px rgba(0,0,0,.35);
}
body.theme-dark .topbar{background:#070e1a!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}

*{box-sizing:border-box}
html,body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}

/* ── DESKTOP SHELL ── */
@media(min-width:1024px){
  .app-shell{
    display:grid;
    grid-template-columns:var(--sidebar-w) 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:"sidebar header""sidebar main";
    min-height:100vh;
    padding-bottom:0;
  }
  .topbar{
    grid-area:header;
    position:sticky;top:0;z-index:100;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:14px 28px;
    display:flex;align-items:center;gap:16px;
    backdrop-filter:none;
  }
  .page-content{
    grid-area:main;
    padding:24px 28px 40px;
    max-width:none;
  }
  .bottom-nav{display:none!important}
  .sidebar-nav{display:flex!important}
}

/* ── MOBILE SHELL ── */
@media(max-width:1023px){
  .app-shell{min-height:100vh;padding-bottom:calc(var(--nav-h) + 10px)}
  .sidebar-nav{display:none!important}
}

/* ── TOPBAR ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 8px;
  position:sticky;top:0;z-index:100;
  background:rgba(var(--bg-raw,240,244,249),.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.topbar-brand{display:flex;align-items:center;gap:10px}
.topbar-brand .brand-logo{font-size:22px}
.topbar-brand .brand-text{font-size:16px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:8px}

/* ── SIDEBAR NAVIGATION ── */
.sidebar-nav{
  grid-area:sidebar;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:20px 0;
  display:flex;flex-direction:column;gap:4px;
  z-index:200;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:0 18px 20px;
  border-bottom:1px solid var(--border);
  margin-bottom:8px;
}
.sidebar-brand-icon{font-size:26px}
.sidebar-brand-label{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.sidebar-brand-sub{font-size:11px;color:var(--muted);font-weight:500}
.sidebar-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;margin:0 8px;
  border-radius:12px;
  border:0;background:transparent;
  color:var(--muted);font-size:14px;font-weight:500;
  text-align:left;text-decoration:none;
  transition:background .15s,color .15s;
  cursor:pointer;
}
.sidebar-item:hover{background:var(--surface-2);color:var(--text)}
.sidebar-item.active{background:var(--primary-soft);color:var(--primary);font-weight:700}
.sidebar-icon{font-size:18px;width:24px;text-align:center}
.sidebar-divider{height:1px;background:var(--border);margin:8px 16px}
.sidebar-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:700;padding:8px 18px 4px;
}
.sidebar-spacer{flex:1}
.sidebar-version{font-size:11px;color:var(--muted);padding:12px 18px}

/* ── HERO / FILTER CARD ── */
.hero-card,.map-card,.panel,.modal-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.hero-card,.panel{padding:18px}
.hero-row,.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.section-header{margin-bottom:12px}
.eyebrow{font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.12em;font-weight:700}
.page-subtitle{margin-top:4px;color:var(--muted);font-size:13px}
.page-content{padding:0 14px 24px;display:grid;gap:16px}
.single-column-layout{display:grid;grid-template-columns:minmax(0,1fr)}

/* ── SEARCH & FILTERS ── */
.filters-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;
}
.filters-bar-inner{display:flex;gap:8px;flex:1;min-width:0;flex-wrap:wrap}
.filters{display:grid;gap:10px;margin-top:14px}
.filters.is-collapsed{display:none}
@media(min-width:1024px){
  .filters.is-collapsed{display:grid}
  .filters{grid-template-columns:repeat(4,minmax(0,1fr))}
  .filters-toggle-row{display:none}
}
.search-input,select,textarea,input[type="text"],input[type="search"],input[type="email"],input[type="password"]{
  width:100%;background:var(--surface-2);border:1.5px solid var(--border);
  color:var(--text);border-radius:10px;padding:9px 12px;font-size:14px;
  transition:border-color .15s,box-shadow .15s;
}
.search-input:focus,select:focus,textarea:focus,input:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);
}
textarea{min-height:96px;resize:vertical}

/* ── BUTTONS ── */
.primary-button,.icon-button,.text-link{
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;border:0;border-radius:10px;font-weight:600;font-size:14px;
  transition:opacity .15s,transform .1s,background .15s;
}
.primary-button{background:var(--primary);color:var(--primary-contrast);padding:10px 16px}
.primary-button:hover{opacity:.88}
.primary-button:active{transform:scale(.97)}
.primary-button.secondary{background:var(--surface-2);color:var(--text);border:1.5px solid var(--border)}
.icon-button{width:40px;height:40px;background:var(--surface);border:1.5px solid var(--border);font-size:17px;border-radius:50%}
.text-link{color:var(--primary);font-weight:600;font-size:14px;background:none}
.small-button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 12px;border-radius:9px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);font-size:13px;font-weight:600;
  transition:background .15s,border-color .15s;cursor:pointer;
}
.small-button:hover{background:var(--surface-2)}
.small-button.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-contrast)}
.small-button.danger{border-color:var(--danger);color:var(--danger)}
.small-button.active{background:var(--primary);border-color:var(--primary);color:var(--primary-contrast)}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 10px;background:var(--surface-2);border-radius:999px;
  color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap;
}
.filters-toggle-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.filters-toggle-row>*{flex:1 1 auto}

/* ── MAP ── */
#map{height:44vh;min-height:300px;border-radius:var(--radius);overflow:hidden;position:relative;z-index:1}
.map-card{padding:8px;position:relative;z-index:1}
.map-page-card{padding:10px}
.leaflet-container,.leaflet-pane,.leaflet-top,.leaflet-bottom,.leaflet-control{z-index:1!important}
.leaflet-popup{z-index:2!important}

/* ── CAMERA GRID ── */
.camera-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.skeleton-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){
  .camera-grid,.compact-grid,.skeleton-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1024px){
  .camera-grid,.compact-grid,.skeleton-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1400px){
  .camera-grid,.compact-grid,.skeleton-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.single-column-grid{grid-template-columns:1fr!important}

/* ── CAMERA CARD ── */
.camera-card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  transition:box-shadow .2s,transform .15s,border-color .2s;
  display:flex;flex-direction:column;
}
.camera-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px);border-color:var(--primary)}
.camera-card:active{transform:scale(.98)}
.camera-preview-frame{
  width:100%;aspect-ratio:16/9;display:flex;align-items:center;
  justify-content:center;background:var(--surface-2);
  position:relative;overflow:hidden;flex-shrink:0;
}
.camera-preview{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.camera-card:hover .camera-preview{transform:scale(1.04)}
.camera-preview-frame.broken .camera-preview{display:none}
.preview-fallback{
  display:none;color:var(--muted);font-size:24px;
  flex-direction:column;gap:4px;align-items:center;
  font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
}
.preview-fallback-icon{font-size:28px}
.camera-preview-frame.broken .preview-fallback{display:flex}
.camera-body{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.camera-body h3{
  font-size:12px;font-weight:600;line-height:1.35;color:var(--text);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  margin:0;
}
.camera-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.camera-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.meta-pill{
  padding:2px 7px;border-radius:999px;background:var(--surface-2);
  color:var(--muted);font-size:10px;font-weight:600;
}
.camera-actions button,.camera-actions a{
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  border-radius:8px;padding:5px 9px;font-size:11px;font-weight:600;transition:background .15s;
}
.camera-actions button:hover,.camera-actions a:hover{
  background:var(--primary);color:var(--primary-contrast);border-color:var(--primary);
}
.open-btn{flex:1;background:var(--primary)!important;color:var(--primary-contrast)!important;border-color:var(--primary)!important}

/* ── SKELETON ── */
.skeleton-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.skeleton-thumb{width:100%;aspect-ratio:16/9;background:var(--surface-2);animation:skeleton-pulse 1.5s ease-in-out infinite}
.skeleton-body{padding:10px;display:grid;gap:8px}
.skeleton-line{height:11px;border-radius:5px;background:var(--surface-2);animation:skeleton-pulse 1.5s ease-in-out infinite}
.skeleton-line.short{width:55%}
@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── BOTTOM NAV (mobile only) ── */
.bottom-nav{
  position:fixed;left:10px;right:10px;bottom:10px;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;
  background:rgba(255,255,255,.92);
  border:1.5px solid var(--border);border-radius:20px;padding:5px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  z-index:200;box-shadow:0 8px 32px rgba(0,0,0,.1);
}
body.theme-dark .bottom-nav{background:rgba(13,22,37,.92)}
.nav-item{
  min-height:48px;border:0;border-radius:14px;background:transparent;
  color:var(--muted);font-size:9px;font-weight:500;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;transition:background .15s,color .15s;cursor:pointer;padding:0 1px;
  min-width:0;overflow:hidden;
}
.nav-item>span:not(.nav-icon){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;text-align:center;display:block;}
.nav-item .nav-icon{font-size:17px;line-height:1}
.nav-item.active{background:var(--surface);color:var(--text);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.bottom-nav a.nav-item{text-decoration:none}

/* ── MODAL ── */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;align-items:flex-start;
  padding:clamp(8px,2vw,20px);
  padding-top:max(10px,env(safe-area-inset-top));
  overflow:auto;z-index:9999;
}
.modal.hidden{display:none}
.modal-card{
  width:min(960px,100%);margin:auto;
  max-height:none;overflow:visible;position:relative;z-index:10000;
}
.webcam-modal{padding:0;border-radius:20px;overflow:hidden}
.settings-modal,.edit-modal{position:relative;z-index:10001;padding:24px}
.close-button{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;border-radius:50%;
  border:1.5px solid var(--border);background:var(--surface-2);
  color:var(--text);font-size:17px;
  display:flex;align-items:center;justify-content:center;
  z-index:1;transition:background .15s;
}
.close-button:hover{background:var(--border)}

/* ── WEBCAM DETAIL MODAL ── */
/* Desktop: side-by-side layout */
@media(min-width:768px){
  .webcam-detail-layout{
    display:grid;grid-template-columns:1fr 320px;
    min-height:460px;
  }
  .webcam-detail-media{border-radius:0;border-right:1px solid var(--border)}
  .webcam-detail-info{
    padding:20px;overflow-y:auto;max-height:80vh;
    display:flex;flex-direction:column;gap:12px;
  }
}
@media(max-width:767px){
  .webcam-detail-layout{display:flex;flex-direction:column}
  .webcam-detail-media{border-radius:0}
  .webcam-detail-info{padding:16px;display:flex;flex-direction:column;gap:12px}
}
.webcam-detail-media{
  background:#020617;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.webcam-detail-media-inner{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}

/* Media elements */
.detail-media-wrap{
  width:100%;background:#020617;
  overflow:hidden;
}
.detail-media{width:100%;display:block;background:#020617}
.detail-media-image,.detail-media-video{
  max-height:min(72vh,640px);width:100%;
  object-fit:contain;display:block;
}
.detail-media-iframe{
  aspect-ratio:16/9;width:100%;border:0;background:#020617;
  min-height:280px;max-height:min(72vh,600px);
}
.detail-fallback{
  min-height:260px;display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:8px;
  color:var(--muted);font-size:14px;padding:24px;
}
.detail-fallback-icon{font-size:40px}
.detail-grid{display:grid;gap:14px;padding:16px}
.detail-mode-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.detail-media-stage{display:grid;gap:10px}
.detail-stage-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:8px 8px 0}
.detail-actions{display:flex;gap:8px;flex-wrap:wrap}
.detail-actions a,.detail-actions button{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;flex:1 1 auto;
}
.detail-gallery{display:grid;gap:10px;margin-bottom:10px}
.detail-gallery-title{font-weight:700;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.detail-gallery-strip{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none;
}
.detail-gallery-strip::-webkit-scrollbar{display:none}
.detail-gallery-strip>*{width:140px;max-width:140px;min-width:140px;scroll-snap-align:start;flex-shrink:0}
.detail-thumb{
  border:1.5px solid var(--border);background:var(--surface-2);
  border-radius:12px;padding:7px;display:grid;gap:5px;
  text-align:left;color:var(--text);transition:border-color .15s;
}
.detail-thumb:hover{border-color:var(--primary)}
.detail-thumb.active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
.detail-thumb img,.detail-thumb-fallback{
  width:100%;aspect-ratio:16/9;border-radius:8px;
  display:block;background:#0f172a;color:#fff;
}
.detail-thumb img{object-fit:cover}
.detail-thumb.no-thumb img{display:none}
.detail-thumb-fallback{
  display:none;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;
}
.detail-thumb.no-thumb .detail-thumb-fallback{display:flex}
.detail-thumb-label{font-size:11px;font-weight:600;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#detailModal .modal-card{max-height:none}

/* Detail info section */
.detail-info-title{font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.detail-info-meta{display:flex;flex-wrap:wrap;gap:6px}
.detail-info-pill{
  padding:3px 10px;border-radius:999px;background:var(--surface-2);
  color:var(--muted);font-size:12px;font-weight:600;border:1px solid var(--border);
}
.detail-info-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:8px}
.detail-info-actions a,.detail-info-actions button{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;text-decoration:none;
}

/* ── SETTINGS ── */
.setting-row,.checkbox-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-modal{display:grid;gap:16px}
.version-note,.muted-text{color:var(--muted);font-size:13px}

/* ── ADMIN ── */
.admin-shell{min-height:100vh;padding-bottom:24px}
.admin-topbar{padding-bottom:16px}
.admin-content{padding:0 14px 24px;display:grid;gap:16px}
.admin-form{display:grid;gap:10px}
.inline-form{grid-template-columns:1fr auto;align-items:start}
.table-list,.candidate-list{display:grid;gap:12px}
.table-row,.candidate-card{
  background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:14px;padding:14px;display:grid;gap:10px;
}
.table-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.table-actions{display:flex;gap:8px;flex-wrap:wrap}
.empty-state{
  padding:40px 24px;border-radius:var(--radius);background:var(--surface);
  border:1.5px dashed var(--border);color:var(--muted);text-align:center;font-size:14px;
}
.empty-state::before{display:block;font-size:40px;margin-bottom:12px;content:attr(data-icon)}
.hidden{display:none!important}

/* ── AD SLOTS ── */
.ad-slot{
  display:grid;gap:6px;padding:10px 14px;
  border:1.5px dashed var(--border);border-radius:var(--radius);
  background:var(--surface);
}
.ad-slot-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ad-slot-box{
  min-height:90px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:12px;border-radius:12px;
  background:var(--surface-2);color:var(--muted);font-size:13px;
}
/* Leaderboard ad (728×90) */
.ad-slot-leaderboard .ad-slot-box{min-height:100px}
/* Rectangle (300×250) */
.ad-slot-rect .ad-slot-box{min-height:260px;max-width:336px}

/* ── RESPONSIVE ── */
@media(min-width:900px){
  .admin-content{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel:nth-child(3),.panel:nth-child(4){grid-column:1/-1}
  .admin-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1024px){
  .page-content{padding:24px 28px 40px}
  h1{font-size:22px;font-weight:800;letter-spacing:-.02em}
  h2{font-size:17px;font-weight:700}
  h3{font-size:13px}
  .hero-card{padding:20px}
  .camera-grid,.compact-grid,.skeleton-grid{gap:16px}
}
@media(max-width:639px){
  .page-content{padding:0 10px 24px}
  .camera-grid,.compact-grid{gap:10px}
  .camera-body{padding:8px}
  .camera-body h3{font-size:11px}
  .meta-pill{font-size:10px;padding:2px 5px}
  .detail-media-image,.detail-media-video{max-height:min(55vh,400px)}
  .detail-media-iframe{max-height:min(50vh,360px)}
}
@media(max-width:400px){
  .camera-grid,.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── MISC ── */
.nearby-summary-panel{display:grid;gap:8px}
.stack-gap{display:grid;gap:12px}
.admin-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.panel-span-full{grid-column:1/-1}
.admin-filter-grid{display:grid;gap:10px;margin-bottom:14px}
.crawl-form{margin-bottom:12px}
.status-success{border-color:#16a34a;color:#166534}
.status-error{border-color:#dc2626;color:#991b1b}
.candidate-grid{display:grid;gap:10px}
.candidate-grid textarea{grid-column:1/-1}
.candidate-thumb{width:100%;max-width:320px;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:var(--surface)}
.candidate-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.candidate-head-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.candidate-thumb.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--surface)}
.admin-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{
  width:min(480px,100%);background:var(--surface);
  border:1.5px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:28px;display:grid;gap:16px;
}
.login-card form{display:grid;gap:12px}
.login-help{font-size:13px;color:var(--muted)}
.login-error{padding:12px 14px;border-radius:10px;background:rgba(239,68,68,.1);border:1.5px solid rgba(239,68,68,.35);color:#b91c1c;font-size:14px}
@media(max-width:859px){.admin-grid-2{grid-template-columns:1fr}}

  .nav-icon { font-size: 18px; }
}

/* ── INSTALL BANNER ── */
/* ── INSTALL MODAL (full-screen overlay) ── */
.install-modal{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
  animation:fadeInBg .25s ease;padding-bottom:env(safe-area-inset-bottom,0px);
}
@keyframes fadeInBg{from{opacity:0}to{opacity:1}}
.install-modal-inner{
  background:var(--card);border:1.5px solid var(--border);
  border-radius:24px 24px 0 0;
  padding:20px 20px 32px;box-shadow:0 -8px 40px rgba(0,0,0,.3);
  max-width:480px;width:100%;position:relative;
  animation:slideUpModal .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUpModal{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
.install-modal-handle{
  width:40px;height:4px;border-radius:2px;background:var(--border);
  margin:0 auto 14px;display:block;
}
.install-banner-close{
  position:absolute;top:16px;right:16px;background:rgba(128,128,128,.15);border:0;
  font-size:16px;cursor:pointer;color:var(--muted);line-height:1;
  padding:6px 8px;border-radius:8px;
}
.install-modal h3{font-size:17px;font-weight:800;margin:0 0 4px;color:var(--text)}
.install-modal p{font-size:13px;color:var(--muted);margin:4px 0 0;line-height:1.5}
.install-modal .install-steps{margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.install-modal .install-step{
  display:flex;align-items:center;gap:12px;
  font-size:14px;color:var(--text);
}
.install-modal .step-num{
  width:28px;height:28px;border-radius:50%;background:var(--accent);
  color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.install-modal .install-icon{font-size:24px;flex-shrink:0}
.install-android-btn{
  width:100%;margin-top:16px;padding:14px;border-radius:14px;border:0;
  background:var(--accent);color:#fff;font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,100,255,.3);
}