/* Chlorona public site */



*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;}
body{font-family:Plex,ui-sans-serif,system-ui,sans-serif;width:100%;max-width:1280px;margin:0 auto}
.L{background:#F2EEE6;color:#1C1A16}
.D{background:#12100E;color:#F2EEE6}
.site{min-height:900px;padding:28px 64px 48px;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px}
.lock{display:flex;align-items:center;gap:12px}
.lock img{width:36px;height:36px;border-radius:9px;display:block;object-fit:cover}
.lock .w{font-family:Fraunces,Georgia,serif;font-size:26px;font-weight:500;letter-spacing:-.02em}
.nav{display:flex;gap:8px;align-items:center}
.nav a{
  min-height:44px;padding:0 12px;display:flex;align-items:center;
  font-size:15px;font-weight:600;text-decoration:none;border-radius:10px;
}
.L .nav a{color:#2F4A38}
.D .nav a{color:#F4EFE4}
.nav a.on{box-shadow:inset 0 0 0 1px currentColor}
.main{width:680px;max-width:100%;margin:36px auto 0;flex:1}
.kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.L .kicker{color:#534F48}
.D .kicker{color:#A8A39A}
h1{font-family:Fraunces,Georgia,serif;font-size:44px;line-height:48px;font-weight:500;letter-spacing:-.03em;margin:8px 0 20px}
h2{font-family:Fraunces,Georgia,serif;font-size:22px;line-height:26px;font-weight:500;margin:28px 0 8px}
p,li{font-size:16px;line-height:24px}
.L p,.L li{color:#1C1A16}
.D p,.D li{color:#F2EEE6}
.muted{margin-top:8px}
.L .muted{color:#534F48}
.D .muted{color:#A8A39A}
.stack{display:flex;flex-direction:column;gap:14px}
.card{
  border-radius:18px;padding:20px 22px;
}
.L .card{background:#FAF7F1;box-shadow:0 0 0 1px #E4DDD2}
.D .card{background:#1A1714;box-shadow:0 0 0 1px rgba(242,238,230,.08)}
.btn{
  min-height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;width:100%;text-decoration:none;border:0;cursor:pointer;font-family:inherit;
}
.btn + .btn{margin-top:10px}
.L .p{background:#2F4A38;color:#F4EFE4}
.D .p{background:#F4EFE4;color:#1C1A16}
.L .s{background:#FAF7F1;color:#2F4A38;box-shadow:0 0 0 1px #D9D2C6}
.D .s{background:transparent;color:#F2EEE6;box-shadow:0 0 0 1px rgba(242,238,230,.22)}
.apple{background:#000;color:#fff}
.D .apple{background:#F4EFE4;color:#12100E}
.danger{background:#8A4030;color:#F4EFE4}
.D .danger{background:#D4784A;color:#12100E}
.warn{font-size:15px;line-height:22px;margin:8px 0 16px}
.L .warn{color:#8A4030}
.D .warn{color:#D4784A}
.bal{font-family:Fraunces,Georgia,serif;font-size:56px;line-height:60px;font-weight:500;letter-spacing:-.03em;margin:4px 0 6px}
.L .bal{color:#2F4A38}
.D .bal{color:#F4EFE4}
.foot{margin-top:40px;font-size:14px}
.L .foot{color:#534F48}
.D .foot{color:#A8A39A}
.lede{max-width:46ch;margin-bottom:8px}

/* policy pages — numbered sections, no cards */
.policy .main{width:720px}
.policy .updated{font-size:14px;line-height:20px;margin:0 0 28px}
.L .policy .updated{color:#534F48}
.D .policy .updated{color:#A8A39A}
.policy h2{
  font-family:Plex,sans-serif;font-size:17px;line-height:24px;font-weight:600;
  margin:28px 0 10px;letter-spacing:0;
}
.policy p{margin:0 0 14px;font-size:16px;line-height:26px}
.policy p:last-child{margin-bottom:0}

/* signed-in account — chlorona.app */
.account .main{width:720px}
.acct-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:8px}
.acct-row .bal{margin:0}
.acct-meta{font-size:14px;line-height:20px}
.L .acct-meta{color:#534F48}
.D .acct-meta{color:#A8A39A}
.scan-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.scan{
  display:flex;align-items:center;gap:14px;
  border-radius:16px;padding:10px 12px;min-height:72px;
}
.L .scan{background:#FAF7F1;box-shadow:0 0 0 1px #E4DDD2}
.D .scan{background:#1A1714;box-shadow:0 0 0 1px rgba(242,238,230,.08)}
.scan img,.scan .ph{width:56px;height:56px;border-radius:12px;object-fit:cover;display:block;flex-shrink:0}
.scan .ph{background:rgba(83,79,72,.08)}
.D .scan .ph{background:rgba(242,238,230,.08)}
.scan .txt{min-width:0;flex:1}
.scan .n{font-family:Fraunces,Georgia,serif;font-size:18px;line-height:22px;font-weight:500}
.scan .d{font-size:13px;line-height:18px;margin-top:2px}
.L .scan .d{color:#534F48}
.D .scan .d{color:#A8A39A}
.scan .tag{font-size:12px;font-weight:600;letter-spacing:.04em;flex-shrink:0}
.L .scan .tag{color:#534F48}
.D .scan .tag{color:#A8A39A}
.acct-actions{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.acct-actions .btn{width:100%}
.btn.link{
  background:transparent;box-shadow:none;font-weight:600;
}
.L .btn.link{color:#2F4A38}
.D .btn.link{color:#F4EFE4}
.confirm-card .warn{margin-top:12px}
.empty-scans{padding:28px 8px;font-size:16px;line-height:22px}
.L .empty-scans{color:#534F48}
.D .empty-scans{color:#A8A39A}

/* account menu + delete modal */
.nav-acct{position:relative}
.nav-acct > a.on{box-shadow:inset 0 0 0 1px currentColor;cursor:pointer}
.acct-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:220px;
  border-radius:14px;padding:8px;z-index:20;display:none;
}
.acct-menu.open{display:block}
.L .acct-menu{background:#FAF7F1;box-shadow:0 0 0 1px #E4DDD2, 0 16px 40px rgba(28,26,22,.14)}
.D .acct-menu{background:#1A1714;box-shadow:0 0 0 1px rgba(242,238,230,.12), 0 16px 40px rgba(0,0,0,.5)}
.acct-menu .item{
  min-height:44px;padding:0 14px;border-radius:10px;
  display:flex;align-items:center;font-size:15px;font-weight:600;
  white-space:nowrap;cursor:pointer;border:0;width:100%;font-family:inherit;text-align:left;
}
.L .acct-menu .item{color:#1C1A16;background:transparent}
.D .acct-menu .item{color:#F2EEE6;background:transparent}
.acct-menu .item.danger{background:transparent !important}
.L .acct-menu .item.danger{color:#8A4030}
.D .acct-menu .item.danger{color:#D4784A}
.L .acct-menu .item:hover{background:rgba(47,74,56,.06)}
.D .acct-menu .item:hover{background:rgba(242,238,230,.06)}
.modal-scrim{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:40;
}
.modal-scrim[hidden]{display:none !important}
.L .modal-scrim{background:rgba(28,26,22,.42)}
.D .modal-scrim{background:rgba(0,0,0,.62)}
.modal{
  width:440px;max-width:100%;border-radius:22px;padding:28px 28px 24px;
}
.L .modal{background:#F2EEE6;box-shadow:0 24px 60px rgba(28,26,22,.28)}
.D .modal{background:#1A1714;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.modal h1{font-size:32px;line-height:36px;margin:6px 0 12px}
.modal .lede{margin-bottom:18px}
.modal .warn-list{margin:0 0 22px;padding-left:18px}
.modal .warn-list li{margin:0 0 8px;font-size:15px;line-height:22px}
.L .modal .warn-list li{color:#8A4030}
.D .modal .warn-list li{color:#D4784A}
.modal .btns{display:flex;flex-direction:column;gap:10px}
.modal .btns .btn{width:100%}
.site.blurred > .bar,.site.blurred > .main{filter:blur(1.5px)}
.account .foot{
  margin-top:40px;font-size:14px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
}
.foot .dot{opacity:.55}
.account .foot a{
  min-height:44px;padding:0 4px;display:inline-flex;align-items:center;
  font-size:14px;font-weight:600;text-decoration:none;
}
.L .account .foot a{color:#2F4A38}
.D .account .foot a{color:#F4EFE4}
.L .foot .tag{color:#534F48}
.D .foot .tag{color:#A8A39A}
/* account light — locked #FFFFFF + soft light gray borders */
body.L.acct-warm{background:#FFFFFF;color:#1C1A16}
.L.acct-warm .site{background:#FFFFFF}
.L.acct-warm .card,
.L.acct-warm .scan,
.L.acct-warm .acct-menu{
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E6E8E7;
}
.L.acct-warm .bal{color:#2F4A38}
.L.acct-warm .lock .w{color:#1C1A16}
.L.acct-warm .nav a{color:#2F4A38}
.L.acct-warm .nav a.on{box-shadow:inset 0 0 0 1px #E6E8E7}
.L.acct-warm h1,.L.acct-warm h2,.L.acct-warm .scan .n{color:#1C1A16}
.L.acct-warm .kicker{color:#534F48}
.L.acct-warm .muted,
.L.acct-warm .scan .d,
.L.acct-warm .scan .tag,
.L.acct-warm .empty-scans,
.L.acct-warm .foot .tag{color:#534F48}
.L.acct-warm .foot a{color:#2F4A38}
.L.acct-warm .modal{background:#FFFFFF;box-shadow:0 24px 60px rgba(28,26,22,.16), 0 0 0 1px #E6E8E7}
.L.acct-warm .btn.s{background:#FFFFFF;color:#2F4A38;box-shadow:0 0 0 1px #E6E8E7}
.L.acct-warm .modal-scrim{background:rgba(28,26,22,.32)}
.L.acct-warm .scan .ph{background:#E6E8E7}

/* hidden must beat .nav display:flex so signed-out chrome stays clean */
.nav[hidden],
#signedIn[hidden],
#signedOut[hidden],
.acct-menu[hidden],
.scan-list[hidden],
.empty-scans[hidden]{display:none !important}

/* marketing home — chlorona.app / */
body.home.L{background:#FFFFFF;color:#1C1A16;width:auto;max-width:100%}
body.home.D{background:#12100E;color:#F2EEE6;width:auto;max-width:100%}
.home .site{min-height:100vh;max-width:1120px;margin:0 auto;padding:28px 48px 40px}
.home .bar{min-height:56px}
.home .nav .signin{
  min-height:44px;padding:0 18px;border-radius:999px;
  display:flex;align-items:center;font-size:15px;font-weight:600;
}
.L.home .nav .signin{background:#2F4A38;color:#F4EFE4}
.D.home .nav .signin{background:#F4EFE4;color:#1C1A16}
.home-hero{margin:72px 0 56px;max-width:640px}
.home-hero .hello{
  font-family:Fraunces,Georgia,serif;font-size:20px;line-height:28px;font-weight:500;
  margin:0 0 12px;
}
.L.home .home-hero .hello{color:#2F4A38}
.D.home .home-hero .hello{color:#F4EFE4}
.home-hero h1{
  font-size:56px;line-height:60px;letter-spacing:-.03em;margin:0 0 20px;max-width:14ch;
}
.home-hero .lede{
  font-size:18px;line-height:28px;max-width:38ch;margin:0 0 28px;
}
.L.home .home-hero .lede{color:#534F48}
.D.home .home-hero .lede{color:#A8A39A}
.home-hero .tagline{
  font-family:Fraunces,Georgia,serif;font-size:22px;line-height:28px;font-weight:500;
}
.home-beats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:0 0 48px}
.home-beats .card{
  background:#FFFFFF;border-radius:18px;padding:22px 20px;
  box-shadow:0 0 0 1px #E6E8E7;
}
.D.home .home-beats .card{
  background:#1A1714;box-shadow:0 0 0 1px rgba(242,238,230,.1);
}
.home-beats h2{margin:0 0 8px;font-size:22px;line-height:26px}
.home-beats p{margin:0;font-size:15px;line-height:22px}
.L.home .home-beats p{color:#534F48}
.D.home .home-beats p{color:#A8A39A}
.home .foot{
  margin-top:auto;padding-top:24px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:14px;
}
.home .foot .dot{opacity:.55}
.home .foot a{
  min-height:44px;padding:0 4px;display:inline-flex;align-items:center;
  font-size:14px;font-weight:600;text-decoration:none;
}
.L.home .foot a{color:#2F4A38}
.D.home .foot a{color:#F4EFE4}
.L.home .foot .tag{color:#534F48}
.D.home .foot .tag{color:#A8A39A}
@media (max-width: 720px){
  .home .site{padding:20px 20px 32px;max-width:390px}
  .home-hero{margin:48px 0 40px}
  .home-hero h1{font-size:40px;line-height:44px}
  .home-beats{grid-template-columns:1fr;gap:12px}
}


/* #58 offline Account slim banner (lock offline-network-v1) */
.off-banner.web{
  margin:0;border-radius:0;
  padding:14px 64px;
  display:flex;gap:10px;align-items:center;
  flex-shrink:0;
}
.L .off-banner.web{
  background:#F4F5F4;
  box-shadow:inset 0 -1px 0 #E6E8E7, inset 3px 0 0 #2F4A38;
}
.D .off-banner.web{
  background:#1A1714;
  box-shadow:inset 0 -1px 0 rgba(242,238,230,.10), inset 3px 0 0 rgba(244,239,228,.70);
}
.off-banner.web .glyph{
  width:20px;height:20px;flex-shrink:0;
  display:grid;place-items:center;
}
.off-banner.web .glyph svg{width:16px;height:16px;display:block}
.L .off-banner.web .glyph{color:#2F4A38}
.D .off-banner.web .glyph{color:#F4EFE4}
.off-banner.web .copy{min-width:0;flex:1}
.off-banner.web .t{
  font-family:Plex,ui-sans-serif,system-ui,sans-serif;
  font-size:14px;line-height:18px;font-weight:600;
}
.L .off-banner.web .t{color:#1C1A16}
.D .off-banner.web .t{color:#F2EEE6}
.off-banner.web .b{
  font-size:13px;line-height:18px;margin-top:3px;max-width:64ch;
}
.L .off-banner.web .b{color:#534F48}
.D .off-banner.web .b{color:#A8A39A}
.site.account .main .bal.stale{opacity:.72}