* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1c1c1e;
  background: #f2f2f4;
}

.hidden { display: none !important; }

/* ---------- Top bar (fixed to the viewport, toolbar centred) ---------- */
:root { --topbar-h: 58px; }
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  min-height: var(--topbar-h);
  padding: 9px 16px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e3;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
#topbar h1 {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  margin: 0;
  font-weight: 650;
  white-space: nowrap;
  color: #1b6fb0;
}
#topbar h1 a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
#topbar h1 a:hover { text-decoration: underline; }

#toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  /* centre the tool tabs in the space BETWEEN the absolute-positioned title
     (left) and zoom/Save controls (right) so the last tab (Undo) never
     collides with the zoom buttons */
  justify-content: center;
  padding-left: 116px;
  padding-right: 276px;
}

/* ===== Tool tabs — the Sejda-style toolbar ===== */
.tooltabs {
  --tt-blue: #1e8fd5;
  --tt-blue-hover: #eef7fd;
  --tt-blue-active: #d3ebfb;
  --tt-border: #cfe6f6;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--tt-border);
  border-radius: 8px;
  background: #fff;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.tooltabs::-webkit-scrollbar { height: 5px; }
.tooltabs::-webkit-scrollbar-thumb { background: #d7d7dc; border-radius: 3px; }

.tt-group { display: flex; align-items: stretch; }

.tt-btn,
.tt-caret {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: var(--tt-blue);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.tt-caret { padding: 9px 6px; }
.tt-btn svg { width: 16px; height: 16px; display: block; flex: none; }
.tt-btn svg.cv { width: 13px; height: 13px; margin-left: 1px; opacity: 0.85; }
.tt-caret svg { width: 13px; height: 13px; display: block; }

.tt-btn:hover:not(:disabled),
.tt-caret:hover:not(:disabled) { background: var(--tt-blue-hover); }

/* active tool (like the highlighted "Images" in the reference) */
.tt-group.active .tt-btn,
.tt-group.active .tt-caret,
.tt-btn.menu-open { background: var(--tt-blue-active); }

.tt-btn:disabled,
.tt-caret:disabled { color: #b7d7ec; cursor: default; }

.tt-div {
  width: 1px;
  align-self: stretch;
  margin: 6px 0;
  background: var(--tt-border);
  flex: none;
}

/* dropdown menus */
.tt-menu {
  position: absolute;
  z-index: 60;
  min-width: 168px;
  padding: 5px;
  background: #fff;
  border: 1px solid #d9d9de;
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
}
.tt-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #22262b;
  font-size: 13px;
  cursor: pointer;
}
.tt-menu button:hover { background: #eef7fd; color: #1e8fd5; }

/* right side: zoom + save - pinned to the bar's right edge so the tool tabs
   stay visually centred */
.docbar {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}
.zoom { display: flex; border: 1px solid #d0d0d3; border-radius: 6px; overflow: hidden; }
.zoom button {
  border: 0;
  background: #fff;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  border-right: 1px solid #d0d0d3;
}
.zoom button:last-child { border-right: 0; }
.zoom button.active { background: #0a84ff; color: #fff; }

/* transient toast for not-yet-wired tools */
#toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: #22262b;
  color: #fff;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 120;
  pointer-events: none;
}

button {
  font: inherit;
}
#saveBtn, #pickBtn {
  background: #0a84ff;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#saveBtn:hover, #pickBtn:hover { background: #0070e0; }

/* ---------- Main / upload ---------- */
/* top padding clears the fixed #topbar */
#main { padding: calc(var(--topbar-h) + 20px) 24px 24px; }

/* Upload screen: the editor topbar/toolbar is swapped for the marketing nav. */
body.pre-upload #topbar { display: none; }
/* home screen: the side gutter lives on .eu-wrap, so drop #main's own inset
   (the editor view keeps #main's 24px padding untouched) */
body.pre-upload #main { padding: calc(64px + 26px) 0 0; }

/* ---------- Marketing site header (upload screen only) ---------- */
#siteNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 56;
  background: #fff;
  border-bottom: 1px solid #eef0f3;
  box-shadow: 0 1px 6px rgba(16, 27, 46, 0.04);
}
body:not(.pre-upload) #siteNav { display: none; }
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 64px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #2b44ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-logo svg { width: 19px; height: 19px; display: block; }
.nav-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #0e1b2e;
}
.nav-links {
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
}
.nav-links a:hover { color: #0e1b2e; }
.nav-links a.active { color: #2b44ff; }
.nav-cta {
  padding: 10px 22px;
  border-radius: 9px;
  background: #2b44ff;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover { background: #1e34e0; }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; gap: 12px; }
}

#uploadView {
  display: flex;
  justify-content: center;
  padding: 34px 0 44px; /* side gutter lives on .eu-wrap now; footer closes the page */
}
.eu-wrap {
  position: relative;
  width: 100%;
  max-width: 1240px; /* was 860 - use more of large desktop widths */
  padding: 0 44px;   /* comfortable side gutter so content never hits the edge */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eu-title {
  margin: 0;
  text-align: center;
  font-size: 60px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #0e1b2e;
}
.eu-tagline {
  margin: 12px 0 0;
  text-align: center;
  font-size: 18px;
  color: #5b6472;
}
/* responsive side gutter for the shared home-content wrapper */
@media (max-width: 1024px) { .eu-wrap { padding: 0 32px; } }
@media (max-width: 600px) { .eu-wrap { padding: 0 20px; } }

.eu-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin: 40px auto 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(16, 27, 46, 0.12);
  padding: 26px 26px 22px;
}

.drop {
  background: #fff;
  border: 2px dashed #cbd0d8;
  border-radius: 14px;
  padding: 46px 40px 40px;
  text-align: center;
}
.drop.dragover { border-color: #2b44ff; background: #f4f6ff; }

.eu-folder {
  width: 84px;
  height: 84px;
  margin: 6px auto 26px;
  border-radius: 16px;
  background: #f8e6c4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eu-folder svg { width: 46px; height: 46px; display: block; }

#pickBtn.eu-browse {
  min-width: 230px;
  padding: 16px 34px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 12px;
  background: #2b44ff;
}
#pickBtn.eu-browse:hover { background: #1e34e0; }

.eu-hint {
  margin: 20px 0 0;
  font-size: 15px;
  color: #3a4250;
}

.eu-legal {
  margin: 22px 0 0;
  text-align: center;
  font-size: 13px;
  color: #9aa1ac;
}
.eu-legal a {
  color: #4a5260;
  font-weight: 700;
  text-decoration: none;
}
.eu-legal a:hover { text-decoration: underline; }

#uploadMsg.small {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: #e0403a;
  min-height: 16px;
}

/* soft pastel wash behind the card, echoing the reference illustration */
.eu-decor {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  top: 210px;
  width: 115%;
  max-width: 1100px;
  height: 360px;
  border-radius: 90px;
  background:
    radial-gradient(closest-side at 18% 40%, rgba(255, 183, 178, 0.55), transparent 70%),
    radial-gradient(closest-side at 50% 65%, rgba(180, 210, 255, 0.5), transparent 70%),
    radial-gradient(closest-side at 82% 40%, rgba(190, 240, 220, 0.55), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}

/* ---------- Upload screen: three-feature row ---------- */
.eu-features {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 76px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.eu-feat {
  position: relative;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(16, 27, 46, 0.10);
  padding: 30px 30px 32px;
  text-align: left;
}
.eu-feat::after {          /* solid rounded bar peeking out below the card */
  content: "";
  position: absolute;
  z-index: -1;
  left: 6px;
  right: 6px;
  bottom: -12px;
  height: 44px;
  border-radius: 22px;
}
.eu-feat-icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.eu-feat-icon svg { width: 26px; height: 26px; display: block; }
.eu-feat h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: #0e1b2e;
}
.eu-feat p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #5b6472;
}

.eu-feat--a .eu-feat-icon { background: #dbeafe; color: #1d5db4; }
.eu-feat--a::after { background: #3b82f6; }
.eu-feat--b .eu-feat-icon { background: #d6f1e4; color: #0e7b5b; }
.eu-feat--b::after { background: #10b981; }
.eu-feat--c .eu-feat-icon { background: #e7e2fb; color: #5b3fc4; }
.eu-feat--c::after { background: #8b5cf6; }

@media (max-width: 880px) {
  .eu-features {
    grid-template-columns: 1fr;
    gap: 34px;
    max-width: 420px;
  }
}

/* ---------- Upload screen: "How to Edit a PDF Online" ---------- */
.eu-how {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1080px;
  margin: 84px auto 0;
  text-align: center;
}
.eu-how-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #0e1b2e;
}
.eu-how-sub {
  margin: 10px 0 0;
  font-size: 16px;
  color: #5b6472;
}
.eu-steps {
  margin-top: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}
.eu-step {
  flex: 1 1 0;
  max-width: 260px;
  text-align: center;
}
.eu-step-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(16, 27, 46, 0.08);
}
.eu-step-icon svg { width: 27px; height: 27px; display: block; }
.eu-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  margin-top: 14px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.eu-step h3 {
  margin: 14px 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #0e1b2e;
}
.eu-step p {
  margin: 0 auto;
  max-width: 210px;
  font-size: 14px;
  line-height: 1.7;
  color: #5b6472;
}
.eu-step-arrow {
  flex: 0 0 auto;
  margin-top: 20px;
  color: #c3cad6;
}
.eu-step-arrow svg { width: 22px; height: 22px; display: block; }

.eu-step--a .eu-step-icon { background: #dbeafe; color: #1d5db4; }
.eu-step--a .eu-step-num { background: #dbeafe; color: #1d5db4; }
.eu-step--b .eu-step-icon { background: #e7e2fb; color: #5b3fc4; }
.eu-step--b .eu-step-num { background: #e7e2fb; color: #5b3fc4; }
.eu-step--c .eu-step-icon { background: #d6f1e4; color: #0e7b5b; }
.eu-step--c .eu-step-num { background: #d6f1e4; color: #0e7b5b; }

@media (max-width: 880px) {
  .eu-steps {
    flex-direction: column;
    align-items: center;
    gap: 34px;
  }
  .eu-step { max-width: 320px; }
  .eu-step-arrow { display: none; }
}

/* ---------- Upload screen: "Why Use Sister PDF?" ---------- */
.eu-why {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1160px;
  margin: 84px auto 0;
  text-align: center;
}
.eu-why-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #0e1b2e;
}
.eu-why-sub {
  margin: 10px 0 0;
  font-size: 16px;
  color: #5b6472;
}
.eu-why-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 46px;
}
.eu-why-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}
.eu-why-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eu-why-ico svg { width: 20px; height: 20px; display: block; }
.eu-why-text h3 {
  margin: 2px 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #0e1b2e;
}
.eu-why-text p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: #5b6472;
}

.eu-why-ico--blue { background: #dbeafe; color: #1d5db4; }
.eu-why-ico--green { background: #d6f1e4; color: #0e7b5b; }
.eu-why-ico--purple { background: #e7e2fb; color: #5b3fc4; }

@media (max-width: 900px) {
  .eu-why-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 36px; }
}
@media (max-width: 560px) {
  .eu-why-grid { grid-template-columns: 1fr; gap: 26px; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* ---------- Upload screen: "Sister PDF Features" ---------- */
.pf-section {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 84px auto 0;
  text-align: center;
  scroll-margin-top: 84px; /* clear the fixed #siteNav on #features jumps */
}
.pf-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #0e1b2e;
}
.pf-sub {
  margin: 10px 0 0;
  font-size: 16px;
  color: #5b6472;
}
.pf-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
}
.pf-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #edf0f4;
  border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: 0 8px 22px rgba(16, 27, 46, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(16, 27, 46, 0.10);
}
.pf-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.pf-ico svg { width: 22px; height: 22px; display: block; }
.pf-card h3 {
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 700;
  color: #0e1b2e;
}
.pf-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #5b6472;
}
.pf-card--a .pf-ico { background: #dbeafe; color: #1d5db4; }
.pf-card--b .pf-ico { background: #d6f1e4; color: #0e7b5b; }
.pf-card--c .pf-ico { background: #e7e2fb; color: #5b3fc4; }

@media (prefers-reduced-motion: reduce) {
  .pf-card { transition: none; }
  .pf-card:hover { transform: none; }
}
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pf-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Upload screen: FAQ accordion ---------- */
.eu-faq {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 920px;
  margin: 88px auto 40px;
  text-align: center;
  scroll-margin-top: 84px; /* clear the fixed #siteNav when jumped to via #faq */
}
.eu-faq-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #0e1b2e;
}
.eu-faq-sub {
  margin: 10px 0 0;
  font-size: 16px;
  color: #5b6472;
}
.eu-faq-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.faq-item {
  background: #fff;
  border: 1px solid #edf0f4;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(16, 27, 46, 0.04);
}
.faq-q {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: 0;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 600;
  color: #0e1b2e;
}
.faq-trigger:hover { background: #f7f9fc; }
.faq-trigger:focus-visible {
  outline: 2px solid #2b44ff;
  outline-offset: -2px;
}
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #dbeafe;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: #1d5db4;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.faq-item.open .faq-body { grid-template-rows: 1fr; }
.faq-body-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-body-inner p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.72;
  color: #5b6472;
}

@media (prefers-reduced-motion: reduce) {
  .faq-body, .faq-icon::before, .faq-icon::after { transition: none; }
}
@media (max-width: 560px) {
  .eu-faq { margin-top: 72px; }
  .faq-trigger { padding: 16px 18px; font-size: 14.5px; }
  .faq-body-inner p { padding: 0 18px 18px; }
}

/* ---------- Upload screen: "Latest from Our Blog" ---------- */
.eu-blog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 88px auto 44px;
  text-align: center;
  scroll-margin-top: 84px; /* clear the fixed #siteNav when jumped to via #blog */
}
.eu-blog-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #0e1b2e;
}
.eu-blog-sub {
  margin: 10px 0 0;
  font-size: 16px;
  color: #5b6472;
}
.eu-blog-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #edf0f4;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(16, 27, 46, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(16, 27, 46, 0.10);
}
.blog-media {
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-media svg { width: 34px; height: 34px; display: block; }
.blog-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 24px;
}
.blog-cat {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.blog-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #0e1b2e;
}
.blog-card p {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #5b6472;
}
.blog-more {
  align-self: flex-start;
  margin-top: auto;
  display: inline-block;
  padding: 9px 18px;
  border: 0;
  border-radius: 9px;
  background: #2b44ff;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none; /* card #1 is a real <a>; #2/#3 stay <button> */
  cursor: pointer;
}
.blog-more:hover { background: #1e34e0; }
.blog-more:focus-visible { outline: 2px solid #2b44ff; outline-offset: 2px; }

.blog-card--a .blog-media { background: #dbeafe; color: #1d5db4; }
.blog-card--a .blog-cat { color: #1d5db4; }
.blog-card--b .blog-media { background: #e7e2fb; color: #5b3fc4; }
.blog-card--b .blog-cat { color: #5b3fc4; }
.blog-card--c .blog-media { background: #d6f1e4; color: #0e7b5b; }
.blog-card--c .blog-cat { color: #0e7b5b; }

@media (prefers-reduced-motion: reduce) {
  .blog-card { transition: none; }
  .blog-card:hover { transform: none; }
}
@media (max-width: 900px) {
  .eu-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .eu-blog { margin-top: 72px; }
  .eu-blog-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Upload screen: site footer (full-bleed) ---------- */
.eu-footer {
  width: 100%;               /* body child -> spans the whole viewport */
  margin: 0;                 /* no side margins, no top gap of its own */
  padding: 44px 0 0;         /* horizontal padding lives on .eu-footer-inner */
  background: #a2f1fb;       /* footer panel colour from the reference */
  text-align: left;
}
body:not(.pre-upload) .eu-footer { display: none; } /* only on the home screen */
.eu-footer-inner {
  max-width: 1280px;         /* wider: content uses more of the viewport */
  margin: 0 auto;
  padding: 0 28px;
}
.eu-footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
}
.eu-footer-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: #0e1b2e;
}
.eu-footer-name .nav-logo { width: 30px; height: 30px; border-radius: 9px; }
.eu-footer-name .nav-logo svg { width: 17px; height: 17px; }
.eu-footer-brand p {
  margin: 14px 0 0;
  max-width: 320px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #33566a;
}
.eu-footer-col h2 {
  margin: 4px 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #0e1b2e;
}
.eu-footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.eu-footer-col a {
  display: inline-block;
  padding: 6px 0;
  font-size: 13.5px;
  color: #2f5566;
  text-decoration: none;
}
.eu-footer-col a:hover { color: #0e1b2e; }
.eu-footer-col a:focus-visible {
  outline: 2px solid #0e1b2e;
  outline-offset: 2px;
  border-radius: 3px;
}
.eu-footer-bottom {
  /* full-width child of .eu-footer -> the divider spans the whole footer */
  margin-top: 32px;
  padding: 20px 0 12px;
  border-top: 1px solid rgba(14, 27, 46, 0.14);
  text-align: center; /* copyright sits in the horizontal centre */
}
.eu-footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: #3f6070;
}

@media (max-width: 720px) {
  .eu-footer { padding: 36px 0 0; }
  .eu-footer-inner { padding: 0 22px; }
  .eu-footer-cols { grid-template-columns: 1fr; gap: 30px; }
  .eu-footer-brand p { max-width: none; }
  .eu-footer-col a { padding: 9px 0; }
}

/* ---------- Blog article page (/blog/*) ---------- */
.post {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 76px;
}
.post-header {
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid #edf0f4;
}
.post-back {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2b44ff;
  text-decoration: none;
}
.post-back:hover { text-decoration: underline; }
.post-back:focus-visible {
  outline: 2px solid #2b44ff;
  outline-offset: 3px;
  border-radius: 3px;
}
.post-cat {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #1d5db4;
}
.post-header h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #0e1b2e;
}
.post-body {
  font-size: 16px;
  line-height: 1.75;
  color: #5b6472;
}
.post-body h2 {
  margin: 42px 0 14px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #0e1b2e;
}
.post-body h3 {
  margin: 28px 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: #0e1b2e;
}
.post-body p { margin: 0 0 16px; }
.post-body ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.post-body li { margin: 5px 0; }
.post-body strong { color: #0e1b2e; font-weight: 700; }
.post-body a { color: #2b44ff; }
.post-body a:focus-visible {
  outline: 2px solid #2b44ff;
  outline-offset: 2px;
  border-radius: 3px;
}

@media (max-width: 600px) {
  .post { padding: 26px 18px 56px; }
  .post-header h1 { font-size: 26px; }
  .post-body { font-size: 15.5px; }
  .post-body h2 { font-size: 20px; }
  .post-body h3 { font-size: 16px; }
}

/* ---------- Editor ---------- */
#editorView { display: flex; flex-direction: column; align-items: center; gap: 24px; }

.page {
  position: relative;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  /* width / height set inline in px from PDF points * zoom */
}
.page img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.text-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ===== Drawing surface for the non-text tools =====
   Objects always render; the layer only *captures* clicks when a non-text tool
   is active (so text editing is unaffected in text mode). */
.draw-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
body:not([data-tool="text"]):not([data-tool="undo"]) .draw-layer { pointer-events: auto; }
body:not([data-tool="text"]):not([data-tool="undo"]) .text-layer { pointer-events: none; }
body[data-tool="whiteout"] .draw-layer,
body[data-tool="shapes"] .draw-layer,
body[data-tool="links"] .draw-layer,
body[data-tool="images"] .draw-layer { cursor: crosshair; }

/* placed objects (whiteout / shapes / links / images) */
.obj {
  position: absolute;
  box-sizing: border-box;
}
.obj.sel { outline: 2px solid #0a84ff; outline-offset: 1px; }
.obj-whiteout { background: #ffffff; }
/* rect / ellipse: border colour + width + style set inline (per-shape) */
.obj-ellipse { border-radius: 50%; }
/* line / arrow / pentagon / arc / cloud / scribble render as an inner SVG */
.obj-svg {
  position: absolute;
  inset: 0;
  overflow: visible;
  width: 100%;
  height: 100%;
  display: block;
}
/* Link objects are invisible - the linked text itself shows blue + underlined
   (.tw-linked) as the indicator, which also survives export. The box is just a
   clickable / selectable hit area. */
.obj-link,
.obj-link.obj-link-existing,
.obj-link.obj-link-internal {
  border: 0;
  background: transparent;
}
body[data-tool="links"] .obj-link:hover {
  outline: 1px dashed rgba(26, 86, 219, 0.6);
  outline-offset: 1px;
}
.obj-link.sel { outline: 2px solid #1a56db; }
/* the invisible existing-link hit areas only matter while the Links tool is on */
body:not([data-tool="links"]) .obj.obj-link-existing,
body:not([data-tool="links"]) .obj.obj-link-internal { display: none; }

.tw-linked { text-underline-offset: 2px; text-decoration-thickness: 1px; }
.obj-image img { width: 100%; height: 100%; display: block; }
.obj-image { border: 1px solid transparent; }
.obj-image.sel { border-color: #0a84ff; }
/* An existing image/logo from the PDF stays grabbable in every tool - even the
   default Edit Text mode, where the draw-layer is otherwise pointer-events:none.
   A descendant with an explicit value is still a valid event target, and the
   mousedown bubbles to the draw-layer's startObjectDraw handler. */
.obj-image.obj-existing,
.obj-image.obj-existing img,
.obj-image.obj-existing .obj-h { pointer-events: auto; }
body[data-tool="text"] .obj-image.obj-existing:hover,
body[data-tool="undo"] .obj-image.obj-existing:hover { border-color: rgba(10, 132, 255, 0.5); cursor: move; }
/* hides the baked-in copy of a moved existing image in the page raster
   (kept before the .obj in the DOM so the moved image paints on top) */
.obj-img-cover { position: absolute; pointer-events: none; }

/* drag handle on a selected object */
.obj-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  right: -6px;
  bottom: -6px;
  background: #fff;
  border: 2px solid #0a84ff;
  border-radius: 2px;
  cursor: nwse-resize;
}
/* rubber-band while dragging out a new object */
.rubber {
  position: absolute;
  border: 1px dashed #0a84ff;
  background: rgba(10, 132, 255, 0.06);
  pointer-events: none;
  z-index: 8;
}

/* ===== Annotate strip + annotation objects ===== */
#annotbar {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  background: #fff;
  border: 1px solid #d8dde2;
  border-radius: 9px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.13);
  z-index: 46;
}
#annotbar[hidden] { display: none; }
.ab-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  color: #5b6169;
  padding: 0;
}
.ab-btn:hover { background: #eef5fb; }
.ab-btn.on { background: #d3ebfb; color: #1670a8; }
.ab-btn svg { width: 20px; height: 20px; display: block; }
.ab-div { width: 1px; align-self: stretch; margin: 4px 3px; background: #e4e8ec; }
.ab-color {
  width: 26px;
  height: 26px;
  margin-left: 2px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #d8dde2;
  display: block;
  cursor: pointer;
}
.ab-color input {
  width: 200%;
  height: 200%;
  margin: -25%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

/* markup mode lets clicks reach the printed-text spans */
body[data-tool="annotate"] .draw-layer { cursor: crosshair; }
body[data-tool="annotate"].ann-markup .draw-layer { pointer-events: none; }
body[data-tool="annotate"].ann-markup .text-layer { pointer-events: auto; }
body[data-tool="annotate"].ann-markup .tw {
  cursor: pointer;
  user-select: none;
}
body[data-tool="annotate"].ann-markup .tw:hover {
  box-shadow: 0 0 0 1px rgba(241, 196, 15, 0.9);
}

.obj-markup { pointer-events: none; }
.obj-mk-highlight { mix-blend-mode: multiply; }
.obj-markup .mk-line { position: absolute; left: 0; right: 0; height: 2px; }
.obj-mk-underline .mk-line { bottom: 1px; }
.obj-mk-strikeout .mk-line { top: 50%; }
.obj-markup .mk-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 6px;
  overflow: visible;
}

.obj-note { cursor: move; }
.obj-note svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.3));
}

.obj-freetext {
  border: 1px solid var(--ftc, #e0403a);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ftc, #1c1c1e);
  font: 12px/1.3 -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 3px 5px;
  overflow: visible;
}
.obj-ft-bubble { border-radius: 9px; }
.obj-freetext .ft-text {
  outline: none;
  width: 100%;
  height: 100%;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.obj-freetext .ft-text:empty::before {
  content: "Type here…";
  color: #9aa0a6;
}
.obj-ft-lead {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}

/* One editable existing/new text run */
.tw {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;              /* invisible until focused - no glyph doubling */
  white-space: pre;
  line-height: 1;
  transform-origin: 0 0;
  cursor: text;
  outline: none;
  caret-color: #0a84ff;
  -webkit-font-smoothing: antialiased;
  /* PDF text is not shaped - render 1 glyph per character, no ligatures/kerning */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "hlig" 0, "calt" 0, "kern" 0;
  font-kerning: none;
}
.tw:hover { box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.35); }
/* "New Text" mode: original PDF text is click-through so a click only ever
   makes a fresh box; the user's own boxes stay editable. */
body.text-add .tw:not(.tw-new):not(.editing) { pointer-events: none; }
/* a brand-new empty text box: keep it clickable + hint what to do */
.tw-new:empty { min-width: 10px; }
.tw-new.editing:empty::before {
  content: "Type…";
  color: #b6b6bc;
  pointer-events: none;
}
/* run whose original embedded font could not be used - a look-alike is shown */
.tw[data-fontsub]:hover { box-shadow: 0 0 0 1px rgba(230, 150, 0, 0.7); }

/* FOCUSED but not yet modified: interaction only. The overlay text stays
   transparent and the PDF raster underneath keeps rendering the glyphs - the
   click must not change a single pixel except the caret / selection. */
.tw.editing {
  z-index: 6;
  background: transparent;
}

/* Only once the user has ACTUALLY changed the text do we take over rendering:
   the run's own colour shows, and a cover (added in JS) hides the raster. */
.tw.changed,
.tw.deleted { color: var(--c, #1c1c1e); }
.tw.deleted { text-decoration: line-through; opacity: 0.4; }
.tw.dragging { box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.9); cursor: grabbing; }

/* Background-matched rect that hides the original rasterised glyphs while
   editing (instant placeholder before the MuPDF tile arrives). */
.cover {
  position: absolute;
  z-index: 1;
  background: #fff;
  pointer-events: none;
}

/* MuPDF-rendered raster of the edited run - matches the page's own
   rasterisation exactly. Sits in the same layer as the cover, under the .tw. */
.tile {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* once the tile is showing it owns the glyphs - the .tw goes transparent again
   (it stays interactive for the caret / selection). */
.tw.tiled { color: transparent !important; }

/* Hover move-handle: appears beside a run on hover, grab it to drag the text.
   Lives on <body> (position:fixed) so .text-layer's overflow:hidden can't clip
   it. Hidden while a run is being edited. */
.move-handle {
  position: fixed;
  z-index: 60;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #0a84ff;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  color: #0a84ff;
  cursor: move;
}
.move-handle.show { display: flex; }
.move-handle:hover { background: #eef6ff; }
.move-handle svg { width: 13px; height: 13px; display: block; }

/* Floating format toolbar: shown next to a run while it is being edited.
   Lives on <body> (position:fixed) so .text-layer's overflow can't clip it. */
.fmtbar {
  position: fixed;
  z-index: 70;
  display: none;
  align-items: center;
  gap: 1px;
  padding: 4px;
  background: #fff;
  border: 1px solid #d0d0d3;
  border-radius: 9px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
}
.fmtbar.show { display: flex; }

.fmtbar .fb-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #1c1c1e;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.fmtbar .fb-btn:hover { background: #f0f0f2; }
.fmtbar .fb-btn.active { background: #0a84ff; color: #fff; }
.fmtbar .fb-b { font-weight: 800; }
.fmtbar .fb-i {
  font-style: italic;
  font-weight: 600;
  font-family: Georgia, "Times New Roman", serif;
}
.fmtbar .fb-dec, .fmtbar .fb-inc { font-size: 17px; font-weight: 600; }
.fmtbar .fb-del.active { background: #ff3b30; color: #fff; }
.fmtbar .fb-btn svg { width: 15px; height: 15px; display: block; }

.fmtbar .fb-sep {
  width: 1px;
  align-self: stretch;
  margin: 3px 4px;
  background: #e2e2e5;
}

.fmtbar .fb-font {
  max-width: 132px;
  height: 28px;
  border: 1px solid #d0d0d3;
  border-radius: 6px;
  background: #fff;
  color: #1c1c1e;
  font: inherit;
  font-size: 12px;
  padding: 0 4px;
}
.fmtbar .fb-font:focus { outline: 2px solid #0a84ff; outline-offset: -1px; }
.fmtbar .fb-font:disabled { cursor: not-allowed; }

.fmtbar .fb-size {
  width: 42px;
  height: 28px;
  text-align: center;
  border: 1px solid #d0d0d3;
  border-radius: 6px;
  background: #fff;
  color: #1c1c1e;
  font: inherit;
  font-size: 12px;
  padding: 0 2px;
  -moz-appearance: textfield;
}
.fmtbar .fb-size::-webkit-outer-spin-button,
.fmtbar .fb-size::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fmtbar .fb-size:focus { outline: 2px solid #0a84ff; outline-offset: -1px; }

.fmtbar .fb-color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #d0d0d3;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.fmtbar .fb-color::-webkit-color-swatch-wrapper { padding: 3px; }
.fmtbar .fb-color::-webkit-color-swatch { border: 0; border-radius: 3px; }
.fmtbar .fb-color::-moz-color-swatch { border: 0; border-radius: 3px; }

/* ===== Shapes dropdown: an icon grid ===== */
.tt-menu-shapes:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  gap: 2px;
}
.tt-menu-shapes { min-width: 0; }
.tt-menu-shapes button {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #d13b3b;
}
.tt-menu-shapes button svg { width: 20px; height: 20px; }
.tt-menu-shapes button:hover { background: #fdeeee; }

/* ===== Shape properties sidebar (Image 2 / 3) ===== */
#shapepanel,
#annotpanel {
  position: fixed;
  top: var(--topbar-h);      /* under the topbar */
  right: 0;
  bottom: 0;
  width: 268px;
  background: #fff;
  border-left: 1px solid #e2e2e6;
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.06);
  overflow-y: auto;
  z-index: 45;
  padding: 16px 18px 40px;
  font-size: 13px;
  color: #2a2f36;
  user-select: none;
}
#shapepanel[hidden], #annotpanel[hidden] { display: none; }
body.panel-open #main { padding-right: 268px; }

/* ---------- Document navigator (left sidebar) ---------- */
#navToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 6px;
  border: 1px solid var(--tt-border, #cfe6f6);
  border-radius: 7px;
  background: #fff;
  color: #e0403a;
  cursor: pointer;
  flex: none;
}
#navToggle:hover { background: #fdeeee; }
#navToggle.on { background: #d3ebfb; border-color: #9fd2f2; color: #1670a8; }
#navToggle svg { width: 19px; height: 19px; }

#navpanel {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  bottom: 0;
  width: 280px;
  background: #fff;
  border-right: 1px solid #e2e2e6;
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  z-index: 44;
  font-size: 13px;
  color: #2a2f36;
}
#navpanel[hidden] { display: none; }
/* PDF sits right up against the navigator (was a 16px gap) */
body.navpanel-open #main { padding-left: 280px; }

.np-tabs {
  display: flex;
  gap: 6px;
  padding: 12px;
  position: relative;
}
.np-tab {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d7dde3;
  border-radius: 7px;
  background: #fff;
  color: #5b6169;
  cursor: pointer;
}
.np-tab:hover { background: #f2f6fa; }
.np-tab.on { background: #1e73b8; border-color: #1e73b8; color: #fff; }
.np-tab svg { width: 19px; height: 19px; }

.np-more-menu {
  position: absolute;
  right: 12px;
  top: 56px;
  z-index: 5;
  background: #fff;
  border: 1px solid #d9d9de;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  padding: 5px;
  min-width: 160px;
}
.np-more-menu[hidden] { display: none; }
.np-more-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #33383f;
  font-size: 13px;
  cursor: pointer;
}
.np-more-menu button:hover { background: #eef7fd; color: #1e8fd5; }
.np-more-menu button svg { width: 17px; height: 17px; flex: none; color: #5f6368; }

.np-body { flex: 1; overflow-y: auto; padding: 0 12px 16px; }
.np-pane[hidden] { display: none; }

.np-zoom { display: flex; align-items: center; gap: 8px; padding: 4px 2px 14px; }
.np-zoom input[type="range"] { flex: 1; accent-color: #2b2f36; }
.np-zbtn {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 5px;
  background: #f0f0f2;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: #33383f;
}
.np-zbtn:hover { background: #e3e3e6; }

.np-thumbs { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.np-thumb { cursor: pointer; text-align: center; width: 100%; }
.np-thumb img {
  display: block;
  margin: 0 auto;
  max-width: 150px;
  width: 100%;
  border: 1px solid #d9d9de;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  background: #fff;
}
.np-thumb.on img { border-color: #1e73b8; box-shadow: 0 0 0 2px #1e73b8; }
.np-thumb.picked img { border-color: #e0403a; box-shadow: 0 0 0 2px rgba(224, 64, 58, 0.5); }
.np-thumb .np-tnum { font-size: 12px; color: #6b7280; margin-top: 4px; }

.np-ms { margin-top: 20px; }
.np-ms-label { font-size: 15px; font-weight: 600; color: #1c1c1e; }
.np-ms-label span { font-weight: 400; font-size: 13px; color: #9aa0a6; }
.np-ms-row { display: flex; gap: 8px; margin-top: 10px; }
.np-ms-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #cfcfd4;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}
#np-ms-go {
  width: 38px;
  flex: none;
  border: 1px solid #cfcfd4;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  color: #5f6368;
  display: flex;
  align-items: center;
  justify-content: center;
}
#np-ms-go svg { width: 18px; height: 18px; }
#np-ms-go:hover { background: #f2f6fa; }

.np-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  color: #1c1c1e;
  padding: 8px 0 10px;
  border-bottom: 1px solid #ededf0;
  margin-bottom: 8px;
}
.np-link {
  border: 0;
  background: transparent;
  color: #1e8fd5;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.np-link:hover { text-decoration: underline; }
.np-list { min-height: 40px; }
.np-oitem, .np-bmitem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 5px;
  cursor: pointer;
  color: #33383f;
  font-size: 13px;
}
.np-oitem:hover, .np-bmitem:hover { background: #eef7fd; }
.np-oitem .np-ochev {
  width: 16px;
  flex: none;
  color: #9aa0a6;
  transition: transform 0.12s;
}
.np-oitem.collapsed .np-ochev { transform: rotate(-90deg); }
.np-oitem .np-otitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-bmitem .np-bmdel {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #b0b4ba;
  font-size: 15px;
  cursor: pointer;
  padding: 0 4px;
}
.np-bmitem .np-bmdel:hover { color: #e0403a; }
.np-empty { color: #b8860b; font-size: 13px; text-align: center; padding: 24px 0; }
.np-msec { margin-bottom: 18px; }
.np-msec .np-head { font-size: 14px; padding: 6px 0 8px; }

.np-add {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: #1e8fd5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.np-add:hover { text-decoration: underline; }

.np-toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #33383f; margin: 6px 0 12px; cursor: pointer; }
.np-switch { position: relative; width: 34px; height: 18px; flex: none; }
.np-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.np-switch i {
  position: absolute;
  inset: 0;
  background: #cfd4da;
  border-radius: 999px;
  transition: background 0.15s;
}
.np-switch i::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
}
.np-switch input:checked + i { background: #1e73b8; }
.np-switch input:checked + i::after { transform: translateX(16px); }

/* on-page bookmark marker */
.page-bookmark {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 28px;
  color: #e0403a;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* which annotation panel sections show for which tool family */
#annotpanel .ap-sec[data-sec="textstyle"],
#annotpanel .ap-sec[data-sec="stroke"],
#annotpanel .ap-sec[data-sec="fill"] { display: none; }
#annotpanel[data-variant="freehand"] .ap-sec[data-sec="stroke"] { display: block; }
#annotpanel[data-variant="freehand"] .ap-sec[data-sec="stroke"] .ap-only-ft { display: none; }
#annotpanel[data-variant="freetext"] .ap-sec[data-sec="textstyle"],
#annotpanel[data-variant="freetext"] .ap-sec[data-sec="stroke"],
#annotpanel[data-variant="freetext"] .ap-sec[data-sec="fill"] { display: block; }
#annotpanel[data-variant="freetext"] .ap-sec[data-sec="color"] { display: none; }

.ap-row2 { display: flex; gap: 8px; margin-bottom: 10px; }
.ap-row2 select { flex: 1; padding: 6px 8px; border: 1px solid #d3d3d8; border-radius: 6px; font: inherit; background: #fff; }
.ap-btnrow { display: flex; gap: 6px; margin-bottom: 8px; }
.ap-btnrow button {
  width: 34px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #d8dde2; border-radius: 6px; background: #fff;
  cursor: pointer; color: #33383f; padding: 0; font-size: 14px;
}
.ap-btnrow button:hover { background: #f0f0f2; }
.ap-btnrow button.on { background: #d3ebfb; border-color: #9fd2f2; color: #1670a8; }
.ap-btnrow button svg { width: 16px; height: 16px; display: block; }
.ap-btnrow .ap-a { font-weight: 700; text-decoration: underline; text-decoration-color: #e0403a; }
.ap-check { display: flex; align-items: center; gap: 7px; margin: 6px 0 12px; font-size: 12.5px; color: #33383f; cursor: pointer; }
.ap-check input { margin: 0; }
.sp-swatches.ap-grid { flex-wrap: wrap; gap: 8px 9px; }

#shapepanel .sp-title,
#annotpanel .sp-title {
  font-size: 16px;
  font-weight: 700;
  color: #1c1c1e;
  margin: 2px 0 14px;
}

.sp-sec { border-bottom: 1px solid #ededf0; padding: 12px 0; }
.sp-sec:first-of-type { padding-top: 0; }
.sp-sec > h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #1c1c1e;
  cursor: pointer;
}
.sp-sec > h4 .sp-chev {
  width: 16px; height: 16px;
  transition: transform 0.15s;
  color: #6b7280;
}
.sp-sec.collapsed > h4 { margin-bottom: 0; }
.sp-sec.collapsed > h4 .sp-chev { transform: rotate(180deg); }
.sp-sec.collapsed .sp-body { display: none; }

.sp-swatches {
  display: flex;
  gap: 7px;
  margin-bottom: 10px;
}
.sp-swatches .sw {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  flex: none;
}
.sp-swatches .sw.on::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid #2b8fd6;
  border-radius: 50%;
}
.sp-swatches .sw-none {
  background: #fff;
  border: 1px solid #cfcfd4;
}
.sp-swatches .sw-none::before {
  content: "";
  position: absolute;
  left: 1px; right: 1px; top: 50%;
  height: 2px;
  background: #e0403a;
  transform: rotate(-45deg);
}

.sp-iconrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #7a7f87;
}
.sp-iconrow button {
  border: 0;
  background: transparent;
  padding: 2px;
  cursor: pointer;
  color: inherit;
  display: flex;
}
.sp-iconrow button:hover { color: #2b8fd6; }
.sp-iconrow button svg { width: 17px; height: 17px; display: block; }
.sp-iconrow .sp-more {
  margin-left: auto;
  color: #2b8fd6;
  font-size: 12.5px;
  font-weight: 600;
}

.sp-field { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.sp-field > span { font-size: 13px; color: #33383f; min-width: 42px; }
.sp-field input[type="range"] { flex: 1; accent-color: #2b2f36; }
.sp-field .sp-num {
  width: 54px;
  text-align: center;
  padding: 5px 4px;
  border: 1px solid #d3d3d8;
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  background: #fff;
  color: #2a2f36;
}
.sp-label { font-size: 13px; color: #33383f; margin: 12px 0 5px; }
#sp-style {
  width: 96px;
  padding: 6px 8px;
  border: 1px solid #d3d3d8;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.sp-hidden-color { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

/* ---------- Images menu: New Image / Delete / New Stamp + stamp shelf ---------- */
.tt-menu-images { min-width: 244px; padding: 8px; }
.tt-menu-images .mi-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid #d7d7dc;
  border-radius: 7px;
  background: #fff;
  color: #33383f;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.tt-menu-images .mi-btn:first-child { margin-top: 0; }
.tt-menu-images .mi-btn svg { width: 16px; height: 16px; }
.tt-menu-images .mi-btn:hover { background: #f4f7fa; border-color: #b9c2cc; color: #33383f; }
.tt-menu-images .mi-primary { color: #1e8fd5; border-color: #bfe1f5; }
.tt-menu-images .mi-primary:hover { background: #eef7fd; color: #1e8fd5; }

/* ---------- Forms menu ---------- */
.tt-menu-forms { min-width: 300px; padding: 6px 6px 8px; }
.tt-menu-forms .mf-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa0a6;
  padding: 10px 8px 6px;
}
.tt-menu-forms .mf-symbols {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 6px;
  border-bottom: 1px solid #ededf0;
}
.tt-menu-forms .mf-gap { flex: 1; }
.tt-menu-forms .mf-symbols button {
  width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #33383f;
  cursor: pointer;
  padding: 0;
}
.tt-menu-forms .mf-symbols button svg { width: 20px; height: 20px; }
.tt-menu-forms .mf-symbols button:hover { background: #eef7fd; color: #1e8fd5; }
.tt-menu-forms .mf-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  padding: 4px 2px 0;
}
.tt-menu-forms .mf-fields button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 8px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #33383f;
  font-size: 13px;
  cursor: pointer;
}
.tt-menu-forms .mf-fields button svg { width: 20px; height: 18px; flex: none; color: #5f6368; }
.tt-menu-forms .mf-fields button:hover { background: #eef7fd; color: #1e8fd5; }
.tt-menu-forms .mf-fields button:hover svg { color: #1e8fd5; }

/* placed form-field object */
.obj-field {
  background: #eef1fb;
  border: 0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  overflow: visible;
  cursor: move;
  padding: 0 8px;
}
.obj-field .ff-ph {
  flex: 1;
  min-width: 0;
  font: 400 13px/1.25 -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #9aa0a6;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.obj-field .ff-select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: 400 13px/1.25 -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #111;
  padding: 0 2px;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
}
.obj-field .ff-select:focus { outline: none; }
.obj-field .ff-box {
  display: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid #6b7280;
  flex: none;
}
/* dashed selection frame + 8 handles, matching the reference */
.obj-field.sel { outline: 1.5px dashed #2b8fd6; outline-offset: 2px; }
.obj-hframe { position: absolute; inset: 0; pointer-events: none; }
.obj-h {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1.5px solid #2b8fd6;
  border-radius: 1px;
  pointer-events: auto;
}
.obj-h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.obj-h-n  { left: calc(50% - 4px); top: -6px; cursor: ns-resize; }
.obj-h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.obj-h-e  { right: -6px; top: calc(50% - 4px); cursor: ew-resize; }
.obj-h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.obj-h-s  { left: calc(50% - 4px); bottom: -6px; cursor: ns-resize; }
.obj-h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.obj-h-w  { left: -6px; top: calc(50% - 4px); cursor: ew-resize; }

/* ---------- Field toolbar ---------- */
.fieldbar { gap: 0; padding: 5px 4px; }
.fieldbar .fb-btn {
  position: relative;
  width: auto;
  height: 34px;
  gap: 5px;
  padding: 0 9px;
  color: #33383f;
  flex: none;
}
.fieldbar .fb-btn[hidden] { display: none; }
.fieldbar .fb-btn svg { width: 17px; height: 17px; flex: none; }
.fieldbar .fb-cv {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.75;
  flex: none;
}
.fieldbar .fb-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 2px;
  background: #e4e6e9;
  flex: none;
}
.fieldbar .fb-sep[hidden] { display: none; }

/* image toolbar: rotate / duplicate / delete - same look as the field bar */
.imgbar { gap: 0; padding: 5px 4px; }
.imgbar .fb-btn {
  position: relative;
  width: auto;
  height: 34px;
  gap: 5px;
  padding: 0 10px;
  color: #33383f;
  flex: none;
}
.imgbar .fb-btn svg { width: 17px; height: 17px; flex: none; }
.imgbar .fb-btn[data-a="del"]:hover { background: #ffecec; color: #e0403a; }
.imgbar .fb-cv {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.75;
  flex: none;
}
.imgbar .fb-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 2px;
  background: #e4e6e9;
  flex: none;
}

.field-pop {
  position: fixed;
  z-index: 130;
  background: #fff;
  border: 1px solid #d7d7dc;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
  padding: 12px;
  width: 232px;
  font-size: 13px;
  color: #33383f;
}
.field-pop .fp-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9aa0a6;
  margin: 4px 0 6px;
}
.field-pop .fp-label:first-child { margin-top: 0; }
.field-pop .fb-swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.field-pop .fb-swatches .sw {
  width: 20px; height: 20px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer; position: relative;
}
.field-pop .fb-swatches .sw.on::after {
  content: ""; position: absolute; inset: -4px;
  border: 2px solid #2b8fd6; border-radius: 50%;
}
.field-pop .fb-swatches .sw-none {
  background: #fff; border: 1px solid #cfcfd4;
}
.field-pop .fb-swatches .sw-none::before {
  content: ""; position: absolute; left: 1px; right: 1px; top: 50%;
  height: 2px; background: #e0403a; transform: rotate(-45deg);
}
.field-pop .fp-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.field-pop .fp-row > span { min-width: 42px; color: #4a4f57; }
.field-pop .fp-row input[type="range"] { flex: 1; accent-color: #2b2f36; }
.field-pop .fp-num {
  width: 52px; text-align: center; padding: 5px; font: inherit; font-size: 12.5px;
  border: 1px solid #d3d3d8; border-radius: 6px;
}
.field-pop .fp-step {
  width: 28px; height: 28px; border: 1px solid #d3d3d8; border-radius: 6px;
  background: #fff; font-size: 15px; cursor: pointer;
}
.field-pop .fp-btnrow { display: flex; gap: 6px; }
.field-pop .fp-btnrow button {
  width: 36px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #d8dde2; border-radius: 6px; background: #fff; cursor: pointer;
}
.field-pop .fp-btnrow button svg { width: 16px; height: 16px; }
.field-pop .fp-btnrow button.on { background: #d3ebfb; border-color: #9fd2f2; color: #1670a8; }
.field-pop .fp-field {
  display: flex; flex-direction: column; gap: 4px; margin: 8px 0;
  font-size: 12px; color: #4a4f57;
}
.field-pop .fp-field input, .field-pop .fp-ta {
  padding: 7px 8px; border: 1px solid #d3d3d8; border-radius: 6px;
  font: inherit; font-size: 12.5px; color: #1c1c1e; resize: vertical;
}
.field-pop .fp-check {
  display: flex; align-items: center; gap: 7px; margin: 7px 0; cursor: pointer;
}
.field-pop .fp-check input { margin: 0; }

.stamp-shelf {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.stamp-chip {
  position: relative;
  border: 2px solid var(--sc, #2f5d2f);
  border-radius: 8px;
  padding: 8px 26px 8px 10px;
  color: var(--sc, #2f5d2f);
  cursor: pointer;
  background: #fff;
}
.stamp-chip:hover { background: #f7faf7; }
.stamp-chip .sc-sub { font-weight: 800; font-size: 15px; line-height: 1.15; }
.stamp-chip .sc-by { font-size: 10.5px; margin-top: 1px; }
.stamp-chip .sc-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #9aa0a6;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.stamp-chip .sc-x:hover { background: #eee; color: #444; }

/* ---------- Placed stamp object ---------- */
.obj-stamp {
  border: 2px solid #2f5d2f;
  border-radius: 8px;
  padding: 4px 10px;
  color: #2f5d2f;
  background: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: move;
}
.obj-stamp .stamp-sub { font-weight: 800; line-height: 1.1; white-space: nowrap; }
.obj-stamp .stamp-by { line-height: 1.15; white-space: nowrap; opacity: 0.95; }

/* ---------- Create-stamp modal ---------- */
#stampModal {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 30, 0.32);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
  z-index: 130;
}
#stampModal.hidden { display: none; }
.sm-panel {
  width: 560px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.sm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #f5f6f7;
  border-bottom: 1px solid #e5e6e8;
  font-size: 15px;
  font-weight: 600;
  color: #33383f;
}
.sm-x {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #8a8f96;
  cursor: pointer;
  padding: 0 4px;
}
.sm-x:hover { color: #33383f; }
.sm-body { padding: 20px 22px 24px; }
.sm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
}
.sm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #4a4f57;
}
.sm-field input,
.sm-field select {
  padding: 9px 10px;
  border: 1px solid #d3d3d8;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: #1c1c1e;
}
.sm-field input:focus,
.sm-field select:focus { outline: 2px solid #0a84ff; outline-offset: -1px; }
.sm-swatches { display: flex; gap: 10px; padding-top: 3px; }
.sm-swatches .sw {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.sm-swatches .sw.on::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid #2b8fd6;
  border-radius: 50%;
}
.sm-preview-wrap {
  display: flex;
  justify-content: center;
  padding: 28px 0 22px;
}
.sm-preview {
  position: static;
  cursor: default;
  min-width: 220px;
  padding: 10px 18px;
}
.sm-preview .stamp-sub { font-size: 26px; }
.sm-preview .stamp-by { font-size: 13px; margin-top: 2px; }
.sm-actions { display: flex; justify-content: center; }
.sm-save {
  background: #16a34a;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 11px 34px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.sm-save:hover { background: #128a3e; }

/* ---------- Create-signature modal ---------- */
#sigModal {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 30, 0.32);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5vh;
  z-index: 131;
}
#sigModal.hidden { display: none; }
.sig-panel {
  width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.sig-body { overflow-y: auto; flex: 1; }
.sig-tabsbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 18px 0;
  border-bottom: 1px solid #e5e6e8;
}
.sig-tabs { display: flex; gap: 4px; }
.sig-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #16a34a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sig-tab svg { width: 16px; height: 16px; }
.sig-tab:hover { color: #128a3e; }
.sig-tab.on { color: #33383f; border-bottom-color: #33383f; }
.sig-save-chk {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #4a4f57;
  cursor: pointer;
}
.sig-body { padding: 26px 26px 8px; min-height: 340px; }
.sig-pane[hidden] { display: none; }
.sig-panel .sm-actions { padding: 16px 0 22px; }

#sig-name {
  display: block;
  width: 340px;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 10px 12px;
  border: 1px solid #cfcfd4;
  border-radius: 4px;
  font: inherit;
  font-size: 15px;
  text-align: center;
  background: #f1f1f3;
}
.sig-swatches { justify-content: center; margin-bottom: 20px; }
.sig-fontgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sig-fontgrid button {
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  padding: 10px 8px;
  cursor: pointer;
  font-size: 26px;
  line-height: 1.1;
  color: #1c1c1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sig-fontgrid button:hover { background: #f5f7fa; }
.sig-fontgrid button.on { background: #e8f1fe; border-color: #bcd8fb; }
.sig-note { text-align: center; color: #9aa0a6; font-size: 12px; margin: 22px 0 0; }

.sig-canvas-wrap { position: relative; }
#sig-canvas {
  width: 100%;
  height: 260px;
  border: 1px dashed #cfcfd4;
  border-radius: 6px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
.sig-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 1px solid #d3d3d8;
  border-radius: 6px;
  background: #fff;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}

.sig-drop {
  border: 2px dashed #cfcfd4;
  border-radius: 8px;
  padding: 34px;
  text-align: center;
  color: #6b7280;
}
.sig-drop button {
  margin-top: 10px;
  background: #0a84ff;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 13px;
  cursor: pointer;
}
#sig-upload-preview { display: block; max-width: 100%; max-height: 200px; margin: 16px auto 0; }

.sig-cam-wrap { text-align: center; min-height: 260px; }
#sig-video, #sig-cam-shot {
  max-width: 100%;
  max-height: 260px;
  border-radius: 6px;
  background: #111;
}
.sig-cam-msg { color: #9aa0a6; font-size: 13px; margin-top: 20px; }
.sig-pane[data-pane="camera"] { text-align: center; }
.sig-pane[data-pane="camera"] button {
  margin: 14px 6px 0;
  background: #0a84ff;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 13px;
  cursor: pointer;
}

/* ---------- Busy overlay ---------- */
#busy {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  z-index: 100;
}
.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #c7c7cc;
  border-top-color: #0a84ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== "Your document is ready" result modal ===== */
#resultModal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#resultModal.hidden { display: none; }
.rm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 35, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: rm-fade 0.2s ease;
}
.rm-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 22px;
  padding: 44px 40px 30px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(12, 27, 46, 0.30);
  animation: rm-pop 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rm-fade { from { opacity: 0; } }
@keyframes rm-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
}
.rm-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #9aa1ac;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.rm-x:hover { background: #f2f4f7; color: #0e1b2e; }
.rm-x:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }

.rm-check {
  width: 76px;
  height: 76px;
  margin: 4px auto 20px;
  border-radius: 50%;
  background: #ecfdf5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.08);
}
.rm-check svg { width: 46px; height: 46px; }
.rm-check-ring {
  fill: none;
  stroke: #10b981;
  stroke-width: 3;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: rm-ring 0.5s ease forwards;
}
.rm-check-tick {
  fill: none;
  stroke: #10b981;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: rm-tick 0.3s 0.4s ease forwards;
}
@keyframes rm-ring { to { stroke-dashoffset: 0; } }
@keyframes rm-tick { to { stroke-dashoffset: 0; } }

.rm-title {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #0e1b2e;
}
.rm-sub {
  margin: 8px 0 22px;
  font-size: 14px;
  color: #6b7280;
}

.rm-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: #f5f7fa;
  border: 1px solid #e8ebf0;
  border-radius: 11px;
  margin-bottom: 20px;
}
.rm-file-ico {
  flex: none;
  color: #1d5db4;
  display: flex;
}
.rm-file-ico svg { width: 18px; height: 18px; }
.rm-name {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #0e1b2e;
  padding: 8px 0;
}
.rm-name:focus { outline: none; }
.rm-ext { flex: none; font-size: 14px; font-weight: 600; color: #9aa1ac; }

.rm-download {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 13px;
  background: #10b981;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(16, 185, 129, 0.34);
  transition: background 0.15s ease, transform 0.1s ease;
}
.rm-download svg { width: 20px; height: 20px; }
.rm-download:hover { background: #0ea371; }
.rm-download:active { transform: translateY(1px); }
.rm-download:focus-visible { outline: 2px solid #0e1b2e; outline-offset: 2px; }

.rm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.rm-ghost {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #e8ebf0;
  border-radius: 10px;
  background: #fff;
  color: #33383f;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.rm-ghost svg { width: 16px; height: 16px; }
.rm-ghost:hover { background: #f5f7fa; color: #0e1b2e; }
.rm-ghost:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }

.rm-startover {
  margin-top: 16px;
  border: 0;
  background: transparent;
  color: #9aa1ac;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.rm-startover:hover { color: #0e1b2e; text-decoration: underline; }
.rm-startover:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .rm-backdrop, .rm-card, .rm-check-ring, .rm-check-tick { animation: none; }
  .rm-check-ring, .rm-check-tick { stroke-dashoffset: 0; }
}
@media (max-width: 480px) {
  .rm-card { padding: 40px 22px 26px; }
  .rm-actions { grid-template-columns: 1fr; }
}

/* ===== Link properties popover ===== */
.link-pop {
  position: fixed;
  z-index: 130;
  width: 320px;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(16, 27, 46, 0.20);
  padding: 16px 18px 14px;
  font-size: 14px;
  color: #1c2530;
}
.link-pop.hidden { display: none; }
.lp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#lp-title { font-size: 16px; font-weight: 700; color: #0e1b2e; }
.lp-x {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #9aa1ac;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.lp-x:hover { background: #f2f4f7; color: #0e1b2e; }
.lp-body { display: flex; flex-direction: column; }
.lp-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-weight: 600;
  color: #33383f;
  cursor: pointer;
}
.lp-opt:first-child { margin-top: 0; }
.lp-opt input[type="radio"] { accent-color: #2b44ff; width: 15px; height: 15px; flex: none; }
.lp-in {
  margin: 7px 0 4px 24px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #d7dce3;
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  color: #0e1b2e;
  background: #fff;
  outline: none;
}
.lp-in::placeholder { color: #b6bcc6; }
.lp-in:focus { border-color: #2b44ff; box-shadow: 0 0 0 3px rgba(43, 68, 255, 0.12); }
.lp-in:disabled { background: #f5f7fa; color: #aab0b9; cursor: not-allowed; }
.lp-in-sm { width: 88px; margin-left: 24px; }
.lp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.lp-del {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #e0403a;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
}
.lp-del svg { width: 15px; height: 15px; }
.lp-del:hover { text-decoration: underline; }
.lp-close {
  border: 0;
  background: transparent;
  color: #2b44ff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
}
.lp-close:hover { text-decoration: underline; }
.lp-del:focus-visible, .lp-close:focus-visible, .lp-x:focus-visible {
  outline: 2px solid #2b44ff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* =====================================================================
   Mobile / small screens
   ===================================================================== */
@media (max-width: 640px) {
  /* --- Home page: stop the sideways scroll (the .eu-decor wash is 115% wide
     and bleeds past the viewport) and fit the upload card to the screen --- */
  body.pre-upload { overflow-x: hidden; }
  .eu-decor { width: 100%; max-width: 100%; left: 0; transform: none; }

  .eu-title { font-size: 34px; }
  .eu-tagline { font-size: 15px; }

  .eu-card { padding: 16px 14px; margin-top: 24px; border-radius: 16px; }
  .drop { padding: 30px 16px 26px; }
  .eu-folder { width: 68px; height: 68px; margin-bottom: 18px; }
  .eu-folder svg { width: 36px; height: 36px; }
  #pickBtn.eu-browse { min-width: 0; width: 100%; padding: 15px 20px; font-size: 16px; }
  .eu-hint { font-size: 14px; }
}

@media (max-width: 900px) {
  /* --- Editor: the left navigator becomes a slide-over instead of a layout
     column, so the PDF page always gets the full width. It opens closed on
     phones (see openEditor) and the navigator button toggles it. --- */
  body.navpanel-open #main { padding-left: 0; }
  #navpanel {
    width: min(300px, 84vw);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.28);
  }

  /* the page is scaled to fit the screen width (see fitWidthZoom). Align pages
     to the left edge so that if one is ever wider than the screen (e.g. the
     user taps 150% / 200%) the left side stays visible and you pan right -
     align-items:center would push the left overflow off-screen unreachably. */
  #main { padding-left: 8px; padding-right: 8px; }
  #editorView { align-items: flex-start; }

  /* --- Editor top bar: everything tried to sit on one row and the absolutely
     positioned zoom / Apply-Changes group overlapped the tool tabs. Stack it
     into two rows instead: [navigator]…[zoom | Apply] on top, the scrollable
     tool strip below. --- */
  :root { --topbar-h: 102px; }              /* taller bar: keep #main / #navpanel clear of it */

  #topbar { height: auto; min-height: 0; padding: 7px 8px; }
  #topbar h1 { display: none; }             /* the wordmark link is desktop-only here */

  #toolbar {
    padding: 0;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #navToggle { order: 1; margin-right: 0; }
  .docbar {
    order: 2;
    position: static;
    transform: none;
    margin-left: auto;                      /* hug the right edge of row 1 */
    gap: 6px;
  }
  .tooltabs {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tooltabs .tt-group { flex: none; }        /* keep full size; let the strip scroll */

  .zoom button { padding: 5px 8px; font-size: 11px; }
  #saveBtn { padding: 7px 12px; font-size: 12px; }
}

@media (max-width: 560px) {
  :root { --topbar-h: 100px; }
  .tt-btn { padding: 0 9px; font-size: 12px; }
  .tt-btn svg:not(.cv) { width: 15px; height: 15px; }
}