/* ---------- premium fonts (served locally, OFL-licensed — used by the studio) ---------- */
@font-face { font-family: "Inter"; src: url("/fonts/Inter-400.ttf"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-700.ttf"); font-weight: 700; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-400.ttf"); font-weight: 400; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-700.ttf"); font-weight: 700; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-400.ttf"); font-weight: 400; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-700.ttf"); font-weight: 700; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/SpaceGrotesk-400.ttf"); font-weight: 400; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/SpaceGrotesk-700.ttf"); font-weight: 700; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/PlayfairDisplay-400.ttf"); font-weight: 400; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/PlayfairDisplay-700.ttf"); font-weight: 700; }
@font-face { font-family: "Lora"; src: url("/fonts/Lora-400.ttf"); font-weight: 400; }
@font-face { font-family: "Lora"; src: url("/fonts/Lora-700.ttf"); font-weight: 700; }
@font-face { font-family: "Merriweather"; src: url("/fonts/Merriweather-400.ttf"); font-weight: 400; }
@font-face { font-family: "Merriweather"; src: url("/fonts/Merriweather-700.ttf"); font-weight: 700; }
@font-face { font-family: "DM Serif Display"; src: url("/fonts/DMSerifDisplay-400.ttf"); font-weight: 400; }
@font-face { font-family: "Bebas Neue"; src: url("/fonts/BebasNeue-400.ttf"); font-weight: 400; }
@font-face { font-family: "Dancing Script"; src: url("/fonts/DancingScript-400.ttf"); font-weight: 400; }
@font-face { font-family: "Dancing Script"; src: url("/fonts/DancingScript-700.ttf"); font-weight: 700; }

/* ============ AllTools — saasby landing design language ============
   Warm off-white ground, white cards with 1.5px cool borders, electric
   blue #004bfe. Type: Baloo 2 rounded headings + Nunito body. */
:root {
  --brand: #004bfe; --brand-dark: #0038cc; --brand-light: #eef2ff;
  --ink: #080d1a; --ink-soft: #3a4265; --muted: #7880a0;
  --surface: #fff; --bg: #f9f8f7; --line: #e4e7f2; --line-soft: #edf0f8;
  --radius: 16px; --radius-sm: 10px;
  --page-w: min(880px, 92vw);   /* standard width for tool working pages */
  --font-display: "Baloo 2", "Segoe UI", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;
  /* mapped names used by the tool views / editors / studio */
  --accent: var(--brand);
  --accent-soft: var(--brand-light);
  --border: var(--line);
  --text: var(--ink);
  --text-2: var(--ink-soft);
  --text-dim: var(--ink-soft);
  --text-3: var(--muted);
  --bg-2: #fff; --bg-3: #f3f4f9; --bg-4: #e9ecf5;
  --surface-2: #f6f7fb;
  --shadow: 0 8px 24px rgba(8, 13, 26, .08);
  --shadow-deep: 0 24px 60px rgba(8, 13, 26, .18);
  --ok: #15803d;
  --grad: var(--brand);
  --font-ui: var(--font-body);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 15px/1.5 var(--font-body);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
/* plain warm ground — the hero keeps only a subtle dot grid */
.hidden { display: none !important; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); }
.container { width: min(1160px, 92vw); margin: 0 auto; }
main { flex: 1; }
.ph-duotone { line-height: 1; }

/* hide the site chrome inside full-screen workspaces */
body:has(#view-pdfmaker:not(.hidden)) .site-head,
body:has(#view-pdfmaker:not(.hidden)) .site-foot,
body:has(#view-editor:not(.hidden)) .site-foot { display: none; }

/* ---------- navbar: floating glass island with an animated gradient halo ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  padding: 14px 0 8px;
  background: transparent;
}
.nav {
  position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .5rem .7rem .5rem 1.4rem;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(8, 13, 26, .1), 0 2px 8px rgba(8, 13, 26, .05);
}
.logo {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.01em; color: var(--ink);
}
.nav-links { display: none; gap: .2rem; list-style: none; align-items: center; margin: 0; padding: 0; }
.nav-links li.nc-create  { --nav-hover: #ff5453; }
.nav-links li.nc-pdf     { --nav-hover: #8806CE; }
.nav-links li.nc-writing { --nav-hover: #9B1889; }
.nav-links li.nc-image   { --nav-hover: #CA1F7B; }
.has-dropdown { position: relative; }
.nav-trigger {
  font-size: .9rem; font-weight: 500; color: var(--ink-soft);
  transition: color .15s; display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem .7rem; border-radius: 10px;
}
/* each item hovers into its own category's color — the same identity carried by the section bands */
.has-dropdown:hover .nav-trigger, .nav-trigger:focus { color: var(--nav-hover, #ff5453); background: #f7f4f6; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; color: currentColor; font-size: 1.05rem; }
.nav-caret { font-size: .68rem; margin-left: -.15rem; transition: transform .15s; color: var(--muted); }
.has-dropdown:hover .nav-caret { transform: rotate(180deg); color: inherit; }

/* mega-menu: a look inside each category instead of a bare label */
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 12px; width: 460px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-dd-grid {
  background: #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(8, 13, 26, .18);
  padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px;
}
.nav-dd-item {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 11px;
  transition: background .12s; min-width: 0;
}
.nav-dd-item:hover { background: #f7f4f6; }
.nav-dd-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.nav-dd-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.nav-dd-copy strong { font-size: .84rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.nav-dd-copy small { font-size: .74rem; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-dd-all {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: 8px; background: #fff; border-radius: 14px; box-shadow: 0 12px 30px rgba(8, 13, 26, .14);
  padding: .7rem; font-size: .84rem; font-weight: 700; color: var(--nav-hover, #ff5453);
}
.nav-dd-all:hover { background: #f7f4f6; }

.nav-right { display: flex; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem 1.2rem; border-radius: 999px;
  font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  border: none; cursor: pointer;
  transition: transform .12s, background .15s, box-shadow .15s; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: #ff5453; }
.btn-secondary { background: #e9dff0; color: var(--ink); }
.btn-secondary:hover { background: #dccde8; }
/* --cta is set on the nav's Sign up button by the home page as you scroll, so the
   button follows the colour of the section you're in (defaults to the coral) */
.btn-launch {
  --cta: #ff5453;
  color: #fff; background: var(--cta);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cta) 32%, transparent);
  transition: transform .12s, background .45s ease, box-shadow .45s ease;
}
.btn-launch:hover { background: color-mix(in srgb, var(--cta) 84%, #000); box-shadow: 0 8px 22px color-mix(in srgb, var(--cta) 40%, transparent); }
@media (min-width: 880px) { .nav-links { display: flex; } }

/* ---------- hero: a deep, unmistakably-colored violet-aubergine, flat — NOT black
   and NOT a gradient — hue-separated from the coral accent to keep it legible ---------- */
.hero {
  position: relative; overflow: hidden;
  background: #2d0e3d;
  border-radius: 0 0 32px 32px;            /* the same rounded-panel language as the section bands */
  margin-top: -76px;                       /* the glass navbar floats over the band */
  padding: calc(4.6rem + 76px) 0 5.4rem;
}
/* the original subtle dot grid, fading toward the bottom */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 85%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 85%);
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto; }
.hero h1 {
  font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.01em; margin: 0 0 1.3rem;
  color: #faf7f0;
}
.hero h1 .accent { color: #ff5453; }
.hero-subcopy { margin: 1.3rem auto 0; max-width: 38rem; font-size: .96rem; line-height: 1.7; color: rgba(250, 247, 240, .72); }
.hero-search { margin: 2.3rem auto 0; max-width: 560px; position: relative; }
.hero-search input {
  width: 100%; padding: 1.05rem 1.2rem 1.05rem 3.1rem;
  border: none; border-radius: 999px; background: #fff;
  font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 18px 44px rgba(0, 0, 0, .5);
}
.hero-search input:focus { box-shadow: 0 0 0 4px rgba(255, 84, 83, .38), 0 18px 44px rgba(0, 0, 0, .5); }
.hero-search input::placeholder { color: var(--muted); }
.hero-search .search-icon {
  position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* ---------- landing sections: calm neutral canvas, one bold color moment per
   category ---------- The hero, footer, and each section's band carry the
   color; the tool grid itself sits on the same quiet ground as the rest of
   the site so 40+ cards stay easy to scan instead of fighting a wall of paint. */
.section { position: relative; padding: 2.8rem 0 4.6rem; }
.section .container { position: relative; }
#sec-create  { --sec-solid: #ff5453; --sec-bg: #ff5453; --sec-ink: #fff; --sec-accent: #e03130; }
#sec-pdf     { --sec-solid: #8806CE; --sec-bg: #8806CE; --sec-ink: #fff; --sec-accent: #8806CE; }
#sec-writing { --sec-solid: #9B1889; --sec-bg: #9B1889; --sec-ink: #fff; --sec-accent: #9B1889; }
#sec-image   { --sec-solid: #CA1F7B; --sec-bg: #CA1F7B; --sec-ink: #fff; --sec-accent: #CA1F7B; }

/* the bold color moment: one framed, rounded panel per category — same
   iconography as the navbar links, same star texture as the hero */
.section-band {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 1.1rem;
  background: var(--sec-solid); border-radius: 26px;
  padding: 2.3rem 2.4rem; margin-bottom: 2.6rem;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--sec-bg) 30%, transparent);
}
.section-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .32) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 140% at 12% 30%, rgba(0, 0, 0, .9), transparent 75%);
  mask-image: radial-gradient(120% 140% at 12% 30%, rgba(0, 0, 0, .9), transparent 75%);
}
.section-icon {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 58px; height: 58px; border-radius: 17px;
  background: rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.7rem;
}
.section-band h2 {
  position: relative; z-index: 1; margin: 0; font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800;
  letter-spacing: -.01em; color: #fff;
}
.section .empty-note, .section #no-results { color: var(--muted); opacity: .85; }

.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.listing-card {
  position: relative;
  background: #fff; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset,
              0 4px 16px color-mix(in srgb, var(--sec-bg, #8b96ad) 20%, transparent);
  padding: 1.3rem 1.35rem 1.25rem; display: flex; flex-direction: column; gap: .8rem;
  cursor: pointer; transition: transform .18s, box-shadow .18s;
  text-align: left; color: var(--ink); font: inherit;
  overflow: hidden;
}
.listing-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--sec-accent, var(--brand));
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.listing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset,
              0 22px 40px color-mix(in srgb, var(--sec-bg, #8b96ad) 34%, transparent);
}
.listing-card:hover::before { transform: scaleX(1); }
.tile-top { display: flex; align-items: center; gap: .8rem; }
.tile-logo {
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 1.5rem;
  transition: transform .18s;
}
.listing-card:hover .tile-logo { transform: scale(1.08) rotate(-4deg); }
.tile-titles { min-width: 0; flex: 1; }
.card-name { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; line-height: 1.2; display: block; }
.card-cat {
  font-size: .7rem; font-weight: 700;
  color: var(--sec-accent, var(--brand));
  background: color-mix(in srgb, var(--sec-accent, var(--brand)) 9%, #fff);
  padding: .18rem .55rem; border-radius: 6px; white-space: nowrap; display: inline-block; margin-top: .28rem;
}
.card-desc { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.card-footer { border-top: 1px solid var(--line-soft); padding-top: .75rem; display: flex; justify-content: flex-start; align-items: center; gap: .5rem; }
.card-open {
  display: inline-flex; align-items: center; gap: .32rem;
  font-size: .82rem; font-weight: 700; color: var(--sec-accent, var(--brand));
}
.card-open .ph-duotone { transition: transform .16s; }
.listing-card:hover .card-open .ph-duotone { transform: translateX(4px); }
.empty-note { color: var(--muted); font-size: .92rem; padding: 1.4rem 0 3rem; }

/* scroll-reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; }
}
@media (max-width: 980px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .listing-grid { grid-template-columns: 1fr; } }

/* ---------- SEO tool pages ---------- */
.tool-above { padding: 1.6rem 0 0; }
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--muted); margin-bottom: 1.1rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); transition: color .15s; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: var(--line); }
.breadcrumb .current { color: var(--ink-soft); font-weight: 600; }
.tool-above .tool-head { margin-bottom: 0; }
.tool-above .tool-head h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.tool-cta { margin-top: 1.4rem; }
.btn-lg { padding: .78rem 1.7rem; font-size: .95rem; }

/* upload-to-open card on the editor tool pages (PDF editor, slides, docs, sheets):
   drop a file to open it in the editor, or start blank */
.open-upload { margin-top: 1.7rem; text-align: center; }
.open-upload .ou-dropzone { padding: 2.4rem 1.6rem; }
.ou-or {
  display: flex; align-items: center; gap: .9rem; margin: 1.1rem 0;
  color: var(--muted); font-size: .84rem; font-weight: 600;
}
.ou-or::before, .ou-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* the JS view repeats the title on tool pages — the server-rendered one wins */
.seo-page #view-tool .tool-head, .seo-page .ed-title-row { display: none; }
.seo-page #view-tool .back, .seo-page .ed-sidebar .back { margin-top: .2rem; }
/* once the studio opens, the landing content gets out of the way */
body:has(#view-pdfmaker:not(.hidden)) .tool-above,
body:has(#view-pdfmaker:not(.hidden)) .tool-seo { display: none; }

.tool-seo { padding: 2.2rem 0 3.5rem; }
.tool-seo .container { max-width: 780px; }
.tool-intro { font-size: 1rem; line-height: 1.75; color: var(--ink-soft); max-width: 68ch; margin: 0 0 1.6rem; }
.tool-seo h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.25rem, 2vw, 1.55rem); margin: 2rem 0 1rem; color: var(--ink);
}
.howto-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.howto-steps li {
  display: flex; align-items: flex-start; gap: .8rem;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: .85rem 1rem; font-size: .93rem; color: var(--ink-soft); line-height: 1.55;
}
.step-num {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: color-mix(in srgb, #ff5453 12%, #fff); color: #e03130;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
}
.faq-list { display: grid; gap: .7rem; }
.faq-list details {
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: .9rem 1.1rem;
}
.faq-list summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; letter-spacing: -.01em; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--muted); font-weight: 600; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: .6rem 0 0; font-size: .9rem; line-height: 1.65; color: var(--ink-soft); }
.related-grid { margin-top: .2rem; }
.related-grid .listing-card { gap: .55rem; padding: 1rem 1.05rem; }

/* category hub pages */
.cat-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.08; margin: 0 0 .9rem; color: var(--ink);
}
.cat-intro { font-size: 1rem; line-height: 1.75; color: var(--ink-soft); max-width: 68ch; margin: 0; }
.cat-grid-wrap { padding: 1.8rem 0 .6rem; }
.cat-links { display: flex; gap: .6rem; flex-wrap: wrap; }
.cat-link { border: 1.5px solid var(--line); background: #fff; }
.cat-link:hover { border-color: #ffc4c3; }

/* guides */
.guide-intro { font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); max-width: 66ch; margin: 0 0 1.6rem; }
.guide-cta {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  padding: 1.1rem 1.2rem; margin: 2rem 0 .6rem;
}
.guide-cta .tile-logo { width: 46px; height: 46px; font-size: 1.45rem; }
.guide-cta-copy { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .15rem; }
.guide-cta-copy strong { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -.01em; }
.guide-cta-copy span { font-size: .87rem; color: var(--ink-soft); line-height: 1.45; }
.guide-list { display: grid; gap: .8rem; }
.guide-index { grid-template-columns: repeat(2, 1fr); margin-top: .4rem; }
@media (max-width: 720px) { .guide-index { grid-template-columns: 1fr; } }
.guide-card {
  display: flex; flex-direction: column; gap: .35rem;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 1rem 1.1rem; transition: transform .16s, border-color .16s;
}
.guide-card:hover { transform: translateY(-2px); border-color: #ffc4c3; }
.guide-card strong { font-family: var(--font-display); font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }
.guide-card span { font-size: .85rem; color: var(--muted); line-height: 1.5; }

/* static / company pages */
.static-page { padding: 1.6rem 0 3.5rem; }
.static-page .container { max-width: 720px; }
.static-page h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.2rem, 2vw, 1.45rem); margin: 2rem 0 .7rem; color: var(--ink);
}
.static-page p { font-size: .96rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 .9rem; }
.static-page .cat-title { margin-bottom: 1.4rem; }

/* ---------- job application tool ---------- */
.jt-step { margin-bottom: 2.2rem; }
.jt-step-title {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 1rem;
}
.jt-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 800px) { .jt-grid { grid-template-columns: 1fr; } }
.jt-dropzone { display: flex; flex-direction: column; justify-content: center; padding: 30px 20px; }
.jt-reqs {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.jt-reqs label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); display: flex; flex-direction: column; gap: 4px; }
.jt-reqs input[type=text], .jt-profile input[type=text] {
  padding: 8px 10px; font: inherit; font-weight: 400;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); outline: none; width: 100%;
}
.jt-reqs input[type=text]:focus, .jt-profile input[type=text]:focus { border-color: var(--brand); background: #fff; }
.jt-reqs textarea {
  padding: 8px 10px; font: inherit; font-weight: 400; resize: vertical;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); outline: none; width: 100%;
}
.jt-reqs textarea:focus { border-color: var(--brand); background: #fff; }
.jt-check { display: flex; flex-direction: row !important; align-items: center; gap: 8px; font-weight: 500 !important; font-size: 13.5px !important; }
.jt-check input { accent-color: var(--brand); }
.jt-profile {
  margin-top: 14px; background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.jt-profile-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 10px; }
.jt-profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 800px) { .jt-profile-grid { grid-template-columns: 1fr 1fr; } }
.jt-profile-grid label { font-size: 12px; font-weight: 600; color: var(--ink-soft); display: flex; flex-direction: column; gap: 3px; }
.jt-profile-summary { margin-top: 10px; font-size: 13px; color: var(--muted); }

.jt-jobs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.jt-job {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 13px 15px; transition: border-color .15s;
}
.jt-job:hover { border-color: #cfdaff; }
.jt-job input { margin-top: 4px; accent-color: var(--brand); width: 16px; height: 16px; }
.jt-job-main { min-width: 0; flex: 1; }
.jt-job-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jt-job-top strong { font-family: var(--font-display); font-size: 15px; letter-spacing: -.01em; }
.jt-score { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.jt-score.good { background: #ecfdf3; color: #166534; }
.jt-score.ok { background: #fff7ed; color: #c2410c; }
.jt-score.low { background: var(--bg); color: var(--muted); }
.jt-source {
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 9px;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-soft);
}
.jt-job-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.jt-job-meta a { color: var(--brand); }
.jt-job-reason { font-size: 13px; color: var(--ink-soft); margin-top: 5px; line-height: 1.5; }
.jt-autosubmit { margin-bottom: 4px; color: var(--ink-soft); }

.jt-apps { display: flex; flex-direction: column; gap: 12px; }
.jt-app { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.jt-app-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jt-app-head strong { font-family: var(--font-display); font-size: 15px; }
.jt-app-co { color: var(--muted); font-size: 13px; }
.jt-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px;
}
.jt-chip.working { background: var(--brand-light); color: var(--brand); }
.jt-chip.submitted { background: #ecfdf3; color: #166534; }
.jt-chip.filled { background: #eff6ff; color: #1d4ed8; }
.jt-chip.partial { background: #fff7ed; color: #c2410c; }
.jt-chip.failed { background: #fff1f2; color: #b42318; }
.jt-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: jtPulse 1s ease-in-out infinite; }
@keyframes jtPulse { 50% { opacity: .25; } }
.jt-app-body { margin-top: 8px; font-size: 13px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 7px; }
.jt-filled { color: var(--ink-soft); }
.jt-notes { color: var(--muted); line-height: 1.5; }
.jt-cover summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.jt-cover pre { white-space: pre-wrap; font: 13px/1.6 Georgia, serif; background: var(--bg); border-radius: 8px; padding: 10px 12px; margin: 6px 0 0; }
.jt-shot { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; }
.jt-open { color: var(--brand); font-weight: 600; font-size: 13px; }

/* ---------- ATS checker ---------- */
.at-dropzone { padding: 44px 24px; }
.at-actions { margin-top: 16px; }

.at-report { margin-top: 30px; }
.at-report.at-in .at-hero { animation: atRise .5s cubic-bezier(.22, .61, .36, 1) backwards; }
.at-report.at-in .at-panel { animation: atRise .5s cubic-bezier(.22, .61, .36, 1) .12s backwards; }
@keyframes atRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.at-hero {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  background: #fff; border: 1.5px solid var(--line); border-radius: 20px;
  padding: 28px 32px; margin-bottom: 18px;
  box-shadow: 0 10px 32px rgba(8, 13, 26, .06);
}
.at-ring {
  width: 148px; height: 148px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: conic-gradient(var(--line-soft) 0deg, var(--line-soft) 360deg);
}
.at-ring-inner {
  width: 118px; height: 118px; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 4px rgba(8, 13, 26, .05);
}
.at-num {
  font-family: var(--font-display); font-size: 44px; font-weight: 800;
  line-height: 1; letter-spacing: -.01em; color: currentColor;
}
.at-ring small {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-top: 4px;
}
.at-hero-main { flex: 1; min-width: 260px; }
.at-verdict {
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  font-size: 15px; letter-spacing: -.01em;
  border-radius: 999px; padding: 5px 16px; margin-bottom: 10px;
}
.at-summary { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.7; font-size: 15px; max-width: 62ch; }
.at-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.at-stat {
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 12px;
}
.at-stat.high { background: #fff1f2; color: #b42318; }
.at-stat.medium { background: #fff7ed; color: #c2410c; }
.at-stat.low { background: #fefce8; color: #a16207; }
.at-stat.clean { background: #ecfdf3; color: #166534; }

.at-cols { display: grid; grid-template-columns: 1fr 1.35fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .at-cols { grid-template-columns: 1fr; } }
.at-panel {
  background: #fff; border: 1.5px solid var(--line); border-radius: 18px;
  padding: 20px 22px;
}
.at-panel-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
}
.at-panel-title .ph-duotone { font-size: 19px; color: var(--brand); }
.at-strengths { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.at-strengths li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.at-strengths .ph-duotone { color: #0f9d58; font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.at-issues { display: flex; flex-direction: column; gap: 10px; }
.at-issue {
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 12px 14px;
  animation: atRise .45s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms) backwards;
}
.at-issue-head { display: flex; align-items: flex-start; gap: 9px; }
.at-sev {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 6px; padding: 2.5px 7px; flex-shrink: 0; margin-top: 1.5px;
}
.at-sev.high { background: #b42318; color: #fff; }
.at-sev.medium { background: #e08b3c; color: #fff; }
.at-sev.low { background: #eab036; color: #fff; }
.at-issue-title { font-size: 13.5px; font-weight: 650; line-height: 1.45; }
.at-fix {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 13px; color: var(--ink-soft); margin: 7px 0 0 2px; line-height: 1.55;
}
.at-fix .ph-duotone { color: var(--brand); font-size: 15px; flex-shrink: 0; margin-top: 2px; }

/* ---------- auth modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(8, 13, 26, .45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem; z-index: 100;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 18px;
  width: min(480px, 100%); max-height: 90vh; overflow-y: auto; padding: 1.8rem;
  box-shadow: var(--shadow-deep);
  transform: translateY(12px) scale(.98); transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 1.1rem; right: 1.1rem; width: 34px; height: 34px; border-radius: 999px;
  border: none; background: var(--bg); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .14s;
}
.modal-close:hover { background: #e9ecf5; }
.modal-title { margin: 0 0 .3rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.modal-sub { margin: 0 0 1.3rem; font-size: .92rem; color: var(--muted); line-height: 1.6; }
.auth-perks { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .7rem; }
.auth-perks li { display: flex; align-items: center; gap: .65rem; font-size: .9rem; color: var(--ink-soft); }
.auth-perks .ph-duotone {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: var(--brand-light); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.modal-submit { width: 100%; justify-content: center; padding: .75rem 1.1rem; font-size: .95rem; }

/* ---------- footer: bold ink band, bookending the hero with the matching rounded edge ---------- */
.site-foot { background: #2d0e3d; margin-top: 0; padding: 3.4rem 0 2.5rem; border-radius: 32px 32px 0 0; }
.footer-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.footer-brand { max-width: 30ch; }
.footer-brand .logo { display: block; margin-bottom: .7rem; color: #fff; }
.footer-brand p { margin: 0; font-size: .88rem; color: rgba(250, 247, 240, .55); line-height: 1.6; }
.footer-cols { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer-col h4 { margin: 0 0 .9rem; font-family: var(--font-body); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #ff5453; }
.footer-col a { display: block; font-size: .86rem; color: rgba(250, 247, 240, .62); margin-bottom: .55rem; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; color: rgba(250, 247, 240, .45); font-size: .84rem; }
.lang-switch { display: inline-flex; gap: .35rem; }
.lang-switch a {
  padding: .18rem .55rem; border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: rgba(250, 247, 240, .55);
  transition: color .15s, border-color .15s;
}
.lang-switch a:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.lang-switch a.on { color: #fff; border-color: #ff5453; background: #ff5453; }

/* ---------- inner pages: one standard width for every tool page ---------- */
.inner-page { padding: 1.8rem 0 4rem; width: var(--page-w); }
.tool-above .container, .tool-seo .container { width: var(--page-w); max-width: none; }
/* category hubs keep the full landing width for their grids */
.cat-above .container { width: min(1160px, 92vw); }
.back {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font: inherit; font-size: .88rem; font-weight: 500;
  padding: 0; margin-bottom: 1rem;
}
.back:hover { color: var(--brand); }
.tool-head { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.tool-head-icon {
  flex: 0 0 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center; font-size: 27px;
  background: var(--brand-light); color: var(--brand);
  border: 1px solid var(--line);
}
.tool-head h1 { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; }
.tool-head p { margin: 2px 0 0; color: var(--ink-soft); }

.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 44px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone.drag { border-color: var(--brand); background: var(--brand-light); }
.dz-icon { font-size: 38px; margin-bottom: 8px; color: var(--brand); }
.dz-label { font-size: 16px; }
.dz-hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.linklike {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--brand); text-decoration: underline; cursor: pointer;
}

.file-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file-list li {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 10px; padding: 9px 12px;
}
.file-list li.draggable { cursor: grab; }
.file-list li.dragging { opacity: .45; }
.file-list .grip { color: var(--muted); cursor: grab; }
.file-list .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .fsize { color: var(--muted); font-size: 12.5px; }
.file-list .remove {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 15px; padding: 2px 6px; border-radius: 6px;
}
.file-list .remove:hover { color: var(--brand); background: var(--brand-light); }

.pw-row { margin-top: 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.pw-row .ph-duotone { color: var(--brand); vertical-align: -2px; }
.pw-row input { margin-left: 8px; }

/* ---------- page picker ---------- */
#page-picker { margin-top: 18px; }
.picker-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.picker-bar .note { color: var(--muted); font-size: 13px; }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.thumb {
  position: relative; background: #fff;
  border: 2px solid var(--line); border-radius: 10px;
  padding: 8px 8px 4px; text-align: center; cursor: pointer;
  transition: border-color .1s, transform .1s;
  user-select: none;
}
.thumb img { max-width: 100%; height: auto; border: 1px solid var(--line-soft); background: #fff; transition: transform .15s; }
.thumb .pnum { font-size: 12px; color: var(--muted); padding: 3px 0 2px; }
.thumb.selected { border-color: var(--brand); }
.thumb.selected::after {
  content: "✓"; position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 13px;
  display: grid; place-items: center;
}
.thumb.dragging { opacity: .4; }
.thumb .mini-actions { position: absolute; top: 4px; left: 4px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.thumb:hover .mini-actions { opacity: 1; }
.mini-actions button {
  border: none; border-radius: 6px; width: 24px; height: 24px;
  cursor: pointer; background: rgba(8, 13, 26, .72); color: #fff; font-size: 12px;
}
.mini-actions button:hover { background: var(--brand); }

/* ---------- image crop editor ---------- */
.crop-wrap {
  position: relative; display: inline-block; max-width: 100%;
  touch-action: none; user-select: none;
  border-radius: 10px; overflow: hidden; border: 1.5px solid var(--line);
}
#crop-img { max-width: 100%; max-height: 62vh; display: block; -webkit-user-drag: none; }
.crop-sel {
  position: absolute; pointer-events: none;
  border: 2px dashed var(--brand);
  background: rgba(0, 75, 254, .12);
  box-shadow: 0 0 0 4000px rgba(8, 13, 26, .35);
}

/* ---------- options form ---------- */
.options { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.options:empty { margin: 0; }
.opt { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.opt.wide { grid-column: 1 / -1; }
.opt > label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--ink-soft); }
.opt .hint { font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 5px; }
.opt input[type=text], .opt input[type=password], .opt input[type=number], .opt select {
  width: 100%; padding: 8px 10px; font: inherit;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); outline: none;
  transition: border-color .15s, background .15s;
}
.opt input:focus, .opt select:focus { border-color: var(--brand); background: #fff; }
.opt input[type=range] { width: 100%; accent-color: var(--brand); }
.opt input[type=color] { width: 48px; height: 30px; border: none; background: none; padding: 0; cursor: pointer; }
.opt .check { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; margin: 4px 0; }
.opt .check input { accent-color: var(--brand); }

.actions { margin-top: 22px; display: flex; gap: 12px; align-items: center; justify-content: center; }
button.primary, a.primary {
  background: var(--brand); color: #fff; border: none;
  padding: .78rem 1.9rem; font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  border-radius: 999px; cursor: pointer; text-decoration: none;
  display: inline-block;
  transition: background .15s, transform .12s;
}
button.primary:hover:not(:disabled), a.primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
button.primary:disabled { opacity: .45; cursor: not-allowed; }
.actions button:not(.primary) {
  background: #fff; border: 1.5px solid var(--line);
  color: var(--ink-soft); padding: .7rem 1.5rem; font: inherit; font-weight: 600;
  border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s;
}
.actions button:not(.primary):hover { border-color: #cfdaff; color: var(--brand); }

.error {
  margin-top: 16px; padding: 12px 16px; border-radius: 12px;
  background: #fff1f2; color: #b42318;
  border: 1.5px solid #fecaca;
  font-size: 14px;
}

/* ---------- editor (writing suite) ---------- */
.ed-layout {
  display: flex; gap: 0; flex: 1;
  width: min(1380px, 100vw); margin: 0 auto;
  padding: 0 0 40px;
}
.ed-sidebar {
  flex: 0 0 216px;
  border-right: 1.5px solid var(--line);
  padding: 22px 14px;
  background: #fff;
  min-height: calc(100vh - 62px);
}
.ed-sidebar .back { margin-bottom: 18px; display: block; }
#ed-nav { display: flex; flex-direction: column; gap: 4px; }
#ed-nav button {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; border-radius: 9px;
  padding: 10px 12px; font: inherit; font-size: 14px;
  color: var(--ink-soft); cursor: pointer; text-align: left; width: 100%;
  transition: background .12s, color .12s;
}
#ed-nav button:hover { background: var(--bg); color: var(--ink); }
#ed-nav button.on { background: var(--brand-light); color: var(--brand); font-weight: 600; }
#ed-nav .nav-icon { font-size: 17px; display: inline-flex; }
.ed-main { flex: 1; min-width: 0; padding: 24px 26px; }
.ed-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ed-title-row > span { font-size: 26px; display: inline-flex; }
.ed-title-row h1 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.ed-title-row p { margin: 1px 0 0; color: var(--ink-soft); font-size: 13.5px; }

@media (max-width: 820px) {
  .ed-layout { flex-direction: column; }
  .ed-sidebar { min-height: 0; border-right: none; border-bottom: 1.5px solid var(--line); flex: none; padding: 12px 14px; }
  #ed-nav { flex-direction: row; overflow-x: auto; }
  #ed-nav button { white-space: nowrap; }
}

/* stats output (word counter) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.stat-card { background: var(--bg); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.stat-card b { display: block; font-family: var(--font-display); font-size: 19px; letter-spacing: -.3px; }
.stat-card span { color: var(--muted); font-size: 12px; }
.kw-title { font: 600 12.5px var(--font-body); color: var(--muted); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .6px; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.kw-chip { background: var(--brand-light); color: var(--brand); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; }
.kw-chip small { opacity: .75; }

.ed-controls {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
}
.ed-controls:empty { display: none; }
.ed-controls select {
  padding: 7px 10px; font: inherit; font-size: 13.5px;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); outline: none;
}
.ed-grid.single { grid-template-columns: 1fr; }

/* citation generator form */
.cit-form { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cit-form label { font-size: 12.5px; font-weight: 600; display: flex; flex-direction: column; gap: 4px; color: var(--ink-soft); }
.cit-form input {
  padding: 8px 10px; font: inherit; font-weight: 400;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); outline: none;
}
.cit-form input:focus { border-color: var(--brand); background: #fff; }
.cit-label { font: 600 12px var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 14px 0 6px; }
.cit-label:first-child { margin-top: 0; }
.cit-entry {
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 8px; padding: 12px 14px;
  padding-left: 40px; text-indent: -26px; /* hanging indent, as in real reference lists */
}

/* grammar checker correction cards */
.gc-list { display: flex; flex-direction: column; gap: 10px; }
.gc-card {
  background: var(--bg); border: 1.5px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: 8px; padding: 10px 12px;
}
.gc-card.gc-spelling { border-left-color: #d97706; }
.gc-card.gc-punctuation { border-left-color: #2563eb; }
.gc-card.gc-style { border-left-color: #16a34a; }
.gc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.gc-accept { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.gc-accept input { accent-color: var(--brand); }
.gc-change { font-size: 14px; }
.gc-change s { color: var(--muted); }
.gc-arrow { color: var(--muted); padding: 0 4px; }
.gc-why { color: var(--muted); font-size: 12.5px; margin-top: 4px; display: flex; align-items: center; gap: 7px; }
.gc-tag {
  text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 6px;
}
.ed-len { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.ed-len input[type=range] { width: 160px; accent-color: var(--brand); }
.ed-len output { color: var(--muted); font-weight: 400; min-width: 36px; }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button {
  background: #fff; color: var(--ink-soft); border: none;
  padding: 7px 16px; font: inherit; font-size: 13.5px; cursor: pointer;
}
.seg button + button { border-left: 1.5px solid var(--line); }
.seg button.on { background: var(--brand); color: #fff; }

.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .ed-grid { grid-template-columns: 1fr; } }
.ed-pane {
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius); display: flex; flex-direction: column;
  min-height: 420px; overflow: hidden;
}
.ed-pane-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
  font-weight: 600; font-size: 13.5px;
}
.ed-actions { display: flex; gap: 8px; }
.ed-actions button {
  background: var(--bg); border: 1.5px solid var(--line); color: var(--ink-soft);
  font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 7px; cursor: pointer;
}
.ed-actions button:hover:not(:disabled) { border-color: #cfdaff; color: var(--brand); }
.ed-actions button:disabled { opacity: .45; cursor: not-allowed; }
#ed-input {
  flex: 1; resize: none; border: none; outline: none;
  background: transparent; color: var(--ink);
  font: 15px/1.65 Georgia, "Times New Roman", serif;
  padding: 16px 18px;
}
.ed-output {
  flex: 1; padding: 16px 18px; overflow-y: auto;
  font: 15px/1.65 Georgia, "Times New Roman", serif;
  white-space: pre-wrap;
}
.ed-placeholder { color: var(--muted); font-style: italic; }
.ed-output ul { margin: 0; padding-left: 22px; }
.ed-output li { margin-bottom: 8px; }
.ed-foot { padding: 7px 14px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12.5px; }
.actions .note { color: var(--muted); font-size: 13px; }

/* ---------- PDF maker studio ---------- */
/* the studio accents with the site's coral, not the blue used elsewhere */
#view-pdfmaker, .pm-pop, .pm-modal-bg, .pm-menu { --brand: #ff5453; --brand-dark: #e03130; --brand-light: #fff0ef; }
#view-pdfmaker { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #eef0f5; }
#view-pdfmaker.hidden { display: none; }
/* branded top bar — the site's violet, Canva-style */
.pm-topbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #2d0e3d;
  padding: 8px 14px; min-height: 54px;
}
.pm-logo {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  color: #fff; letter-spacing: -.01em; padding: 0 4px; flex: none;
}
.pm-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: none; border-radius: 9px;
  background: transparent; color: rgba(255, 255, 255, .82); font-size: 19px; cursor: pointer;
  transition: background .12s, color .12s;
}
.pm-iconbtn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.pm-iconbtn[hidden] { display: none; }
.pm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 9px; background: transparent;
  color: rgba(255, 255, 255, .82); font: 600 13px var(--font-body);
  padding: 9px 12px; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.pm-chip:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.pm-chip i { font-size: 16px; }
.pm-topbar button.primary { padding: 9px 20px; font-size: 13.5px; background: #ff5453; }
.pm-topbar button.primary:hover:not(:disabled) { background: #e03130; }
/* File menu drops from the top bar */
.pm-filewrap { position: relative; display: inline-flex; }
.pm-chip .ph-caret-down { font-size: 13px; margin-left: -2px; }
.pm-filemenu { min-width: 210px; }
.pm-filemenu button i { font-size: 18px; color: var(--ink-soft); }
.pm-name {
  font: 600 14.5px var(--font-body);
  border: 1.5px solid transparent; border-radius: 9px;
  background: transparent; color: #fff;
  padding: 7px 10px; width: 240px; outline: none;
}
.pm-name::placeholder { color: rgba(255, 255, 255, .5); }
.pm-name:hover { background: rgba(255, 255, 255, .1); }
.pm-name:focus { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); }
.pm-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .2); margin: 0 6px; flex: none; }
.pm-spacer { flex: 1; }

/* ---------- studio workspace: slides on the left · floating insert bar · canvas ----------
   The insert bar floats in the gap between the top bar and the slide; the
   contextual toolbar floats on the selection (see .pm-props). */
.pm-layout { display: flex; flex: 1; min-height: 0; }
.pm-main { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* slide thumbnails */
.pm-pages {
  flex: 0 0 160px; overflow-y: auto; padding: 16px 14px;
  background: #fff; border-right: 1px solid var(--line); scrollbar-width: thin;
}
#pm-pages-list { display: flex; flex-direction: column; gap: 14px; }
.pm-page-thumb { width: 100%; cursor: pointer; text-align: center; }
.pm-page-thumb.dragging { opacity: .4; }
.pm-thumb-box {
  width: 100%; background: #fff; border-radius: 4px; box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(13, 18, 34, .12), 0 1px 3px rgba(13, 18, 34, .08);
  transition: box-shadow .12s;
}
.pm-page-thumb:hover .pm-thumb-box { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, #fff), 0 2px 8px rgba(13, 18, 34, .1); }
.pm-page-thumb.on .pm-thumb-box { box-shadow: 0 0 0 2px var(--brand), 0 2px 8px rgba(13, 18, 34, .12); }
.pm-page-thumb span { font: 600 11px var(--font-body); color: var(--muted); display: inline-block; margin-top: 4px; }
.pm-page-thumb.on span { color: var(--brand); }

/* floating insert bar — centred between the top bar and the slide; it never scrolls */
.pm-insert {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%); z-index: 31;
  display: flex; align-items: center; gap: 2px; padding: 6px 8px;
  max-width: calc(100% - 24px); white-space: nowrap;
  background: #fff; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(8, 13, 26, .14), 0 0 0 1px rgba(8, 13, 26, .06);
}
.pm-insert > button, .pm-iwrap > button {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
  border: none; border-radius: 6px; background: transparent; cursor: pointer;
  color: var(--ink-soft); font: 600 12.5px var(--font-body);
  transition: background .12s, color .12s;
}
.pm-insert button i { font-size: 19px; line-height: 1; }
.pm-insert > button:hover, .pm-iwrap > button:hover { background: #f2f3f6; color: var(--ink); }
.pm-insert > button.on, .pm-iwrap > button.on { background: var(--brand-light); color: var(--brand-dark); }
.pm-iwrap { position: relative; display: inline-flex; }

/* zoom pill, bottom-right of the canvas */
.pm-zoomer {
  position: absolute; right: 16px; bottom: 16px; z-index: 31;
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: #fff; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(8, 13, 26, .14), 0 0 0 1px rgba(8, 13, 26, .06);
}
.pm-zoomer button {
  display: grid; place-items: center; width: 28px; height: 28px;
  border: none; border-radius: 6px; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.pm-zoomer button i { font-size: 14px; }
.pm-zoomer button:hover { background: #f2f3f6; color: var(--ink); }
.pm-zoomer select {
  appearance: none; -webkit-appearance: none;
  width: 74px; height: 28px; padding: 0 20px 0 8px; border: none; outline: none; cursor: pointer;
  font: 700 12px var(--font-body); color: var(--ink);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a4265' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center / 11px;
}
.pm-zoomer select:hover { background-color: #f2f3f6; border-radius: 6px; }
.pm-info { font-size: 19px; color: var(--muted); padding: 0 6px; cursor: help; }
.pm-page.pm-drawing { cursor: crosshair; }
.pm-page.pm-drawing .pm-el { pointer-events: none; }

.pm-canvas-area {
  position: relative;   /* the floating toolbar is positioned inside it */
  flex: 1; overflow: auto; padding: 140px 36px 48px;   /* room for the insert bar + a toolbar above the slide */
  background: #eef0f5;
  background-image: radial-gradient(rgba(13, 18, 34, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  display: grid; place-items: start center;
}
.pm-page { position: relative; background: #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(8, 13, 26, .1), 0 12px 32px rgba(8, 13, 26, .12); flex: none; }
.pm-el { position: absolute; box-sizing: border-box; cursor: move; user-select: none; }
.pm-page:not(.pm-drawing) .pm-el:hover { outline: 1.5px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 0; }
/* PowerPoint lets text spill past its box: overflow stays visible */
.pm-text { overflow: visible; white-space: pre-wrap; word-break: break-word; }
.pm-text.pm-editing {
  overflow: visible; cursor: text; user-select: text;
  outline: 1.5px dashed var(--brand); background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.pm-selbox {
  position: absolute; pointer-events: none;
  border: 1.5px solid var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.pm-handle {
  position: absolute; width: 11px; height: 11px;
  background: #fff; border: 1.5px solid var(--brand); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(8, 13, 26, .3);
  pointer-events: auto;
}
.pm-handle:hover { background: var(--brand); }
.pm-h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.pm-h-n  { left: calc(50% - 6px); top: -6px; cursor: ns-resize; }
.pm-h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.pm-h-e  { right: -6px; top: calc(50% - 6px); cursor: ew-resize; }
.pm-h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.pm-h-s  { left: calc(50% - 6px); bottom: -6px; cursor: ns-resize; }
.pm-h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.pm-h-w  { left: -6px; top: calc(50% - 6px); cursor: ew-resize; }

/* contextual toolbar — floats just above the selection (or above the slide
   when nothing is selected), centred on it; pmPlaceProps() sets left/top.
   Controls are "ghost" buttons (no chrome until hovered); only editable
   fields — font, size — carry a border. */
.pm-props {
  position: absolute; left: 0; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; row-gap: 4px;
  width: max-content; max-width: calc(100% - 16px); padding: 6px 8px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(8, 13, 26, .14), 0 0 0 1px rgba(8, 13, 26, .06);
  font-size: 13px; white-space: nowrap;
}
.pm-props:empty { display: none; }
.pm-props > * { flex: none; }
.pm-group { display: inline-flex; align-items: center; gap: 2px; }
.pm-vsep { width: 1px; height: 24px; background: var(--line); margin: 0 6px; }

/* ghost button */
.pm-tb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; min-width: 32px; padding: 0 7px;
  border: none; border-radius: 6px; background: transparent;
  color: var(--ink-soft); font: 600 12.5px var(--font-body); cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.pm-tb i { font-size: 19px; line-height: 1; }
.pm-tb span { padding-right: 2px; }
.pm-tb:hover:not(:disabled) { background: #f2f3f6; color: var(--ink); }
.pm-tb.on { background: #e3e6ed; color: var(--ink); }
.pm-tb:disabled { opacity: .35; cursor: not-allowed; }
.pm-tb.danger:hover:not(:disabled) { background: #fdecec; color: #b42318; }

/* bordered field: font picker, size stepper */
.pm-field {
  display: inline-flex; align-items: center; height: 32px;
  border: 1px solid #d5d9e3; border-radius: 6px; background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.pm-field:hover { border-color: #aeb5c6; }
.pm-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); }
.pm-props select {
  appearance: none; -webkit-appearance: none;
  height: 30px; padding: 0 26px 0 10px; max-width: 190px;
  border: none; outline: none; cursor: pointer;
  font: 600 12.5px var(--font-body); color: var(--ink);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a4265' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
}
.pm-props select option { font-family: var(--font-body); }
.pm-props .pm-fontsel { width: 146px; }
.pm-stepper button {
  display: grid; place-items: center; width: 28px; height: 30px;
  border: none; border-radius: 5px; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.pm-stepper button i { font-size: 13px; }
.pm-stepper button:hover { background: #f2f3f6; color: var(--ink); }
.pm-stepper input {
  width: 36px; height: 30px; border: none; background: transparent; outline: none;
  text-align: center; font: 600 12.5px var(--font-body); color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.pm-props input[type=number]::-webkit-inner-spin-button,
.pm-props input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* checkbox-style toggles (shadow, dashed, legend…) */
.pm-toggle {
  display: inline-flex; align-items: center; gap: 7px; position: relative;
  height: 32px; padding: 0 9px 0 8px; border-radius: 6px;
  font: 600 12.5px var(--font-body); color: var(--ink-soft); cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.pm-toggle input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.pm-toggle::before {
  content: ""; width: 15px; height: 15px; box-sizing: border-box; flex: none;
  border: 1.5px solid #b9bfcd; border-radius: 4px; background: #fff;
  transition: background .12s, border-color .12s;
}
.pm-toggle:hover { background: #f2f3f6; color: var(--ink); }
.pm-toggle:has(input:checked) { color: var(--ink); }
.pm-toggle:has(input:checked)::before {
  border-color: var(--brand);
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") no-repeat center / 10px;
}
.pm-toggle i { font-size: 18px; line-height: 1; }

/* sliders (opacity, corner radius) */
.pm-slider { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 6px; color: var(--ink-soft); }
.pm-slider i { font-size: 18px; line-height: 1; }
.pm-slider input[type=range] { width: 88px; margin: 0; padding: 0; accent-color: var(--brand); cursor: pointer; }
.pm-slider output { font: 600 12px var(--font-body); color: var(--ink-soft); min-width: 30px; text-align: right; }

/* colour chips. Text colour is the "A with a colour bar" convention; fills are
   a solid dot; borders a ring. A red slash means none. The native input and
   the "none" checkbox stay in the DOM (invisible) so handlers keep working. */
.pm-swatchwrap { position: relative; display: inline-flex; }
.pm-props input.pm-native-color, .pm-insert input.pm-native-color {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; border: none; padding: 0; margin: 0;
}
.pm-swatch {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 6px; background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background .12s, color .12s;
}
.pm-swatch:hover { background: #f2f3f6; color: var(--ink); }
.pm-swatch i { font-size: 18px; line-height: 1; }
.pm-swbar { width: 18px; height: 4px; border-radius: 2px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(13, 18, 34, .12); }
.pm-swdot {
  width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(13, 18, 34, .16);
}
.pm-swring { background: #fff; border: 5px solid var(--sw); box-shadow: 0 0 0 1px rgba(13, 18, 34, .12), inset 0 0 0 1px rgba(13, 18, 34, .1); }
.pm-swatch.is-none .pm-swdot, .pm-swatch.is-none .pm-swbar {
  border: none;
  background: #fff linear-gradient(135deg, transparent 43%, #e03130 43%, #e03130 57%, transparent 57%);
  box-shadow: inset 0 0 0 1px rgba(13, 18, 34, .16);
}
/* gradient controls dim until the gradient is switched on */
.pm-grad { display: inline-flex; align-items: center; gap: 2px; }
.pm-grad.is-off > :not(.pm-toggle) { opacity: .4; }
.pm-grad.is-off > :not(.pm-toggle):hover { opacity: 1; }
/* chart colour-scheme chooser: a strip of swatches on the button, one per row in its popover */
.pm-dots { display: inline-flex; gap: 3px; }
.pm-dots i { width: 8px; height: 16px; border-radius: 2px; display: block; }
.pm-caret { font-size: 13px !important; margin-left: 2px; }
.pm-pop-pal { display: flex; flex-direction: column; gap: 2px; padding: 8px; min-width: 176px; }
.pm-palrow {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px;
  border: none; border-radius: 8px; background: transparent; cursor: pointer;
  font: 600 12.5px var(--font-body); color: var(--ink-soft); text-align: left;
}
.pm-palrow:hover { background: #f2f3f6; color: var(--ink); }
.pm-palrow.on { background: var(--brand-light); color: var(--brand-dark); }

/* inline hint (hidden when there isn't room) */
.pm-phint { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font: 600 12px var(--font-body); color: var(--muted); }
.pm-phint i { font-size: 16px; }
@media (max-width: 1180px) { .pm-phint:not(.pm-phint-left) { display: none; } }

/* legacy bits still used by the position popover and chart-data modal */
.pm-prop { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-prop > label {
  display: block; font-weight: 700; font-size: 9.5px; margin: 0;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap;
}
.pm-modal input[type=checkbox] { accent-color: var(--brand); }
.pm-btnrow { display: flex; gap: 2px; margin: 0; flex-wrap: nowrap; align-self: center; background: #f1f3f9; border-radius: 9px; padding: 2px; }
.pm-btnrow button {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: none; color: var(--ink-soft);
  font: 600 12px var(--font-body); padding: 6px 9px; border-radius: 7px; cursor: pointer;
  transition: background .12s, color .12s; white-space: nowrap;
}
.pm-btnrow button i { font-size: 15px; line-height: 1; }
.pm-btnrow button:hover:not(:disabled) { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(8, 13, 26, .1); }
.pm-btnrow button:disabled { opacity: .35; cursor: not-allowed; }
.pm-btnrow button.on { background: var(--brand); color: #fff; }
.pm-btnrow button.danger:hover { background: #fdecec; color: #b42318; }
.pm-hint { color: var(--muted); font-size: 12.5px; }

/* popovers: colour palette, exact position */
.pm-pop {
  position: fixed; z-index: 200;
  background: #fff; border-radius: 14px;
  box-shadow: 0 16px 44px rgba(8, 13, 26, .22), 0 0 0 1px rgba(8, 13, 26, .06);
  padding: 12px;
}
.pm-pop-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pm-pop-grid button {
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1.5px solid rgba(13, 18, 34, .14); border-radius: 8px;
  background: var(--sw);
  transition: transform .1s;
}
.pm-pop-grid button:hover { transform: scale(1.14); }
.pm-pop-grid button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand); }
.pm-pop-grid button.pm-none { background: #fff; color: #b42318; display: grid; place-items: center; }
.pm-pop-grid button.pm-none i { font-size: 16px; line-height: 1; }
.pm-pop-custom {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 10px; padding: 8px;
  border: none; border-radius: 9px; background: #f1f3f9;
  font: 600 12px var(--font-body); color: var(--ink-soft); cursor: pointer;
}
.pm-pop-custom:hover { background: #e7eaf3; color: var(--ink); }
.pm-pop-opa { width: 208px; }
.pm-pop-opa label {
  display: flex; justify-content: space-between; margin-bottom: 8px;
  font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.pm-pop-opa output { color: var(--ink-soft); }
.pm-pop-opa input[type=range] { width: 100%; margin: 0; accent-color: var(--brand); cursor: pointer; }
.pm-pop-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.pm-pop-grid2 .pm-prop { display: flex; flex-direction: column; gap: 3px; }
.pm-pop-grid2 label {
  font: 700 9.5px var(--font-body); text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.pm-pop-grid2 input[type=number] {
  width: 76px; padding: 6px 8px; text-align: center;
  font: inherit; font-size: 12.5px;
  border: 1.5px solid transparent; border-radius: 8px;
  background: #f1f3f9; color: var(--ink); outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
.pm-pop-grid2 input[type=number]::-webkit-inner-spin-button,
.pm-pop-grid2 input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pm-pop-grid2 input:focus { border-color: var(--brand); background: #fff; }

/* open-mode chooser (Edit text / Annotate) */
.pm-openmode { display: flex; flex-direction: column; gap: 10px; }
.pm-openmode button {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  background: #f7f8fb; border: 1.5px solid transparent; border-radius: 14px;
  padding: 13px 15px; cursor: pointer; font: inherit; color: var(--ink);
  transition: border-color .12s, background .12s;
}
.pm-openmode button:hover { border-color: var(--brand); background: #fff; }
.pm-om-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: color-mix(in srgb, var(--brand) 10%, #fff); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.pm-om-copy { display: flex; flex-direction: column; gap: 2px; }
.pm-om-copy b { font-size: 14px; }
.pm-om-copy small { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }

/* insert menus (drop below their button in the insert bar) */
.pm-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 12px 34px rgba(8, 13, 26, .16);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px;
}
.pm-menu button {
  width: 66px; padding: 9px 4px; text-align: center;
  border: none; border-radius: 9px; background: transparent; cursor: pointer;
  color: var(--ink-soft); font: 600 11px var(--font-body);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.pm-menu button:hover { background: #f1f3f9; color: var(--ink); }
.pm-menu button i { font-size: 22px; line-height: 1; }
.pm-menu svg { display: block; }
.pm-menu-chart { grid-template-columns: repeat(4, 1fr); }
.pm-menu-chart button { width: 72px; }
/* text presets: a list that previews each style */
.pm-menu-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; min-width: 236px; }
.pm-menu-list button { width: 100%; flex-direction: row; justify-content: flex-start; text-align: left; padding: 9px 12px; color: var(--ink); }
.pm-menu-list .pm-t-h { font: 800 21px var(--font-body); letter-spacing: -.01em; }
.pm-menu-list .pm-t-s { font: 700 15.5px var(--font-body); }
.pm-menu-list .pm-t-b { font: 500 12.5px var(--font-body); }
/* highlight colours */
.pm-menu-colors { display: flex; gap: 6px; padding: 10px; }
.pm-menu-colors button {
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(13, 18, 34, .14);
  transition: transform .1s;
}
.pm-menu-colors button:hover { background: var(--sw); transform: scale(1.12); }

/* smart guides + marquee */
.pm-guide-v, .pm-guide-h { position: absolute; background: #f43f5e; z-index: 40; pointer-events: none; }
.pm-guide-v { width: 1px; top: 0; bottom: 0; }
.pm-guide-h { height: 1px; left: 0; right: 0; }
.pm-marquee {
  position: absolute; border: 1.5px dashed var(--brand);
  background: rgba(0, 75, 254, .08); z-index: 45; pointer-events: none;
}

/* modal (chart data editor, templates) */
.pm-modal-bg {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 13, 26, .45); backdrop-filter: blur(3px);
  display: grid; place-items: center;
}
.pm-modal {
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-deep);
  padding: 18px 20px; max-width: min(860px, 92vw); max-height: 86vh; overflow: auto;
}
.pm-modal h3 { margin: 0 0 12px; font-size: 16px; letter-spacing: -.01em; }
/* section headings inside modals (Layouts: complete documents / single pages) */
.pm-props-title {
  margin: 0 0 10px; font: 700 10.5px var(--font-body);
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.pm-dtable { border-collapse: collapse; }
.pm-dtable td, .pm-dtable th { padding: 3px; }
.pm-dtable input {
  width: 84px; padding: 6px 8px; font: inherit; font-size: 13px;
  border: 1.5px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--ink); outline: none;
}
.pm-dtable input.pm-dname { width: 110px; font-weight: 600; }
.pm-modal .pm-btnrow { margin-top: 12px; }
.pm-modal .primary {
  background: var(--brand); color: #fff; border: none;
  padding: 8px 18px; border-radius: 8px; font: inherit; cursor: pointer;
}
.pm-modal .primary:hover { background: var(--brand-dark); }
.pm-tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pm-tpl {
  cursor: pointer; border: 2px solid var(--line); border-radius: 10px;
  overflow: hidden; background: #fff; position: relative;
  transition: border-color .15s, transform .15s;
}
.pm-tpl:hover { border-color: var(--brand); transform: translateY(-2px); }
.pm-tpl-preview { position: relative; overflow: hidden; pointer-events: none; }
.pm-tpl-name {
  font-size: 12px; font-weight: 600; text-align: center;
  padding: 6px; background: var(--bg); color: var(--ink-soft);
  border-top: 1px solid var(--line-soft);
}

/* ---------- presentation mode ---------- */
.pm-present { position: fixed; inset: 0; z-index: 300; background: #000; display: grid; place-items: center; }
.pm-present:not(.pm-present-active) { cursor: none; }
.pm-present-page { position: relative; overflow: hidden; background: #fff; opacity: 0; transition: opacity .25s ease; }
.pm-present-page.on { opacity: 1; }
.pm-present-bar {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; gap: 8px; align-items: center;
  opacity: 0; transition: opacity .25s;
  background: rgba(8, 13, 26, .85);
  border-radius: 999px; padding: 8px 14px;
}
.pm-present-active .pm-present-bar { opacity: 1; }
.pm-present-bar button {
  background: none; border: none; color: #e2e8f0;
  font: 600 16px var(--font-body); cursor: pointer;
  padding: 2px 8px; border-radius: 6px;
}
.pm-present-bar button:hover { background: rgba(255, 255, 255, .15); }
.pm-present-count { color: #94a3b8; font: 12.5px var(--font-body); padding: 0 4px; }

/* ---------- working / done ---------- */
.working { text-align: center; padding: 70px 0; }
.spinner {
  width: 46px; height: 46px; margin: 0 auto 18px;
  border: 4px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.done { text-align: center; padding: 56px 0; }
.done-icon { font-size: 46px; color: var(--ok); }
.done h2 { margin: 10px 0 4px; font-weight: 800; letter-spacing: -.01em; }
.done p { color: var(--ink-soft); margin: 0 0 22px; }
.done .actions { justify-content: center; }

/* ---------- studio on small screens ----------
   Desktop is: floating insert pill over the canvas, 160px thumbnail rail on the
   left. On a phone that overflowed the viewport by ~550px, so: stack the
   layout, drop the rail to a filmstrip under the canvas, and let the toolbars
   scroll sideways instead of pushing the document off screen. */
@media (max-width: 820px) {
  .pm-topbar { padding: 6px 10px; min-height: 48px; gap: 2px; flex-wrap: nowrap; overflow-x: auto; }
  .pm-topbar::-webkit-scrollbar { display: none; }
  .pm-logo { font-size: 1.1rem; }
  .pm-name { display: none; }            /* rename from the File menu instead */
  .pm-topbar .pm-sep { display: none; }
  .pm-topbar button.primary { padding: 8px 14px; font-size: 12.5px; }
  .pm-chip { padding: 8px 9px; font-size: 12px; }

  /* the insert bar stops floating and becomes a scrollable strip, so it never
     covers the (already small) canvas */
  .pm-insert {
    position: static; transform: none; max-width: none;
    border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--line);
    padding: 5px 8px; gap: 1px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .pm-insert::-webkit-scrollbar { display: none; }
  .pm-insert > button, .pm-iwrap > button { flex: none; }

  .pm-props { padding: 6px 10px; min-height: 50px; gap: 9px; }

  .pm-layout { flex-direction: column; }
  .pm-main { order: 1; }
  .pm-canvas-area { padding: 14px 10px; }
  .pm-pages {
    order: 2; flex: 0 0 auto;
    overflow-x: auto; overflow-y: hidden;
    padding: 8px 10px;
    border-right: none; border-top: 1px solid var(--line);
  }
  #pm-pages-list { flex-direction: row; gap: 10px; }
  .pm-page-thumb { flex: 0 0 58px; width: 58px; margin-bottom: 0; }

  /* popovers must never hang off the edge of a phone screen */
  .pm-pop { max-width: calc(100vw - 16px); }
  .pm-pop-pos .pm-pop-grid2 { grid-template-columns: 1fr 1fr; }
  .pm-menu { max-width: calc(100vw - 24px); }
}

/* ---------- mobile navigation ----------
   Below 880px the desktop mega-menus are hidden, which previously left phones
   with no way to reach any category — bad for users and, since Google indexes
   mobile-first, bad for internal linking too. */
.nav-burger {
  display: none;
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
  border: none; border-radius: 11px;
  background: #f1eef1; color: var(--ink);
  font-size: 21px; cursor: pointer;
}
.nav-burger:hover { background: #e7e2e6; }
.mobile-menu {
  display: none;
  position: fixed; inset: 76px 0 0; z-index: 39;
  background: var(--bg);
  overflow-y: auto;
  padding: 1rem 1.1rem 3rem;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: block; }
body.menu-open { overflow: hidden; }
.mm-group { border-bottom: 1px solid var(--line); padding: .5rem 0 .9rem; }
.mm-group:last-child { border-bottom: none; }
.mm-head {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); padding: .55rem 0;
}
.mm-head .nav-icon { font-size: 1.25rem; color: var(--nav-hover, #ff5453); }
.mm-links { display: flex; flex-direction: column; }
.mm-links a {
  padding: .62rem .2rem .62rem 2.15rem;      /* aligned under the group label */
  font-size: .95rem; color: var(--ink-soft);
}
.mm-links a:active { color: var(--nav-hover, #ff5453); }
.mm-all { font-weight: 700; color: var(--nav-hover, #ff5453) !important; }

@media (max-width: 879px) {
  .nav-burger { display: inline-flex; }
  /* the auth buttons crowd the bar on a small phone — the menu carries them */
  .nav-right #nav-login { display: none; }
}
@media (min-width: 880px) {
  .mobile-menu, .mobile-menu.open { display: none; }
}

/* ---------- touch ergonomics ----------
   Footer and language links sat under ~24px tall, well below the ~44px touch
   target guidance (and something Lighthouse flags). Only loosened on small
   screens so the desktop footer keeps its tighter rhythm. */
@media (max-width: 879px) {
  .footer-col a { padding: .45rem 0; margin-bottom: .15rem; }
  .footer-cols { gap: 1.6rem 2.2rem; }
  .lang-switch { flex-wrap: wrap; gap: .45rem; }
  .lang-switch a { padding: .4rem .75rem; }
  .breadcrumb { gap: .4rem; row-gap: .25rem; }
  .breadcrumb a { padding: .2rem 0; }
  .back { padding: .5rem 0; }
  /* the hero search is the primary action on a phone — make it comfortable */
  .hero-search input { padding: .95rem 1.1rem .95rem 2.9rem; font-size: 1rem; }
}