
:root{
  --cream:#fbf8f1;
  --cream-2:#f3eddf;
  --paper:#fffdfa;
  --brown:#4b2d1b;
  --brown-2:#76543d;
  --olive:#68862f;
  --olive-2:#86a64a;
  --sage:#dfe8c9;
  --sage-2:#eef3e2;
  --red:#c84f3b;
  --muted:#78736c;
  --line:#e8ddca;
  --shadow:0 14px 34px rgba(80,56,33,.10);
  --shadow-soft:0 7px 18px rgba(80,56,33,.08);
}
*{box-sizing:border-box}
html{background:var(--cream);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--brown);
  background:
    radial-gradient(650px 300px at 15% 0%, rgba(134,166,74,.10), transparent 65%),
    radial-gradient(500px 270px at 100% 10%, rgba(195,157,102,.10), transparent 65%),
    var(--cream);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}
a{text-decoration:none;color:inherit}
.app-shell{position:relative;min-height:100vh;overflow:hidden}
.app{
  position:relative;
  z-index:2;
  width:min(100%,560px);
  margin:0 auto;
  padding:calc(18px + env(safe-area-inset-top)) 15px calc(28px + env(safe-area-inset-bottom));
}
.leaf{
  position:fixed;
  z-index:0;
  width:180px;height:180px;
  opacity:.09;
  pointer-events:none;
  filter:blur(.2px);
}
.leaf::before,.leaf::after{
  content:"";
  position:absolute;
  background:var(--olive);
  border-radius:100% 0 100% 0;
  transform:rotate(35deg);
}
.leaf::before{width:92px;height:45px;left:12px;top:35px}
.leaf::after{width:72px;height:36px;right:18px;bottom:34px}
.leaf-a{top:-22px;left:-70px;transform:rotate(-20deg)}
.leaf-b{right:-78px;top:205px;transform:rotate(145deg)}

.brand{
  text-align:center;
  padding:2px 12px 16px;
}
.brand-logo{
  display:block;
  width:132px;
  height:132px;
  object-fit:contain;
  margin:0 auto -4px;
}
.brand-name{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:35px;
  line-height:1;
  font-weight:500;
  letter-spacing:-.025em;
}
.brand-welcome{
  margin:12px 0 5px;
  color:var(--olive);
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  line-height:1.25;
}
.brand-subtitle{
  margin:0 auto;
  max-width:360px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

.card-stack{display:grid;gap:10px;margin:12px 0 24px}
.action-card{
  width:100%;
  min-height:78px;
  border:1px solid var(--line);
  background:rgba(255,253,250,.94);
  border-radius:20px;
  box-shadow:var(--shadow-soft);
  display:grid;
  grid-template-columns:52px 1fr 22px;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  cursor:pointer;
  text-align:left;
  transition:transform .15s ease, box-shadow .15s ease;
}
.action-card:active{transform:scale(.985);box-shadow:0 4px 12px rgba(80,56,33,.08)}
.icon-bubble{
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--sage-2),var(--sage));
  color:var(--olive);
  border:1px solid rgba(104,134,47,.13);
}
.icon-bubble.brown{color:var(--brown-2);background:#f5eee4}
.icon-bubble.red{color:var(--red);background:#faece8}
.icon-bubble svg{width:26px;height:26px}
.action-title{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:19px;
  line-height:1.16;
  font-weight:500;
}
.action-sub{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
  line-height:1.25;
}
.action-sub.green{color:var(--olive);font-weight:600}
.chevron{font-size:31px;color:var(--olive);font-weight:300;line-height:1}

.section{margin:0 0 24px}
.section-heading{
  display:flex;align-items:center;gap:8px;
  margin:0 2px 12px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  font-size:21px;
}
.section-heading::before{
  content:"";
  width:15px;height:9px;
  border-radius:100% 0 100% 0;
  background:var(--olive-2);
  transform:rotate(28deg);
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.info-tile{
  min-height:150px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,253,250,.94);
  box-shadow:var(--shadow-soft);
  padding:14px 8px 12px;
  text-align:center;
  cursor:pointer;
  transition:transform .15s ease;
}
.info-tile:active{transform:scale(.98)}
.tile-icon{
  width:58px;height:58px;border-radius:18px;
  display:grid;place-items:center;
  margin:0 auto 10px;
  background:var(--sage-2);
  color:var(--olive);
}
.tile-icon.red{background:#faece8;color:var(--red)}
.tile-icon.fire{background:#fff0e7;color:#c55c31}
.tile-icon svg{width:32px;height:32px}
.info-tile strong{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;
  line-height:1.16;
  font-weight:500;
}
.info-tile small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:11px;
  line-height:1.28;
}

.docs-preview{
  border:1px solid #d9d9b4;
  background:linear-gradient(135deg,#f2f4df,#fbf8ef 64%);
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.doc-preview-row{
  min-height:48px;
  display:grid;
  grid-template-columns:1fr 20px;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-bottom:1px solid rgba(104,134,47,.14);
  cursor:pointer;
  font-size:14px;
}
.doc-preview-row:last-child{border-bottom:0}
.doc-preview-row span:last-child{font-size:26px;color:var(--olive)}

.feedback{
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,253,250,.92);
  box-shadow:var(--shadow-soft);
  padding:16px;
}
.feedback h3{
  margin:0 0 5px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  font-size:21px;
}
.feedback p{margin:0 0 14px;color:var(--muted);font-size:13px}
.feedback-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.btn{
  min-height:50px;
  border-radius:15px;
  border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:active{transform:scale(.985)}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--olive-2),var(--olive));
  box-shadow:0 9px 20px rgba(104,134,47,.20);
}
.btn-outline{background:#fffdfa;border-color:#c8a77d;color:var(--brown)}
.btn-soft{background:var(--sage-2);border-color:#d8e2bd;color:var(--olive)}
.btn svg{width:22px;height:22px}

.future-strip{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.future-card{
  border:1px dashed #d7c8b6;
  background:rgba(255,253,250,.60);
  border-radius:16px;
  padding:12px 10px;
  text-align:center;
  color:var(--brown-2);
  font-size:13px;
}
.future-card small{display:block;color:var(--muted);margin-top:3px;font-size:10px}

.footer{
  text-align:center;
  padding:28px 10px 4px;
  color:#9a9185;
  font-size:11px;
}
.footer a{color:var(--olive)}

.page-head{
  display:grid;
  grid-template-columns:46px 1fr 46px;
  align-items:center;
  margin-bottom:12px;
}
.back-btn{
  width:44px;height:44px;border-radius:15px;
  border:1px solid var(--line);
  background:rgba(255,253,250,.92);
  box-shadow:var(--shadow-soft);
  display:grid;place-items:center;
  cursor:pointer;
  font-size:30px;
  color:var(--brown);
}
.mini-logo{width:76px;height:76px;object-fit:contain;margin:auto;display:block}
.page-title{
  text-align:center;
  margin:2px 0 5px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;
  font-weight:500;
  line-height:1.06;
}
.page-subtitle{
  text-align:center;
  color:var(--olive);
  margin:0 0 18px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
}
.hero-panel{
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 30%, rgba(134,166,74,.13), transparent 52%),
    #fffdfa;
  border-radius:25px;
  box-shadow:var(--shadow);
  min-height:190px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
  position:relative;
  overflow:hidden;
}
.hero-symbol{
  width:110px;height:110px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--sage-2);
  border:3px solid rgba(104,134,47,.18);
  color:var(--olive);
}
.hero-symbol.red{color:var(--red);background:#fff2ee;border-color:rgba(200,79,59,.16)}
.hero-symbol.fire{color:#c85e35;background:#fff1e7;border-color:rgba(200,94,53,.16)}
.hero-symbol svg{width:62px;height:62px}
.hero-panel::before,.hero-panel::after{
  content:"";
  position:absolute;
  width:70px;height:35px;
  border-radius:100% 0 100% 0;
  background:rgba(104,134,47,.11);
}
.hero-panel::before{left:25px;bottom:25px;transform:rotate(28deg)}
.hero-panel::after{right:25px;top:28px;transform:rotate(-145deg)}

.rule-list{display:grid;gap:9px}
.rule{
  min-height:70px;
  border:1px solid var(--line);
  background:#fffdfa;
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  align-items:center;
  padding:10px 13px;
}
.rule .icon-bubble{width:44px;height:44px}
.rule .icon-bubble svg{width:22px;height:22px}
.rule-text{
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;
  line-height:1.35;
}
.notice{
  margin-top:12px;
  border:1px solid #dec8aa;
  background:#faf3e8;
  border-radius:18px;
  padding:14px;
  color:var(--brown-2);
  line-height:1.45;
  font-size:14px;
}
.notice strong{color:var(--brown)}
.emergency{
  margin-top:12px;
  border:1px solid #ebc4ba;
  background:#fff6f2;
  border-radius:20px;
  padding:15px;
  text-align:center;
}
.emergency-label{font-family:Georgia,"Times New Roman",serif;font-size:18px}
.emergency-number{font-size:42px;font-weight:800;color:var(--red);margin:3px 0}
.contact-number{color:var(--olive);font-weight:700}

.page-actions{
  display:grid;gap:9px;margin-top:15px;
}
.page-actions .btn{min-height:56px;font-size:16px}

.docs-list{display:grid;gap:9px}
.doc-card{
  min-height:72px;
  border:1px solid var(--line);
  background:#fffdfa;
  border-radius:19px;
  box-shadow:var(--shadow-soft);
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:12px;
  align-items:center;
  padding:11px 13px;
  cursor:pointer;
  text-align:left;
}
.doc-card .doc-status{
  font-size:10px;
  padding:5px 7px;
  border-radius:999px;
  background:#f2eee7;
  color:#8d8376;
}
.doc-card strong{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  font-size:17px;
}
.doc-card small{display:block;color:var(--muted);margin-top:4px}
.doc-card svg{width:24px;height:24px}

.issue-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.issue-chip{
  border:1px solid var(--line);
  background:#fffdfa;
  min-height:62px;
  border-radius:17px;
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  text-align:left;
}
.issue-chip.selected{
  border-color:rgba(104,134,47,.55);
  background:var(--sage-2);
  box-shadow:0 7px 18px rgba(104,134,47,.10);
}
.issue-chip svg{width:23px;height:23px;color:var(--olive);flex:0 0 auto}
.issue-chip span{font-family:Georgia,"Times New Roman",serif;font-size:15px}
.issue-chip.full{grid-column:1/-1}
.textarea{
  margin-top:11px;
  width:100%;
  min-height:112px;
  resize:vertical;
  border:1px solid var(--line);
  background:#fffdfa;
  border-radius:18px;
  padding:14px;
  color:var(--brown);
  box-shadow:var(--shadow-soft);
  outline:none;
}
.textarea:focus{border-color:#a5b977;box-shadow:0 0 0 3px rgba(104,134,47,.09)}
.textarea::placeholder{color:#a9a198}
.copy-preview{
  display:none;
  margin-top:10px;
  border-radius:14px;
  padding:11px;
  background:#f4f1ea;
  color:#746c63;
  font-size:12px;
  white-space:pre-wrap;
}
.copy-preview.show{display:block}

.success-card{
  border:1px solid var(--line);
  background:#fffdfa;
  border-radius:26px;
  box-shadow:var(--shadow);
  padding:30px 18px;
  text-align:center;
}
.success-icon{
  width:116px;height:116px;
  border-radius:50%;
  margin:0 auto 16px;
  background:var(--sage-2);
  border:4px solid rgba(104,134,47,.18);
  display:grid;place-items:center;
  color:var(--olive);
  position:relative;
}
.success-icon svg{width:60px;height:60px}
.success-card h2{
  margin:0 0 8px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;font-weight:500;
}
.success-card p{margin:0;color:var(--muted);line-height:1.5}

.contact-panel{
  display:grid;gap:10px;
}
.info-callout{
  margin:16px 0;
  border:1px solid #d9d9b4;
  background:#f4f5e7;
  border-radius:19px;
  padding:18px;
  text-align:center;
  color:var(--brown-2);
  line-height:1.45;
}

.toast{
  position:fixed;
  z-index:10;
  left:50%;
  bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translate(-50%,30px);
  width:min(calc(100% - 30px),520px);
  padding:12px 14px;
  border-radius:14px;
  background:rgba(54,44,34,.94);
  color:#fff;
  font-size:13px;
  line-height:1.35;
  box-shadow:0 12px 30px rgba(0,0,0,.20);
  opacity:0;
  pointer-events:none;
  transition:.22s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:380px){
  .brand-name{font-size:32px}
  .brand-logo{width:120px;height:120px}
  .info-grid{gap:7px}
  .info-tile{padding-left:6px;padding-right:6px}
  .info-tile strong{font-size:14px}
  .feedback-buttons{grid-template-columns:1fr}
  .issue-grid{grid-template-columns:1fr}
  .issue-chip.full{grid-column:auto}
}
