:root{
  --bg:#f7fafc;--card:#ffffff;--text:#0f172a;--muted:#64748b;
  --primary:#2563eb;--primary-weak:#e6efff;--border:#e2e8f0;--shadow:0 10px 25px rgba(2,6,23,.06)
}
:root.dark{
  --bg:#0b1220;--card:#0f172a;--text:#e5edf9;--muted:#94a3b8;
  --primary:#60a5fa;--primary-weak:#0b2548;--border:#1f2a44;--shadow:0 10px 25px rgba(0,0,0,.4)
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:24px}
header{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--border);z-index:40;backdrop-filter:saturate(180%) blur(8px)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:12px 24px}
.logo{font-weight:800;letter-spacing:.2px}.logo b{color:var(--primary)}
nav a{padding:8px 12px;border-radius:12px;color:var(--text)}nav a:hover{background:var(--primary-weak)}
.hero{background:linear-gradient(180deg,var(--card),rgba(37,99,235,.06));padding:42px 24px}
.hero h1{font-size:40px;margin:0 0 8px}
.hero p{margin:8px 0 16px;color:var(--muted)}
.searchbar{position:relative;display:flex;gap:8px;max-width:720px}
.searchbar input{flex:1;padding:14px;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);outline:none;background:var(--card);color:var(--text)}
.searchbar button{padding:14px 18px;border:none;background:var(--primary);color:#fff;border-radius:14px;font-weight:700;cursor:pointer}
.suggestions{position:absolute;top:54px;left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:12px;max-height:260px;overflow:auto;display:none}
.suggestions a{display:block;padding:10px 12px;color:var(--text)}.suggestions a:hover{background:var(--primary-weak)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}.note{color:var(--muted);font-size:14px}
.tool-btn{display:inline-block;margin-top:10px;padding:10px 12px;background:var(--primary);color:#fff;border-radius:12px;font-weight:700}
.section{padding:26px 24px}.section h2{margin:0 0 10px}
footer{margin-top:36px;background:#0f172a;color:#cbd5e1}
.footergrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
footer .container{padding:28px}.footergrid a{color:#cbd5e1}
.ad{border:1px dashed var(--border);background:var(--card);border-radius:14px;padding:16px;color:var(--muted);text-align:center}
.breadcrumbs{font-size:14px;margin-bottom:8px;color:var(--muted)}
.calc-form{display:grid;gap:12px;margin-top:10px}.calc-form label{font-weight:600}
.calc-form input,.calc-form select{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text)}
button{cursor:pointer}
.result{margin-top:10px;padding:12px;background:rgba(2,6,23,.04);border:1px solid var(--border);border-radius:12px;font-weight:700}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{border:1px solid var(--border);padding:8px;text-align:left}
.lead{font-size:18px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-size:12px;color:var(--muted)}
.mode{cursor:pointer;border:1px solid var(--border);background:var(--card);padding:8px 12px;border-radius:10px}
.flag{font-size:18px;margin-right:6px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.kpis .card{padding:12px;text-align:center}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:30px}.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}.searchbar{flex-direction:column}.kpis{grid-template-columns:1fr}}