:root{
  --pink:#df6e9f;
  --pink2:#f59fc2;
  --ink:#532b40;
  --muted:#916f80;
  --line:rgba(91,49,75,.12);
  --glass:rgba(255,255,255,.52);
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,
body{
  margin:0;
  width:100%;
  min-height:100%;
  background:#fff7fb;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color-scheme:light;
}

body{
  overflow-x:hidden;
  min-height:100vh;
  min-height:100dvh;
}

button,
input,
textarea,
select{
  font:inherit;
  min-width:0;
}

button{
  -webkit-appearance:none;
  appearance:none;
  touch-action:manipulation;
}

.hidden{
  display:none!important;
}

.app{
  min-height:100vh;
  min-height:100dvh;
  padding:
    max(8px,env(safe-area-inset-top))
    max(10px,env(safe-area-inset-right))
    max(10px,env(safe-area-inset-bottom))
    max(10px,env(safe-area-inset-left));
  position:relative;
  z-index:1;
}

.appbar{
  height:42px;
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
}

.wordmark{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
}

.mark{
  font-size:18px;
}

.supportTop{position:absolute;left:50%;top:8px;transform:translateX(-50%);display:none;align-items:center;gap:5px;min-height:30px;padding:0 8px;border:0;background:transparent;color:rgba(105,108,118,.88);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:9px;font-weight:900;letter-spacing:.06em;text-decoration:none;white-space:nowrap;animation:supportFloat 3.8s ease-in-out infinite;z-index:20;}
.supportSpark,.supportPlus{display:grid;place-items:center;font-size:11px;opacity:.78;}
.supportPlus{font-size:12px;opacity:.62;margin-left:-3px;}
.creatorButton{position:fixed;left:12px;bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));display:flex;align-items:center;gap:7px;min-height:32px;padding:0 11px 0 8px;border:1px solid rgba(223,110,159,.22);border-radius:999px;background:rgba(255,255,255,.20);color:rgba(112,62,86,.82);box-shadow:0 8px 24px rgba(196,87,137,.10),inset 0 1px 0 rgba(255,255,255,.48);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:8px;font-weight:900;letter-spacing:.04em;text-decoration:none;white-space:nowrap;animation:creatorFloat 3.6s ease-in-out infinite;z-index:30;}
.creatorPetal{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:rgba(255,255,255,.22);animation:petalSpin 4.5s ease-in-out infinite;}
@keyframes creatorFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes supportFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-2px)}}
@keyframes petalSpin{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.05)}}
body.mainActive .supportTop{display:flex;}
body.mainActive .wordmark{position:absolute;left:max(10px,env(safe-area-inset-left));top:0;height:42px;justify-content:flex-start;}
body.mainActive .creatorButton{display:none;}

.screen{
  min-height:calc(100vh - 50px);
  min-height:calc(100dvh - 50px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:10px 8px 20px;
}

.authArt,
.loginOrb{
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.authArt span:nth-child(1),
.authArt span:nth-child(3){
  font-size:28px;
}

.authArt span:nth-child(2){
  font-size:15px;
  animation:twinkle 2s ease-in-out infinite;
}

.loginOrb span{
  font-size:55px;
  animation:bloom 3s ease-in-out infinite;
}

.authCopy{
  width:min(430px,100%);
  text-align:center;
  margin-bottom:20px;
}

.eyebrow{
  font-size:8px;
  font-weight:900;
  letter-spacing:.24em;
  color:var(--pink);
}

.authCopy h1{
  margin:6px 0 4px;
  font-size:32px;
  letter-spacing:-.04em;
}

.authCopy p{
  margin:0 auto;
  max-width:350px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.authForm,
.unlockStack{
  width:min(390px,100%);
  display:grid;
  gap:8px;
}

.authForm input,
.unlockStack input,
.manualGrid input,
.manualGrid select,
.backupSheet input{
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.66);
  color:var(--ink);
  outline:none;
  padding:0 13px;
  box-shadow:0 5px 20px rgba(70,35,54,.04);
}

.authForm input:focus,
.unlockStack input:focus,
.manualGrid input:focus,
.manualGrid select:focus,
.backupSheet input:focus,
textarea:focus{
  border-color:rgba(223,110,159,.45);
  box-shadow:0 0 0 3px rgba(223,110,159,.08);
}

.autoKeyNote{
  display:flex;
  gap:9px;
  align-items:center;
  padding:11px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.48);
}

.keySpark{
  color:var(--pink);
  font-size:18px;
}

.autoKeyNote b{
  display:block;
  font-size:10px;
}

.autoKeyNote small{
  display:block;
  color:var(--muted);
  font-size:8px;
  line-height:1.4;
  margin-top:2px;
}

.actionMain,
.actionAlt{
  min-height:46px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.08em;
  font-size:10px;
}

.actionMain{
  border:1px solid rgba(223,110,159,.25);
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.86),
    rgba(255,207,226,.72)
  );
  color:#9d456e;
  box-shadow:0 10px 25px rgba(196,87,137,.12);
}

.actionAlt{
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  color:var(--ink);
}

.quietAction{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:9px;
  cursor:pointer;
  padding:8px;
}

.masterDrawer{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.38);
  overflow:hidden;
}

.masterDrawer summary{
  cursor:pointer;
  padding:12px;
  text-align:center;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
}

.drawerBody{
  display:grid;
  gap:7px;
  padding:0 8px 8px;
}

.msg{
  min-height:14px;
  text-align:center;
  color:#a04c72;
  font-size:9px;
}

.workspace{
  position:relative;
  min-height:calc(100vh - 50px);
  min-height:calc(100dvh - 50px);
}

.tokenZone{
  min-height:calc(100vh - 62px);
  min-height:calc(100dvh - 62px);
  padding:
    4px
    4px
    95px;
}

.tokenList{
  display:grid;
  gap:2px;
}

.tokenRow{
  min-height:76px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 84px 9px 6px;
  border-bottom:1px solid rgba(91,49,75,.07);
  position:relative;
  isolation:isolate;
  z-index:1;
  overflow:visible;
}

.tokenMeta{
  order:1;
  min-width:0;
  min-width:0;
}

.tokenName{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
}

.tokenName strong{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:clamp(10px,2.8vw,11px);
}

.tokenName small{
  color:var(--muted);
  font-size:8px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.tokenTools{
  order:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1px;
  flex:0 0 auto;
  min-width:52px;
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  z-index:100;
  pointer-events:auto;
}

.tokenTool{
  width:36px;
  height:36px;
  min-width:36px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:rgba(83,43,64,.5);
  padding:0;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  position:relative;
  z-index:101;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.tokenTool > span{
  pointer-events:none;
}

.tokenTool:hover,
.tokenTool:focus-visible{
  color:var(--pink);
  background:rgba(223,110,159,.08);
  border-color:rgba(223,110,159,.14);
  outline:none;
}

.tokenTimer{
  flex:0 0 auto;
  white-space:nowrap;
  min-width:24px;
  padding:2px 5px;
  border-radius:999px;
  background:rgba(223,110,159,.08);
  color:var(--pink);
  font-size:8px;
  font-weight:900;
  line-height:1.2;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

.tokenTimer.urgent{
  background:rgba(223,110,159,.16);
  color:#a64070;
}

.code{
  border:0;
  background:transparent;
  color:#7f385d;
  font-size:clamp(24px,8vw,32px);
  font-weight:900;
  letter-spacing:.10em;
  padding:6px 0;
  white-space:nowrap;
  cursor:pointer;
  font-variant-numeric:tabular-nums;
  order:2;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  position:relative;
  z-index:2;
  pointer-events:auto;
}

.code.digits-6{font-size:clamp(24px,8vw,32px);}
.code.digits-8{font-size:clamp(22px,6.8vw,28px);}
.code.digits-10{font-size:clamp(19px,5.8vw,24px);}

.code.hotp{
  display:flex;
  align-items:center;
  gap:4px;
}

.hotpPlus{
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:var(--pink);
  font-size:15px;
  cursor:pointer;
  padding:3px;
}

.codeTime{
  display:none;
}

.emptyState{
  min-height:70vh;
  min-height:70dvh;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
  font-size:10px;
}

.topKey{
  position:fixed;
  right:max(12px,env(safe-area-inset-right));
  top:calc(8px + env(safe-area-inset-top));
  z-index:35;
  border:0;
  background:transparent;
  color:rgba(83,43,64,.72);
  padding:4px 2px;
  font-size:9px;
  letter-spacing:.16em;
  font-weight:900;
  cursor:pointer;
}

.topKey:hover{
  color:var(--pink);
}

.floatMenu{
  position:fixed;
  right:max(10px,env(safe-area-inset-right));
  bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.floatActions{
  display:flex;
  max-height:calc(100vh - 170px);
  max-height:calc(100dvh - 170px);
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-end;
  gap:0;
  padding:10px 3px 18px;
  min-height:0;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0;
  pointer-events:none;
  transform:translateY(18px);
  transition:
    opacity .26s ease,
    transform .42s cubic-bezier(.2,.85,.25,1);
}

.floatMenu.open .floatActions{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

.floatAction{
  height:42px;
  min-height:42px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(83,43,64,.92);
  font-size:11px;
  letter-spacing:.2em;
  font-weight:900;
  text-align:right;
  cursor:pointer;
  text-shadow:0 2px 12px rgba(255,255,255,.95);
  transition:
    transform .2s ease,
    opacity .2s ease,
    color .2s ease;
}

.floatAction:hover{
  transform:translateX(-5px);
  color:var(--pink);
}

.floatMenu:not(.open) .floatAction{
  opacity:0;
  transform:translateY(12px);
}

.floatFab{
  position:relative;
  width:62px;
  height:62px;
  min-width:62px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:22px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:
    0 18px 42px rgba(62,30,48,.16),
    inset 0 1px 0 rgba(255,255,255,.46);
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  animation:fabFloat 3.4s ease-in-out infinite;
  cursor:pointer;
  padding:0;
}

.floatFab::before{
  content:"";
  position:absolute;
  inset:-18px;
  background:conic-gradient(
    from 0deg,
    rgba(255,183,214,0),
    rgba(255,183,214,.45),
    rgba(214,126,177,.18),
    rgba(255,255,255,0)
  );
  animation:fabOrbit 4.2s linear infinite;
}

.floatFab::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 0 18px rgba(255,176,211,.10);
}

.fabPetal{
  position:relative;
  z-index:2;
  font-size:28px;
  line-height:1;
  color:var(--pink);
  filter:
    drop-shadow(
      0 6px 15px rgba(214,110,159,.30)
    );
  animation:fabBloom 2.8s ease-in-out infinite;
}

.fabHalo{
  position:absolute;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.30);
  box-shadow:
    0 0 20px rgba(255,182,212,.22);
  animation:fabHalo 2.5s ease-out infinite;
}

dialog{
  color-scheme:light;
  border:0;
  padding:
    max(8px,env(safe-area-inset-top))
    max(8px,env(safe-area-inset-right))
    max(8px,env(safe-area-inset-bottom))
    max(8px,env(safe-area-inset-left));
  margin:0;
  background:transparent;
  width:100%;
  max-width:none;
  height:100vh;
  height:var(--viewport-height,100vh);
  max-height:none;
  overflow:hidden;
  display:none;
  align-items:center;
  justify-content:center;
}

dialog[open]{
  display:flex;
}

dialog::backdrop{
  background:rgba(45,24,38,.30);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.sheet{
  width:min(620px,100%);
  max-height:calc(100vh - 16px);
  max-height:calc(100dvh - 16px);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border:1px solid rgba(91,49,75,.12);
  border-radius:24px;
  background:rgba(255,250,253,.91);
  box-shadow:0 25px 80px rgba(58,31,49,.20);
  padding:16px;
}

.sheetTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:13px;
}

.sheet h2{
  margin:4px 0 0;
  font-size:22px;
}

.sheetIntro{
  font-size:10px;
  color:var(--muted);
  line-height:1.45;
  margin:0 0 10px;
}

.closeDot{
  width:32px!important;
  height:32px!important;
  min-width:32px;
  border:0;
  border-radius:50%;
  background:rgba(85,46,68,.07);
  color:var(--muted);
  font-size:18px;
  display:grid;
  place-items:center;
  cursor:pointer;
}


.privacyPolicy{
  display:grid;
  gap:14px;
  padding-bottom:4px;
}

.privacyHero,
.privacySection,
.privacyCreator{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.48);
  padding:13px;
}

.privacyHero{
  background:linear-gradient(135deg,rgba(255,237,246,.78),rgba(255,255,255,.58));
}

.privacyBadge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(223,110,159,.10);
  color:#9f4771;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.privacyPolicy h3{
  margin:7px 0 5px;
  font-size:12px;
  line-height:1.25;
}

.privacyPolicy p{
  margin:0 0 7px;
  color:var(--muted);
  font-size:9px;
  line-height:1.55;
}

.privacyPolicy p:last-child{
  margin-bottom:0;
}

.privacyPolicy code{
  padding:1px 4px;
  border-radius:5px;
  background:rgba(83,43,64,.06);
  color:var(--ink);
  font-size:.92em;
}

.privacyChecks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 10px;
  margin-top:8px;
}

.privacyChecks span{
  color:var(--muted);
  font-size:9px;
  line-height:1.35;
}

.privacyCreator{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
}

.privacyCreator strong{
  display:block;
  margin-top:5px;
  font-size:15px;
}

.privacyCreator p{
  margin-top:3px;
}

.privacyLinks{
  display:grid;
  gap:7px;
  justify-items:end;
}

.privacyLinks a{
  color:#9f4771;
  font-size:9px;
  font-weight:900;
  text-decoration:none;
}

.privacyFinePrint{
  text-align:center;
  font-size:8px!important;
  opacity:.82;
}

.privacyGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.privacyGrid article{
  padding:10px;
  border-radius:13px;
  background:rgba(255,255,255,.46);
  border:1px solid var(--line);
  display:grid;
  gap:3px;
}

.privacyGrid b{
  font-size:10px;
}

.privacyGrid span{
  font-size:9px;
  line-height:1.45;
  color:var(--muted);
}

.sourceNav{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  padding:4px;
  border-radius:13px;
  background:rgba(96,56,79,.06);
  margin-bottom:10px;
}

.sourceTab{
  height:35px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}

.sourceTab span{
  font-size:14px;
}

.sourceTab.active{
  background:#fff;
  color:#9f4771;
  box-shadow:0 4px 12px rgba(80,40,62,.08);
}

.scannerStage{
  height:min(56vh,330px);
  min-height:230px;
  border-radius:20px;
  background:#201923;
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
}

.scannerStage video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.scanCorners{
  position:absolute;
  width:min(62vw,230px);
  height:min(62vw,230px);
  max-width:78%;
  max-height:78%;
}

.scanCorners i{
  position:absolute;
  width:30px;
  height:30px;
  border-color:rgba(255,255,255,.9);
  border-style:solid;
}

.scanCorners i:nth-child(1){
  left:0;
  top:0;
  border-width:2px 0 0 2px;
}

.scanCorners i:nth-child(2){
  right:0;
  top:0;
  border-width:2px 2px 0 0;
}

.scanCorners i:nth-child(3){
  left:0;
  bottom:0;
  border-width:0 0 2px 2px;
}

.scanCorners i:nth-child(4){
  right:0;
  bottom:0;
  border-width:0 2px 2px 0;
}

.scanGlow{
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #ff9fc3,
      transparent
    );
  box-shadow:0 0 18px #ff9fc3;
  animation:scanline 2.4s ease-in-out infinite;
}

.scanStatus{
  position:absolute;
  left:10px;
  right:10px;
  max-width:calc(100% - 20px);
  bottom:10px;
  border-radius:12px;
  padding:7px 9px;
  background:rgba(20,13,19,.55);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:9px;
  display:flex;
  align-items:center;
  gap:6px;
}

.liveDot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ff9fc3;
  box-shadow:
    0 0 0 4px rgba(255,159,195,.13);
}

.scanActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}

.scanAction{
  min-height:46px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  color:#fff;
  cursor:pointer;
  touch-action:manipulation;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 22px rgba(25,14,22,.16);
}

.scanAction svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.scanPrimary{
  background:rgba(231,123,169,.12);
  border-color:rgba(255,170,205,.28);
}

.microNote{
  font-size:8px;
  color:var(--muted);
  text-align:center;
  margin:8px 0 0;
}

.sourcePanel textarea{
  width:100%;
  resize:none;
  min-height:90px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.66);
  color:var(--ink);
  outline:none;
}

.fieldLabel{
  font-size:8px;
  color:var(--muted);
  letter-spacing:.12em;
  font-weight:800;
  margin:2px 1px 5px;
}

.sourcePanel .actionMain{
  margin-top:7px;
  width:100%;
}

.manualGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.manualGrid input:nth-child(3),
.manualGrid input:nth-child(4),
.manualGrid input:nth-child(5){
  grid-column:1/-1;
}

#counterWrap{
  margin-top:6px;
}

#counterWrap input{
  width:100%;
}

.shareQrWrap{
  width:min(58vw,260px);
  aspect-ratio:1;
  margin:2px auto 10px;
  padding:10px;
  border-radius:18px;
  background:#fff;
}

.shareQrWrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.shareDetails{
  font-size:8px;
  line-height:1.35;
  color:var(--muted);
  word-break:break-all;
  background:rgba(85,46,68,.05);
  padding:9px;
  border-radius:11px;
}

.sheetActions{
  display:flex;
  width:100%;
  gap:6px;
  flex-wrap:wrap;
  margin-top:9px;
}

.sheetActions>*{
  flex:1 1 120px;
  min-width:0;
}

.recoveryKeyRow{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:5px;
}

.recoveryKeyRow input{
  min-width:0;
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 10px;
}

.miniAction{
  width:42px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.58);
  color:var(--muted);
  cursor:pointer;
}

.toast{
  position:fixed;
  left:50%;
  bottom:
    max(18px,calc(env(safe-area-inset-bottom) + 18px));
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  z-index:100;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(62,30,48,.88);
  color:#fff;
  font-size:9px;
  transition:opacity .2s,transform .2s;
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

.sakura-aura{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.sakura-aura i{
  position:absolute;
  width:6px;
  height:9px;
  border-radius:70% 30% 70% 30%;
  background:rgba(241,151,184,.18);
  animation:petal linear infinite;
}

.sakura-aura i:nth-child(1){left:8%;animation-duration:18s}
.sakura-aura i:nth-child(2){left:28%;animation-duration:23s;animation-delay:-6s}
.sakura-aura i:nth-child(3){left:49%;animation-duration:19s;animation-delay:-11s}
.sakura-aura i:nth-child(4){left:67%;animation-duration:25s;animation-delay:-4s}
.sakura-aura i:nth-child(5){left:87%;animation-duration:21s;animation-delay:-13s}

@keyframes petal{
  0%{
    transform:translate3d(0,-10vh,0) rotate(0deg);
    opacity:0;
  }
  12%{
    opacity:.8;
  }
  100%{
    transform:translate3d(13vw,112vh,0) rotate(360deg);
    opacity:0;
  }
}

@keyframes bloom{
  0%,100%{
    transform:translateY(0) rotate(-2deg) scale(1);
  }
  50%{
    transform:translateY(-5px) rotate(2deg) scale(1.04);
  }
}

@keyframes twinkle{
  0%,100%{
    opacity:.25;
    transform:scale(.8);
  }
  50%{
    opacity:1;
    transform:scale(1.3);
  }
}

@keyframes scanline{
  0%,100%{
    transform:translateY(-105px);
    opacity:.35;
  }
  50%{
    transform:translateY(105px);
    opacity:1;
  }
}

@keyframes cardIn{
  from{
    opacity:0;
    transform:translateY(7px) scale(.985);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@keyframes fabFloat{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-2deg);
  }
  50%{
    transform:translate3d(0,-8px,0) rotate(2deg);
  }
}

@keyframes fabOrbit{
  to{
    transform:rotate(360deg);
  }
}

@keyframes fabBloom{
  0%,100%{
    transform:scale(.96) rotate(-5deg);
  }
  50%{
    transform:scale(1.08) rotate(5deg);
  }
}

@keyframes fabHalo{
  0%{
    transform:scale(.72);
    opacity:.65;
  }
  100%{
    transform:scale(1.45);
    opacity:0;
  }
}

/* Dynamic viewport fallback for mobile browser chrome and virtual keyboards. */
.app{
  min-height:var(--viewport-height,100vh);
}

.screen{
  min-height:calc(var(--viewport-height,100vh) - 50px);
}

.workspace{
  min-height:calc(var(--viewport-height,100vh) - 50px);
}

.tokenZone{
  min-height:calc(var(--viewport-height,100vh) - 62px);
}

.sheet{
  max-height:calc(var(--viewport-height,100vh) - 16px);
}

@media(max-width:600px){

  .app{
    padding-left:max(8px,env(safe-area-inset-left));
    padding-right:max(8px,env(safe-area-inset-right));
  }

  .screen{
    padding-left:4px;
    padding-right:4px;
  }

  .authCopy{
    width:min(390px,100%);
  }

  .privacyGrid{
    grid-template-columns:1fr;
  }

  .sheet{
    width:100%;
    border-radius:22px;
    padding:14px;
  }

  .sheet h2{
    font-size:20px;
  }

  .scannerStage{
    height:min(54vh,320px);
    height:min(54dvh,320px);
    min-height:210px;
    border-radius:18px;
  }

  .scanCorners{
    width:min(64vw,220px);
    height:min(64vw,220px);
  }

  .sourceTab{
    min-height:40px;
    height:40px;
  }

  .sheetActions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .sheetActions .actionMain:last-child,
  .sheetActions > :only-child{
    grid-column:1/-1;
  }

}

@media(max-width:380px){

  .authArt,
  .loginOrb{
    height:66px;
  }

  .loginOrb span{
    font-size:48px;
  }

  .authCopy{
    margin-bottom:14px;
  }

  .authCopy h1{
    font-size:25px;
  }

  .authCopy p{
    font-size:11px;
  }

  .tokenRow{
    min-height:72px;
    padding-right:80px;
    gap:7px;
  }

  .code{
    font-size:clamp(22px,7.8vw,29px);
    letter-spacing:.075em;
  }

  .tokenTool,
  .hotpPlus{
    width:34px;
    min-width:34px;
    height:34px;
  }

  .floatFab{
    width:56px;
    height:56px;
    min-width:56px;
    border-radius:20px;
  }

  .fabPetal{
    font-size:25px;
  }

}

@media(max-width:340px){

  body.mainActive .supportTop{
    display:none!important;
  }

  .screen{
    justify-content:flex-start;
    padding-top:8px;
  }

  .authArt,
  .loginOrb{
    height:48px;
  }

  .authArt span:nth-child(1),
  .authArt span:nth-child(3){
    font-size:22px;
  }

  .loginOrb span{
    font-size:42px;
  }

  .authCopy{
    margin-bottom:10px;
  }

  .authCopy h1{
    font-size:23px;
  }

  .authForm,
  .unlockStack{
    width:100%;
  }

  .scannerStage{
    min-height:195px;
  }

  .sheet{
    padding:12px;
    border-radius:20px;
  }

}

@media(max-height:700px) and (min-width:381px){
  .screen{
    justify-content:flex-start;
    padding-top:14px;
  }

  .authArt,
  .loginOrb{
    height:62px;
  }
}

@media(orientation:landscape) and (max-height:560px){

  .appbar{
    height:36px;
  }

  .screen{
    min-height:calc(100vh - 42px);
    min-height:calc(100dvh - 42px);
    justify-content:flex-start;
    padding-top:8px;
    padding-bottom:10px;
  }

  .authArt,
  .loginOrb{
    height:42px;
  }

  .loginOrb span{
    font-size:38px;
  }

  .authCopy{
    margin-bottom:8px;
  }

  .authCopy h1{
    font-size:24px;
  }

  .authForm,
  .unlockStack{
    width:min(520px,100%);
  }

  .scannerStage{
    height:190px;
    min-height:170px;
  }

}

@media(hover:none){
  .tokenTool:hover,
  .topKey:hover,
  .floatAction:hover{
    color:inherit;
    background:transparent;
    border-color:transparent;
    transform:none;
  }
}


@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }

  .sakura-aura i{
    display:none;
  }

  .supportTop,.supportSpark,.creatorButton,.creatorPetal{
    animation:none!important;
  }

}

/* Sakura 2FA mobile hardening v23 */
html{
  min-width:320px;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  min-width:320px;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}

.app{
  width:100%;
  max-width:100%;
  min-height:var(--viewport-height,100vh);
  padding-top:max(8px,env(safe-area-inset-top));
  padding-right:max(10px,env(safe-area-inset-right));
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  padding-left:max(10px,env(safe-area-inset-left));
}

button,
input,
textarea,
select{
  min-width:0;
}

.authForm input,
.unlockStack input,
.manualGrid input,
.manualGrid select,
.backupSheet input,
.sourcePanel textarea,
.recoveryKeyRow input{
  font-size:16px;
}

.authCopy h1,
.sheet h2{
  overflow-wrap:anywhere;
}

.authCopy p,
.sheetIntro,
.microNote,
.privacyGrid span,
.shareDetails{
  overflow-wrap:anywhere;
}

.tokenRow{
  width:100%;
  max-width:100%;
  min-width:0;
}

.tokenMeta{
  flex:1 1 0;
  min-width:0;
  max-width:100%;
}

.tokenName,
.tokenName strong,
.tokenName small{
  min-width:0;
  max-width:100%;
}

.tokenName small{
  display:block;
}

.code{
  max-width:100%;
  min-width:0;
  white-space:nowrap;
  font-size:clamp(24px,8vw,32px);
  letter-spacing:clamp(.045em,.65vw,.11em);
}

.tokenTools{
  min-width:104px;
  gap:2px;
}

.tokenTool,
.hotpPlus{
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px;
  touch-action:manipulation;
}

.floatMenu{
  right:max(10px,env(safe-area-inset-right));
  bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));
}

.floatFab{
  width:60px;
  height:60px;
  min-width:60px;
  min-height:60px;
}

/* Stable mobile dialog shell. The sheet scrolls instead of allowing the
   browser to clip controls when the address bar/keyboard changes height. */
dialog{
  width:100vw;
  max-width:none;
  height:var(--dialog-height,var(--viewport-height,100vh));
  max-height:none;
  margin:0;
  padding:
    max(8px,env(safe-area-inset-top))
    max(8px,env(safe-area-inset-right))
    max(8px,env(safe-area-inset-bottom))
    max(8px,env(safe-area-inset-left));
  align-items:flex-end;
  justify-content:center;
}

dialog[open]{
  display:flex;
}

.sheet{
  width:min(620px,100%);
  max-width:100%;
  max-height:min(92%,760px);
  margin:0;
  padding:
    14px
    14px
    max(14px,env(safe-area-inset-bottom))
    14px;
  border-radius:24px 24px 0 0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.sheetTop{
  position:sticky;
  top:0;
  z-index:2;
  padding-bottom:4px;
  background:linear-gradient(rgba(255,250,253,.98),rgba(255,250,253,.93));
}

.closeDot{
  width:40px!important;
  height:40px!important;
  min-width:40px;
  min-height:40px;
}

.sourceTab,
.scanAction,
.actionMain,
.actionAlt,
.miniAction{
  min-height:48px;
}

.sourceTab{
  height:48px;
}

.scanAction{
  min-width:0;
}

.scannerStage{
  width:100%;
  height:min(52svh,340px);
  min-height:200px;
  max-height:52svh;
  aspect-ratio:4/5;
}

.scannerStage video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.scanCorners{
  width:min(58vw,230px);
  height:min(58vw,230px);
  max-width:72%;
  max-height:72%;
}

.scanStatus{
  font-size:11px;
  line-height:1.25;
}

.manualGrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.sheetActions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.sheetActions>*{
  width:100%;
  min-width:0;
}

.shareDetails{
  max-height:120px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:390px){
  .privacyChecks{
    grid-template-columns:1fr;
  }

  .privacyCreator{
    grid-template-columns:1fr;
  }

  .privacyLinks{
    justify-items:start;
  }
  .app{
    padding-right:max(7px,env(safe-area-inset-right));
    padding-left:max(7px,env(safe-area-inset-left));
  }

  .appbar{
    height:40px;
  }

  body.mainActive .wordmark{
    left:max(7px,env(safe-area-inset-left));
  }

  .wordmark{
    font-size:11px;
    letter-spacing:.055em;
  }

  .supportTop{
    max-width:46vw;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:8px;
  }

  .screen{
    min-height:calc(var(--viewport-height,100vh) - 48px);
    padding:8px 0 16px;
  }

  .authArt,
  .loginOrb{
    height:62px;
  }

  .loginOrb span{
    font-size:46px;
  }

  .authCopy{
    margin-bottom:14px;
  }

  .authCopy h1{
    font-size:clamp(23px,7vw,28px);
  }

  .authCopy p{
    font-size:11px;
  }

  .authForm,
  .unlockStack{
    width:100%;
  }

  .tokenZone{
    padding-right:2px;
    padding-left:2px;
    padding-bottom:100px;
  }

  .tokenRow{
    min-height:80px;
    padding:9px 0 9px 2px;
    gap:4px;
  }

  .tokenName strong{
    font-size:10px;
  }

  .tokenName small{
    font-size:8px;
  }

  .code{
    font-size:clamp(22px,7.8vw,29px);
    letter-spacing:.045em;
  }

  .tokenTools{
    min-width:104px;
  }

  .tokenTool,
  .hotpPlus{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
  }

  .floatFab{
    width:56px;
    height:56px;
    min-width:56px;
    min-height:56px;
  }

  .sheet{
    max-height:92%;
    padding:12px 12px max(12px,env(safe-area-inset-bottom)) 12px;
    border-radius:20px 20px 0 0;
  }

  .sheet h2{
    font-size:20px;
  }

  .scannerStage{
    height:min(50svh,300px);
    min-height:190px;
  }

  .scanCorners{
    width:min(62vw,205px);
    height:min(62vw,205px);
  }

  .sheetActions{
    grid-template-columns:1fr;
  }
}

@media(max-width:340px){
  .screen{
    min-height:calc(var(--viewport-height,100vh) - 44px);
  }

  .authArt,
  .loginOrb{
    height:48px;
  }

  .loginOrb span{
    font-size:40px;
  }

  .authCopy h1{
    font-size:22px;
  }

  .autoKeyNote{
    padding:9px;
  }

  .authForm input,
  .unlockStack input{
    min-height:46px;
  }

  .tokenRow{
    min-height:78px;
  }

  .code{
    font-size:22px;
    letter-spacing:.03em;
  }

  .tokenTools{
    min-width:96px;
  }

  .tokenTool,
  .hotpPlus{
    width:31px;
    min-width:31px;
    height:31px;
    min-height:31px;
  }

  .scannerStage{
    min-height:180px;
    height:46svh;
  }
}

@media(orientation:landscape) and (max-height:560px){
  dialog{
    align-items:flex-start;
  }

  .sheet{
    max-height:calc(var(--dialog-height,var(--viewport-height,100vh)) - 8px);
    border-radius:18px;
  }

  .scannerStage{
    height:min(58svh,230px);
    min-height:160px;
    aspect-ratio:16/9;
  }

  .screen{
    justify-content:flex-start;
    padding-top:6px;
  }
}

@media(prefers-reduced-motion:reduce){
  .floatFab,
  .fabPetal,
  .fabHalo,
  .scanGlow,
  .loginOrb span,
  .authArt span:nth-child(2),
  .creatorButton,
  .creatorPetal,
  .supportTop{
    animation:none!important;
  }
}