:root{
    --elevy:#6f3cff;
    --elevy-dark:#4b22c7;
    --elevy-soft:#f3efff;
    --ink:#1f2430;
    --muted:#667085;
    --line:#d9dce3;
    --bg:#f5f6f8;
    --danger:#b42318;
    --ok:#027a48;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    background:var(--bg);
    color:var(--ink);
  }
  .app{
    display:grid;
    grid-template-columns:minmax(360px, 520px) 1fr;
    min-height:100vh;
  }
  .sidebar{
    background:#fff;
    border-right:1px solid var(--line);
    padding:24px;
    height:100vh;
    overflow:auto;
    position:sticky;
    top:0;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
  }
  .brand-mark{
    width:48px;height:44px;border-radius:14px;
    background:linear-gradient(135deg,var(--elevy),#9f7cff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .brand-mark img{
    width: 30px;
    height: auto;
    margin: auto;
  }
  .brand h1{font-size:19px;margin:0}
  .brand small{display:block;color:var(--muted);margin-top:2px}
  .notice{
    background:var(--elevy-soft);
    border:1px solid #d9ceff;
    color:#3c2b80;
    padding:12px 14px;
    border-radius:12px;
    font-size:13px;
    line-height:1.45;
    margin-bottom:18px;
  }
  .section{
    border:1px solid var(--line);
    border-radius:14px;
    margin-bottom:14px;
    overflow:hidden;
  }
  .section h2{
    font-size:14px;
    margin:0;
    padding:13px 14px;
    background:#fafafa;
    border-bottom:1px solid var(--line);
  }
  .section .body{padding:14px}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
  .field.full{grid-column:1/-1}
  label{font-size:12px;font-weight:700;color:#344054}
  input,select,textarea{
    width:100%;
    border:1px solid #cfd4dc;
    border-radius:9px;
    padding:10px 11px;
    font:inherit;
    font-size:13px;
    background:#fff;
    outline:none;
  }
  input:focus,select:focus,textarea:focus{
    border-color:var(--elevy);
    box-shadow:0 0 0 3px rgba(111,60,255,.10);
  }
  textarea{min-height:72px;resize:vertical}
  .req::after{content:" *";color:var(--danger)}
  .actions{
    display:flex;flex-wrap:wrap;gap:10px;
    position:sticky;bottom:-24px;
    background:#fff;
    padding:14px 0 4px;
  }
  button{
    border:0;border-radius:10px;padding:11px 14px;
    font-weight:700;cursor:pointer;font-size:13px;
  }
  .primary{background:var(--elevy);color:#fff}
  .primary:hover{background:var(--elevy-dark)}
  .secondary{background:#eef0f4;color:#344054}
  .danger{background:#fff0ef;color:var(--danger)}
  .preview-wrap{
    padding:28px;
    overflow:auto;
  }
  .toolbar{
    max-width:210mm;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .toolbar .status{
    font-size:13px;color:var(--muted)
  }
  .page{
    width:210mm;
    min-height:297mm;
    background:#fff;
    margin:0 auto 24px;
    box-shadow:0 10px 30px rgba(16,24,40,.12);
    padding:18mm 18mm 17mm;
    font-family:Arial,Helvetica,sans-serif;
    font-size:10.2pt;
    line-height:1.32;
    color:#111;
  }
  .doc-topline{
    text-align:center;
    font-size:8.5pt;
    color:#6b7280;
    margin-bottom:6mm;
  }
  .doc-title{
    text-align:center;
    font-weight:700;
    font-size:14pt;
    margin:0 0 7mm;
  }
  .page p{margin:0 0 3.2mm;text-align:justify}
  .page h3{
    font-size:10.5pt;
    margin:6mm 0 2.5mm;
    text-transform:uppercase;
  }
  .page ul{margin:0 0 3mm 6mm;padding-left:4mm}
  .page li{margin-bottom:1.5mm}
  .fill{
    font-weight:700;
    background:#fff4bf;
    padding:0 2px;
  }
  table.doc-table{
    width:100%;
    border-collapse:collapse;
    margin-top:3mm;
    font-size:9.5pt;
  }
  .doc-table td,.doc-table th{
    border:1px solid #444;
    padding:2.2mm;
    vertical-align:top;
  }
  .doc-table th{background:#f2f2f2;text-align:left}
  .signatures{
    margin-top:12mm;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20mm;
    text-align:center;
  }
  .sig-line{
    border-top:1px solid #222;
    padding-top:2mm;
    margin-top:12mm;
  }
  .page-break{page-break-before:always}
  .invalid{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(180,35,24,.08)!important}
  .small{font-size:12px;color:var(--muted)}
  @media(max-width:1100px){
    .app{grid-template-columns:1fr}
    .sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}
    .preview-wrap{padding:16px;overflow-x:auto}
  }
  @media print{
    body{background:#fff}
    .sidebar,.toolbar{display:none!important}
    .app{display:block}
    .preview-wrap{padding:0}
    .page{
      box-shadow:none;
      margin:0;
      width:auto;
      min-height:auto;
      padding:15mm 16mm;
      page-break-after:always;
    }
    .page:last-child{page-break-after:auto}
    .fill{background:transparent}
    @page{size:A4;margin:0}
  }