/* ==========================================================================
   Folia — design tokens
   ========================================================================== */
:root{
  --ink: #14182B;
  --ink-soft: #4A5068;
  --ink-faint: #7B8098;
  --paper: #F1F2ED;
  --paper-raised: #FFFFFF;
  --brand: #2E3AF0;
  --brand-deep: #1B23A6;
  --brand-wash: #E9EAFD;
  --amber: #E8A33D;
  --amber-wash: #FBEBD3;
  --success: #1F9D6C;
  --success-wash: #DFF3EA;
  --line: #DEE1DA;
  --line-strong: #C7CBC1;
  --shadow-sm: 0 1px 2px rgba(20,24,43,0.06);
  --shadow-md: 0 6px 20px rgba(20,24,43,0.08);
  --shadow-lg: 0 18px 48px rgba(20,24,43,0.14);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --container: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;color:var(--ink-soft);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.mono{font-family:var(--font-mono);}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ==========================================================================
   Buttons & badges
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--brand-deep);box-shadow:var(--shadow-md);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-raised);}
.btn-amber{background:var(--amber);color:var(--ink);}
.btn-amber:hover{filter:brightness(0.95);}
.btn-lg{padding:16px 30px;font-size:16.5px;}
.btn-sm{padding:8px 16px;font-size:13.5px;border-radius:999px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none;}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;background:var(--brand-wash);color:var(--brand-deep);
}
.badge-amber{background:var(--amber-wash);color:#8A5A10;}
.badge-success{background:var(--success-wash);color:#136A46;}

/* ==========================================================================
   Nav
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(241,242,237,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--container);margin:0 auto;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.brand-mark{width:30px;height:30px;flex:none;}
.brand-word{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-0.01em;}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;}
.nav-links a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-soft);}
.nav-links a:hover{color:var(--ink);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.nav-dropdown{position:relative;}
.nav-dropdown>button{
  background:none;border:none;font:inherit;font-size:14.5px;font-weight:500;color:var(--ink-soft);
  display:flex;align-items:center;gap:5px;cursor:pointer;padding:6px 0;
}
.nav-dropdown>button:hover{color:var(--ink);}
.nav-dropdown-panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  width:560px;max-width:80vw;background:var(--paper-raised);border:1px solid var(--line);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:18px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;translate:0 6px;transition:opacity .15s ease, translate .15s ease;
}
.nav-dropdown:hover .nav-dropdown-panel,.nav-dropdown:focus-within .nav-dropdown-panel{opacity:1;visibility:visible;translate:0 0;}
.nav-dropdown-panel a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;
  font-size:13.5px;color:var(--ink-soft);font-weight:500;
}
.nav-dropdown-panel a:hover{background:var(--paper);color:var(--ink);}
.nav-dropdown-panel svg{flex:none;color:var(--brand);}
.nav-burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;padding:8px;cursor:pointer;}
.mobile-panel{display:none;}

@media (max-width:880px){
  .nav-links,.nav-dropdown-panel{display:none;}
  .nav-burger{display:inline-flex;}
  .nav-actions .btn-ghost{display:none;}
  .mobile-panel.open{
    display:block;background:var(--paper-raised);border-top:1px solid var(--line);padding:12px 24px 22px;
  }
  .mobile-panel a{display:block;padding:11px 0;text-decoration:none;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line);font-size:15px;}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{padding:76px 0 60px;position:relative;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center;}
  .hero-cta-row,.hero-trust{justify-content:center;}
  .stack-art{max-width:420px;margin:0 auto;}
}
@media (max-width:480px){
  .stack-art{height:340px;transform:scale(0.85);transform-origin:top center;}
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;
  color:var(--brand-deep);background:var(--brand-wash);padding:6px 12px;border-radius:999px;margin-bottom:18px;
}
.hero h1{font-size:clamp(34px,4.6vw,58px);}
.hero .lede{font-size:18px;max-width:52ch;margin-bottom:28px;}
.hero-cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:22px;}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--ink-faint);}
.hero-trust span{display:flex;align-items:center;gap:6px;}
.hero-trust svg{color:var(--success);flex:none;}

.stack-art{position:relative;height:420px;}
.page-card{
  position:absolute;background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-md);
}
.page-card::after{
  content:"";position:absolute;top:0;right:0;width:26px;height:26px;
  background:linear-gradient(135deg, transparent 50%, var(--paper) 50.5%);
  border-bottom-left-radius:4px;box-shadow:-2px 2px 4px rgba(20,24,43,.08) inset;
}
.page-card.c1{width:280px;height:360px;left:10px;top:30px;transform:rotate(-7deg);}
.page-card.c2{width:280px;height:360px;left:60px;top:10px;transform:rotate(3deg);}
.page-card.c3{width:280px;height:360px;left:110px;top:34px;transform:rotate(-1deg);z-index:2;}

/* PDF content inside page cards */
.pdf-content{padding:16px 20px;height:100%;position:relative;overflow:hidden;}
.pdf-header-bar{height:6px;width:40%;border-radius:3px;background:var(--brand);opacity:.45;margin-bottom:16px;}
.pdf-title-line{height:8px;border-radius:4px;background:var(--text);opacity:.2;margin-bottom:12px;}
.pdf-subtitle-line{height:7px;border-radius:3px;background:var(--brand);opacity:.22;margin-bottom:10px;}
.pdf-text-line{height:5px;border-radius:3px;background:var(--line);margin-bottom:8px;}
.pdf-spacer{height:10px;}
.pdf-page-num{
  position:absolute;bottom:12px;right:16px;
  font-family:var(--font-mono);font-size:9px;color:var(--text-muted);opacity:.5;
}

/* Width utility classes for text lines */
.w40{width:40%;}.w50{width:50%;}.w55{width:55%;}.w60{width:60%;}.w70{width:70%;}
.w75{width:75%;}.w80{width:80%;}.w85{width:85%;}.w88{width:88%;}.w90{width:90%;}
.w92{width:92%;}.w95{width:95%;}

/* Bar chart in card c1 */
.pdf-chart{
  display:flex;align-items:flex-end;gap:8px;
  height:80px;padding:8px 0;margin-top:4px;
  border-bottom:1.5px solid var(--line);
}
.chart-bar{
  flex:1;border-radius:3px 3px 0 0;
  background:var(--brand);opacity:.28;
  transition:opacity .3s;
}
.page-card.c1:hover .chart-bar{opacity:.45;}
.chart-bar.b1{height:45%;}
.chart-bar.b2{height:72%;}
.chart-bar.b3{height:58%;}
.chart-bar.b4{height:90%;}
.chart-bar.b5{height:65%;}

/* Data table in card c3 */
.pdf-table{
  border:1.5px solid var(--line);border-radius:6px;overflow:hidden;
  margin-top:4px;
}
.table-row{display:flex;}
.table-row:not(:last-child){border-bottom:1px solid var(--line);}
.table-cell{
  flex:1;height:14px;padding:4px 6px;
  border-right:1px solid var(--line);
  position:relative;
}
.table-cell:last-child{border-right:none;}
.table-cell::after{
  content:"";display:block;height:4px;border-radius:2px;
  background:var(--text);opacity:.12;width:70%;margin-top:2px;
}
.header-row{background:var(--brand-wash);}
.header-row .table-cell::after{opacity:.22;background:var(--brand);}
.floating-chip{
  position:absolute;background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-md);padding:10px 14px;display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;z-index:3;
}
.chip-compress{right:0;top:24px;color:var(--success);animation:float 6s ease-in-out infinite;}
.chip-merge{right:30px;bottom:44px;color:var(--brand);animation:float 7s ease-in-out infinite 1s;}
.chip-pages{left:0;bottom:6px;color:#8A5A10;animation:float 5.5s ease-in-out infinite .5s;}
@keyframes float{0%,100%{translate:0 0;}50%{translate:0 -8px;}}

/* ==========================================================================
   Sections
   ========================================================================== */
section{padding:76px 0;}
.section-head{max-width:640px;margin:0 auto 44px;text-align:center;}
.section-head h2{font-size:clamp(26px,3.4vw,38px);}
.section-head p{font-size:16.5px;}
.eyebrow-center{display:flex;justify-content:center;}

/* Tool grid */
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:980px){.tool-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.tool-grid{grid-template-columns:1fr;}}
.tool-card{
  position:relative;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:24px 22px 22px;text-decoration:none;color:var(--ink);transition:box-shadow .18s ease, translate .18s ease, border-color .18s ease;
  overflow:hidden;
}
.tool-card::before{
  content:"";position:absolute;top:0;right:0;width:0;height:0;
  border-style:solid;border-width:0 26px 26px 0;border-color:transparent var(--paper) transparent transparent;
  transition:border-width .18s ease;
}
.tool-card:hover{box-shadow:var(--shadow-lg);translate:0 -3px;border-color:var(--line-strong);}
.tool-card:hover::before{border-width:0 34px 34px 0;}
.tool-icon{
  width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-wash);color:var(--brand-deep);margin-bottom:16px;
}
.tool-card h3{font-size:17px;margin-bottom:6px;}
.tool-card p{font-size:13.8px;margin:0;color:var(--ink-faint);}
.tool-card .tag{position:absolute;top:16px;right:34px;}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:step;}
@media (max-width:820px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding-left:2px;}
.step-num{
  font-family:var(--font-mono);font-size:13px;color:var(--brand);border:1.5px solid var(--brand);
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-weight:700;
}
.step h3{font-size:18px;}
.step p{font-size:14.5px;}

/* Feature band */
.feature-band{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:56px;}
.feature-band .section-head{color:#fff;}
.feature-band .section-head h2{color:#fff;}
.feature-band .section-head p{color:#B7BAD1;}
.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
@media (max-width:820px){.feature-list{grid-template-columns:1fr;}.feature-band{padding:36px 24px;}}
.feature-item svg{color:var(--amber);margin-bottom:14px;}
.feature-item h4{color:#fff;font-size:16.5px;margin-bottom:6px;}
.feature-item p{color:#9FA3BE;font-size:14px;margin:0;}

/* FAQ */
.faq{max-width:760px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-q{
  width:100%;text-align:left;background:none;border:none;font:inherit;font-family:var(--font-display);
  font-size:17px;font-weight:600;padding:22px 6px;display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;color:var(--ink);gap:16px;
}
.faq-q svg{flex:none;transition:rotate .2s ease;color:var(--ink-faint);}
.faq-item[open] .faq-q svg{rotate:45deg;}
.faq-a{padding:0 6px 22px;font-size:15px;color:var(--ink-soft);margin:0;}

/* Related tools links */
.related{display:flex;flex-wrap:wrap;gap:10px;}
.related a{
  text-decoration:none;font-size:13.5px;font-weight:600;color:var(--brand-deep);background:var(--brand-wash);
  padding:8px 14px;border-radius:999px;
}
.related a:hover{background:var(--brand);color:#fff;}

/* CTA band */
.cta-band{
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-radius:var(--radius-lg);padding:56px;text-align:center;color:#fff;
}
.cta-band h2{color:#fff;}
.cta-band p{color:#D6D8FB;max-width:52ch;margin:0 auto 26px;}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{border-top:1px solid var(--line);padding:56px 0 28px;margin-top:40px;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;margin-bottom:40px;}
@media (max-width:880px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
.footer-grid h5{font-family:var(--font-display);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px;}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-grid a{text-decoration:none;font-size:14px;color:var(--ink-soft);}
.footer-grid a:hover{color:var(--brand);}
.footer-about p{font-size:13.5px;color:var(--ink-faint);max-width:32ch;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-faint);flex-wrap:wrap;gap:10px;}
.footer-bottom .socials{display:flex;gap:14px;}
.footer-bottom .socials a{color:var(--ink-faint);}
.footer-bottom .socials a:hover{color:var(--brand);}

/* ==========================================================================
   Tool page layout (upload widget + workspace)
   ========================================================================== */
.tool-hero{padding:52px 0 20px;}
.tool-hero .container{max-width:920px;text-align:center;}
.tool-hero .crumbs{font-size:13px;color:var(--ink-faint);margin-bottom:16px;}
.tool-hero .crumbs a{text-decoration:none;color:var(--ink-faint);}
.tool-hero .crumbs a:hover{color:var(--brand);}
.tool-hero h1{font-size:clamp(28px,4vw,42px);}
.tool-hero p.lede{max-width:60ch;margin:0 auto 6px;font-size:16.5px;}

.workspace{max-width:920px;margin:0 auto;padding-bottom:20px;}
.dropzone{
  border:2px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--paper-raised);
  padding:56px 28px;text-align:center;cursor:pointer;transition:border-color .15s ease, background .15s ease;
}
.dropzone.dragover{border-color:var(--brand);background:var(--brand-wash);}
.dropzone .dz-icon{
  width:60px;height:60px;border-radius:16px;background:var(--brand-wash);color:var(--brand-deep);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.dropzone h3{font-size:19px;margin-bottom:6px;}
.dropzone p{font-size:14px;margin-bottom:18px;}
.dz-formats{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);}
input[type="file"]{display:none;}

.workbench{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);overflow:hidden;
}
.wb-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 22px;border-bottom:1px solid var(--line);background:var(--paper);
}
.wb-file{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;}
.wb-file svg{color:var(--brand);flex:none;}
.wb-file .fname{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wb-file .fsize{color:var(--ink-faint);font-family:var(--font-mono);font-weight:400;font-size:12px;}
.wb-actions{display:flex;gap:10px;}

.wb-body{padding:26px;}
.field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px;}
@media (max-width:600px){.field-row{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;font-weight:600;color:var(--ink-soft);}
.field .hint{font-size:12px;color:var(--ink-faint);font-weight:400;}
.field select,.field input[type="text"],.field input[type="number"]{
  font:inherit;font-size:14px;padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:10px;
  background:#fff;color:var(--ink);
}
.field select:focus,.field input:focus{border-color:var(--brand);}
.radio-group{display:flex;gap:10px;flex-wrap:wrap;}
.radio-pill{
  border:1.5px solid var(--line-strong);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;
  cursor:pointer;background:#fff;user-select:none;
}
.radio-pill input{position:absolute;opacity:0;pointer-events:none;}
.radio-pill.active{border-color:var(--brand);background:var(--brand-wash);color:var(--brand-deep);}

.slider-row{display:flex;align-items:center;gap:14px;}
input[type="range"]{flex:1;accent-color:var(--brand);}
.size-readout{font-family:var(--font-mono);font-size:14px;font-weight:700;min-width:80px;text-align:right;}

/* Page thumbnail grid (organize/split/reorder) */
.thumb-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;
  max-height:560px;overflow-y:auto;padding:4px 2px;
}
.thumb{
  position:relative;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  cursor:grab;transition:box-shadow .15s ease, border-color .15s ease, opacity .15s ease;
}
.thumb.dragging{opacity:.4;}
.thumb.excluded{opacity:.35;}
.thumb.excluded img{filter:grayscale(1);}
.thumb:hover{box-shadow:var(--shadow-md);}
.thumb img{width:100%;display:block;background:#f4f4f4;}
.thumb .thumb-num{
  position:absolute;bottom:6px;left:6px;background:rgba(20,24,43,.78);color:#fff;font-family:var(--font-mono);
  font-size:11px;padding:2px 7px;border-radius:999px;
}
.thumb .thumb-actions{
  position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s ease;
}
.thumb:hover .thumb-actions{opacity:1;}
.thumb .thumb-actions button{
  width:24px;height:24px;border-radius:7px;border:none;background:rgba(255,255,255,.92);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);
}
.thumb .thumb-actions button:hover{background:#fff;}

/* Edit canvas */
.edit-stage{position:relative;border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:640px;background:#e9eae4;padding:20px;text-align:center;}
.edit-page-wrap{position:relative;display:inline-block;margin:0 auto;}
.edit-page-wrap canvas{display:block;box-shadow:var(--shadow-md);}
.text-box{
  position:absolute;min-width:40px;min-height:1.2em;padding:2px 4px;border:1.5px dashed transparent;
  cursor:move;white-space:pre-wrap;outline:none;
}
.text-box:hover,.text-box:focus{border-color:var(--brand);}
.page-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;font-size:13.5px;}
.page-pager button{background:none;border:1.5px solid var(--line-strong);border-radius:8px;padding:6px 10px;cursor:pointer;}

/* Pre-built text-block overlays for the Edit tool — invisible until touched */
.pdf-tb-patch{position:absolute;background:#fff;pointer-events:none;z-index:5;}
.pdf-tb-wrap{position:absolute;z-index:10;border-radius:2px;}
.tool-select .pdf-tb-wrap:hover{outline:1.5px dashed var(--brand);background:rgba(46,58,240,0.06);}
.pdf-tb-wrap.pdf-tb-active{outline:2px solid var(--brand);}
.pdf-tb-input{
  display:block;width:100%;height:100%;min-width:inherit;min-height:inherit;
  border:none;outline:none;resize:none;padding:1px 2px;margin:0;line-height:1.2;
  white-space:pre-wrap;overflow:hidden;background:transparent;font:inherit;
}
.pdf-tb-del{
  position:absolute;top:-11px;right:-11px;width:20px;height:20px;border-radius:50%;
  background:var(--ink);color:#fff;border:none;display:none;align-items:center;justify-content:center;
  cursor:pointer;padding:0;z-index:15;
}
.tool-select .pdf-tb-wrap:hover .pdf-tb-del,.pdf-tb-wrap.pdf-tb-active .pdf-tb-del{display:flex;}

.pdf-format-bar{
  position:absolute;z-index:30;display:none;align-items:center;gap:6px;
  background:var(--ink);color:#fff;border-radius:10px;padding:6px 8px;box-shadow:var(--shadow-lg);
  font-family:var(--font-body);white-space:nowrap;
}
.pdf-format-bar select.fb-family{
  font-size:12px;background:#232742;color:#fff;border:1px solid #3a3f66;border-radius:6px;padding:4px 6px;max-width:150px;
}
.pdf-format-bar input.fb-size{
  width:44px;font-size:12px;background:#232742;color:#fff;border:1px solid #3a3f66;border-radius:6px;padding:4px 4px;text-align:center;
}
.pdf-format-bar .fb-bold,.pdf-format-bar .fb-italic{
  width:26px;height:26px;border-radius:6px;border:1px solid #3a3f66;background:#232742;color:#cdd0e6;cursor:pointer;font-size:13px;
}
.pdf-format-bar .fb-bold{font-weight:700;}
.pdf-format-bar .fb-italic{font-style:italic;}
.pdf-format-bar .fb-bold.on,.pdf-format-bar .fb-italic.on{background:var(--brand);color:#fff;border-color:var(--brand);}
.pdf-format-bar .fb-swatches{display:flex;gap:4px;}
.pdf-format-bar .fb-swatch{
  width:16px;height:16px;border-radius:50%;border:1.5px solid #3a3f66;cursor:pointer;padding:0;
}
.pdf-format-bar .fb-swatch.on{outline:2px solid #fff;outline-offset:1px;}
.pdf-format-bar input.fb-color{width:22px;height:22px;padding:0;border:none;border-radius:6px;cursor:pointer;background:none;}
.pdf-format-bar .fb-delete{
  width:26px;height:26px;border-radius:6px;border:none;background:transparent;color:#f3a0a0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.pdf-format-bar .fb-delete:hover{background:rgba(248,113,113,0.15);}

/* Progress / result */
.progress-wrap{display:none;padding:40px 26px;text-align:center;}
.progress-wrap.active{display:block;}
.spinner{
  width:46px;height:46px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--brand);
  margin:0 auto 18px;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.progress-msg{font-size:14.5px;color:var(--ink-soft);font-family:var(--font-mono);}

.result-wrap{display:none;padding:44px 26px;text-align:center;}
.result-wrap.active{display:block;}
.result-icon{
  width:64px;height:64px;border-radius:50%;background:var(--success-wash);color:var(--success);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.result-wrap h3{font-size:22px;margin-bottom:6px;}
.result-stats{display:flex;justify-content:center;gap:24px;margin:18px 0 26px;flex-wrap:wrap;}
.result-stat{font-family:var(--font-mono);font-size:13px;color:var(--ink-faint);}
.result-stat b{display:block;font-size:19px;color:var(--ink);font-family:var(--font-display);}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.notice{
  display:flex;gap:10px;align-items:flex-start;background:var(--amber-wash);border:1px solid #EED9AE;
  border-radius:10px;padding:12px 14px;font-size:13.5px;color:#7A4E0F;margin-bottom:18px;
}
.notice svg{flex:none;margin-top:1px;}
.notice.info{background:var(--brand-wash);border-color:#C7CBF9;color:var(--brand-deep);}

/* Privacy strip */
.privacy-strip{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font-size:13px;color:var(--ink-faint);}
.privacy-strip svg{color:var(--success);}

/* Content article (about/how-to copy on tool pages) */
.tool-copy{max-width:760px;margin:0 auto;}
.tool-copy h2{font-size:24px;margin-top:0;}
.tool-copy ul{color:var(--ink-soft);padding-left:20px;}
.tool-copy li{margin-bottom:8px;}

/* Utility */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ==========================================================================
   Professional PDF Editor — Enhanced Styles
   ========================================================================== */

/* Workspace layout: sidebar + stage */
.edit-pro-workspace{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#e9eae4;}

/* Sidebar */
.edit-pro-sidebar{
  display:flex;flex-direction:column;gap:4px;padding:12px 8px;
  background:var(--paper-raised);border-right:1px solid var(--line);
  align-items:center;flex-shrink:0;width:52px;
}
.edit-pro-sidebar hr{width:70%;border:none;border-top:1px solid var(--line);margin:6px 0;}

.edit-tool-btn{
  width:36px;height:36px;border-radius:8px;border:1.5px solid transparent;
  background:transparent;color:var(--ink-soft);display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:all .15s ease;padding:0;
  position:relative;
}
.edit-tool-btn:hover{background:var(--brand-wash);color:var(--brand-deep);border-color:var(--brand-wash);}
.edit-tool-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:var(--shadow-sm);}
.edit-tool-btn svg{width:18px;height:18px;}
.edit-tool-btn .tool-tip{
  display:none;position:absolute;left:46px;top:50%;transform:translateY(-50%);
  background:var(--ink);color:#fff;font-size:11px;white-space:nowrap;
  padding:4px 8px;border-radius:6px;pointer-events:none;z-index:60;
  font-family:var(--font-body);
}
.edit-tool-btn:hover .tool-tip{display:block;}

/* Pro stage — scrollable */
.edit-pro-stage{
  flex:1;position:relative;overflow:auto;max-height:75vh;
  padding:20px;text-align:center;min-height:400px;
}

/* Page pager with go-to */
.page-pager-pro{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:14px;font-size:13.5px;flex-wrap:wrap;
}
.page-pager-pro button{
  background:none;border:1.5px solid var(--line-strong);border-radius:8px;
  padding:6px 12px;cursor:pointer;font-size:13px;transition:all .15s ease;
}
.page-pager-pro button:hover{border-color:var(--brand);color:var(--brand);}
.page-pager-pro button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
.page-goto-wrap{display:flex;align-items:center;gap:4px;}
.page-goto-input{
  width:52px;font-size:13px;font-family:var(--font-mono);text-align:center;
  padding:5px 4px;border:1.5px solid var(--line-strong);border-radius:8px;
  background:#fff;color:var(--ink);
}
.page-goto-input:focus{border-color:var(--brand);outline:none;}

/* Shape overlays */
.pdf-shape-overlay{position:absolute;z-index:8;cursor:move;box-sizing:border-box;}
.tool-select .pdf-shape-overlay:hover,.pdf-shape-overlay.selected{outline:2px dashed var(--brand);outline-offset:2px;}
.pdf-shape-overlay .pdf-tb-del,
.pdf-sig-overlay .pdf-tb-del,
.pdf-img-overlay .pdf-tb-del{
  position:absolute;top:-11px;right:-11px;width:20px;height:20px;border-radius:50%;
  background:var(--ink);color:#fff;border:none;display:none;align-items:center;
  justify-content:center;cursor:pointer;padding:0;z-index:15;
}
.tool-select .pdf-shape-overlay:hover .pdf-tb-del,.pdf-shape-overlay.selected .pdf-tb-del,
.tool-select .pdf-sig-overlay:hover .pdf-tb-del,.pdf-sig-overlay.selected .pdf-tb-del,
.tool-select .pdf-img-overlay:hover .pdf-tb-del,.pdf-img-overlay.selected .pdf-tb-del{display:flex;}

/* Resize handles */
.pdf-resize-handle{
  position:absolute;width:8px;height:8px;background:#fff;
  border:1.5px solid var(--brand);border-radius:2px;z-index:20;display:none;
}
.selected .pdf-resize-handle{display:block;}
.pdf-resize-handle.nw{top:-4px;left:-4px;cursor:nw-resize;}
.pdf-resize-handle.ne{top:-4px;right:-4px;cursor:ne-resize;}
.pdf-resize-handle.sw{bottom:-4px;left:-4px;cursor:sw-resize;}
.pdf-resize-handle.se{bottom:-4px;right:-4px;cursor:se-resize;}

/* Signature overlay */
.pdf-sig-overlay{position:absolute;z-index:8;cursor:move;padding:4px 0;}
.tool-select .pdf-sig-overlay:hover,.pdf-sig-overlay.selected{outline:2px dashed var(--brand);outline-offset:2px;}
.pdf-sig-overlay .sig-line{border-top:1.5px solid currentColor;width:100%;}
.pdf-sig-overlay .sig-label{font-size:9px;color:var(--ink-faint);margin-top:3px;font-family:var(--font-body);}

/* Image overlay */
.pdf-img-overlay{position:absolute;z-index:8;cursor:move;box-sizing:border-box;}
.pdf-img-overlay img{width:100%;height:100%;object-fit:fill;pointer-events:none;display:block;}
.tool-select .pdf-img-overlay:hover,.pdf-img-overlay.selected{outline:2px dashed var(--brand);outline-offset:2px;}

/* Enhanced format bar */
.pdf-format-bar-pro{
  display:none;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:#fff;border-radius:10px;padding:8px 14px;
  margin-bottom:12px;box-shadow:var(--shadow-md);font-family:var(--font-body);white-space:nowrap;
  flex-wrap:wrap;
}
.pdf-format-bar-pro .fb-sec{display:flex;align-items:center;gap:5px;}
.pdf-format-bar-pro .fb-sec.hidden{display:none;}
.pdf-format-bar-pro select{
  font-size:12px;background:#232742;color:#fff;border:1px solid #3a3f66;
  border-radius:6px;padding:4px 6px;max-width:140px;
}
.pdf-format-bar-pro input[type="number"]{
  width:44px;font-size:12px;font-family:var(--font-mono);background:#232742;
  color:#fff;border:1px solid #3a3f66;border-radius:6px;padding:4px 4px;text-align:center;
}
.pdf-format-bar-pro input[type="color"]{
  width:22px;height:22px;padding:0;border:none;border-radius:6px;cursor:pointer;background:none;
}
.pdf-format-bar-pro .fb-bold,.pdf-format-bar-pro .fb-italic,.pdf-format-bar-pro .fb-underline{
  width:26px;height:26px;border-radius:6px;border:1px solid #3a3f66;
  background:#232742;color:#cdd0e6;cursor:pointer;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;
}
.pdf-format-bar-pro .fb-bold{font-weight:700;}
.pdf-format-bar-pro .fb-italic{font-style:italic;}
.pdf-format-bar-pro .fb-underline{text-decoration:underline;font-weight:bold;}
.pdf-format-bar-pro .fb-bold.on,.pdf-format-bar-pro .fb-italic.on,.pdf-format-bar-pro .fb-underline.on{
  background:var(--brand);color:#fff;border-color:var(--brand);
}
.pdf-format-bar-pro .fb-swatches{display:flex;gap:4px;}
.pdf-format-bar-pro .fb-swatch{
  width:16px;height:16px;border-radius:50%;border:1.5px solid #3a3f66;cursor:pointer;padding:0;
}
.pdf-format-bar-pro .fb-swatch.on{outline:2px solid #fff;outline-offset:1px;}
.pdf-format-bar-pro .fb-sep{width:1px;height:20px;background:#3a3f66;margin:0 2px;}
.pdf-format-bar-pro .fb-lbl{font-size:10px;opacity:.6;text-transform:uppercase;letter-spacing:.05em;}
.pdf-format-bar-pro .fb-no-fill{
  width:26px;height:26px;border-radius:6px;border:1px solid #3a3f66;
  background:#232742;color:#cdd0e6;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.pdf-format-bar-pro .fb-no-fill.on{background:var(--brand);color:#fff;border-color:var(--brand);}
.pdf-format-bar-pro .fb-delete{
  width:26px;height:26px;border-radius:6px;border:none;background:transparent;
  color:#f3a0a0;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.pdf-format-bar-pro .fb-delete:hover{background:rgba(248,113,113,.15);}

/* Cursor states for canvas */
.edit-pro-stage.tool-text .edit-page-wrap canvas{cursor:text;}
.edit-pro-stage.tool-signature .edit-page-wrap canvas{cursor:crosshair;}
.edit-pro-stage.tool-rect .edit-page-wrap canvas,
.edit-pro-stage.tool-ellipse .edit-page-wrap canvas,
.edit-pro-stage.tool-line .edit-page-wrap canvas,
.edit-pro-stage.tool-arrow .edit-page-wrap canvas{cursor:crosshair;}
.edit-pro-stage.tool-image .edit-page-wrap canvas{cursor:copy;}
.edit-pro-stage.tool-select .edit-page-wrap canvas{cursor:default;}

/* Draw preview */
.pdf-draw-preview{
  position:absolute;z-index:25;pointer-events:none;
  border:2px dashed var(--brand);background:rgba(46,58,240,.08);box-sizing:border-box;
}
.pdf-draw-preview.ellipse{border-radius:50%;}

/* Mobile responsive */
@media (max-width:640px){
  .edit-pro-workspace{flex-direction:column;}
  .edit-pro-sidebar{
    flex-direction:row;width:100%;border-right:none;
    border-bottom:1px solid var(--line);overflow-x:auto;padding:8px 12px;
  }
  .edit-pro-sidebar hr{width:1px;height:24px;border-top:none;border-left:1px solid var(--line);margin:0 4px;}
  .edit-pro-stage{max-height:60vh;}
  .edit-tool-btn .tool-tip{display:none !important;}
}