/* ============================================================
   CalculatorHub — main.css
   ============================================================ */
:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-2: #64748b;
  --text-3: #94a3b8;
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #eff6ff;
  --success: #10b981;
  --success-light: #ecfdf5;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --danger: #ef4444;
  --danger-light: #fef2f2;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09);
}
#calcRoot.dark {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-2: #0f172a;
  --border: #334155;
  --text: #f1f5f9;
  --text-2: #94a3b8;
  --text-3: #64748b;
  --primary-light: rgba(59,130,246,.13);
  --success-light: rgba(16,185,129,.13);
  --warning-light: rgba(245,158,11,.13);
  --danger-light: rgba(239,68,68,.13);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}

/* ── Nav ── */
.calc-nav{background:var(--surface);border-bottom:1px solid var(--border);padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.calc-nav__brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:1.1rem;color:var(--text);letter-spacing:-.02em}
.calc-nav__brand span{color:var(--primary)}
.calc-nav__controls{display:flex;align-items:center;gap:8px}

.calc-theme-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;color:var(--text);transition:background .15s}
.calc-theme-btn:hover{background:var(--border)}

.calc-lang{position:relative}
.calc-lang-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:0 10px;height:36px;display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--text);transition:background .15s}
.calc-lang-btn:hover{background:var(--border)}
.calc-lang-btn img{border-radius:2px}
.calc-lang-chevron{transition:transform .2s}
.calc-lang.open .calc-lang-chevron{transform:rotate(180deg)}
.calc-lang-menu{display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);min-width:150px;overflow:hidden;z-index:200}
.calc-lang.open .calc-lang-menu{display:block}
.calc-lang-option{display:flex;align-items:center;gap:8px;padding:8px 12px;text-decoration:none;color:var(--text);font-size:.9rem;transition:background .1s}
.calc-lang-option:hover,.calc-lang-option.active{background:var(--primary-light);color:var(--primary)}
.calc-lang-option img{border-radius:2px}

/* ── Hero (homepage) ── */
.calc-hero{text-align:center;padding:52px 20px 36px;max-width:640px;margin:0 auto}
.calc-hero h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.calc-hero p{color:var(--text-2);font-size:1.05rem;line-height:1.7}

/* ── Grid (homepage) ── */
.calc-section{max-width:1100px;margin:0 auto;padding:0 20px 60px;width:100%}
.calc-category-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin:32px 0 12px}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.calc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:5px;transition:box-shadow .15s,border-color .15s,transform .1s}
.calc-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary);transform:translateY(-2px)}
.calc-card__icon{font-size:1.9rem;margin-bottom:4px}
.calc-card__name{font-weight:700;font-size:1rem}
.calc-card__desc{font-size:.84rem;color:var(--text-2);line-height:1.4}
.calc-card__cta{margin-top:8px;font-size:.8rem;font-weight:700;color:var(--primary)}

/* ── Calculator page ── */
.calc-page-wrap{max-width:680px;margin:0 auto;padding:32px 20px 64px;width:100%;flex:1}
.calc-breadcrumb{font-size:.8rem;color:var(--text-2);margin-bottom:20px;display:flex;align-items:center;gap:6px}
.calc-breadcrumb a{color:var(--primary);text-decoration:none}
.calc-breadcrumb a:hover{text-decoration:underline}
.calc-breadcrumb .sep{color:var(--text-3)}
.calc-page-wrap h1{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.calc-lead{color:var(--text-2);font-size:.95rem;margin-bottom:24px;line-height:1.65}

/* ── Widget ── */
.calc-widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px}

/* Tabs */
.calc-tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;margin-bottom:18px}
.calc-tab{flex:1;padding:8px;border:none;background:transparent;border-radius:6px;font-size:.82rem;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .15s}
.calc-tab.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow)}

/* Fields */
.calc-field{margin-bottom:16px}
.calc-field label{display:block;font-size:.85rem;font-weight:600;color:var(--text-2);margin-bottom:6px}
.calc-input,.calc-select{width:100%;height:44px;padding:0 12px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;transition:border-color .15s,box-shadow .15s;font-family:inherit}
.calc-input:focus,.calc-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.calc-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.calc-input-wrap{position:relative}
.calc-input-wrap .calc-input{padding-right:52px}
.calc-unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.85rem;color:var(--text-2);font-weight:600;pointer-events:none}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Buttons */
.calc-btn{width:100%;height:48px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:700;cursor:pointer;transition:background .15s,transform .1s;font-family:inherit;margin-top:4px}
.calc-btn:hover{background:var(--primary-dark)}
.calc-btn:active{transform:scale(.99)}
.calc-btn-sm{background:transparent;color:var(--text-2);border:1.5px solid var(--border);height:36px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;cursor:pointer;padding:0 14px;font-family:inherit;transition:all .15s}
.calc-btn-sm:hover{border-color:var(--primary);color:var(--primary)}

/* Results */
.calc-result{margin-top:20px;padding:18px;background:var(--primary-light);border:1.5px solid var(--primary);border-radius:var(--radius-sm);display:none}
.calc-result.show{display:block}
.calc-result__label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin-bottom:4px}
.calc-result__value{font-size:2.2rem;font-weight:800;color:var(--text);line-height:1.15}
.calc-result__sub{font-size:.875rem;color:var(--text-2);margin-top:6px}

.calc-grid-results{display:none;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:18px}
.calc-grid-results.show{display:grid}
.cgr-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;text-align:center}
.cgr-item.hi{background:var(--primary-light);border-color:var(--primary)}
.cgr-label{font-size:.72rem;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.cgr-value{font-size:1.25rem;font-weight:800;color:var(--text)}
.cgr-item.hi .cgr-value{color:var(--primary)}

/* BMI bar */
.bmi-gauge{margin-top:16px;display:none}
.bmi-gauge.show{display:block}
.bmi-bar{height:10px;border-radius:10px;background:linear-gradient(to right,#60a5fa 0%,#34d399 22%,#fbbf24 45%,#f87171 70%);position:relative;margin-bottom:8px}
.bmi-needle{position:absolute;top:-5px;width:4px;height:20px;background:var(--text);border-radius:2px;transform:translateX(-50%);transition:left .5s cubic-bezier(.34,1.56,.64,1)}
.bmi-labels{display:flex;justify-content:space-between;font-size:.68rem;color:var(--text-2)}

/* Converter swap */
.conv-row{display:grid;grid-template-columns:1fr 38px 1fr;gap:8px;align-items:end}
.conv-swap{width:38px;height:44px;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;transition:all .15s;color:var(--text-2)}
.conv-swap:hover{border-color:var(--primary);color:var(--primary)}

/* Error */
.calc-error{display:none;padding:10px 14px;background:var(--danger-light);border:1px solid var(--danger);border-radius:var(--radius-sm);color:var(--danger);font-size:.875rem;margin-top:10px;font-weight:600}
.calc-error.show{display:block}

/* Loan table */
.loan-table-wrap{overflow-x:auto;margin-top:16px;border:1px solid var(--border);border-radius:var(--radius-sm);display:none}
.loan-table-wrap.show{display:block}
.loan-table{width:100%;border-collapse:collapse;font-size:.82rem}
.loan-table th{background:var(--surface-2);padding:10px 12px;text-align:left;font-weight:700;color:var(--text-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}
.loan-table td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text)}
.loan-table tr:last-child td{border-bottom:none}
.loan-table tr:hover td{background:var(--surface-2)}

/* ── Info / FAQ ── */
.calc-info,.calc-faq,.calc-related{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.calc-info h2,.calc-faq h2{font-size:1.05rem;font-weight:700;margin-bottom:12px}
.calc-info p{font-size:.9rem;color:var(--text-2);margin-bottom:10px;line-height:1.7}
.calc-info p:last-child{margin-bottom:0}
.calc-formula{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;font-family:'SF Mono',Consolas,monospace;font-size:.88rem;color:var(--primary);margin:12px 0}
.faq-item{border-bottom:1px solid var(--border);padding:14px 0}
.faq-item:first-child{padding-top:0}
.faq-item:last-child{border-bottom:none;padding-bottom:0}
.faq-q{font-size:.9rem;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;user-select:none}
.faq-q svg{flex-shrink:0;transition:transform .2s;color:var(--text-2);margin-top:2px}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{display:none;font-size:.875rem;color:var(--text-2);margin-top:8px;line-height:1.7}
.faq-item.open .faq-a{display:block}
.calc-related h3{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);margin-bottom:12px}
.related-links{display:flex;flex-wrap:wrap;gap:8px}
.related-link{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:.84rem;font-weight:600;color:var(--text);text-decoration:none;transition:all .15s}
.related-link:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}

/* ── Footer ── */
.calc-footer{background:var(--surface);border-top:1px solid var(--border);padding:20px;text-align:center;font-size:.8rem;color:var(--text-2);margin-top:auto}
.calc-footer a{color:var(--primary);text-decoration:none}
.calc-footer a:hover{text-decoration:underline}
.calc-footer p+p{margin-top:6px}

/* ── Responsive ── */
@media(max-width:640px){
  .calc-nav{padding:0 14px}
  .calc-hero{padding:36px 16px 28px}
  .calc-section{padding:0 16px 48px}
  .calc-page-wrap{padding:24px 16px 48px}
  .calc-widget,.calc-info,.calc-faq,.calc-related{padding:18px}
  .calc-info{overflow-x:auto}
  .calc-row{grid-template-columns:1fr}
  .calc-result__value{font-size:1.8rem}
  .conv-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .conv-swap{display:none}
  .calc-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* ── Base converter ── */
.base-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.base-badge{display:inline-block;font-size:.68rem;font-weight:700;background:var(--primary-light);color:var(--primary);border:1px solid var(--primary);border-radius:10px;padding:1px 7px;vertical-align:middle;margin-left:6px}
.base-in{font-family:'SF Mono',Consolas,monospace;letter-spacing:.04em}
.base-table{width:100%;border-collapse:collapse;font-size:.85rem;margin:12px 0}
.base-table th{background:var(--surface-2);padding:9px 12px;text-align:left;font-weight:700;color:var(--text-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}
.base-table td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text)}
.base-table tr:last-child td{border-bottom:none}
.base-table tr:hover td{background:var(--surface-2)}
@media(max-width:480px){.base-grid{grid-template-columns:1fr}}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}