:root{
    --ink:#1E2A32;
    --ink-soft:#4B5B63;
    --ink-faint:#94A3AB;
    --paper:#FEFDFB;
    --panel:#F3F1EA;
    --panel-line:#E3DFD3;
    --accent:#2C5F6F;
    --accent-soft:#DCE9EA;
    --accent-strong:#1B4450;
    --warn:#B5652F;
    --radius:10px;
    --serif: "Times New Roman",Times,serif;
    --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:var(--sans);
    color:var(--ink);
    background:var(--panel);
  }
  .topbar{
    position:sticky; top:0; z-index:10;
    background:var(--ink); color:#F3F1EA;
    padding:14px 24px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  }
  .topbar h1{
    font-size:16px; font-weight:600; margin:0; letter-spacing:.2px;
  }
  .topbar p{
    margin:2px 0 0; font-size:12.5px; color:#B9C4C8;
  }
  .actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .btn{
    font-family:var(--sans); font-size:13px; font-weight:600;
    padding:8px 14px; border-radius:8px; border:1px solid transparent;
    cursor:pointer; transition:transform .08s ease, background .15s ease;
  }
  .btn:active{ transform:scale(.97); }
  .btn-accent{ background:var(--accent); color:#fff; }
  .btn-accent:hover{ background:var(--accent-strong); }
  .btn-ghost{ background:transparent; color:#F3F1EA; border-color:#4B5B63; }
  .btn-ghost:hover{ background:#2B383F; }

  .progress-wrap{ display:flex; align-items:center; gap:8px; color:#B9C4C8; font-size:12px; }
  .progress-track{ width:90px; height:5px; background:#3A4750; border-radius:99px; overflow:hidden; }
  .progress-fill{ height:100%; background:#7FBBC4; width:0%; transition:width .25s ease; }

  .mode-toggle{
    display:flex; background:#2B383F; border-radius:8px; padding:3px; gap:2px;
  }
  .mode-btn{
    font-family:var(--sans); font-size:12.5px; font-weight:600; color:#B9C4C8;
    background:transparent; border:none; padding:6px 12px; border-radius:6px; cursor:pointer;
  }
  .mode-btn.active{ background:#7FBBC4; color:#0F2C33; }
  .mode-hint{ font-size:11px; color:var(--ink-faint); margin:6px 0 0; line-height:1.5; }

  body.mode-minimum .lengkap-only{ display:none !important; }

  .layout{
    display:grid;
    grid-template-columns:minmax(320px,440px) 1fr;
    gap:0;
    align-items:start;
  }
  @media (max-width:900px){
    .layout{ grid-template-columns:1fr; }
  }

  .form-pane{
    padding:24px; max-height:calc(100vh - 58px); overflow-y:auto;
    border-right:1px solid var(--panel-line);
  }
  @media (max-width:900px){ .form-pane{ max-height:none; border-right:none; border-bottom:1px solid var(--panel-line);} }

  .section{
    background:var(--paper); border:1px solid var(--panel-line); border-radius:var(--radius);
    padding:16px 18px; margin-bottom:16px;
  }
  .section h2{
    font-size:13px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--accent-strong); margin:0 0 12px; font-weight:700;
  }
  .field{ margin-bottom:12px; }
  .field:last-child{ margin-bottom:0; }
  .field label{
    display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:4px;
  }
  .field input[type=text], .field textarea, .field select{
    width:100%; font-family:var(--sans); font-size:13.5px; color:var(--ink);
    padding:8px 10px; border:1px solid var(--panel-line); border-radius:7px;
    background:#fff; resize:vertical;
  }
  .field input:focus, .field textarea:focus, .field select:focus{
    outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
  }
  .field textarea{ min-height:56px; line-height:1.45; }
  .hint{ font-size:11px; color:var(--ink-faint); margin-top:3px; }

  .chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
  .chip{
    font-size:12px; padding:5px 10px; border-radius:99px; border:1px solid var(--panel-line);
    background:#fff; cursor:pointer; color:var(--ink-soft); user-select:none;
  }
  .chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

  .radio-row{ display:flex; flex-wrap:wrap; gap:10px; }
  .radio-opt{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-soft); }

  .preview-pane{
    padding:32px 40px; display:flex; justify-content:center;
  }
  @page{ size:A4; margin:0; }
  .paper{
    background:var(--paper); width:100%; max-width:21cm; min-height:29.7cm;
    border:1px solid var(--panel-line); border-radius:4px;
    box-shadow:0 1px 3px rgba(30,42,50,.08), 0 12px 32px rgba(30,42,50,.06);
    padding:3cm 3cm 3cm 4cm; font-family:var(--serif); font-size:12pt; color:var(--ink); line-height:1.5;
  }
  .paper h1{ font-size:14pt; font-weight:700; text-align:center; margin:0 0 4pt; letter-spacing:0; font-family:var(--serif); }
  .paper .sub{ text-align:center; font-size:11pt; color:var(--ink-soft); margin:0 0 20pt; font-family:var(--serif); }
  .paper h3{
    font-size:12pt; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
    border-bottom:1pt solid var(--ink); padding-bottom:3pt; margin:18pt 0 8pt;
    font-family:var(--serif); color:var(--accent-strong);
  }
  .paper h3:first-of-type{ margin-top:0; }
  .kv{ display:grid; grid-template-columns:130pt 1fr; gap:2pt 8pt; font-size:12pt; margin-bottom:3pt; line-height:1.5; }
  .kv .k{ color:var(--ink-soft); font-family:var(--serif); font-size:12pt; padding-top:0; }
  .kv .v{ font-size:12pt; }
  .placeholder{ color:var(--ink-faint); font-style:italic; }
  .paper ul{ margin:3pt 0 8pt; padding-left:18pt; }
  .paper li{ margin-bottom:3pt; font-size:12pt; line-height:1.5; }
  .paper p.body-text{ font-size:12pt; margin:3pt 0 8pt; line-height:1.5; white-space:pre-wrap; }
  .sub-block{ margin-bottom:10pt; }
  .sub-block .label{ font-family:var(--serif); font-size:12pt; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.02em; margin-bottom:2pt; }

  .cover-page{
    min-height:620px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; page-break-after:always; break-after:page;
  }
  .cover-page img{ max-width:130px; max-height:130px; object-fit:contain; margin-bottom:20pt; }
  .cover-kicker{ font-family:var(--serif); font-size:11pt; letter-spacing:.08em; color:var(--accent-strong); text-transform:uppercase; margin-bottom:10pt; }
  .cover-title{ font-size:20pt; font-weight:700; margin:0 0 10pt; line-height:1.3; max-width:420pt; font-family:var(--serif); }
  .cover-sub{ font-family:var(--serif); font-size:12pt; color:var(--ink-soft); margin:0 0 32pt; }
  .cover-footer{ font-family:var(--serif); font-size:12pt; color:var(--ink-soft); line-height:1.5; }
  .cover-footer .name{ font-weight:600; color:var(--ink); }

  .cover-upload-row{ display:flex; align-items:center; gap:10px; margin-top:8px; }
  .cover-thumb{
    width:44px; height:44px; border-radius:7px; object-fit:cover; border:1px solid var(--panel-line);
    background:#fff;
  }
  .cover-upload-btn{
    font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink);
    background:#fff; border:1px solid var(--panel-line); border-radius:7px; padding:7px 12px; cursor:pointer;
  }
  .cover-remove-btn{
    font-family:var(--sans); font-size:11.5px; color:var(--warn); background:none; border:none;
    cursor:pointer; text-decoration:underline; padding:0;
  }
  .toggle-row{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
  .toggle-row label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:0; }

  .fill-btn{
    font-family:var(--sans); font-size:11.5px; font-weight:600; color:var(--accent);
    background:none; border:none; cursor:pointer; padding:0; text-decoration:underline;
  }

  .ai-section{
    background:linear-gradient(180deg,#1B4450,#20505E);
    border-radius:var(--radius); padding:18px 18px 16px; margin-bottom:16px; color:#EAF3F2;
  }
  .ai-section h2{ color:#BFE0DE; font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 4px; font-weight:700; }
  .ai-section .desc{ font-size:12px; color:#AFCBC8; margin:0 0 12px; line-height:1.5; }
  .ai-section textarea{
    width:100%; font-family:var(--sans); font-size:13.5px; padding:9px 11px;
    border:1px solid #3A6874; border-radius:7px; background:#173A44; color:#fff; resize:vertical; min-height:56px;
  }
  .ai-section textarea::placeholder{ color:#7FA3A0; }
  .ai-section textarea:focus{ outline:none; border-color:#7FBBC4; }
  .ai-btn{
    margin-top:10px; width:100%; font-family:var(--sans); font-weight:700; font-size:13.5px;
    background:#7FBBC4; color:#0F2C33; border:none; border-radius:8px; padding:10px 14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .ai-btn:hover{ background:#9BCED5; }
  .ai-btn:disabled{ background:#3A6874; color:#8FB0AD; cursor:wait; }
  .ai-status{ font-size:12px; margin-top:9px; line-height:1.5; }
  .ai-status.error{ color:#F0A9A0; }
  .ai-status.success{ color:#A8E0C7; }
  .spinner{
    width:13px; height:13px; border:2px solid #0F2C33; border-top-color:transparent;
    border-radius:50%; animation:spin .7s linear infinite; display:none;
  }
  .ai-btn.loading .spinner{ display:inline-block; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .ai-badge{
    display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.03em;
    background:var(--accent-soft); color:var(--accent-strong); padding:2px 7px; border-radius:5px; margin-left:6px;
    vertical-align:1px;
  }

  @media print{
    .topbar, .form-pane{ display:none !important; }
    .layout{ display:block; }
    .preview-pane{ padding:0; }
    .paper{ box-shadow:none; border:none; max-width:100%; }
    body{ background:#fff; }
  }