@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-soft:#f8f9fc;
  --text:#111827;
  --muted:#6b7280;
  --primary:#0a84ff;
  --primary-dark:#0066cc;
  --border:rgba(15,23,42,.08);
  --shadow:0 8px 30px rgba(15,23,42,.06);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', sans-serif; background: #f0f0f2; min-height: 100vh; padding: 24px 32px 48px; }
.logo { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; text-decoration: none; }
.logo-text { font-size: 17px; font-weight: 600; color: #1a1a2e; letter-spacing: -0.3px; }
.logo-text .accent { color: #3b7cf4; }
.back { font-size: 13px; color: #888; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; }
.back:hover { color: #3b7cf4; }
h1 { font-size: 22px; font-weight: 600; color: #1a1a2e; margin-bottom: 6px; }
.subtitle { font-size: 14px; color: #888; margin-bottom: 28px; }
.card { background: #fff; border-radius: 18px; padding: 24px; margin-bottom: 14px; border: 0.5px solid rgba(0,0,0,0.07); }
.card-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: #aaa; text-transform: uppercase; margin-bottom: 14px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.input-wrap { flex: 1; min-width: 100px; }
.input-label { font-size: 12px; color: #999; margin-bottom: 4px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #e8f1ff 0%, transparent 55%), var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding: 24px 32px 48px;
  max-width: 980px;
  margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; text-decoration: none; }
.logo-text { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
.logo-text .accent { color: var(--primary); }
.back { font-size: 13px; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; }
.back:hover { color: var(--primary); }
h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; color: var(--text); margin-bottom: 8px; }
.subtitle { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.card {
  background: var(--surface);
  backdrop-filter: saturate(1.02);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #9aa3b2; text-transform: uppercase; margin-bottom: 14px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.input-wrap { flex: 1; min-width: 110px; }
.input-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
input[type="number"], input[type="text"], select, textarea {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #e5e5e5;
  font-size: 16px; font-weight: 500; font-family: inherit; color: #1a1a2e;
  background: #fafafa; outline: none; transition: border-color 0.15s;
  width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid #dbe1ea;
  font-size: 15px; font-weight: 500; font-family: inherit; color: var(--text);
  background: var(--surface-soft); outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus { border-color: #3b7cf4; background: #fff; }
.results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.result { background: #f7f8fc; border-radius: 12px; padding: 14px 16px; }
.result.accent { background: #eef3ff; }
.result-unit { font-size: 12px; color: #999; margin-bottom: 4px; }
.result-val { font-size: 20px; font-weight: 600; color: #1a1a2e; }
.result.accent .result-val { color: #3b7cf4; }
.result-val small { font-size: 13px; font-weight: 500; color: #888; margin-left: 2px; }
input:focus, select:focus, textarea:focus { border-color: #95c3ff; background: #fff; box-shadow: 0 0 0 4px rgba(10,132,255,.14); }
.results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.result { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.result.accent { background: #edf5ff; }
.result-unit { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.result-val { font-size: 21px; font-weight: 700; color: var(--text); }
.result.accent .result-val { color: var(--primary); }
.result-val small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px;
  border-radius: 10px; border: none; background: #3b7cf4; color: #fff;
  font-size: 15px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s; }
.btn:hover { background: #2563d4; }
.btn.secondary { background: #f0f0f2; color: #1a1a2e; }
.btn.secondary:hover { background: #e0e0e2; }
hr { border: none; border-top: 0.5px solid #ebebeb; margin: 16px 0; }
@media (max-width: 500px) { body { padding: 16px; } .results { grid-template-columns: 1fr; } }
  border-radius: 12px; border: none; background: var(--primary); color: #fff;
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: #e9eef5; color: var(--text); }
.btn.secondary:hover { background: #dce4ef; }
hr { border: none; border-top: 1px solid #e9edf3; margin: 16px 0; }
.card:hover{box-shadow:0 14px 34px rgba(15,23,42,.1)}
@media (max-width: 500px) { body { padding: 16px; } h1{font-size:26px;} .results { grid-template-columns: 1fr; } }

.site-footer{margin-top:18px;font-size:13px;color:var(--muted);text-align:center;}
.site-footer a{color:var(--primary);text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}

.breadcrumb{font-size:12px;color:var(--muted);margin:-8px 0 10px;}
.breadcrumb a{color:var(--primary);text-decoration:none;}
.breadcrumb span{margin:0 4px;}