/* PDF to Word Converter — Styles */

  :root{
    --ink: #171b24;
    --ink-2: #20263380;
    --paper: #f3ede0;
    --paper-dim: #e7dfcc;
    --accent: #3a5ba0;
    --accent-bright: #6f8fd8;
    --text-hi: #f3ede0;
    --text-lo: #b9bdc9;
    --ok: #6fae7f;
    --err: #c96a5a;
    --radius: 3px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, #232a3a 0%, transparent 60%),
      var(--ink);
    color:var(--text-hi);
    font-family:'Inter', sans-serif;
    min-height:100vh;
    padding:48px 24px 80px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .wrap{ width:100%; max-width:760px; }

  /* Header */
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent-bright);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:7px;height:7px;border-radius:50%;
    background:var(--ok);
    box-shadow:0 0 0 3px #6fae7f22;
  }
  h1{
    font-family:'Source Serif 4', serif;
    font-weight:700;
    font-size:clamp(32px, 5vw, 46px);
    line-height:1.08;
    margin:0 0 14px;
    letter-spacing:-0.01em;
  }
  h1 em{ font-style:italic; color:var(--accent-bright); }
  .sub{
    color:var(--text-lo);
    font-size:15.5px;
    line-height:1.6;
    max-width:56ch;
    margin:0 0 40px;
  }
  .sub strong{ color:var(--text-hi); font-weight:600; }

  /* Signature element: the fold */
  .stage{
    position:relative;
    background:linear-gradient(180deg, #1c2230, #171b24);
    border:1px solid #2c3345;
    border-radius:10px;
    padding:2px;
    box-shadow: 0 30px 60px -30px #00000090;
  }
  .stage-inner{
    border-radius:8px;
    background:#191f2b;
    padding:44px 40px 36px;
  }

  .dropzone{
    border:1.5px dashed #3a4256;
    border-radius:8px;
    padding:46px 24px;
    text-align:center;
    cursor:pointer;
    transition:border-color .18s ease, background .18s ease;
    position:relative;
  }
  .dropzone:hover, .dropzone.drag{
    border-color:var(--accent-bright);
    background:#20263a;
  }
  .dropzone input{ display:none; }

  .fold{
    width:64px; height:80px;
    margin:0 auto 18px;
    position:relative;
  }
  .fold svg{ width:100%; height:100%; display:block; }
  .fold .page-front{ transform-origin: left center; animation: flip 3.2s ease-in-out infinite; }
  @keyframes flip{
    0%, 40%{ transform: rotateY(0deg); }
    55%, 85%{ transform: rotateY(-165deg); }
    100%{ transform: rotateY(-165deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .fold .page-front{ animation: none; }
  }

  .dz-title{ font-size:15.5px; font-weight:600; margin-bottom:4px; }
  .dz-sub{ font-size:13px; color:var(--text-lo); }
  .dz-sub .browse{ color:var(--accent-bright); text-decoration:underline; text-underline-offset:2px; }

  /* File row */
  .filecard{
    display:none;
    align-items:center;
    gap:14px;
    border:1px solid #2c3345;
    border-radius:8px;
    padding:16px 18px;
    background:#1c2230;
  }
  .filecard.show{ display:flex; }
  .ficon{
    width:36px;height:44px;flex:none;
    background:var(--paper);
    border-radius:2px;
    position:relative;
  }
  .ficon::after{
    content:"PDF";
    position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
    font-family:'IBM Plex Mono', monospace;
    font-size:8px; font-weight:600; letter-spacing:.03em;
    color:#a03d3d;
  }
  .fimeta{ flex:1; min-width:0; }
  .finame{ font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fisize{ font-size:12px; color:var(--text-lo); margin-top:2px; font-family:'IBM Plex Mono', monospace; }
  .ficlear{
    flex:none;
    width:28px; height:28px;
    border-radius:50%;
    border:1px solid #3a4256;
    background:transparent;
    color:var(--text-lo);
    cursor:pointer;
    font-size:14px;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .15s, color .15s;
  }
  .ficlear:hover{ border-color:var(--err); color:var(--err); }

  /* Button */
  .go{
    margin-top:22px;
    width:100%;
    padding:15px 20px;
    border:none;
    border-radius:6px;
    background:var(--accent);
    color:#f3ede0;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:14.5px;
    letter-spacing:.01em;
    cursor:pointer;
    transition:background .15s ease, transform .1s ease;
    display:none;
    align-items:center;
    justify-content:center;
    gap:10px;
  }
  .go.show{ display:flex; }
  .go:hover:not(:disabled){ background:var(--accent-bright); }
  .go:active:not(:disabled){ transform:scale(0.995); }
  .go:disabled{ opacity:.6; cursor:not-allowed; }

  /* Progress */
  .progwrap{
    display:none;
    margin-top:22px;
  }
  .progwrap.show{ display:block; }
  .progline{
    display:flex; justify-content:space-between;
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    color:var(--text-lo);
    margin-bottom:8px;
  }
  .progtrack{
    height:6px;
    border-radius:3px;
    background:#2c3345;
    overflow:hidden;
  }
  .progbar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--accent), var(--accent-bright));
    border-radius:3px;
    transition:width .25s ease;
  }

  /* Result */
  .result{
    display:none;
    margin-top:22px;
    align-items:center;
    gap:14px;
    border:1px solid #345a3f;
    border-radius:8px;
    padding:16px 18px;
    background:#1a2620;
  }
  .result.show{ display:flex; }
  .ricon{
    width:36px;height:44px;flex:none;
    background:var(--paper);
    border-radius:2px;
    position:relative;
  }
  .ricon::after{
    content:"DOCX";
    position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
    font-family:'IBM Plex Mono', monospace;
    font-size:7px; font-weight:600; letter-spacing:.02em;
    color:var(--accent);
  }
  .rimeta{ flex:1; }
  .rititle{ font-size:14px; font-weight:600; color:var(--ok); }
  .risub{ font-size:12px; color:var(--text-lo); margin-top:2px; }
  .dl{
    flex:none;
    padding:10px 16px;
    border-radius:6px;
    background:var(--ok);
    color:#131a15;
    font-weight:600;
    font-size:13px;
    border:none;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
  }
  .dl:hover{ filter:brightness(1.08); }

  /* Error */
  .err{
    display:none;
    margin-top:22px;
    border:1px solid #6b3a34;
    border-radius:8px;
    padding:14px 16px;
    background:#291c1a;
    color:#e8a99c;
    font-size:13.5px;
    line-height:1.5;
  }
  .err.show{ display:block; }

  .foot{
    margin-top:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--text-lo);
    letter-spacing:.02em;
  }
  .foot svg{ width:13px; height:13px; opacity:.7; }

  .notes{
    margin-top:36px;
    font-size:12.5px;
    color:var(--text-lo);
    line-height:1.7;
    border-top:1px solid #2c3345;
    padding-top:20px;
  }
  .notes b{ color:var(--text-hi); }