/* ---------- 1. Design tokens ---------- */
:root {
  --bg-primary: #050f0a;
  --bg-secondary: #0a1a10;
  --bg-card: #0d2018;
  --bg-card-hover: #123023;

  --green-primary: #00e676;
  --green-secondary: #00c853;
  --green-dim: #1a4d35;
  --green-glow: rgba(0, 230, 118, 0.12);

  --text-primary: #e8f5e9;
  --text-secondary: #81c784;
  --text-muted: #4caf50;

  --btn-text: #04140b;
  --header-bg: rgba(5, 15, 10, 0.88);

  --border: rgba(0, 230, 118, 0.18);
  --shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);

  --white: #ffffff;
  --danger: #ff5252;
  --star: #ffc107;

  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --container-w: 1200px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s ease;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

[data-theme="light"] {
  --bg-primary: #f5faf7;
  --bg-secondary: #eaf4ee;
  --bg-card: #ffffff;
  --bg-card-hover: #f2f9f4;

  --green-primary: #00a152;
  --green-secondary: #008f47;
  --green-dim: #d7ecdf;
  --green-glow: rgba(0, 200, 83, 0.10);

  --text-primary: #0d2018;
  --text-secondary: #1a4d35;
  --text-muted: #2e7d52;

  --btn-text: #ffffff;
  --header-bg: rgba(245, 250, 247, 0.9);

  --border: rgba(0, 180, 90, 0.2);
  --shadow: 0 4px 30px rgba(13, 32, 24, 0.08);
  --shadow-sm: 0 2px 8px rgba(13, 32, 24, 0.06);
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--green-primary);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--container-w);margin:0 auto;padding:0 var(--space-5)}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--green-primary);outline-offset:2px}
.muted{color:var(--text-secondary);font-size:.9rem}

/* ---------- 3. Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.h-row{display:flex;align-items:center;gap:var(--space-5);height:68px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.15rem;color:var(--text-primary)}
.logo:hover{text-decoration:none}
.logo em{font-style:normal;color:var(--green-primary)}
.main-nav{display:flex;gap:var(--space-5);margin-left:auto}
.main-nav a{color:var(--text-secondary);font-size:.95rem;font-weight:500;transition:color var(--transition-fast)}
.main-nav a:hover{color:var(--green-primary);text-decoration:none}
.h-actions{display:flex;gap:var(--space-2)}
.icon-btn{width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-card);color:var(--green-primary);cursor:pointer;display:grid;place-items:center;transition:background var(--transition)}
.icon-btn:hover{background:var(--bg-card-hover)}
.i-sun{display:none}[data-theme="light"] .i-sun{display:block}[data-theme="light"] .i-moon{display:none}
.menu-btn{display:none;flex-direction:column;gap:4px;align-content:center}
.menu-btn span{display:block;width:16px;height:2px;background:currentColor;border-radius:2px}

/* ---------- 4. Hero ---------- */
.hero{padding:var(--space-8) 0 var(--space-7);text-align:center;background:radial-gradient(ellipse at 50% 0%,var(--green-glow),transparent 65%),var(--bg-secondary);border-bottom:1px solid var(--border)}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);font-weight:900;margin:var(--space-4) 0}
.hero h1 em{font-style:normal;color:var(--green-primary)}
.hero p{max-width:760px;margin:0 auto;color:var(--text-secondary);font-size:1.1rem}
.chip{display:inline-block;padding:6px 16px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--green-glow);color:var(--green-primary);font-size:.85rem;font-weight:600}

/* ---------- 5. Tool ---------- */
.tool{margin-top:calc(var(--space-6)*-1 + var(--space-5));position:relative;padding-bottom:var(--space-6)}
.tool-grid{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:var(--space-5);align-items:start;padding-top:var(--space-6)}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.card-title{font-size:1.3rem;margin-bottom:var(--space-4)}
.form-card{position:sticky;top:84px}
.form-card label{display:block;font-weight:700;font-size:.92rem;margin-bottom:var(--space-4)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
input[type=number]{width:100%;margin-top:6px;padding:12px 14px;font:inherit;font-weight:500;color:var(--text-primary);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
input[type=number]:focus{outline:0;border-color:var(--green-primary);box-shadow:0 0 0 3px var(--green-glow)}
.money{position:relative}
.money span{position:absolute;left:14px;top:calc(50% + 3px);transform:translateY(-50%);color:var(--text-secondary)}
.money span.r{left:auto;right:14px}
.money input{padding-left:30px}
.money input:has(+ .r){padding-left:14px;padding-right:32px}
small{display:block;margin-top:6px;font-weight:400;font-size:.78rem;color:var(--text-secondary);line-height:1.4}
small.mt{margin:-6px 0 var(--space-4)}
.quick{display:flex;gap:var(--space-2);margin:-6px 0 var(--space-4)}
.quick button{flex:1;padding:8px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--green-glow);color:var(--green-primary);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;transition:background var(--transition-fast)}
.quick button:hover{background:var(--green-dim)}
.btn{width:100%;padding:14px 20px;border:0;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--green-primary),var(--green-secondary));color:var(--btn-text);font:inherit;font-weight:800;font-size:1rem;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px var(--green-glow)}
.btn.sm{width:auto;flex:1;padding:12px 16px;font-size:.92rem}
.btn.ghost{background:transparent;color:var(--green-primary);border:1px solid var(--green-primary)}
.err{color:var(--danger);font-size:.85rem;margin-bottom:var(--space-3);font-weight:600}

/* Result card (this exact look is exported to PNG/PDF) */
.res-col{display:grid;gap:var(--space-5);min-width:0}
.result-card{padding:var(--space-6);background:linear-gradient(160deg,var(--bg-card),var(--bg-secondary))}
.r-top{text-align:center;padding:var(--space-5) var(--space-4);border:2px solid var(--green-primary);border-radius:var(--radius-lg);background:var(--green-glow)}
.r-label{display:block;font-size:.95rem;color:var(--text-secondary);font-weight:600}
.r-big{font-size:clamp(2.4rem,7vw,4rem);font-weight:900;color:var(--green-primary);line-height:1.1;margin:var(--space-2) 0;word-break:break-word}
.r-assume{font-size:.8rem;color:var(--text-secondary)}
.r-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-5);text-align:center}
.r-two span{display:block;font-size:.82rem;color:var(--text-secondary);font-weight:600}
.r-two b{font-size:clamp(1.3rem,3.5vw,1.9rem);font-weight:900;word-break:break-word}
.r-sub div{padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm)}
.r-sub b{color:var(--green-primary);font-size:clamp(1.1rem,3vw,1.5rem)}
.split{display:flex;height:14px;border-radius:var(--radius-pill);overflow:hidden;margin-top:var(--space-4);background:var(--green-dim)}
.split i{display:block;height:100%}
#bar-in{background:var(--text-secondary)}#bar-gr{background:var(--green-primary)}
.split-key,.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);font-size:.78rem;color:var(--text-secondary);margin-top:var(--space-2)}
.split-key i,.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.k1,.l2{background:var(--text-secondary)}.k2,.l1{background:var(--green-primary)}.l3{background:var(--star)}
.chart-box{margin-top:var(--space-5);padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm)}
#chart{display:block;width:100%;height:260px}
.r-foot{font-size:.74rem;color:var(--text-secondary);margin-top:var(--space-4);text-align:center}
.dl-card h3{margin-bottom:var(--space-4)}
.dl-btns{display:flex;gap:var(--space-3);flex-wrap:wrap}
.dl-card .muted{margin-top:var(--space-3)}

/* ---------- 6. Sections ---------- */
.block{padding:var(--space-7) var(--space-5)}
.block>h2{font-size:clamp(1.6rem,4vw,2.3rem);margin-bottom:var(--space-3)}
.lead{color:var(--text-secondary);margin-bottom:var(--space-5);max-width:720px}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-4)}
.how-grid .card{transition:background var(--transition)}
.how-grid .card:hover{background:var(--bg-card-hover)}
.how-grid h3{font-size:1.05rem;color:var(--green-primary);margin-bottom:var(--space-2)}
.how-grid p{font-size:.93rem;color:var(--text-secondary)}
.article{max-width:860px}
.article h3{font-size:1.3rem;margin:var(--space-6) 0 var(--space-2);color:var(--green-primary)}
.article p{color:var(--text-primary);opacity:.92;margin-bottom:var(--space-3);max-width:75ch}
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;font-weight:700;color:var(--text-primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--green-primary);flex:none}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{color:var(--green-primary)}
.faq details p{padding:0 0 var(--space-4);color:var(--text-secondary)}

/* ---------- 7. Footer ---------- */
.site-footer{margin-top:var(--space-7);background:var(--bg-secondary);border-top:1px solid var(--border);padding:var(--space-7) 0 var(--space-5)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--space-6)}
.f-grid p{color:var(--text-secondary);font-size:.9rem;margin-top:var(--space-3)}
.f-col h4{margin-bottom:var(--space-3);font-size:1rem}
.f-col ul{list-style:none;display:grid;gap:var(--space-2)}
.f-col a{color:var(--text-secondary);font-size:.9rem}.f-col a:hover{color:var(--green-primary)}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border);font-size:.85rem;color:var(--text-secondary)}
.f-links{display:flex;gap:var(--space-4)}.f-links a{color:var(--text-secondary)}
.f-note{margin-top:var(--space-4);font-size:.78rem;color:var(--text-muted)}

/* ---------- 8. Export clone ---------- */
.export-stage{position:fixed;left:-99999px;top:0;width:760px;padding:28px;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans)}
.export-stage .result-card{box-shadow:none}
.export-credit{margin-top:18px;text-align:center;font-size:13px;color:var(--text-secondary);line-height:1.8}
.export-credit a{color:var(--green-primary);font-weight:700}

/* ---------- 9. Responsive ---------- */
@media(max-width:900px){
  .tool-grid{grid-template-columns:1fr}.form-card{position:static}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .menu-btn{display:grid}
  .main-nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:var(--space-2) var(--space-5)}
  .nav-open .main-nav{display:flex}
  .main-nav a{padding:12px 0;border-bottom:1px solid var(--border)}
  .h-actions{margin-left:auto}
}
@media(max-width:560px){
  .f-grid{grid-template-columns:1fr}.hero{padding:var(--space-7) 0 var(--space-6)}
  .result-card{padding:var(--space-4)}.row2{gap:var(--space-2)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- 10. Inner pages ---------- */
.page-hero{padding:var(--space-7) 0 var(--space-6)}
.page-hero h1{font-size:clamp(2rem,5vw,3rem)}
.page-hero p{font-size:1rem}
.prose{max-width:860px;padding-top:var(--space-7);padding-bottom:var(--space-5)}
.prose h2{font-size:1.5rem;margin:var(--space-6) 0 var(--space-3);color:var(--green-primary)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;margin:var(--space-5) 0 var(--space-2)}
.prose p,.prose li{color:var(--text-primary);opacity:.92;margin-bottom:var(--space-3);max-width:75ch}
.prose ul{padding-left:var(--space-5);margin-bottom:var(--space-3)}
.prose a{word-break:break-word}
.about-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4);margin:var(--space-5) 0}
.about-stats .card{text-align:center}
.about-stats b{display:block;font-size:1.6rem;color:var(--green-primary)}
.about-stats span{font-size:.85rem;color:var(--text-secondary)}
.contact-card{text-align:center;padding:var(--space-7) var(--space-5);margin:var(--space-5) 0}
.contact-card .mail{display:inline-block;margin:var(--space-3) 0;font-size:clamp(1.2rem,4vw,1.8rem);font-weight:800;word-break:break-all}
.page-note{padding:var(--space-4);border:1px solid var(--border);border-left:4px solid var(--green-primary);border-radius:var(--radius-sm);background:var(--green-glow);margin:var(--space-5) 0}