:root{
    --paper:#eef3f9; --ink:#102a43; --muted:#5a6b7d;
    --accent:#f5860a; --accent-d:#d96e00; --line:#d6e0ec;
    --doc:#ffffff; --ok:#1f7a4d;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:"Spline Sans",sans-serif;background:var(--paper);color:var(--ink);
    -webkit-font-smoothing:antialiased;line-height:1.5;
  }
  .display{font-family:"Bricolage Grotesque",sans-serif}

  /* ---------- Top bar ---------- */
  header{
    position:sticky;top:0;z-index:40;background:var(--ink);color:var(--paper);
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 18px;border-bottom:3px solid var(--accent);
  }
  .brand{display:flex;align-items:center;gap:9px;font-family:"Bricolage Grotesque";font-weight:800;font-size:20px;letter-spacing:-.5px}
  .brand .bolt{background:var(--accent);color:#fff;width:30px;height:30px;border-radius:7px;display:grid;place-items:center;font-size:17px;transform:rotate(-6deg)}
  .brand small{color:var(--accent);font-weight:800}
  .top-actions{display:flex;align-items:center;gap:10px}
  .pro-toggle{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--paper);cursor:pointer;user-select:none;font-weight:500}
  .switch{width:40px;height:22px;background:#4a4840;border-radius:20px;position:relative;transition:.2s;flex:none}
  .switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s}
  .pro-toggle.on .switch{background:var(--accent)}
  .pro-toggle.on .switch::after{left:20px}
  .btn-dl{background:var(--accent);color:#fff;border:none;font-family:"Bricolage Grotesque";font-weight:700;font-size:13.5px;
    padding:9px 15px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.15s}
  .btn-dl:hover{background:var(--accent-d)}
  .btn-dl:active{transform:translateY(1px)}

  /* ---------- Layout ---------- */
  main{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:0;min-height:calc(100vh - 60px)}
  .editor{padding:20px 18px 60px;border-right:1px solid var(--line);background:var(--paper)}
  .preview-wrap{padding:26px 18px 60px;background:#e9e4d8;overflow:auto}

  /* ---------- Editor ---------- */
  .sec{margin-bottom:22px}
  .sec-h{font-family:"Bricolage Grotesque";font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent-d);
    margin-bottom:11px;display:flex;align-items:center;gap:8px}
  .sec-h::before{content:"";width:14px;height:14px;background:var(--accent);border-radius:4px;transform:rotate(-6deg);flex:none}
  label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin:0 0 4px 2px;text-transform:uppercase;letter-spacing:.4px}
  input,textarea,select{
    width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;
    border:1.5px solid var(--line);border-radius:8px;padding:9px 11px;transition:.15s;
  }
  input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,80,31,.13)}
  textarea{resize:vertical;min-height:62px}
  .row{display:flex;gap:9px;margin-bottom:10px}
  .row>div{flex:1}
  .field{margin-bottom:10px}

  /* items */
  .item{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:10px;margin-bottom:9px;position:relative}
  .item .item-top{display:flex;gap:9px;align-items:flex-start}
  .item .desc{flex:1}
  .item .qty{width:62px}
  .item .price{width:96px}
  .item-rm{position:absolute;top:-8px;right:-8px;width:23px;height:23px;border-radius:50%;border:none;background:var(--ink);color:#fff;
    font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center}
  .item-rm:hover{background:var(--accent)}
  .add-item{width:100%;background:transparent;border:1.6px dashed var(--accent);color:var(--accent-d);font-family:"Bricolage Grotesque";
    font-weight:700;font-size:13px;padding:10px;border-radius:9px;cursor:pointer;transition:.15s;margin-top:2px}
  .add-item:hover{background:rgba(224,80,31,.07)}
  .pro-only{transition:.2s}
  .pro-only.hidden-pf{display:none}

  /* ---------- Document ---------- */
  .doc{width:794px;background:var(--doc);box-shadow:0 14px 40px rgba(0,0,0,.18);transform-origin:top center;
    display:flex;flex-direction:column;min-height:1123px}
  .doc-inner{padding:54px 56px;flex:1;display:flex;flex-direction:column}
  .doc-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:22px;border-bottom:3px solid var(--ink)}
  .doc-prof .logo{display:inline-flex;align-items:center;gap:9px;margin-bottom:8px}
  .doc-prof .logo .lg{width:42px;height:42px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;
    font-family:"Bricolage Grotesque";font-weight:800;font-size:20px}
  .doc-prof h1{font-family:"Bricolage Grotesque";font-weight:800;font-size:25px;letter-spacing:-.5px;line-height:1.05}
  .doc-prof .trade{color:var(--accent-d);font-weight:600;font-size:14px;margin-top:2px}
  .doc-prof .contact{color:var(--muted);font-size:12.5px;margin-top:7px;line-height:1.6}
  .doc-meta{text-align:right;flex:none}
  .doc-meta .tag{font-family:"Bricolage Grotesque";font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase;
    color:#fff;background:var(--ink);padding:5px 12px;border-radius:6px;display:inline-block}
  .doc-meta .num{font-family:"Bricolage Grotesque";font-weight:800;font-size:24px;margin-top:9px}
  .doc-meta .date{color:var(--muted);font-size:12.5px;margin-top:5px}

  .doc-to{margin:24px 0 6px}
  .doc-to .lbl{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:600}
  .doc-to .who{font-family:"Bricolage Grotesque";font-weight:600;font-size:17px;margin-top:3px}
  .doc-to .extra{color:var(--muted);font-size:13px;margin-top:1px}

  table{width:100%;border-collapse:collapse;margin-top:18px}
  thead th{font-family:"Bricolage Grotesque";font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1px;
    text-align:left;color:var(--muted);padding:0 8px 9px;border-bottom:1.5px solid var(--line)}
  thead th.r{text-align:right}
  tbody td{padding:13px 8px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
  tbody td.r{text-align:right;white-space:nowrap}
  tbody .d{font-weight:500}
  .totbox{margin-top:22px;display:flex;justify-content:flex-end}
  .totbox .inner{min-width:230px}
  .totbox .line{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);padding:4px 0}
  .totbox .grand{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:12px;border-top:2.5px solid var(--ink)}
  .totbox .grand .l{font-family:"Bricolage Grotesque";font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:1px}
  .totbox .grand .v{font-family:"Bricolage Grotesque";font-weight:800;font-size:27px;color:var(--accent-d)}

  .doc-notes{margin-top:26px;background:#faf8f3;border-left:3px solid var(--accent);padding:13px 15px;border-radius:0 8px 8px 0}
  .doc-notes .lbl{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:600;margin-bottom:4px}
  .doc-notes p{font-size:13px;color:#444;white-space:pre-wrap}
  .spacer{flex:1}

  /* watermark / footer */
  .doc-foot{margin-top:30px}
  .wm{background:var(--ink);color:var(--paper);text-align:center;padding:12px;border-radius:9px;
    font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:8px}
  .wm b{color:var(--accent);font-family:"Bricolage Grotesque";font-weight:800}
  .wm .bolt2{background:var(--accent);color:#fff;width:20px;height:20px;border-radius:5px;display:grid;place-items:center;font-size:12px;transform:rotate(-6deg)}
  .foot-pro{text-align:center;color:var(--muted);font-size:12px;padding-top:14px;border-top:1px solid var(--line)}

  /* ---------- Mobile tabs ---------- */
  .tabs{display:none}
  @media(max-width:880px){
    main{grid-template-columns:1fr}
    .editor{border-right:none;display:none}
    .preview-wrap{display:none}
    main.show-edit .editor{display:block}
    main.show-prev .preview-wrap{display:block}
    .tabs{display:flex;position:sticky;top:60px;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
    .tabs button{flex:1;background:none;border:none;font-family:"Bricolage Grotesque";font-weight:700;font-size:14px;color:var(--muted);
      padding:13px;cursor:pointer;border-bottom:3px solid transparent}
    .tabs button.active{color:var(--accent-d);border-bottom-color:var(--accent)}
    .btn-dl span.lbl{display:none}
  }