/* =====================================================================
   KOTAK ALAT — shared.css  (v6 · ditulis ulang dari nol)
   ---------------------------------------------------------------------
   Sistem desain "Soft Productivity", diselaraskan penuh dengan tema
   beranda & mockup pratinjau:
     · Latar netral hangat, tinta near-black, hijau sebagai aksen utama.
     · Kartu putih bersih di atas panel abu lembut; sudut membulat besar.
     · Palet pastel (green/amber/purple/blue/rose) untuk tile & pill.
     · Bayangan berlapis halus, hover terangkat, transisi lembut.
     · Tipografi: Inter (UI), JetBrains Mono (data/label), Fraunces (aksen).
     · Dark mode penuh via variabel. Aksesibel (fokus, kontras, motion).
   SATU sumber kebenaran untuk seluruh komponen lintas-halaman.
   ===================================================================== */

/* =========================================================
   1. TOKEN / VARIABEL
   ========================================================= */
:root{
  /* Netral & permukaan */
  --bg:#FAFAF8; --bg-soft:#F1F1ED; --card:#FFFFFF; --card-2:#FBFBF9;
  --ink:#15171C; --ink-soft:#565C68; --muted:#7A7F8A;
  --line:#E7E7E1; --line-strong:#D5D5CD; --soft:#F5F5F1;
  --input-bd:#DBDBD3; --placeholder-ghost:#A6A69E;
  --neutral:#F1F1ED; --neutral-hover:#E7E7E1; --dash-border:#D5D5CD;

  /* Aksen inti (hijau) */
  --green:#0B8C5A; --green-deep:#0A7A4E; --green-wash:#E7F4EE; --green-panel:#0B8C5A;
  --red:#C4453A; --red-wash:#FBEAE8;
  --amber:#B5791A; --amber-wash:#FBF1DE;
  --blue:#2563A8; --blue-wash:#E6EEF7;
  --purple:#7C4DB6; --purple-wash:#F0EAFA;

  /* Palet pastel (tile / pill / event chip) */
  --p-green:#CFEBDD;  --p-green-ink:#0A6A44;
  --p-amber:#F7E3B0;  --p-amber-ink:#8A5E10;
  --p-purple:#E3D6F5; --p-purple-ink:#5C3E92;
  --p-blue:#CFE0F2;   --p-blue-ink:#274F86;
  --p-rose:#F6D6DD;   --p-rose-ink:#9A3550;
  --p-teal:#CDECE7;   --p-teal-ink:#1C6E63;

  /* Bentuk & bayangan */
  --r-xs:8px; --r-sm:11px; --r:14px; --r-lg:18px; --r-xl:24px;
  --shadow:0 1px 2px rgba(16,18,21,.05);
  --shadow-sm:0 1px 2px rgba(16,18,21,.05);
  --shadow-soft:0 1px 2px rgba(16,18,21,.04),0 8px 28px -18px rgba(16,18,21,.20);
  --shadow-md:0 4px 14px -6px rgba(16,18,21,.16);
  --shadow-lift:0 18px 46px -22px rgba(16,18,21,.34);
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--green-deep);

  /* Tipografi */
  --ff-sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-serif:'Fraunces',Georgia,serif;
  --ff-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --gutter:clamp(16px,4vw,24px);
}
[data-theme="dark"]{
  --bg:#0C0E11; --bg-soft:#14171C; --card:#171B21; --card-2:#141821;
  --ink:#ECEEF1; --ink-soft:#9AA0AC; --muted:#868C98;
  --line:#242A31; --line-strong:#333A43; --soft:#12151A;
  --input-bd:#2C333C; --placeholder-ghost:#586170;
  --neutral:#1B2027; --neutral-hover:#242A31; --dash-border:#333A43;

  --green:#1FB877; --green-deep:#27C885; --green-wash:#12241C; --green-panel:#15936A;
  --red:#E27A6E; --red-wash:#2E1B19;
  --amber:#D6A24A; --amber-wash:#2E2515;
  --blue:#5B9BD8; --blue-wash:#15212E;
  --purple:#A585D8; --purple-wash:#211A32;

  --p-green:#1B3A2C;  --p-green-ink:#84E3B8;
  --p-amber:#3A2F14;  --p-amber-ink:#EBC46E;
  --p-purple:#2B2340; --p-purple-ink:#C7ADEF;
  --p-blue:#182B41;   --p-blue-ink:#93C3EF;
  --p-rose:#3A1E27;   --p-rose-ink:#F2ADBE;
  --p-teal:#123230;   --p-teal-ink:#7FD8CC;

  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-soft:0 1px 2px rgba(0,0,0,.4),0 10px 34px -20px rgba(0,0,0,.75);
  --shadow-md:0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lift:0 22px 58px -26px rgba(0,0,0,.85);
}

/* =========================================================
   2. RESET & DASAR
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--ff-sans);background:var(--bg);color:var(--ink);
  line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .2s ease,color .2s ease;overflow-x:hidden;min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:1rem;color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.15}
::selection{background:var(--p-green);color:var(--p-green-ink)}

/* Latar aura lembut — pasang <div class="aura"> tepat setelah <body> */
.aura{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aura::before,.aura::after{content:"";position:absolute;border-radius:50%;filter:blur(96px);opacity:.42}
.aura::before{width:560px;height:560px;left:-170px;top:-160px;
  background:radial-gradient(circle,var(--p-green),transparent 70%)}
.aura::after{width:560px;height:560px;right:-190px;top:120px;
  background:radial-gradient(circle,var(--p-purple),transparent 70%)}
[data-theme="dark"] .aura::before,[data-theme="dark"] .aura::after{opacity:.24}

/* =========================================================
   3. AKSESIBILITAS
   ========================================================= */
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;font-size:.9rem}
.skip-link:focus{left:0}
.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}

/* =========================================================
   4. LAYOUT
   ========================================================= */
/* Kontainer tunggal & konsisten untuk SEMUA halaman.
   .wrap dan .wrap-wide sengaja dibuat identik agar tidak ada lagi
   halaman yang tampak lebar/sempit tak menentu. Satu lebar standar. */
.wrap,.wrap-wide{width:100%;max-width:min(94vw,1200px);margin:0 auto;padding:0 clamp(18px,4vw,32px)}

/* =========================================================
   5. NAVIGASI (kaca, sticky, selaras beranda)
   ========================================================= */
nav{position:sticky;top:0;z-index:50}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding:9px 13px;
  background:color-mix(in srgb,var(--card) 80%,transparent);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1rem;letter-spacing:-.02em;flex-shrink:0}
.brand a{display:flex;align-items:center;gap:10px}
.brand .dot{width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--green-deep),var(--green));
  display:grid;place-items:center;color:#fff;font-size:.95rem;box-shadow:0 6px 16px -6px var(--green)}
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav-links a{color:var(--ink-soft);font-weight:600;font-size:.82rem;letter-spacing:.01em;
  padding:7px 11px;border-radius:9px;transition:.15s;white-space:nowrap}
.nav-links a:hover{background:var(--bg-soft);color:var(--ink)}
.nav-links a.active,.nav-links a[aria-current="page"]{
  color:var(--green-deep);background:var(--green-wash);font-weight:700}

/* Hamburger (muncul di layar kecil) */
.nav-burger{display:none;width:38px;height:38px;border-radius:10px;background:var(--bg-soft);
  border:1px solid var(--line);flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-burger span{width:17px;height:2px;border-radius:2px;background:var(--ink);transition:.2s}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Toggle bahasa & tema */
.theme-toggle{width:36px;height:36px;border-radius:10px;background:var(--bg-soft);
  border:1px solid var(--line);display:grid;place-items:center;font-size:.95rem;transition:.15s;margin-left:4px}
.theme-toggle:hover{background:var(--neutral-hover);border-color:var(--line-strong)}
.lang-toggle{font-weight:700;font-size:.82rem}

/* Tombol Akun / login (disuntik auth.js) */
/* — Belum login: menonjol, gradien hijau (ajakan "Masuk"). */
.ka-acct-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;
  border-radius:10px;background:linear-gradient(135deg,var(--green-deep),var(--green));
  color:#fff;font-weight:700;font-size:.82rem;line-height:1;transition:.16s;margin-left:6px;
  border:1px solid transparent;box-shadow:0 8px 18px -8px var(--green);white-space:nowrap}
.ka-acct-btn:hover{transform:translateY(-1px);box-shadow:0 12px 22px -8px var(--green)}
.ka-acct-btn > span{display:inline-flex;align-items:center}
.ka-acct-btn .av{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  font-size:.66rem;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:-.02em}
/* — Sudah login: chip tenang (kartu putih + avatar berwarna), tidak "berteriak". */
.ka-acct-btn.is-user{background:var(--card);color:var(--ink);border-color:var(--line);
  box-shadow:var(--shadow-soft);padding:0 13px 0 6px;font-weight:600}
.ka-acct-btn.is-user:hover{background:var(--bg-soft);border-color:var(--line-strong)}
.ka-acct-btn.is-user .av{width:26px;height:26px;border-radius:50%;font-size:.68rem;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.35)}
.ka-acct-btn.is-user .lbl{color:var(--ink-soft);font-size:.8rem}

/* =========================================================
   6. HEADER TOOL (judul + aksi backup/restore)
   ========================================================= */
.tool-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:30px 0 22px}
.tool-title{display:flex;align-items:center;gap:15px}
.tool-title .ti{width:52px;height:52px;border-radius:15px;flex-shrink:0;
  background:linear-gradient(150deg,var(--p-green),var(--card));
  border:1px solid var(--line);box-shadow:var(--shadow-soft);
  display:grid;place-items:center;font-size:1.5rem;line-height:1}
.tool-title h1{font-weight:800;font-size:1.75rem;letter-spacing:-.035em}
.tool-title p{color:var(--muted);font-weight:500;font-size:.9rem;margin-top:3px}

.io-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.io-btns .save-note{font-size:.8rem;color:var(--muted);font-weight:500;font-family:var(--ff-mono);
  display:inline-flex;align-items:center;gap:5px}
.io-btns .save-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);opacity:.7}
.io-btns button{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.83rem;
  padding:9px 15px;border-radius:11px;background:var(--card);border:1px solid var(--line);
  color:var(--ink);box-shadow:var(--shadow-soft);transition:.16s}
.io-btns button:hover{background:var(--bg-soft);border-color:var(--line-strong);transform:translateY(-1px)}

/* =========================================================
   7. KARTU & PANEL
   ========================================================= */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;margin-bottom:18px;box-shadow:var(--shadow-soft)}
.panel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;margin-bottom:18px;box-shadow:var(--shadow-soft)}
.card h2,.panel-card h2{font-weight:800;font-size:1.12rem;letter-spacing:-.02em;
  display:flex;align-items:center;gap:9px}
.card .csub,.panel-card .csub{font-size:.85rem;color:var(--muted);margin:5px 0 18px}

/* Panel abu lembut (pembungkus, seperti kolom mockup) */
.soft-panel{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--shadow-soft)}
.soft-panel > .sp-head{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:2px 2px 12px;display:flex;align-items:center;gap:7px}

/* Kartu putih bersih (item daftar; seperti "Sesi fokus pagi" di mockup) */
.clean-card{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow-soft);transition:.16s}
.clean-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}
.clean-card .cc-body{flex:1;min-width:0}
.clean-card .cc-title{font-weight:700;font-size:.95rem;letter-spacing:-.01em;color:var(--ink)}
.clean-card .cc-sub{font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.4}

/* =========================================================
   8. TILE IKON PASTEL (thumbnail membulat)
   ========================================================= */
.tile{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  font-size:1.25rem;line-height:1}
.tile-sm{width:36px;height:36px;border-radius:10px;font-size:1.05rem}
.tile-lg{width:52px;height:52px;border-radius:15px;font-size:1.5rem}
.tile-green{background:var(--p-green);color:var(--p-green-ink)}
.tile-amber{background:var(--p-amber);color:var(--p-amber-ink)}
.tile-purple{background:var(--p-purple);color:var(--p-purple-ink)}
.tile-blue{background:var(--p-blue);color:var(--p-blue-ink)}
.tile-rose{background:var(--p-rose);color:var(--p-rose-ink)}
.tile-teal{background:var(--p-teal);color:var(--p-teal-ink)}

/* =========================================================
   9. PILL STATUS BER-WARNA
   ========================================================= */
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--ff-mono);font-size:.62rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:20px;white-space:nowrap}
.pill-green{background:var(--p-green);color:var(--p-green-ink)}
.pill-amber{background:var(--p-amber);color:var(--p-amber-ink)}
.pill-purple{background:var(--p-purple);color:var(--p-purple-ink)}
.pill-blue{background:var(--p-blue);color:var(--p-blue-ink)}
.pill-rose{background:var(--p-rose);color:var(--p-rose-ink)}
.pill-ghost{background:var(--bg-soft);color:var(--muted);border:1px solid var(--line)}

/* Event chip (blok berwarna, seperti kalender di mockup) */
.evt{display:block;border-radius:10px;padding:8px 12px;font-size:.82rem;font-weight:700;
  letter-spacing:-.01em;margin-bottom:8px}
.evt-green{background:var(--p-green);color:var(--p-green-ink)}
.evt-amber{background:var(--p-amber);color:var(--p-amber-ink)}
.evt-purple{background:var(--p-purple);color:var(--p-purple-ink)}
.evt-blue{background:var(--p-blue);color:var(--p-blue-ink)}

/* =========================================================
   10. TOMBOL
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;
  font-size:.95rem;padding:12px 22px;border-radius:12px;transition:.16s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--green-deep),var(--green));color:#fff;
  box-shadow:0 12px 26px -12px var(--green)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px var(--green)}
.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-soft)}
.btn-ghost:hover{background:var(--bg-soft);border-color:var(--line-strong);transform:translateY(-2px)}
.btn-sm{padding:8px 14px;font-size:.85rem;border-radius:10px}
.btn:disabled{opacity:.55;cursor:default;transform:none!important}

/* =========================================================
   11. FORM
   ========================================================= */
input[type=text],input[type=date],input[type=number],input[type=email],input[type=password],
input[type=search],input[type=time],textarea,select{
  width:100%;padding:11px 14px;border:1px solid var(--input-bd);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);transition:.15s;font-size:.95rem}
input::placeholder,textarea::placeholder{color:var(--placeholder-ghost)}
input:focus,textarea:focus,select:focus{border-color:var(--green);outline:none;
  box-shadow:0 0 0 3px var(--green-wash)}
label{font-weight:600;font-size:.82rem;color:var(--ink-soft)}

/* Segmented control / filter chips */
.seg{display:inline-flex;gap:4px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:12px;padding:4px}
.seg button{padding:7px 14px;border-radius:9px;font-weight:600;font-size:.83rem;color:var(--ink-soft);transition:.15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-soft)}

/* =========================================================
   12. TABEL
   ========================================================= */
.ptable{width:100%;border-collapse:collapse;font-size:.86rem}
.ptable th{text-align:left;font-family:var(--ff-mono);font-size:.64rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-weight:700;padding:9px 11px;border-bottom:1px solid var(--line)}
.ptable td{padding:12px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
.ptable tr:last-child td{border-bottom:none}
.ptable tbody tr{transition:.12s}
.ptable tbody tr:hover td{background:var(--bg-soft)}
.ptable .pname{font-weight:700}

/* =========================================================
   13. CHECKBOX LEMBUT
   ========================================================= */
.soft-check{width:22px;height:22px;border-radius:7px;flex-shrink:0;border:2px solid var(--line-strong);
  background:var(--card);display:grid;place-items:center;color:#fff;font-size:.75rem;cursor:pointer;transition:.15s}
.soft-check:hover{border-color:var(--green)}
.soft-check.on{background:var(--green-deep);border-color:var(--green-deep)}
.soft-check.on::after{content:"✓"}

/* =========================================================
   14. EMPTY STATE
   ========================================================= */
.empty,.empty-sm{text-align:center;color:var(--ink-soft)}
.empty{padding:48px 20px}
.empty-sm{padding:28px 12px;font-size:.88rem}
.empty .ei,.empty-sm .es{display:block;font-size:2.4rem;margin-bottom:12px;opacity:.85}
.empty-sm .es{font-size:1.9rem;margin-bottom:8px}
.empty h3{font-weight:700;font-size:1.05rem;margin-bottom:6px;color:var(--ink)}
.empty p{color:var(--muted);font-size:.9rem;max-width:36ch;margin:0 auto}

/* =========================================================
   15. TOAST
   ========================================================= */
.toast-host{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:300;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--bg);font-size:.88rem;font-weight:500;padding:11px 18px;
  border-radius:12px;box-shadow:var(--shadow-lift);max-width:90vw;opacity:0;transform:translateY(8px);
  transition:opacity .25s,transform .25s}
.toast.in{opacity:1;transform:none}
.toast.ok{background:linear-gradient(135deg,var(--green-deep),var(--green));color:#fff}
.toast.err{background:var(--red);color:#fff}

/* =========================================================
   16. FOOTER
   ========================================================= */
.tool-foot{text-align:center;padding:38px 0 46px;margin-top:24px;color:var(--muted);font-size:.85rem}
.tool-foot b{color:var(--green-deep);font-weight:700}
.tool-foot a{transition:.15s}
.tool-foot a:hover b{color:var(--green)}
.tool-foot .foot-links{display:flex;gap:8px 16px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.tool-foot .foot-links a{color:var(--ink-soft);font-weight:600;font-size:.82rem}
.tool-foot .foot-links a:hover{color:var(--green-deep)}

/* =========================================================
   17. UTILITAS
   ========================================================= */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:10px}
.mono{font-family:var(--ff-mono)}

/* =========================================================
   18. RESPONSIVE
   ========================================================= */
@media(max-width:900px){
  .grid4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  /* Nav jadi hamburger + drawer di layar sedang/kecil */
  .nav-burger{display:flex}
  .nav-inner{position:relative}
  .nav-links{position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:8px;box-shadow:var(--shadow-lift);
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:.2s;z-index:60}
  .nav-links.open{max-height:80vh;opacity:1;pointer-events:auto;padding:8px;overflow:auto}
  .nav-links a{width:100%;padding:11px 13px;font-size:.9rem;border-radius:10px}
  .nav-links .theme-toggle{margin:2px 0 0}
  .nav-links .lang-toggle{width:100%;justify-content:flex-start}
  /* toggle bahasa/tema jadi baris penuh di drawer */
  .nav-links .theme-toggle{width:100%;justify-content:center;height:40px}
  .ka-acct-btn{margin:4px 0 0;width:100%;justify-content:center;height:40px}
}
@media(max-width:768px){
  .card,.panel-card{padding:22px}
  .tool-title h1{font-size:1.5rem}
  .grid2,.grid3{grid-template-columns:1fr}
}
@media(max-width:560px){
  html{font-size:15px}
  .card,.panel-card{padding:17px;border-radius:16px}
  .grid4{grid-template-columns:1fr 1fr}

  .tool-top{margin:22px 0 16px;align-items:flex-start}
  .tool-title{gap:12px}
  .tool-title .ti{width:46px;height:46px;font-size:1.3rem}
  .tool-title h1{font-size:1.38rem}
  .io-btns{width:100%}
  .io-btns button{font-size:.8rem;padding:8px 12px;flex:1;justify-content:center}
}

/* =========================================================
   19. REDUCED MOTION
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}