@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --surface-2: #F2F2EF;
  --ink: #14151A;
  --ink-soft: #62636D;
  --ink-faint: #93949C;
  --border: #E5E5E1;
  --accent: #3454D1;
  --accent-ink: #FFFFFF;
  --accent-soft: #EAEEFC;
  --success: #158F58;
  --success-soft: #E4F5EC;
  --danger: #C23B3B;
  --danger-soft: #FBEAEA;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(20,21,26,.04), 0 8px 24px rgba(20,21,26,.05);
  --font-display: 'Space Grotesk', 'Noto Sans Arabic', 'Noto Sans SC', sans-serif;
  --font-body: 'Inter', 'Noto Sans Arabic', 'Noto Sans SC', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0F13; --surface: #16171D; --surface-2: #1C1E25;
    --ink: #F2F2F0; --ink-soft: #ACADB6; --ink-faint: #6E6F79;
    --border: #2A2C35; --accent: #7C97FF; --accent-ink: #0E0F13; --accent-soft: #1C2340;
    --success: #38C98A; --success-soft: #113526; --danger: #FF7A7A; --danger-soft: #3A1A1A;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg: #0E0F13; --surface: #16171D; --surface-2: #1C1E25;
  --ink: #F2F2F0; --ink-soft: #ACADB6; --ink-faint: #6E6F79;
  --border: #2A2C35; --accent: #7C97FF; --accent-ink: #0E0F13; --accent-soft: #1C2340;
  --success: #38C98A; --success-soft: #113526; --danger: #FF7A7A; --danger-soft: #3A1A1A;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: background .2s ease, color .2s ease;
}
[dir="rtl"] body { font-family: 'Noto Sans Arabic', var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: 'Noto Sans Arabic', var(--font-display); }
p { margin: 0; color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link { position: absolute; top: 0; inset-inline-start: 0; transform: translateY(-200%); }
.skip-link:focus { transform: none; inset-inline-start: 1rem; top: 1rem; z-index: 100; background: var(--surface); padding: .5rem 1rem; border-radius: var(--radius-sm); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; cursor: pointer; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.brand-mark img { width: 34px; height: 34px; object-fit: contain; display: block; }
.header-controls { display: flex; align-items: center; gap: 8px; }

.theme-switch { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.theme-switch button { width: 30px; height: 30px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.theme-switch button svg { width: 15px; height: 15px; }
.theme-switch button.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

.lang-switch { position: relative; }
.lang-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer; font-size: .85rem; font-weight: 600; }
.lang-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); min-width: 150px; padding: 6px; display: none; flex-direction: column; }
.lang-menu.open { display: flex; }
.lang-menu button { text-align: start; padding: 8px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: .9rem; }
.lang-menu button:hover { background: var(--surface-2); }
.lang-menu button.active { color: var(--accent); font-weight: 600; }

/* ---------- layout ---------- */
main { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 80px; }

.hero { padding: clamp(40px, 8vw, 88px) 0 clamp(28px, 5vw, 48px); max-width: 720px; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 600; margin-bottom: 18px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -0.02em; }
.hero-sub { margin-top: 16px; font-size: 1.05rem; line-height: 1.6; max-width: 58ch; }
.search-wrap { margin-top: 28px; }
#search-input {
  width: 100%; max-width: 460px; padding: 13px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: .95rem;
}
#search-input:focus { border-color: var(--accent); }

.ad-slot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 74px; margin: 0 0 34px; padding: 14px 20px; border: 1px dashed var(--border); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--accent-soft)), var(--surface)); color: var(--ink-soft); text-align: center; }
.ad-slot strong { color: var(--ink); font-size: .92rem; }
.ad-slot > span:not(.ad-slot-label) { font-size: .78rem; }
.ad-slot-label { align-self: flex-start; padding: 3px 7px; border-radius: 5px; background: var(--surface-2); color: var(--ink-faint); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }

.tool-section { margin-top: 44px; }
.section-title { font-size: 1.1rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 16px; font-family: var(--font-body); }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }

.tool-card {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tool-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.tool-card-icon { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.tool-card-body h3 { font-size: .95rem; font-weight: 600; margin-bottom: 4px; }
.tool-card-body p { font-size: .82rem; line-height: 1.45; }

/* ---------- animated folder cards ---------- */
.fm-folder-card {
  --folder-transition: 350ms;
  --folder-w: 94px;
  --folder-h: 62px;
  min-height: 198px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 12px 12px;
  overflow: visible;
  text-align: center;
  background: linear-gradient(135deg, #6dd5ed, #2193b0);
  border: 0;
  border-radius: 15px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, .18);
  color: #fff;
  transition: transform var(--folder-transition) ease, box-shadow var(--folder-transition) ease, filter var(--folder-transition) ease;
}
.fm-folder-card:hover {
  border-color: transparent;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .25);
  transform: translateY(-4px);
  filter: saturate(1.06);
}
.fm-folder-card:focus-visible { outline-color: #fff; outline-offset: 4px; }
.fm-folder-visual {
  position: relative;
  display: block;
  width: var(--folder-w);
  height: 80px;
  flex: none;
}
.fm-folder-shape {
  position: absolute;
  top: 12px;
  left: 0;
  width: var(--folder-w);
  height: var(--folder-h);
  animation: fm-folder-float 2.5s infinite ease-in-out;
  transition: transform var(--folder-transition) ease;
  transform-style: preserve-3d;
}
.fm-folder-front, .fm-folder-back {
  position: absolute;
  inset: 0;
  transform-origin: bottom center;
  transition: transform var(--folder-transition) ease;
}
.fm-folder-back {
  z-index: 0;
  background: rgba(255, 255, 255, .28);
  border-radius: 15px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}
.fm-folder-back::before, .fm-folder-back::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  background: rgba(255, 255, 255, .46);
  border-radius: 15px;
  transform-origin: bottom center;
  transition: transform var(--folder-transition) ease;
}
.fm-folder-front { z-index: 1; }
.fm-folder-tab {
  position: absolute;
  top: -8px;
  left: 0;
  z-index: 2;
  width: 62px;
  height: 16px;
  background: linear-gradient(135deg, #ff9a56, #ff6f56);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .18);
}
.fm-folder-cover {
  display: block;
  width: var(--folder-w);
  height: var(--folder-h);
  background: linear-gradient(135deg, #ffe563, #ffc663);
  border-radius: 10px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, .25);
}
.fm-folder-card:hover .fm-folder-shape { transform: scale(1.05); }
.fm-folder-card:hover .fm-folder-front { transform: rotateX(-40deg) skewX(15deg); }
.fm-folder-card:hover .fm-folder-back::before { transform: rotateX(-5deg) skewX(5deg); }
.fm-folder-card:hover .fm-folder-back::after { transform: rotateX(-15deg) skewX(12deg); }
.fm-folder-label {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  color: #fff;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.3;
  transition: background var(--folder-transition) ease;
}
.fm-folder-card:hover .fm-folder-label { background: rgba(255, 255, 255, .34); }
.fm-folder-description {
  display: block;
  width: 100%;
  min-height: 2.5em;
  color: rgba(255, 255, 255, .86);
  font-size: .76rem;
  line-height: 1.35;
}
@keyframes fm-folder-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- tool page ---------- */
.tool-page { max-width: 680px; margin: 0 auto; padding-top: 32px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--ink-soft); margin-bottom: 22px; }
.back-link svg { width: 15px; height: 15px; }
[dir="rtl"] .back-link svg { transform: scaleX(-1); }
.tool-header { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.tool-page-icon { width: 30px; height: 30px; color: var(--accent); flex: none; margin-top: 4px; }
.tool-header h1 { font-size: 1.6rem; margin-bottom: 6px; }
.tool-header p { font-size: .95rem; }

.note { padding: 12px 16px; border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 20px; line-height: 1.5; }
.note-limit { background: var(--accent-soft); color: var(--accent); }

.dropzone {
  border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 40px 20px; text-align: center;
  cursor: pointer; background: var(--surface); transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--accent-soft); }
.drop-icon { width: 30px; height: 30px; color: var(--ink-faint); margin-bottom: 10px; }
.drop-title { font-weight: 600; color: var(--ink); font-size: .98rem; }
.drop-sub { font-size: .84rem; margin-top: 4px; }

.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; padding: 10px 14px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: .86rem; }
.file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { color: var(--ink-faint); font-size: .78rem; }
.file-remove { border: 0; background: transparent; color: var(--ink-faint); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 2px 6px; }
.file-remove:hover { color: var(--danger); }

.opts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 22px; }
.opt { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; color: var(--ink-soft); }
.opt select, .opt input[type="text"], .opt input[type="password"], .opt input[type="number"] {
  padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: .88rem;
}
.opt input[type="range"] { accent-color: var(--accent); }

.actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.btn { padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary:not(:disabled):hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-secondary { background: var(--surface-2); border-color: var(--border); color: var(--ink); }
.btn-secondary:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--ink) 8%); }
.btn-secondary:disabled { opacity: .45; cursor: not-allowed; }

.status { margin-top: 24px; padding: 16px 18px; border-radius: var(--radius); font-size: .9rem; }
.status-busy { background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.status-busy > span { color: var(--ink); font-weight: 500; }
.status-done { background: var(--success-soft); color: var(--success); }
.status-error { background: var(--danger-soft); color: var(--danger); }
.result-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.result-actions .btn { background: var(--success); color: #fff; }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width .2s ease; }

.privacy-note { margin-top: 28px; font-size: .78rem; color: var(--ink-faint); line-height: 1.6; max-width: 60ch; }

.site-footer { border-top: 1px solid var(--border); padding: 28px clamp(16px, 4vw, 40px) calc(28px + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--ink-faint); font-size: .8rem; }
.footer-brand { margin-bottom: 7px; color: var(--ink); font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
#footer-safe { margin-top: 5px; }
#footer-made { margin-top: 8px; color: var(--accent); font-weight: 700; }
.social-links { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 0; border-radius: 13px; background: #2b2b2b; color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .12); transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease; }
.social-link svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social-tiktok svg { fill: currentColor; stroke: none; }
.social-tiktok svg, .social-facebook svg, .social-x svg { fill: currentColor; stroke: none; }
.social-link:hover, .social-link:focus-visible, .social-link:active { transform: translateY(-3px); color: #fff; box-shadow: 0 10px 22px rgba(0, 0, 0, .2); }
.social-instagram:hover, .social-instagram:focus-visible, .social-instagram:active { background: linear-gradient(135deg, #833ab4, #fd1d1d 55%, #fcb045); }
.social-tiktok:hover, .social-tiktok:focus-visible, .social-tiktok:active { background: #000; }
.social-facebook:hover, .social-facebook:focus-visible, .social-facebook:active { background: #1877f2; }
.social-x:hover, .social-x:focus-visible, .social-x:active { background: #000; }
@media (max-width: 430px) {
  .social-link { width: 56px; height: 56px; }
  .social-link svg { width: 30px; height: 30px; }
}
.legal-page { max-width: 760px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 40px) 80px; }
.legal-page h1 { margin-bottom: 8px; font-size: clamp(2rem, 5vw, 3rem); }
.legal-page h2 { margin: 30px 0 8px; font-size: 1.2rem; }
.legal-page p { line-height: 1.85; }
.legal-updated { color: var(--ink-faint); font-size: .85rem; }
.contact-list { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; }
.contact-list a { padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--accent); font-weight: 600; transition: background .18s ease, transform .18s ease; }
.contact-list a:hover { background: var(--accent-soft); transform: translateY(-2px); }
.legal-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.legal-links a { color: var(--ink-soft); font-size: .78rem; }
.legal-links a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 560px) {
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .hero { padding-top: 28px; }
}
@media (max-width: 380px) {
  .tool-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* no horizontal scroll on any device */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; }
.seo-tools{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 24px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.78rem}.seo-tools a{color:var(--ink-faint);text-decoration:none}.seo-tools a:hover{color:var(--accent)}
.open-tool{display:inline-block;padding:12px 22px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;text-decoration:none}.footer-links{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:10px;font-size:.85rem}.footer-links a{color:inherit;opacity:.8}

.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:22px;margin-top:24px}
.template-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.template-card img{width:100%;height:auto;display:block;border-bottom:1px solid var(--border)}
.template-card-body{padding:16px;display:flex;flex-direction:column;gap:8px}
.template-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.open-tool.secondary{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.tpl-guide-link{font-size:.85rem;margin-top:4px}

.templates-banner{display:flex;align-items:center;gap:16px;max-width:1080px;margin:0 auto 28px;padding:18px 22px;border-radius:var(--radius);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.templates-banner:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.1)}
.templates-banner-icon{font-size:2rem;flex:none}
.templates-banner-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.templates-banner-text strong{font-size:1.02rem}
.templates-banner-text span{font-size:.85rem;color:var(--ink-soft)}
.templates-banner-cta{flex:none;font-weight:700;color:var(--accent);white-space:nowrap}
@media (max-width:560px){.templates-banner{flex-wrap:wrap}.templates-banner-cta{margin-inline-start:auto}}

/* ===== Document Builder ===== */
.fb-wrap{max-width:1080px;margin:0 auto;padding:20px clamp(12px,4vw,32px) 60px}
.fb-back{display:inline-block;margin-bottom:14px}
.fb-toolbar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;margin-bottom:6px}
.fb-toolbar-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fb-toolbar-label{font-size:.82rem;color:var(--ink-faint)}
.fb-toolbar-export{margin-inline-start:auto}
.fb-theme-picker{display:flex;gap:6px}
.fb-theme-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0}
.fb-theme-dot.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.fb-page-of{font-size:.82rem;color:var(--ink-faint);margin-inline-start:4px}
.fb-docx-note{font-size:.78rem;color:var(--ink-faint);margin:8px 2px 18px}
.fb-stack{display:flex;flex-direction:column;align-items:center;gap:28px}
.fb-page{width:100%;max-width:794px;background:var(--fb-bg,#fff);color:var(--fb-text,#1a1a1a);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.18);position:relative;box-sizing:border-box}
.fb-page-inner{padding:48px 52px 36px;min-height:100%;box-sizing:border-box;overflow:visible;position:relative}
.fb-body{outline:none;min-height:120px;font-size:14px;line-height:1.7;white-space:pre-wrap}
.fb-body-full{margin-top:6px;position:relative}
.fb-body:empty:before,.fb-cv-name:empty:before,.fb-cv-role:empty:before,.fb-contact-val:empty:before,.fb-entry-text:empty:before{content:attr(data-placeholder);color:#9aa0a6}
.fb-page-footer{position:absolute;left:52px;right:52px;bottom:14px;font-size:10px;color:#9aa0a6;border-top:1px solid rgba(0,0,0,.08);padding-top:6px;text-align:center;pointer-events:none}
.fb-cv-head{display:flex;gap:18px;align-items:center;margin-bottom:22px;padding-bottom:18px;border-bottom:2px solid var(--fb-accent,#3454D1)}
.fb-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--fb-accent,#3454D1)}
.fb-photo-empty{background:#f1f3f5;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;color:#9aa0a6;text-align:center}
.fb-photo-empty:before{content:"+ photo"}
.fb-cv-head-text{flex:1;min-width:0}
.fb-cv-name{font-size:22px;font-weight:800;outline:none;color:var(--fb-text,#1a1a1a)}
.fb-cv-role{font-size:14px;font-weight:600;color:var(--fb-accent,#3454D1);outline:none;margin-top:2px}
.fb-cv-contact{font-size:12px;margin-top:6px;display:flex;flex-direction:column;gap:2px}
.fb-contact-row{display:flex;gap:5px}
.fb-fixed-label{font-weight:700;color:var(--fb-text-soft,#666);user-select:none}
.fb-contact-val{outline:none;color:var(--fb-text-soft,#666);min-width:30px}

/* Structured CV sections */
.fb-cv-body{margin-top:6px}
.fb-section{margin-bottom:20px}
.fb-section-title{font-weight:800;font-size:15px;color:var(--fb-accent,#3454D1);border-bottom:2px solid var(--fb-accent,#3454D1);padding-bottom:5px;margin-bottom:10px;cursor:default}
.fb-section-title-text{text-transform:uppercase;letter-spacing:.03em;user-select:none}
.fb-section-title-text[contenteditable="true"]{cursor:text;user-select:text;text-transform:none}
.fb-section-title-text:empty:before{content:attr(data-placeholder);color:#9aa0a6;text-transform:none;font-weight:600}
.fb-custom-body{min-height:36px}
.fb-entry-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.fb-entry-text{flex:1;outline:none;font-size:13.5px;line-height:1.6;white-space:pre-wrap;color:var(--fb-text,#1a1a1a);padding:2px 0}
.fb-skill-row{display:flex;gap:10px;align-items:center;margin-bottom:7px}
.fb-skill-name{flex:1;border:1px solid transparent;background:transparent;font-size:13.5px;padding:3px 4px;outline:none;color:var(--fb-text,#1a1a1a);border-bottom:1px solid #ddd}
.fb-skill-name:focus{border-bottom-color:var(--fb-accent,#3454D1)}
.fb-stars{display:flex;gap:2px;flex:none}
.fb-star{cursor:pointer;color:#d8d8d8;font-size:15px;user-select:none}
.fb-star.filled{color:#D4AF37}
.fb-entry-remove{flex:none;border:none;background:transparent;color:#c33;font-size:16px;cursor:pointer;line-height:1;padding:2px 4px}
.fb-add-entry{border:1px dashed #bbb;background:transparent;color:var(--fb-accent,#3454D1);font-size:12px;padding:5px 12px;border-radius:6px;cursor:pointer;margin-top:2px}

/* Layout variant: line (thin colored underline, colored role text) — default */
.fb-page[data-layout="line"] .fb-cv-head{border-bottom-color:var(--fb-accent)}
.fb-page[data-layout="line"] .fb-cv-role{color:var(--fb-accent)}
.fb-page[data-layout="line"] .fb-photo{border-color:var(--fb-accent)}

/* Layout variant: band (full-width colored header band) */
.fb-page[data-layout="band"] .fb-cv-head{margin:-48px -52px 22px;padding:28px 52px;background:var(--fb-accent);color:#fff;border-bottom:none;border-radius:8px 8px 0 0}
.fb-page[data-layout="band"] .fb-cv-name{color:#fff}
.fb-page[data-layout="band"] .fb-cv-role{color:#fff;opacity:.85}
.fb-page[data-layout="band"] .fb-fixed-label,.fb-page[data-layout="band"] .fb-contact-val{color:#fff;opacity:.8}
.fb-page[data-layout="band"] .fb-photo{border-color:#fff}
.fb-page[data-layout="band"] .fb-body-full::before{content:"";display:block;height:14px;background:var(--fb-accent);margin:-48px -52px 24px;border-radius:8px 8px 0 0}

/* Layout variant: frame (bold colored border framing the whole page) */
.fb-page[data-layout="frame"] .fb-cv-head{border-bottom:2px solid var(--fb-accent)}
.fb-page[data-layout="frame"] .fb-cv-role{color:var(--fb-accent)}
.fb-page[data-layout="frame"] .fb-photo{border-color:var(--fb-accent)}

@media (max-width:820px){.fb-page-inner{padding:28px 22px 30px}.fb-page-footer{left:22px;right:22px}.fb-page[data-layout="band"] .fb-cv-head{margin:-28px -22px 22px;padding:20px 22px}.fb-page[data-layout="band"] .fb-body-full::before{margin:-28px -22px 20px}}

/* ===== Decorative frames (independent of color/layout theme) ===== */
.fb-page[data-frame="formal-double"]{border:6px double var(--fb-frame-color)}
.fb-page[data-frame="formal-hairline"]{border:1px solid var(--fb-frame-color);border-radius:10px}
.fb-page[data-frame="formal-corners"]{position:relative}
.fb-page[data-frame="formal-corners"]::before,.fb-page[data-frame="formal-corners"]::after{content:"";position:absolute;width:38px;height:38px;border-color:var(--fb-frame-color);pointer-events:none}
.fb-page[data-frame="formal-corners"]::before{top:12px;left:12px;border-top:3px solid var(--fb-frame-color);border-left:3px solid var(--fb-frame-color)}
.fb-page[data-frame="formal-corners"]::after{bottom:12px;right:12px;border-bottom:3px solid var(--fb-frame-color);border-right:3px solid var(--fb-frame-color)}
.fb-page[data-frame="formal-ornate"]{border:1px solid var(--fb-frame-color);outline:1px solid var(--fb-frame-color);outline-offset:7px}
.fb-page[data-frame="formal-letterpress"]{border:1px solid var(--fb-frame-color);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.08),0 6px 24px rgba(0,0,0,.18)}

.fb-page[data-frame="modern-gradient"]{border:7px solid transparent;border-radius:20px;background:linear-gradient(var(--fb-bg,#fff),var(--fb-bg,#fff)) padding-box,linear-gradient(135deg,var(--fb-frame-color),color-mix(in srgb,var(--fb-frame-color) 25%,white)) border-box}
.fb-page[data-frame="modern-shadow"]{border:none;border-radius:22px;box-shadow:0 26px 55px rgba(0,0,0,.24)}
.fb-page[data-frame="modern-dual"]{border-top:9px solid var(--fb-frame-color);border-bottom:9px solid color-mix(in srgb,var(--fb-frame-color) 55%,#000 12%);border-left:none;border-right:none}
.fb-page[data-frame="modern-glow"]{border:2px solid var(--fb-frame-color);box-shadow:0 0 0 6px color-mix(in srgb,var(--fb-frame-color) 16%,transparent),0 20px 45px rgba(0,0,0,.18);border-radius:16px}
.fb-page[data-frame="modern-thick"]{border:12px solid var(--fb-frame-color);border-radius:26px}

.fb-page[data-frame="creative-geo"]{position:relative;overflow:hidden}
.fb-page[data-frame="creative-geo"]::before,.fb-page[data-frame="creative-geo"]::after{content:"";position:absolute;width:64px;height:64px;background:var(--fb-frame-color);opacity:.85}
.fb-page[data-frame="creative-geo"]::before{top:0;right:0;clip-path:polygon(100% 0,0 0,100% 100%)}
.fb-page[data-frame="creative-geo"]::after{bottom:0;left:0;clip-path:polygon(0 100%,100% 100%,0 0)}
.fb-page[data-frame="creative-diagonal"]{border:3px solid var(--fb-frame-color);clip-path:polygon(0 0,100% 0,100% 100%,36px 100%,0 calc(100% - 36px))}
.fb-page[data-frame="creative-gold"]{border:3px solid #B08D57;box-shadow:inset 0 0 0 6px rgba(176,141,87,.14)}
.fb-page[data-frame="creative-artdeco"]{border:10px solid;border-image:repeating-linear-gradient(45deg,var(--fb-frame-color),var(--fb-frame-color) 6px,transparent 6px,transparent 12px) 10}
.fb-page[data-frame="creative-ribbon"]{position:relative;border:1px solid var(--fb-frame-color)}
.fb-page[data-frame="creative-ribbon"]::before{content:"";position:absolute;top:18px;right:-34px;width:140px;height:26px;background:var(--fb-frame-color);transform:rotate(45deg);box-shadow:0 3px 8px rgba(0,0,0,.25)}

.fb-page[data-frame="minimal-side"]{border-inline-start:5px solid var(--fb-frame-color);border-radius:2px 8px 8px 2px}
.fb-page[data-frame="minimal-dotted"]{border:2px dotted var(--fb-frame-color)}
.fb-page[data-frame="minimal-underline"]{border:none;border-bottom:5px solid var(--fb-frame-color)}
.fb-page[data-frame="minimal-thin"]{border:1px solid var(--fb-frame-color);border-radius:0}

.fb-theme-picker{display:flex;gap:6px;flex-wrap:wrap;max-width:220px}

/* Frame selector panel */
.fb-frame-panel{display:flex;flex-wrap:wrap;gap:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px}
.fb-frame-panel[hidden]{display:none}
.fb-frame-group{display:flex;flex-direction:column;gap:6px}
.fb-frame-cat-label{font-size:.78rem;font-weight:700;color:var(--ink-faint)}
.fb-frame-row{display:flex;gap:6px;flex-wrap:wrap}
.fb-frame-swatch{width:40px;height:40px;border-radius:8px;border:2px solid var(--border);padding:0;background:var(--surface-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.fb-frame-swatch.active{border-color:var(--accent)}
.fb-frame-swatch-inner{width:26px;height:26px;background:#fff;display:block;box-sizing:border-box}
.fb-color-label{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-faint)}
.fb-color-label input[type=color]{width:26px;height:26px;border:1px solid var(--border);border-radius:6px;padding:0;cursor:pointer}
.fb-select{border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink);font-size:.82rem;padding:4px 6px}

/* Frame swatch mini previews (use site accent as generic demo color) */
[data-frame-demo="formal-double"]{border:3px double var(--accent)}
[data-frame-demo="formal-hairline"]{border:1px solid var(--accent);border-radius:5px}
[data-frame-demo="formal-corners"]{position:relative}
[data-frame-demo="formal-corners"]::before,[data-frame-demo="formal-corners"]::after{content:"";position:absolute;width:10px;height:10px}
[data-frame-demo="formal-corners"]::before{top:1px;left:1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
[data-frame-demo="formal-corners"]::after{bottom:1px;right:1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}
[data-frame-demo="formal-ornate"]{border:1px solid var(--accent);outline:1px solid var(--accent);outline-offset:3px}
[data-frame-demo="formal-letterpress"]{border:1px solid var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.15)}
[data-frame-demo="modern-gradient"]{border:3px solid transparent;border-radius:8px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--accent),#fff) border-box}
[data-frame-demo="modern-shadow"]{border-radius:8px;box-shadow:0 6px 14px rgba(0,0,0,.35)}
[data-frame-demo="modern-dual"]{border-top:4px solid var(--accent);border-bottom:4px solid color-mix(in srgb,var(--accent) 55%,#000 12%)}
[data-frame-demo="modern-glow"]{border:1px solid var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
[data-frame-demo="modern-thick"]{border:5px solid var(--accent);border-radius:8px}
[data-frame-demo="creative-geo"]{position:relative;overflow:hidden}
[data-frame-demo="creative-geo"]::before,[data-frame-demo="creative-geo"]::after{content:"";position:absolute;width:14px;height:14px;background:var(--accent)}
[data-frame-demo="creative-geo"]::before{top:0;right:0;clip-path:polygon(100% 0,0 0,100% 100%)}
[data-frame-demo="creative-geo"]::after{bottom:0;left:0;clip-path:polygon(0 100%,100% 100%,0 0)}
[data-frame-demo="creative-diagonal"]{border:2px solid var(--accent);clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px))}
[data-frame-demo="creative-gold"]{border:2px solid #B08D57;box-shadow:inset 0 0 0 3px rgba(176,141,87,.2)}
[data-frame-demo="creative-artdeco"]{border:4px solid;border-image:repeating-linear-gradient(45deg,var(--accent),var(--accent) 3px,transparent 3px,transparent 6px) 4}
[data-frame-demo="creative-ribbon"]{position:relative;border:1px solid var(--accent);overflow:hidden}
[data-frame-demo="creative-ribbon"]::before{content:"";position:absolute;top:4px;right:-14px;width:36px;height:8px;background:var(--accent);transform:rotate(45deg)}
[data-frame-demo="minimal-side"]{border-inline-start:3px solid var(--accent)}
[data-frame-demo="minimal-dotted"]{border:2px dotted var(--accent)}
[data-frame-demo="minimal-underline"]{border-bottom:3px solid var(--accent)}
[data-frame-demo="minimal-thin"]{border:1px solid var(--accent)}
[data-frame-demo="none"]{border:1px dashed var(--border)}

/* ===== Templates page category sections (CV / Reports) with icon ===== */
.tpl-category{display:flex;align-items:center;gap:24px;margin:28px 0 18px;padding:22px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface)}
.tpl-category-cv{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.tpl-icon-link{flex:none;text-decoration:none;display:block}
.tpl-icon-wrap{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:96px;height:96px;border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--border);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,background .18s ease;
}
.tpl-icon-link:hover .tpl-icon-wrap,.tpl-icon-link:focus-visible .tpl-icon-wrap{
  transform:scale(1.1) rotate(-4deg);
  box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 35%,transparent);
  background:color-mix(in srgb,var(--accent) 14%,var(--surface-2));
}
.tpl-icon-link:active .tpl-icon-wrap{transform:scale(.96) rotate(0deg)}
.tpl-icon{width:64px;height:64px;object-fit:contain;pointer-events:none;user-select:none}
.tpl-category-reports .tpl-icon-wrap{cursor:default}
.tpl-category-text{flex:1;min-width:0}
.tpl-category-text h2{margin:0 0 6px;font-size:1.15rem}
.tpl-category-text p{margin:0 0 10px;color:var(--ink-soft);font-size:.92rem;line-height:1.6}
@media (max-width:560px){.tpl-category{flex-direction:column;text-align:center;gap:14px}.tpl-icon-wrap{width:80px;height:80px}.tpl-icon{width:52px;height:52px}}
.fb-img-warn{color:#b45309;font-weight:600}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* Section title: drag handle + text + optional remove (custom sections) */
.fb-section-title{position:relative;display:flex;align-items:center;gap:8px;justify-content:flex-start}
.fb-section-title-text{flex:1;min-width:0}
.fb-drag-handle{flex:none;cursor:grab;opacity:.4;font-size:14px;letter-spacing:-2px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;padding:2px 4px}
.fb-drag-handle:hover{opacity:.9}
.fb-drag-handle:active{cursor:grabbing}
.fb-section-remove{flex:none;border:none;background:transparent;color:#c33;font-size:16px;cursor:pointer;line-height:1;padding:2px 6px;text-transform:none;letter-spacing:0;border-bottom:none}
body.fb-dragging{cursor:grabbing}
body.fb-dragging .fb-page-inner{pointer-events:none}
.fb-drag-ghost{position:fixed;top:0;left:0;z-index:9999;background:var(--ink,#1a1a1a);color:#fff;padding:6px 14px;border-radius:8px;font-size:13px;font-weight:700;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.3);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}

/* "approaching page end" hint for freeform pages */
.fb-page-end-marker{position:absolute;left:0;right:0;border-top:1px dashed #c9c9c9;text-align:center;font-size:10px;color:#aaa;padding-top:3px;pointer-events:none;user-select:none}

/* Per-page delete (freeform pages only — CV auto-pages aren't individually deletable) */
.fb-page-delete{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);background:transparent;border:1px solid #c33;color:#c33;font-size:12px;padding:4px 14px;border-radius:20px;cursor:pointer;white-space:nowrap}
.fb-page-delete:hover{background:#c33;color:#fff}

/* Book-like page: soft edge shadow suggesting paper thickness, no animation */
.fb-page-book{box-shadow:0 2px 0 #ddd,0 4px 0 #e6e6e6,0 14px 28px rgba(0,0,0,.22)!important}
[data-theme="dark"] .fb-page-book,:root:not([data-theme="light"]) .fb-page-book{}
.fb-stack{padding-bottom:6px}

.fb-local-note{font-size:.78rem;color:var(--ink-faint);margin:2px 2px 6px;display:flex;align-items:center;gap:4px}

/* ===== Unified per-tool icon (replaces the old generic folder) ===== */
.fm-tool-icon{display:flex;align-items:center;justify-content:center;width:100%;height:64px;flex:none}
.fm-tool-icon-svg{max-width:88px;height:30px;overflow:visible}
.fm-tool-icon-svg.fm-tool-icon-mono{width:44px;height:44px;padding:9px;background:rgba(255,255,255,.22);border-radius:14px;color:#fff}
.fm-folder-card:hover .fm-tool-icon-svg.fm-tool-icon-mono{background:rgba(255,255,255,.32)}

/* Honest trust badges + waitlist (no fabricated stats/testimonials) */
.trust-row{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 4px;font-size:.8rem;color:var(--ink-soft)}
.trust-row span{white-space:nowrap}
.waitlist-link{display:inline-block;margin-top:10px;font-size:.85rem;color:var(--ink-soft);text-decoration:none}
.waitlist-link strong{color:var(--accent);text-decoration:underline}
.upgrade-nudge{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:var(--radius-sm);padding:8px 12px;font-size:.82rem}
.upgrade-nudge a{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.upgrade-nudge-close{margin-inline-start:auto;background:none;border:none;font-size:16px;cursor:pointer;color:var(--ink-faint);line-height:1;padding:0 4px}

/* ---------- Extract ZIP: list of files inside the archive ---------- */
.unzip-summary { margin-top: 6px; font-weight: 600; }
.unzip-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 521px) { .unzip-list { max-height: 70vh; overflow-y: auto; } }
.unzip-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); }
.unzip-thumb { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; background: var(--surface-2); }
.unzip-thumb-ext { display: inline-flex; align-items: center; justify-content: center; font: 800 .66rem/1 Arial, sans-serif; color: var(--ink-soft); letter-spacing: .02em; }
.unzip-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.unzip-name { display: block; font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unzip-sub { font-size: .76rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unzip-actions { display: flex; gap: 6px; flex: none; }
.btn-sm { padding: 8px 14px; font-size: .8rem; min-height: 40px; justify-content: center; }
@media (max-width: 520px) {
  .unzip-item { flex-wrap: wrap; }
  .unzip-meta { flex-basis: calc(100% - 60px); }
  .unzip-actions { width: 100%; }
  .unzip-actions .btn { flex: 1; min-height: 44px; }
}

/* ZIP section on the home page (under Reports) */
.tpl-category-zip{background:linear-gradient(135deg,color-mix(in srgb,#1E88E5 9%,var(--surface)),var(--surface));border-color:color-mix(in srgb,#1E88E5 28%,var(--border))}
.tpl-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:560px){.tpl-actions{justify-content:center}.tpl-actions .open-tool{flex:1 1 100%;text-align:center}}
.tool-page-icon-img{object-fit:contain}
.result-size{align-self:center;font-size:.8rem;opacity:.85;overflow-wrap:anywhere}

/* Downloaded state: gold check + "Downloaded" label */
.dl-check{width:18px;height:18px;flex:none}
.btn.is-downloaded,.result-actions .btn.is-downloaded{background:color-mix(in srgb,#F5B301 16%,var(--surface));color:var(--ink);border:1px solid #F5B301}
.unzip-item.is-downloaded{border-color:color-mix(in srgb,#F5B301 55%,var(--border))}
/* Save-all-to-folder (desktop only — hidden by JS when unsupported) */
.unzip-folder-save{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:10px 0 4px}
.unzip-folder-save .btn:disabled{opacity:.75;cursor:progress}
.unzip-folder-hint{font-size:.78rem;color:var(--ink-soft)}

/* ---------- Interactive PDF editors (sign / edit / crop / redact / compare / scan) ---------- */
.editor-host { margin-top: 16px; }
.ed-loading { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--surface-2); border-radius: var(--radius-sm); color: var(--ink); font-size: .9rem; }
.ed-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ed-btn { padding: 10px 16px; font-size: .86rem; min-height: 44px; }
.ed-lbl { font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.ed-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ed-chip { min-height: 40px; min-width: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: .84rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.ed-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ed-chip:disabled { opacity: .35; cursor: default; }
.ed-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.ed-swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.ed-swatch.is-on { box-shadow: 0 0 0 2px var(--accent); }
.ed-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ed-row-end { justify-content: flex-end; }
.ed-hint { font-size: .8rem; color: var(--ink-faint); margin-top: 10px; line-height: 1.5; }
.ed-count { font-size: .82rem; color: var(--ink-soft); }
.ed-props, .ed-sigpad { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; box-shadow: var(--shadow); }
.ed-field { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--ink-soft); }
.ed-field textarea, .ed-input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); resize: vertical; }
.ed-size-val { min-width: 26px; text-align: center; font-weight: 700; color: var(--ink); }
.ed-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.ed-tab { flex: 1; min-height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font-weight: 600; cursor: pointer; }
.ed-tab.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ed-shake { animation: edshake .35s; }
@keyframes edshake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.ed-sigcanvas { display: block; width: 100%; background: #fff; border: 1px dashed #b9bcc6; border-radius: var(--radius-sm); touch-action: none; cursor: crosshair; }
.ed-typed-preview { min-height: 90px; margin-top: 10px; padding: 8px 12px; background: #fff; border-radius: var(--radius-sm); border: 1px dashed #b9bcc6; font-size: 44px; line-height: 1.6; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ed-upload-preview img { max-width: 100%; max-height: 140px; margin-top: 10px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px; border-radius: 6px; }
.ed-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .86rem; color: var(--ink); }
.ed-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.ed-pagenav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 8px; }
.ed-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ed-nav:disabled { opacity: .3; cursor: default; }
[dir="rtl"] .ed-nav svg, [dir="rtl"] .scan-actions svg { transform: scaleX(-1); }
.ed-pageinfo { font-weight: 700; font-size: .9rem; color: var(--ink); min-width: 60px; text-align: center; }
.ed-stage-wrap { width: 100%; overflow: hidden; display: flex; justify-content: center; }
.ed-stage { position: relative; box-shadow: 0 2px 14px rgba(0,0,0,.18); background: #fff; direction: ltr; }
.ed-canvas { display: block; }
.ed-overlay { position: absolute; inset: 0; overflow: hidden; }
.ed-item { position: absolute; touch-action: none; cursor: move; user-select: none; -webkit-user-select: none; }
.ed-item img { width: 100%; height: 100%; display: block; pointer-events: none; }
.ed-item.is-selected, .ed-item-img:hover { outline: 2px dashed var(--accent); outline-offset: 2px; }
.ed-text { white-space: pre; line-height: 1.25; pointer-events: none; }
.ed-item-white { background: #fff; outline: 1px dashed #9aa0a6; }
.ed-item-black { background: #000; }
.ed-item-crop { outline: 2px solid #3454D1; box-shadow: 0 0 0 9999px rgba(10,12,20,.5); }
.ed-h { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #3454D1; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); touch-action: none; z-index: 2; }
.ed-h::after { content: ""; position: absolute; inset: -10px; }
.ed-h-br { right: -13px; bottom: -13px; cursor: nwse-resize; }
.ed-h-tl { left: -13px; top: -13px; cursor: nwse-resize; }
.ed-h-tr { right: -13px; top: -13px; cursor: nesw-resize; }
.ed-h-bl { left: -13px; bottom: -13px; cursor: nesw-resize; }
.ed-item:not(.is-selected):not(.ed-item-black):not(.ed-item-crop) .ed-h { display: none; }
.ed-x { position: absolute; top: -14px; left: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: #C23B3B; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; z-index: 3; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.ed-x::after { content: ""; position: absolute; inset: -8px; }
.ed-item:not(.is-selected):not(.ed-item-black) .ed-x { display: none; }
/* compare */
.cmp-files { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.cmp-files .ed-chip { align-self: center; }
.cmp-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); min-width: 0; }
.cmp-name { font-size: .86rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-tag { flex: none; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.cmp-tag-old { background: var(--danger-soft); color: var(--danger); }
.cmp-tag-new { background: var(--success-soft); color: var(--success); }
.cmp-view { margin-top: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); }
.cmp-summary { color: var(--ink); font-weight: 600; margin: 0 0 8px; }
.cmp-legend { display: flex; gap: 10px; margin: 0 0 10px; font-size: .8rem; }
.cmp-text { font-size: .9rem; line-height: 1.9; max-height: 60vh; overflow-y: auto; overflow-wrap: anywhere; color: var(--ink); }
.cmp-del { background: #fde2e2; color: #9b1c1c; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.cmp-ins { background: #d9f5e3; color: #11643a; border-radius: 3px; padding: 0 2px; }
.cmp-skip { color: var(--ink-faint); font-style: italic; font-size: .8rem; }
/* scan */
.scan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.scan-card { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px; }
.scan-thumb { position: relative; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface); border-radius: 6px; }
.scan-thumb img { max-width: 100%; max-height: 100%; transition: transform .2s; }
.scan-num { position: absolute; top: 6px; inset-inline-start: 6px; z-index: 1; background: var(--accent); color: var(--accent-ink); font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.scan-actions { display: flex; justify-content: space-between; gap: 4px; margin-top: 8px; }
.scan-actions .ed-chip { padding: 4px; min-width: 36px; min-height: 36px; }
.scan-bad { outline: 2px solid var(--danger); }
@media (max-width: 430px) {
  .ed-toolbar .ed-btn { flex: 1 1 auto; justify-content: center; }
  .scan-grid { grid-template-columns: repeat(2, 1fr); }
}
.file-list[hidden] { display: none; }
/* report builder: free-placed images + text alignment */
.fb-img-layer { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 794 / 1123; pointer-events: none; z-index: 3; }
.fb-img { position: absolute; pointer-events: auto; touch-action: none; cursor: move; user-select: none; -webkit-user-select: none; }
.fb-img img { display: block; width: 100%; height: auto; pointer-events: none; }
.fb-img.is-sel { outline: 2px dashed #3454D1; outline-offset: 2px; }
.fb-img-h { position: absolute; right: -13px; bottom: -13px; width: 26px; height: 26px; border-radius: 50%; background: #3454D1; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: nwse-resize; touch-action: none; }
.fb-img-h::after { content: ""; position: absolute; inset: -10px; }
.fb-img-x { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: #C23B3B; color: #fff; font-size: 17px; line-height: 1; padding: 0; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.fb-img:not(.is-sel) .fb-img-h, .fb-img:not(.is-sel) .fb-img-x { display: none; }
.fb-align-group { display: inline-flex; align-items: center; gap: 4px; }
.fb-align-label { font-size: .82rem; color: var(--ink-soft); font-weight: 600; margin-inline-end: 4px; }
.fb-align-btn { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fb-align-btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* report builder: Word-like formatting bar */
.fb-wrap:has(.fb-fmt) .fb-toolbar { position: static; }
@media (max-width: 820px) { .fb-toolbar { position: static; } }
.fb-fmt-wrap { position: sticky; top: var(--fb-header-h, 64px); z-index: 25; margin: 6px 0 14px; }
.fb-fmt { display: flex; align-items: center; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.fb-fmt-btn { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fb-fmt-btn:hover { background: var(--surface-2); }
.fb-fmt-btn.is-on { background: var(--accent-soft, rgba(52,84,209,.14)); border-color: var(--accent); color: var(--accent); }
.fb-fmt-btn:disabled { opacity: .35; cursor: default; }
.fb-fmt-sep { flex: none; width: 1px; height: 26px; background: var(--border); margin: 0 3px; }
.fb-fmt-sel { flex: none; height: 40px; max-width: 150px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 14px; padding: 0 8px; }
.fb-ico-a { position: relative; font-weight: 700; font-size: 17px; line-height: 1; padding-bottom: 5px; }
.fb-ico-bar { position: absolute; left: -2px; right: -2px; bottom: 0; height: 4px; border-radius: 2px; }
.fb-fmt-table { margin-top: 6px; box-shadow: none; }
.fb-fmt-chip { flex: none; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fb-fmt-pop { position: absolute; z-index: 30; width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.fb-pop-title { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-bottom: 8px; }
.fb-pop-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.fb-pop-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.fb-pop-sw.is-none { background: linear-gradient(135deg, #fff 45%, #c62828 45% 55%, #fff 55%) !important; }
/* rich content inside report pages */
.fb-body h1 { font-size: 26px; line-height: 1.3; margin: .35em 0 .25em; color: var(--fb-accent, #1a1a1a); font-weight: 700; }
.fb-body h2 { font-size: 20px; line-height: 1.35; margin: .35em 0 .2em; color: var(--fb-accent, #1a1a1a); font-weight: 700; }
.fb-body h3 { font-size: 17px; line-height: 1.4; margin: .3em 0 .15em; font-weight: 700; }
.fb-body ul, .fb-body ol { margin: .2em 0; padding-inline-start: 1.6em; }
.fb-body table { border-collapse: collapse; width: 100%; margin: 6px 0; white-space: normal; }
.fb-body td, .fb-body th { border: 1px solid #b9bcc6; padding: 4px 8px; vertical-align: top; min-width: 28px; }
.fb-body hr { border: 0; border-top: 1px solid #9aa0a6; margin: 10px 0; }
/* offscreen A4 page used to measure page breaks: always desktop spacing, like the printed page */
.fb-page.fb-measure .fb-page-inner { padding: 48px 52px 36px !important; }
.fb-page.fb-measure[data-layout="band"] .fb-body-full::before { margin: -48px -52px 24px !important; }
/* report templates: the thumbnail opens the ready PDF to preview / print */
.template-thumb-link { position: relative; display: block; border-radius: 10px; overflow: hidden; flex: none; }
.template-thumb-link img { display: block; transition: transform .2s; }
.template-thumb-link:hover img { transform: scale(1.03); }
.template-thumb-badge { position: absolute; left: 6px; right: 6px; bottom: 6px; background: rgba(14, 26, 64, .82); color: #fff; font-size: 12px; font-weight: 600; text-align: center; padding: 6px 4px; border-radius: 8px; line-height: 1.3; }
/* report type chooser (pure CSS: opens with #choose-report / #download-report) */
.fm-modal { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(5, 8, 20, .6); align-items: center; justify-content: center; padding: 16px; }
.fm-modal:target { display: flex; }
.fm-modal-box { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); color: var(--ink); border-radius: 18px; padding: 22px 18px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.fm-modal-box h2 { font-size: 1.15rem; margin: 0 0 6px; padding-inline-end: 36px; }
.fm-modal-close { position: absolute; top: 10px; inset-inline-end: 10px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; text-decoration: none; color: var(--ink); background: var(--surface-2); }
.fm-choice { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 16px; border: 2px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--surface-2); }
.fm-choice:hover, .fm-choice:focus-visible { border-color: var(--accent); }
.fm-choice strong { font-size: 1.05rem; }
.fm-choice small, .fm-dl-group small { color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }
.fm-dl-group { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.fm-dl-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fm-dl-row .open-tool { flex: 1 1 auto; text-align: center; }
.template-card-body .tpl-guide-link { display: inline-block; margin-top: 6px; margin-inline-end: 12px; }
.fb-fmt[hidden], .fb-fmt-pop[hidden] { display: none !important; }
@media (max-width: 820px) { .fb-page .fb-page-inner { padding-bottom: 50px; } }

/* ===== Animated "Clear" / "Convert" buttons: letters are swallowed by the icon ===== */
.fm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fm-swallow { display: inline-flex; align-items: center; gap: 10px; position: relative; }
.fm-swallow .fm-sw-ico { position: relative; z-index: 2; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; flex: none; }
.fm-swallow .fm-sw-ico svg { transition: transform .3s; }
.fm-swallow .fm-sw-label { display: inline-flex; white-space: nowrap; }
.fm-swallow .fm-ch { display: inline-block; transition: transform .42s cubic-bezier(.55, -0.25, .75, .45) var(--d, 0ms), opacity .32s ease-in calc(var(--d, 0ms) + 80ms); will-change: transform; }
.fm-swallow .fm-ch-sp { width: .3em; }
.fm-swallow.is-swallow .fm-ch { transform: translate(var(--dx), var(--dy)) scale(.12) rotate(-30deg); opacity: 0; }
.fm-swallow.is-release .fm-ch { transition: none; animation: fmLetterPop .5s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes fmLetterPop { from { transform: translateY(10px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
/* trash can: the lid opens while swallowing, closes, then the can shakes */
.fm-del .fm-lid { transform-origin: 20px 6px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.fm-del.is-swallow:not(.is-chew) .fm-lid { transform: rotate(-32deg) translate(-1px, -2px); }
.fm-del.is-swallow:not(.is-chew) .fm-sw-ico svg { transform: scale(1.18); }
.fm-del.is-chew .fm-sw-ico { animation: fmShake .45s ease-in-out; }
@keyframes fmShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } }
/* convert icon keeps spinning while the tool works */
.fm-conv.is-busy .fm-sw-ico svg { animation: fmSpin .9s linear infinite; animation-delay: .35s; }
.fm-conv.is-busy:disabled { opacity: 1; cursor: progress; }
@keyframes fmSpin { to { transform: rotate(360deg); } }
[dir="rtl"] .fm-conv.is-busy .fm-sw-ico svg { animation-name: fmSpinR; }
@keyframes fmSpinR { to { transform: rotate(-360deg); } }

/* ===== Parachute download button ===== */
.fm-dl { position: relative; display: inline-flex; align-items: center; gap: 12px; min-width: min(100%, 300px); max-width: 100%; padding: 10px 18px 14px; padding-inline-start: 10px; border-radius: 18px; background: linear-gradient(135deg, var(--accent), #22b8e0); color: #fff; text-decoration: none; overflow: hidden; box-shadow: 0 8px 22px rgba(52, 84, 209, .28); transition: transform .15s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.fm-dl:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(52, 84, 209, .34); }
.fm-dl:active { transform: translateY(1px) scale(.99); }
.fm-dl-ring { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .9); display: inline-flex; align-items: center; justify-content: center; transition: transform .35s cubic-bezier(.5, -0.4, .6, 1.4), opacity .3s; }
.fm-dl-arrow { width: 24px; height: 24px; color: #fff; }
.fm-dl-ring .dl-check { width: 30px; height: 30px; }
.fm-dl-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fm-dl-label { font-weight: 700; font-size: 1rem; }
.fm-dl-meta { font-size: .76rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
.fm-dl-track { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); transform: scaleX(0); transform-origin: var(--fly-from, 30px) 50%; opacity: 0; }
.fm-dl-fill { position: absolute; inset: 0; border-radius: 3px; background: #F5B301; transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .fm-dl-fill { transform-origin: right center; }
.fm-dl-flyer { position: absolute; top: 0; left: 0; width: 30px; height: 34px; color: #fff; opacity: 0; pointer-events: none; transform: translate(calc(var(--fly-from, 30px) - 15px), 14px) scale(.4); }
.fm-dl-chute { width: 100%; height: 100%; }
.fm-dl.is-flying .fm-dl-ring { transform: scale(.2) rotate(90deg); opacity: 0; }
.fm-dl.is-flying .fm-dl-track { animation: fmTrackIn 1.65s ease forwards; }
.fm-dl.is-flying .fm-dl-fill { animation: fmFill 1.65s cubic-bezier(.45, .05, .35, 1) forwards; }
.fm-dl.is-flying .fm-dl-flyer { animation: fmChute 1.65s cubic-bezier(.4, 0, .3, 1) forwards; }
@keyframes fmTrackIn { 0% { transform: scaleX(0); opacity: 0; } 18% { transform: scaleX(1); opacity: 1; } 90% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes fmFill { 0%, 18% { transform: scaleX(0); } 88% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@keyframes fmChute {
  0% { opacity: 0; transform: translate(calc(var(--fly-from) - 15px), 16px) scale(.4); }
  14% { opacity: 1; transform: translate(calc(var(--fly-from) - 15px), 1px) scale(1) rotate(-6deg); }
  45% { transform: translate(calc((var(--fly-from) + var(--fly-to)) / 2 - 15px), 6px) scale(1) rotate(5deg); }
  85% { opacity: 1; transform: translate(calc(var(--fly-to) - 15px), 20px) scale(.9) rotate(-3deg); }
  100% { opacity: 0; transform: translate(calc(var(--fly-to) - 15px), 26px) scale(.7); }
}
.fm-dl.is-downloaded { background: linear-gradient(135deg, #2b3a67, #3454d1); }
.fm-dl.is-downloaded-anim .fm-dl-ring { animation: fmRingBack .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes fmRingBack { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.fm-dl.is-downloaded .fm-dl-ring { border-color: #F5B301; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (prefers-reduced-motion: reduce) {
  .fm-swallow .fm-ch, .fm-dl * { transition: none !important; animation: none !important; }
  .fm-swallow.is-swallow .fm-ch { transform: none; opacity: .35; }
}

/* ===== Home: mascot + quick tools panel ===== */
.fm-stage { --fm-m1: var(--accent); --fm-m2: #22c3e6; --s: 1; position: relative; display: flex; align-items: flex-end; gap: 14px; margin-top: 28px; }
[dir="rtl"] .fm-stage { --s: -1; }
.fm-mascot { position: relative; z-index: 2; flex: none; width: 128px; filter: drop-shadow(0 16px 18px rgba(20, 40, 120, .28)); }
.fm-m-svg { display: block; width: 100%; height: auto; overflow: visible; transform: perspective(700px) rotateY(calc(var(--s) * 10deg)); }
.fm-m-shadow { fill: rgba(10, 20, 60, .2); }
.fm-m-legs rect, .fm-m-legs ellipse { fill: #22308f; }
.fm-arm { transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.fm-arm-l { transform-origin: 30px 92px; }
.fm-arm-r { transform-origin: 110px 92px; }
.fm-arm path { fill: none; stroke: var(--fm-m1); stroke-width: 9; stroke-linecap: round; }
.fm-arm circle { fill: #fff; stroke: var(--fm-m1); stroke-width: 3; }
.fm-m-fold { fill: rgba(255, 255, 255, .5); }
.fm-eye { fill: #fff; }
.fm-eyes { transform-origin: 71px 72px; transition: transform .08s; }
.fm-pupil { transition: transform .12s ease-out; }
.fm-pupil circle { fill: #10183a; }
.fm-pupil .fm-glint { fill: #fff; }
.fm-cheek { fill: #ff8fb1; opacity: .75; }
.fm-mouth { fill: none; stroke: #10183a; stroke-width: 3.2; stroke-linecap: round; transition: d .2s; }
.fm-line { fill: rgba(255, 255, 255, .6); }
.fm-m-all { transform-origin: 70px 150px; }
.fm-stage.is-blink .fm-eyes { transform: scaleY(.1); }
.fm-stage.is-typing .fm-m-all { animation: fmNod .45s ease-in-out; }
.fm-stage.is-point .fm-mouth, .fm-stage.is-look .fm-mouth { d: path("M60 90 Q71 103 82 90"); }
@keyframes fmNod { 50% { transform: translateY(3px) rotate(calc(var(--s) * 3deg)); } }
.fm-bubble { position: absolute; bottom: calc(100% - 6px); inset-inline-start: 58%; width: max-content; max-width: 210px; padding: 8px 12px; border-radius: 14px; border-end-start-radius: 4px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); font-size: .82rem; font-weight: 600; line-height: 1.4; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.fm-stage.is-ready .fm-bubble { opacity: 1; transform: none; }
.fm-stage.is-ready.is-look .fm-bubble, .fm-stage.is-ready.is-point .fm-bubble { opacity: 0; }
.fm-panel { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 16px; box-shadow: 0 18px 40px rgba(16, 24, 58, .12); }
.fm-panel-head { font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: 12px; }
.fm-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.fm-chip { display: flex; align-items: center; gap: 8px; padding: 9px 10px; min-height: 48px; border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; color: var(--ink); text-decoration: none; font-size: .84rem; font-weight: 600; line-height: 1.25; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), border-color .2s, background .2s; }
.fm-chip:hover, .fm-chip:focus-visible { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-soft); }
.fm-chip-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--fm-m1), var(--fm-m2)); color: #fff; }
.fm-chip-ico svg { width: 18px; height: 18px; }
.fm-chip-ico img { width: 26px; height: 26px; object-fit: contain; }
.fm-chip-ico .fm-tool-icon-svg { color: #fff; }
/* entrance: the mascot hops in and pushes the panel into place */
.fm-stage.is-intro .fm-mascot { animation: fmHopIn 1.1s cubic-bezier(.3, 1.3, .5, 1) both; }
.fm-stage.is-intro .fm-panel { animation: fmPushed .9s cubic-bezier(.2, 1.2, .35, 1) .75s both; transform-origin: calc(50% - var(--s) * 50%) 100%; }
.fm-stage.is-intro .fm-arm-l, .fm-stage.is-intro .fm-arm-r { animation: fmPushArm .9s ease-in-out .55s both; }
.fm-stage.is-intro .fm-m-all { animation: fmCheer .5s ease-out 1.65s both; }
@keyframes fmHopIn {
  0% { transform: translateX(calc(var(--s) * -130%)) translateY(-30px) rotate(calc(var(--s) * -20deg)); opacity: 0; }
  35% { transform: translateX(calc(var(--s) * -50%)) translateY(-36px) rotate(calc(var(--s) * 8deg)); opacity: 1; }
  60% { transform: translateX(calc(var(--s) * -8%)) translateY(0) rotate(0); }
  72% { transform: translateY(4px) scaleY(.94); }
  100% { transform: none; }
}
@keyframes fmPushed {
  0% { transform: perspective(900px) translateX(calc(var(--s) * -40px)) rotateY(calc(var(--s) * 28deg)) scale(.86); opacity: 0; }
  60% { transform: perspective(900px) translateX(calc(var(--s) * 6px)) rotateY(calc(var(--s) * -4deg)) scale(1.01); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes fmPushArm { 0%, 100% { transform: none; } 40%, 70% { transform: rotate(calc(var(--s) * -70deg)); } }
@keyframes fmCheer { 0%, 100% { transform: none; } 45% { transform: translateY(-14px) rotate(calc(var(--s) * -4deg)); } }

/* ===== Search: round button that unfolds into a field ===== */
.fm-search { position: relative; height: 54px; width: 54px; max-width: 100%; border-radius: 999px; background: linear-gradient(135deg, var(--fm-m1, var(--accent)), var(--fm-m2, #22c3e6)); box-shadow: 0 8px 20px rgba(52, 84, 209, .3); transition: width .55s cubic-bezier(.2, .9, .25, 1.12), background .3s, box-shadow .3s; perspective: 700px; }
.fm-search[data-open="true"] { width: 100%; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); }
.fm-search.is-unfold { animation: fmUnfold .6s cubic-bezier(.2, .9, .25, 1.1); }
@keyframes fmUnfold { 0% { transform: rotateX(55deg) scaleY(.8); } 55% { transform: rotateX(-10deg); } 100% { transform: none; } }
.fm-search-toggle { position: absolute; top: 0; inset-inline-start: 0; width: 54px; height: 54px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color .3s, transform .3s; }
.fm-search[data-open="true"] .fm-search-toggle { color: var(--accent); }
.fm-search:not([data-open="true"]) .fm-search-toggle:hover { transform: scale(1.08); }
.fm-search input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding-inline-start: 54px; padding-inline-end: 50px; opacity: 0; pointer-events: none; transition: opacity .25s .15s; -webkit-appearance: none; appearance: none; }
.fm-search input::-webkit-search-cancel-button { display: none; }
.fm-search[data-open="true"] input { opacity: 1; pointer-events: auto; }
.fm-search-x { position: absolute; top: 50%; inset-inline-end: 8px; width: 38px; height: 38px; margin-top: -19px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; opacity: 0; transform: scale(.4) rotate(-90deg); pointer-events: none; transition: opacity .25s .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1) .2s; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.fm-search[data-open="true"] .fm-search-x { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 560px) {
  .fm-stage { display: block; padding-top: 70px; }
  .fm-mascot { position: absolute; top: 0; inset-inline-end: 10px; width: 96px; }
  .fm-bubble { bottom: auto; top: 18px; inset-inline-start: auto; inset-inline-end: calc(100% + 4px); max-width: 190px; border-end-start-radius: 14px; border-start-end-radius: 4px; }
  .fm-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-stage.is-intro .fm-mascot { animation-name: fmDropIn; }
  .fm-stage.is-intro .fm-panel { animation-name: fmRiseUp; transform-origin: 50% 0; }
  .fm-stage.is-intro .fm-arm-l, .fm-stage.is-intro .fm-arm-r { animation-name: fmPressArm; }
}
@keyframes fmDropIn { 0% { transform: translateY(-140px) rotate(calc(var(--s) * 18deg)); opacity: 0; } 45% { transform: translateY(8px) scaleY(.9); opacity: 1; } 65% { transform: translateY(-10px); } 100% { transform: none; } }
@keyframes fmRiseUp { 0% { transform: perspective(900px) translateY(40px) rotateX(-24deg) scale(.94); opacity: 0; } 60% { transform: perspective(900px) translateY(-4px) rotateX(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes fmPressArm { 0%, 100% { transform: none; } 40%, 70% { transform: rotate(calc(var(--s) * 40deg)); } }
@media (prefers-reduced-motion: reduce) {
  .fm-stage *, .fm-search { animation: none !important; transition: none !important; }
}
#fm-search #search-input { margin: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; width: 100%; height: 100%; max-width: none; padding-top: 0; padding-bottom: 0; padding-inline-start: 54px; padding-inline-end: 50px; font-size: 16px; }
#fm-search #search-input:focus { border: 0; outline: none; }

/* ===== Contact dock: keyboard keys that flip to show our social links ===== */
.fm-dock { --key-edge: #c3c7d1; display: flex; justify-content: center; gap: 12px; padding: 34px 0 10px; margin-bottom: 14px; perspective: 900px; direction: ltr; }
[dir="rtl"] .fm-dock { flex-direction: row-reverse; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fm-dock { --key-edge: #06070b; } }
:root[data-theme="dark"] .fm-dock { --key-edge: #06070b; }
.fm-key { position: relative; display: block; width: 52px; height: 52px; text-decoration: none; transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.fm-key:active { transform: translateY(3px); }
.fm-key-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.45, .45, 1); }
.fm-key:hover .fm-key-in, .fm-key:focus-visible .fm-key-in, .fm-key.is-flip .fm-key-in { transform: rotateY(180deg); }
.fm-key-face { position: absolute; inset: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fm-key-front { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border); color: var(--ink); font: 700 21px/1 "Outfit", "Segoe UI", "Noto Sans Arabic", "PingFang SC", system-ui, sans-serif; box-shadow: 0 5px 0 var(--key-edge), 0 10px 16px rgba(0, 0, 0, .16), inset 0 -4px 0 rgba(0, 0, 0, .05), inset 0 2px 0 rgba(255, 255, 255, .6); }
.fm-key-back { transform: rotateY(180deg); color: #fff; background: var(--brand, var(--accent)); box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 10px 16px rgba(0, 0, 0, .2); }
.fm-key-back svg { width: 24px; height: 24px; }
.fm-key-ig { --brand: radial-gradient(circle at 30% 110%, #fdc468 0%, #f77737 25%, #e1306c 55%, #833ab4 90%); }
.fm-key-tt { --brand: linear-gradient(135deg, #25f4ee -20%, #111 35%, #111 65%, #fe2c55 120%); }
.fm-key-fb { --brand: #1877f2; }
.fm-key-x { --brand: #111; }
.fm-key-mail { --brand: linear-gradient(135deg, var(--accent), #22c3e6); }
.fm-key-tip { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px) scale(.9); padding: 5px 10px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.fm-key-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.fm-key:hover .fm-key-tip, .fm-key:focus-visible .fm-key-tip, .fm-key.is-flip .fm-key-tip { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 420px) { .fm-dock { gap: 9px; } .fm-key { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .fm-key-in, .fm-key-tip { transition: none; } }
/* expanded guides */
.guide-page h3 { font-size: 1rem; margin: 18px 0 6px; }
.guide-problems { margin: 8px 0 0; }
.guide-problems dt { font-weight: 700; margin-top: 12px; color: var(--ink); }
.guide-problems dd { margin: 4px 0 0; padding-inline-start: 14px; border-inline-start: 3px solid var(--accent-soft, rgba(52,84,209,.2)); color: var(--ink-soft); }
/* quick panel: search results + bubble that never covers the search bar */
.fm-quick[hidden], .fm-results[hidden] { display: none; }
.fm-results { margin-top: 12px; }
.fm-results-count { font-size: .8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }
.fm-results-none { font-size: .86rem; color: var(--ink-soft); padding: 4px 2px; }
.fm-quick-results { margin-top: 6px; animation: fmResultsIn .3s ease; }
@keyframes fmResultsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 561px) {
  .fm-bubble { inset-inline-start: 0; width: 100%; max-width: none; text-align: center; bottom: calc(100% + 4px); border-end-start-radius: 14px; }
  .fm-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--surface); }
}

/* ===== Landing: lightning + falling tool cards ===== */
.fm-sky { position: fixed; left: 0; right: 0; top: 0; height: 240px; z-index: 60; pointer-events: none; overflow: hidden; }
.fm-flash { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% -20%, rgba(190, 215, 255, .75), rgba(120, 160, 255, .18) 55%, transparent 80%); opacity: 0; animation: fmFlash .75s ease-out forwards; }
@keyframes fmFlash { 0% { opacity: 0; } 8% { opacity: .75; } 22% { opacity: .12; } 34% { opacity: .5; } 100% { opacity: 0; } }
.fm-bolt { position: absolute; top: -4px; width: 70px; height: 170px; opacity: 0; animation: fmBolt .7s ease-out forwards; }
.fm-bolt svg { width: 100%; height: 100%; overflow: visible; }
.fm-bolt path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: fmBoltDraw .18s ease-out forwards; }
.fm-bolt-glow { stroke: rgba(150, 190, 255, .55); stroke-width: 9; filter: blur(3px); }
.fm-bolt-core { stroke: #fff; stroke-width: 3; }
.fm-bolt-fork { stroke-width: 2; animation-delay: .06s !important; }
@keyframes fmBolt { 0% { opacity: 0; } 6% { opacity: 1; } 24% { opacity: .15; } 36% { opacity: .9; } 100% { opacity: 0; } }
@keyframes fmBoltDraw { to { stroke-dashoffset: 0; } }
.fm-pre { opacity: 0; }
.fm-fall { animation: fmRainDrop .85s cubic-bezier(.33, .8, .4, 1) var(--fall-delay, 0ms) both; }
@keyframes fmRainDrop {
  0% { opacity: 0; transform: translateY(-150px) rotate(var(--fall-rot, 0deg)) scaleY(1.08); }
  45% { opacity: 1; }
  58% { transform: translateY(6px) rotate(0) scaleY(.94); }
  74% { transform: translateY(-7px) scaleY(1.02); }
  88% { transform: translateY(2px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .fm-sky { display: none; } .fm-pre { opacity: 1; } .fm-fall { animation: none; } }
/* the field keeps its full width while the bar unfolds, so typing right away works (RTL too) */
.fm-panel { container-type: inline-size; }
.fm-search { overflow: hidden; }
#fm-search #search-input { position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: auto; width: 100%; width: 100cqw; }
/* lightning colours per theme: blue-violet on light pages, white on dark */
.fm-sky { --bolt: #4f6bff; --bolt-glow: rgba(79, 107, 255, .45); --flash: rgba(96, 125, 255, .28); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fm-sky { --bolt: #fff; --bolt-glow: rgba(150, 190, 255, .6); --flash: rgba(190, 215, 255, .6); } }
:root[data-theme="dark"] .fm-sky { --bolt: #fff; --bolt-glow: rgba(150, 190, 255, .6); --flash: rgba(190, 215, 255, .6); }
.fm-flash { background: radial-gradient(120% 90% at 50% -20%, var(--flash), transparent 75%); }
.fm-bolt { width: 90px; height: 220px; }
.fm-bolt-core { stroke: var(--bolt); stroke-width: 3.5; }
.fm-bolt-glow { stroke: var(--bolt-glow); stroke-width: 12; }
.fm-key-contact { --brand: linear-gradient(135deg, #10b981, #0ea5e9); }
.fm-key-guides { --brand: linear-gradient(135deg, #f59e0b, #ef4444); }
@media (max-width: 440px) { .fm-dock { gap: 6px; } .fm-key { width: 42px; height: 42px; } .fm-key-front { font-size: 18px; } .fm-key-back svg { width: 21px; height: 21px; } }
@media (max-width: 350px) { .fm-key { width: 38px; height: 38px; } }
/* assistant answer card */
.fm-assist { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--fm-m1, var(--accent)), var(--fm-m2, #22c3e6)); box-shadow: 0 10px 24px rgba(52, 84, 209, .28); animation: fmResultsIn .3s ease; }
.fm-assist:hover, .fm-assist:focus-visible { transform: translateY(-1px); }
.fm-assist-face { flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.fm-assist-face svg { width: 22px; height: 22px; color: #fff; }
.fm-assist-face .fm-tool-icon-svg { color: #fff; }
.fm-assist-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.fm-assist-text small { font-size: .74rem; opacity: .9; }
.fm-assist-text strong { font-size: .98rem; }
.fm-assist-go { flex: none; font-size: .8rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.fm-stage.is-ready.is-say .fm-bubble, .fm-stage.is-say .fm-bubble { opacity: 1; transform: none; }
.fm-file-note { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(245, 179, 1, .12); border: 1px solid rgba(245, 179, 1, .45); color: var(--ink); font-size: .86rem; line-height: 1.6; }
.fm-file-note p { margin: 0; }
.fm-file-note[hidden] { display: none; }
.status-detail { display: block; margin-top: 6px; font-size: .74rem; opacity: .7; word-break: break-word; }