:root{
  --bg:#f4f5f7; --panel:#ffffff; --panel-2:#fafbfc; --ink:#17181c; --ink-2:#4a4d55;
  --ink-3:#6d7079; --line:#dcdfe4; --line-2:#e8ebef; --accent:#1a73e8; --accent-ink:#155cb5;
  --accent-soft:#e8f0fe; --warn:#7a4200; --warn-bg:#fdf4e6;
  --radius:5px; --radius-sm:4px; --radius-xs:3px;
  --shadow-top:0 1px 0 rgba(23,24,28,.06);
  --shadow-card:none;
  --font:Arial,Helvetica,sans-serif;
  --mono:"Courier New",Courier,monospace;
  --orange:#f59e0b; --orange-ink:#b45309;
  --green:#16a34a; --purple:#7c3aed;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#17181b; --panel:#1e2023; --panel-2:#23262a; --ink:#eceef1; --ink-2:#b3b7bf;
    --ink-3:#8e939c; --line:#31353b; --line-2:#2a2d33; --accent:#6aa9e9; --accent-ink:#8cc0f0;
    --accent-soft:#222a34; --warn:#f0c790; --warn-bg:#2b2418;
    --shadow-top:none; --shadow-card:none;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15.5px/1.55 var(--font);color:var(--ink);background:var(--bg)}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.skip{position:absolute;left:-9999px;top:0;background:var(--panel);padding:10px 14px;z-index:60}
.skip:focus{left:8px;top:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 14px}
.wide{max-width:1080px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------------- topbar */
.top{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top-in{max-width:1080px;margin:0 auto;padding:9px 14px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:7px;font-weight:700;font-size:1.02rem;color:var(--ink);white-space:nowrap;padding:4px 0}
.brand:hover{text-decoration:none}
.brand .mark{width:20px;height:20px;border-radius:var(--radius-xs);background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700}
.searchbox{position:relative;flex:1 1 260px;min-width:190px}
.searchbox{display:flex;align-items:stretch;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-xs)}
.searchbox input{flex:1;min-width:0;padding:9px 10px;font-size:16px;color:var(--ink);
  background:transparent;border:0;font-family:inherit}
.searchbox input::placeholder{color:var(--ink-3)}
.searchbox input:focus{outline:0}
.searchbox:focus-within{border-color:var(--accent)}
.searchbox kbd{align-self:center;margin-right:6px;font:11px var(--mono);color:var(--ink-3);
  border:1px solid var(--line);border-radius:2px;padding:1px 5px;background:var(--panel-2)}
.searchbox .sbtn svg{width:15px;height:15px}
.searchbox .sbtn{display:grid;place-items:center;align-self:stretch;padding:0 10px;background:transparent;
  border:0;border-left:1px solid var(--line);color:var(--ink-2);cursor:pointer;border-radius:0}
.searchbox .sbtn:hover{color:var(--accent);filter:none}
.ico-svg{width:16px;height:16px;flex:none;color:var(--ink-2)}
.topnav{display:flex;gap:13px;font-size:14px;color:var(--ink-2);white-space:nowrap;align-items:center;flex:none;
  flex-wrap:wrap;row-gap:2px}
.topnav a{color:var(--ink-2);padding:5px 0;display:inline-block}
.lang{display:flex;border:1px solid var(--line);border-radius:var(--radius-xs);overflow:hidden}
.lang a,.lang span{padding:8px 12px;font-size:12.5px;color:var(--ink-2);min-width:38px;text-align:center}
.lang [aria-current="true"]{background:var(--accent);color:#fff;font-weight:700}
@media (max-width:760px){
  .top{position:static}
  .top-in{flex-wrap:wrap;gap:8px 10px;padding:9px 12px}
  .searchbox{order:2;flex:1 1 240px;min-width:0}
  .lang{order:3;flex:none;margin-left:auto}
  .lang a,.lang span{padding:8px 9px;min-width:33px}
  .topnav{order:1;flex:1 1 100%;gap:12px;font-size:13px;white-space:normal}
  .searchbox kbd{display:none}
  .panel{position:static;margin-top:7px;max-height:62vh}
}
@media (max-width:760px){ .catlist .d{display:none} .catlist a{padding:14px 2px} }

/* ---------------------------------------------------------------- search panel */
.panel{position:absolute;left:0;right:0;top:calc(100% + 5px);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  max-height:min(70vh,520px);overflow-y:auto;display:none;z-index:50}
.panel.open{display:block}
.panel .meta{padding:8px 13px;font-size:12px;color:var(--ink-3);border-bottom:1px solid var(--line-2);
  background:var(--panel-2);position:sticky;top:0}
.panel ul{list-style:none;margin:0;padding:4px}
.panel li a{display:block;padding:8px 10px;border-radius:var(--radius-xs);color:var(--ink);font-size:14.5px}
.panel li a:hover,.panel li a[aria-selected="true"]{background:var(--accent-soft);text-decoration:none}
.panel .row{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.panel .cat{font-size:11.5px;color:var(--ink-2);white-space:nowrap;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-xs);padding:1px 7px}
.panel .note{padding:13px;color:var(--ink-2);font-size:14px}
.panel mark{background:#fdf0c2;color:var(--ink);font-weight:700}
.panel .chips{margin-top:9px}

/* ---------------------------------------------------------------- blok halaman */
main{padding:16px 0 22px}
.crumbs{font-size:12.5px;color:var(--ink-3);margin:0 0 9px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--ink-2);padding:2px 0;display:inline-block}
.crumbs .sep{opacity:.6}
h1{font-size:1.62rem;line-height:1.25;margin:0 0 6px;font-weight:700}
h2{font-size:1.16rem;margin:24px 0 9px;padding-top:9px;border-top:1px solid var(--line);font-weight:700}
h3{font-size:.98rem;margin:16px 0 5px;font-weight:700}
.lead{color:var(--ink-2);margin:0 0 16px;max-width:74ch}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){ .grid2{grid-template-columns:1fr} }
.row{margin-bottom:12px}
label{display:block;font-size:.86rem;font-weight:700;color:var(--ink-2);margin-bottom:5px}
input,textarea,select{font-family:inherit}
input[type=number],input[type=date],input[type=text],textarea,select{
  width:100%;padding:9px 10px;font-size:16px;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-xs)}
select{cursor:pointer}
button{font:inherit;font-weight:700;padding:9px 15px;border:1px solid var(--accent);
  border-radius:var(--radius-xs);background:var(--accent);color:#fff;cursor:pointer}
button:hover{filter:brightness(.92)}
.out{border-top:1px solid var(--line-2);padding:11px 0 2px}
.out:first-of-type{border-top:0;padding-top:0}
.big{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}
.sub{font-size:.82rem;color:var(--ink-3);margin-top:2px}
.hint{font-size:.87rem;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:var(--radius-xs);padding:10px 12px;margin:12px 0 0}
.res-2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media (max-width:620px){ .res-2{grid-template-columns:1fr} }
.featured{background:var(--panel);border:1px solid var(--accent);
  border-radius:var(--radius-xs);padding:13px 15px;margin:0 0 16px}
.flabel{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.fbig{font-size:1.34rem;font-weight:700;margin:3px 0 2px;font-variant-numeric:tabular-nums}
.fsub{margin:0;font-size:.87rem;color:var(--ink-2)}
pre{margin:7px 0 0;padding:11px;background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:var(--radius-xs);overflow:auto;font:13px/1.55 var(--mono);white-space:pre-wrap}
ol{margin:7px 0 0;padding-left:20px}
ol li{margin-bottom:5px}
.prose p{margin:0 0 11px;color:var(--ink-2)}
.prose h2{margin-top:22px;color:var(--ink)}
.prose strong{color:var(--ink)}

/* ---------------------------------------------------------------- hasil */
.out-block{margin:10px 0 0}
.out-block h3{font-size:.9rem;margin:0 0 8px;color:var(--ink-2);font-weight:700;
  padding:0;border:0}
.out-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px}
.out-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xs);padding:11px 12px}
.out-hero{grid-column:1/-1;border:1px solid var(--accent);background:var(--accent-soft)}
.out-hero .out-value{font-size:2rem}
.out-label{font-size:.78rem;color:var(--ink-2);font-weight:700;margin-bottom:3px}
.out-value{font-size:1.7rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.12}
.out-unit{font-size:.85rem;color:var(--ink-3);margin-top:2px}
.out-note{font-size:.85rem;color:var(--ink-2);margin:7px 0 0}
.steps-list{margin:0;padding-left:20px}
.steps-list li{margin-bottom:6px;color:var(--ink-2)}
.steps-list li strong{color:var(--ink)}

/* ------------------------------------------------------- kalkulator keypad (light clean) */
.calc{margin:0 0 16px}
main .card.calc{max-width:none}
.calc-display{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:10px 14px;text-align:right;margin-bottom:12px;box-shadow:0 1px 2px rgba(23,24,28,.05)}
.calc-expr{min-height:16px;font-size:.85rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-out{font-size:clamp(1.5rem,4vw,1.9rem);font-weight:700;line-height:1.1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-out.err{color:#b3261e;font-size:clamp(1rem,3.6vw,1.2rem);font-weight:600}
.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pad button{display:flex;align-items:center;justify-content:center;line-height:1;
  font-size:1.1rem;font-weight:600;padding:13px 0;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(23,24,28,.05);
  font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;
  transition:transform .08s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.pad svg{width:19px;height:19px}
.pad button:hover{background:var(--panel-2);box-shadow:0 2px 6px rgba(23,24,28,.08)}
.pad button:active{transform:translateY(1px);box-shadow:none;background:var(--accent-soft)}
.pad .k-op{background:#f59e0b;border-color:#d97706;color:#fff}
.pad .k-op:hover{background:#d97706}
.pad .k-eq{background:var(--accent);border-color:var(--accent);color:#fff}
.pad .k-eq:hover{background:var(--accent-ink);filter:none}
.pad .k-clear{background:#fdeceb;border-color:#f6d4d1;color:#93221a}
.pad .k-clear:hover{background:#fbdfdd}
.pad .k-del{background:#fdf3e7;border-color:#f5e0c8;color:#7a4200}
.pad .k-del:hover{background:#fbead6}
@media (prefers-color-scheme:dark){
  .pad .k-op{background:#92610f;border-color:#b07d21;color:#fff}
  .pad .k-op:hover{background:#a87215}
  .pad .k-clear{background:#3a2320;border-color:#4d2c28;color:#f0b0a8}
  .pad .k-del{background:#392d1e;border-color:#4c3a25;color:#f0c790}
}
@media (max-width:420px){ .pad{gap:8px} .pad button{padding:14px 0;font-size:1.05rem;border-radius:11px} }

/* ---------------------------------------------------------------- tabel */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -1px;padding-bottom:2px}
.tblwrap table{min-width:100%}
table{width:100%;border-collapse:collapse;font-size:.89rem;font-variant-numeric:tabular-nums;
  border:1px solid var(--line)}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);white-space:nowrap}
th:last-child,td:last-child{border-right:0}
td:first-child,th:first-child{padding-left:10px}
tbody tr:last-child td{border-bottom:0}
th{background:#f0f2f5;font-size:.85rem;color:var(--ink);font-weight:700}
@media (prefers-color-scheme:dark){ th{background:#262a30} }
tbody tr:nth-child(even){background:var(--panel-2)}
.caption{font-size:.84rem;color:var(--ink-3);margin:7px 0 0}

/* ---------------------------------------------------------------- faq */
details{border-top:1px solid var(--line-2);padding:10px 0}
details:first-of-type{border-top:0}
summary{cursor:pointer;font-weight:700;padding:2px 0}
details p{color:var(--ink-2);margin:7px 0 0}

/* ---------------------------------------------------------------- kartu & chip */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px;margin:0;padding:0;list-style:none}
.cards a{display:block;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-xs);padding:11px 12px;color:var(--ink);
  transition:border-color .1s linear,box-shadow .12s linear,transform .12s linear}
.cards a:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(23,24,28,.09)}
.cards .t{font-weight:700;display:block;margin-bottom:2px}
.cards .d{font-size:.82rem;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.chips a{display:inline-block;padding:7px 11px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-xs);font-size:.87rem;color:var(--ink)}
.chips a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);text-decoration:none}

/* daftar kategori: baris teks, bukan kumpulan kartu seragam */
.catlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.catlist li{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:border-color .15s,box-shadow .15s}
.catlist li:hover{border-color:var(--accent,#10528f);box-shadow:0 2px 8px rgba(16,82,143,.10)}
.catlist a{display:grid;grid-template-columns:20px 1fr;gap:8px 11px;padding:14px 14px;color:var(--ink);align-items:start;height:100%}
.catlist .ico-svg{margin-top:2px;color:var(--accent,#10528f)}
.catlist .n{font-weight:650;font-size:.95rem;line-height:1.3}
.catlist .d{grid-column:2;font-size:.8rem;color:var(--ink-3);line-height:1.45;margin-top:2px}
.catlist a:hover{text-decoration:none;background:var(--panel)}
.catlist .each{font-size:.82rem;color:var(--ink-3);text-align:right;white-space:nowrap}

/* ---------------------------------------------------------------- hero */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:0 0 16px}
.hero-grid.sides{grid-template-columns:minmax(0,1fr) 384px;grid-template-rows:auto 1fr;gap:26px;align-items:start;align-content:start}
.hero-copy h1{font-size:1.72rem;line-height:1.15;margin:0 0 6px}
.hero-copy .lead{color:var(--ink-2);margin:0;max-width:54ch}
/* kolom kanan setinggi kartu kalkulator. Kolom kiri dipecah dua baris: judul+paragraf,
   lalu chip alat populer tepat di bawahnya, supaya tidak ada ruang mati selebar 400px
   seperti saat seluruh daftar kategori masih menumpuk di hero. */
.hero-grid.sides>.hero-copy{grid-column:1;grid-row:1}
.hero-grid.sides>.hero-extra{grid-column:1;grid-row:2;align-self:start}
.hero-grid.sides>.hero-side{grid-column:2;grid-row:1 / span 2}
.hero-extra h2{border-top:0;padding-top:0;font-size:1.05rem;margin:22px 0 10px}
.hero-extra .chips a{background:var(--panel-2)}
.hero-side .calc{max-width:none;margin:0}
.home-calc .calc{max-width:420px;margin:0 0 20px}
.calc-title{font-size:.8rem;font-weight:700;color:var(--ink-3);margin:0 0 8px;
  border-top:0;padding-top:0}
@media (max-width:900px){
  .hero-grid.sides{grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
  .hero-grid.sides>.hero-copy,.hero-grid.sides>.hero-extra,.hero-grid.sides>.hero-side{
    grid-column:auto;grid-row:auto;align-self:auto}
  .hero-extra h2{margin-top:18px}
}

/* ---------------------------------------------------------------- grafik */
.chart{margin:0}
.chart svg{display:block;width:100%;height:auto;max-height:210px;border:1px solid var(--line-2)}
.chart .axis{font-size:10px;fill:var(--ink-3)}
.chart .bar{fill:var(--accent)}
.chart .bar-alt{fill:var(--accent);opacity:.45}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2}
.chart .dot{fill:var(--accent)}
.chart .grid{stroke:var(--line-2);stroke-width:1}

/* ---------------------------------------------------------------- catatan */
.note{background:var(--warn-bg);color:var(--warn);border:1px solid var(--line);border-radius:var(--radius-xs);
  padding:10px 12px;font-size:.86rem;margin:12px 0 0}
.placeholder{border:1px dashed var(--line);border-radius:var(--radius-xs);padding:9px 11px;font-size:.86rem;
  color:var(--ink-2);margin:12px 0 0}

/* ---------------------------------------------------------------- footer */
footer{margin-top:26px;border-top:1px solid var(--line);background:var(--panel)}
.foot-in{max-width:1080px;margin:0 auto;padding:20px 14px 26px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.foot-in h4{font-size:.82rem;color:var(--ink);margin:0 0 6px;font-weight:700}
.foot-in ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;font-size:.88rem}
.foot-in a{color:var(--ink-2);display:inline-block;padding:5px 0}
.foot-base{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2)}
.foot-note{margin:0;font-size:.8rem;color:var(--ink-3);max-width:78ch}
@supports (padding:env(safe-area-inset-left)){
  .top-in{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .foot-in{padding-bottom:max(26px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:no-preference){
  .cards a,.chips a{transition:border-color .1s linear}
}
/* ----------------------------------------------------------- tab kategori emoji (vibes kalkulator.now) */
.cattabs{border-top:1px solid var(--line-2);background:var(--panel-2)}
.cattabs-in{max-width:1080px;margin:0 auto;padding:7px 14px;display:flex;flex-wrap:wrap;gap:7px}
.cattabs a{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  font-size:.86rem;font-weight:700;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);white-space:nowrap}
.cattabs a:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);text-decoration:none}
.cattabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:760px){
  .cattabs-in{gap:6px;padding:7px 12px}
  .cattabs a{padding:6px 10px;font-size:.82rem}
}

/* ------------------------------------------------------------ populer bernomor */
.pop-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:6px}
.pop-list li a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-xs);
  color:var(--ink);background:var(--panel);border:1px solid var(--line)}
.pop-list li a:hover{border-color:var(--accent);background:var(--accent-soft);text-decoration:none}
.pop-list .rank{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:.76rem;font-weight:700;color:#fff;background:var(--ink-3)}
.pop-list li:nth-child(1) .rank{background:linear-gradient(135deg,#f59e0b,#d97706)}
.pop-list li:nth-child(2) .rank{background:linear-gradient(135deg,#1a73e8,#155cb5)}
.pop-list li:nth-child(3) .rank{background:linear-gradient(135deg,#16a34a,#15803d)}
.pop-list .t{font-weight:600;font-size:.92rem}

/* ------------------------------------------------------------ grid kategori beremoji */
.cats{margin:4px 0 8px}
.cats h2{margin:14px 0 10px}
.cats .cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.cats a{display:flex;gap:9px;align-items:flex-start}
.cats .ico{flex:none;font-size:1.2rem;line-height:1.15}
.cats .t,.cats .d{display:block}

/* ---------------------------------------------------- layout 2 kolom ala kalkulator.now */
.calc-table-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:1.5rem;margin:0 0 18px}
.table-section{order:1;flex:1;min-width:0}
.calculator-section{order:2;flex:0 0 384px;max-width:384px}
.pop-wrap{margin-top:14px}
.pop-wrap h2{border-top:1px solid var(--line);padding-top:12px;margin:0 0 10px;font-size:1.1rem;display:flex;align-items:center;gap:7px}
.fire-icon{display:inline-block;animation:none}
.pop-wrap h2 a{color:var(--ink)}
.bottom-links-wrapper{margin-top:8px}
.cats h2{font-size:1.16rem}
@media (max-width:900px){
  .calc-table-wrapper{flex-direction:column;gap:18px}
  .calculator-section,.table-section{width:100%;max-width:none;flex:none;order:unset}
  .hero-side .calc{max-width:460px;margin:0 auto}
}
@media (max-width:420px){
  .pop-list li a{padding:9px 8px}
}

/* ------------------------------------------------------------ dark mode tweak */
@media (prefers-color-scheme:dark){
  .pop-list li a{background:#23262a;border-color:#31353b}
  .pop-list li a:hover{background:#222a34;border-color:#6aa9e9}
  .cattabs a{background:#1e2023;border-color:#31353b}
  .cattabs a:hover{background:#222a34;border-color:#6aa9e9;color:#8cc0f0}
  .cattabs a.on{background:#6aa9e9;border-color:#6aa9e9;color:#0b1620}
  .pop-list .rank{background:#4a4d55}
  .cats a{border-left:3px solid #6aa9e9}
}

/* ------------------------------------------------------------ daftar alat per kategori */
.group{margin:0 0 22px}
.group>h2{font-size:1.12rem;margin:0 0 9px;padding:7px 0 7px;border-bottom:2px solid var(--line)}
.group>h2 .n{font-weight:400;color:var(--muted);font-size:.86rem}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:7px;margin:0;padding:0;list-style:none}
.tool-grid a{display:block;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg2,#fff);color:var(--ink);font-size:.93rem;line-height:1.3;text-decoration:none}
.tool-grid a:hover{border-color:var(--accent,#10528f);background:var(--bg2h,#f2f6fb)}
.tool-grid .t{font-weight:650;display:block;margin-bottom:1px}
.tool-grid .d{font-size:.79rem;color:var(--ink-3);display:block;line-height:1.35}
.tool-grid a:has(.d:empty) .d{display:none}
@media (max-width:560px){.tool-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------ compat layout hasil-scrape
   1454 halaman lama memakai markup dari kalkulator.now (input-section, result-card,
   method-card, d-flex). Blok ini memetakannya ke tampilan v2 tanpa menyentuh HTML-nya
   satu per satu; JS perhitungan tidak berubah karena id dan class tetap. */
.calc{display:block;max-width:none;margin:0 0 16px}
.healthy-weight-calculator,.recommendations-section,.theory-section,.method-results{display:block}
.info-box{background:var(--panel);border-left:3px solid var(--accent,#10528f);padding:8px 12px;border-radius:0 var(--radius) var(--radius) 0;margin:0 0 14px;font-size:.85rem;color:var(--ink-3)}
.info-box h2,.info-box h4{font-size:.95rem;margin:0 0 6px;color:var(--accent,#10528f)}
.info-box p{margin:4px 0}
section.card.calc .info-box{order:-1}
.input-section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:0 0 16px}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 12px}
.section-heading h2,.section-heading h3,.section-heading h4{font-size:1.05rem;margin:0;padding-bottom:6px;border-bottom:1px solid var(--line);width:100%}
.input-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:12px}
.input-group{display:flex;flex-direction:column;gap:4px;flex:1 1 180px;min-width:150px}
.input-group label{font-size:.9rem;color:var(--muted)}
.input-group input[type=text],.input-group input[type=number],.input-group select{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);font-size:1rem;background:#fff;width:100%}
.unit-input{display:flex;gap:8px;align-items:flex-end}
.unit-input>div{flex:1;min-width:110px}
.height-imperial,.height-feet-inches,.imperial-separator,.imperial-unit{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.radio-group{display:flex;flex-wrap:wrap;gap:14px}
.radio-option{display:flex;align-items:center;gap:6px;font-size:.94rem}
.radio-option input{width:auto}
.checkbox-option{display:flex;align-items:center;gap:8px;font-size:.92rem;margin:8px 0}
.btn-group{display:flex;gap:10px;margin-top:10px}
.calculate-btn,.reset-btn{padding:9px 20px;border-radius:var(--radius);border:1px solid var(--accent,#10528f);background:var(--accent,#10528f);color:#fff;font-size:.95rem;cursor:pointer}
.reset-btn{background:var(--panel);color:var(--ink)}
.calculate-btn:hover{opacity:.9}
.result-container{margin-top:16px}
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.result-card{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--panel)}
.result-card.primary{border-color:var(--accent,#10528f);border-width:2px}
.result-title{font-size:.86rem;color:var(--muted);margin:0 0 4px}
.result-value{font-size:1.35rem;font-weight:700;line-height:1.1}
.result-format{font-size:.84rem;color:var(--muted);margin-top:3px}
.status-bar-container{margin:18px 0}
.status-bar{display:flex;height:26px;border-radius:13px;overflow:hidden;border:1px solid var(--line)}
.status-segment{flex:1;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff}
.status-segment.underweight{background:#e67e22}
.status-segment.healthy{background:#27ae60}
.status-segment.overweight{background:#e74c3c}
.status-segment.obese{background:#c0392b}
.bmi-marker{position:relative;height:0}
.method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.method-card{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.method-title{font-size:.86rem;color:var(--muted);margin:0 0 4px}
.method-value{font-size:1.15rem;font-weight:700}
.method-description{font-size:.86rem;color:var(--muted);margin-top:4px}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* compat v2 (hasil-scrape) tambahan: class kalkulator.now tanpa aturan */
.baby-growth-calculator,.growth-charts-container,.interpretation-section,.theory-subsection{margin:0 0 18px}
.baby-growth-calculator>.info-box:first-child{margin-top:0}
.calculation-method{margin:0 0 14px}
.chart-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chart-tab{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink-2);font-size:.86rem;cursor:pointer}
.chart-tab:hover{border-color:var(--accent,#10528f)}
.chart-tab.active{border-color:var(--accent,#10528f);background:var(--accent-soft,#eaf2fa);color:var(--accent-ink,#0d3f70);font-weight:600}
.chart-container{position:relative;margin:0 0 14px;min-height:260px}
.chart-container canvas{width:100%!important;height:auto!important;max-height:340px}
.age-indicator{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin:0 0 14px;font-size:.9rem}
.age-indicator p{margin:2px 0}
.results-grid{margin:0 0 14px}
.result-percentile{font-size:.8rem;color:var(--ink-3);margin-top:3px}
.result-zscore{font-size:.78rem;color:var(--ink-3);margin-top:1px}
.measurements-table{width:100%;border-collapse:collapse;font-size:.86rem;margin:10px 0}
.measurements-table th,.measurements-table td{border:1px solid var(--line);padding:6px 9px;text-align:left}
.measurements-table th{background:var(--panel);font-weight:650}
.no-measurements{color:var(--ink-3);font-size:.88rem;margin:8px 0}
.add-btn{padding:9px 18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:.92rem;cursor:pointer;margin-left:6px}
.add-btn:hover{border-color:var(--accent,#10528f)}
.calculator-footer{margin:20px 0 0}
.unit-select{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-size:1rem}
.unit-text{font-size:.86rem;color:var(--ink-3);padding:8px 0}
.premature-weeks.hidden,.hidden{display:none}
.mt-4{margin-top:16px}
.breadcrumb{font-size:.85rem;color:var(--ink-3);margin:0 0 10px}

/* ================================================================
   compat v3: class markup hasil-scrape kalkulator.now tanpa aturan.
   Ditulis sekali, berlaku untuk seluruh 2100+ halaman.
   ================================================================ */

/* --- kartu konten (faq / related / teori) --- */
.card.faq,.card.related{margin:0 0 18px}
.faq-item{border-bottom:1px solid var(--line);padding:12px 0}
.faq-item:last-child{border-bottom:0}
.faq-item h3{font-size:.98rem;margin:0 0 6px}
.faq-item p{margin:0;color:var(--ink-2);font-size:.92rem}
.card.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.card.related li a{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);text-decoration:none}
.card.related li a:hover{border-color:var(--accent,#10528f)}
.card.related li strong{display:block;font-size:.92rem;margin-bottom:2px}
.card.related li span{font-size:.8rem;color:var(--ink-3)}

/* --- blok hasil lanjutan --- */
.result-detail{font-size:.78rem;color:var(--ink-3);margin-top:3px;line-height:1.35}
.results-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.breakdown-label{font-size:.84rem;color:var(--muted)}
.breakdown-value{font-weight:650}
.visualization-container{min-height:120px;text-align:center}
.visualization-container svg,.visualization-container canvas{max-width:100%;height:auto}
.liquid-info{margin-top:10px}

/* --- langkah & rumus --- */
.calculation-steps{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:14px 0}
.calculation-steps h4{font-size:.95rem;margin:0 0 8px}
.calculation-steps ol,.calculation-steps ul{margin:0;padding-left:20px;font-size:.9rem}
.calculation-steps li{margin:4px 0}
.formula-section,.formula{margin:12px 0}
.formula-section h4,.formula h4{font-size:.95rem;margin:0 0 6px}
.formula-row{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin:4px 0;font-size:.9rem}
.formula-label{color:var(--muted);min-width:120px}
.formula-content{font-family:ui-monospace,monospace;font-size:.88rem;background:var(--panel);padding:2px 6px;border-radius:4px}
.equation{font-family:ui-monospace,monospace;font-size:1rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin:12px 0;text-align:center;overflow-x:auto}

/* --- input tambahan --- */
.unit-symbol{font-size:.86rem;color:var(--ink-3);padding:8px 0;white-space:nowrap}
.unit-input-with-select{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.unit-input-with-select>div{flex:1 1 140px;min-width:110px}
.input-helper{font-size:.78rem;color:var(--ink-3);margin-top:2px}
.input-group input[type=date],.input-group input[type=text].unit-text{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);font-size:1rem;background:#fff;width:100%}
.calculation-inputs{margin-bottom:12px}
.calculation-inputs h4{font-size:.98rem;margin:0 0 8px}
.advanced-options{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.advanced-options h4{font-size:.95rem;margin:0 0 8px}
.currency-input,.currency-symbol{font-size:.9rem}
.currency-input{display:flex;align-items:center;gap:6px}
.currency-symbol{color:var(--ink-3)}

/* --- tab --- */
.tab-btn{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink-2);font-size:.88rem;cursor:pointer;margin:0 4px 6px 0}
.tab-btn.active,.tab-btn[aria-selected=true]{border-color:var(--accent,#10528f);background:var(--accent-soft,#eaf2fa);color:var(--accent-ink,#0d3f70);font-weight:600}

/* --- tool card (metronom dsb) --- */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tool-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:12px 14px}
.tool-title{font-weight:650;font-size:.95rem;margin-bottom:8px}
.tool-controls{display:flex;flex-direction:column;gap:8px;font-size:.88rem}
.tool-controls label{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tool-controls input[type=number]{width:90px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius)}
.practice-tools h4{font-size:.98rem;margin:0 0 10px}

/* --- quick nav (widget 219 halaman) --- */
.qnav{position:static}
.qnav-fab{position:fixed;right:16px;bottom:18px;z-index:40;width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:var(--accent,#10528f);color:#fff;box-shadow:0 4px 14px rgba(9,30,55,.28);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.qnav-fab:hover{opacity:.92}
.qnav-fab svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.qnav-sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:76vh;background:var(--bg,#fff);border-radius:16px 16px 0 0;box-shadow:0 -6px 30px rgba(9,30,55,.22);display:flex;flex-direction:column;overflow:hidden}
.qnav-sheet[hidden]{display:none}
.qnav-head{display:flex;align-items:center;gap:8px;padding:10px 16px 4px}
.qnav-grip{width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto}
.qnav-title{font-weight:650;font-size:1rem;flex:1}
.qnav-body{overflow-y:auto;padding:8px 16px 18px}
.qnav-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.qnav-list a{display:block;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:.88rem;text-decoration:none}
.qnav-list a:hover{border-color:var(--accent,#10528f)}
.qnav-all{display:inline-block;margin:10px 0 0;font-size:.86rem}
.qnav-subhead,.qnav-head-title{font-size:.84rem;color:var(--muted);margin:10px 0 6px;font-weight:650}
.qnav-chips{display:flex;flex-wrap:wrap;gap:6px}
.qnav-chip{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:.84rem;text-decoration:none;color:var(--ink)}
.qnav-chip:hover{border-color:var(--accent,#10528f)}
.qnav-count{display:inline-block;margin-left:4px;font-size:.75rem;color:var(--ink-3)}
body.qnav-open{overflow:hidden}

/* --- seksi head --- */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:22px 0 10px}
.sec-head h2{font-size:1.12rem;margin:0;padding-bottom:7px;border-bottom:2px solid var(--line);width:100%}
.card-title{font-size:1rem}

/* --- util (bootstrap-ish, dipakai markup scrape) --- */
.d-flex{display:flex}
.justify-content-between{justify-content:space-between}
.align-items-center{align-items:center}
.mb-2{margin-bottom:8px}
.mb-0{margin-bottom:0}
.me-2{margin-right:8px}
.mt-4{margin-top:16px}
.h-100{height:100%}
.text-decoration-none{text-decoration:none}
.shadow-sm{box-shadow:0 1px 3px rgba(9,30,55,.09)}
.rounded-pill{border-radius:999px}
.bg-primary{background:var(--accent,#10528f);color:#fff}
.text-primary{color:var(--accent,#10528f)}
.badge{display:inline-block;padding:3px 9px;font-size:.76rem;font-weight:650;line-height:1.4}
.h5{font-size:1rem;font-weight:650}
.col{flex:1 1 0;min-width:0}
.tag-item-col{display:flex;flex-direction:column}
.hover-card{transition:border-color .12s,box-shadow .12s}
.hover-card:hover{border-color:var(--accent,#10528f);box-shadow:0 2px 10px rgba(16,82,143,.11)}
.tag-name{display:flex;align-items:center;gap:4px}
.bi{display:inline-block;width:1em;height:1em;vertical-align:-.12em}
.bi-tag-fill::before{content:"\\1F3F7"}

/* ================================================================
   compat v4: kelas markup hasil impor yang belum punya aturan.
   Dihasilkan dari pemindaian 2117 halaman (kelas tanpa aturan di site.css),
   hanya menyentuh kelas yang sebelumnya tanpa gaya sama sekali.
   Sifatnya struktural: tata letak, jarak, dan ukuran — bukan warna merek.
   ================================================================ */

/* --- table_box (33 kelas) --- */
.amortization-table,.amortization-table-container,.amortization-table-wrapper,.bet-details-table,.breakdown-table,.breakdown-table-container,.comparison-container,.comparison-table,.comparison-table-container,.composition-table,.conversion-table,.conversion-table-container,.data-table,.data-table-container,.details-table,.info-table,.loan-type-adjustable,.matrix-container,.matrix-wrapper,.milestone-table,.paytable-container,.projection-table,.projection-table-container,.reference-table,.results-table,.results-table-container,.standard-comparison,.table-cell,.table-container,.table-responsive,.table-row,.table-scroll,.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 14px}
.amortization-table,.amortization-table-container,.amortization-table-wrapper,.bet-details-table,.breakdown-table,.breakdown-table-container,.comparison-container,.comparison-table,.comparison-table-container,.composition-table,.conversion-table,.conversion-table-container,.data-table,.data-table-container,.details-table,.info-table,.loan-type-adjustable,.matrix-container,.matrix-wrapper,.milestone-table,.paytable-container,.projection-table,.projection-table-container,.reference-table,.results-table,.results-table-container,.standard-comparison,.table-cell,.table-container,.table-responsive,.table-row,.table-scroll,.table-wrapper table{min-width:520px}

/* --- rowflex (92 kelas) --- */
.accordion-item,.allergen-item,.analysis-item,.assessment-item,.asset-row,.attribute-row,.bet-row,.bounds-row,.breakdown-item,.breakdown-row,.btn-row,.button-row,.calculator-row,.cash-flow-row,.cashflow-row,.category-item,.category-row,.checkbox-row,.classification-row,.comparison-item,.comparison-row,.conversion-arrow,.conversion-item,.custom-calculator-result-item,.custom-row,.custom-scale-row,.daily-value-item,.debt-row,.denomination-item,.detail-item,.detail-row,.details-row,.dimension-item,.dv-item,.equation-row,.equipment-row,.example-row,.food-guide-item,.food-item,.form-row,.fraction-line,.fraction-row,.gem-level-row,.info-item,.info-row,.ingredient-item,.ingredient-row,.label-row,.legend-item,.macro-item,.matrix-equation-entry,.matrix-row,.measurement-line,.menu-item,.metric-item,.metric-row,.milestone-item,.number-row,.nutrient-row,.nutrition-facts-item,.nutrition-item,.operand-row,.option-row,.outcome-row,.paytable-row,.percentage-row,.phase-info-row,.property-item,.property-row,.range-item,.reference-item,.related-value-item,.result-item,.result-row,.scale-item,.session-row,.size-item,.spec-item,.stage-row,.stat-item,.stat-row,.stats-item,.summary-item,.summary-row,.talent-row,.term-row,.timecard-summary-row,.timeline-row,.topping-row,.total-item,.total-row,.vitamin-item{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line-2)}
.accordion-item,.allergen-item,.analysis-item,.assessment-item,.asset-row,.attribute-row,.bet-row,.bounds-row,.breakdown-item,.breakdown-row,.btn-row,.button-row,.calculator-row,.cash-flow-row,.cashflow-row,.category-item,.category-row,.checkbox-row,.classification-row,.comparison-item,.comparison-row,.conversion-arrow,.conversion-item,.custom-calculator-result-item,.custom-row,.custom-scale-row,.daily-value-item,.debt-row,.denomination-item,.detail-item,.detail-row,.details-row,.dimension-item,.dv-item,.equation-row,.equipment-row,.example-row,.food-guide-item,.food-item,.form-row,.fraction-line,.fraction-row,.gem-level-row,.info-item,.info-row,.ingredient-item,.ingredient-row,.label-row,.legend-item,.macro-item,.matrix-equation-entry,.matrix-row,.measurement-line,.menu-item,.metric-item,.metric-row,.milestone-item,.number-row,.nutrient-row,.nutrition-facts-item,.nutrition-item,.operand-row,.option-row,.outcome-row,.paytable-row,.percentage-row,.phase-info-row,.property-item,.property-row,.range-item,.reference-item,.related-value-item,.result-item,.result-row,.scale-item,.session-row,.size-item,.spec-item,.stage-row,.stat-item,.stat-row,.stats-item,.summary-item,.summary-row,.talent-row,.term-row,.timecard-summary-row,.timeline-row,.topping-row,.total-item,.total-row,.vitamin-item:last-child{border-bottom:0}

/* --- value (84 kelas) --- */
.ability-score-value,.alternative-value,.analysis-value,.asset-value,.bet-number,.cashflow-number,.category-total,.category-value,.chi-value,.common-number,.common-number-card,.common-values,.comp-value,.comparison-value,.component-value,.conversion-value,.cost-value,.daily-value,.daily-value-bar,.daily-value-bar-container,.daily-value-label,.daily-value-percentage,.daily-value-text,.data-value,.debt-number,.detail-value,.details-value,.dimension-value,.dv-value,.ev-value,.formula-value,.frame-number,.fund-value,.highlight-value,.info-value,.ingredient-amount,.ingredient-number,.input-values,.item-number,.item-value,.key-date-value,.macro-value,.material-amount,.metric-value,.number-actions,.number-btn,.number-input,.number-inputs,.nutrient-amount,.nutrition-value,.operand-value,.parameter-value,.percentage-value,.ph-value,.ph-value-card,.phase-value,.property-value,.range-value,.related-value,.remove-number-btn,.result-value-container,.scale-value,.session-value,.slider-value-indicator,.spec-value,.standard-value,.stat-value,.statistic-value,.stats-value,.summary-stat-value,.summary-value,.term-number,.time-value,.timeline-value,.total,.total-label,.total-value,.value,.value-group,.value-input,.vitamin-values,.x-value,.y-value,.year-number{font-weight:650;font-variant-numeric:tabular-nums}

/* --- label (104 kelas) --- */
.ability-name,.ability-score-name,.allergen-name,.alternative-title,.analysis-label,.asset-name,.attribute-label,.benefit-title,.bf-label,.bounds-label,.breakdown-row-label,.breakdown-title,.category-name,.common-ratio-title,.comp-title,.comparison-label,.comparison-title,.component-label,.conversion-label,.coordinate-label,.cost-label,.currency-name,.custom-calculator-label,.denomination-label,.detail-label,.detail-title,.details-label,.dimension-label,.dv-label,.equation-label,.equation-title,.ev-label,.example-title,.food-name,.gem-name,.gki-label,.goal-title,.highlight-title,.identity-title,.impact-title,.info-label,.info-title,.input-label,.item-label,.item-name,.item-title,.key-date-title,.legend-label,.level-label,.macro-label,.macro-title,.marker-label,.material-title,.matrix-label,.metric-label,.metric-title,.milestone-title,.node-name,.nutrient-name,.nutrition-label,.nutrition-title,.odds-title,.operand-label,.operation-name,.phase-label,.phase-name,.point-label,.progress-label,.property-label,.property-title,.range-label,.reference-title,.related-label,.result-label,.result-subtitle,.risk-label,.scale-label,.section-label,.section-subheading,.section-title,.session-label,.size-label,.slider-label,.spec-label,.spectrum-label,.stat-label,.stat-name,.stat-title,.statistic-title,.stats-label,.stats-title,.summary-label,.summary-stat-title,.summary-title,.term-label,.time-label,.time-title,.timeline-label,.toggle-label,.trace-type-name,.unit-label,.vitamin-name,.weight-unit-label,.zone-label{font-size:.86rem;color:var(--ink-3);font-weight:650}

/* --- content (91 kelas) --- */
.analysis-content,.analysis-section,.applications-content,.applications-section,.bet-input-section,.breakdown-content,.breakdown-section,.calculation-section,.calculation-steps-container,.calculator-content,.calculator-panel,.category-section,.chart-explanation,.comparison-content,.comparison-section,.component-section,.container-section,.content-type-section,.conversion-explanation,.conversion-panel,.conversion-section,.converter-section,.data-input-method,.details-content,.details-section,.diagram-explanation,.dimensions-content,.dimensions-section,.example-content,.examples-content,.examples-section,.explanation-container,.explanation-content,.explanation-section,.explanation-text,.export-section,.formula-explanation,.graph-section,.guide-content,.info-section,.info-subsection,.input-method,.input-method-container,.input-method-section,.input-method-selector,.insights-content,.interpretation-content,.method-content,.method-details,.method-inputs,.method-option,.method-section,.method-tab,.method-tabs,.mode-content,.notes-content,.notes-section,.power-explanation,.project-section,.properties-content,.rates-panel,.reagent-section,.recommendation-content,.recommendations,.recommendations-container,.recommendations-content,.recommendations-list,.reference-section,.result-content,.result-section,.result-tab-content,.results-section,.section-container,.section-heading-secondary,.solution-steps,.speeds-content,.stats-content,.steps-container,.steps-content,.strategy-content,.sub-section,.summary-content,.summary-section,.tab-content,.tab-pane,.tab-panel,.team-section,.tips-content,.vector-input-section,.verification-section,.visualization-section{margin:0 0 14px}
.analysis-content,.analysis-section,.applications-content,.applications-section,.bet-input-section,.breakdown-content,.breakdown-section,.calculation-section,.calculation-steps-container,.calculator-content,.calculator-panel,.category-section,.chart-explanation,.comparison-content,.comparison-section,.component-section,.container-section,.content-type-section,.conversion-explanation,.conversion-panel,.conversion-section,.converter-section,.data-input-method,.details-content,.details-section,.diagram-explanation,.dimensions-content,.dimensions-section,.example-content,.examples-content,.examples-section,.explanation-container,.explanation-content,.explanation-section,.explanation-text,.export-section,.formula-explanation,.graph-section,.guide-content,.info-section,.info-subsection,.input-method,.input-method-container,.input-method-section,.input-method-selector,.insights-content,.interpretation-content,.method-content,.method-details,.method-inputs,.method-option,.method-section,.method-tab,.method-tabs,.mode-content,.notes-content,.notes-section,.power-explanation,.project-section,.properties-content,.rates-panel,.reagent-section,.recommendation-content,.recommendations,.recommendations-container,.recommendations-content,.recommendations-list,.reference-section,.result-content,.result-section,.result-tab-content,.results-section,.section-container,.section-heading-secondary,.solution-steps,.speeds-content,.stats-content,.steps-container,.steps-content,.strategy-content,.sub-section,.summary-content,.summary-section,.tab-content,.tab-pane,.tab-panel,.team-section,.tips-content,.vector-input-section,.verification-section,.visualization-section[hidden]{display:none}

/* --- box (507 kelas) --- */
.aa-count,.ability-abbr,.ability-score-card,.ability-score-mod,.accordion-header,.action-btn,.action-buttons,.actions,.add-bet-btn,.add-custom-btn,.add-debt-btn,.add-ingredient-btn,.add-item-btn,.add-tag-btn,.add-tag-container,.add-term-btn,.additional-grid,.additional-info,.additional-results,.additional-stat,.all-formats-container,.allergen-status,.alternative-card,.amortization-container,.amortization-controls,.amortization-schedule,.analysis-container,.analysis-grid,.angle-visualization,.application-card,.assessment-category,.assessment-options,.attribute-btn,.attribute-controls,.bac-level,.back-btn,.ball,.ball1,.ball2,.benefit-card,.bet-actions,.bet-details-container,.bet-type-option,.bets-container,.bf-image-card,.bf-svg-container,.bit-btn,.bit-option,.bounds-container,.bounds-separator,.breakdown,.breakdown-card,.breakdown-cell,.breakdown-column,.breakdown-container,.breakdown-diff,.breakdown-grid,.breakdown-header,.breakdown-heading,.breakdown-percent,.budget-bar,.button-group,.calc-btn,.calc-tab,.calculation-breakdown,.calculation-breakdown-container,.calculation-details,.calculation-details-container,.calculation-mode,.calculation-option,.calculation-options,.calculation-settings,.calculation-type,.calculator-container,.calculator-header,.calculator-mode,.calculator-tab,.calculator-tabs,.calculator-type-btn,.calendar-container,.calendar-view,.canvas-container,.card-body,.card-input-group,.card-rank,.card-suit,.cash-flow-actions,.cashflow-actions,.category-bar,.category-container,.category-filter,.category-header,.category-heading,.category-items,.category-progress,.category-score,.category-segment,.category-tab,.chart-wrapper,.charts-container,.charts-grid,.checkbox-container,.checkbox-grid,.checkbox-group,.checkbox-options,.checkboxes-group,.chi-square-card,.chord-display,.clear-btn,.clinical-interpretation,.close-btn,.cnt,.coefficient,.coefficient-group,.color-option,.common-btn,.common-food-card,.common-meaning,.common-ratio-card,.comparative-analysis,.comparison-bar-container,.comparison-card,.comparison-chart,.comparison-chart-container,.comparison-difference,.comparison-grid,.comparison-header,.component,.component-header,.compound-info,.control-btn,.conversion-card,.conversion-container,.conversion-grid,.conversion-results,.conversion-side,.conversion-symbol,.conversion-tabs,.convert-btn,.converter-calculator,.converter-footer,.copy-btn,.cost-analysis,.cost-analysis-container,.cost-breakdown,.create-matrix-btn,.currency-code,.currency-info,.currency-option,.currency-sym,.currency-sym-container,.curve-option,.curve-parameters,.custom-calculator-button,.custom-compound,.custom-confidence,.danger-level,.data-input-container,.date-group,.debt-actions,.decrease,.decrease-btn,.decrement-btn,.denominator-group,.detail-card,.detailed-analysis,.detailed-breakdown,.details-container,.details-grid,.diagram-container,.dimensions-container,.distribution-container,.distribution-params,.dk-calc,.element-count,.equals-sign,.equation-card,.equation-container,.equation-display,.equation-preview,.equation-symbol,.equation-text,.error-analysis,.ev-bar,.ev-bar-container,.ev-bar-wrapper,.event-date,.event-info,.example-btn,.example-buttons,.example-card,.example-expression,.example-range,.example-result,.example-type,.examples-container,.examples-grid,.expense-category,.export-btn,.fee-breakdown-container,.feedback-btn,.ffmi-zone,.file-option,.filter-group,.filter-tab,.food-grid,.food-macros,.food-points,.form-group,.formula-breakdown,.formula-breakdown-container,.formula-container,.formula-display,.formula-text,.fraction,.fraction-btn,.fraction-divider,.fraction-input-container,.fraction-part,.fraction-separator,.frame,.frame-header,.frame-score,.full-width,.function-btn,.function-input-container,.game-container,.gem-svg,.gem-type,.generate-btn,.gi-category-btn,.goal-card,.graph-container,.graph-controls,.graph-visualization,.green-button,.half,.half-width,.has-currency,.header,.highlight,.highlight-card,.hsl-component,.identity-card,.impact-option,.impact-pressure-container,.increase,.increase-btn,.increment-btn,.info-block,.info-card,.info-container,.info-grid,.ingredient-actions,.ingredient-category,.ingredient-checkbox,.ingredient-grid,.ingredient-info,.ingredients-container,.input-container,.input-wrapper,.interpretation,.interpretation-box,.interpretation-container,.item-calories,.item-details,.item-group,.item-header,.item-heading,.item-image,.item-options,.item-price,.item-protein-options,.item-type,.key-date,.macro-bar,.macro-bar-container,.macro-calories,.macro-card,.macro-percentage,.major,.material-card,.material-specs,.math-btn,.math-symbol,.matrix-cell,.matrix-display,.matrix-grid,.matrix-input-container,.matrix-properties,.matrix-result,.measurement-btn,.metric-card,.metric-detail,.milestone-date,.milestone-day,.minus,.mode-option,.mode-tab,.mode-tabs,.model-checkbox,.moderate,.moon-phase-card,.nav-btn,.negative,.next-btn,.node-info,.node-rank,.numerator-group,.numeric-only,.nutrition-breakdown,.nutrition-card,.nutrition-facts-nutrient,.odds-card,.odds-input-group,.odds-stat,.operation-btn,.operation-button,.operation-symbol,.operation-text,.operator,.operator-btn,.option-card,.option-group,.original,.outcome-input-group,.payment-breakdown,.payment-breakdown-container,.payment-schedule-container,.paytable-cell,.percent-sym,.percent-symbol,.percentage-focus,.percentage-reps,.percentage-sym,.percentage-symbol,.percentage-weight,.permission-checkbox,.ph-examples,.physics-breakdown,.physics-breakdown-container,.piano-container,.piano-keyboard,.platform-tab,.play-btn,.player-payoff,.plot-container,.plus,.point,.polynomial-builder,.polynomial-display,.positive,.powerball-setting,.preset-btn,.preset-buttons,.preset-container,.prev-btn,.pricing-subscription,.primary-btn,.progress,.progress-bar,.progress-bar-container,.progress-container,.progress-fill,.progress-labels,.properties-grid,.property-card,.punnett-header,.question,.question-group,.racial-bonus,.radio-options,.radio-text,.range,.range-container,.range-percent,.recommendation-box,.recommendation-container,.recommended-zone,.red-button,.reference-card,.region-preset-btn,.remove-bet-btn,.remove-btn,.remove-cash-flow-btn,.remove-cashflow-btn,.remove-debt-btn,.remove-expense-btn,.remove-ingredient-btn,.remove-item-btn,.remove-point-btn,.remove-row-btn,.remove-term-btn,.result,.result-category,.result-data,.result-details,.result-display,.result-formula,.result-header,.result-info,.result-percent,.result-percentage,.result-summary,.result-tab,.results-container,.results-overview,.results-tabs,.rgb-component,.risk-assessment,.risk-factor-card,.risk-factor-header,.risk-weight,.roof-dimensions,.sample-btn,.scale-segment,.schedule-container,.score-breakdown,.score-btn,.secondary,.secondary-btn,.secondary-results,.selected-items-container,.sensitivity-analysis,.separator,.sequence-display,.series-options,.setting-group,.simulation-detail,.size-presets,.ski-type-card,.slider-container,.small,.small-btn,.stage-point,.standard-gap,.star,.start-btn,.stat-card,.stat-detail,.stat-group,.statistic-card,.stats-card,.stats-detail,.stats-grid,.step-by-step,.strategy-tab,.summary-card,.summary-grid,.summary-stat,.summary-text,.swap-btn,.tab,.tab-button,.tab-buttons,.tab-container,.tab-header,.tabs,.tag-input-container,.tags-container,.talent-node,.talent-tree,.tax-breakdown,.tax-breakdown-container,.tax-rate,.team-header,.term-actions,.terms-container,.text-statistics,.three-columns,.time-card,.time-separator,.timeline,.timeline-container,.timeline-date,.timeline-event,.toggle-btn,.toggle-category,.toggle-container,.toggle-option,.toggle-switch,.tool-btn,.topic-option,.topping-check,.topping-checkbox,.topping-qty,.trace-type-option,.tree-points,.triangle-visualization,.two-column,.unit-circle-container,.variable,.variable-btn,.verification-container,.visual-representation,.visualization,.visualization-tabs,.vitamin-progress,.volume-converter,.wave-equation,.weekday-option,.weight-group,.yearly-breakdown-container,.zone-bar,.zone-percent,.zone-range,.zoom-btn{margin:0 0 14px}

/* --- slider (4 kelas) --- */
.range-slider,.slider,.slider-labels,.toggle-slider{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%}
.range-slider,.slider,.slider-labels,.toggle-slider input[type=range]{flex:1 1 160px;min-width:120px;width:auto}

/* --- icon (18 kelas) --- */
.benefit-icon,.chart-legend,.currency-icon,.example-chip,.food-icon,.gem-icon,.goal-icon,.graph-legend,.legend-color,.legend-text,.macro-icon,.marker,.percentile-marker,.risk-marker,.scale-marker,.timeline-marker,.tooltip-icon,.trace-type-icon{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;color:var(--ink-3)}

/* --- muted (55 kelas) --- */
.alternative-unit,.benefit-description,.calc-description,.calculation-description,.common-ratio-desc,.component-unit,.description,.detail-description,.dimension-unit,.example-description,.example-note,.form-description,.formula-unit,.goal-description,.help-text,.impact-description,.info-note,.info-text,.info-unit,.input-description,.input-help,.input-hint,.input-note,.input-with-unit,.item-description,.material-unit,.measurement-tip,.milestone-desc,.node-description,.nutrition-unit,.odds-description,.optimization-tips,.other-units-list,.phase-description,.property-note,.property-unit,.range-desc,.range-description,.result-description,.result-note,.result-unit,.time-unit,.time-unit-input,.tip-btn,.tooltip,.tooltip-text,.unit,.unit-conversion,.unit-conversions,.unit-display,.unit-selector,.unit-separator,.unit-suffix,.unit-sym,.unit-symbol-left{font-size:.8rem;color:var(--ink-3)}

/* --- inputfield (96 kelas) --- */
.aa-input,.area-inputs,.attribute-input,.ball-input,.bet-inputs,.bounds-inputs,.calc-inputs,.calculation-input,.calculation-type-inputs,.carb-calculator-input,.card-selector,.cash-flow-input,.cashflow-inputs,.color-select,.component-input,.component-select,.config-select,.conversion-inputs,.coordinate-input,.coordinate-inputs,.country-select,.curve-inputs,.custom-calculator-input,.custom-inputs,.date-input,.debt-inputs,.denomination-input,.dimension-input,.dimension-inputs,.duration-input,.element-input,.equation-input,.equation-inputs,.expression-input,.food-select,.form-inputs,.form-select,.fraction-input,.fraction-inputs,.frame-inputs,.full-select,.function-input,.function-inputs,.gem-quantity,.hsl-component-input,.hsl-input,.ingredient-inputs,.input-grid,.input-info,.input-suffix,.input-symbol,.input-with-controls,.item-quantity,.letter-input,.measurement-inputs,.mechanism-inputs,.name-input,.object-inputs,.operation-inputs,.percent-input,.percentage-input,.pitch-select,.point-input,.point-inputs,.pokemon-select,.problem-inputs,.pyramid-inputs,.quantity-btn,.quantity-control,.quantity-input,.range-input,.range-inputs,.rgb-component-input,.rgb-input,.score-selector,.selected,.series-inputs,.shape-inputs,.shape-select,.small-input,.split-inputs,.system-inputs,.term-input,.term-inputs,.test-inputs,.test-specific-inputs,.theorem-inputs,.time-input,.time-inputs,.timezone-select,.topping-quantity,.triangle-inputs,.type-select,.vector-inputs,.weight-input,.wide-input{width:100%;max-width:100%}
.aa-input,.area-inputs,.attribute-input,.ball-input,.bet-inputs,.bounds-inputs,.calc-inputs,.calculation-input,.calculation-type-inputs,.carb-calculator-input,.card-selector,.cash-flow-input,.cashflow-inputs,.color-select,.component-input,.component-select,.config-select,.conversion-inputs,.coordinate-input,.coordinate-inputs,.country-select,.curve-inputs,.custom-calculator-input,.custom-inputs,.date-input,.debt-inputs,.denomination-input,.dimension-input,.dimension-inputs,.duration-input,.element-input,.equation-input,.equation-inputs,.expression-input,.food-select,.form-inputs,.form-select,.fraction-input,.fraction-inputs,.frame-inputs,.full-select,.function-input,.function-inputs,.gem-quantity,.hsl-component-input,.hsl-input,.ingredient-inputs,.input-grid,.input-info,.input-suffix,.input-symbol,.input-with-controls,.item-quantity,.letter-input,.measurement-inputs,.mechanism-inputs,.name-input,.object-inputs,.operation-inputs,.percent-input,.percentage-input,.pitch-select,.point-input,.point-inputs,.pokemon-select,.problem-inputs,.pyramid-inputs,.quantity-btn,.quantity-control,.quantity-input,.range-input,.range-inputs,.rgb-component-input,.rgb-input,.score-selector,.selected,.series-inputs,.shape-inputs,.shape-select,.small-input,.split-inputs,.system-inputs,.term-input,.term-inputs,.test-inputs,.test-specific-inputs,.theorem-inputs,.time-input,.time-inputs,.timezone-select,.topping-quantity,.triangle-inputs,.type-select,.vector-inputs,.weight-input,.wide-input input,.aa-input,.area-inputs,.attribute-input,.ball-input,.bet-inputs,.bounds-inputs,.calc-inputs,.calculation-input,.calculation-type-inputs,.carb-calculator-input,.card-selector,.cash-flow-input,.cashflow-inputs,.color-select,.component-input,.component-select,.config-select,.conversion-inputs,.coordinate-input,.coordinate-inputs,.country-select,.curve-inputs,.custom-calculator-input,.custom-inputs,.date-input,.debt-inputs,.denomination-input,.dimension-input,.dimension-inputs,.duration-input,.element-input,.equation-input,.equation-inputs,.expression-input,.food-select,.form-inputs,.form-select,.fraction-input,.fraction-inputs,.frame-inputs,.full-select,.function-input,.function-inputs,.gem-quantity,.hsl-component-input,.hsl-input,.ingredient-inputs,.input-grid,.input-info,.input-suffix,.input-symbol,.input-with-controls,.item-quantity,.letter-input,.measurement-inputs,.mechanism-inputs,.name-input,.object-inputs,.operation-inputs,.percent-input,.percentage-input,.pitch-select,.point-input,.point-inputs,.pokemon-select,.problem-inputs,.pyramid-inputs,.quantity-btn,.quantity-control,.quantity-input,.range-input,.range-inputs,.rgb-component-input,.rgb-input,.score-selector,.selected,.series-inputs,.shape-inputs,.shape-select,.small-input,.split-inputs,.system-inputs,.term-input,.term-inputs,.test-inputs,.test-specific-inputs,.theorem-inputs,.time-input,.time-inputs,.timezone-select,.topping-quantity,.triangle-inputs,.type-select,.vector-inputs,.weight-input,.wide-input select{width:100%}

/* ================================================================
   compat v5: tombol dan baris tombol hasil impor.

   Tombol dari markup lama tidak berkelas `calculate-btn`/`reset-btn`, jadi ukurannya
   berbeda-beda antar halaman (32px sampai 56px). Aturan elemen `button` sudah memberi
   warna; lapisan ini hanya menyeragamkan tinggi, bentuk, jarak, dan pembungkus barisnya.
   ================================================================ */

/* --- 73 kelas tombol --- */
.add-entry-btn,.add-expense-btn,.add-food-btn,.add-guess-btn,.add-number-btn,.add-point-btn,.add-wall-btn,.alpha-btn,.analyze-btn,.board-btn,.build-btn,.calculate-button,.canvas-btn,.clear-guess-btn,.coordinate-tab,.count-btn,.delete-btn,.delete-period-btn,.disabled,.equation-btn,.gpu-preset-btn,.graph-btn,.growth-tab,.input-tab,.macro-tab,.new-game-btn,.nutrition-tab,.pagination-btn,.pi-btn,.play-again-btn,.provider-tab,.random-btn,.remove-appliance-btn,.remove-category-btn,.remove-course-btn,.remove-deduction-btn,.remove-dice-btn,.remove-drink-btn,.remove-element-btn,.remove-entry-btn,.remove-food-btn,.remove-fraction-btn,.remove-function-btn,.remove-holiday-btn,.remove-leg-btn,.remove-outcome-btn,.remove-period-btn,.remove-piece-btn,.remove-player-btn,.remove-product-btn,.remove-route-btn,.remove-tier-btn,.remove-type-btn,.remove-value-btn,.remove-var-btn,.remove-wall-btn,.reset-button,.resize-preset-btn,.salary-preset-btn,.sample-data-btn,.save-btn,.sim-button,.size-preset-btn,.solve-btn,.street-tab,.switch-btn,.table-tab-btn,.template-btn,.theory-btn,.toggle-button,.tracker-button,.tree-tab,.update-btn{min-height:38px;border-radius:var(--radius);padding:8px 14px}

/* --- 18 pembungkus baris tombol --- */
.appliance-actions,.category-actions,.data-point-actions,.entry-actions,.expense-actions,.food-actions,.fraction-actions,.item-actions,.leg-actions,.outcome-actions,.piece-actions,.point-actions,.remove-btn-group,.row-actions,.table-actions,.tier-actions,.variable-actions,.wall-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}

/* --- koreksi: kelas v4 yang harus tetap posisi tetap (bukan ikut aliran) --- */
.qnav-fab{margin:0;padding:0;min-height:0}
.qnav-fab:hover{filter:none;opacity:.92}
/* --- compat v6: tabel tanpa pembungkus + kontrol pencarian ---
   Tabel telanjang (<table> langsung di dalam kartu) tidak bisa digulir mendatar di layar
   sempit, jadi isinya meluber keluar kartu. Aturan ini memberi gulir pada wadah kartunya.
   input[type=search] bawaan peramban tampil tanpa border di sebagian tema. */

.card > table,
.card table:not(.tblwrap table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.card > table {
  margin: 0 0 14px;
}

input[type="search"],
input[type="text"]:not([class]),
input[type="number"]:not([class]) {
  border: 1px solid var(--line, #d6dae2);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
  min-height: 38px;
  color: inherit;
}