@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Newsreader:ital@0;1&display=swap');

  :root{
    --ink:#1a1410;
    --paper:#f4ede0;
    --card:#fffdf7;
    --accent:#c8431f;
    --accent-deep:#9c2d12;
    --line:#d8cab0;
    --muted:#7a6e5c;
    --good:#2f6b3e;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Newsreader',Georgia,serif;
    line-height:1.5;
    min-height:100vh;
    background-image:radial-gradient(circle at 20% 10%, rgba(200,67,31,.04), transparent 40%),
                     radial-gradient(circle at 90% 80%, rgba(47,107,62,.04), transparent 40%);
  }
  .wrap{max-width:1080px;margin:0 auto;padding:32px 24px 80px}
  header{border-bottom:3px solid var(--ink);padding-bottom:18px;margin-bottom:6px}
  .brand{font-family:'Fraunces',serif;font-weight:900;font-size:42px;letter-spacing:-1px;display:flex;align-items:baseline;gap:12px}
  .brand .dot{width:14px;height:14px;background:var(--accent);border-radius:50%;display:inline-block}
  .tag{font-style:italic;color:var(--muted);font-size:17px;margin-top:4px}
  .privacy{margin-top:16px;font-size:14px;background:var(--card);border:1px solid var(--line);
           padding:10px 14px;display:inline-block;border-radius:4px}
  .privacy b{color:var(--good)}

  .tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:36px}
  .tool{
    background:var(--card);border:1px solid var(--line);border-radius:8px;padding:22px 20px;
    cursor:pointer;transition:.18s;position:relative;overflow:hidden;text-align:left
  }
  .tool:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 24px rgba(26,20,16,.1)}
  .tool h3{font-family:'Fraunces',serif;font-size:21px;font-weight:600;margin-bottom:6px}
  .tool p{font-size:14.5px;color:var(--muted)}
  .tool .num{position:absolute;top:10px;right:14px;font-family:'Fraunces',serif;
             font-size:38px;font-weight:900;color:var(--line)}

  .panel{display:none;background:var(--card);border:1px solid var(--line);border-radius:8px;
         padding:28px;margin-top:28px}
  .panel.active{display:block}
  .panel h2{font-family:'Fraunces',serif;font-size:28px;margin-bottom:4px}
  .panel .sub{color:var(--muted);font-style:italic;margin-bottom:22px}
  .back{background:none;border:none;color:var(--accent);font-family:'Newsreader',serif;
        font-size:15px;cursor:pointer;margin-bottom:16px;font-style:italic}

  .drop{border:2px dashed var(--line);border-radius:8px;padding:40px 20px;text-align:center;
        cursor:pointer;transition:.15s;background:rgba(244,237,224,.4)}
  .drop:hover,.drop.over{border-color:var(--accent);background:rgba(200,67,31,.05)}
  .drop p{color:var(--muted)}
  .drop b{font-style:normal;color:var(--ink)}
  input[type=file]{display:none}

  button.act{background:var(--accent);color:#fff;border:none;padding:12px 26px;border-radius:6px;
        font-family:'Fraunces',serif;font-size:16px;font-weight:600;cursor:pointer;transition:.15s;margin-top:18px}
  button.act:hover{background:var(--accent-deep)}
  button.act:disabled{background:var(--line);cursor:not-allowed}

  .filelist{list-style:none;margin:18px 0}
  .filelist li{background:var(--paper);border:1px solid var(--line);padding:10px 14px;border-radius:5px;
        margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;font-size:15px}
  .filelist button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:18px}

  .status{margin-top:16px;font-style:italic;font-size:15px}
  .status.ok{color:var(--good)}
  .status.err{color:var(--accent-deep)}

  label.fld{display:block;margin:14px 0 6px;font-size:14px;color:var(--muted)}
  input[type=text],input[type=password],input[type=number]{
    width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:5px;
    font-family:'Newsreader',serif;font-size:15px;background:var(--paper)}

  /* form editor */
  #editorStage{position:relative;display:inline-block;margin-top:18px;border:1px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.08)}
  #pdfCanvas{display:block}
  .field{position:absolute;border:1px dashed transparent;background:transparent;
         min-width:28px;min-height:18px;cursor:move;display:flex;align-items:center;
         padding:0 4px;box-sizing:border-box;overflow:visible}
  .field.active{border-color:var(--accent);background:rgba(255,255,255,.78)}
  .field-text{font-family:Arial,sans-serif;outline:none;cursor:text;white-space:nowrap;
         width:100%;overflow:hidden;color:#141414}
  .field-img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none}
  .field-del,.field-grip{display:none}
  .field.active .field-del{display:block;position:absolute;top:-9px;right:-9px;width:18px;height:18px;
         border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:10px;
         line-height:18px;cursor:pointer;padding:0;text-align:center;z-index:3}
  .field.active .field-del:hover{background:var(--accent-deep)}
  .field.active .field-grip{display:block;position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;
         background:var(--accent);border:2px solid var(--card);border-radius:2px;
         cursor:nwse-resize;z-index:3}
  .field.active .field-grip:hover{background:var(--accent-deep)}
  .fontgrp select{font-family:'Newsreader',serif;font-size:13.5px;padding:7px 8px;
         border:1px solid var(--line);border-radius:5px;background:var(--paper);margin-right:6px}
  .fontgrp select:disabled{opacity:.45;cursor:not-allowed}
  .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0;align-items:center}
  .toolbar button{background:var(--paper);border:1px solid var(--line);padding:8px 14px;border-radius:5px;
        cursor:pointer;font-family:'Newsreader',serif;font-size:14px}
  .toolbar button:hover{border-color:var(--accent)}
  .hint{font-size:13px;color:var(--muted);font-style:italic;margin-top:8px}
  .pager{display:flex;gap:8px;align-items:center;font-size:14px}
  footer{margin-top:60px;text-align:center;color:var(--muted);font-size:13px;font-style:italic}

  /* ---- multi-page navigation & layout ---- */
  .topnav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
    border-bottom:3px solid var(--ink);padding-bottom:16px;margin-bottom:30px}
  .topnav .logo{font-family:'Fraunces',serif;font-weight:900;font-size:26px;text-decoration:none;
    color:var(--ink);display:flex;align-items:center;gap:9px}
  .topnav .logo .dot{width:11px;height:11px;background:var(--accent);border-radius:50%}
  .topnav .links{display:flex;gap:18px;flex-wrap:wrap}
  .topnav .links a{color:var(--muted);text-decoration:none;font-size:15px;font-style:italic}
  .topnav .links a:hover{color:var(--accent)}
  .hero,.toolhead{margin-bottom:30px}
  .hero h1,.toolhead h1{font-family:'Fraunces',serif;font-weight:900;font-size:38px;
    line-height:1.15;letter-spacing:-1px;margin-bottom:10px}
  .toolhead h1{font-size:32px}
  .lede{font-size:18px;color:var(--muted);max-width:620px;margin-bottom:14px}
  a.tool{text-decoration:none;color:inherit;display:block}
  .toolpanel{margin-bottom:30px}
  .explain{background:var(--card);border:1px solid var(--line);border-radius:8px;
    padding:26px 30px;margin-bottom:26px}
  .explain h2{font-family:'Fraunces',serif;font-size:20px;margin:18px 0 7px}
  .explain h2:first-child{margin-top:0}
  .explain p{font-size:15.5px;color:var(--ink);line-height:1.65;margin-bottom:6px}
  .explain a{color:var(--accent);text-decoration:none}
  .explain a:hover{text-decoration:underline}