/*
  MEA TOOLS — PRODUCT STYLES
  ============================
  Diselaraskan dengan design language MEA Ecosystem (landing.css):
  navbar + footer sama seperti induk, tool card mengikuti pola
  ".tool-card" (Alat Populer), font Bebas Neue/Inter/JetBrains Mono,
  glass effect Fluent-style.

  Semua warna WAJIB memakai var(--mea-...) dari token-color.css milik
  induk domain — token-color.css di-link langsung, bukan disalin.
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;

  --glass-bg: rgba(22, 22, 22, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(20px) saturate(140%);

  --container: 1180px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--mea-border-strong) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mea-border-strong);
  border-radius: 999px;
  border: 2px solid var(--mea-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--mea-accent); }

body {
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%, rgba(59, 130, 246, 0.08), transparent 60%),
    var(--mea-bg);
  background-attachment: fixed;
  color: var(--mea-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

::selection { background: var(--mea-accent-muted); color: var(--mea-accent); }

:focus-visible {
  outline: 2px solid var(--mea-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.brand, .mea-name {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mea-accent-text);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(8, 17, 32, 0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-lockup img {
  width: 28px;
  height: 28px;
}

.brand-lockup span {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.05em;
  color: var(--mea-text-primary);
}

.nav-auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-auth a {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nav-auth .btn-ghost {
  color: var(--mea-text-secondary);
}
.nav-auth .btn-ghost:hover {
  color: var(--mea-text-primary);
  background: var(--mea-accent-muted);
}

.nav-auth .btn-outline {
  border: 1px solid var(--mea-border-strong);
  color: var(--mea-text-primary);
}
.nav-auth .btn-outline:hover {
  border-color: var(--mea-accent);
  background: var(--mea-accent-muted);
}

/* ============================================================
   HERO / PAGE HEAD
   ============================================================ */

.mea-hero {
  padding: 56px 0 40px;
}

.mea-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 48px);
  letter-spacing: 0.02em;
  margin: 10px 0 8px;
  color: var(--mea-text-primary);
}

.mea-hero p {
  font-size: 15px;
  color: var(--mea-text-secondary);
  max-width: 50ch;
}

/* ---------- Search (custom, no browser default look) ---------- */

.mea-search-wrap {
  position: relative;
  margin: 28px 0 20px;
  max-width: 480px;
}

.mea-search {
  width: 100%;
  padding: 13px 16px 13px 42px;
  background: var(--mea-surface);
  border: 1px solid var(--mea-border);
  border-radius: 999px;
  color: var(--mea-text-primary);
  font-size: 14px;
  font-family: var(--font-body);
  appearance: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mea-search::placeholder { color: var(--mea-text-muted); }

.mea-search:focus {
  outline: none;
  border-color: var(--mea-accent);
  background: var(--mea-accent-muted);
}

.mea-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--mea-text-muted);
  pointer-events: none;
}

/* ---------- Category filter (custom pill buttons) ---------- */

.mea-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 40px;
}

.mea-category-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--mea-text-secondary);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.mea-category-btn:hover {
  color: var(--mea-text-primary);
  border-color: var(--mea-border);
}

.mea-category-btn.active {
  color: var(--mea-accent-text);
  background: var(--mea-accent-muted);
  border-color: var(--mea-accent-muted);
}

/* ============================================================
   TOOL CARD GRID (ringan, mengikuti pola "Alat Populer" induk)
   ============================================================ */

/* Grid tanpa card: garis pembatas pada grid itu sendiri (border-top +
   border-left di wrapper, tiap item cuma nambah border-right +
   border-bottom), bukan kotak per-item yang punya background/blur
   sendiri. Sesuai brand -- no card. */
.mea-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--mea-border);
  border-left: 1px solid var(--mea-border);
  margin-bottom: 64px;
}

@media (max-width: 900px) {
  .mea-tool-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .mea-tool-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .mea-tool-grid { grid-template-columns: 1fr; }
}

.mea-tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px 20px 20px;
  border-right: 1px solid var(--mea-border);
  border-bottom: 1px solid var(--mea-border);
  overflow: hidden;
  transition: padding-left 0.25s cubic-bezier(.2,.8,.2,1);
}

/* Garis aksen tipis di sisi kiri, muncul dari bawah ke atas saat hover */
.mea-tool-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--mea-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}

.mea-tool-card:hover {
  padding-left: 24px;
}
.mea-tool-card:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}

.mea-tool-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mea-accent-muted);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), background 0.25s ease;
}

.mea-tool-card:hover .mea-tool-icon {
  transform: translateY(-3px) scale(1.08);
  background: var(--mea-accent);
}

.mea-tool-icon svg {
  width: 19px;
  height: 19px;
  stroke: var(--mea-accent);
  fill: none;
  transition: stroke 0.25s ease;
}

.mea-tool-card:hover .mea-tool-icon svg {
  stroke: #061121;
}

.mea-tool-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--mea-text-primary);
  transition: color 0.2s ease;
}

.mea-tool-card:hover .mea-tool-name {
  color: var(--mea-accent-text);
}

.mea-tool-desc {
  font-size: 12px;
  color: var(--mea-text-secondary);
  line-height: 1.5;
  flex: 1;
}

/* Perangkat low-tier: animasi dimatikan lewat aturan global
   :root[data-perf="low"] * { transition: none !important } yang sudah
   ada -- tidak perlu override tambahan di sini. */

.mea-empty-state {
  grid-column: 1 / -1;
  padding: 40px 4px;
  color: var(--mea-text-muted);
  font-size: 14px;
  text-align: center;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--mea-border);
  padding: 28px 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-logo-static {
  width: 20px;
  height: auto;
  flex-shrink: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: var(--mea-text-secondary);
}
.footer-links a:hover { color: var(--mea-accent-hover); }

.footer-copyright {
  font-size: 12px;
  color: var(--mea-text-muted);
}

.footer-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mea-text-muted);
}

@media (max-width: 560px) {
  .footer-row { justify-content: flex-start; }
  .footer-row-top .footer-copyright { order: 3; width: 100%; }
}

/* ============================================================
   ADAPTIVE PERFORMANCE TIERS
   ============================================================
   Diatur oleh shared/perf-detect.js lewat <html data-perf="...">.
   Sumbu terpisah dari data-theme, jadi aman dikombinasikan dengan
   tema apa pun. Patokan terbawah: kelas Samsung J2 Prime.

   Variabel yang dikendalikan:
     --glass-blur     nilai backdrop-filter kartu & navbar
     --glass-bg       latar kartu/navbar (dibuat lebih pekat saat blur mati)
     --mea-shadow     bayangan komponen
     --perf-header-bg latar navbar
   ============================================================ */

/* HIGH: tampilan penuh (default, sama seperti sebelumnya) */
:root,
:root[data-perf="high"] {
  --mea-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  --perf-header-bg: rgba(8, 17, 32, 0.55);
}

/* MID: blur ringan + shadow ringan, animasi dikurangi */
:root[data-perf="mid"] {
  --glass-blur: blur(6px);
  --glass-bg: rgba(22, 22, 22, 0.72);
  --perf-header-bg: rgba(8, 17, 32, 0.78);
  --mea-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
:root[data-perf="mid"] body {
  background-attachment: scroll;
}
/* LOW: flat total. Tanpa blur, tanpa shadow, tanpa animasi. */
:root[data-perf="low"] {
  --glass-blur: none;
  --glass-bg: var(--mea-surface, #161616);
  --perf-header-bg: var(--mea-bg, #081120);
  --mea-shadow: none;
}
:root[data-perf="low"] {
  scroll-behavior: auto;
}
:root[data-perf="low"] body {
  background: var(--mea-bg);
  background-attachment: scroll;
}
:root[data-perf="low"] *,
:root[data-perf="low"] *::before,
:root[data-perf="low"] *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
}
/* Header & kartu memakai variabel tier. Kalau blur "none",
   backdrop-filter benar-benar tidak dirender (bukan sekadar 0px). */
.site-header {
  background: var(--perf-header-bg);
}

/* ============================================================
   PERF UI — tombol ngambang, panel, toast
   Sengaja TANPA backdrop-filter & tanpa animasi berat, supaya
   kontrolnya sendiri tidak ikut membebani perangkat lemah.
   ============================================================ */

.mea-perf-btn {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1100;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--mea-text-primary);
  background: var(--mea-surface, #161616);
  border: 1px solid var(--mea-border-strong, rgba(255, 255, 255, 0.16));
  box-shadow: var(--mea-shadow);
  opacity: 0.85;
}
.mea-perf-btn:hover,
.mea-perf-btn:focus-visible,
.mea-perf-btn[aria-expanded="true"] {
  opacity: 1;
  border-color: var(--mea-accent);
  color: var(--mea-accent);
}

.mea-perf-panel {
  position: fixed;
  right: 16px;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  z-index: 1100;
  width: 220px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  border-radius: 12px;
  background: var(--mea-surface, #161616);
  border: 1px solid var(--mea-border-strong, rgba(255, 255, 255, 0.16));
  box-shadow: var(--mea-shadow);
  color: var(--mea-text-primary);
}
.mea-perf-panel[hidden] { display: none; }

.mea-perf-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mea-accent-text, var(--mea-accent));
  margin-bottom: 2px;
}
.mea-perf-current {
  font-size: 12px;
  color: var(--mea-text-muted);
  margin-bottom: 10px;
}
.mea-perf-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mea-perf-option {
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--mea-text-secondary);
  border: 1px solid transparent;
}
.mea-perf-option:hover { background: var(--mea-accent-muted); }
.mea-perf-option.is-active {
  color: var(--mea-accent);
  background: var(--mea-accent-muted);
  border-color: var(--mea-accent);
}

.mea-perf-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 1100;
  max-width: calc(100vw - 96px);
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: var(--mea-text-primary);
  background: var(--mea-surface, #161616);
  border: 1px solid var(--mea-border-strong, rgba(255, 255, 255, 0.16));
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mea-perf-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Di tier Low semua transisi dimatikan; toast tetap harus terlihat. */
:root[data-perf="low"] .mea-perf-toast {
  transition: none !important;
}
:root[data-perf="low"] .mea-perf-toast.is-show {
  transform: translate(-50%, 0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .mea-perf-toast { transition: none; }
}

/* ============================================================
   TOMBOL BERSAMA (mea-btn-primary / mea-btn-secondary)
   =============================================================
   Dipindah ke sini dari CSS per-tool karena 33+ tool mendefinisikan
   style ini persis sama. Tool yang butuh lebar beda (flex: 1,
   atau tanpa width: 100%) cukup override properti itu saja
   di CSS tool masing-masing — jangan tulis ulang semuanya.
*/
.mea-btn-primary {
  width: 100%;
  padding: 13px;
  background: var(--mea-accent);
  color: #061121;
  border: none;
  border-radius: var(--mea-radius-md);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.mea-btn-primary:hover { background: #ffffff; transform: translateY(-1px); }
.mea-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.mea-btn-secondary {
  width: 100%;
  padding: 11px;
  background: transparent;
  color: var(--mea-text-secondary);
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mea-btn-secondary:hover { border-color: var(--mea-border-strong); color: var(--mea-text-primary); }


/* ============================================================
   LINK "KEMBALI" & BLOK FAQ BERSAMA
   =============================================================
   Dipindah ke sini dari CSS per-tool karena polanya identik
   di hampir semua tool (57-58 dari 60 file). Tool yang butuh
   tampilan beda cukup override selector ini di CSS-nya sendiri.
*/
.mea-back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mea-text-muted);
  margin-bottom: 20px;
}
.mea-back-link:hover { color: var(--mea-accent-text); }

.mea-faq { margin-top: 48px; border-top: 1px solid var(--mea-border); padding-top: 24px; }
.mea-faq h2 { font-size: 16px; font-weight: 600; margin: 0 0 16px; color: var(--mea-text-primary); }
.mea-faq-item { margin-bottom: 4px; border-bottom: 1px solid var(--mea-border); }
.mea-faq-item p { margin: 0 4px 16px; font-size: 13.5px; color: var(--mea-text-secondary); }
.mea-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mea-text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mea-faq-item summary::-webkit-details-marker { display: none; }
.mea-faq-item summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  color: var(--mea-text-muted);
  transition: transform 0.2s ease;
}
.mea-faq-item summary:hover { color: var(--mea-accent-text); }
.mea-faq-item[open] summary::after { transform: rotate(45deg); }

/* Lebar default konten tool (dropzone, field, dll). Dulu 13 dari 14
   tool PDF tidak punya pembatas ini sama sekali -> jadi full-width
   1180px, beda dari tool lain yang rata-rata 640px (gaya "blog",
   konten di tengah dengan jarak). Sekarang dijadikan default di sini
   supaya SEMUA tool (termasuk tool baru nanti) otomatis konsisten.
   Tool yang sengaja butuh lebih lebar tinggal override nilai ini
   di CSS-nya sendiri (lihat beberapa tool PDF yang masih pakai
   680-880px karena kontennya memang perlu lebih lega). */
.mea-progress-bar-wrap {
  margin-top: 12px;
  height: 6px;
  border-radius: var(--mea-radius-sm);
  background: var(--mea-surface);
  border: 1px solid var(--mea-border);
  overflow: hidden;
}
.mea-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--mea-accent);
  transition: width 0.2s ease;
}
:root[data-perf="low"] .mea-progress-bar { transition: none !important; }

/* Varian "indeterminate" -- dipakai saat tool TIDAK tahu persentase
   progress sesungguhnya (library tidak kasih callback granular).
   Animasi geser terus menandakan "sedang berjalan" tanpa klaim angka
   pasti. Pakai <div class="mea-progress-bar-wrap"><div
   class="mea-progress-bar mea-progress-bar--indeterminate"></div></div>. */
.mea-progress-bar--indeterminate {
  width: 40% !important;
  animation: mea-progress-indeterminate 1.1s ease-in-out infinite;
}
@keyframes mea-progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
:root[data-perf="low"] .mea-progress-bar--indeterminate {
  animation-duration: 1.6s;
}
@media (prefers-reduced-motion: reduce) {
  .mea-progress-bar--indeterminate { animation: none; width: 60% !important; }
}

.mea-tool-page {
  max-width: 640px;
  padding-top: 40px;
  padding-bottom: 64px;
}

.mea-tool-header { margin-bottom: 32px; }

/* ============================================================
   DROP ZONE (upload file) & AREA FILE TERPILIH -- BERSAMA
   =============================================================
   Dipindah ke sini karena identik di 28-33 dari 60 tool.
   Tool dengan tampilan drop-zone beda (mis. multi-file list)
   boleh override selector ini di CSS-nya sendiri.
*/
.mea-drop-zone {
  border: 1px dashed var(--mea-border-strong);
  border-radius: var(--mea-radius-lg);
  padding: 48px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.mea-drop-zone:hover,
.mea-drop-zone.drag-active { border-color: var(--mea-accent); background: var(--mea-accent-muted); }
.mea-drop-zone p { margin: 0; color: var(--mea-text-secondary); font-size: 14px; }
.mea-drop-zone span { color: var(--mea-accent-text); font-weight: 600; }
.mea-drop-zone .dz-sub { font-size: 12px; color: var(--mea-text-muted); margin-top: 6px; }


.mea-field-hint { margin: 8px 0 0; font-size: 12px; color: var(--mea-text-muted); }

.mea-selected-size { font-size: 12px; color: var(--mea-text-muted); }
.mea-selected-name {
  font-size: 13.5px;
  color: var(--mea-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mea-selected-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mea-selected-remove {
  background: transparent;
  border: none;
  color: var(--mea-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mea-selected-remove:hover { color: var(--mea-danger-text); background: var(--mea-danger-bg); }

.mea-quality-group { display: flex; gap: 8px; }
.mea-quality-btn {
  flex: 1;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  color: var(--mea-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mea-quality-btn:hover { border-color: var(--mea-border-strong); }
.mea-quality-btn.active { border-color: var(--mea-accent); background: var(--mea-accent-muted); color: var(--mea-accent-text); }


.mea-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mea-result-header label { font-size: 13px; color: var(--mea-text-secondary); }

/* ============================================================
   ELEMEN FORM KECIL YANG SERING DIPAKAI BERSAMA
   =============================================================
   Hanya selector yang nilainya identik/dominan jelas di banyak
   file yang dipindah ke sini. Variasi field/input lain SENGAJA
   dibiarkan di CSS masing-masing tool karena beragam dan nilai
   mayoritasnya tidak cukup dominan untuk aman digabung.
*/
.mea-copy-btn:hover { border-color: var(--mea-accent); background: var(--mea-accent-muted); }
.mea-slider { width: 100%; margin-top: 6px; accent-color: var(--mea-accent); }
.mea-field > label { display: block; font-size: 13px; color: var(--mea-text-secondary); margin-bottom: 8px; }

/* ============================================================
   JUDUL & DESKRIPSI HEADER TOOL (h1 + p) -- BERSAMA
   =============================================================
   Sebelumnya tiap tool mendefinisikan ulang sendiri dengan nilai
   max-width yang beda-beda (50ch-60ch) -- sekarang disatukan di
   sini pakai nilai yang paling umum dipakai (55ch). Ubah di sini
   kalau mau ganti standarnya untuk SEMUA tool sekaligus.
*/
.mea-tool-header h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 38px);
  letter-spacing: 0.02em;
  margin: 8px 0 8px;
  color: var(--mea-text-primary);
}
.mea-tool-header p {
  font-size: 14.5px;
  color: var(--mea-text-secondary);
  margin: 0;
  max-width: 50ch;
}