@import url('./tokens.css');

*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{background:#05050f}
[hidden]{display:none!important}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    linear-gradient(180deg,rgba(5,5,15,.96),rgba(7,6,18,.98)),
    #05050f;
  color:var(--insaru-text-primary);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
button,input,select,textarea{font:inherit}
button{border:0;color:inherit}
button.glass,button.propCard,button.actionRow,button.listRow{
  font:inherit;
  color:inherit;
  text-align:left;
}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(77,163,255,.85);
  outline-offset:2px;
}

.stage{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.phone{
  width:100vw;
  height:100dvh;
  max-height:none;
  border-radius:0;
  overflow:hidden;
  position:relative;
  border:0;
  box-shadow:none;
  background:transparent;
}
.sparkCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  opacity:.88;
  mix-blend-mode:screen;
  filter:blur(.45px) saturate(1.24);
}
@media (max-width:430px){
  .stage{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
  .phone{
  width:100vw;
  height:100dvh;
  max-height:none;
  border-radius:0;
  overflow:hidden;
  position:relative;
  border:0;
  box-shadow:none;
  background:transparent;
}
}
.bg{
  position:absolute;
  inset:0;
  background:url('../assets/bg/cosmic_iphone_1290x2796.png') center/cover no-repeat;
  filter:saturate(1.02) contrast(1.02);
  z-index:0;
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.66)),
    radial-gradient(900px 700px at 50% 0%,rgba(77,163,255,.17),transparent 62%);
}
.vignette{
  position:absolute;
  inset:-20px;
  pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(0,0,0,0) 40%,rgba(0,0,0,.42) 88%,rgba(0,0,0,.72));
  z-index:2;
}
.status{
  position:absolute;
  top:10px;
  left:18px;
  right:18px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:6;
  color:rgba(255,255,255,.86);
  font-size:14px;
  font-weight:700;
  pointer-events:none;
}
.island{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:128px;
  height:34px;
  border-radius:999px;
  background:rgba(0,0,0,.78);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  z-index:7;
}
.sigs{display:flex;align-items:center;gap:8px;opacity:.88}
.bars{display:flex;gap:3px;align-items:flex-end}
.bars span{width:3px;border-radius:2px;background:rgba(255,255,255,.75)}
.bars span:nth-child(1){height:6px}.bars span:nth-child(2){height:8px}.bars span:nth-child(3){height:10px}.bars span:nth-child(4){height:12px}
.battery{
  width:18px;
  height:12px;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.55);
  position:relative;
}
.battery::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:6px;border-radius:1px;background:rgba(255,255,255,.55)}
.app{
  position:absolute;
  inset:0;
  z-index:5;
  padding:max(24px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)) 18px;
  display:flex;
  flex-direction:column;
}
.screen{
  display:none;
  flex-direction:column;
  gap:14px;
  height:100%;
  min-height:0;
}
.screen.active{display:flex}
.appScreen{gap:0}
.scroll{
  min-height:0;
  flex:1;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:92px;
  scrollbar-width:none;
}
.scroll::-webkit-scrollbar{display:none}

.wordmark{
  height:24px;
  width:auto;
  opacity:.94;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.heroWordmark{height:26px}
.h1,.h2,.h3,p{margin:0}
.h1{font-size:40px;line-height:1.05;font-weight:720;letter-spacing:0}
.h2{font-size:29px;line-height:1.1;font-weight:720;letter-spacing:0}
.h3{font-size:20px;line-height:1.15;font-weight:760;letter-spacing:0}
.p{color:rgba(255,255,255,.80);font-size:15px;line-height:1.38}
.muted{color:rgba(255,255,255,.68);font-size:13px;line-height:1.35}
.tiny{color:rgba(255,255,255,.62);font-size:11px;line-height:1.25}
.strong{font-weight:850;color:rgba(255,255,255,.92)}
.dangerText{color:rgba(255,77,109,.96)}
.successText{color:rgba(0,229,168,.96)}
.warningText{color:rgba(246,197,91,.96)}
.infoText{color:rgba(77,163,255,.96)}

.glass{
  background:rgba(255,255,255,.085);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--insaru-radius-md);
  backdrop-filter:blur(var(--insaru-blur-glass));
  -webkit-backdrop-filter:blur(var(--insaru-blur-glass));
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}
.glass.soft{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
.glass.flat{box-shadow:none}

.btn{
  min-height:50px;
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--insaru-text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 14px;
  font-size:16px;
  font-weight:760;
  cursor:pointer;
  user-select:none;
  text-align:center;
}
.btn.primary{
  background:linear-gradient(135deg,rgba(77,163,255,.30),rgba(0,229,168,.14) 52%,rgba(107,76,230,.25));
  border-color:rgba(77,163,255,.28);
}
.btn.secondary{background:rgba(255,255,255,.07)}
.btn.danger{background:rgba(255,77,109,.14);border-color:rgba(255,77,109,.30);color:rgba(255,220,226,.98)}
.btn.compact{width:auto;min-height:38px;border-radius:13px;font-size:13px;padding:0 12px}
.btn:active,.iconBtn:active,.taskButton:active,.tab:active,.chip:active{transform:scale(.99)}
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}
.chev{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  flex:0 0 auto;
}
.icon{width:21px;height:21px;display:inline-block;opacity:.92;flex:0 0 auto}
img[src*="assets/icons/"]{
  filter:brightness(0) invert(1) saturate(0) drop-shadow(0 0 8px rgba(255,255,255,.24));
  opacity:.94;
}
.iconBtn{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.20);
  cursor:pointer;
  color:var(--insaru-text-primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 26px rgba(0,0,0,.24);
}
.iconBtn img{width:18px;height:18px;opacity:1}
.navSpacer{width:36px;height:36px;display:block}

.topnav,.pageTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:38px;
}
.pageTop{
  margin-bottom:14px;
  padding:4px 0 10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.pageTitle{min-width:0;display:flex;flex-direction:column;gap:3px}
.pageTitleRow{display:flex;align-items:center;gap:10px;min-width:0}
.pageGlyph{
  width:34px;
  height:34px;
  border-radius:13px;
  flex:0 0 auto;
  position:relative;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 32px rgba(77,163,255,.18);
}
.pageGlyph::before{
  content:"";
  position:absolute;
  inset:8px;
  background:#fff;
  -webkit-mask:url('../assets/brand/insaru_mark_512.svg') center/contain no-repeat;
  mask:url('../assets/brand/insaru_mark_512.svg') center/contain no-repeat;
  filter:drop-shadow(0 0 9px rgba(255,255,255,.38));
}
.pageTitle .eyebrow{
  font-size:11px;
  color:rgba(255,255,255,.72);
  line-height:1.15;
  text-transform:uppercase;
  font-weight:850;
}
.pageTitle h2{
  font-size:25px;
  line-height:1.05;
  margin:0;
  font-weight:850;
  letter-spacing:0;
  color:rgba(255,255,255,.98);
  text-shadow:0 10px 32px rgba(0,0,0,.42);
}
.pageActions{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.centerHero{
  margin-top:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}
.compactHero{margin-top:10px}
.markRing{
  width:54px;
  height:54px;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 34px rgba(77,163,255,.18);
  display:grid;
  place-items:center;
}
.markRing img{width:100%;height:100%;object-fit:cover}
.featureStack{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.feature{padding:14px;display:flex;align-items:center;gap:12px}
.feature .badge,.statIcon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);
  flex:0 0 auto;
}
.feature .badge img,.statIcon img{width:22px;height:22px}
.feature .t{font-weight:850;font-size:16px;margin:0;color:rgba(255,255,255,.96)}
.feature .d{margin:2px 0 0;color:rgba(255,255,255,.70);font-size:13px;line-height:1.28}
.screenActions{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.legalText{text-align:center}

.screenIntro{display:flex;flex-direction:column;gap:8px}
.inputCard{padding:14px}
.label{color:rgba(255,255,255,.72);font-size:13px;margin:0 0 8px}
.pinField{
  height:46px;
  border-radius:14px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  padding:0 12px;
  color:rgba(255,255,255,.82);
  font-size:20px;
  letter-spacing:8px;
}
.selectedPin{border-color:rgba(77,163,255,.38);box-shadow:0 18px 55px rgba(77,163,255,.10)}
.rowBetween{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.toggle{
  width:52px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  position:relative;
  cursor:pointer;
  flex:0 0 auto;
  padding:0;
}
.toggle .knob{
  width:24px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  position:absolute;
  top:2px;
  left:3px;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  transition:left .16s ease;
}
.toggle.on{background:rgba(0,229,168,.22);border-color:rgba(0,229,168,.35)}
.toggle.on .knob{left:24px}
.keypad{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding-top:4px;
}
.key{
  min-height:55px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.76);
  font-size:20px;
  cursor:pointer;
  user-select:none;
}
.key.ghost{background:transparent;border-color:transparent;cursor:default}
.inlineActions{display:flex;gap:10px}

.heroCard{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.homeHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 16px;
  padding:2px 0 13px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.mastIdentity{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.mastMark{
  width:46px;
  height:46px;
  border-radius:16px;
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.07)),
    rgba(77,163,255,.08);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 18px 40px rgba(0,0,0,.32),
    0 0 34px rgba(77,163,255,.15);
}
.mastMark::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:14px;
  background:url('../assets/brand/app_icon_1024.png') center/cover no-repeat;
}
.mastMark::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.26),transparent 42%,rgba(0,0,0,.20));
  pointer-events:none;
}
.mastCopy{min-width:0}
.mastKicker{
  margin:0 0 3px;
  color:rgba(255,255,255,.64);
  font-size:10px;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
  font-weight:850;
}
.mastTitle{
  margin:0;
  color:rgba(255,255,255,.99);
  font-size:31px;
  line-height:.94;
  font-weight:900;
  letter-spacing:0;
  text-shadow:0 12px 36px rgba(0,0,0,.48);
}
.vaultChip{
  margin-top:7px;
  min-height:22px;
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.085);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.78);
  font-size:11px;
  font-weight:760;
  line-height:1;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.vaultChip span{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--insaru-success);
  box-shadow:0 0 12px rgba(0,229,168,.78);
}
.taskButton{
  min-width:62px;
  height:42px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.08)),
    rgba(255,255,255,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 14px 34px rgba(0,0,0,.30);
}
.taskButton img{width:18px;height:18px;opacity:1;flex:0 0 auto}
.taskButton span{
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,77,109,.92);
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.badgeN{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--insaru-danger);
  color:#fff;
  font-weight:900;
  font-size:11px;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
}
.alertPill{
  padding:11px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.88);
  text-align:left;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  isolation:isolate;
  overflow:hidden;
  position:relative;
}
.alertPill>*{position:relative;z-index:2}
.alertPill .grow{flex:1;min-width:0}
.alertPill strong{color:rgba(255,255,255,.96);font-weight:900}
.alertCopy{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.alertLabel{
  color:rgba(255,255,255,.96);
  font-size:12px;
  line-height:1.12;
  font-weight:860;
}
.alertValue{
  color:rgba(255,255,255,.74);
  font-size:15px;
  line-height:1.16;
  font-weight:860;
}
.backupGlow{
  --backup-glow-hue:43;
  border-color:hsl(var(--backup-glow-hue) 92% 64% / .22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 0 rgba(0,0,0,0);
  animation:backupPulse 4.8s ease-in-out infinite;
}
.backupGlow::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:0;
  background:
    radial-gradient(circle at 15% 48%,hsl(var(--backup-glow-hue) 92% 62% / .27),transparent 28%),
    radial-gradient(circle at 88% 46%,hsl(var(--backup-glow-hue) 92% 62% / .16),transparent 26%);
  opacity:.58;
  animation:backupHalo 4.8s ease-in-out infinite;
}
.scoreMatrix{
  --matrix-score:50;
  --matrix-fill:50%;
  min-height:58px;
  border-color:rgba(255,255,255,.18);
  background:
    linear-gradient(90deg,rgba(0,229,168,.18),rgba(246,197,91,.18) var(--matrix-fill),rgba(255,77,109,.20)),
    rgba(255,255,255,.065);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 24px rgba(0,229,168,.09);
}
.riskCanvas{
  position:absolute!important;
  inset:0;
  width:100%;
  height:100%;
  z-index:0!important;
  border-radius:inherit;
  opacity:.98;
  pointer-events:none;
  filter:blur(.45px) saturate(1.18);
}
.scoreMatrix::before,
.scoreMatrix::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.scoreMatrix::before{
  z-index:1;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:14px 14px,14px 14px;
  opacity:.36;
}
.scoreMatrix::after{
  z-index:1;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,.10) 28%,rgba(0,0,0,.14) 62%,rgba(0,0,0,.22)),
    linear-gradient(90deg,rgba(255,255,255,.14),transparent 18% 78%,rgba(255,255,255,.08)),
    radial-gradient(circle at 24% 20%,rgba(255,255,255,.13),transparent 24%);
  opacity:.54;
}
.scoreMatrix .alertLabel,
.scoreMatrix .alertValue,
.scoreMatrix .pillBtn{
  text-shadow:0 1px 9px rgba(0,0,0,.66);
}
.scoreMatrix>.icon{
  filter:brightness(0) invert(1) saturate(0) drop-shadow(0 1px 8px rgba(0,0,0,.66));
}
@keyframes backupPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 14px hsl(var(--backup-glow-hue) 92% 62% / .08)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 34px hsl(var(--backup-glow-hue) 92% 62% / .23)}
}
@keyframes backupHalo{
  0%,100%{opacity:.38;transform:scale(.96)}
  50%{opacity:.76;transform:scale(1.05)}
}
.warnIc,.okIc{
  width:31px;
  height:31px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.warnIc{background:rgba(246,197,91,.11);border:1px solid rgba(246,197,91,.24)}
.okIc{background:rgba(0,229,168,.10);border:1px solid rgba(0,229,168,.22)}
.warnIc img,.okIc img{width:18px;height:18px}

.sectionBlock{margin-top:14px}
.cardHead{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.cardHead .title{font-weight:900;font-size:15px;display:flex;align-items:center;gap:8px;min-width:0;color:rgba(255,255,255,.96)}
.cardHead .title img{width:18px;height:18px}
.cardBody{padding:0 12px 12px;display:flex;flex-direction:column;gap:10px}
.actionRow{
  width:100%;
  padding:10px;
  border-radius:14px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
}
.dot{width:10px;height:10px;border-radius:999px;margin-top:5px;flex:0 0 auto}
.dot.red{background:var(--insaru-danger)}.dot.gold{background:var(--insaru-warning)}.dot.blue{background:var(--insaru-info)}.dot.green{background:var(--insaru-success)}
.actionText{min-width:0}
.actionText b{color:rgba(255,255,255,.94)}
.actionText span{color:var(--insaru-text-muted)}
.kpiRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  min-width:0;
}
.kpi .num{font-weight:900;font-size:19px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.96)}
.kpi .lbl{margin-top:6px;font-size:12px;color:rgba(255,255,255,.68)}
.propGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.propCard{
  width:100%;
  text-align:left;
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  min-width:0;
}
.propCard .img{height:92px;background-size:cover;background-position:center;border-bottom:1px solid rgba(255,255,255,.10)}
.propCard .body{padding:10px;display:flex;flex-direction:column;gap:6px}
.propCard .name{font-weight:900;font-size:14px;line-height:1.2;min-height:34px;white-space:pre-line;color:rgba(255,255,255,.95)}
.propCard .meta{font-size:12px;color:rgba(255,255,255,.68);line-height:1.25}
.viewAll{
  padding:0 14px 12px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.62);
  font-size:13px;
  cursor:pointer;
}
.viewAll img{width:16px;height:16px;opacity:.75}

.tabbar{
  position:absolute;
  left:12px;
  right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  min-height:70px;
  border-radius:22px;
  background:rgba(16,16,31,.76);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  padding:9px 8px 7px;
  z-index:10;
  box-shadow:0 18px 60px rgba(0,0,0,.34);
}
.tab{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:rgba(255,255,255,.74);
  font-size:10px;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.tab .i{
  width:28px;
  height:28px;
  border-radius:12px;
  display:grid;
  place-items:center;
  position:relative;
}
.tab img{width:21px;height:21px;opacity:1}
.tab.active{color:rgba(255,255,255,.98)}
.tab.active .i{background:rgba(77,163,255,.20);border:1px solid rgba(255,255,255,.22);box-shadow:0 0 22px rgba(77,163,255,.24)}
.tab .badgeN{position:absolute;top:-7px;right:-7px}

.list{display:flex;flex-direction:column;gap:10px}
.listRow{
  width:100%;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
}
.listRow .left{display:flex;gap:12px;align-items:center;min-width:0}
.listRow .left>img{width:22px;height:22px;opacity:.9;flex:0 0 auto}
.listRow .main{min-width:0}
.listRow .t{font-weight:900;margin:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.97)}
.listRow .s{margin:2px 0 0;color:rgba(255,255,255,.66);font-size:12px;line-height:1.25}
.listRow .right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.pillBtn,.chip{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.90);
  font-weight:850;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.pillBtn.danger,.chip.danger{border-color:rgba(255,77,109,.30);background:rgba(255,77,109,.11);color:rgba(255,77,109,.96)}
.pillBtn.gold,.chip.gold{border-color:rgba(246,197,91,.30);background:rgba(246,197,91,.10);color:rgba(246,197,91,.96)}
.pillBtn.green,.chip.green{border-color:rgba(0,229,168,.28);background:rgba(0,229,168,.10);color:rgba(0,229,168,.96)}
.chipBar{display:flex;gap:8px;overflow:auto;padding:1px 0 10px;scrollbar-width:none}
.chipBar::-webkit-scrollbar{display:none}
.chip.active{border-color:rgba(77,163,255,.42);background:rgba(77,163,255,.14);color:rgba(220,238,255,.96)}

.progressTrack{height:8px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.progressFill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--insaru-success),var(--insaru-info));width:0%}
.stepList{display:flex;flex-direction:column;gap:9px}
.stepRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-radius:14px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.10);
}
.stepIcon{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.76);
  font-size:12px;
  font-weight:900;
  flex:0 0 auto;
}
.stepRow.done .stepIcon{background:rgba(0,229,168,.13);border-color:rgba(0,229,168,.28);color:rgba(0,229,168,.96)}
.stepRow.blocked{opacity:.72}
.timeline{display:flex;flex-direction:column;gap:9px}
.timelineItem{display:flex;gap:10px}
.timelineItem::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(77,163,255,.9);
  margin-top:6px;
  flex:0 0 auto;
}
.searchBar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:16px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.12);
}
.searchBar img{width:18px;height:18px;opacity:.76}
.searchBar input{
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:rgba(255,255,255,.92);
}
.searchBar input::placeholder{color:rgba(255,255,255,.44)}

.formGrid{display:flex;flex-direction:column;gap:11px}
.field{display:flex;flex-direction:column;gap:7px}
.field label,.field .fieldLabel{color:rgba(255,255,255,.72);font-size:12px}
.field input,.field select,.field textarea{
  width:100%;
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.92);
  padding:0 12px;
  outline:0;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.50)}
.field input[type="checkbox"]{accent-color:#fff}
.field textarea{min-height:84px;padding:11px 12px;resize:vertical}
.field select option{background:#171625;color:#fff}
.twoCol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.miniGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

.modalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:50;
  display:none;
  align-items:flex-end;
}
.modalBackdrop.show{display:flex}
.sheet{
  width:100%;
  max-height:82%;
  overflow:hidden;
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  background:rgba(20,18,35,.94);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:8px 14px 14px;
  display:flex;
  flex-direction:column;
  box-shadow:0 -22px 80px rgba(0,0,0,.45);
}
.sheetGrip{width:38px;height:4px;border-radius:999px;background:rgba(255,255,255,.22);align-self:center;margin:2px 0 10px}
.sheetHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sheetHead h3{margin:0;font-size:18px;font-weight:900;letter-spacing:0}
.sheetBody{overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.sheetBody::-webkit-scrollbar{width:0;height:0}

.toast{
  position:absolute;
  left:18px;
  right:18px;
  bottom:calc(94px + env(safe-area-inset-bottom));
  z-index:70;
  display:none;
}
.toast.show{display:block}
.toast .inner{
  padding:12px;
  border-radius:16px;
  background:rgba(0,0,0,.60);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:rgba(255,255,255,.92);
  font-weight:800;
  text-align:center;
}

.emptyState{
  padding:18px;
  text-align:center;
  color:var(--insaru-text-muted);
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px dashed rgba(255,255,255,.16);
}
.reportBox{
  padding:12px;
  border-radius:16px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.11);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.copyBlock{
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.80);
  font-size:12px;
  line-height:1.38;
  white-space:pre-wrap;
  word-break:break-word;
}

@media (max-width:360px){
  .app{padding-left:12px;padding-right:12px}
  .h1{font-size:34px}.h2{font-size:25px}
  .kpiRow,.miniGrid{grid-template-columns:1fr}
  .propGrid{grid-template-columns:1fr}
  .tabbar{left:8px;right:8px}
  .tab{font-size:9px}
  .tab .i{width:26px;height:26px}
  .listRow{align-items:flex-start}
  .listRow .right{align-self:center}
}
@media (max-height:760px){
  .featureStack{gap:9px}
  .feature{padding:11px}
  .key{min-height:48px}
  .centerHero{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .sparkCanvas{opacity:.42}
  .backupGlow,
  .backupGlow::before{animation:none}
  .riskCanvas{opacity:.62}
}

@media (min-width: 768px) {
  .app {
    flex-direction: row;
    padding: 0;
  }
  .tabbar {
    order: -1;
    position: static;
    width: 100px;
    height: 100dvh;
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding: 40px 0;
    background: rgba(16, 16, 31, .85);
  }
  .tab {
    gap: 8px;
    font-size: 11px;
  }
  .screen {
    flex: 1;
    padding: 40px 60px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
  }
  .scroll {
    padding-bottom: 40px;
  }
  .propGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .kpiRow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .miniGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .listRow { padding: 18px; }
  .heroCard { padding: 24px; gap: 20px; }
  .homeHeader { padding: 10px 0 24px; margin-bottom: 24px; }
}


/* Background Manager Styles */
body {
    --bg-opacity: 1;
    --anim-opacity: 1;
}

.hero-bg-layer {
    position: fixed;
    inset: -20px;
    z-index: 0;
    pointer-events: none;
    background-color: #070712;
    opacity: var(--bg-opacity);
}

.theme-classic .hero-bg-layer {
    background-image: url('../assets/bg/cosmic_iphone_1290x2796.png');
    background-size: cover;
    background-position: center top;
}

.theme-classic .hero-bg-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.66)),
        radial-gradient(900px 700px at 50% 0%, rgba(77,163,255,.17), transparent 62%);
}

.hero-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: var(--anim-opacity);
}

.theme-stardust .hero-canvas {
    mix-blend-mode: screen;
}

.theme-fluid .hero-canvas {
    mix-blend-mode: screen;
}


/* Insaru hard boot visibility fix: keep app above animated background */
.stage{
  position:relative !important;
  z-index:20 !important;
}
.phone{
  position:relative !important;
  z-index:21 !important;
  isolation:isolate;
}
.app{
  position:absolute !important;
  inset:0 !important;
  z-index:50 !important;
}
.hero-bg-layer,
.hero-canvas{
  z-index:0 !important;
  pointer-events:none !important;
}
/* If JS fails before routing, never leave the user on a blank starfield. */
body.boot-fallback #screen-welcome.active,
body.boot-fallback #screen-unlock.active,
.screen.active{
  display:flex !important;
}