:root{
  --bg:#0f1d16;
  --panel:#16291f;
  --panel-2:#1b3227;
  --soft:#213d30;
  --card:#f6f1e6;
  --card-2:#fff9ee;
  --ink:#18221d;
  --muted:#5a665f;
  --green:#143d2c;
  --green-2:#2f684d;
  --gold:#b5964d;
  --brown:#6a4c2f;
  --cream:#f6f1e6;
  --danger:#7b2d2d;
  --shadow:0 18px 45px rgba(0,0,0,.18);
  --radius:18px;
  --radius-sm:12px;
  --max:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top, rgba(181,150,77,.18), transparent 35%),
    linear-gradient(180deg, var(--bg), #0a1410 55%);
  color:var(--cream);
}

img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

.app-shell{
  width:min(calc(100% - 28px), var(--max));
  margin:22px auto 40px;
}

.hero{
  background:linear-gradient(135deg, rgba(20,61,44,.95), rgba(30,56,43,.95));
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:24px;
  box-shadow:var(--shadow);
}

.hero__brand{
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap;
}

.hero-copy{
  flex:1 1 320px;
  min-width:min(100%, 280px);
}

.logo{
  width:min(100%, 360px);
  height:auto;
  flex:0 1 360px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#cdb98a;
  font-size:.76rem;
  margin:0 0 8px;
}

.hero h1{
  font-family: Georgia, "Times New Roman", serif;
  font-size:clamp(2.2rem, 4vw, 3.8rem);
  margin:0 0 8px;
}

.subcopy{
  max-width:760px;
  line-height:1.55;
  color:#edf1ea;
  margin:0;
}

.hero__actions{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}

.btn{
  border:0;
  border-radius:999px;
  padding:12px 18px;
  font-weight:700;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{
  background:linear-gradient(135deg, #d5b46b, #b5964d);
  color:#1f1a11;
}
.btn--secondary{
  background:var(--green);
  color:#f8f3e8;
}
.btn--ghost{
  background:rgba(255,255,255,.08);
  color:#fbf6ed;
  border:1px solid rgba(255,255,255,.12);
}

.status-grid,
.grid{
  display:grid;
  gap:16px;
}

.status-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin-top:22px;
}

.stat-card{
  background:rgba(255,255,255,.05);
  border-radius:18px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
}
.stat-label{
  display:block;
  color:#d9cca7;
  font-size:.8rem;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.stat-card strong{
  display:block;
  font-size:1.15rem;
  margin-bottom:6px;
}
.stat-card small{color:#e9ecdf}

.quick-nav{
  position:sticky;
  top:10px;
  z-index:20;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0;
  padding:14px;
  background:rgba(12,21,17,.75);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
}

.tab-btn{
  background:transparent;
  color:#d7dfd8;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:10px 14px;
  font-weight:700;
}
.tab-btn.is-active{
  background:#f6f1e6;
  color:#1a241f;
}

.panel{display:none}
.panel.is-active{display:block}

.card{
  background:var(--card);
  color:var(--ink);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}

.two-up{grid-template-columns:repeat(2, minmax(0, 1fr))}
.three-up{grid-template-columns:repeat(3, minmax(0, 1fr))}

.card h2, .card h3{
  margin-top:0;
  font-family:Georgia, "Times New Roman", serif;
}
.card p{line-height:1.6}

.checklist{
  padding-left:20px;
  margin:0;
}
.checklist li{
  margin:8px 0;
  line-height:1.5;
}

.feature-card{
  display:flex;
  flex-direction:column;
}
.feature-card .btn{margin-top:auto;align-self:flex-start}

.upload-dropzone{
  display:grid;
  place-items:center;
  min-height:160px;
  border:2px dashed rgba(20,61,44,.28);
  border-radius:18px;
  background:var(--card-2);
  padding:16px;
  text-align:center;
  font-weight:600;
  color:var(--muted);
}
.upload-dropzone input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
}

.preview-wrap{
  margin-top:14px;
  min-height:140px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#ede8db;
  overflow:hidden;
}
.preview-wrap img{
  max-height:320px;
  width:100%;
  object-fit:cover;
}

.form-group{
  margin-top:16px;
}
.form-group label{
  display:block;
  margin-bottom:6px;
  font-weight:700;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  border-radius:14px;
  border:1px solid #d7d0c2;
  padding:12px 14px;
  background:#fffcf3;
}

.action-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.fine-print{
  font-size:.92rem;
  color:var(--muted);
}

.result-card{
  min-height:200px;
  border-radius:18px;
  background:var(--card-2);
  padding:18px;
  border:1px solid #ebe1cf;
}
.empty-state{
  display:grid;
  place-items:center;
  color:var(--muted);
  text-align:center;
}
.result-card h3{margin-top:0}
.result-card ul{padding-left:18px}
.result-card li{margin:7px 0}

.section-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:end;
  margin-bottom:16px;
}
.section-head input{
  width:min(100%, 280px);
  border-radius:999px;
  border:1px solid #d7d0c2;
  padding:12px 14px;
  background:#fffcf3;
}

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#e6decb;
  color:#2b352f;
  font-weight:700;
  font-size:.82rem;
}
.chip.is-clickable{cursor:pointer}
.chip.is-selected{
  background:var(--green);
  color:#f8f3e8;
}

.library-card .meta{
  display:grid;
  gap:8px;
  margin:12px 0;
  color:#425047;
  font-size:.95rem;
}
.details{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #e6ddcc;
}

.stack-list{
  display:grid;
  gap:12px;
}

.warning-banner{
  background:#fff1e9;
  border-left:4px solid #bb6f2c;
  padding:14px;
  border-radius:14px;
}

.badge-guide{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
.badge-box{
  background:var(--card-2);
  border:1px solid #eadfcb;
  border-radius:16px;
  padding:14px;
}
.badge-box strong{
  display:block;
  margin-bottom:6px;
}

.tip-box{
  margin-top:16px;
  background:#eef3eb;
  border-radius:16px;
  padding:16px;
}

.survival-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.build-card details{
  margin-top:12px;
}
.build-card summary{
  font-weight:700;
  cursor:pointer;
}

.journal-item{
  background:var(--card-2);
  border:1px solid #eadfcb;
  border-radius:16px;
  padding:14px;
}

.card-top{
  margin-bottom:10px;
}

@media (max-width: 960px){
  .status-grid,
  .two-up,
  .three-up{
    grid-template-columns:1fr;
  }
  .quick-nav{
    border-radius:24px;
  }
  .hero__brand{
    flex-direction:column;
  }
}

@media (max-width: 640px){
  .app-shell{
    width:min(calc(100% - 16px), var(--max));
  }
  .hero{
    padding:18px;
    border-radius:22px;
  }
  .card{
    padding:16px;
  }
}