*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--green-900:#1b4332;--green-800:#2d6a4f;--green-700:#40916c;--green-600:#52b788;--green-500:#74c69d;--green-300:#95d5b2;--green-100:#d8f3dc;--green-50:#f0faf4;--gray-900:#212529;--gray-700:#495057;--gray-500:#6c757d;--gray-300:#dee2e6;--gray-100:#f8f9fa;--white:#ffffff;--radius:12px;--radius-sm:8px;--shadow:0 2px 8px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.12);--font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--max-width:1120px}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--gray-900);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}
img,svg{max-width:100%;height:auto}
a{color:var(--green-800);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{background:var(--white);border-bottom:1px solid var(--gray-300);position:sticky;top:0;z-index:100}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.15rem;color:var(--gray-900)}
.logo:hover{text-decoration:none}
.logo-accent{color:var(--green-700)}
.main-nav{display:flex;gap:1.5rem;font-size:.9rem}
.main-nav a{color:var(--gray-700);font-weight:500}
.main-nav a:hover{color:var(--green-800)}
.hero-section{padding:3rem 0 2rem;text-align:center}
.hero-section h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;color:var(--green-900);line-height:1.2;margin-bottom:.75rem}
.hero-sub{font-size:1.05rem;color:var(--gray-700);max-width:600px;margin:0 auto}
.app-layout{display:grid;grid-template-columns:1fr 320px;gap:2rem;margin-bottom:3rem}
@media(max-width:860px){.app-layout{grid-template-columns:1fr}}
.ranker-panel{background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.panel-title{font-size:1.15rem;font-weight:700;color:var(--green-900);margin-bottom:1rem}
.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1.5rem}
@media(max-width:600px){.controls{grid-template-columns:1fr}}
.control-group{display:flex;flex-direction:column;gap:.35rem}
.control-label{font-size:.8rem;font-weight:600;color:var(--gray-700);text-transform:uppercase;letter-spacing:.03em}
.control-input{padding:.6rem .75rem;border:1px solid var(--gray-300);border-radius:var(--radius-sm);font-size:.9rem;font-family:var(--font);background:var(--white);color:var(--gray-900);transition:border-color .15s}
.control-input:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(82,183,136,.2)}
.results-area{min-height:200px}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1rem;color:var(--gray-500);text-align:center}
.empty-state p{font-size:.95rem}
.results-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}
.result-item{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start;padding:1rem;background:var(--green-50);border:1px solid var(--green-100);border-radius:var(--radius-sm);transition:box-shadow .15s}
.result-item:hover{box-shadow:var(--shadow)}
.result-rank{font-size:1.4rem;font-weight:800;color:var(--green-700);min-width:2rem;text-align:center;line-height:1.4}
.result-info h3{font-size:1rem;font-weight:600;color:var(--gray-900);margin-bottom:.2rem}
.result-meta{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.8rem;color:var(--gray-500)}
.result-meta span{display:inline-flex;align-items:center;gap:.2rem}
.result-note{font-size:.85rem;color:var(--gray-700);margin-top:.35rem;line-height:1.4}
.result-actions{display:flex;flex-direction:column;gap:.4rem;align-items:flex-end}
.cost-tier{display:inline-block;padding:.15rem .5rem;border-radius:20px;font-size:.75rem;font-weight:600}
.cost-free{background:var(--green-100);color:var(--green-800)}
.cost-low{background:#fff3cd;color:#856404}
.cost-mid{background:#ffe0b2;color:#e65100}
.cost-high{background:#ffcdd2;color:#b71c1c}
.style-tag{background:var(--gray-100);color:var(--gray-700);padding:.15rem .5rem;border-radius:20px;font-size:.75rem;font-weight:500}
.results-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--gray-300)}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;font-family:var(--font);cursor:pointer;border:1px solid transparent;transition:all .15s}
.btn-primary{background:var(--green-800);color:var(--white)}
.btn-primary:hover{background:var(--green-900);text-decoration:none}
.btn-secondary{background:var(--white);color:var(--gray-700);border-color:var(--gray-300)}
.btn-secondary:hover{background:var(--gray-100);border-color:var(--gray-500);text-decoration:none}
.btn-small{padding:.35rem .75rem;font-size:.8rem}
.btn-danger{color:#dc3545;border-color:#dc3545}
.btn-danger:hover{background:#dc3545;color:var(--white);text-decoration:none}
.context-panel{display:flex;flex-direction:column;gap:1.25rem}
.tip-card{background:var(--gray-100);border-radius:var(--radius-sm);padding:1rem}
.tip-card h3{font-size:.9rem;font-weight:700;color:var(--green-900);margin-bottom:.4rem}
.tip-card p{font-size:.85rem;color:var(--gray-700);line-height:1.5}
.saved-tip{background:var(--green-50);border:1px solid var(--green-100);border-radius:var(--radius-sm);padding:1rem}
.saved-trip h3{font-size:.9rem;font-weight:700;color:var(--green-900);margin-bottom:.5rem}
.saved-list{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin-bottom:.75rem}
.saved-list li{font-size:.85rem;padding:.4rem .6rem;background:var(--white);border-radius:6px;border:1px solid var(--green-100);display:flex;justify-content:space-between;align-items:center}
.saved-list li button{background:none;border:none;color:var(--gray-500);cursor:pointer;font-size:1rem;padding:0 .25rem;line-height:1}
.saved-list li button:hover{color:#dc3545}
.comparison-section,.add-experience-section,.guide-section,.assumptions-section{margin-bottom:3rem}
.comparison-section h2,.add-experience-section h2,.guide-section h2,.assumptions-section h2{font-size:1.4rem;font-weight:700;color:var(--green-900);margin-bottom:.5rem}
.section-intro{color:var(--gray-700);margin-bottom:1.25rem;font-size:.95rem}
.table-wrapper{overflow-x:auto;border:1px solid var(--gray-300);border-radius:var(--radius)}
.comparison-table{width:100%;border-collapse:collapse;font-size:.9rem}
.comparison-table th{background:var(--green-50);color:var(--green-900);font-weight:600;text-align:left;padding:.75rem 1rem;border-bottom:2px solid var(--green-100);white-space:nowrap}
.comparison-table td{padding:.7rem 1rem;border-bottom:1px solid var(--gray-300);color:var(--gray-700)}
.comparison-table tr:last-child td{border-bottom:none}
.comparison-table tr:hover td{background:var(--gray-100)}
.add-form{display:grid;gap:1rem;background:var(--gray-100);padding:1.5rem;border-radius:var(--radius);margin-bottom:1.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.custom-list{display:flex;flex-direction:column;gap:.5rem}
.custom-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--green-50);border:1px solid var(--green-100);border-radius:var(--radius-sm);font-size:.9rem}
.custom-item-info{display:flex;flex-direction:column;gap:.15rem}
.custom-item-name{font-weight:600;color:var(--gray-900)}
.custom-item-meta{font-size:.8rem;color:var(--gray-500)}
.custom-item button{background:none;border:none;color:var(--gray-500);cursor:pointer;font-size:1.1rem;padding:.25rem;line-height:1}
.custom-item button:hover{color:#dc3545}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:860px){.guide-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.guide-grid{grid-template-columns:1fr}}
.guide-card{background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius);padding:1.25rem}
.guide-card h3{font-size:.95rem;font-weight:700;color:var(--green-900);margin-bottom:.4rem}
.guide-card p{font-size:.875rem;color:var(--gray-700);line-height:1.55}
.assumptions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:1.5rem}
@media(max-width:860px){.assumptions-grid{grid-template-columns:1fr}}
.assumption-card{background:var(--gray-100);border-radius:var(--radius-sm);padding:1.25rem}
.assumption-card h3{font-size:.9rem;font-weight:700;color:var(--gray-900);margin-bottom:.35rem}
.assumption-card p{font-size:.85rem;color:var(--gray-700);line-height:1.5}
.last-updated{font-size:.8rem;color:var(--gray-500);text-align:right}
.site-footer{background:var(--green-900);color:var(--white);padding:2.5rem 0 1.5rem;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:1.5rem}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}
.footer-grid strong{display:block;font-size:.9rem;margin-bottom:.4rem}
.footer-grid p,.footer-grid a{font-size:.85rem;color:rgba(255,255,255,.75);display:block;margin-bottom:.25rem}
.footer-grid a:hover{color:var(--white)}
.footer-legal{font-size:.8rem;color:rgba(255,255,255,.5);text-align:center;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15)}
@media print{.site-header,.site-footer,.context-panel,.add-experience-section,.assumptions-section,.results-actions,.btn{display:none!important}.app-layout{grid-template-columns:1fr}.ranker-panel{box-shadow:none;border:none;padding:0}}
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--green-900);color:var(--white);padding:.75rem 1.25rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;box-shadow:var(--shadow-lg);z-index:200;opacity:0;transform:translateY(10px);transition:all .3s}
.toast.show{opacity:1;transform:translateY(0)}



/* 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;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}