/* ===================================================
   Percentage Calculator v3 – style.css  |  Ultra Modern Redesign
   =================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── Design Tokens ─── */
:root{
  /* Core Palette – Deep Space */
  --bg:        #08080f;
  --bg2:       #0d0d1a;
  --surface:   rgba(255,255,255,0.035);
  --surface2:  rgba(255,255,255,0.06);
  --surface3:  rgba(255,255,255,0.1);
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.13);
  --border3:   rgba(255,255,255,0.22);

  /* Text */
  --text:  #eeeeff;
  --text2: #8888bb;
  --text3: #4f4f7a;

  /* Brand Colors */
  --indigo:   #6366f1;
  --indigo-l: #818cf8;
  --indigo-d: #4338ca;
  --violet:   #8b5cf6;
  --violet-l: #a78bfa;
  --violet-d: #6d28d9;
  --cyan:     #06b6d4;
  --cyan-l:   #22d3ee;
  --cyan-d:   #0891b2;
  --emerald:  #10b981;
  --emerald-d:#059669;
  --amber:    #f59e0b;
  --amber-d:  #d97706;
  --rose:     #f43f5e;
  --rose-d:   #e11d48;
  --fuchsia:  #d946ef;
  --fuchsia-d:#a21caf;

  /* Gradient Accents */
  --grad-main:   linear-gradient(135deg, #6366f1, #8b5cf6, #d946ef);
  --grad-cyan:   linear-gradient(135deg, #06b6d4, #6366f1);
  --grad-green:  linear-gradient(135deg, #10b981, #06b6d4);
  --grad-amber:  linear-gradient(135deg, #f59e0b, #f43f5e);
  --grad-rose:   linear-gradient(135deg, #f43f5e, #d946ef);

  /* Radii */
  --r-sm:   8px;
  --r:      14px;
  --r-lg:   20px;
  --r-xl:   28px;

  /* Shadow */
  --shadow:    0 8px 40px rgba(0,0,0,0.5);
  --shadow-sm: 0 2px 16px rgba(0,0,0,0.3);
  --glow-p:    0 0 32px rgba(99,102,241,0.3);
  --glow-c:    0 0 32px rgba(6,182,212,0.3);
  --glow-g:    0 0 32px rgba(16,185,129,0.3);

  --font: 'Plus Jakarta Sans','Inter','Noto Sans Khmer',system-ui,sans-serif;
  --tr:   0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Light Mode ─── */
body.light{
  --bg:#f5f5ff; --bg2:#eeeeff; --surface:rgba(255,255,255,0.7); --surface2:rgba(255,255,255,0.9); --surface3:rgba(255,255,255,1);
  --border:rgba(0,0,0,0.06); --border2:rgba(0,0,0,0.1); --border3:rgba(0,0,0,0.18);
  --text:#0e0e20; --text2:#44447a; --text3:#8888b8;
  --shadow: 0 8px 40px rgba(0,0,0,0.12);
  --glow-p: 0 4px 24px rgba(99,102,241,0.2);
}

/* ─── Base ─── */
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ─── Animated Background ─── */
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(100px);animation:orbF 18s ease-in-out infinite alternate}
.orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(99,102,241,.25) 0%,transparent 70%);top:-200px;left:-150px}
.orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(6,182,212,.18) 0%,transparent 70%);bottom:5%;right:-120px;animation-delay:5s}
.orb-3{width:400px;height:400px;background:radial-gradient(circle,rgba(217,70,239,.18) 0%,transparent 70%);bottom:-100px;left:40%;animation-delay:10s}
@keyframes orbF{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,50px) scale(1.1)}}
body.light .orb-1{background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%)}
body.light .orb-2{background:radial-gradient(circle,rgba(6,182,212,.09) 0%,transparent 70%)}
body.light .orb-3{background:radial-gradient(circle,rgba(217,70,239,.09) 0%,transparent 70%)}

/* ─── Navbar ─── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  background:rgba(8,8,15,.75);
  border-bottom:1px solid var(--border);
  transition:background var(--tr);
}
body.light .navbar{background:rgba(245,245,255,.8);border-bottom-color:rgba(0,0,0,0.08)}
.nav-container{max-width:1000px;margin:0 auto;padding:0 1.5rem;height:62px;display:flex;align-items:center;gap:1rem}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo-icon{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;
  background:var(--grad-main);box-shadow:0 4px 16px rgba(99,102,241,.4);
  flex-shrink:0;
}
.logo-icon.small{width:28px;height:28px;border-radius:8px}
.logo-text{font-weight:800;font-size:.95rem;letter-spacing:-.025em;white-space:nowrap;
  background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Nav Links */
.nav-links{list-style:none;display:flex;gap:2px;margin-left:auto}
.nav-link{
  text-decoration:none;color:var(--text2);font-size:.85rem;font-weight:600;
  padding:.4rem 1rem;border-radius:var(--r-sm);transition:all var(--tr);
}
.nav-link:hover{background:var(--surface2);color:var(--text)}
.nav-link.active{
  background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(139,92,246,.12));
  color:var(--indigo-l);
  border:1px solid rgba(99,102,241,.2);
}

/* Nav Actions */
.nav-actions{display:flex;align-items:center;gap:.5rem}
.nav-btn{
  background:var(--surface);border:1px solid var(--border);color:var(--text2);
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--tr);
}
.nav-btn:hover{background:var(--surface2);border-color:var(--border2);color:var(--text)}
.icon-moon{display:none}
body.light .icon-sun{display:none}
body.light .icon-moon{display:block}

/* ─── Custom Language Dropdown ─── */
.custom-lang-wrapper{position:relative}
.custom-lang-btn{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  height:38px;padding:0 12px;display:flex;align-items:center;gap:7px;
  font-family:var(--font);font-size:.82rem;font-weight:700;color:var(--text2);
  cursor:pointer;transition:all var(--tr);white-space:nowrap;
}
.custom-lang-btn:hover{background:var(--surface2);border-color:var(--border2);color:var(--text)}
body.light .custom-lang-btn{color:var(--text2)}

.custom-lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  background:rgba(13,13,26,0.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border2);border-radius:var(--r-lg);
  padding:6px;min-width:185px;max-height:320px;overflow-y:auto;
  list-style:none;display:none;flex-direction:column;gap:2px;
  box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.04);z-index:200;
  opacity:0;transform:translateY(-8px) scale(0.97);transition:all 0.2s cubic-bezier(.4,0,.2,1);
}
body.light .custom-lang-menu{background:rgba(255,255,255,.97);border-color:rgba(0,0,0,.1)}
.custom-lang-menu.show{display:flex;opacity:1;transform:translateY(0) scale(1)}
.custom-lang-item{
  padding:9px 12px;display:flex;align-items:center;gap:10px;
  cursor:pointer;border-radius:var(--r-sm);transition:all var(--tr);
}
.custom-lang-item:hover{background:rgba(99,102,241,.15)}
body.light .custom-lang-item:hover{background:rgba(99,102,241,.08)}
.c-code{
  font-size:.7rem;font-weight:800;letter-spacing:.03em;
  background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  width:26px;text-align:center;flex-shrink:0;
}
.c-name{font-size:.87rem;font-weight:600;color:var(--text)}
body.light .c-name{color:var(--text)}

/* Scrollbar in dropdown */
.custom-lang-menu::-webkit-scrollbar{width:4px}
.custom-lang-menu::-webkit-scrollbar-track{background:transparent}
.custom-lang-menu::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* Hide Google Widget */
.goog-te-banner-frame.skiptranslate{display:none!important}
body{top:0!important}
#goog-gt-tt{display:none!important}

/* ─── Pages ─── */
.page{display:none;position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:5.5rem 1.5rem 4rem}
.page.active{display:block;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ─── Home Header ─── */
.home-header{text-align:center;margin-bottom:2.5rem;padding-top:1rem}

/* Badge pill above title */
.home-header::before{
  content:'⚡ Smart Calculator Suite';
  display:inline-block;margin-bottom:1rem;
  padding:.3rem 1rem;border-radius:100px;
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(217,70,239,.1));
  border:1px solid rgba(99,102,241,.25);
  font-size:.75rem;font-weight:700;letter-spacing:.04em;
  color:var(--indigo-l);text-transform:uppercase;
}

.home-title{
  font-size:clamp(2rem,5vw,3.2rem);font-weight:900;letter-spacing:-.04em;
  margin-bottom:.6rem;line-height:1.1;
  background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.home-subtitle{color:var(--text2);font-size:1rem;margin-bottom:1.5rem;font-weight:400}
.btn-all-calc{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--grad-main);color:#fff;padding:.65rem 1.6rem;
  border-radius:100px;text-decoration:none;font-weight:700;font-size:.88rem;
  box-shadow:0 4px 20px rgba(99,102,241,.35);
  transition:all var(--tr);border:none;
}
.btn-all-calc:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(99,102,241,.5)}

/* ─── Percentage Sub-tabs ─── */
.perc-tabs{
  display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:1.75rem;
}
.perc-tab{
  background:var(--surface);border:1px solid var(--border);color:var(--text2);
  padding:.48rem 1.1rem;border-radius:100px;font-family:var(--font);font-size:.8rem;font-weight:600;
  cursor:pointer;transition:all var(--tr);white-space:nowrap;
}
.perc-tab:hover{background:var(--surface2);border-color:var(--border2);color:var(--text);transform:translateY(-1px)}
.perc-tab.active{
  background:var(--grad-main);color:#fff;border-color:transparent;
  box-shadow:0 4px 20px rgba(99,102,241,.35);transform:translateY(-1px);
}
.perc-panels{position:relative}
.perc-panel{display:none}
.perc-panel.active{display:block;animation:fadeIn .3s ease}

/* ─── Calc Type Tabs ─── */
.calc-type-tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem}
.ct-tab{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);color:var(--text2);
  padding:.65rem 1.4rem;border-radius:var(--r);font-family:var(--font);font-size:.88rem;font-weight:700;
  cursor:pointer;transition:all var(--tr);
}
.ct-tab:hover{background:var(--surface2);border-color:var(--border2);color:var(--text);transform:translateY(-2px)}
.ct-tab.active{
  background:var(--grad-main);color:#fff;border-color:transparent;
  box-shadow:0 6px 24px rgba(99,102,241,.4);transform:translateY(-2px);
}
.ct-icon{font-size:1.1rem}
.ct-panel{display:none}
.ct-panel.active{display:block;animation:fadeIn .35s ease}

/* ─── Cards ─── */
.calc-card{
  background:var(--surface);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:2rem 2rem 1.75rem;max-width:620px;margin:0 auto;
  transition:border-color var(--tr),box-shadow var(--tr);
  position:relative;overflow:hidden;
}
/* Subtle top glow line */
.calc-card::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,.5),rgba(217,70,239,.4),transparent);
}
.calc-card:hover{border-color:rgba(99,102,241,.3);box-shadow:var(--glow-p)}
body.light .calc-card{background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.07)}
body.light .calc-card::before{background:linear-gradient(90deg,transparent,rgba(99,102,241,.3),transparent)}
.wide-card{max-width:920px}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:1.75rem}
.card-emoji{
  font-size:1.3rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border);border-radius:12px;flex-shrink:0;
}
.card-title{font-size:1.05rem;font-weight:800;letter-spacing:-.01em}

/* ─── Inputs ─── */
.input-row{display:flex;align-items:flex-end;gap:.75rem;margin-bottom:1.25rem}
.form-row{margin-bottom:1.25rem}
.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.input-wrap{display:flex;flex-direction:column;gap:.4rem;flex:1}
label{font-size:.76rem;font-weight:700;color:var(--text3);letter-spacing:.02em;text-transform:uppercase}
.ci{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);font-family:var(--font);font-size:.92rem;font-weight:500;
  padding:.7rem 1rem;width:100%;outline:none;
  transition:border-color var(--tr),box-shadow var(--tr),background var(--tr);
  -webkit-appearance:none;
}
.ci:focus{border-color:rgba(99,102,241,.6);box-shadow:0 0 0 3px rgba(99,102,241,.15);background:var(--surface3)}
.ci::placeholder{color:var(--text3)}
body.light .ci{background:rgba(255,255,255,.85);color:var(--text)}
body.light .ci:focus{background:rgba(255,255,255,1)}
.input-icon{position:relative;display:flex;align-items:center}
.prefix{position:absolute;left:11px;color:var(--text3);font-size:.88rem;font-weight:700;pointer-events:none}
.ci.has-prefix{padding-left:1.75rem}
.suffix{position:absolute;right:11px;color:var(--text3);font-size:.78rem;font-weight:700;pointer-events:none}
.op{
  flex-shrink:0;font-size:.78rem;font-weight:800;color:var(--text3);padding-bottom:.6rem;
  white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;
}
.term-row{display:flex;gap:.5rem;align-items:center}
.term-row .ci{flex:1}
.term-row .toggle-row{flex-shrink:0}

/* ─── Toggle Buttons ─── */
.toggle-row{display:flex;gap:.3rem;margin-bottom:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px}
.toggle-row.compact{margin-bottom:0}
.toggle-btn{
  flex:1;padding:.42rem .75rem;border:none;border-radius:6px;
  background:transparent;color:var(--text2);font-family:var(--font);font-size:.78rem;font-weight:700;
  cursor:pointer;transition:all var(--tr);white-space:nowrap;
}
.toggle-btn:hover{color:var(--text)}
.toggle-btn.active{
  background:var(--grad-main);color:#fff;
  box-shadow:0 2px 8px rgba(99,102,241,.35);
}

/* ─── Calc Buttons ─── */
.calc-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:.8rem 1.5rem;border:none;border-radius:var(--r);
  font-family:var(--font);font-size:.92rem;font-weight:800;
  cursor:pointer;transition:all var(--tr);color:#fff;
  letter-spacing:.01em;
}
.calc-btn:hover{transform:translateY(-2px)}
.calc-btn:active{transform:translateY(0) scale(.99)}
.purple{background:var(--grad-main);box-shadow:0 4px 20px rgba(99,102,241,.35)}
.purple:hover{box-shadow:0 8px 32px rgba(99,102,241,.5)}
.green{background:var(--grad-green);box-shadow:0 4px 20px rgba(16,185,129,.3)}
.green:hover{box-shadow:0 8px 32px rgba(16,185,129,.45)}
.orange{background:var(--grad-amber);box-shadow:0 4px 20px rgba(245,158,11,.3)}
.orange:hover{box-shadow:0 8px 32px rgba(245,158,11,.45)}
.pink{background:var(--grad-rose);box-shadow:0 4px 20px rgba(244,63,94,.3)}
.pink:hover{box-shadow:0 8px 32px rgba(244,63,94,.45)}

/* ─── Result Box ─── */
.result{
  display:none;margin-top:1.1rem;
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(217,70,239,.05));
  border:1px solid rgba(99,102,241,.18);border-radius:var(--r);
  padding:1.1rem 1.25rem;line-height:1.7;
}
.result.show{display:block;animation:slideUp .3s ease}
.rv{
  font-size:2rem;font-weight:900;
  background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  display:block;letter-spacing:-.03em;line-height:1.15;
}
.rv.green-val{background:var(--grad-green);-webkit-background-clip:text;background-clip:text}
.rv.red-val{background:var(--grad-amber);-webkit-background-clip:text;background-clip:text}
.rl{font-size:.78rem;color:var(--text3);font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin-bottom:.2rem}
/* ─── Results Animations ─── */
@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes greenPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.green-val{color:var(--green);animation:greenPulse 1s ease}
.red-val{color:var(--red)}

/* ─── Copy/Share Actions ─── */
.res-actions {
  display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.25rem;
  padding-top: 1rem; border-top: 1px solid var(--border);
}
.act-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--text);
  cursor: pointer; transition: all var(--tr); display: flex; align-items: center; gap: 0.35rem;
}
.act-btn:hover { background: var(--border); transform: translateY(-1px); }
.act-btn.success { background: var(--green); color: #fff; border-color: var(--green); }

/* ─── History Section ─── */
.history-section {
  display: none; /* Hidden when empty */
  max-width: 920px; margin: 2rem auto 0; padding: 1.5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
}
body.light .history-section { background: rgba(255,255,255,0.7); }
.history-section.has-items { display: block; animation: slideUp 0.4s ease; }
.hist-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.hist-title { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.hist-clear {
  background: transparent; border: none; font-size: 0.85rem; color: var(--red);
  cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--r-sm); transition: background var(--tr);
}
.hist-clear:hover { background: rgba(239,68,68,0.1); }
.hist-list { display: flex; flex-direction: column; gap: 0.75rem; }
.hist-item {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.25rem;
}
.hist-type { font-size: 0.75rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.hist-eq { font-size: 0.95rem; color: var(--text); font-family: monospace; }
.hist-res { font-size: 1.1rem; font-weight: 800; color: var(--primary); margin-top: 0.25rem; }

/* ─── Tabs & Layout ─── */
.layout-all{display:grid;grid-template-columns:260px 1fr;gap:2rem;align-items:start;margin-top:2rem}

/* ─── Loan Layout ─── */
.loan-grid{display:grid;grid-template-columns:1fr;gap:1.75rem}
.loan-results-area{animation:slideUp .4s ease}
.lr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin-bottom:1.25rem}
.lr-card{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);
  padding:1.1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:all var(--tr);
}
.lr-card:hover{border-color:var(--border2);transform:translateY(-2px)}
body.light .lr-card{background:rgba(255,255,255,.85)}
.lr-emoji{font-size:1.4rem}
.lr-label{font-size:.7rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.lr-val{font-size:1.2rem;font-weight:900;background:var(--grad-green);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.chart-wrap{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:1rem}
.chart-legend{display:flex;flex-direction:column;gap:8px}
.legend-item{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text2);font-weight:600}
.legend-dot{width:10px;height:10px;border-radius:4px;flex-shrink:0}

/* Amortization */
.amort-details{margin-top:.5rem}
.amort-details summary{
  cursor:pointer;font-weight:700;font-size:.88rem;color:var(--text);
  padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);transition:all var(--tr);list-style:none;
  display:flex;align-items:center;gap:6px;
}
.amort-details summary:hover{background:var(--surface2)}
.amort-details[open] summary{border-radius:var(--r-sm) var(--r-sm) 0 0}
.amort-table-wrap{max-height:400px;overflow-y:auto;border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-sm) var(--r-sm)}
.amort-table{width:100%;border-collapse:collapse;font-size:.78rem}
.amort-table th{background:var(--surface2);color:var(--text2);font-weight:700;padding:.6rem .75rem;position:sticky;top:0;z-index:1;text-align:right}
.amort-table th:first-child{text-align:center}
.amort-table td{padding:.5rem .75rem;text-align:right;border-bottom:1px solid var(--border);color:var(--text)}
.amort-table tr:hover td{background:var(--surface)}

/* ─── BMI Layout ─── */
.bmi-grid{display:grid;grid-template-columns:1fr;gap:1.75rem}
.bmi-results-area{display:flex;flex-direction:column;align-items:center;gap:1.1rem;animation:slideUp .4s ease}
.bmi-ring-wrap{width:190px;height:190px;filter:drop-shadow(0 4px 24px rgba(99,102,241,.25))}
.bmi-ring-svg{width:100%;height:100%}
.ring-num{font-family:var(--font);font-size:2.4rem;font-weight:900;fill:var(--text);letter-spacing:-.04em}
.ring-lbl{font-family:var(--font);font-size:.75rem;fill:var(--text3);font-weight:600;letter-spacing:.04em}
.bmi-badge{display:inline-block;padding:.45rem 1.4rem;border-radius:100px;font-weight:800;font-size:.9rem;text-align:center;letter-spacing:.01em}
.badge-uw{background:rgba(59,130,246,.14);color:#60a5fa;border:1px solid rgba(59,130,246,.22)}
.badge-n{background:rgba(16,185,129,.14);color:#34d399;border:1px solid rgba(16,185,129,.22)}
.badge-ow{background:rgba(245,158,11,.14);color:#fbbf24;border:1px solid rgba(245,158,11,.22)}
.badge-ob{background:rgba(239,68,68,.14);color:#f87171;border:1px solid rgba(239,68,68,.22)}
.bmi-details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.6rem;width:100%;max-width:520px}
.bmi-detail{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:.85rem 1rem;display:flex;align-items:center;gap:10px;transition:all var(--tr);
}
.bmi-detail:hover{border-color:var(--border2);transform:translateY(-1px)}
body.light .bmi-detail{background:rgba(255,255,255,.8)}
.bd-icon{font-size:1.3rem;flex-shrink:0}
.bd-label{font-size:.68rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex:1}
.bd-val{font-size:.9rem;font-weight:800;color:var(--text)}
.bmi-scale{width:100%;max-width:360px}
.bmi-scale-bar{height:8px;border-radius:100px;background:linear-gradient(90deg,#60a5fa,#34d399 30%,#fbbf24 60%,#f87171);margin-bottom:8px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.bmi-scale-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.bmi-scale-labels span{font-size:.62rem;color:var(--text3);text-align:center;line-height:1.4;font-weight:500}

/* ─── Age Layout ─── */
.age-grid{display:grid;grid-template-columns:1fr;gap:1.75rem}
.age-results-area{animation:slideUp .4s ease}
.age-main{
  background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(217,70,239,.06));
  border:1px solid rgba(99,102,241,.18);border-radius:var(--r-xl);
  padding:1.75rem;display:flex;align-items:center;justify-content:space-around;gap:.75rem;margin-bottom:1rem;
}
body.light .age-main{background:linear-gradient(135deg,rgba(99,102,241,.07),rgba(217,70,239,.04));border-color:rgba(99,102,241,.14)}
.age-block{display:flex;flex-direction:column;align-items:center;gap:3px}
.age-num{font-size:3rem;font-weight:900;letter-spacing:-.05em;background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.age-lbl{font-size:.72rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.age-dot{font-size:2rem;color:var(--text3);margin-bottom:8px;opacity:.4}
.age-extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.65rem}
.ae-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:.85rem 1rem;display:flex;align-items:center;gap:.9rem;transition:all var(--tr);
}
.ae-item:hover{border-color:var(--border2);transform:translateY(-1px)}
body.light .ae-item{background:rgba(255,255,255,.8)}
.ae-icon{font-size:1.4rem;flex-shrink:0}
.ae-info{display:flex;flex-direction:column;gap:2px}
.ae-label{font-size:.68rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ae-val{font-size:.88rem;font-weight:700;color:var(--text)}

/* ─── Footer ─── */
.footer{
  position:relative;z-index:1;
  margin-top:2rem;
}

/* Pre-Footer CTA Banner */
.footer-cta{
  background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(217,70,239,.08),rgba(6,182,212,.06));
  border-top:1px solid rgba(99,102,241,.2);
  border-bottom:1px solid var(--border);
  padding:3rem 1.5rem;text-align:center;
}
.footer-cta-inner{max-width:600px;margin:0 auto}
.footer-cta-title{
  font-size:1.6rem;font-weight:900;letter-spacing:-.03em;margin-bottom:.5rem;
  background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.footer-cta-text{color:var(--text2);font-size:.92rem;margin-bottom:1.5rem}
.footer-cta-btns{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.fcta-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--border);border-radius:100px;
  padding:.55rem 1.2rem;font-family:var(--font);font-size:.82rem;font-weight:700;
  color:var(--text2);text-decoration:none;cursor:pointer;
  transition:all var(--tr);
}
.fcta-btn:hover{background:var(--surface2);border-color:var(--border2);color:var(--text);transform:translateY(-2px)}
.fcta-btn.primary{
  background:var(--grad-main);color:#fff;border-color:transparent;
  box-shadow:0 4px 16px rgba(99,102,241,.3);
}
.fcta-btn.primary:hover{box-shadow:0 6px 24px rgba(99,102,241,.5);transform:translateY(-2px)}

/* Main Footer Grid */
.footer-main{
  background:rgba(8,8,15,.6);backdrop-filter:blur(16px);
  padding:3rem 1.5rem 2rem;
}
body.light .footer-main{background:rgba(245,245,255,.7)}
.footer-grid{
  max-width:1000px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;
}

/* Footer Columns */
.footer-col{}
.brand-col{padding-right:1.5rem}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:.85rem}
.footer-logo-text{
  font-weight:900;font-size:1.1rem;
  background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.footer-tagline{font-size:.83rem;color:var(--text2);line-height:1.65;margin-bottom:1rem}
.footer-badges{display:flex;flex-wrap:wrap;gap:.4rem}
.f-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:100px;padding:.3rem .7rem;
  font-size:.7rem;font-weight:600;color:var(--text2);white-space:nowrap;
}

/* Column Titles */
.footer-col-title{
  font-size:.72rem;font-weight:800;color:var(--text3);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:.85rem;
}
.footer-col-title.mt{margin-top:1.5rem}

/* Footer Links */
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.footer-links a{
  text-decoration:none;color:var(--text2);font-size:.84rem;font-weight:500;
  transition:all var(--tr);display:inline-flex;align-items:center;gap:4px;
  padding:2px 0;
}
.footer-links a:hover{color:var(--indigo-l);transform:translateX(3px)}
.footer-links a::before{
  content:'';width:0;height:1px;background:var(--indigo-l);
  transition:width .2s ease;
}
.footer-links a:hover::before{width:12px}

/* Bottom Bar */
.footer-bottom{
  background:rgba(5,5,10,.5);border-top:1px solid var(--border);
  padding:1.2rem 1.5rem;
}
body.light .footer-bottom{background:rgba(230,230,245,.6)}
.footer-bottom-inner{
  max-width:1000px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}
.footer-copy{font-size:.76rem;color:var(--text3);font-weight:500}
.footer-bottom-links{display:flex;align-items:center;gap:.5rem}
.footer-bottom-links a{
  text-decoration:none;color:var(--text3);font-size:.76rem;font-weight:600;
  transition:color var(--tr);
}
.footer-bottom-links a:hover{color:var(--indigo-l)}
.fb-dot{color:var(--text3);font-size:.6rem;opacity:.5}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border3)}

/* ─── Result Actions (Copy/Share) ─── */
.res-actions{
  display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem;
}
.act-btn{
  background:var(--surface2);border:1px solid var(--border);border-radius:100px;
  padding:.4rem .85rem;font-size:.76rem;font-weight:600;color:var(--text2);
  cursor:pointer;transition:all var(--tr);display:inline-flex;align-items:center;gap:4px;
}
.act-btn:hover{background:var(--surface);border-color:var(--border2);color:var(--text);transform:translateY(-1px)}
.act-btn.success{background:rgba(16,185,129,.1);color:#10b981;border-color:rgba(16,185,129,.3)}

/* ─── Calculation History (Modal Overlay) ─── */
.history-section{
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(5px);
  display: flex; justify-content: center; align-items: center;
  z-index: 9999; opacity: 0; pointer-events: none; transition: all 0.3s ease;
}
.history-section.show-modal{
  opacity: 1; pointer-events: auto;
}
.history-content-wrap{
  background: var(--surface); width: 90%; max-width: 500px;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 1.5rem; max-height: 80vh; display: flex; flex-direction: column;
  transform: translateY(20px); transition: transform 0.3s ease;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.history-section.show-modal .history-content-wrap{
  transform: translateY(0);
}
body.light .history-content-wrap{background: rgba(255,255,255,0.95);}
.hist-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.hist-title{font-size:1.1rem;font-weight:800;color:var(--text)}
.hist-clear{background:none;border:none;color:var(--red);font-size:.8rem;font-weight:700;cursor:pointer;padding:.2rem .5rem}
.hist-clear:hover{text-decoration:underline}
.hist-close-btn{
  background: var(--surface2); border: 1px solid var(--border); border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text2); transition: all 0.2s; margin-left: 10px;
}
.hist-close-btn:hover{background: var(--red); color: #fff; border-color: var(--red);}
.hist-list{display:flex;flex-direction:column;gap:.5rem;flex: 1; overflow-y:auto;padding-right:5px}

/* Clock icon on Calculator cards */
.card-hist-btn {
  background: none; border: none; color: var(--text2); cursor: pointer;
  padding: 4px; margin-left: auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.card-hist-btn:hover { color: var(--indigo); background: var(--surface2); }
.card-hist-btn svg { width: 22px; height: 22px; }

.hist-item{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);
  padding:.75rem 1rem;display:flex;flex-direction:column;gap:.25rem;
}
.hist-type{font-size:.7rem;font-weight:800;color:var(--indigo-l);text-transform:uppercase;letter-spacing:.05em}
.hist-eq{font-size:.85rem;color:var(--text2)}
.hist-res{font-size:1rem;font-weight:800;color:var(--text)}

/* ─── Legal Pages ─── */
.legal-container{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:3rem;max-width:800px;margin:0 auto;
}
body.light .legal-container{background:rgba(255,255,255,.8)}
.legal-content h2{font-size:1.25rem;font-weight:800;color:var(--text);margin:2rem 0 1rem;letter-spacing:-.02em}
.legal-content h2:first-child{margin-top:0}
.legal-content p{font-size:1rem;color:var(--text2);line-height:1.75;margin-bottom:1.25rem}
.legal-content ul{margin-left:1.5rem;margin-bottom:1.25rem;color:var(--text2);line-height:1.7}
.legal-content li{margin-bottom:.5rem}
.legal-content a{color:var(--indigo-l);text-decoration:none}
.legal-content a:hover{text-decoration:underline}

/* ─── SEO Content Sections ─── */
.seo-section{
  position:relative;z-index:1;
  max-width:1000px;margin:0 auto;padding:0 1.5rem 4rem;
}
.seo-inner{
  border-top:1px solid var(--border);padding-top:3rem;
}
.seo-title{
  font-size:1.6rem;font-weight:900;letter-spacing:-.03em;margin-bottom:.75rem;
  background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.seo-lead{color:var(--text2);font-size:1rem;line-height:1.75;margin-bottom:2rem}
.seo-lead strong{color:var(--text)}

/* SEO Feature Cards */
.seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:2.5rem}
.seo-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.25rem;transition:all var(--tr);
}
.seo-card:hover{border-color:var(--border2);transform:translateY(-2px)}
body.light .seo-card{background:rgba(255,255,255,.7)}
.seo-card-icon{font-size:1.6rem;margin-bottom:.75rem}
.seo-card h3{font-size:.92rem;font-weight:800;margin-bottom:.5rem;color:var(--text)}
.seo-card p{font-size:.83rem;color:var(--text2);line-height:1.65}
.seo-card em{color:var(--indigo-l);font-style:normal}
.seo-card strong{color:var(--text)}

/* Formula Table */
.seo-h3{font-size:1rem;font-weight:800;color:var(--text);margin-bottom:1rem;letter-spacing:-.01em}
.seo-formula-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.5rem;margin-bottom:2.5rem}
.seo-formula{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.sf-label{font-size:.8rem;font-weight:700;color:var(--text2);white-space:nowrap}
.sf-eq{font-size:.8rem;font-weight:600;color:var(--indigo-l);font-family:monospace;letter-spacing:.02em;text-align:right}

/* FAQ Accordion */
.seo-faq{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2.5rem}
.faq-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--tr);
}
.faq-item:hover{border-color:var(--border2)}
.faq-item[open]{border-color:rgba(99,102,241,.3)}
.faq-item summary{
  padding:1rem 1.25rem;font-weight:700;font-size:.9rem;color:var(--text);
  cursor:pointer;list-style:none;display:flex;align-items:center;
  transition:background var(--tr);
}
.faq-item summary:hover{background:var(--surface2)}
.faq-item summary::after{content:'＋';margin-left:auto;font-size:1rem;color:var(--text3);transition:transform .2s}
.faq-item[open] summary::after{content:'－'}
.faq-item p{padding:.75rem 1.25rem 1rem;font-size:.88rem;color:var(--text2);line-height:1.7;border-top:1px solid var(--border)}
.faq-item strong{color:var(--text)}

/* ─── Related Calculators ─── */
.related-calcs{margin-top:2rem}
.related-calcs.compact{margin-top:1.5rem}
.related-title{
  font-size:1rem;font-weight:800;color:var(--text);margin-bottom:1rem;letter-spacing:-.01em;
}
.related-title.sm{font-size:.85rem;margin-bottom:.75rem}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}
.related-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  cursor:pointer;transition:all var(--tr);text-align:left;font-family:var(--font);
}
.related-card:hover{
  background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(217,70,239,.07));
  border-color:rgba(99,102,241,.35);transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(99,102,241,.18);
}
body.light .related-card{background:rgba(255,255,255,.75)}
.related-card.sm{border-radius:var(--r);padding:.9rem 1rem;flex-direction:row;align-items:center;gap:.75rem}
.rc-icon{font-size:1.6rem;line-height:1}
.related-card.sm .rc-icon{font-size:1.2rem}
.rc-name{font-size:.92rem;font-weight:800;color:var(--text)}
.related-card.sm .rc-name{font-size:.85rem}
.rc-desc{font-size:.78rem;color:var(--text2);line-height:1.45}
.related-card.sm .rc-desc{display:none}

/* ─── SEO Mini (All page) ─── */
.seo-mini{
  max-width:920px;margin:2rem auto 0;padding:1.5rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
}
body.light .seo-mini{background:rgba(255,255,255,.7)}
.seo-mini p{font-size:.88rem;color:var(--text2);line-height:1.7;margin-bottom:.25rem}
.seo-mini strong{color:var(--text)}
.seo-mini-title{font-size:1rem;font-weight:800;color:var(--text);margin-bottom:.75rem;letter-spacing:-.01em}
.seo-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.5rem;margin:1rem 0}
.seo-mini-fact{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.75rem 1rem;font-size:.82rem;color:var(--text2);line-height:1.6;
}
.seo-mini-fact strong{color:var(--text)}

/* ─── Shake Animation ─── */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.shake{animation:shake .4s ease}

/* ─── Responsive ─── */
@media(max-width:720px){
  .nav-links{display:none}
  .page{padding:5rem 1rem 3rem}
  .form-row.two{grid-template-columns:1fr}
  .input-row{flex-direction:column;align-items:stretch}
  .op{text-align:center;padding:0;margin:-.4rem 0}
  .age-main{flex-direction:column;gap:.5rem}
  .age-num{font-size:2.4rem}
  .lr-cards{grid-template-columns:1fr 1fr}
  .calc-card{padding:1.5rem 1.25rem}
  .perc-tabs{gap:.3rem}
  .perc-tab{padding:.4rem .85rem;font-size:.76rem}
  /* Footer responsive */
  .footer-grid{grid-template-columns:1fr;gap:1.5rem}
  .brand-col{padding-right:0}
  .footer-cta{padding:2rem 1rem}
  .footer-cta-title{font-size:1.3rem}
  .seo-grid{grid-template-columns:1fr 1fr}
  .seo-formula-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .footer-bottom-inner{flex-direction:column;text-align:center;gap:.35rem}
}

/* ─── Print Styles for Loan PDF ─── */
@media print {
  /* Hide unnecessary elements */
  .navbar, .footer, .ct-tabs, .perc-tabs, .related-calcs, 
  .seo-mini, .history-section, .res-actions, .home-header, .all-header {
    display: none !important;
  }
  
  /* Reset body background */
  body, .page {
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Only show Loan panel if it's active */
  .ct-panel:not(.active) {
    display: none !important;
  }
  
  /* Hide the inputs in the loan calculator */
  #ct-loan .loan-grid {
    display: none !important;
  }
  
  /* Style the results block to take full width */
  #ln-results {
    display: block !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  /* Make the Amortization schedule fully visible even if collapsed in UI */
  #ln-amort-details .amort-table-wrap {
    display: block !important;
  }
  
  /* Clean up tables for print */
  .amort-table th {
    background: #eee !important;
    color: #000 !important;
    border-bottom: 2px solid #ccc !important;
  }
  .amort-table td {
    border-bottom: 1px solid #ddd !important;
    color: #000 !important;
  }
  
  /* Results Cards */
  .lr-card {
    border: 1px solid #ccc !important;
    background: #fafafa !important;
  }
  .lr-val {
    color: #000 !important;
  }
}