:root{
  --forest:#2F4538;
  --forest-dark:#24352A;
  --stamp:#B23A2E;
  --forest-soft:#EAF0EC;
  --bg:#F4F1E8;
  --surface:#FFFFFF;
  --border:#E1DAC8;
  --text:#1C2321;
  --text-muted:#6B7268;
  --radius:12px;
  --topbar-h:56px;
  --navbar-h:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,sans-serif;line-height:1.55;
  overscroll-behavior-y:none;
}
h1,h2,h3{font-family:'Source Serif 4',Georgia,serif;font-weight:600;margin:0;color:var(--forest);}
a{color:var(--forest);}
:focus-visible{outline:2px solid var(--stamp);outline-offset:2px;}

#appShell{max-width:520px;margin:0 auto;height:100vh;height:100dvh;position:relative;background:var(--bg);}

.app-bar{
  position:fixed;top:0;left:0;right:0;max-width:520px;margin:0 auto;
  height:calc(var(--topbar-h) + env(safe-area-inset-top));background:var(--forest);z-index:30;
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  padding-top:env(safe-area-inset-top);box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.app-bar-brand{display:flex;align-items:center;gap:10px;}
.app-bar-brand span{color:#fff;font-family:'Source Serif 4',serif;font-weight:700;font-size:16px;}
.app-bar-status{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  padding:4px 10px;border-radius:20px;
}
.app-bar-status[hidden]{display:none;}
.mark{
  width:28px;height:28px;border-radius:6px;
  background:linear-gradient(135deg,var(--stamp),var(--forest-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Source Serif 4',serif;font-weight:700;font-size:14px;flex-shrink:0;
}
.mark.small{width:26px;height:26px;font-size:13px;}

.app-content{
  position:absolute;
  top:calc(var(--topbar-h) + env(safe-area-inset-top));
  bottom:calc(var(--navbar-h) + env(safe-area-inset-bottom));
  left:0;right:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 16px 32px;
}
.app-screen{display:none;}
.app-screen.active{display:block;}

.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;
  height:calc(var(--navbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--surface);border-top:1px solid var(--border);z-index:30;display:flex;
}
.nav-btn{
  flex:1;background:none;border:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;cursor:pointer;
  color:var(--text-muted);font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;padding:6px 0;
}
.nav-btn svg{width:21px;height:21px;}
.nav-btn.active{color:var(--stamp);}

.intro-card{margin-bottom:16px;}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.05em;color:var(--forest);}
.intro-card h1{font-size:24px;line-height:1.22;margin-top:8px;}
.intro-card .sub{margin-top:8px;color:var(--text-muted);font-size:14.5px;}
.trust-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.trust-chip{font-size:11.5px;font-weight:600;color:var(--forest);background:var(--surface);border:1px solid var(--border);padding:5px 10px;border-radius:20px;}

.why-us{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
.why-us-title{font-size:14.5px;margin-bottom:10px;}
.why-us-list{margin:0;padding-left:18px;}
.why-us-list li{font-size:13px;color:var(--text-muted);line-height:1.6;margin-bottom:8px;}
.why-us-list li:last-child{margin-bottom:0;}
.why-us-list strong{color:var(--text);font-weight:600;}

.card{background:var(--surface);border-radius:var(--radius);padding:18px;box-shadow:0 1px 3px rgba(28,35,33,.06);border:1px solid var(--border);}
.card-title{font-size:17px;margin-bottom:14px;}
.card-title.small{font-size:15px;margin-bottom:6px;}
.card.notice{margin-bottom:16px;}
.card.notice p{font-size:13px;color:var(--text-muted);margin:0 0 10px;}
.screen-title{font-size:20px;margin-bottom:4px;}
.screen-sub{font-size:13.5px;color:var(--text-muted);margin:0 0 16px;}

.field{margin-bottom:14px;}
.field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.02em;font-weight:500;color:var(--forest);margin-bottom:6px;}
.field-hint{font-size:11.5px;color:var(--text-muted);margin:6px 0 0;}
select,textarea,input[type=text],input[type=email],input[type=password],input[type=date]{
  width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);
  padding:12px 13px;border-radius:8px;font-family:'Inter',sans-serif;font-size:16px;resize:vertical;
  -webkit-appearance:none;appearance:none;
}
select:focus,textarea:focus,input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px var(--forest-soft);}
textarea{min-height:96px;}
.link-btn{background:none;border:none;color:var(--forest);font-size:13.5px;font-weight:600;cursor:pointer;padding:4px 0;margin-bottom:10px;text-align:left;}
.field-group{padding-top:8px;border-top:1px dashed var(--border);margin-top:4px;}
.error-msg{margin-top:12px;padding:11px 13px;border-radius:8px;background:#F7E4E0;border:1px solid #E3A79C;color:var(--stamp);font-size:13.5px;display:none;}
.error-msg.visible{display:block;}

.btn-primary{
  display:block;font-size:15px;font-weight:600;background:var(--forest);color:#fff;border:none;
  padding:14px 22px;border-radius:8px;cursor:pointer;width:100%;margin-top:6px;font-family:'Inter',sans-serif;
}
.btn-primary:active{background:var(--forest-dark);}
.btn-primary:disabled{opacity:.7;cursor:default;}
.btn-full{width:100%;text-align:center;}

.detected-badge{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--forest);background:var(--forest-soft);padding:8px 11px;border-radius:8px;}
.detected-badge[hidden]{display:none;}
.upload-row{margin-top:8px;}
.upload-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--forest);border:1px dashed var(--forest);background:var(--forest-soft);padding:8px 13px;border-radius:8px;cursor:pointer;}

.back-btn{background:none;border:none;color:var(--forest);font-size:13.5px;font-weight:600;cursor:pointer;padding:8px 0 12px;display:block;}
.doc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px rgba(28,35,33,.06);}
.doc-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--forest-soft);font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--forest);}
.doc-body-wrap{position:relative;}
.doc-body{padding:18px 16px;font-family:'Source Serif 4',serif;font-size:15.5px;line-height:1.72;white-space:pre-wrap;color:var(--text);outline:none;}
.doc-body.unlocked{cursor:text;}
.doc-body.unlocked:focus{background:#FCFBF7;}
.doc-fade{position:absolute;left:0;right:0;bottom:0;height:100px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--surface) 80%);pointer-events:none;}
.doc-fade.hidden{display:none;}
.doc-foot{padding:16px;border-top:1px solid var(--border);display:flex;gap:10px;flex-wrap:wrap;background:var(--bg);}
.doc-foot[hidden]{display:none;}
.doc-btn{font-size:13.5px;font-weight:600;padding:12px 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--forest);cursor:pointer;flex:1;text-align:center;font-family:'Inter',sans-serif;}
.doc-btn.filled{background:var(--forest);color:#fff;border-color:var(--forest);}
.doc-btn:disabled{opacity:.7;}

.unlock-pitch{width:100%;}
.unlock-headline{margin:0 0 4px;font-size:14px;font-weight:600;color:var(--text);}
.unlock-sub{margin:0;font-size:13px;color:var(--text-muted);}
.unlock-fine{width:100%;margin:2px 0 0;font-size:11.5px;color:var(--text-muted);text-align:center;}
.plan-picker{display:flex;gap:8px;width:100%;}
.plan-option{
  flex:1;border:1px solid var(--border);background:var(--surface);border-radius:10px;
  padding:11px 12px;cursor:pointer;text-align:left;font-family:'Inter',sans-serif;
}
.plan-option.selected{border-color:var(--forest);box-shadow:0 0 0 2px var(--forest-soft);}
.plan-option .plan-name{display:block;font-size:12px;font-weight:600;color:var(--text-muted);}
.plan-option .plan-price{display:block;font-family:'Source Serif 4',serif;font-size:19px;font-weight:600;color:var(--forest);}
.plan-option .plan-suffix{font-size:12px;color:var(--text-muted);font-family:'Inter',sans-serif;font-weight:400;}

.pricing-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:12px;}
.pricing-card.featured{border-color:var(--forest);box-shadow:0 0 0 2px var(--forest-soft);}
.pricing-card h3{font-size:16px;margin-bottom:2px;}
.pricing-card .big-price{font-family:'Source Serif 4',serif;font-size:30px;color:var(--forest);line-height:1.2;}
.pricing-card .big-price span{font-size:14px;color:var(--text-muted);font-family:'Inter',sans-serif;}
.pricing-card p{font-size:13px;color:var(--text-muted);margin:6px 0 12px;}
.compare ul{margin:8px 0 0;padding-left:18px;}
.compare li{font-size:13px;color:var(--text-muted);line-height:1.6;margin-bottom:7px;}
.compare h3{font-size:15px;}

.context-box{margin-top:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.context-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.04em;color:var(--forest);}
.context-box ul{margin:8px 0 0;padding-left:16px;}
.context-box li{font-size:13px;line-height:1.55;margin-bottom:5px;}
.context-disclaimer{font-size:11.5px;color:var(--text-muted);margin:8px 0 0;}

.edit-hint{font-size:12px;color:var(--text-muted);margin-top:8px;text-align:center;}
.disclaimer{margin-top:14px;font-size:12px;color:var(--text-muted);}
.footer-links{margin-top:20px;font-size:12.5px;color:var(--text-muted);}

.history-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:13px 15px;margin-bottom:9px;cursor:pointer;width:100%;text-align:left;font-family:'Inter',sans-serif;}
.history-item-left{display:flex;flex-direction:column;gap:2px;min-width:0;}
.history-item-title{font-size:13.5px;font-weight:600;color:var(--forest);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.history-item-meta{font-size:11.5px;color:var(--text-muted);}
.history-status{font-family:'IBM Plex Mono',monospace;font-size:10px;padding:4px 9px;border-radius:20px;white-space:nowrap;}
.history-status.unlocked{background:#DCEBDD;color:var(--forest-dark);}
.history-status.locked{background:var(--bg);color:var(--text-muted);border:1px solid var(--border);}
.empty-state{font-size:13.5px;color:var(--text-muted);text-align:center;padding:32px 0;display:none;}
.empty-state.visible{display:block;}

.faq-item{margin-bottom:18px;}
.faq-item h3{font-size:14.5px;margin:0 0 5px;}
.faq-item p{font-size:13.5px;color:var(--text-muted);margin:0;line-height:1.6;}

.contact-card{margin-top:8px;background:var(--forest-soft);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.contact-card h3{font-size:14.5px;margin-bottom:6px;}
.contact-card p{font-size:13px;color:var(--text-muted);margin:0 0 10px;}
.contact-link{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--forest);text-decoration:none;border-bottom:1px solid var(--forest);}

.auth-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.auth-tab{background:none;border:none;padding:10px 4px;font-size:13.5px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:'Inter',sans-serif;}
.auth-tab.active{color:var(--forest);border-bottom-color:var(--forest);}
.plan-line{font-size:13px;color:var(--text-muted);margin:0 0 12px;}

.spinner-inline{
  display:inline-block;width:15px;height:15px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:spin-rotate .7s linear infinite;margin-right:8px;vertical-align:-2px;
}
@keyframes spin-rotate{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .spinner-inline{animation-duration:2s;}
  *{scroll-behavior:auto !important;}
}

/* Elements given an explicit display above still need to honour [hidden]. */
[hidden]{display:none !important;}