.ap-page{
  
  --ap-accent: var(--primary-600, #7c3aed);
  --ap-accent-grad: var(--gradient-button, linear-gradient(135deg,#7c3aed 0%,#8b5cf6 100%));
  --ap-on-accent: #ffffff;
  
  --ap-bg: var(--bg-primary, #f8fafc);
  --ap-surface: var(--bg-secondary, #ffffff);
  --ap-surface-2: var(--bg-tertiary, #f1f5f9);
  --ap-text: var(--text-primary, #1e293b);
  --ap-text-2: var(--text-secondary, #64748b);
  --ap-border: var(--gray-100, #e2e8f0);
  
  --ap-danger: var(--error, #dc2626);
  --ap-danger-bg: var(--error-light, #fef2f2);
  --ap-success: var(--success, #16a34a);
  --ap-success-bg: var(--success-light, #f0fdf4);
  --ap-warn: #b45309;
  --ap-warn-bg: #fffbeb;
  
  --ap-r-sm: var(--radius-sm, 6px);
  --ap-r-md: var(--radius-md, 10px);
  --ap-r-lg: var(--radius-lg, 14px);
  --ap-sh-sm: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06));
  --ap-sh-md: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06));
  --ap-sh-lg: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05));
  --ap-header-h: 64px;   

  font-family:-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif;
  color:var(--ap-text);
}
.ap-page *{ box-sizing:border-box; }

.ap-ic{ width:15px; height:15px; flex:0 0 auto; display:inline-block;
  vertical-align:-2px; }

.ap-mini, .ap-editor__print, .ap-editor__close, .ap-wb-btn, .ap-clear-btn,
.ap-job__direct, .ap-job__print, .ap-job__printall,
.ap-item__print, .ap-item__move, .ap-item__del, .ap-agent-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.ap-title{ display:flex; align-items:center; gap:8px; }
.ap-title .ap-ic{ width:20px; height:20px; color:var(--ap-accent); }
.ap-empty__icon .ap-ic{ width:46px; height:46px; }
.ap-landing__feats li{ display:flex; align-items:center; gap:10px; }
.ap-landing__feats .ap-ic{ width:18px; height:18px; color:var(--ap-accent,#7c3aed); }
.ap-prefs__section{ display:flex; align-items:center; gap:8px; }
.ap-prefs__section .ap-ic{ width:16px; height:16px; color:var(--ap-accent,#7c3aed); }
.ap-dl__icon .ap-ic{ width:20px; height:20px; }
.ap-quota-banner--active{ display:flex; align-items:center; gap:8px; }
.ap-quota-banner--active .ap-ic{ width:16px; height:16px; }

.ap-wb, .ap-editor, .ap-prefs{
  --ap-accent: var(--primary-600, #7c3aed);
  --ap-accent-grad: var(--gradient-button, linear-gradient(135deg,#7c3aed 0%,#8b5cf6 100%));
  --ap-on-accent:#fff;
  --ap-bg: var(--bg-primary, #f8fafc);
  --ap-surface: var(--bg-secondary, #ffffff);
  --ap-surface-2: var(--bg-tertiary, #f1f5f9);
  --ap-text: var(--text-primary, #1e293b);
  --ap-text-2: var(--text-secondary, #64748b);
  --ap-border: var(--gray-100, #e2e8f0);
  --ap-danger: var(--error, #dc2626);
  --ap-danger-bg: var(--error-light, #fef2f2);
  --ap-success: var(--success, #16a34a);
  --ap-r-sm: var(--radius-sm, 6px);
  --ap-r-md: var(--radius-md, 10px);
  --ap-r-lg: var(--radius-lg, 14px);
  --ap-sh-sm: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06));
  --ap-sh-md: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06));
  --ap-sh-lg: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05));
  --ap-header-h:64px;
  box-sizing:border-box;
}
.ap-wb *, .ap-editor *, .ap-prefs *{ box-sizing:border-box; }
@media (max-width:560px){ .ap-wb, .ap-editor{ --ap-header-h:60px; } }

.ap-topbar{ display:flex; align-items:center; gap:10px; padding:14px 20px;
  background:var(--ap-surface); border-bottom:1px solid var(--ap-border); flex-wrap:wrap;
  position:sticky; top:var(--ap-header-h,64px); z-index:60; }
.ap-title{ font-size:18px; font-weight:800; margin:0; flex:1; letter-spacing:-.01em; }
.ap-prefs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--ap-surface); border:1px solid var(--ap-border); border-radius:var(--ap-r-sm);
  min-height:38px; padding:8px 14px; font-size:13px; font-weight:600; line-height:1;
  color:var(--ap-text); cursor:pointer; transition:background .15s,border-color .15s; }
.ap-prefs-btn:hover{ background:var(--ap-surface-2); border-color:var(--ap-accent); }

.ap-agent-btn{ display:inline-flex; align-items:center; gap:6px; min-height:38px;
  padding:8px 14px; border-radius:var(--ap-r-sm); font-size:13px; font-weight:600;
  line-height:1; text-decoration:none; white-space:nowrap;
  transition:filter .15s, background .15s, border-color .15s; }
.ap-agent-btn:hover{ filter:brightness(1.06); }

.ap-agent-btn--get{ background:var(--ap-accent); border:1px solid var(--ap-accent);
  color:#fff; }

.ap-agent-btn--update{ background:transparent; border:1px solid #d98324; color:#d98324; }
.ap-agent-btn--update:hover{ background:rgba(217,131,36,.10); }

.ap-wrap{ max-width:1080px; margin:0 auto; padding:24px 20px 56px; }
.ap-intro{ font-size:14px; line-height:1.6; color:var(--ap-text-2); max-width:720px; margin-bottom:22px; }

.ap-empty{ text-align:center; padding:64px 16px; color:var(--ap-text-2); }
.ap-empty__icon{ font-size:48px; }
.ap-empty__title{ font-weight:700; font-size:18px; margin:10px 0 4px; color:var(--ap-text); }
.ap-empty__text{ font-size:14px; max-width:420px; margin:0 auto; line-height:1.6; }

.ap-job{ border:1px solid var(--ap-border); border-radius:var(--ap-r-lg); margin-bottom:20px;
  overflow:hidden; background:var(--ap-surface); box-shadow:var(--ap-sh-sm); }
.ap-job__head{ display:flex; align-items:center; gap:10px; padding:13px 16px;
  background:var(--ap-surface-2); border-bottom:1px solid var(--ap-border); }
.ap-job__title{ font-weight:700; font-size:14px; }
.ap-job__count{ font-size:12px; color:var(--ap-text-2); flex:1; font-variant-numeric:tabular-nums; }
.ap-job__printall{ background:var(--ap-accent-grad); color:var(--ap-on-accent); border:none;
  padding:8px 16px; border-radius:var(--ap-r-sm); font-size:13px; cursor:pointer; font-weight:600;
  box-shadow:var(--ap-sh-sm); transition:filter .15s,transform .1s; }
.ap-job__printall:hover{ filter:brightness(1.06); }
.ap-job__printall:active{ transform:translateY(1px); }

.ap-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; padding:16px; }
.ap-item{ border:1px solid var(--ap-border); border-radius:var(--ap-r-md); overflow:hidden;
  cursor:pointer; background:var(--ap-surface); transition:box-shadow .18s,transform .18s,border-color .18s; }
.ap-item:hover{ box-shadow:var(--ap-sh-md); transform:translateY(-2px); border-color:var(--ap-accent); }
.ap-item__thumb{ height:132px; display:flex; align-items:center; justify-content:center; background:var(--ap-surface-2); overflow:hidden; }
.ap-item__thumb img{ width:100%; height:100%; object-fit:contain; }
.ap-item__pdf{ font-weight:800; color:var(--ap-danger); font-size:20px; letter-spacing:1px; }
.ap-item__meta{ display:flex; align-items:center; justify-content:space-between; padding:9px 11px; }
.ap-item__badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; color:#fff; letter-spacing:.01em; }
.ap-badge--idcard{ background:var(--ap-success); }
.ap-badge--document{ background:var(--ap-accent); }
.ap-badge--pdf{ background:var(--ap-danger); }

.ap-badge--template{ background:var(--ap-warn, #b45309); }
.ap-item__time{ font-size:11px; color:var(--ap-text-2); font-variant-numeric:tabular-nums; }

.ap-prefs{ position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:99998; display:flex; align-items:center; justify-content:center; padding:20px; }
.ap-prefs[hidden]{ display:none; }
.ap-prefs__card{ background:var(--ap-surface); border-radius:var(--ap-r-lg); padding:26px 28px; width:min(94vw,760px); max-height:90vh; overflow-y:auto; box-shadow:var(--ap-sh-lg); }
.ap-prefs__title{ font-weight:800; font-size:20px; margin-bottom:6px; letter-spacing:-.01em; }
.ap-prefs__card label{ display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--ap-text-2); margin-bottom:12px; }
.ap-prefs__card select, .ap-prefs__card input[type=number], .ap-prefs__card input[type=text]{ padding:9px 10px; border:1px solid var(--ap-border); border-radius:var(--ap-r-sm); font-size:14px; background:var(--ap-surface); color:var(--ap-text); }
.ap-prefs__card select:focus, .ap-prefs__card input:focus{ outline:2px solid var(--ap-accent); outline-offset:1px; border-color:var(--ap-accent); }
.ap-prefs__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; position:sticky; bottom:-26px; background:var(--ap-surface); padding:14px 0 2px; border-top:1px solid var(--ap-border); }
.ap-prefs__actions .ap-editor__print{ min-width:130px; }

.ap-prefs__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; }
@media (max-width:680px){ .ap-prefs__grid{ grid-template-columns:1fr; } }
.ap-prefs__group{ border:1px solid var(--ap-border); border-radius:var(--ap-r-md); padding:16px; background:var(--ap-surface); }

.ap-prefs__section{ font-weight:700; font-size:14px; color:var(--ap-text); margin-bottom:12px; }
.ap-prefs__section:first-of-type{ margin-top:0; }
.ap-prefs__toggle{ flex-direction:row !important; align-items:flex-start; gap:8px !important; }
.ap-prefs__toggle input{ margin-top:2px; }
.ap-prefs__hint{ font-size:12px; color:var(--ap-text-2); margin:-4px 0 2px; line-height:1.4; }
.ap-prefs__quota{ font-size:13px; font-weight:600; color:var(--ap-accent,#7c3aed); }
.ap-prefs__quota:empty{ display:none; }
.ap-token-row{ display:flex; gap:8px; align-items:center; }
.ap-token-row input{ flex:1; font-family:monospace; font-size:12px; }

.ap-qr{ display:flex; gap:14px; align-items:flex-start; }
.ap-qr canvas{ width:140px; height:140px; border:1px solid var(--gray-100,#eee); border-radius:8px; background:#fff; flex:0 0 auto; }
.ap-qr__side{ flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.ap-qr__side input{ width:100%; font-size:12px; }
.ap-qr__btns{ display:flex; gap:8px; }

.ap-quota-banner{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--ap-warn-bg); border:1px solid #fde68a; color:var(--ap-warn); border-radius:var(--ap-r-md);
  padding:13px 16px; margin-bottom:18px; font-size:14px; flex-wrap:wrap; }
.ap-quota-banner--out{ background:var(--ap-danger-bg); border-color:#fca5a5; color:var(--ap-danger); }
.ap-quota-banner--active{ background:var(--ap-success-bg); border-color:#bbf7d0; color:#15803d; justify-content:flex-start; }
.ap-quota-banner__cta{ background:var(--ap-accent-grad); color:#fff; text-decoration:none;
  padding:9px 18px; border-radius:var(--ap-r-sm); font-weight:700; font-size:13px; white-space:nowrap;
  box-shadow:var(--ap-sh-sm); transition:filter .15s; }
.ap-quota-banner__cta:hover{ filter:brightness(1.06); }

.ap-landing{ max-width:560px; margin:32px auto; background:#fff; border-radius:18px;
  padding:36px 28px; text-align:center; box-shadow:0 4px 24px rgba(0,0,0,.06); }
.ap-landing__logo{ height:56px; width:auto; margin-bottom:14px; }
.ap-landing__title{ font-size:26px; font-weight:800; margin:0 0 8px; color:var(--text-primary,#111); }
.ap-landing__sub{ color:var(--text-secondary,#555); font-size:15px; line-height:1.55; margin:0 auto 20px; max-width:440px; }
.ap-landing__feats{ list-style:none; padding:0; margin:0 auto 24px; max-width:400px; text-align:left; }
.ap-landing__feats li{ padding:9px 0; border-bottom:1px solid var(--gray-100,#f0f0f0); font-size:14px; color:#333; }
.ap-landing__feats li:last-child{ border-bottom:0; }
.ap-landing__cta{ display:inline-block; background:var(--ap-accent,#7c3aed); color:#fff;
  text-decoration:none; padding:14px 30px; border-radius:10px; font-size:16px; font-weight:700; }
.ap-landing__cta:hover{ filter:brightness(1.08); }
.ap-landing__note{ color:#999; font-size:13px; margin-top:12px; }

.ap-wb-btn{ background:var(--ap-accent-grad); color:var(--ap-on-accent); border:0; border-radius:var(--ap-r-sm);
  padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; margin-left:auto; box-shadow:var(--ap-sh-sm);
  transition:filter .15s; }
.ap-wb-btn:hover{ filter:brightness(1.06); }
.ap-clear-btn{ background:var(--ap-surface); color:var(--ap-danger); border:1px solid var(--ap-border);
  border-radius:var(--ap-r-sm); padding:8px 14px; font-size:13px; cursor:pointer; margin-left:8px; transition:background .15s; }
.ap-clear-btn:hover{ background:var(--ap-danger-bg); border-color:var(--ap-danger); }
.ap-prefs-btn{ margin-left:8px; }

#apRefresh{ margin-left:auto; }
#apRefresh ~ .ap-wb-btn{ margin-left:0; }

.ap-item{ position:relative; }
.ap-item__actions{ display:flex; gap:6px; margin:0 11px 11px; }
.ap-item__print{ flex:1; background:var(--ap-accent-grad); color:var(--ap-on-accent); border:0;
  border-radius:var(--ap-r-sm); padding:7px 8px; font-size:12px; font-weight:600; cursor:pointer; transition:filter .15s; }
.ap-item__print:hover{ filter:brightness(1.06); }
.ap-item__print:disabled{ opacity:.55; cursor:default; }
.ap-item__del{ background:var(--ap-surface); color:var(--ap-danger); border:1px solid var(--ap-border);
  border-radius:var(--ap-r-sm); padding:7px 10px; font-size:12px; cursor:pointer; transition:background .15s; }
.ap-item__del:hover{ background:var(--ap-danger-bg); border-color:var(--ap-danger); }

.ap-wb{ position:fixed; left:0; right:0; top:var(--ap-header-h); bottom:0; background:var(--ap-bg);
  z-index:400; display:flex; flex-direction:column; }
.ap-wb[hidden]{ display:none; }
.ap-wb__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px;
  background:var(--ap-accent-grad); color:var(--ap-on-accent); box-shadow:var(--ap-sh-md); }
.ap-wb__bar .ap-editor__label{ font-weight:700; color:#fff; }
.ap-wb__body{ flex:1; display:flex; min-height:0; }
.ap-wb__side{ width:220px; flex:0 0 auto; background:#fff; border-right:1px solid var(--gray-100,#eee); overflow-y:auto; padding:12px; }
.ap-wb__side-title{ font-size:12px; font-weight:600; color:var(--text-secondary,#777); margin-bottom:10px; }
.ap-wb__files{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ap-wb__file{ border:1px solid var(--gray-100,#eee); border-radius:8px; overflow:hidden; cursor:pointer; background:#fafafa; }
.ap-wb__file img{ width:100%; height:70px; object-fit:cover; display:block; pointer-events:none; }
.ap-wb__file.used{ outline:2px solid var(--ap-accent,#7c3aed); }

.ap-wb__main{ flex:1; display:flex; gap:16px; padding:16px; min-width:0; overflow-y:auto;
  align-items:flex-start; }
.ap-wb__compose{ flex:1 1 55%; min-width:0; display:flex; flex-direction:column; }
@media (max-width:1100px){
  .ap-wb__main{ flex-direction:column; }
  .ap-wb__compose{ flex:none; width:100%; }
}
.ap-wb__status{ font-size:13px; color:var(--text-secondary,#666); }
.ap-wb__actions{ display:flex; gap:10px; align-items:center; margin:14px 0; flex-wrap:wrap; }

.ap-wb__result{ flex:1 1 100%; min-width:0; margin-top:0;
  background:#fff; border:1px solid var(--gray-100,#eee); border-radius:12px;
  padding:16px; text-align:center; display:flex; flex-direction:column; gap:10px;
  
  align-items:center; }
.ap-wb__result .ap-editor__bar-btns{ order:-1; display:flex; gap:8px;
  justify-content:center; flex-wrap:wrap; }
@media (max-width:1100px){ .ap-wb__result{ flex:none; width:100%; } }
.ap-wb__result[hidden]{ display:none; }

.ap-wb__step-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-left:auto; }
@media (max-width:640px){
  .ap-wb__step-actions{ width:100%; margin-left:0; }
  .ap-wb__step-actions .ap-editor__print{ flex:1 1 auto; }
}
.ap-wb__result-title{ font-weight:600; margin-bottom:10px; }

.ap-wb__result img{ flex:0 0 auto; width:auto; height:auto;
  max-width:100%; max-height:62vh; object-fit:contain;
  border:1px solid var(--gray-100,#eee); border-radius:8px; }
@media (max-width:640px){
  .ap-wb__side{ width:130px; }
  .ap-wb__files{ grid-template-columns:1fr; }
}

.ap-wb__step-title{ font-weight:800; font-size:15px; color:var(--ap-text,#111); }
.ap-wb__step-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-bottom:4px; }
.ap-wb__note{ font-size:12.5px; color:var(--ap-text-2,#666); line-height:1.55; margin:6px 0 12px;
  max-width:640px; }
#apTplStep[hidden], #apFillStep[hidden]{ display:none; }

.ap-tpl__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:12px; }
.ap-tpl__card{ border:1.5px solid var(--ap-border,#e2e8f0); border-radius:10px; padding:8px;
  background:var(--ap-surface,#fff); cursor:pointer; text-align:center;
  transition:border-color .15s, box-shadow .15s, transform .15s; }
.ap-tpl__card:hover, .ap-tpl__card:focus-visible{ border-color:var(--ap-accent,#7c3aed);
  box-shadow:var(--ap-sh-md); transform:translateY(-2px); outline:none; }
.ap-tpl__page{ position:relative; width:100%; aspect-ratio:210 / 297; background:#fff;
  border:1px solid var(--ap-border,#e5e7eb); border-radius:3px; overflow:hidden; }
.ap-tpl__box{ position:absolute; border:1px solid var(--ap-accent,#7c3aed);
  background:rgba(124,58,237,.10); border-radius:2px; }
.ap-tpl__label{ font-size:11.5px; font-weight:600; color:var(--ap-text,#333); margin-top:7px;
  line-height:1.3; }

.ap-sheet__page{ position:relative; width:100%; max-width:420px; margin:0 auto;
  aspect-ratio:210 / 297; background:#fff; border:1px solid var(--ap-border,#ddd);
  border-radius:6px; box-shadow:var(--ap-sh-md,0 2px 10px rgba(0,0,0,.08)); }
.ap-sheet__slot{ position:absolute; border:1.5px dashed var(--ap-border,#ccc);
  border-radius:4px; background:var(--ap-surface-2,#fafafa); overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.ap-sheet__slot.filled{ border-style:solid; border-color:var(--ap-accent,#7c3aed);
  background:#fff; cursor:grab; }
.ap-sheet__slot.filled:active{ cursor:grabbing; }
.ap-sheet__slot.over{ outline:2px solid var(--ap-accent,#7c3aed); outline-offset:1px; }
.ap-sheet__slot img{ width:100%; height:100%; object-fit:contain;
  pointer-events:none; user-select:none; }
.ap-sheet__slot .n{ position:absolute; top:2px; left:4px; font-size:10px;
  font-weight:700; color:var(--ap-accent,#7c3aed); opacity:.75; }
.ap-sheet__rm{ position:absolute; top:2px; right:2px; width:18px; height:18px;
  border-radius:50%; border:0; background:#b3261e; color:#fff; cursor:pointer;
  font-size:12px; line-height:1; padding:0; display:flex; align-items:center;
  justify-content:center; }

.ap-editor{ position:fixed; left:0; right:0; top:var(--ap-header-h); bottom:0; background:#1e1e1e;
  z-index:410; display:flex; flex-direction:column; }
.ap-editor[hidden]{ display:none; }
.ap-editor__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px;
  background:var(--ap-accent-grad); color:#fff; box-shadow:var(--ap-sh-md); }
.ap-editor__brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.ap-editor__logo{ height:26px; width:auto; background:#fff; border-radius:var(--ap-r-sm); padding:3px 6px; }
.ap-editor__bar-btns{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.ap-editor__nav{ display:flex; gap:6px; }
.ap-editor__nav[hidden]{ display:none; }
.ap-editor__close{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); color:#fff; padding:8px 14px; border-radius:var(--ap-r-sm); cursor:pointer; font-size:14px; transition:background .15s; }
.ap-editor__close:hover{ background:rgba(255,255,255,.28); }
.ap-editor__print{ background:#fff; border:0; color:var(--ap-accent); padding:8px 18px; border-radius:var(--ap-r-sm); cursor:pointer; font-size:14px; font-weight:700; transition:filter .15s; }
.ap-editor__print:hover{ filter:brightness(.96); }
.ap-editor__label{ font-size:15px; color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ap-viewport{ flex:1; overflow:hidden; position:relative; background:#111;
  display:flex; align-items:center; justify-content:center; touch-action:none; }
.ap-loading{ position:absolute; z-index:2; color:#fff; font-size:14px; background:rgba(0,0,0,.6);
  padding:10px 18px; border-radius:20px; }
.ap-loading[hidden]{ display:none; }
.ap-stage{ transform-origin:center center; will-change:transform; }

#apCanvas{ background:#fff; box-shadow:0 0 20px rgba(0,0,0,.4); display:block; touch-action:none; }
#apPdf{ width:90vw; height:80vh; border:none; background:#fff; }
#apCanvas[hidden], #apPdf[hidden]{ display:none; }

.ap-zoombar{ background:#262626; color:#fff; display:flex; gap:10px; align-items:center; justify-content:center; padding:8px; }
.ap-zoombar[hidden]{ display:none; }
#apZoomVal{ min-width:52px; text-align:center; font-size:13px; }

.ap-controls{ background:#262626; padding:12px 16px; display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:center; }
.ap-controls[hidden]{ display:none; }
.ap-ctrl{ display:flex; flex-direction:column; gap:4px; min-width:180px; }
.ap-ctrl label{ color:#ccc; font-size:12px; display:flex; justify-content:space-between; }
.ap-ctrl input[type=range]{ width:100%; }
.ap-ctrl--btns{ flex-direction:row; align-items:center; min-width:auto; }
.ap-mini{ background:#3a3a3a; color:#fff; border:1px solid #555; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px; }
.ap-mini.ap-active{ background:var(--ap-accent,#7c3aed); border-color:var(--ap-accent,#7c3aed); }
.ap-mini[hidden]{ display:none; }

.ap-printstack{ position:absolute; left:-99999px; top:0; }
.ap-printstack .ap-print-page{ width:100%; }
.ap-printstack img{ width:100%; display:block; }

@media (max-width:560px){
  .ap-page{ --ap-header-h:60px; }   
  .ap-topbar{ padding:12px 14px; gap:8px; }
  .ap-title{ font-size:16px; flex:1 1 100%; }        
  .ap-wb-btn, .ap-clear-btn{ margin-left:0; flex:1; text-align:center; }
  .ap-prefs-btn{ margin-left:0; }
  #apRefresh{ margin-left:0; flex:1; }
  .ap-wrap{ padding:16px 14px 40px; }
  .ap-list{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; padding:12px; }
  .ap-prefs__card{ padding:20px 18px; }
  .ap-quota-banner{ font-size:13px; }
  .ap-quota-banner__cta{ flex:1; text-align:center; }
  
  .ap-editor__bar{ flex-wrap:wrap; padding:10px 12px; gap:8px; }
  .ap-editor__brand{ order:-1; flex:1 1 100%; }
  
  .ap-wb__body{ flex-direction:column; }
  .ap-wb__side{ width:100%; max-height:34vh; border-right:0; border-bottom:1px solid var(--ap-border); }
  .ap-wb__files{ grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); }
  .ap-tpl__grid{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  .ap-item, .ap-job__printall, .ap-wb-btn, .ap-item__print,
  .ap-quota-banner__cta, .ap-prefs-btn, .ap-tpl__card{ transition:none !important; }
  .ap-item:hover, .ap-tpl__card:hover{ transform:none; }
}

@media print{
  
  html, body{ background:#fff !important; }
  body{
    --ap-bg:#fff; --ap-surface:#fff; --ap-surface-2:#fff; --ap-text:#000;
    --bg-primary:#fff; --bg-secondary:#fff; --bg-tertiary:#fff;
  }
  .ap-page, .ap-wb, .ap-editor, .ap-viewport, .ap-controls, .ap-zoombar,
  .ap-editor__bar, .ap-prefs{ background:#fff !important; }

  body *{ visibility:hidden !important; }

  
  body[data-print="stack"] > *{ display:none !important; }
  body[data-print="stack"] > .ap-printstack{ display:block !important;
    visibility:visible !important; position:static !important; left:0; }
  body[data-print="stack"] .ap-printstack *{ visibility:visible !important; }
  body[data-print="stack"] .ap-print-page{ page-break-after:always; break-after:page;
    page-break-inside:avoid; break-inside:avoid; text-align:center; }
  body[data-print="stack"] .ap-print-page:last-child{ page-break-after:auto; break-after:auto; }
  body[data-print="stack"] .ap-print-page img{ display:inline-block;
    max-width:100%; max-height:90vh; width:auto; height:auto;
    
    print-color-adjust:exact; -webkit-print-color-adjust:exact; }

  .ap-editor__bar, .ap-controls, .ap-zoombar{ display:none !important; }
}

.ap-job__direct{ background:var(--ap-accent-grad); color:var(--ap-on-accent); border:none;
  padding:8px 16px; border-radius:var(--ap-r-sm); font-size:13px; cursor:pointer; font-weight:600;
  box-shadow:var(--ap-sh-sm); transition:filter .15s,transform .1s; }
.ap-job__direct:hover{ filter:brightness(1.06); }
.ap-job__direct:active{ transform:translateY(1px); }
.ap-job__direct:disabled{ opacity:.6; cursor:default; transform:none; }

.ap-job__print{ background:var(--ap-surface); color:var(--ap-accent);
  border:1px solid var(--ap-accent); padding:8px 16px; border-radius:var(--ap-r-sm);
  font-size:13px; cursor:pointer; font-weight:600; transition:background .15s; }
.ap-job__print:hover{ background:rgba(124,58,237,.08); }
.ap-job__print:disabled{ opacity:.6; cursor:default; }
.ap-job__printall{ background:var(--ap-surface); color:var(--ap-text-2);
  border:1px solid var(--ap-border); box-shadow:none; }
.ap-job__printall:hover{ background:var(--ap-surface-2); color:var(--ap-accent);
  border-color:var(--ap-accent); filter:none; }

.ap-item__move{ background:var(--ap-surface); color:var(--ap-text-2); border:1px solid var(--ap-border);
  border-radius:var(--ap-r-sm); padding:7px 10px; font-size:12px; cursor:pointer; transition:background .15s; }
.ap-item__move:hover{ background:var(--ap-surface-2); border-color:var(--ap-accent); color:var(--ap-accent); }

.ap-item.ap-move-src{ outline:2px solid var(--ap-accent,#7c3aed); outline-offset:2px; }
body.ap-moving .ap-job{ cursor:copy; }
.ap-job.ap-drop-over{ border-color:var(--ap-accent,#7c3aed);
  box-shadow:0 0 0 3px rgba(124,58,237,.18); }
.ap-move-hint{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:500;
  background:#1e293b; color:#fff; padding:10px 14px; border-radius:99px; font-size:13px;
  display:flex; align-items:center; gap:8px; box-shadow:0 10px 24px rgba(0,0,0,.28); }
.ap-move-hint[hidden]{ display:none; }
.ap-move-hint .ap-mini{ padding:5px 12px; }

.ap-refresh-toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px;
  z-index:600; background:#1e293b; color:#fff; padding:10px 16px; border-radius:99px;
  font-size:13px; box-shadow:0 10px 24px rgba(0,0,0,.28);
  display:flex; align-items:center; gap:8px; }
.ap-move-hint{ gap:8px; }

@media (max-width:560px){
  .ap-job__head{ flex-wrap:wrap; }
  .ap-job__direct, .ap-job__print, .ap-job__printall{ flex:1; white-space:nowrap; }
}

.ap-agent-modal{ position:fixed; inset:0; z-index:99999; background:rgba(15,23,42,.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
  font-family:-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif; }
.ap-agent-modal[hidden]{ display:none; }
.ap-agent-modal__card{ background:#fff; color:#1e293b; border-radius:14px;
  padding:24px 26px; width:min(94vw,500px); max-height:88vh; overflow-y:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.32); }
.ap-agent-modal__title{ font-weight:800; font-size:18px; margin-bottom:10px;
  letter-spacing:-.01em; }
.ap-agent-modal__err{ font-size:12px; color:#dc2626; background:#fef2f2;
  border:1px solid #fecaca; border-radius:8px; padding:8px 10px; margin:0 0 12px;
  word-break:break-word; font-family:monospace; }
.ap-agent-modal__err[hidden]{ display:none; }
.ap-agent-modal__text{ font-size:14px; line-height:1.55; margin:0 0 10px; }
.ap-agent-modal__list{ margin:0 0 18px; padding-left:20px; font-size:13.5px;
  line-height:1.65; color:#334155; }
.ap-agent-modal__list li{ margin-bottom:6px; }
.ap-agent-modal__btns{ display:flex; gap:8px; flex-wrap:wrap; }
.ap-agent-modal__install{ display:inline-flex; align-items:center; gap:6px;
  background:var(--primary-600,#7c3aed); color:#fff; text-decoration:none;
  padding:9px 16px; border-radius:8px; font-size:13.5px; font-weight:700;
  transition:filter .15s; }
.ap-agent-modal__install:hover{ filter:brightness(1.06); }

.ap-agent-modal .ap-mini{ background:#f1f5f9; color:#334155; border:1px solid #e2e8f0; }
.ap-agent-modal .ap-mini:hover{ background:#e2e8f0; }
.ap-agent-modal .ap-mini[hidden]{ display:none; }
@media (max-width:560px){
  .ap-agent-modal__btns{ flex-direction:column; align-items:stretch; }
  .ap-agent-modal__btns .ap-mini, .ap-agent-modal__install{ text-align:center;
    justify-content:center; }
}

.ap-wb__compose[hidden]{ display:none !important; }

.ap-wb__result-head{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; width:100%; }

.ap-spin {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -2px;
    margin-right: 6px;
    animation: ap-spin 0.7s linear infinite;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .ap-spin { animation: none; } }


/* AutoPrint — manual crop overlay.
   Separate file so style.css is untouched. Tokens are re-declared on .ap-mc for
   the same reason the other overlays re-declare them: this element is appended
   to <body>, outside .ap-page, so var() references would not otherwise resolve. */

.ap-mc{
  --ap-accent: var(--primary-600, #7c3aed);
  --ap-accent-2:#8b5cf6;
  --ap-surface: var(--bg-secondary, #ffffff);
  --ap-text: var(--text-primary, #1e293b);
  --ap-text-2: var(--text-secondary, #64748b);
  --ap-border: var(--gray-100, #e2e8f0);
  --ap-r-sm: var(--radius-sm, 6px);
  --ap-header-h:64px;

  position:fixed; left:0; right:0; top:var(--ap-header-h); bottom:0;
  z-index:420;                     /* above the editor (410), below prefs (99998) */
  background:#15161c;
  display:flex; flex-direction:column;
  font-family:-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif;
  box-sizing:border-box;
}
.ap-mc *{ box-sizing:border-box; }
.ap-mc[hidden]{ display:none; }
@media (max-width:560px){ .ap-mc{ --ap-header-h:60px; } }

/* Bar */
.ap-mc__bar{ display:flex; align-items:center; gap:12px; padding:12px 18px;
  background:var(--gradient-button, linear-gradient(135deg,#7c3aed 0%,#8b5cf6 100%));
  color:#fff; flex-wrap:wrap; }
.ap-mc__title{ font-size:15px; font-weight:700; flex:1; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ap-mc__bar-btns{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ap-mc__close{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35);
  color:#fff; padding:8px 14px; border-radius:var(--ap-r-sm); cursor:pointer; font-size:14px; }
.ap-mc__close:hover{ background:rgba(255,255,255,.28); }
.ap-mc__mini{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35);
  color:#fff; padding:8px 12px; border-radius:var(--ap-r-sm); cursor:pointer; font-size:13px; }
.ap-mc__mini:hover{ background:rgba(255,255,255,.28); }
.ap-mc__kind{ padding:8px 10px; border-radius:var(--ap-r-sm); border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.15); color:#fff; font-size:13px; }
.ap-mc__kind option{ color:#1e293b; }
.ap-mc__apply{ background:#fff; border:0; color:var(--ap-accent); padding:8px 18px;
  border-radius:var(--ap-r-sm); cursor:pointer; font-size:14px; font-weight:700; }
.ap-mc__apply:hover{ filter:brightness(.96); }
.ap-mc__apply:disabled{ opacity:.55; cursor:default; }

/* Stage */
.ap-mc__stage{ flex:1; position:relative; overflow:hidden; background:#0d0e13;
  /* the canvas owns every gesture — the page must never scroll mid-drag */
  touch-action:none; }
.ap-mc__canvas{ display:block; width:100%; height:100%; cursor:crosshair;
  touch-action:none; }
.ap-mc__loupe{ position:absolute; width:128px; height:128px; border-radius:50%;
  border:3px solid rgba(255,255,255,.85); box-shadow:0 8px 26px rgba(0,0,0,.55);
  pointer-events:none; z-index:3; }
.ap-mc__loupe[hidden]{ display:none; }
.ap-mc__spinner{ position:absolute; left:50%; top:50%; width:34px; height:34px;
  margin:-17px 0 0 -17px; border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff; border-radius:50%; z-index:4;
  animation:ap-mc-spin .7s linear infinite; }
.ap-mc__spinner[hidden]{ display:none; }
@keyframes ap-mc-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .ap-mc__spinner{ animation:none; } }

/* Foot */
.ap-mc__foot{ background:#22232c; color:#c9cbd6; padding:11px 16px;
  display:flex; flex-direction:column; gap:10px; }
.ap-mc__hint{ font-size:13px; line-height:1.5; }
.ap-mc__pick{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ap-mc__pick[hidden]{ display:none; }
.ap-mc__pick-label{ font-size:12px; color:#9aa0b0; }
.ap-mc__pick-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.ap-mc__thumb{ flex:0 0 auto; width:56px; height:44px; padding:0; border-radius:6px;
  overflow:hidden; border:2px solid transparent; background:#111; cursor:pointer; }
.ap-mc__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ap-mc__thumb.is-active{ border-color:var(--ap-accent-2); }

/* Inbox "Fix crop" button — neutral, matching .ap-item__move. */
.ap-item__fixcrop{ display:inline-flex; align-items:center; justify-content:center;
  gap:6px; background:var(--ap-surface,#fff); color:var(--ap-text-2,#64748b);
  border:1px solid var(--ap-border,#e2e8f0); border-radius:var(--ap-r-sm,6px);
  padding:7px 10px; font-size:12px; cursor:pointer; transition:background .15s; }
.ap-item__fixcrop:hover{ background:var(--bg-tertiary,#f1f5f9);
  border-color:var(--primary-600,#7c3aed); color:var(--primary-600,#7c3aed); }

/* The overlay must never appear on a printed sheet. */
@media print{ .ap-mc{ display:none !important; } }

@media (max-width:560px){
  .ap-mc__bar{ padding:10px 12px; gap:8px; }
  .ap-mc__title{ flex:1 1 100%; order:-1; }
  .ap-mc__bar-btns{ width:100%; }
  .ap-mc__apply{ flex:1; }
}

/* ── manual crop v3: zoomable stage ──────────────────────────────────────────
   Append to the END of utility/autoprint/style.css, after the .ap-mc block you
   merged earlier. Then bump style.css?v= in index.php. */

/* overscroll-behavior:contain stops a wheel or swipe that reaches the end of
   the overlay from chaining through to the page behind it -- that chaining is
   what scrolled the site instead of the photo, and left corners below the fold
   with no way back except zooming the whole browser out. */
.ap-mc,
.ap-mc__stage {
  overscroll-behavior: contain;
}

/* The overlay must never scroll as a document; the stage owns all gestures. */
.ap-mc { overflow: hidden; }

.ap-mc__canvas { cursor: grab; }
.ap-mc__canvas:active { cursor: grabbing; }

/* A quiet hint, so zoom is discoverable without a tour. */
.ap-mc__zoomhint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .55);
  color: #d8dae4;
  font-size: 11.5px;
  pointer-events: none;
}
/* ── manual crop v4: page strip ──────────────────────────────────────────────
   Append to the END of utility/autoprint/style.css, then bump style.css?v=. */

/* The strip is now a PAGE SWITCHER for a multi-image job (front + back of one
   card), not a "wrong photo?" picker -- so the active page and the ones already
   adjusted both need to read at a glance. */
.ap-mc__thumb { position: relative; }
.ap-mc__thumb-n {
  position: absolute;
  left: 3px;
  top: 2px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
}
/* A green tick on pages the operator has already touched, so an unedited page
   in a two-card job is obvious before they press Crop & save. */
.ap-mc__thumb.is-edited::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .45);
}
.ap-mc__thumb.is-active { border-color: #8b5cf6; }

/* ── AutoPrint v5: side rails ─────────────────────────────────────────────────
   Append to the END of utility/autoprint/style.css, then bump style.css?v=.

   WHY: on a laptop the editor and cropper both wasted the two things a print
   shop actually needs -- vertical space for the document, and a stable place for
   the controls. A top strip plus a bottom control bar ate ~180px of height off a
   page that is already 1.41x taller than it is wide, while hundreds of pixels
   sat empty either side of it. Moving every control into one right-hand rail
   gives the document the full height and puts the buttons in one place.

   All rails are behind a min-width query. Below 900px the original stacked
   layout is correct and is left completely alone. */

@media (min-width: 900px) {

  /* ── Adjust & print editor ────────────────────────────────────────────────
     showPanel() sets an inline display:flex, which an ordinary rule cannot
     beat -- hence !important. It is scoped to :not([hidden]) so hidePanel()'s
     inline display:none still wins when the panel is closed. */
  .ap-editor:not([hidden]) {
    display: grid !important;
    grid-template-columns: 1fr minmax(250px, 310px);
    grid-template-rows: auto auto 1fr;
  }
  .ap-viewport { grid-column: 1; grid-row: 1 / 4; height: 100%; min-height: 0; }
  .ap-editor__bar {
    grid-column: 2; grid-row: 1;
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .ap-editor__brand { order: -1; justify-content: center; }
  .ap-editor__bar-btns { flex-direction: column; align-items: stretch; }
  .ap-editor__bar-btns > * { width: 100%; justify-content: center; }
  .ap-editor__nav { flex-direction: row; }
  .ap-editor__nav .ap-mini { flex: 1; }
  .ap-zoombar { grid-column: 2; grid-row: 2; }
  .ap-controls {
    grid-column: 2; grid-row: 3;
    flex-direction: column; align-items: stretch;
    align-content: start; gap: 14px;
  }
  .ap-controls .ap-ctrl { min-width: 0; width: 100%; }
  .ap-controls .ap-ctrl--btns { flex-direction: row; }
  .ap-controls .ap-ctrl--btns .ap-mini { flex: 1; }

  /* ── Manual crop ──────────────────────────────────────────────────────────
     No inline display here (manual-crop.js only toggles [hidden]), so no
     !important is needed. */
  .ap-mc:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr minmax(250px, 310px);
    grid-template-rows: auto 1fr;
  }
  .ap-mc__stage { grid-column: 1; grid-row: 1 / 3; min-height: 0; }
  .ap-mc__bar {
    grid-column: 2; grid-row: 1;
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .ap-mc__title { flex: none; text-align: center; white-space: normal; }
  .ap-mc__bar-btns { flex-direction: column; align-items: stretch; }
  .ap-mc__bar-btns > * { width: 100%; justify-content: center; }
  .ap-mc__foot {
    grid-column: 2; grid-row: 2;
    align-self: start; background: transparent;
  }
  /* The page strip reads better as a grid of thumbs in a narrow rail than as a
     single scrolling row. */
  .ap-mc__pick { flex-direction: column; align-items: stretch; }
  .ap-mc__pick-row { flex-wrap: wrap; overflow: visible; }
  .ap-mc__thumb { width: 62px; height: 48px; }

  /* ── Workbench ────────────────────────────────────────────────────────────
     The file panel was a fixed 220px, which made every inbox thumbnail too
     small to tell two ID cards apart -- the one judgement the operator has to
     make here. */
  .ap-wb__side { width: 300px; }
  .ap-wb__files { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ap-wb__file img { height: 96px; }
}

@media (min-width: 1400px) {
  .ap-wb__side { width: 360px; }
  .ap-wb__file img { height: 110px; }
}

/* ── Inbox header: reclaim the vertical space the intro paragraph used ──────
   The explanation only matters on a first visit; after that it pushes the jobs
   the operator came for below the fold on every single load. The WhatsApp link
   moves into the topbar, where it is still one tap away. */
.ap-wa-top {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 8px 14px;
  border: 1px solid #25d366; border-radius: var(--ap-r-sm, 6px);
  background: rgba(37, 211, 102, .08); color: #128c3e;
  font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none;
  white-space: nowrap; transition: background .15s;
}
.ap-wa-top:hover { background: rgba(37, 211, 102, .18); }
.ap-wa-top .ap-ic { width: 15px; height: 15px; }

@media (max-width: 560px) {
  .ap-wa-top { flex: 1; justify-content: center; }
}