/* === RESET & BASE === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.6;color:#1E2F1C;background:#F9F3E5;min-height:100vh;display:flex;flex-direction:column}
img,svg{display:block;max-width:100%}
a{color:#2D5A27;text-decoration:none;transition:color .2s}
a:hover{color:#1B3A18;text-decoration:underline}
.container{max-width:960px;margin:0 auto;padding:0 1.5rem}

/* === TYPOGRAPHY === */
h1{font-size:2.4rem;font-weight:800;line-height:1.2;letter-spacing:-0.02em;color:#1B3A18}
h2{font-size:1.8rem;font-weight:700;color:#1B3A18;margin-bottom:0.5rem}
h3{font-size:1.2rem;font-weight:600;color:#2D5A27}
p{margin-bottom:0.8rem}

/* === HEADER === */
.site-header{background:#F9F3E5;border-bottom:2px solid #E6D7B8;padding:1rem 0;position:sticky;top:0;z-index:10}
.site-header .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.8rem}
.logo{display:flex;align-items:center;gap:0.5rem;font-weight:700;font-size:1.3rem;color:#2D5A27}
.site-header nav{display:flex;gap:1.5rem;font-weight:500}
.site-header nav a{color:#4A6B3A;font-size:0.95rem}
.site-header nav a:hover{color:#2D5A27}

/* === HERO === */
.hero{padding:4rem 0 3rem;text-align:center;background:linear-gradient(180deg,#FDFBF5 0%,#F9F3E5 100%)}
.hero-subtitle{font-size:1.15rem;color:#4A6B3A;max-width:640px;margin:0 auto 2rem}
.hero-stats{display:flex;justify-content:center;gap:2.5rem;margin-top:2.5rem;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;align-items:center}
.stat strong{font-size:1.8rem;color:#2D5A27;font-weight:800}
.stat span{font-size:0.9rem;color:#6B7F5A}

/* === BUTTONS === */
.btn-primary{display:inline-block;background:#2D5A27;color:#F9F3E5;padding:0.8rem 2rem;border-radius:8px;font-weight:600;font-size:1rem;border:none;cursor:pointer;transition:background .2s,transform .1s;text-decoration:none}
.btn-primary:hover{background:#1B3A18;text-decoration:none;color:#F9F3E5}
.btn-primary:active{transform:scale(0.98)}
.btn-primary:disabled{background:#A3B89A;cursor:not-allowed;transform:none}
.btn-secondary{background:#E6D7B8;color:#2D5A27;padding:0.7rem 1.4rem;border-radius:8px;font-weight:600;border:1px solid #D4C09A;cursor:pointer;font-size:0.95rem;transition:background .2s}
.btn-secondary:hover{background:#D4C09A}
.btn-text{background:none;border:none;color:#6B7F5A;cursor:pointer;font-weight:500;font-size:0.9rem;text-decoration:underline;padding:0.5rem}
.btn-text:hover{color:#2D5A27}

/* === DASHBOARD SECTION === */
.dashboard{padding:3rem 0 4rem;background:#FDFBF5}
.section-desc{color:#4A6B3A;margin-bottom:2rem}
.toolbar{display:flex;flex-direction:column;gap:1.8rem;margin-bottom:2.5rem}
.project-meta,.milestone-form{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:0.3rem;min-width:160px;flex:1}
.field label{font-weight:600;font-size:0.85rem;color:#4A6B3A;text-transform:uppercase;letter-spacing:0.03em}
.field input,select{font-size:0.95rem;padding:0.6rem 0.8rem;border:1px solid #D4C09A;border-radius:6px;background:#FFF;color:#1E2F1C;outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus{border-color:#2D5A27;box-shadow:0 0 0 3px rgba(45,90,39,0.15)}

/* === MILESTONE LIST === */
.milestone-list{display:flex;flex-direction:column;gap:0.8rem;margin-bottom:2rem}
.empty-state{text-align:center;color:#A3B89A;padding:2rem;font-style:italic}
.milestone-row{display:flex;align-items:center;gap:0.8rem;background:#FFF;border:1px solid #E6D7B8;border-radius:10px;padding:0.8rem 1rem;flex-wrap:wrap;transition:box-shadow .2s}
.milestone-row:hover{box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.milestone-row.completed{background:#F0F7EC;border-color:#C4D9B0}
.milestone-check{width:22px;height:22px;accent-color:#2D5A27;cursor:pointer;flex-shrink:0}
.milestone-info{flex:1;min-width:180px;display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;align-items:center}
.milestone-name{font-weight:600;color:#1B3A18}
.milestone-amount{font-weight:700;color:#2D5A27}
.milestone-due{font-size:0.85rem;color:#6B7F5A}
.milestone-due.overdue{color:#B33A2E;font-weight:600}
.milestone-actions{display:flex;gap:0.5rem;flex-shrink:0}
.milestone-actions button{background:none;border:1px solid #D4C09A;border-radius:6px;padding:0.3rem 0.7rem;cursor:pointer;font-size:0.85rem;color:#4A6B3A;transition:background .2s}
.milestone-actions button:hover{background:#E6D7B8}

/* === SUMMARY BAR === */
.summary-bar{display:flex;flex-wrap:wrap;gap:1.5rem;background:#F0F7EC;border:1px solid #C4D9B0;border-radius:10px;padding:1.2rem 1.5rem;margin-bottom:2rem;justify-content:space-between}
.summary-item{display:flex;flex-direction:column;gap:0.2rem}
.summary-item span{font-size:0.85rem;color:#4A6B3A}
.summary-item strong{font-size:1.2rem;color:#1B3A18}

/* === HOW IT WORKS === */
.how-it-works{padding:4rem 0;background:#F9F3E5}
.steps{display:flex;gap:2rem;margin-top:2rem;flex-wrap:wrap}
.step{flex:1;min-width:220px;background:#FFF;border-radius:12px;padding:1.8rem;border:1px solid #E6D7B8;text-align:center}
.step-number{width:40px;height:40px;border-radius:50%;background:#2D5A27;color:#F9F3E5;font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}

/* === FAQ === */
.faq{padding:3rem 0 4rem;background:#FDFBF5}
.faq details{border-bottom:1px solid #E6D7B8;padding:1rem 0}
.faq summary{font-weight:600;font-size:1.05rem;cursor:pointer;color:#2D5A27;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:'+';font-size:1.4rem;font-weight:400;color:#A3B89A}
.faq details[open] summary::after{content:'−'}
.faq details p{margin-top:0.8rem;color:#4A6B3A;padding-left:0.5rem}

/* === FOOTER === */
.site-footer{background:#1B3A18;color:#E6D7B8;padding:1.5rem 0;margin-top:auto}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.8rem}
.site-footer nav{display:flex;gap:1.5rem}
.site-footer a{color:#D4C09A;font-size:0.9rem}
.site-footer a:hover{color:#F9F3E5}

/* === PRINT CARD (hidden on screen) === */
.print-card{display:none}

/* === RESPONSIVE === */
@media (max-width:768px){
  h1{font-size:1.9rem}
  .hero-stats{gap:1.5rem}
  .toolbar{flex-direction:column}
  .milestone-row{flex-direction:column;align-items:flex-start}
  .milestone-info{flex-direction:column;align-items:flex-start;gap:0.2rem}
  .summary-bar{flex-direction:column;gap:0.8rem}
  .steps{flex-direction:column}
  .site-footer .container{flex-direction:column;text-align:center}
}

@media (max-width:480px){
  .container{padding:0 1rem}
  .project-meta,.milestone-form{flex-direction:column}
  .field{min-width:100%}
}

/* === PRINT STYLES === */
@media print{
  body{background:#FFF;color:#000;font-size:12pt}
  .site-header,.hero,.how-it-works,.faq,.site-footer,.toolbar,.action-buttons,.milestone-actions,.summary-bar{display:none!important}
  .dashboard{background:#FFF;padding:0}
  .print-card{display:block!important;width:100%;padding:1cm}
  .print-header{text-align:center;margin-bottom:1.5cm}
  .print-table{width:100%;border-collapse:collapse;margin-bottom:1cm}
  .print-table th,.print-table td{border:1px solid #000;padding:8px;text-align:left}
  .print-table th{background:#EEE;font-weight:700}
  .print-summary{font-size:11pt;border-top:2px solid #000;padding-top:0.5cm}
}



/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.site-utility-links {
  width: min(900px, calc(100% - 32px));
  margin: 32px auto;
  padding-top: 16px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
  font-size: 0.9rem;
}

.site-utility-links a {
  color: inherit;
  opacity: 0.75;
}