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

/* =========================================================
   TeckForge design system
   Professional, calm, high-contrast, mobile-first.
   ========================================================= */
:root{
  --navy-950:#0B1220;
  --navy-900:#0F1A2B;
  --navy-800:#152238;
  --navy-700:#1E2E48;
  --navy-line:#26374F;
  --navy-text:#C7D2E1;
  --navy-text-dim:#8496AF;

  --bg:#F6F7FB;
  --surface:#FFFFFF;
  --surface-2:#FBFCFE;
  --border:#E3E7EF;
  --border-soft:#EDF0F5;

  --ink:#141B2C;
  --ink-soft:#57647A;
  --ink-faint:#8792A3;

  --brand:#3457D5;
  --brand-dark:#2540A8;
  --brand-soft:#EAEFFD;
  --brand-line:#C9D5F8;
  --logo-orange:#E9A11A;
  /* Darker, same-hue version of --logo-orange used for the hero accent text
     on the LIGHT theme only, so it clears WCAG AA (~5.5:1) against the light
     background; dark theme overrides this back to the vivid logo color
     below, where contrast against the near-black background is already ample. */
  --forge-accent:#8F5800;

  --accent:#0EA5A0;
  --accent-soft:#E3F7F5;
  --warn:#B45309;
  --warn-soft:#FDF3E4;
  --danger:#C4324D;
  --danger-soft:#FCE9EC;
  --ok:#1D8A5D;
  --ok-soft:#E6F6EE;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 16px 40px rgba(15,23,42,.14);

  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --sidebar-w:272px;
  --topbar-h:56px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
/* =========================================================
   Ambient page background — soft sky-blue blobs (light theme only)
   A decorative, fixed layer behind every page's content: a few large,
   blurred blue radial gradients that add a professional, cool tone
   without competing with content. Opaque UI (topbar, sidebar,
   cards/.panel, footer) all have their own solid backgrounds, so this
   only ever shows through in open page space. z-index:0 keeps it
   behind normal in-flow content (which paints on top without needing
   z-index of its own), while pointer-events:none keeps it fully
   non-interactive.
   ========================================================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(620px 480px at 8% 8%, rgba(58,130,201,0.10), rgba(58,130,201,0) 70%),
    radial-gradient(560px 460px at 96% 20%, rgba(94,169,219,0.09), rgba(94,169,219,0) 70%),
    radial-gradient(680px 560px at 50% 96%, rgba(58,130,201,0.08), rgba(58,130,201,0) 70%),
    radial-gradient(420px 380px at 78% 70%, rgba(94,169,219,0.07), rgba(94,169,219,0) 70%);
  background-repeat:no-repeat;
}
[data-theme="dark"] body::before{ display:none; }
button{font-family:inherit;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px;}
img,svg{max-width:100%;}
noscript{display:block; background:var(--warn-soft); color:var(--warn); padding:12px 18px; font-size:13px; text-align:center;}

/* =========================================================
   App shell
   ========================================================= */
.app{
  display:block;
  min-height:100vh;
  padding-top:var(--topbar-h);
  position:relative;
  z-index:1; /* sits above the ambient body::before background */
}

/* ---------- Top bar: fixed header, visible on every screen size ---------- */
.topbar{
  display:flex;
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  align-items:center;
  gap:14px;
  height:var(--topbar-h);
  padding:0 20px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.topbar .menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--ink);
  cursor:pointer;
  flex:0 0 auto;
}
.topbar .menu-btn:hover{background:var(--brand-soft); border-color:var(--brand-line);}
.topbar .topbar-brand{
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:800;
  font-size:17px;
  color:var(--ink);
  letter-spacing:-0.01em;
  text-decoration:none;
  flex:0 0 auto;
}
.topbar .brand-text{white-space:nowrap;}
.topbar .brand-mark{display:inline-flex; align-items:center; line-height:0; flex:0 0 auto;}
.topbar .brand-mark svg{display:block; width:22px; height:22px; border-radius:6px;}
.topbar .brand-accent{color:var(--logo-orange);}

/* ---------- "All Tools" mega-menu trigger + panel (desktop) ---------- */
.mega-trigger{
  display:none;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  flex:0 0 auto;
}
.mega-trigger:hover, .mega-trigger.open{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand);}
.mega-trigger .chev{font-size:10px; transition:transform .15s ease;}
.mega-trigger.open .chev{transform:rotate(180deg);}

.topbar-links{display:none; align-items:center; gap:4px; margin-left:2px;}
.topbar-links a{
  display:flex; align-items:center;
  height:36px; padding:0 12px; border-radius:8px;
  color:var(--ink-soft); font-size:13.5px; font-weight:700;
  text-decoration:none; white-space:nowrap;
}
.topbar-links a:hover{background:var(--surface-2); color:var(--ink);}

.mega-menu{
  display:none;
  position:fixed;
  top:calc(var(--topbar-h) + 8px); left:16px; right:16px;
  z-index:99;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  max-height:calc(100vh - var(--topbar-h) - 24px);
  overflow-y:auto;
}
.mega-menu.open{display:block;}
.mega-menu-inner{
  max-width:1240px;
  margin:0 auto;
  padding:26px 32px 8px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:24px 22px;
}
.mega-col-head{
  margin-bottom:12px;
  font-size:11.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint);
}
.mega-col a{
  display:flex; align-items:center; gap:10px;
  padding:5px 0;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  min-width:0;
}
.mega-col a:hover{color:var(--brand);}
.mega-col a:hover .mega-item-ico{transform:scale(1.08);}
.mega-col a.mega-more{color:var(--brand); font-weight:700; margin-top:2px; padding-left:32px; font-size:12.5px;}
.mega-item-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:6px; flex:0 0 auto;
  font-size:12px; color:#fff;
  box-shadow:0 1px 3px rgba(15,23,42,.18);
  transition:transform .15s ease;
}
.mega-item-ico svg{width:13px; height:13px; display:block;}
.mega-item-lbl{min-width:0; overflow-wrap:break-word; word-break:break-word; line-height:1.3;}
.mega-menu-footer{
  max-width:1240px;
  margin:6px auto 0;
  padding:16px 32px 24px;
  border-top:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-faint);
}

.sidebar-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(10,15,25,.5);
  z-index:45;
}

/* ---------- Sidebar (slide-in drawer, mobile menu-btn only — desktop nav lives in the topbar) ---------- */
.sidebar{
  position:fixed;
  top:var(--topbar-h); left:0; bottom:0;
  width:min(300px, 84vw);
  max-height:calc(100vh - var(--topbar-h));
  background:var(--navy-950);
  border-right:1px solid var(--navy-line);
  padding:18px 12px 28px;
  overflow-y:auto;
  scrollbar-width:thin;
  transform:translateX(-100%);
  transition:transform .22s ease;
  z-index:90;
  box-shadow:var(--shadow-lg);
}
.sidebar.open{transform:translateX(0);}
.sidebar{overscroll-behavior:contain;}
body.sidebar-locked{overflow:hidden;}
.brand{
  display:none;
}
.brand .mark{
  font-weight:800;
  font-size:19px;
  color:#fff;
  letter-spacing:-0.02em;
}

.search-box{
  margin:0 2px 14px;
  position:relative;
}
.sidebar .search-box input{
  width:100%;
  padding:9px 11px 9px 32px;
  border-radius:8px;
  border:1px solid var(--navy-line);
  background:var(--navy-800);
  color:#fff;
  font-family:var(--sans);
  font-size:13px;
}
.sidebar .search-box input::placeholder{color:var(--navy-text-dim);}
.search-box::before{
  content:'⌕';
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--navy-text-dim);
  font-size:14px;
  pointer-events:none;
}

.nav-home-link{
  display:flex; align-items:center; gap:9px;
  padding:9px 10px;
  margin:0 2px 10px;
  border-radius:8px;
  color:var(--navy-text);
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
}
.nav-home-link:hover{background:var(--navy-800); color:#fff;}
.nav-home-link.active{background:var(--brand); color:#fff;}

.drawer{
  margin-bottom:2px;
}
.drawer-handle{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:none;
  color:var(--navy-text);
  padding:10px 10px;
  border-radius:8px;
  cursor:pointer;
  text-align:left;
  font-family:var(--sans);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:0.01em;
}
.drawer-handle:hover{background:var(--navy-800); color:#fff;}
.drawer.open .drawer-handle{color:#fff;}
.drawer-handle .ico{
  font-size:15px; width:22px; height:22px; text-align:center; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
}
.drawer-handle .ico svg{width:16px; height:16px; display:block;}
.drawer-handle .lbl{flex:1;}
.drawer-handle .chev{
  font-size:11px; color:var(--navy-text-dim);
  transition:transform .16s ease;
  flex:0 0 auto;
}
.drawer.open .drawer-handle .chev{transform:rotate(90deg); color:var(--accent);}

.drawer-list{
  display:none;
  flex-direction:column;
  padding:3px 4px 10px 12px;
  gap:1px;
  position:relative;
}
.drawer-list::before{
  content:'';
  position:absolute;
  left:20px; top:2px; bottom:12px;
  width:1px;
  background:var(--navy-line);
}
.drawer.open .drawer-list{display:flex;}

.tool-btn{
  display:flex;
  align-items:center;
  gap:9px;
  background:none;
  border:none;
  color:var(--navy-text-dim);
  text-align:left;
  padding:8px 10px 8px 20px;
  border-radius:7px;
  font-size:12.8px;
  font-weight:500;
  cursor:pointer;
  font-family:var(--sans);
  text-decoration:none;
  position:relative;
  line-height:1.35;
}
.tool-btn::before{
  content:'';
  position:absolute;
  left:0; top:50%;
  width:9px; height:1px;
  background:var(--navy-line);
}
.tool-btn:hover{background:var(--navy-800); color:#fff;}
.tool-btn.active{background:var(--brand); color:#fff; font-weight:600;}
.tool-btn.active::before{background:var(--accent);}
.tool-btn .soon{
  color:var(--accent);
  font-size:9.5px;
  margin-left:auto;
  font-family:var(--mono);
  flex:0 0 auto;
}

.sidebar-footer{
  margin-top:14px;
  padding:14px 10px 4px;
  border-top:1px solid var(--navy-line);
  display:flex;
  flex-wrap:wrap;
  gap:4px 12px;
}
.sidebar-footer a{
  font-size:11.5px;
  color:var(--navy-text-dim);
  text-decoration:none;
  font-weight:500;
}
.sidebar-footer a:hover{color:#fff;}

/* =========================================================
   Main / workbench
   ========================================================= */
.main{
  background:transparent; /* lets the ambient body background show through in light mode */
  min-height:100vh;
  padding:32px 40px 64px;
  max-width:1600px;
  width:100%;
  margin:0 auto;
  position:relative;
}
/* Homepage only: the hero already carries its own top padding, so the
   page-level top padding above it is trimmed at the component level
   (not with a negative margin) to remove the large empty gap before the
   heading while every other page keeps the standard 32px top padding. */
body.is-home .main{padding-top:6px;}
.workbench-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.crumb{
  font-size:12px;
  color:var(--ink-faint);
  margin:0 0 8px;
  font-weight:600;
}
.crumb a{text-decoration:none; color:var(--ink-faint);}
.crumb a:hover{color:var(--brand);}
.workbench-header h1{
  font-family:var(--sans);
  font-weight:800;
  font-size:25px;
  margin:0 0 6px;
  color:var(--ink);
  letter-spacing:-0.015em;
  line-height:1.25;
}
.workbench-header p{
  margin:0;
  color:var(--ink-soft);
  font-size:14px;
  max-width:640px;
  line-height:1.55;
}
.badge-row{display:flex; gap:7px; flex-wrap:wrap;}
.badge{
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  padding:5px 10px;
  border-radius:20px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--ink-soft);
  white-space:nowrap;
}
.badge.privacy{color:var(--ok); border-color:#bfe6d2; background:var(--ok-soft);}

/* ---------- Homepage ---------- */
.hero-panel{
  position:relative;
  background:transparent; /* sits directly on the page background — no boxed card */
  padding:0;
  margin-bottom:12px;
}
.hero-panel .hero-grid-texture{display:none;}
.hero-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:28px;
  align-items:center;
  padding:48px 40px;
}
/* Centered, single-column hero used on the homepage — no side illustration,
   no boxed background, just headline + subtext on the page's own background,
   wide enough that the heading reliably sits on one line. */
.hero-inner--centered{
  grid-template-columns:1fr;
  max-width:none;
  margin:0 auto;
  text-align:center;
  padding:20px 24px 28px;
}
.hero-panel h1{
  font-size:clamp(22px, 2.6vw, 34px);
  font-weight:800;
  margin:0 0 16px;
  letter-spacing:-0.02em;
  line-height:1.16;
  color:var(--ink);
  white-space:nowrap;
}
/* "...ever leaves your browser" is highlighted in the same forge/amber hue
   used for "Forge" in the logo (--logo-orange). The literal logo color reads
   great on the dark theme's near-black background but fails contrast (~2:1)
   against the light theme's near-white background, so light mode uses a
   darker shade of the same hue (~5.5:1, passes WCAG AA) and dark mode uses
   the vivid logo color directly — same brand color family in both themes. */
.hero-panel h1 .accent{color:var(--forge-accent);}
.hero-panel p.hero-sub{
  margin:0 auto;
  color:var(--ink-soft);
  font-size:16px;
  max-width:680px;
  line-height:1.65;
  text-align:center;
}
@media (max-width:900px){
  .hero-panel h1{white-space:normal;}
}

.pill-row{
  margin-bottom:22px;
  display:flex; gap:8px; flex-wrap:nowrap;
  overflow-x:auto; overscroll-behavior-x:contain;
  padding-bottom:4px; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, #000 92%, transparent 100%);
}
.pill-row::-webkit-scrollbar{display:none;}
.pill-row .pill{flex:0 0 auto; white-space:nowrap;}
/* Centered variant: used on the decluttered homepage — wraps onto centered
   rows instead of a horizontal scroll strip, since there's no side content
   competing for space anymore. */
.pill-row--centered{
  flex-wrap:wrap; justify-content:center; overflow:visible;
  -webkit-mask-image:none; mask-image:none;
  max-width:900px; margin-left:auto; margin-right:auto;
}

.home-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:36px 0 14px; flex-wrap:wrap; gap:8px;
}
.home-section-head h2{font-size:17px; font-weight:800; margin:0; letter-spacing:-0.01em;}
.home-section-head .section-link{font-size:13px; font-weight:700; color:var(--brand); text-decoration:none;}
.home-section-head .section-link:hover{text-decoration:underline;}

.category-section{
  margin-bottom:30px;
  scroll-margin-top:20px;
}
.category-head{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:12px;
}
.category-head .ico{
  width:38px; height:38px;
  border-radius:10px;
  background:var(--brand-soft);
  border:1px solid var(--brand-line);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--brand);
  flex:0 0 auto;
}
.category-head .ico svg{width:19px; height:19px; display:block;}
.category-section:nth-of-type(3n+2) .category-head .ico{background:var(--accent-soft); border-color:#B9E8E4; color:var(--accent);}
.category-section:nth-of-type(3n) .category-head .ico{background:var(--warn-soft); border-color:#F3D9AE; color:var(--warn);}
.category-head h2{
  font-size:16.5px;
  font-weight:800;
  margin:0;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.category-head .count{
  font-size:12px;
  color:var(--ink-faint);
  font-weight:600;
}

.option-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(248px,1fr));
  gap:16px;
}
.option-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  cursor:pointer;
  text-align:left;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .16s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2,.8,.3,1.2);
  animation:tf-card-in .45s ease both;
}
.option-card:hover{
  border-color:var(--brand-line);
  box-shadow:var(--shadow);
  transform:translateY(-3px);
}
.option-card .opt-ico{transition:transform .25s cubic-bezier(.2,.8,.3,1.4);}
.option-card:hover .opt-ico{transform:scale(1.08) rotate(-3deg);}
/* Staggered entrance for the first couple of screens' worth of cards */
.option-grid .option-card:nth-child(1){animation-delay:.02s;}
.option-grid .option-card:nth-child(2){animation-delay:.05s;}
.option-grid .option-card:nth-child(3){animation-delay:.08s;}
.option-grid .option-card:nth-child(4){animation-delay:.11s;}
.option-grid .option-card:nth-child(5){animation-delay:.14s;}
.option-grid .option-card:nth-child(6){animation-delay:.17s;}
.option-grid .option-card:nth-child(7){animation-delay:.20s;}
.option-grid .option-card:nth-child(8){animation-delay:.23s;}
.option-grid .option-card:nth-child(n+9){animation-delay:.26s;}
@keyframes tf-card-in{
  from{opacity:0; transform:translateY(14px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes tf-fade-in-up{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .option-card{animation:none;}
  .option-card:hover{transform:none;}
  .option-card .opt-ico{transition:none;}
  .option-card:hover .opt-ico{transform:none;}
}
.option-card .opt-ico{
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; color:#fff; flex:0 0 auto;
  margin-bottom:10px;
  box-shadow:0 2px 6px rgba(15,23,42,.14);
}
.option-card .opt-ico svg{width:20px; height:20px; display:block;}
.option-card .opt-title{
  font-size:15px; font-weight:800; color:var(--ink);
  line-height:1.3; letter-spacing:-0.01em;
  min-width:0; width:100%;
  overflow-wrap:anywhere; word-break:break-word;
  margin-bottom:2px;
}
.option-card .opt-desc{
  margin:0; font-size:13px; font-weight:400; line-height:1.55;
  color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

footer.disclaimer{
  margin-top:36px;
  font-size:12px;
  color:var(--ink-faint);
  text-align:center;
  padding:16px 0 4px;
  border-top:1px solid var(--border-soft);
}

/* =========================================================
   Shared tool-panel components (used inside individual tools)
   ========================================================= */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:18px;
  box-shadow:var(--shadow-sm);
  animation:tf-fade-in-up .4s ease both;
}
@media (prefers-reduced-motion: reduce){ .panel{animation:none;} }
.panel h2{
  font-family:var(--sans);
  font-weight:800;
  font-size:17px;
  margin:0 0 5px;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.panel .sub{
  color:var(--ink-soft);
  font-size:13px;
  margin:0 0 16px;
  line-height:1.55;
}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;}
.col{display:flex; flex-direction:column; gap:6px; flex:1 1 160px; min-width:0;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

label{font-size:11.5px; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:0.04em;}
textarea, input[type=text], input[type=number], input[type=password], input[type=date], select{
  font-family:var(--sans);
  font-size:13.5px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 11px;
  background:var(--surface-2);
  color:var(--ink);
  width:100%;
}
textarea{font-family:var(--mono); resize:vertical; min-height:160px; line-height:1.55; font-size:12.8px;}
textarea:focus, input:focus, select:focus{border-color:var(--brand); background:#fff;}
input[type=file]{
  font-family:var(--sans);
  font-size:12.8px;
  width:100%;
  padding:10px;
  border:1.5px dashed var(--border);
  border-radius:8px;
  background:var(--surface-2);
  cursor:pointer;
}
input[type=file]:hover{border-color:var(--brand-line); background:var(--brand-soft);}

.btn{
  font-family:var(--sans);
  font-weight:700;
  font-size:13.5px;
  padding:10px 18px;
  border-radius:9px;
  border:1px solid var(--brand-dark);
  background:linear-gradient(135deg, var(--brand), var(--brand-dark));
  color:#fff;
  cursor:pointer;
  line-height:1.3;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(52,87,213,.28);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{background:linear-gradient(135deg, var(--brand-dark), var(--brand-dark)); box-shadow:0 4px 14px rgba(52,87,213,.38); transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn.secondary{
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--border);
}
.btn.secondary:hover{border-color:var(--ink-faint);}
.btn.ghost{background:none; border:1px solid var(--border); color:var(--ink-soft);}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink);}
.btn.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

.check-row{display:flex; align-items:center; gap:7px; font-size:12.8px; color:var(--ink);}
.check-row label{text-transform:none; font-weight:500; letter-spacing:0; color:var(--ink);}
.check-row input[type=checkbox]{width:auto; accent-color:var(--brand);}

/* ---------- Basic/scientific calculator button grid ---------- */
.calc-btn-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.calc-btn{
  padding:14px 0; border-radius:9px; border:1px solid var(--border); background:var(--surface);
  color:var(--ink); font-family:var(--mono); font-size:15px; font-weight:600; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.calc-btn:hover{border-color:var(--brand-line); box-shadow:var(--shadow-sm); transform:translateY(-1px);}
.calc-btn:active{transform:translateY(0) scale(.96);}
.calc-btn-accent{background:linear-gradient(135deg, var(--brand), var(--brand-dark)); color:#fff; border-color:var(--brand-dark);}
@media (max-width:480px){ .calc-btn{padding:12px 0; font-size:13px;} }

.diff-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.diff-pane{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.6;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
  max-height:520px;
  background:var(--surface);
}
.diff-pane .ln{display:flex;}
.diff-pane .num{
  flex:0 0 42px;
  text-align:right;
  padding-right:8px;
  color:var(--ink-faint);
  user-select:none;
  border-right:1px solid var(--border-soft);
}
.diff-pane .content{padding:0 8px; flex:1;}
.diff-pane:first-child{border-right:1px solid var(--border);}
.ln.add{background:var(--ok-soft);}
.ln.del{background:var(--danger-soft);}
.ln.mod{background:var(--warn-soft);}
.tok-add{background:#BEECDA;}
.tok-del{background:#F7C9D2; text-decoration:line-through;}

.stat-strip{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin:10px 0 16px;}
.stat-strip b{color:var(--ink);}

.result-box{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:9px;
  padding:14px;
  font-family:var(--mono);
  font-size:12.8px;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:420px;
  overflow:auto;
}
.copy-row{display:flex; justify-content:flex-end; gap:8px; margin-top:10px; flex-wrap:wrap;}

/* Checkerboard backdrop so a transparent-PNG result (e.g. AI background
   removal) is visibly transparent rather than looking blank/white. */
.rba-checker{
  display:inline-block;
  width:100%;
  border-radius:8px;
  background-image:
    linear-gradient(45deg, #cbd2de 25%, transparent 25%),
    linear-gradient(-45deg, #cbd2de 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cbd2de 75%),
    linear-gradient(-45deg, transparent 75%, #cbd2de 75%);
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0px;
}
[data-theme="dark"] .rba-checker{
  background-image:
    linear-gradient(45deg, #333c4d 25%, transparent 25%),
    linear-gradient(-45deg, #333c4d 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #333c4d 75%),
    linear-gradient(-45deg, transparent 75%, #333c4d 75%);
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0px;
}

table.tool-table{border-collapse:collapse; width:100%; font-family:var(--mono); font-size:12px; display:block; overflow-x:auto; white-space:nowrap;}
table.tool-table th, table.tool-table td{border:1px solid var(--border); padding:7px 9px; text-align:left; white-space:normal;}
table.tool-table th{background:var(--surface-2); font-family:var(--sans); font-weight:700;}
tr.changed td{background:var(--warn-soft);}
tr.dup td{background:var(--danger-soft);}

/* Editable "line item" tables (invoice, salary slip, appraisal letter,
   resume link list) mix several fixed-width number inputs with a flexible
   text column — on a narrow phone their natural content width is wider
   than the screen. Wrapping them in .edit-table-scroll lets just the table
   scroll horizontally instead of blowing out the whole page width, the
   same responsive pattern already used for .tool-table above. */
.edit-table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:6px;}
.edit-table-scroll > table{min-width:520px; margin-top:0;}
.edit-table-scroll > table input{min-width:0;}

.file-drop{
  border:1.5px dashed var(--border);
  border-radius:9px;
  padding:22px;
  text-align:center;
  color:var(--ink-soft);
  font-size:12.8px;
  cursor:pointer;
  background:var(--surface-2);
}
.file-drop.drag{border-color:var(--brand); background:var(--brand-soft);}

.tag-note{
  font-size:12.3px;
  color:var(--ink-soft);
  background:var(--brand-soft);
  border-left:3px solid var(--brand);
  padding:9px 12px;
  border-radius:6px;
  margin-top:10px;
  line-height:1.5;
}
.tag-note.limit{border-left-color:var(--warn); background:var(--warn-soft); color:#7A4A0C;}
.tag-note.error{border-left-color:var(--danger); background:var(--danger-soft); color:#8A2438;}
.tag-note.success{border-left-color:var(--ok); background:var(--ok-soft); color:#125C3D;}

canvas{max-width:100%;}
.swatch{width:56px;height:56px;border-radius:9px;border:1px solid var(--border);}
.color-out{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}

::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:#D3D9E3; border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* =========================================================
   404
   ========================================================= */
.error-page{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; text-align:center; padding:40px 20px;
  background:var(--bg);
}
.error-page h1{font-size:64px; margin:0; color:var(--brand); font-weight:800;}
.error-page p{color:var(--ink-soft); font-size:15px; margin:10px 0 20px;}
.error-page a.btn{text-decoration:none; display:inline-block;}

/* =========================================================
   Legal pages (Privacy Policy / Terms)
   ========================================================= */
.legal-content h2{
  font-size:16px;
  font-weight:800;
  margin:26px 0 8px;
  color:var(--ink);
}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{
  font-size:13.8px;
  line-height:1.7;
  color:var(--ink-soft);
  margin:0 0 12px;
}
.legal-content ul{
  margin:0 0 12px;
  padding-left:20px;
  color:var(--ink-soft);
  font-size:13.8px;
  line-height:1.7;
}
.legal-content li{margin-bottom:4px;}
.legal-content .updated{
  font-size:12px;
  color:var(--ink-faint);
  margin-bottom:20px;
}

/* =========================================================
   Tool page static content (About / How to use / FAQ) — sits as a
   sibling of .app, below the interactive widget, never touched by
   app.js (which only ever clears out #main on tool init).
   ========================================================= */
.tool-page-content{
  max-width:1600px;
  width:100%;
  margin:0 auto;
  padding:0 40px 56px;
  box-sizing:border-box;
}
.tool-page-content h2:first-child{margin-top:0;}
.tool-howto{
  margin:0 0 12px;
  padding-left:22px;
  color:var(--ink-soft);
  font-size:13.8px;
  line-height:1.8;
}
.tool-howto li{margin-bottom:6px;}
@media (max-width:900px){
  .tool-page-content{padding:0 16px 40px;}
}

/* ---------- FAQ accordion ---------- */
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 18px;
  margin-bottom:10px;
  background:var(--surface);
}
.faq-item summary{
  cursor:pointer;
  font-weight:700;
  font-size:14.5px;
  color:var(--ink);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:'+ '; color:var(--brand); font-weight:800;}
.faq-item[open] summary::before{content:'\2212 ';}
.faq-item p{margin:10px 0 0; color:var(--ink-soft); font-size:13.8px; line-height:1.6;}

/* ---------- Pill filters (shared: homepage category filter + blog category filter) ---------- */
.pill-row{display:flex; gap:10px; flex-wrap:wrap; overflow-x:auto; padding-bottom:4px;}
.pill{
  flex:0 0 auto;
  padding:9px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-soft);
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.pill:hover{border-color:var(--ink-faint);}
.pill.active{background:var(--brand); border-color:var(--brand); color:#fff;}

/* ---------- Resume builder: section reorder list ---------- */
.rb-order-list{display:flex; flex-direction:column; gap:6px; max-width:320px;}
.rb-order-row{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--border); border-radius:8px; padding:8px 12px;
  font-size:13.5px; font-weight:600; background:var(--surface);
}
.rb-order-btns{display:flex; gap:4px;}
.rb-order-btns .btn{padding:2px 9px; font-size:12px; min-width:0;}

/* ---------- Blog ---------- */
.blog-toolbar{margin:18px 0 24px; display:flex; flex-direction:column; gap:14px;}
.blog-search-input{
  max-width:420px; padding:10px 14px; border-radius:10px;
  border:1px solid var(--border); font-family:var(--sans); font-size:13.5px;
}
.blog-filter-row{display:flex; gap:10px; flex-wrap:wrap; overflow-x:auto; padding-bottom:4px;}
.blog-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px; margin-top:6px;}
.blog-card{
  display:flex; flex-direction:column; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; text-decoration:none; color:var(--ink);
  transition:box-shadow .2s ease, transform .2s cubic-bezier(.2,.8,.3,1.2), border-color .16s ease;
  animation:tf-card-in .45s ease both;
}
.blog-grid .blog-card:nth-child(1){animation-delay:.02s;}
.blog-grid .blog-card:nth-child(2){animation-delay:.05s;}
.blog-grid .blog-card:nth-child(3){animation-delay:.08s;}
.blog-grid .blog-card:nth-child(4){animation-delay:.11s;}
.blog-grid .blog-card:nth-child(5){animation-delay:.14s;}
.blog-grid .blog-card:nth-child(6){animation-delay:.17s;}
.blog-grid .blog-card:nth-child(n+7){animation-delay:.20s;}
.blog-card:hover{box-shadow:var(--shadow); transform:translateY(-4px) scale(1.015); border-color:var(--brand-line);}
.blog-card-cat{
  align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft); padding:4px 10px; border-radius:999px;
  transition:transform .2s ease;
}
.blog-card:hover .blog-card-cat{transform:scale(1.05);}
.blog-card h3{margin:2px 0 0; font-size:16px; line-height:1.35; letter-spacing:-0.01em;}
.blog-card p{margin:0; font-size:13.3px; color:var(--ink-soft); line-height:1.55; flex:1;}
.blog-card-meta{font-size:11.5px; color:var(--ink-faint); font-weight:600;}
@media (prefers-reduced-motion: reduce){
  .blog-card{animation:none;}
  .blog-card:hover{transform:none;}
  .blog-card-cat{transition:none;}
  .blog-card:hover .blog-card-cat{transform:none;}
}

.blog-post h1{font-size:26px; margin:10px 0 6px; letter-spacing:-0.015em;}
.blog-post-meta{font-size:12.5px; color:var(--ink-faint); margin:0 0 20px;}
.blog-post-body p{font-size:15px; line-height:1.75; color:var(--ink-soft); margin:0 0 16px;}
.blog-post-body h2{font-size:19px; margin:28px 0 10px; color:var(--ink); letter-spacing:-0.01em;}
.blog-post-body a{color:var(--brand); font-weight:600; text-decoration:underline;}
.blog-related{margin-top:36px;}
.blog-related h2{font-size:18px; margin-bottom:14px;}

/* =========================================================
   Responsive: tablet & mobile
   ========================================================= */
@media (max-width:1080px){
  .main{max-width:none;}
}

@media (min-width:961px){
  .mega-trigger{display:flex;}
  .topbar-links{display:flex;}
}

@media (max-width:960px){
  .topbar .menu-btn{display:flex;}
  .mega-trigger, .topbar-links, .mega-menu{display:none !important;}
  .sidebar-backdrop.open{display:block;}
  .main{padding:20px 16px 48px;}
  body.is-home .main{padding-top:4px;}
  .hero-inner{grid-template-columns:1fr; padding:30px 22px; gap:20px;}
  .hero-inner--centered{padding:14px 20px 22px;}
  .hero-panel h1{font-size:25px;}
  .workbench-header{flex-direction:column; gap:14px;}
  .workbench-header h1{font-size:21px;}
  .grid-2{grid-template-columns:1fr; gap:12px;}
  .diff-grid{grid-template-columns:1fr;}
  .diff-pane:first-child{border-right:none; border-bottom:1px solid var(--border);}
  .panel{padding:18px 16px; border-radius:var(--radius);}
  .row{gap:10px;}
  .col{flex:1 1 100%;}
  .row > .btn, .row > button.btn{width:100%;}
  .option-grid{grid-template-columns:repeat(auto-fill, minmax(170px,1fr));}
}

@media (max-width:520px){
  .main{padding:16px 12px 40px;}
  .panel{padding:15px 13px;}
  .workbench-header h1{font-size:19px;}
  .btn{width:100%;}
  .copy-row .btn{width:auto; flex:1;}
  .badge-row .badge{font-size:10px; padding:4px 8px;}
  .option-grid{grid-template-columns:1fr;}
  table.tool-table{font-size:11px;}
  .hero-inner{padding:24px 16px;}
  .hero-inner--centered{padding:10px 14px 18px;}
  .hero-panel h1{font-size:21px;}
  .hero-panel p.hero-sub{font-size:13.5px;}
}

/* =========================================================
   New component styles: stats, grids, tabs, dropzone
   ========================================================= */
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;}
.check-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:8px 14px; margin:10px 0;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:10px; margin:10px 0;}
.stat-box{background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:12px 14px; text-align:center;}
.stat-num{font-family:var(--mono); font-size:20px; font-weight:700; color:var(--brand);}
.stat-lbl{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}

.tab-btn{opacity:.65;}
.tab-btn.active{opacity:1; background:var(--brand); border-color:var(--brand); color:#fff;}

@media (max-width:960px){
  .grid-3{grid-template-columns:1fr;}
}

/* =========================================================
   Dark theme
   ========================================================= */
[data-theme="dark"]{
  --bg:#0B1220;
  --surface:#101A2C;
  --surface-2:#0D1626;
  --border:#233047;
  --border-soft:#1B2740;
  --ink:#E7ECF6;
  --ink-soft:#A9B6CC;
  --ink-faint:#7C8AA3;
  --brand-soft:#182543;
  --brand-line:#2A3C6B;
  --accent-soft:#0E2A2A;
  --warn-soft:#2E2210;
  --danger-soft:#301620;
  --ok-soft:#0F2A20;
  --forge-accent:var(--logo-orange); /* vivid amber reads fine on this near-black bg */
}
[data-theme="dark"] .result-box,
[data-theme="dark"] textarea,
[data-theme="dark"] input,
[data-theme="dark"] select{
  background:var(--surface-2);
  color:var(--ink);
  border-color:var(--border);
}
[data-theme="dark"] .file-drop{background:var(--surface-2);}
[data-theme="dark"] table.tool-table th{background:var(--surface-2);}
[data-theme="dark"] .main{background:var(--bg);}

/* =========================================================
   Theme toggle + command palette trigger (topbar)
   ========================================================= */
.topbar-actions{display:flex; align-items:center; gap:8px; margin-left:auto;}
.icon-btn{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{background:var(--brand-soft); border-color:var(--brand-line);}

/* =========================================================
   Command palette (Ctrl+K)
   ========================================================= */
.cmdk-backdrop{
  position:fixed; inset:0; background:rgba(10,14,24,.6); z-index:200;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; padding-top:12vh;
}
.cmdk-backdrop.open{display:flex;}
.cmdk-box{
  width:min(560px, 92vw); background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); border:1px solid var(--border); overflow:hidden;
  animation:cmdk-pop .16s ease-out;
}
@keyframes cmdk-pop{
  from{ opacity:0; transform:translateY(-8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .cmdk-box{animation:none;} }
.cmdk-header{
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--border); padding:4px 8px 4px 18px;
}
.cmdk-input-ico{font-size:15px; color:var(--ink-faint); flex:0 0 auto;}
.cmdk-input{
  flex:1; width:auto; border:none; padding:16px 0;
  font-size:15px; background:transparent; color:var(--ink); outline:none;
}
.cmdk-close-btn{
  flex:0 0 auto; width:28px; height:28px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink-soft);
  font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cmdk-close-btn:hover{background:var(--danger-soft); color:var(--danger); border-color:var(--danger);}
.cmdk-results{max-height:52vh; overflow:auto; padding:6px 0;}
.cmdk-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 18px; cursor:pointer; font-size:13.5px; color:var(--ink);
  border-radius:9px; margin:0 8px;
}
.cmdk-item:hover, .cmdk-item.sel{background:var(--brand-soft);}
.cmdk-item .cat{font-size:11px; color:var(--ink-faint); flex:0 0 auto;}
.cmdk-item-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:7px; background:var(--surface-2);
  border:1px solid var(--border); font-size:12px; flex:0 0 auto; color:var(--ink-soft);
}
.cmdk-item-ico svg{width:13px; height:13px; display:block;}
.cmdk-item.sel .cmdk-item-ico, .cmdk-item:hover .cmdk-item-ico{background:#fff; border-color:var(--brand-line);}
.cmdk-empty{
  padding:32px 18px; color:var(--ink-faint); font-size:13px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.cmdk-empty-ico{font-size:22px; opacity:.6;}
.cmdk-footer{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--border); padding:10px 18px;
  font-size:11.5px; color:var(--ink-faint); background:var(--surface-2);
}
.cmdk-footer kbd{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  background:var(--surface); border:1px solid var(--border); border-bottom-width:2px;
  border-radius:5px; padding:2px 6px; margin-right:3px; color:var(--ink-soft);
}
@media (max-width:520px){
  .cmdk-footer span:nth-child(2){display:none;}
}

/* =========================================================
   (Trending Tools and Tool of the Day sections both removed —
   homepage now shows only the pill filter and the full category grid.)
   ========================================================= */

.option-card{position:relative;}

/* =========================================================
   Floating "Buy me a coffee" button — pinned to the viewport on
   every page so it's visible without scrolling. Edit link/copy in
   ONE place: site.config.js
   ========================================================= */
.coffee-float{
  position:fixed; right:18px; bottom:18px; z-index:200;
  display:flex; align-items:center;
  box-shadow:var(--shadow-lg);
  border-radius:999px;
  animation:coffee-float-in .4s ease-out;
}
@keyframes coffee-float-in{ from{ transform:translateY(16px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.coffee-float-link{
  display:flex; align-items:center; gap:8px;
  background:#141B2C; color:#fff; text-decoration:none;
  padding:12px 18px 12px 16px; border-radius:999px;
  font-weight:700; font-size:14px;
  border:1px solid rgba(255,255,255,.08);
}
.coffee-float-link:hover{background:var(--logo-orange); color:#141B2C;}
.coffee-float-emoji{font-size:18px; line-height:1;}
.coffee-float-close{
  position:absolute; top:-8px; left:-8px;
  width:22px; height:22px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  color:var(--ink-soft); font-size:14px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
}
.coffee-float-close:hover{background:var(--danger-soft); color:var(--danger); border-color:var(--danger);}

@media (max-width:600px){
  .coffee-float{right:12px; bottom:78px;} /* clears mobile bottom UI/keyboard bars */
  .coffee-float-link{padding:10px 14px 10px 12px; font-size:13px;}
  .coffee-float-link span:last-child{display:none;} /* icon-only pill on very small screens */
  .coffee-float-emoji{font-size:20px;}
}

/* ---------- Scroll-to-top (homepage) ---------- */
.scroll-top-btn{
  position:fixed; left:18px; bottom:18px; z-index:200;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; border:none;
  font-size:18px; font-weight:800; cursor:pointer;
  box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .2s ease, transform .2s cubic-bezier(.2,.8,.3,1.2), background .15s ease;
}
.scroll-top-btn.visible{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.scroll-top-btn:hover{background:var(--brand-dark);}
@media (prefers-reduced-motion: reduce){ .scroll-top-btn{transition:opacity .15s ease;} }
@media (max-width:600px){ .scroll-top-btn{left:12px; bottom:78px; width:40px; height:40px; font-size:16px;} }

/* =========================================================
   Support / "Buy me a coffee" card — shown on every page.
   Edit copy, link & QR image in ONE place: site.config.js
   ========================================================= */
.support-card{
  max-width:1100px; margin:32px auto 0; padding:22px 26px;
  background:linear-gradient(135deg, var(--brand-soft), var(--accent-soft));
  border:1px solid var(--brand-line); border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.support-copy h3{margin:0 0 4px; font-size:16px; color:var(--ink);}
.support-copy p{margin:0 0 12px; font-size:13px; color:var(--ink-soft); max-width:520px; line-height:1.6;}
.coffee-btn{
  display:inline-flex; align-items:center; gap:8px; background:#141B2C; color:#fff;
  border:none; border-radius:999px; padding:10px 20px; font-weight:700; font-size:13.5px;
  text-decoration:none; box-shadow:var(--shadow-sm);
}
.coffee-btn:hover{background:var(--logo-orange); color:#141B2C;}
.support-qr{
  display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0;
}
.support-qr img{
  width:96px; height:96px; border-radius:10px; border:1px solid var(--border); background:#fff; padding:6px;
}
.support-qr span{font-size:11px; color:var(--ink-faint); text-align:center;}
.support-qr-india img{
  width:auto; height:150px; /* preserves the QR's real aspect ratio instead of squishing it into a square */
}

@media (max-width:600px){
  .support-card{padding:18px; margin-top:22px; flex-direction:column; align-items:flex-start; text-align:left;}
  .support-qr{align-self:center;}
}

/* =========================================================
   Site footer — multi-column link layout (Product / Popular Tools /
   Legal / Company) with a single compact "Install App" box on the
   right, matching the familiar dark-footer pattern used by big SaaS
   sites: columns up top, a thin divider, then social icons + a
   dynamic copyright year at the bottom.
   ========================================================= */
.site-footer{
  background:var(--navy-950);
  border-top:1px solid var(--navy-line);
  color:var(--navy-text-dim);
  padding:40px 28px 0;
}
.footer-top{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px 32px;
  padding-bottom:28px;
  border-bottom:1px solid var(--navy-line);
}
.footer-nav-group{
  display:flex;
  flex-wrap:wrap;
  gap:28px 32px;
  flex:0 1 auto;
  min-width:0;
}
.footer-col{flex:0 0 auto; min-width:130px;}
.footer-col-brand{flex:0 1 320px; max-width:320px;}
.footer-col h4{
  margin:0 0 14px; font-size:11.5px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:#fff;
}
.footer-col a{
  display:block; color:var(--navy-text); text-decoration:none;
  font-size:13.5px; margin-bottom:11px; width:fit-content;
}
.footer-col a:hover{color:#fff; text-decoration:underline;}
.footer-mark{font-weight:800; font-size:16px; color:#fff;}
.footer-col-brand p{margin:8px 0 0; font-size:12.8px; line-height:1.7; color:var(--navy-text-dim);}
.footer-col-install{flex:0 0 auto; display:flex; align-items:flex-start;}

/* Compact "Install App" box — styled like a store-badge button rather
   than a big promo card. Hidden by default; js/app.js reveals it only
   when the browser actually supports installing the PWA. */
.footer-install-box{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent;
  color:#fff; border:1px solid rgba(255,255,255,.28);
  font-family:inherit; font-size:13.5px; font-weight:700;
  cursor:pointer; white-space:nowrap;
  padding:11px 18px; border-radius:11px;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.footer-install-box[hidden]{display:none;}
.footer-install-box:hover{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.45); transform:translateY(-1px);}
.footer-install-box:active{transform:translateY(0);}
.footer-install-box:focus-visible{outline:2px solid #9FB4FF; outline-offset:2px;}
.footer-install-box:disabled{opacity:.6; cursor:default;}
.footer-install-box-ico{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;}

.footer-bottom{
  max-width:1280px;
  margin:0 auto;
  padding:18px 0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
.footer-social{display:flex; gap:10px; align-items:center;}
.footer-social-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--navy-line); color:var(--navy-text);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.2), background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social-btn:hover{background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-3px) scale(1.08);}
.footer-copyright{font-size:12px; color:var(--navy-text-dim);}

@media (max-width:600px){
  .site-footer{padding:28px 18px 0;}
  .footer-top{flex-direction:column; gap:24px;}
  .footer-col-install{justify-content:flex-start;}
  .footer-install-box{width:100%; justify-content:center;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
}

/* =========================================================
   Per-tool icons (sidebar rows, mega-menu, command palette)
   ========================================================= */
.tool-btn-ico{font-size:13px; flex:0 0 auto; opacity:.9; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center;}
.tool-btn-ico svg{width:14px; height:14px; display:block;}
.tool-btn-lbl{flex:1; min-width:0; overflow-wrap:break-word; word-break:break-word; line-height:1.3;}
.cmdk-item-label{display:flex; align-items:center; gap:10px; min-width:0;}

/* =========================================================
   Contact page
   ========================================================= */
.contact-card{
  display:flex; align-items:flex-start; gap:16px;
  background:var(--brand-soft); border:1px solid var(--brand-line);
  border-radius:var(--radius-lg); padding:20px 22px; margin:14px 0 24px;
}
.contact-card-icon{font-size:26px; line-height:1;}
.contact-card-label{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--brand); margin-bottom:4px;}
.contact-email-link{font-size:19px; font-weight:800; color:var(--ink); text-decoration:none;}
.contact-email-link:hover{color:var(--brand); text-decoration:underline;}
.contact-card p{margin:6px 0 0; font-size:12.8px; color:var(--ink-soft);}

/* =========================================================
   Nicer "Choose file" UI — native inputs styled to match the
   button system, plus a clearer drag-and-drop zone.
   ========================================================= */
input[type=file]{
  display:flex; align-items:center;
  border-style:dashed;
  border-color:var(--brand-line);
  background:var(--brand-soft);
  color:var(--ink-soft);
  font-size:12.8px;
  transition:border-color .12s ease, background .12s ease;
}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button{
  font-family:var(--sans);
  font-weight:700;
  font-size:12.5px;
  padding:8px 14px;
  margin-right:12px;
  border-radius:8px;
  border:1px solid var(--brand-dark);
  background:linear-gradient(135deg, var(--brand), var(--brand-dark));
  color:#fff;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover{
  box-shadow:0 3px 10px rgba(52,87,213,.32);
  transform:translateY(-1px);
}
.file-drop{
  border:1.5px dashed var(--brand-line);
  background:linear-gradient(135deg, var(--brand-soft), var(--surface-2));
  padding:26px 18px;
  border-radius:var(--radius);
  position:relative;
  font-weight:600;
  color:var(--ink-soft);
}
.file-drop::before{
  content:'📁';
  display:block;
  font-size:22px;
  margin-bottom:6px;
}
.file-drop.drag{border-color:var(--brand); background:var(--brand-soft); box-shadow:var(--shadow-sm);}
[data-theme="dark"] input[type=file]{background:var(--surface-2); border-color:var(--border);}

/* =========================================================
   Biodata Maker
   ========================================================= */
.bio-fields-block{margin-bottom:6px;}
.bio-field-rows{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.bio-field-row{display:grid; grid-template-columns:1fr 1.4fr auto; gap:8px; align-items:center;}
.bio-field-row .bio-field-label{font-weight:600;}
.bio-field-row .bio-field-remove{
  width:32px; height:32px; flex:0 0 auto; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink-soft); cursor:pointer; font-size:13px; line-height:1;
  transition:border-color .12s ease, color .12s ease, background .12s ease, transform .12s ease;
}
.bio-field-row .bio-field-remove:hover{border-color:#dc2626; color:#dc2626; background:rgba(220,38,38,.08); transform:scale(1.05);}
.bio-add-field-btn{font-size:12.5px; padding:7px 14px;}
@media (max-width:640px){
  .bio-field-row{grid-template-columns:1fr; }
  .bio-field-row .bio-field-remove{justify-self:flex-end; width:auto; padding:4px 10px;}
}
.bio-step-h3{
  display:flex; align-items:center; gap:10px;
  margin:26px 0 8px; padding-top:18px; border-top:1px solid var(--border);
  font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.01em;
}
.panel > .bio-step-h3:first-of-type{border-top:none; padding-top:0; margin-top:14px;}
.bio-step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; flex:none; border-radius:50%;
  background:linear-gradient(135deg, var(--brand), var(--brand-dark, var(--brand)));
  color:#fff; font-size:12px; font-weight:800;
}
.bio-step-opt{font-weight:400; color:var(--ink-faint); font-size:12px;}
.bio-step-h3-plain{
  display:flex; align-items:center; gap:8px; margin:28px 0 10px; padding-top:18px;
  border-top:1px solid var(--border); font-size:15px; font-weight:800; color:var(--ink);
}
.bio-religion-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; margin:10px 0 4px;}
.bio-religion-card{
  border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface);
  padding:12px 10px; text-align:center; cursor:pointer; transition:border-color .12s ease, background .12s ease;
}
.bio-religion-card:hover{border-color:var(--brand-line); background:var(--brand-soft);}
.bio-religion-card.active{border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 2px var(--brand-line) inset;}
.bio-religion-card .sym{font-size:24px; display:block; margin-bottom:4px;}
.bio-religion-card .lbl{font-size:11.5px; font-weight:700; color:var(--ink);}

.bio-template-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; margin:10px 0 4px;}
.bio-template-card{
  border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface);
  padding:0; overflow:hidden; cursor:pointer; text-align:left;
}
.bio-template-card:hover{border-color:var(--brand-line);}
.bio-template-card.active{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-line) inset;}
.bio-template-card .swatch{height:64px; width:100%; border-radius:0;}
.bio-template-card .lbl{display:block; padding:8px 10px; font-size:12px; font-weight:700; color:var(--ink);}

.bio-lang-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:10px; margin:10px 0 4px;}
.bio-lang-card{
  border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface);
  padding:12px 8px; text-align:center; cursor:pointer; display:flex; flex-direction:column; gap:3px;
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.bio-lang-card:hover{border-color:var(--brand-line); background:var(--brand-soft); transform:translateY(-1px);}
.bio-lang-card.active{border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 2px var(--brand-line) inset;}
.bio-lang-card .native{font-size:16px; font-weight:700; color:var(--ink); line-height:1.3;}
.bio-lang-card .lbl{font-size:10.5px; color:var(--ink-faint); font-weight:600; letter-spacing:.01em;}
#bio-preview-sheet.bio-rtl{direction:rtl;}
#bio-preview-sheet.bio-rtl table td.bio-k{text-align:right;}
#bio-preview-sheet.bio-rtl .bio-header{direction:rtl;}

.bio-preview-wrap{
  display:flex; justify-content:center; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius); padding:22px; overflow:auto; margin-top:14px;
}
#bio-preview-sheet{
  width:600px; min-height:800px; background:#fff; color:#1a1a1a; box-shadow:0 6px 24px rgba(15,23,42,.18);
  padding:36px 40px; font-family:'Georgia', 'Times New Roman', serif; position:relative;
}
#bio-preview-sheet .bio-header{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; margin-bottom:6px;}
#bio-preview-sheet h1{font-size:22px; text-align:center; margin:2px 0 0; letter-spacing:.02em;}
#bio-preview-sheet .bio-header-name{font-size:17px; font-weight:700; margin-top:-2px;}
#bio-preview-sheet .bio-invocation{text-align:center; font-size:15px; margin-bottom:2px; font-weight:700;}
#bio-preview-sheet .bio-invocation .bio-sym{font-size:26px; display:block; margin-bottom:2px;}
#bio-preview-sheet table{width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:13px;}
#bio-preview-sheet table td{padding:5px 6px; vertical-align:top; border-bottom:1px solid #eee;}
#bio-preview-sheet table td.bio-k{font-weight:700; width:38%; color:#333;}
#bio-preview-sheet .bio-section-title{
  font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  margin:20px 0 8px; padding-bottom:4px; border-bottom:2px solid; display:inline-block;
}
#bio-preview-sheet .bio-photo{
  width:140px; height:172px; object-fit:cover; border-radius:10px;
  border:4px solid #fff; box-shadow:0 4px 16px rgba(0,0,0,.22);
}

/* ---- Photo upload widget (form side, not the printed sheet) ---- */
.bio-photo-upload{display:flex; align-items:center; gap:16px; margin:4px 0 6px;}
.bio-photo-circle{
  position:relative; flex:0 0 auto; width:88px; height:88px; border-radius:50%;
  border:2px dashed var(--brand-line); background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden;
  padding:0; transition:border-color .12s ease, background .12s ease;
}
.bio-photo-circle:hover{border-color:var(--brand); background:var(--accent-soft);}
.bio-photo-circle img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.bio-photo-upload-txt{display:flex; flex-direction:column; gap:4px; min-width:0;}
.bio-photo-upload-title{font-size:13.5px; font-weight:700; color:var(--ink);}
.bio-photo-upload-sub{font-size:12px; color:var(--ink-faint);}
.bio-photo-remove{
  align-self:flex-start; margin-top:2px; border:none; background:none; color:var(--brand);
  font-size:12px; font-weight:700; cursor:pointer; padding:0; text-decoration:underline;
}
[data-theme="dark"] .bio-photo-circle{background:var(--surface-2);}

/* =========================================================
   Image Editor (add/edit text on images)
   ========================================================= */
.ie-text-layer{transition:outline-color .12s ease;}
.ie-text-layer:hover{outline:2px dashed var(--brand-line) !important;}
.ie-text-layer.ie-selected{outline:2px dashed var(--brand) !important;}
#ie-stage-wrap{background:repeating-conic-gradient(var(--border-soft) 0% 25%, var(--surface) 0% 50%) 0 0/20px 20px;}
[data-theme="dark"] #ie-stage-wrap{background:repeating-conic-gradient(var(--surface-2) 0% 25%, var(--bg) 0% 50%) 0 0/20px 20px;}
#ie-patch-color{-webkit-appearance:none; appearance:none;}
#ie-patch-color::-webkit-color-swatch-wrapper{padding:2px;}
#ie-patch-color::-webkit-color-swatch{border:none; border-radius:6px;}

/* ---------- Dark-mode fixes for hardcoded light-only accent colors ---------- */
/* Trust badge ("runs in your browser"): border was a fixed light mint that
   ignored the theme, leaving a pale ring around a dark badge. */
[data-theme="dark"] .badge.privacy{border-color:#1E5A44;}
/* Category icon rings on the homepage used fixed pastel borders that read
   as a mismatched light halo on the dark surface behind them. */
[data-theme="dark"] .category-section:nth-of-type(3n+2) .category-head .ico{border-color:#1C4A47;}
[data-theme="dark"] .category-section:nth-of-type(3n) .category-head .ico{border-color:#4A3B18;}
/* Word/token-level diff highlights (Compare tools): fixed light pastel
   backgrounds with no matching text color meant highlighted words were
   nearly unreadable (light ink-on-light-pastel vs light-theme's dark ink). */
[data-theme="dark"] .tok-add{background:#123A2D; color:#8FE9C7;}
[data-theme="dark"] .tok-del{background:#3A1622; color:#F5A9BC;}
/* Inline status notes (limit/error/success) used fixed dark, low-contrast
   text colors that nearly disappeared against the dark theme's near-black
   soft backgrounds. */
[data-theme="dark"] .tag-note.limit{color:#F0C177;}
[data-theme="dark"] .tag-note.error{color:#F5A9BC;}
[data-theme="dark"] .tag-note.success{color:#7FE3B4;}
/* Scrollbar thumb was a fixed light gray-blue that stayed bright and
   out of place against the dark theme's track/background. */
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3852;}
/* Calculator/tool "result" panels fall back to a soft-brand-to-white
   gradient when a tool doesn't set its own accent; the white end ignored
   dark mode and left a bright patch inside an otherwise dark panel. */
[data-theme="dark"] .ft-result{--ft-accent-soft: linear-gradient(160deg, var(--brand-soft), var(--surface));}
.bio-tpl-classic{border:6px double #b8860b;}
.bio-tpl-modern{border-top:8px solid var(--brand);}
.bio-tpl-floral{border:3px solid #b8860b; box-shadow:inset 0 0 0 8px #fffaf0, 0 6px 24px rgba(15,23,42,.18);}
.bio-tpl-royal{border:8px solid #7a1f2b; box-shadow:inset 0 0 0 3px #d4af37, 0 6px 24px rgba(15,23,42,.18);}
#bio-preview-sheet.bio-tpl-mono{font-family:'Helvetica Neue', Arial, sans-serif; border:1px solid #222; letter-spacing:.01em;}
#bio-preview-sheet.bio-tpl-mono h1{letter-spacing:.12em; font-weight:700;}

/* ---- Royal Teal Ornate: dark teal ground, gold dotted frame, gold
   hand-drawn corner flourishes (real inline SVG, so it exports into the
   PDF exactly as previewed), light text throughout. ---- */
#bio-preview-sheet.bio-tpl-royal-teal{
  background:radial-gradient(ellipse at 50% 0%, #163e49, #0c2830 70%);
  color:#EDE6D3;
  border:1px solid #D4AF37;
  overflow:hidden;
}
#bio-preview-sheet.bio-tpl-royal-teal .bio-photo{border-color:#EDE6D3;}
#bio-preview-sheet.bio-tpl-royal-teal .bio-header-name{color:#fff;}
#bio-preview-sheet.bio-tpl-royal-teal table td{border-bottom-color:rgba(237,230,211,.18); color:#F3EFE1;}
#bio-preview-sheet.bio-tpl-royal-teal table td.bio-k{color:#E8C468;}
#bio-preview-sheet.bio-tpl-royal-teal .bio-invocation{color:#E8C468 !important;}
#bio-preview-sheet.bio-tpl-royal-teal .bio-header{position:relative; z-index:1;}
#bio-preview-sheet.bio-tpl-royal-teal table{position:relative; z-index:1;}
#bio-preview-sheet.bio-tpl-royal-teal .bio-section-title{position:relative; z-index:1;}
#bio-preview-sheet.bio-tpl-royal-teal p{color:#F3EFE1; position:relative; z-index:1;}
.bio-corner{position:absolute; z-index:0; pointer-events:none;}
.bio-inner-frame{position:absolute; top:12px; left:12px; right:12px; bottom:12px; border:1.5px dotted #D4AF37; pointer-events:none; z-index:0;}

/* ---- Blush Floral: soft rose ground, deep rose headings, warm ivory card ---- */
#bio-preview-sheet.bio-tpl-blush{
  background:linear-gradient(160deg,#fff6f8,#fde3ea 60%,#fbd3e0);
  border:2px solid #E58FA8;
  box-shadow:inset 0 0 0 8px #fffaf9, 0 6px 24px rgba(15,23,42,.18);
}
#bio-preview-sheet.bio-tpl-blush table td.bio-k{color:#9C3B5E;}
#bio-preview-sheet.bio-tpl-blush table td{border-bottom-color:#f6d3de;}
#bio-preview-sheet.bio-tpl-blush .bio-header-name{color:#7A2C48;}

/* ---- Ivory & Gold: warm cream ground, slim gold double border ---- */
#bio-preview-sheet.bio-tpl-ivory{
  background:#FFFDF5;
  border:2px solid #D9B95C;
  box-shadow:inset 0 0 0 6px #fff, inset 0 0 0 7px #D9B95C, 0 6px 24px rgba(15,23,42,.18);
  padding:44px 46px;
}
#bio-preview-sheet.bio-tpl-ivory table td.bio-k{color:#8a5a12;}
#bio-preview-sheet.bio-tpl-ivory .bio-header-name{color:#6b4a10;}

/* ---- Sandalwood Cream: warm sandalwood cream, soft brown minimal frame ---- */
#bio-preview-sheet.bio-tpl-sandal-cream{
  background:linear-gradient(160deg,#faf7f0,#f0e6d2);
  border:1.5px solid #c9a876;
  box-shadow:0 6px 24px rgba(15,23,42,.18);
}
#bio-preview-sheet.bio-tpl-sandal-cream table td.bio-k{color:#6b5330;}
#bio-preview-sheet.bio-tpl-sandal-cream .bio-header-name{color:#5c4726;}

/* ---- Scarlet & Gold: deep wedding-card red ground, gold corner flourishes,
   light text throughout (same technique as Royal Teal). ---- */
#bio-preview-sheet.bio-tpl-scarlet-gold{
  background:radial-gradient(ellipse at 50% 0%, #8a1c2b, #5e0f1c 75%);
  color:#F8E9C7;
  border:1px solid #D4AF37;
  overflow:hidden;
}
#bio-preview-sheet.bio-tpl-scarlet-gold .bio-photo{border-color:#F8E9C7;}
#bio-preview-sheet.bio-tpl-scarlet-gold .bio-header-name{color:#fff;}
#bio-preview-sheet.bio-tpl-scarlet-gold table td{border-bottom-color:rgba(248,233,199,.18); color:#F8E9C7;}
#bio-preview-sheet.bio-tpl-scarlet-gold table td.bio-k{color:#F5D57A;}
#bio-preview-sheet.bio-tpl-scarlet-gold .bio-invocation{color:#F5D57A !important;}
#bio-preview-sheet.bio-tpl-scarlet-gold .bio-header{position:relative; z-index:1;}
#bio-preview-sheet.bio-tpl-scarlet-gold table{position:relative; z-index:1;}
#bio-preview-sheet.bio-tpl-scarlet-gold .bio-section-title{position:relative; z-index:1;}
#bio-preview-sheet.bio-tpl-scarlet-gold p{color:#F8E9C7; position:relative; z-index:1;}

/* ---- Sapphire Arch: sapphire blue with a decorative gradient arch band across
   the top (a printed-card "mandap arch" look) using plain CSS, so it
   rasterizes cleanly into the exported PDF with no external image. ---- */
#bio-preview-sheet.bio-tpl-sapphire-arch{
  background:#F4F8FE;
  border:1.5px solid #8FB3E0;
  box-shadow:0 6px 24px rgba(15,23,42,.18);
  position:relative;
  overflow:hidden;
}
.bio-arch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:86%; height:64px; border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:linear-gradient(180deg,#1c3f6e,#3f6ea8); z-index:0;
}
#bio-preview-sheet.bio-tpl-sapphire-arch .bio-header{position:relative; z-index:1; padding-top:22px;}
#bio-preview-sheet.bio-tpl-sapphire-arch table td.bio-k{color:#1c3f6e;}
#bio-preview-sheet.bio-tpl-sapphire-arch .bio-header-name{color:#152f52;}
#bio-preview-sheet.bio-tpl-sapphire-arch table td{border-bottom-color:#dbe7f7;}

/* ---- Saffron Accent: warm saffron accent bar, clean minimal ground ---- */
#bio-preview-sheet.bio-tpl-saffron-accent{
  background:#FFFBF3;
  border-top:8px solid #E58A1A;
  box-shadow:0 6px 24px rgba(15,23,42,.18);
}
#bio-preview-sheet.bio-tpl-saffron-accent table td.bio-k{color:#B85E08;}
#bio-preview-sheet.bio-tpl-saffron-accent .bio-header-name{color:#8f4906;}

/* ---- Azure Scrollwork: pale blue ground, cool silver-blue scrollwork corners
   (same ornate SVG technique as Royal Teal / Scarlet & Gold, different tone). ---- */
#bio-preview-sheet.bio-tpl-azure-scroll{
  background:#EEF3FB;
  border:1.5px solid #9FB7D9;
  box-shadow:0 6px 24px rgba(15,23,42,.18);
  overflow:hidden;
}
#bio-preview-sheet.bio-tpl-azure-scroll table td.bio-k{color:#2b3d57;}
#bio-preview-sheet.bio-tpl-azure-scroll .bio-header-name{color:#20304a;}
#bio-preview-sheet.bio-tpl-azure-scroll table td{border-bottom-color:#d7e2f2;}

/* ---- Rosewater: soft rose-pink ground, rounded card, gentle and modern ---- */
#bio-preview-sheet.bio-tpl-rosewater{
  background:linear-gradient(160deg,#fff6f8,#fde6ec);
  border:1.5px solid #F0B7C8;
  border-radius:18px;
  box-shadow:0 6px 24px rgba(15,23,42,.18);
}
#bio-preview-sheet.bio-tpl-rosewater table td.bio-k{color:#B23A5E;}
#bio-preview-sheet.bio-tpl-rosewater .bio-header-name{color:#8f2a48;}
#bio-preview-sheet.bio-tpl-rosewater table td{border-bottom-color:#f9d7e1;}

/* ---- PDF export-only compaction levels ----
   Applied temporarily to #bio-preview-sheet (never left on the live, editable
   preview) while generating the PDF, so a biodata that's only slightly too
   tall for one page can be tightened into one page without shrinking fonts
   to an unreadable size. Level 1 only touches spacing; level 2 (only used if
   level 1 still doesn't fit) also trims font sizes by 1–2.5px — still well
   within a readable print size once scaled onto an A4 page. */
#bio-preview-sheet.bio-pdf-compact{padding:22px 26px;}
#bio-preview-sheet.bio-pdf-compact .bio-header{gap:5px; margin-bottom:3px;}
#bio-preview-sheet.bio-pdf-compact .bio-invocation{margin-bottom:0;}
#bio-preview-sheet.bio-pdf-compact .bio-invocation .bio-sym{margin-bottom:0;}
#bio-preview-sheet.bio-pdf-compact .bio-photo{width:118px; height:146px;}
#bio-preview-sheet.bio-pdf-compact table{margin:6px 0 10px;}
#bio-preview-sheet.bio-pdf-compact table td{padding:3px 6px;}
#bio-preview-sheet.bio-pdf-compact .bio-section-title{margin:10px 0 5px; padding-bottom:3px;}
#bio-preview-sheet.bio-pdf-compact p{line-height:1.45;}

#bio-preview-sheet.bio-pdf-compact-2{padding:16px 20px;}
#bio-preview-sheet.bio-pdf-compact-2 h1{font-size:19px;}
#bio-preview-sheet.bio-pdf-compact-2 .bio-header-name{font-size:15px;}
#bio-preview-sheet.bio-pdf-compact-2 .bio-invocation{font-size:13px;}
#bio-preview-sheet.bio-pdf-compact-2 .bio-invocation .bio-sym{font-size:21px;}
#bio-preview-sheet.bio-pdf-compact-2 .bio-photo{width:96px; height:118px;}
#bio-preview-sheet.bio-pdf-compact-2 table{font-size:12px; margin:4px 0 8px;}
#bio-preview-sheet.bio-pdf-compact-2 table td{padding:2px 6px;}
#bio-preview-sheet.bio-pdf-compact-2 .bio-section-title{margin:7px 0 4px; font-size:12px;}
#bio-preview-sheet.bio-pdf-compact-2 p{font-size:12px; line-height:1.4;}

#bio-preview-sheet.bio-pdf-compact-3{padding:12px 16px;}
#bio-preview-sheet.bio-pdf-compact-3 h1{font-size:17px;}
#bio-preview-sheet.bio-pdf-compact-3 .bio-header{gap:3px; margin-bottom:2px;}
#bio-preview-sheet.bio-pdf-compact-3 .bio-header-name{font-size:14px;}
#bio-preview-sheet.bio-pdf-compact-3 .bio-invocation{font-size:12px; margin-bottom:0;}
#bio-preview-sheet.bio-pdf-compact-3 .bio-invocation .bio-sym{font-size:18px; margin-bottom:0;}
#bio-preview-sheet.bio-pdf-compact-3 .bio-photo{width:78px; height:96px;}
#bio-preview-sheet.bio-pdf-compact-3 table{font-size:11px; margin:2px 0 6px;}
#bio-preview-sheet.bio-pdf-compact-3 table td{padding:1px 5px;}
#bio-preview-sheet.bio-pdf-compact-3 .bio-section-title{margin:5px 0 3px; padding-bottom:2px; font-size:11px;}
#bio-preview-sheet.bio-pdf-compact-3 p{font-size:11px; line-height:1.3;}

@media (max-width:700px){
  #bio-preview-sheet{width:100% !important; padding:24px 18px !important;}
  .bio-preview-wrap{padding:12px;}
}

/* =========================================================
   Letters (js/letters-tools.js) — layout, template picker,
   signature pad, and the four printable letter designs.
   ========================================================= */
.ltr-panel h3{font-size:14px; margin:0 0 10px; font-weight:800; letter-spacing:-0.01em;}
.ltr-layout{display:grid; grid-template-columns:1.05fr 1fr; gap:28px; align-items:start; margin-top:6px;}
.ltr-form-col, .ltr-preview-col{min-width:0;}
.ltr-preview-col{position:sticky; top:76px;}
@media (max-width:960px){
  .ltr-layout{grid-template-columns:1fr;}
  .ltr-preview-col{position:static;}
}

.ltr-template-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:8px; margin:10px 0 4px;}
.ltr-template-card{
  border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface);
  padding:10px 8px; cursor:pointer; text-align:center; font-size:12.5px; font-weight:700; color:var(--ink);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.ltr-template-card:hover{border-color:var(--brand-line);}
.ltr-template-card.active{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-line) inset; color:var(--brand);}

.ltr-upload-row{margin:6px 0 4px;}

.ltr-field-row{position:relative;}
.ltr-field-label-row{display:flex; align-items:center; gap:4px;}
.ltr-field-label-input{
  flex:1; min-width:0; border:none; background:none; padding:2px 4px; margin-left:-4px;
  font-size:11.5px; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  border-radius:4px;
}
.ltr-field-label-input:hover{background:var(--surface-2);}
.ltr-field-label-input:focus{background:var(--surface-2); color:var(--ink);}
.ltr-field-del{
  flex:0 0 auto; border:none; background:none; color:var(--ink-faint); cursor:pointer;
  font-size:15px; line-height:1; padding:2px 6px; border-radius:4px;
}
.ltr-field-del:hover{color:var(--danger); background:var(--danger-soft);}

.tool-btn-toggle{
  border:1.5px solid var(--border); background:var(--surface); color:var(--ink-soft);
  border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:700; cursor:pointer;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.tool-btn-toggle:hover{border-color:var(--brand-line);}
.tool-btn-toggle.active{border-color:var(--brand); background:var(--brand-soft); color:var(--brand);}

#ltr-sig-draw-wrap{margin-top:8px;}
.ltr-sig-canvas{
  display:block; width:100%; max-width:360px; height:auto; aspect-ratio:3/1;
  touch-action:none; /* let pointer/touch drag draw instead of the browser scrolling the page */
  border:1.5px solid var(--border); border-radius:8px; background:#fff; cursor:crosshair;
}
#ltr-sig-upload-wrap{margin-top:8px;}
.bio-photo-circle #ltr-logo-img{border-radius:10px;} /* square logo, not the default circular photo shape */

.ltr-preview-wrap{
  display:flex; justify-content:center; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius); padding:22px; overflow:auto;
}
#ltr-preview-sheet{
  width:600px; min-height:760px; background:#fff; color:#1a1a1a;
  box-shadow:0 6px 24px rgba(15,23,42,.18); position:relative;
  padding:40px 46px;
  font-family:var(--ltr-font, 'Georgia', 'Times New Roman', serif);
  font-size:var(--ltr-fontsize, 14px);
  line-height:var(--ltr-lineheight, 1.6);
}
#ltr-preview-sheet .ltr-body{text-align:var(--ltr-align, left);}
#ltr-preview-sheet .ltr-body p{margin:0 0 12px;}
#ltr-preview-sheet .ltr-letterhead{display:flex; align-items:center; gap:14px; margin-bottom:22px; padding-bottom:14px; border-bottom:2px solid var(--ltr-accent, #3457D5);}
#ltr-preview-sheet .ltr-logo{max-width:64px; max-height:64px; object-fit:contain; flex:0 0 auto;}
#ltr-preview-sheet .ltr-company-block{min-width:0;}
#ltr-preview-sheet .ltr-company-name{font-size:1.35em; font-weight:800; color:var(--ltr-accent, #3457D5); letter-spacing:-0.01em;}
#ltr-preview-sheet .ltr-company-address{font-size:0.82em; color:#555; margin-top:2px; line-height:1.4;}
#ltr-preview-sheet .ltr-date{font-size:0.85em; color:#555; margin-bottom:20px;}
#ltr-preview-sheet .ltr-signature-block{margin-top:34px; padding-top:14px;}
#ltr-preview-sheet .ltr-signature-img{max-width:150px; max-height:60px; object-fit:contain; display:block; margin-bottom:6px;}
#ltr-preview-sheet .ltr-signer-name{font-weight:800;}
#ltr-preview-sheet .ltr-signer-title{font-size:0.85em; color:#555;}

/* ---- Classic: centered, traditional, serif — the default look ---- */
#ltr-preview-sheet.ltr-tpl-classic .ltr-letterhead{flex-direction:column; text-align:center; border-bottom-width:1px; border-bottom-color:#ccc;}
#ltr-preview-sheet.ltr-tpl-classic .ltr-company-address{text-align:center;}
#ltr-preview-sheet.ltr-tpl-classic .ltr-date{text-align:center;}

/* ---- Modern: left-aligned, bold accent-colored name, no top rule ---- */
#ltr-preview-sheet.ltr-tpl-modern .ltr-letterhead{border-bottom:none; border-left:5px solid var(--ltr-accent, #3457D5); padding-left:14px; padding-bottom:0; align-items:flex-start;}
#ltr-preview-sheet.ltr-tpl-modern .ltr-company-name{font-size:1.5em;}
#ltr-preview-sheet.ltr-tpl-modern .ltr-signature-block{border-top:none;}
#ltr-preview-sheet.ltr-tpl-modern .ltr-signer-name{color:var(--ltr-accent, #3457D5);}

/* ---- Minimal: no color, no rules, just generous whitespace ---- */
#ltr-preview-sheet.ltr-tpl-minimal .ltr-letterhead{border-bottom:none; padding-bottom:0; margin-bottom:32px;}
#ltr-preview-sheet.ltr-tpl-minimal .ltr-company-name{color:#1a1a1a; font-weight:700; font-size:1.15em;}
#ltr-preview-sheet.ltr-tpl-minimal .ltr-signature-block{padding-top:0;}

/* ---- Formal: boxed letter with a solid accent header band ---- */
#ltr-preview-sheet.ltr-tpl-formal{border:1px solid #ddd;}
#ltr-preview-sheet.ltr-tpl-formal .ltr-letterhead{
  margin:-40px -46px 26px; padding:22px 46px 18px; border-bottom:none;
  background:var(--ltr-accent, #3457D5); color:#fff;
}
#ltr-preview-sheet.ltr-tpl-formal .ltr-company-name{color:#fff;}
#ltr-preview-sheet.ltr-tpl-formal .ltr-company-address{color:rgba(255,255,255,.85);}
#ltr-preview-sheet.ltr-tpl-formal .ltr-signature-block{border-top:1px solid #ddd;}

/* ---- PDF export-only compaction (see js/app.js exportSheetAsPdf) ---- */
#ltr-preview-sheet.ltr-pdf-compact{padding:24px 28px;}
#ltr-preview-sheet.ltr-pdf-compact .ltr-letterhead{margin-bottom:14px; padding-bottom:10px;}
#ltr-preview-sheet.ltr-pdf-compact .ltr-body p{margin-bottom:8px;}
#ltr-preview-sheet.ltr-pdf-compact .ltr-signature-block{margin-top:20px; padding-top:10px;}
#ltr-preview-sheet.ltr-pdf-compact-2{font-size:calc(var(--ltr-fontsize, 14px) - 1px); line-height:1.45;}
#ltr-preview-sheet.ltr-pdf-compact-2 .ltr-letterhead{margin-bottom:10px; padding-bottom:8px;}
#ltr-preview-sheet.ltr-pdf-compact-3{padding:16px 20px; font-size:calc(var(--ltr-fontsize, 14px) - 2px); line-height:1.3;}
#ltr-preview-sheet.ltr-pdf-compact-3 .ltr-letterhead{margin-bottom:6px; padding-bottom:5px;}
#ltr-preview-sheet.ltr-pdf-compact-3 .ltr-body p{margin-bottom:5px;}
#ltr-preview-sheet.ltr-pdf-compact-3 .ltr-signature-block{margin-top:10px; padding-top:6px;}
#ltr-preview-sheet.ltr-pdf-compact-3.ltr-tpl-formal .ltr-letterhead{margin:-16px -20px 6px; padding:12px 20px 8px;}

.ltr-related-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.ltr-related-link{
  border:1px solid var(--border); border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:600;
  color:var(--ink); text-decoration:none; background:var(--surface);
  transition:border-color .12s ease, color .12s ease;
}
.ltr-related-link:hover{border-color:var(--brand-line); color:var(--brand);}

@media (max-width:700px){
  #ltr-preview-sheet{width:100%; padding:28px 22px;}
  #ltr-preview-sheet.ltr-tpl-formal .ltr-letterhead{margin:-28px -22px 22px; padding:18px 22px 14px;}
  .ltr-preview-wrap{padding:12px;}
}

.rb-tpl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px; margin:10px 0 4px;}
.rb-tpl-card{
  border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface);
  padding:10px; cursor:pointer; text-align:left; transition:border-color .12s ease, background .12s ease;
}
.rb-tpl-card:hover{border-color:var(--brand-line); background:var(--brand-soft);}
.rb-tpl-card.active{border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 2px var(--brand-line) inset;}
.rb-tpl-mock{height:70px; border-radius:6px; background:#fff; border:1px solid var(--border); overflow:hidden; margin-bottom:8px;}
.rb-tpl-card .lbl{display:block; font-size:12.5px; font-weight:700; color:var(--ink);}
.rb-tpl-card .desc{display:block; font-size:11px; color:var(--ink-faint); margin-top:2px;}

/* ---------------- Resume Builder — color, font & style customization ---------------- */
.rb-section-title{
  display:flex; align-items:center; gap:8px; margin:22px 0 8px; font-size:14.5px; font-weight:800; color:var(--ink);
}
.rb-section-title .rb-step-no{
  width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.rb-color-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 4px;}
.rb-swatch{
  width:30px; height:30px; border-radius:50%; border:2px solid rgba(0,0,0,.06); cursor:pointer; position:relative;
  box-shadow:0 1px 3px rgba(15,23,42,.15); transition:transform .12s ease, box-shadow .12s ease; padding:0;
}
.rb-swatch:hover{transform:scale(1.12);}
.rb-swatch.active{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink);}
.rb-swatch.active::after{content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.4);}
.rb-custom-color-wrap{
  display:flex; align-items:center; gap:8px; border:1.5px dashed var(--border); border-radius:999px; padding:4px 12px 4px 4px;
  cursor:pointer; background:var(--surface-2);
}
.rb-custom-color-wrap:hover{border-color:var(--brand-line);}
.rb-custom-color-wrap input[type=color]{width:26px; height:26px; border:none; border-radius:50%; padding:0; cursor:pointer; background:none;}
.rb-custom-color-wrap span{font-size:12px; font-weight:700; color:var(--ink-soft);}

.rb-font-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; margin:6px 0;}
.rb-font-card{
  border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:12px 14px;
  cursor:pointer; text-align:left; transition:border-color .12s ease, background .12s ease;
}
.rb-font-card:hover{border-color:var(--brand-line); background:var(--brand-soft);}
.rb-font-card.active{border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 2px var(--brand-line) inset;}
.rb-font-card .sample{font-size:19px; color:var(--ink); line-height:1.1;}
.rb-font-card .name{display:block; font-size:11.5px; color:var(--ink-soft); margin-top:5px; font-weight:700;}

.rb-seg{display:inline-flex; border:1.5px solid var(--border); border-radius:999px; padding:3px; background:var(--surface-2); gap:2px;}
.rb-seg button{
  border:none; background:none; padding:7px 15px; border-radius:999px; font-size:12.5px; font-weight:700;
  color:var(--ink-soft); cursor:pointer; transition:background .12s ease, color .12s ease;
}
.rb-seg button.active{background:var(--brand); color:#fff;}
.rb-seg-row{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin:6px 0 4px;}
.rb-seg-label{font-size:12px; font-weight:700; color:var(--ink-soft); margin-right:2px;}

.rb-toggle-row{display:flex; flex-wrap:wrap; gap:18px; margin:12px 0 4px;}
.rb-toggle{display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink);}
.rb-toggle input{display:none;}
.rb-toggle .sw{
  width:38px; height:22px; border-radius:999px; background:var(--border); position:relative; transition:background .15s ease; flex:0 0 auto;
}
.rb-toggle .sw::after{content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s ease;}
.rb-toggle input:checked + .sw{background:var(--brand);}
.rb-toggle input:checked + .sw::after{transform:translateX(16px);}

@media (max-width:560px){ .rb-font-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------------- Resume builder: mobile fixes ----------------
   The global small-screen rule ".btn{width:100%}" (used so primary action
   buttons like "Download PDF" stack nicely on phones) was also stretching
   every compact icon-style control in the resume builder — row-delete "×"
   buttons, the reorder ↑/↓ arrows, color swatches, template/font cards —
   into full-width pills. These selectors are more specific than ".btn" so
   they win regardless of viewport width. */
.rb-row-del,
.rb-order-btns .btn,
.rb-swatch,
.rb-custom-color-wrap,
.rb-tpl-card,
.rb-font-card,
.rb-seg button{ width:auto !important; }

.rb-card{ position:relative; }
.rb-card-del-row{ display:flex; justify-content:flex-end; margin-bottom:4px; }
.rb-row-del{
  width:30px !important; height:30px; min-width:30px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; border-radius:50%; flex:0 0 auto;
}

.rb-photo-picker{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0 4px; }
.rb-photo-preview{
  width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--surface-2); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.rb-photo-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.rb-photo-preview .ph-empty{ font-size:10px; color:var(--ink-faint); text-align:center; padding:0 4px; line-height:1.3; }
.rb-photo-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.rb-photo-actions .btn{ width:auto !important; }

@media (max-width:520px){
  .rb-color-row{ gap:8px; }
  .rb-photo-picker{ gap:10px; }
  .rb-photo-actions .btn{ flex:1 1 auto; }
}


/* Editable "field label" inputs — let a form field's own label be renamed */
input.field-label-input{
  font-size:11.5px; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  border:none; background:transparent; padding:0 0 4px; margin:0; width:auto; box-shadow:none;
}
input.field-label-input:focus{outline:none; border:none; background:transparent; color:var(--brand);}



/* =========================================================
   Extra mobile-friendliness fixes (homepage + shell)
   ========================================================= */
@media (max-width:960px){
  .home-section-head{margin:26px 0 12px;}
}
@media (max-width:600px){
  .topbar{padding:0 12px; gap:8px;}
  .topbar .topbar-brand{font-size:15px;}
  .topbar .brand-mark svg{width:19px; height:19px;}
  .topbar-actions{gap:4px;}
  .category-head h2{font-size:14.5px;}
  .category-head .ico{width:32px; height:32px; font-size:15px;}
  .option-card{padding:14px;}
  .blog-grid{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .bio-religion-grid{grid-template-columns:repeat(3,1fr);}
  .bio-template-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:380px){
  .topbar{gap:6px;}
  .topbar .topbar-brand{gap:5px; font-size:13.5px;}
  .topbar .brand-mark svg{width:18px; height:18px;}
  .topbar-actions{gap:3px;}
  .icon-btn{width:30px; height:30px; font-size:13px;}
  .option-grid{grid-template-columns:1fr;}
  .bio-religion-grid{grid-template-columns:repeat(2,1fr);}
}

/* =========================================================
   Large Text / Data Compare — collapsed unchanged-run row
   ========================================================= */
.diff-pane .ln.fold{padding:4px 6px;}
.diff-pane .ln.fold .btn{white-space:normal; text-align:center;}

/* =========================================================
   Animated brand intro ("splash") — shown briefly on PWA
   launch and once per session on the first page visited.
   ========================================================= */
html.tf-splash-active, html.tf-splash-active body{overflow:hidden;}
#tf-splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:#0B1220; cursor:pointer;
  animation:tf-splash-in .25s ease both;
}
#tf-splash.tf-splash-out{animation:tf-splash-fade-out .32s ease both;}
.tf-splash-mark{
  width:64px; height:64px; border-radius:18px; overflow:hidden;
  box-shadow:0 8px 30px rgba(52,87,213,.45);
  animation:tf-splash-mark-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
.tf-splash-mark svg{display:block; width:100%; height:100%;}
.tf-splash-word{display:flex; font-family:var(--font, inherit); font-size:26px; font-weight:800; letter-spacing:.01em;}
.tf-splash-letter{
  display:inline-block; color:#fff; opacity:0; transform:translateY(10px);
  animation:tf-splash-letter-in .4s ease both;
}
.tf-splash-word .tf-splash-letter:nth-child(n+5){color:var(--logo-orange, #E9A11A);}
@keyframes tf-splash-in{from{opacity:0;} to{opacity:1;}}
@keyframes tf-splash-fade-out{from{opacity:1;} to{opacity:0;}}
@keyframes tf-splash-mark-in{from{opacity:0; transform:scale(.4) rotate(-8deg);} to{opacity:1; transform:scale(1) rotate(0);}}
@keyframes tf-splash-letter-in{to{opacity:1; transform:translateY(0);}}

/* =========================================================
   "Buy us a coffee" success toast — shown after a tool
   finishes something useful (download/export/generate).
   ========================================================= */
.tf-coffee-toast{
  position:fixed; left:50%; bottom:22px; z-index:400;
  transform:translate(-50%, 16px); opacity:0;
  display:flex; align-items:flex-start; gap:12px;
  background:#141B2C; color:#fff; border-radius:16px;
  padding:14px 18px 14px 14px; max-width:min(92vw, 380px);
  box-shadow:0 12px 34px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);
  transition:opacity .26s ease, transform .26s ease;
}
.tf-coffee-toast.in{opacity:1; transform:translate(-50%, 0);}
.tf-coffee-toast-emoji{font-size:22px; line-height:1; flex:0 0 auto; margin-top:1px;}
.tf-coffee-toast-body{display:flex; flex-direction:column; gap:9px;}
.tf-coffee-toast-msg{font-size:13.5px; font-weight:600; line-height:1.45;}
.tf-coffee-toast-btn{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  background:var(--logo-orange); color:#141B2C; text-decoration:none;
  border-radius:999px; padding:8px 16px; font-weight:800; font-size:13px;
}
.tf-coffee-toast-btn:hover{filter:brightness(1.08);}
.tf-coffee-toast-qr{display:flex; align-items:center; gap:8px;}
.tf-coffee-toast-qr img{width:64px; height:84px; border-radius:6px; border:1px solid var(--border); background:#fff; padding:3px; flex:0 0 auto;}
.tf-coffee-toast-qr span{font-size:11px; color:var(--ink-soft); line-height:1.4;}
.tf-coffee-toast-close{
  position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); color:var(--ink-soft);
  font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
}
@media (max-width:600px){
  .tf-coffee-toast{bottom:78px; padding:12px 16px 12px 12px;}
}

/* =========================================================
   FUN / QUICK TOOLS — richer, playful visual system
   (Love Calculator, Basic Calculator, Dice Roller, Coin Flip,
   Countdown, Random Name Generator, Pomodoro Timer, Counters)
   ========================================================= */
.ft-panel{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px 26px 26px; box-shadow:var(--shadow-sm);
}
.ft-panel::before{
  content:''; position:absolute; inset:0 0 auto 0; height:5px;
  background:var(--ft-accent, linear-gradient(90deg, var(--brand), var(--accent)));
}
.ft-head{display:flex; align-items:center; gap:14px; margin-bottom:6px; flex-wrap:wrap;}
.ft-head .cd-fullscreen-btn{margin-left:auto;}
@media (max-width:480px){ .ft-head .cd-fullscreen-btn{margin-left:0; width:100%;} }
.ft-icon{
  flex:0 0 auto; width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:26px; background:var(--ft-accent, linear-gradient(135deg, var(--brand), var(--brand-dark)));
  box-shadow:0 8px 18px -6px rgba(52,87,213,.55); animation:ft-pop .5s ease;
}
.ft-head h2{margin:0; font-size:21px; font-weight:800; letter-spacing:-0.01em; color:var(--ink);}
.ft-panel .sub{margin:2px 0 18px; max-width:60ch;}
.ft-panel .ft-head + .sub{margin-top:8px;}

.ft-row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:6px;}
.ft-col{display:flex; flex-direction:column; gap:6px; flex:1 1 160px; min-width:0;}
.ft-col label{font-size:12.5px; font-weight:700; color:var(--ink-soft); display:flex; align-items:center; gap:6px;}

.ft-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:12px; padding:12px 22px; font-weight:800; font-size:14.5px; letter-spacing:.01em;
  color:#fff; cursor:pointer; background:var(--ft-accent, linear-gradient(135deg, var(--brand), var(--brand-dark)));
  box-shadow:0 6px 16px -6px rgba(52,87,213,.55); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ft-btn:hover{transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 10px 22px -6px rgba(52,87,213,.6);}
.ft-btn:active{transform:translateY(0) scale(.98);}
.ft-btn.ft-btn-ghost{
  background:var(--surface-2); color:var(--ink); border:1.5px solid var(--border); box-shadow:none;
}
.ft-btn.ft-btn-ghost:hover{border-color:var(--brand-line); background:var(--brand-soft); color:var(--brand-dark);}
.ft-btn-row{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0;}

.ft-result{
  position:relative; margin-top:18px; padding:26px 20px; text-align:center; border-radius:var(--radius-lg);
  background:var(--ft-accent-soft, linear-gradient(160deg, var(--brand-soft), #fff));
  border:1px solid var(--brand-line); overflow:hidden;
}
.ft-result-big{
  font-size:44px; font-weight:900; letter-spacing:-0.02em; line-height:1;
  background:var(--ft-accent, linear-gradient(135deg, var(--brand), var(--accent)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:ft-pop .35s ease;
}
.ft-result-sub{margin-top:8px; font-size:15px; font-weight:700; color:var(--ink);}
.ft-result-msg{margin-top:6px; font-size:13.5px; color:var(--ink-soft);}
.ft-result-empty{color:var(--ink-faint); font-size:14px; padding:14px 0;}

.ft-meter{height:12px; border-radius:999px; background:var(--border-soft); overflow:hidden; margin:16px auto 0; max-width:340px; box-shadow:inset 0 1px 2px rgba(0,0,0,.06);}
.ft-meter-fill{height:100%; border-radius:999px; background:linear-gradient(90deg, #C4324D, #E9A11A, #1D8A5D); width:0%; transition:width .6s cubic-bezier(.22,1,.36,1);}

.ft-note{
  margin-top:14px; font-size:12.5px; color:var(--ink-faint); background:var(--surface-2);
  border:1px dashed var(--border); border-radius:10px; padding:10px 12px; display:flex; gap:8px; align-items:flex-start;
}
.ft-note::before{content:'✦'; color:var(--brand); flex:0 0 auto;}

/* Dice */
.ft-dice-tray{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:20px 0;}
.ft-die{
  width:58px; height:58px; border-radius:14px; background:linear-gradient(160deg,#fff,#EEF1F8);
  border:1px solid var(--border); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; color:var(--brand-dark); animation:ft-tumble .5s ease;
}
@keyframes ft-tumble{0%{transform:rotate(-25deg) scale(.4); opacity:0;} 60%{transform:rotate(8deg) scale(1.08);} 100%{transform:rotate(0) scale(1); opacity:1;}}
.ft-dice-total{text-align:center; font-size:15px; font-weight:700; color:var(--ink);}
.ft-dice-total b{color:var(--brand); font-size:20px;}

/* Coin */
.ft-coin-tray{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:20px 0;}
.ft-coin{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#5A4300; text-transform:uppercase; letter-spacing:.02em;
  background:radial-gradient(circle at 32% 28%, #FFE9A8, #E9A11A 70%, #B87F0F); box-shadow:0 4px 10px -3px rgba(180,127,15,.6), inset 0 -3px 4px rgba(0,0,0,.15);
  animation:ft-flip .5s ease;
}
@keyframes ft-flip{0%{transform:rotateY(0deg) scale(.5); opacity:0;} 100%{transform:rotateY(360deg) scale(1); opacity:1;}}
.ft-coin-summary{text-align:center; font-size:14px; color:var(--ink-soft);}
.ft-coin-summary b{color:var(--ink);}

/* Calculator */
.ft-calc-display{
  font-family:var(--mono); font-size:28px; font-weight:700; text-align:right; padding:18px 16px;
  border-radius:14px; background:linear-gradient(160deg, var(--navy-900), var(--navy-950)); color:#EAF0FF;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35); margin-bottom:12px; letter-spacing:.01em; min-height:60px;
  display:flex; align-items:center; justify-content:flex-end; overflow-x:auto; white-space:nowrap;
}
.ft-calc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px;}
.ft-calc-key{
  padding:15px 0; border-radius:12px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--ink); font-size:15px; font-weight:700; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ft-calc-key:hover{border-color:var(--brand-line); box-shadow:var(--shadow-sm); transform:translateY(-1px);}
.ft-calc-key:active{transform:translateY(0) scale(.95);}
.ft-calc-key.op{background:var(--brand-soft); color:var(--brand-dark); border-color:var(--brand-line);}
.ft-calc-key.accent{background:linear-gradient(135deg, var(--brand), var(--brand-dark)); color:#fff; border-color:var(--brand-dark);}
@media (max-width:480px){ .ft-calc-key{padding:13px 0; font-size:13.5px;} .ft-calc-display{font-size:22px;} }

/* Countdown */
.ft-countdown-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0;}
.ft-countdown-box{
  background:linear-gradient(160deg, var(--navy-900), var(--navy-950)); color:#fff; border-radius:14px;
  padding:16px 6px; text-align:center; box-shadow:var(--shadow);
}
.ft-countdown-num{font-family:var(--mono); font-size:28px; font-weight:800; color:#EAF0FF;}
.ft-countdown-lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--navy-text-dim); margin-top:4px;}
.ft-countdown-done{text-align:center; font-size:22px; font-weight:800; color:var(--ok); padding:20px 0;}
@media (max-width:480px){ .ft-countdown-num{font-size:20px;} .ft-countdown-box{padding:12px 4px;} }

/* Countdown — whole-screen fullscreen mode */
.cd-fullscreen-overlay{
  display:none;
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(circle at 50% 30%, var(--navy-800), var(--navy-950) 75%);
  color:#fff;
  flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:32px;
}
.cd-fullscreen-overlay.active{display:flex;}
.cd-fullscreen-overlay:fullscreen{width:100vw; height:100vh;}
.cd-fullscreen-exit{
  position:absolute; top:22px; right:22px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff;
  font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.cd-fullscreen-exit:hover{background:rgba(255,255,255,.18);}
.cd-fs-name{
  font-size:clamp(20px, 4vw, 34px); font-weight:800; letter-spacing:-0.01em;
  color:#8FE9E1; text-align:center;
}
.cd-fs-grid{
  display:grid; grid-template-columns:repeat(4, minmax(90px, 1fr)); gap:clamp(10px,2vw,24px);
  width:min(880px, 92vw); margin:0;
}
.cd-fs-grid .ft-countdown-box{padding:clamp(16px,3vw,28px) 6px;}
.cd-fs-grid .ft-countdown-num{font-size:clamp(30px, 8vw, 64px);}
.cd-fs-grid .ft-countdown-lbl{font-size:clamp(10.5px, 1.4vw, 13px);}
.cd-fs-sub{font-size:clamp(13px, 1.6vw, 16px); color:var(--navy-text); text-align:center;}
@media (max-width:520px){ .cd-fs-grid{grid-template-columns:repeat(2, minmax(100px,1fr));} }

/* Pomodoro */
.ft-timer-ring-wrap{display:flex; justify-content:center; margin:14px 0 18px;}
.ft-timer-display{
  width:190px; height:190px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 25%, #EAEFFD, #fff 70%); border:6px solid var(--brand-soft);
  box-shadow:var(--shadow); position:relative;
}
.ft-timer-time{font-family:var(--mono); font-size:38px; font-weight:800; color:var(--ink);}
.ft-timer-state{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-top:4px;}
.ft-timer-display.running{border-color:var(--accent);}

/* Random name generator */
.ft-name-list{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:8px;}
.ft-name-chip{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 12px;
  font-weight:600; color:var(--ink); font-size:13.5px; display:flex; align-items:center; gap:8px;
}
.ft-name-chip::before{content:'👤'; font-size:13px;}

/* Stat cards (counters) — icon variant of stat-box */
.ft-stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:12px; margin:16px 0;}
.ft-stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 14px;
  text-align:center; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease;
}
.ft-stat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand-line);}
.ft-stat-ico{font-size:18px; margin-bottom:6px;}
.ft-stat-num{font-family:var(--mono); font-size:23px; font-weight:800; color:var(--brand-dark);}
.ft-stat-lbl{font-size:11.5px; color:var(--ink-soft); margin-top:3px; font-weight:600;}
.ft-limit-list{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.ft-limit-row{
  display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:9px 12px; font-size:13px;
}
.ft-limit-row .ft-limit-name{flex:1 1 auto; font-weight:700; color:var(--ink);}
.ft-limit-row .ft-limit-bar{flex:1 1 120px; height:8px; border-radius:999px; background:var(--border-soft); overflow:hidden;}
.ft-limit-row .ft-limit-bar-fill{height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--ok));}
.ft-limit-row.over .ft-limit-bar-fill{background:linear-gradient(90deg, var(--danger), #8A2438);}
.ft-limit-row .ft-limit-tag{flex:0 0 auto; font-size:11.5px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--ok-soft); color:var(--ok);}
.ft-limit-row.over .ft-limit-tag{background:var(--danger-soft); color:var(--danger);}

.ft-breakdown{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.ft-bar-row{display:flex; align-items:center; gap:10px;}
.ft-bar-label{flex:0 0 108px; font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.ft-bar-track{flex:1 1 auto; height:14px; border-radius:999px; background:var(--border-soft); overflow:hidden;}
.ft-bar-fill{height:100%; border-radius:999px; transition:width .5s ease;}
.ft-bar-val{flex:0 0 auto; font-family:var(--mono); font-size:12.5px; color:var(--ink); min-width:70px; text-align:right;}

@keyframes ft-pop{0%{transform:scale(.7); opacity:0;} 60%{transform:scale(1.06);} 100%{transform:scale(1); opacity:1;}}
@media (max-width:560px){ .ft-panel{padding:20px 16px;} .ft-result-big{font-size:34px;} }