
:root{
    --bg:#0f172a;
    --panel:#111827;
    --soft:#1f2937;
    --line:#334155;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --accent:#22c55e;
    --accent2:#16a34a;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:linear-gradient(180deg,#0b1220,#111827 30%,#0f172a);
    color:var(--text);
    line-height:1.55;
}
a{color:#c7f9d4;text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1180px,calc(100% - 32px));margin:0 auto}
.site-header{
    position:sticky;top:0;z-index:20;
    backdrop-filter: blur(12px);
    background:rgba(15,23,42,.88);
    border-bottom:1px solid rgba(148,163,184,.15);
}
.topbar{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:14px 0}
.logo{font-weight:700;font-size:1.15rem;color:white}
.main-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.main-nav a{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.03)}
.hero{
    display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:center;
    padding:28px;margin:28px 0;border:1px solid rgba(148,163,184,.14);border-radius:24px;
    background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(34,197,94,.02)),var(--panel);
    box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.hero-calc{grid-template-columns:1fr}
.hero h1{margin:0 0 10px;font-size:2rem}
.hero p{margin:0;color:var(--muted)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.12);text-align:center}
.stat strong{display:block;font-size:1.5rem}
.stat span{color:var(--muted);font-size:.9rem}
.grid{display:grid;gap:20px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:24px}
.calc-grid{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:start}
.card{
    background:rgba(17,24,39,.92);
    border:1px solid rgba(148,163,184,.14);
    border-radius:24px;
    padding:22px;
    box-shadow:0 16px 40px rgba(0,0,0,.14);
}
.card h2,.card h3{margin-top:0}
.category-card .mini-list{padding-left:18px;color:var(--muted)}
.button,button{
    display:inline-flex;align-items:center;justify-content:center;
    border:none;border-radius:14px;padding:11px 16px;font-weight:700;
    background:linear-gradient(180deg,var(--accent),var(--accent2));color:white;
    cursor:pointer;text-decoration:none
}
.button.secondary{background:#374151}
.calc-form{display:grid;gap:14px}
.field{display:grid;gap:7px}
.field span{font-weight:700}
input,select,textarea{
    width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
    background:#0b1220;color:var(--text);font:inherit
}
input[type="checkbox"]{width:auto;transform:scale(1.2);margin-top:6px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.result-box{
    padding:16px;border-radius:18px;background:rgba(34,197,94,.08);
    border:1px solid rgba(34,197,94,.24)
}
.result-box ul{padding-left:18px;margin:0}
.result-box p{margin:.4rem 0}
.breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);margin-top:24px}
.tag-list{display:flex;flex-wrap:wrap;gap:10px}
.tag{
    display:inline-flex;padding:8px 12px;border-radius:999px;
    background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.14)
}
.site-footer{
    margin-top:40px;padding:28px 0;border-top:1px solid rgba(148,163,184,.14);color:var(--muted)
}
hr{border:none;border-top:1px solid rgba(148,163,184,.14);margin:20px 0}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:10px;border-bottom:1px solid rgba(148,163,184,.14);text-align:left;white-space:nowrap}
th{color:#d1fae5}
.codebox{
    background:#0b1220;border:1px solid var(--line);padding:14px;border-radius:14px;
    word-break:break-word
}
.muted{color:var(--muted)}
.all-tools h3{margin-top:26px}
.note-card code{background:#0b1220;padding:2px 6px;border-radius:6px}
@media (max-width:900px){
    .hero,.calc-grid{grid-template-columns:1fr}
    .main-nav{display:none}
}
