:root{--green:#047a19;--bg:#f3f5f6;--ink:#17212b;--muted:#60707f;--line:#d4dbe2;--card:#fff;--blue:#1867d2;--danger:#b42318}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}button,select,input,textarea{font:inherit}button{border:0;background:var(--green);color:white;border-radius:9px;padding:10px 14px;font-weight:700;cursor:pointer}button.secondary{background:#1f6feb}button.ghost{background:#eef2f6;color:#111;border:1px solid #cfd7df}button.danger{background:var(--danger)}button.active,.leftNav button.active{background:#083b11}.hidden{display:none!important}.loginScreen{min-height:100vh;display:grid;place-items:center;padding:20px}.loginCard{width:min(960px,100%);background:white;border-radius:20px;box-shadow:0 20px 70px #0002;padding:26px}.brand{display:flex;gap:16px;align-items:center}.brand span{display:grid;place-items:center;background:var(--green);color:#fff;border-radius:16px;width:76px;height:76px;font-size:32px;font-weight:900}.brand h1{margin:0}.brand p,.fine,.muted{color:var(--muted)}.loginColumns{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}.loginColumns section,.card{background:#f8fafb;border:1px solid var(--line);border-radius:16px;padding:16px}label{display:block;margin:10px 0;font-weight:700}input,select,textarea{width:100%;border:1px solid #cbd5df;border-radius:9px;padding:10px;background:white}textarea{min-height:80px;resize:vertical}.wide{width:100%}.app{min-height:100vh;display:grid;grid-template-columns:160px 1fr;grid-template-rows:54px 1fr}.topbar{grid-column:1/3;background:#111827;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 14px}.topbar span{margin-left:10px;color:#b6c1cc}.topActions{display:flex;gap:8px;align-items:center}.topActions button,.fileBtn{background:#273244;color:white;padding:8px 10px;border-radius:8px;font-weight:700}.fileBtn input{display:none}.leftNav{grid-row:2;background:#0f172a;padding:12px;display:flex;flex-direction:column;gap:8px}.leftNav button{text-align:left;background:transparent;color:#e5edf6;border:1px solid #26344c}.main{overflow:auto}.tab{display:none;padding:18px}.tab.active{display:block}.panelHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panelHeader h1{margin:0}.jobGrid,.boardGrid{display:grid;grid-template-columns:minmax(320px,480px) 1fr;gap:16px}.list{display:grid;gap:8px}.list button{background:white;color:#111;border:1px solid var(--line);text-align:left}.certWorkspace{padding:0}.certToolbar{position:sticky;top:0;z-index:20;background:white;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center;padding:8px;flex-wrap:wrap}.certToolbar select{width:auto;min-width:180px}.certToolbar label{display:flex;align-items:center;gap:8px;margin:0}.certToolbar input[type=range]{width:140px}.certSplit{display:grid;grid-template-columns:360px 1fr;min-height:calc(100vh - 112px)}.fieldPanel{background:white;border-right:1px solid var(--line);padding:12px;overflow:auto;max-height:calc(100vh - 112px)}.fieldPanelHead{position:sticky;top:0;background:white;z-index:2;padding-bottom:8px}.fieldPanel h2{margin:0 0 8px;font-size:18px}.selectedEditor{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;background:#f8fafb}.fieldList{display:grid;gap:6px;margin-top:8px}.fieldItem{display:flex;align-items:center;gap:6px;border:1px solid #d7dee7;border-radius:9px;padding:6px;background:white}.fieldItem.active{outline:3px solid #9bd7a7}.fieldItem span{flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fieldItem button{padding:6px 8px;background:#eef2f6;color:#111}.viewerWrap{overflow:auto;padding:14px}.viewerNotice{background:#fff7dd;border:1px solid #ead58b;border-radius:12px;padding:10px;margin-bottom:12px}.pageStage{transform-origin:top left;margin:auto;position:relative;background:white;box-shadow:0 16px 50px #0003}.pageStage img{display:block;width:100%;height:auto;user-select:none}.fieldOverlay{position:absolute;border:1px dashed rgba(24,103,210,.36);background:rgba(255,255,255,.12);min-width:10px;min-height:10px}.fieldOverlay:hover,.fieldOverlay.active{outline:2px solid #1867d2;background:rgba(24,103,210,.08)}.fieldOverlay input,.fieldOverlay textarea{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:transparent;padding:2px 4px;font-size:11px;line-height:1.05;resize:none;overflow:hidden;color:#111}.fieldOverlay.choice{display:grid;place-items:center;font-weight:900;font-size:18px;cursor:pointer}.fieldOverlay.choice.empty::after{content:'';width:100%;height:100%;background:rgba(255,255,255,.2)}.choiceButtons{display:flex;flex-wrap:wrap;gap:8px}.choiceButtons button{background:#eef2f6;color:#111;border:1px solid #cfd7df}.choiceButtons button.active{background:#063f13;color:white;text-decoration:none}.choiceButtons button.crossed{text-decoration:line-through;color:#8d98a6}.miniGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.guardian{font-size:14px;display:grid;gap:6px}.guardGood{color:#067647}.guardBad{color:#b42318}.boardWays{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:10px;margin-top:10px}.wayCard{background:white;border:1px solid #cfd7df;border-radius:12px;padding:8px}.wayCard input,.wayCard select{padding:7px;margin-top:5px}.boardWaysToolbar{display:flex;gap:8px}#ocrText{min-height:180px}@media(max-width:900px){.app{grid-template-columns:1fr}.topbar{grid-column:1}.leftNav{grid-row:auto;flex-direction:row;overflow:auto}.certSplit,.jobGrid,.boardGrid,.loginColumns{grid-template-columns:1fr}.fieldPanel{max-height:none}.certSplit{display:flex;flex-direction:column}.fieldPanel{order:2}.viewerWrap{order:1}.certToolbar{position:static}}@media print{body{background:white}.topbar,.leftNav,.certToolbar,.fieldPanel,.viewerNotice{display:none!important}.app{display:block}.main,.tab,.certWorkspace,.certSplit,.viewerWrap{display:block;padding:0;overflow:visible}.tab:not(.active){display:none}.pageStage{box-shadow:none;margin:0;transform:none!important;width:100%!important;page-break-after:always}.fieldOverlay{border:0!important;background:transparent!important}.fieldOverlay input,.fieldOverlay textarea{border:0!important;background:transparent!important}.fieldOverlay.choice.empty{display:none}}
.inlineLabel{display:flex;align-items:center;gap:6px;margin:0;font-weight:700}.inlineLabel select{min-width:150px}.editorTop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.pill,.typeBadge{display:inline-block;background:#eef6ff;color:#124b8a;border:1px solid #b7d6f5;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:800}.typeBadge{min-width:42px;text-align:center;padding:2px 5px}.splitBox{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}.splitBox p{margin:4px 0 8px}.fieldOverlay.type-status,.fieldOverlay.type-tick{background:rgba(255,255,255,.08)}.fieldOverlay.type-text,.fieldOverlay.type-number,.fieldOverlay.type-date{background:rgba(24,103,210,.03)}.fieldOverlay.type-text input,.fieldOverlay.type-number input,.fieldOverlay.type-date input{white-space:nowrap}.fieldOverlay.type-signature input{font-family:"Brush Script MT",cursive;font-size:16px}.fieldOverlay.type-text:hover,.fieldOverlay.type-number:hover,.fieldOverlay.type-date:hover{outline-color:#0b63ce}.fieldOverlay.type-status:hover,.fieldOverlay.type-tick:hover{outline-color:#0f8a2c}.fieldOverlay.choice{line-height:1}.fieldOverlay.choice.empty::after{background:rgba(15,138,44,.08)}.ghost{background:#eef2f6!important;color:#111!important;border:1px solid #cfd7df!important}

/* v6 continuous certificate preview + all-pages PDF export */
.pagesStack{display:flex;flex-direction:column;gap:24px;align-items:center;transform-origin:top center;margin:auto;background:transparent!important;box-shadow:none!important;position:relative}
.formPageStage{position:relative;background:white;box-shadow:0 16px 50px #0003;flex:0 0 auto}
.formPageStage.activePageStage{outline:4px solid rgba(4,122,25,.35);outline-offset:8px}
.formPageStage img{display:block;width:100%;height:auto;user-select:none}
.pageTag{position:absolute;right:8px;top:8px;background:#111827cc;color:white;font-size:12px;font-weight:800;border-radius:999px;padding:4px 8px;pointer-events:none}
@media print{.pagesStack{display:block!important;transform:none!important;margin:0!important;width:100%!important;background:white!important}.formPageStage{box-shadow:none!important;outline:0!important;margin:0!important;width:100%!important;height:auto!important;page-break-after:always;break-after:page}.formPageStage img{width:100%!important;height:auto!important}.pageTag{display:none!important}.formPageStage:last-child{page-break-after:auto;break-after:auto}}

/* v7 keep the left selection/editor panel locked on screen while scrolling the form preview */
.tab.certWorkspace.active{display:flex;flex-direction:column;height:calc(100vh - 54px);overflow:hidden;padding:0}
.tab.certWorkspace.active .certToolbar{flex:0 0 auto;position:relative;top:auto;z-index:30}
.tab.certWorkspace.active .certSplit{flex:1 1 auto;min-height:0;height:auto;overflow:hidden;display:grid;grid-template-columns:360px minmax(0,1fr)}
.tab.certWorkspace.active .fieldPanel{position:sticky;top:0;align-self:start;height:100%;max-height:none;overflow-y:auto;overflow-x:hidden;background:white;z-index:10}
.tab.certWorkspace.active .viewerWrap{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain}
.tab.certWorkspace.active .pagesStack{padding-bottom:40px}
@media(max-width:900px){.tab.certWorkspace.active{height:auto;overflow:visible}.tab.certWorkspace.active .certSplit{display:flex;flex-direction:column;height:auto;overflow:visible}.tab.certWorkspace.active .fieldPanel{position:sticky;top:0;max-height:55vh;height:auto;order:1;border-right:0;border-bottom:1px solid var(--line)}.tab.certWorkspace.active .viewerWrap{height:auto;overflow:visible;order:2}}
@media print{.tab.certWorkspace.active{display:block!important;height:auto!important;overflow:visible!important}.tab.certWorkspace.active .certSplit{display:block!important;height:auto!important;overflow:visible!important}.tab.certWorkspace.active .viewerWrap{height:auto!important;overflow:visible!important}.tab.certWorkspace.active .fieldPanel{display:none!important}}

/* v8 field text styling, dropdowns, logo insets and certificate colour control */
.fieldOverlay select{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:transparent;padding:1px 3px;font-size:11px;line-height:1.05;color:#111;appearance:none;-webkit-appearance:none;}
.fieldOverlay.type-logo{background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;overflow:hidden;border-style:dashed;}
.logoFieldImg{max-width:100%;max-height:100%;object-fit:contain;display:block;pointer-events:none;}
.logoPlaceholder{font-size:12px;font-weight:800;color:#4b5563;border:1px dashed #9aa4b2;border-radius:6px;padding:4px 8px;background:#ffffffcc;}
.logoEditor,.textStyleBox{border-top:1px solid var(--line);margin-top:10px;padding-top:10px;display:grid;gap:8px;}
.logoPreview{display:flex;align-items:center;gap:10px;border:1px dashed #cbd5df;border-radius:10px;min-height:58px;padding:8px;background:#fff;}
.logoPreview img{max-width:160px;max-height:70px;object-fit:contain;display:block;}
.toggleRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;}
.toggleRow label{display:flex;align-items:center;gap:6px;margin:0;font-weight:700;}
.toggleRow input{width:auto;}
#certColorInput,#fieldTextColour{width:46px;min-width:46px;height:34px;padding:2px;border-radius:8px;}
@media print{.fieldOverlay select{border:0!important;background:transparent!important;appearance:none!important;-webkit-appearance:none!important;color:inherit}.fieldOverlay.type-logo{border:0!important;background:transparent!important}.logoPlaceholder{display:none!important}}

/* v9 left-panel editing tools + reliable move/resize */
.quickEditPanel{border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0 10px;background:#f8fafb;display:grid;gap:8px}
.quickEditPanel h3{margin:0;font-size:15px}.quickEditPanel label{margin:4px 0}.toolRow{display:flex;gap:8px;align-items:center}.toolRow button{flex:1;padding:8px 10px}.moveModeOverlay{cursor:move;outline:2px solid #f59e0b!important;background:rgba(245,158,11,.10)!important;touch-action:none;z-index:8}.moveModeOverlay input,.moveModeOverlay textarea,.moveModeOverlay select{pointer-events:none}.resizeHandle{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;background:#f59e0b;border:2px solid #fff;border-radius:4px;box-shadow:0 1px 4px #0004;cursor:nwse-resize;z-index:12}.fieldOverlay.active.moveModeOverlay{outline:3px solid #f59e0b!important}.fieldOverlay.type-textarea textarea{line-height:1.15}.fieldOverlay input,.fieldOverlay textarea,.fieldOverlay select{font-family:Arial,Helvetica,sans-serif}.selectedEditor .textStyleBox b{display:block;margin-bottom:4px}.selectedEditor input[type=color]{cursor:pointer}
@media print{.quickEditPanel,.resizeHandle{display:none!important}.moveModeOverlay{outline:0!important;background:transparent!important}}

/* v10 print/export full A4 page fit - prevents tiny certificate output */
@page{size:A4 portrait;margin:0;}
@media print{
  html,body{width:210mm!important;min-width:210mm!important;margin:0!important;padding:0!important;background:#fff!important;}
  body{overflow:visible!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  .app,.main,#certs,.tab.certWorkspace.active,.certSplit,.viewerWrap,.pagesStack{
    width:210mm!important;max-width:210mm!important;min-width:210mm!important;
    margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;
    display:block!important;overflow:visible!important;background:#fff!important;
  }
  .formPageStage{
    position:relative!important;display:block!important;
    width:210mm!important;min-width:210mm!important;max-width:210mm!important;
    height:297mm!important;min-height:297mm!important;max-height:297mm!important;
    margin:0!important;padding:0!important;overflow:hidden!important;
    transform:none!important;box-shadow:none!important;outline:0!important;background:#fff!important;
    page-break-after:always!important;break-after:page!important;
  }
  .formPageStage:last-child{page-break-after:auto!important;break-after:auto!important;}
  .formPageStage img{
    position:absolute!important;left:0!important;top:0!important;
    width:210mm!important;height:297mm!important;max-width:none!important;
    object-fit:fill!important;margin:0!important;padding:0!important;
  }
  .fieldOverlay{position:absolute!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;}
  .fieldOverlay input,.fieldOverlay textarea,.fieldOverlay select{
    border:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;
    padding:1px 3px!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
  }
}


/* v11 export fix: keep proportions, darker print, mixed portrait/landscape pages, hide panel */
.certSplit.panelHidden{grid-template-columns:0 minmax(0,1fr)!important;}
.certSplit.panelHidden .fieldPanel{display:none!important;}
.certSplit.panelHidden .viewerWrap{grid-column:1 / -1;}
#defaultFontSizeInput{max-width:90px;}
@page portraitPage{size:A4 portrait;margin:0;}
@page landscapePage{size:A4 landscape;margin:0;}
@media print{
  html,body{width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;margin:0!important;padding:0!important;background:#fff!important;}
  body,.app,.main,#certs,.tab.certWorkspace.active,.certSplit,.viewerWrap,.pagesStack{width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;display:block!important;overflow:visible!important;background:#fff!important;}
  .formPageStage{position:relative!important;display:block!important;margin:0!important;padding:0!important;overflow:hidden!important;transform:none!important;box-shadow:none!important;outline:0!important;background:#fff!important;page-break-after:always!important;break-after:page!important;}
  .formPageStage.portrait{page:portraitPage;width:210mm!important;min-width:210mm!important;max-width:210mm!important;height:297mm!important;min-height:297mm!important;max-height:297mm!important;}
  .formPageStage.landscape{page:landscapePage;width:297mm!important;min-width:297mm!important;max-width:297mm!important;height:210mm!important;min-height:210mm!important;max-height:210mm!important;}
  .formPageStage:last-child{page-break-after:auto!important;break-after:auto!important;}
  .formPageStage img{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;margin:0!important;padding:0!important;opacity:1!important;filter:contrast(1.08) saturate(1.08)!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  .fieldOverlay{position:absolute!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;opacity:1!important;}
  .fieldOverlay input,.fieldOverlay textarea,.fieldOverlay select,.fieldOverlay.choice{border:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;color:#000!important;opacity:1!important;text-shadow:none!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
}

/* v12 print symbol/font scaling: printed fields now use the same relative size as the on-screen form image */
@media print{
  .fieldOverlay input,
  .fieldOverlay textarea,
  .fieldOverlay select,
  .fieldOverlay.choice{
    font-size:calc(var(--field-font-size, 11) * var(--print-scale, .48) * 1px)!important;
    line-height:1.05!important;
    padding:0.25mm 0.45mm!important;
    transform:none!important;
  }
  .fieldOverlay.choice{
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  .fieldOverlay.type-tick.choice,
  .fieldOverlay.type-status.choice{
    font-size:calc(var(--field-font-size, 11) * var(--print-scale, .48) * 1px)!important;
  }
}

/* v16 Codebreaker-style local observation/reference search */
.codebookLayout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:16px;align-items:start}
.codeSearchBar{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:10px;margin:10px 0 12px}
.codeResults{display:grid;gap:10px;max-height:calc(100vh - 210px);overflow:auto;padding-right:4px}
.codeResults.compact{max-height:360px;font-size:13px}
.codeMini label{margin:5px 0}.codeMini input,.codeMini select{min-height:34px}
.codeItem{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px;box-shadow:0 1px 2px rgba(12,22,34,.05)}
.codeResults.compact .codeItem{padding:8px;border-radius:10px}.codeResults.compact .codeItem p{margin:6px 0}.codeResults.compact .codeItem small{display:block;line-height:1.25}.codeHead{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.codeBadge{display:inline-grid;place-items:center;min-width:36px;padding:3px 8px;border-radius:999px;font-weight:900;background:#e8eef5;color:#243447;border:1px solid #cbd5df}.codeBadge.c1{background:#ffe4e6;color:#9f1239;border-color:#fecdd3}.codeBadge.c2{background:#ffedd5;color:#9a3412;border-color:#fed7aa}.codeBadge.c3{background:#ecfdf3;color:#166534;border-color:#bbf7d0}.codeBadge.fi{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}
.codeItem p{margin:6px 0;font-weight:700}.codeItem small{color:#465466}.codeActions{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.codeActions button{padding:7px 9px;font-size:12px}.codeItem.c1{border-left:5px solid #e11d48}.codeItem.c2{border-left:5px solid #f97316}.codeItem.c3{border-left:5px solid #16a34a}.codeItem.fi{border-left:5px solid #4f46e5}
#codeSelectedText{min-height:130px}
@media(max-width:1000px){.codebookLayout{grid-template-columns:1fr}.codeResults{max-height:none}.codeSearchBar{grid-template-columns:1fr}}
@media print{#codebreaker,.codeMini{display:none!important}}

/* v18 extra field tools: line fields + right-side Codebreaker panel */
.fieldOverlay.type-line{background:transparent!important;border:0!important;outline:1px dashed rgba(0,0,0,.18);min-height:4px;overflow:visible;}
.fieldOverlay.type-line::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:var(--line-width,2px) solid var(--line-color,#111);transform:translateY(-50%);}
.fieldOverlay.type-line.active{outline:2px solid #f59e0b!important;}
.lineStyleEditor{display:grid;}
.selectedEditor .lineStyleEditor input[type=color]{width:46px;min-width:46px;height:34px;padding:2px;}
.codebreakerRightPanel{position:sticky;top:12px;float:right;width:330px;max-height:calc(100vh - 110px);overflow:auto;background:#fffffffa;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(12,22,34,.22);padding:12px;z-index:30;margin:12px 12px 12px -350px;backdrop-filter:blur(4px);}
.codebreakerRightPanel.hidden{display:none!important;}
.codeRightHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.codebreakerRightPanel input,.codebreakerRightPanel select{min-height:34px;margin:6px 0;}
.codebreakerRightPanel .codeResults{max-height:calc(100vh - 260px);}
.codebreakerRightPanel .codeActions button{font-size:11px;padding:6px 7px;}
@media(max-width:1100px){.codebreakerRightPanel{position:relative;float:none;width:auto;max-height:none;margin:8px 0;}}
@media print{.codebreakerRightPanel,.fieldOverlay.type-line{outline:0!important}.fieldOverlay.type-line::before{border-top-color:var(--line-color,#111)!important}}
/* v18 job delete + code text fit */
.jobListItem{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.jobListItem.active{outline:2px solid #9bd7a7;border-radius:10px}
.jobOpenBtn{background:white!important;color:#111!important;border:1px solid var(--line)!important;text-align:left!important;width:100%}
.jobDeleteBtn{padding:8px 10px!important;align-self:center}
.fieldOverlay.type-textarea textarea{white-space:pre-wrap;word-break:normal;overflow:hidden;line-height:1.12}