/* Tool component styles ported from the retired at-skin.css.
   These are widget styles for tool-specific controls (page grids, toolbars,
   option groups). The visual design itself comes from ai-tool.css. */

/* One height for every right-panel preview thumbnail (page grids AND image
   grids), so cards look identical across tools. object-fit:contain keeps the
   real page/image shape inside that box, so nothing is distorted or cropped. */
:root {  --at-thumb-h: 194px;  }
@media (max-width: 560px) {  :root {  --at-thumb-h: 150px;  }  }

/* ============================================
   8. Option panels + form controls
   ============================================ */
.compression-options,
.conversion-options,
.lock-options,
.rotate-options,
.split-options,
.watermark-options,
.wm-image-options,
.wm-text-options,
.page-numbers-options,
.ocr-lang-wrap,
.advanced-settings { 
margin-block-start: 18px;
padding: 20px;
border-radius: var(--at-radius-xl);
border: 1px solid var(--glass-border);
background: var(--bg-card);
box-shadow: var(--at-shadow);
 }
.wm-text-options { box-shadow: none; border: none; }
/* ============================================
   9. Page grids + toolbars
   ============================================ */
.org-pages-wrap,
.rp-pages-wrap,
.rotate-pages-wrap,
.sign-pages-wrap,
.wm-pages-wrap,
.sp-pages-wrap,
.lk-pages-wrap,
.cp-pages-wrap,


.fl-pages-wrap,.ipp-pages-wrap,.p2w-pages-wrap,
.pp-pages-wrap,
.cmp-pages-wrap,
.pj-pages-wrap,.pi-pages-wrap,.png-pages-wrap,
.ep-pages-wrap,
.w2p-pages-wrap,
.ap-base-wrap,
.ap-wrap,
.ocr-pages { 
margin-block-start: 18px;
padding: 20px;
border-radius: var(--at-radius-xl);
border: 1px solid var(--glass-border);
background: var(--bg-card);
box-shadow: var(--at-shadow);
 }
.at-panel > .compression-results:first-child {margin-block-start: 0;}
.org-grid,
.rp-grid,
.rotate-grid,
.sign-page-grid,
.wm-page-grid,
.sp-page-grid,
.lk-page-grid,
.cp-page-grid,


.fl-page-grid,.ipp-page-grid,.p2w-page-grid,
.pp-page-grid,
.cmp-page-grid,
.pj-page-grid,.pi-page-grid,.png-page-grid,
.ep-page-grid,
.ap-grid,
.ap-base-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 12px;max-height: 1040px;overflow-y: auto;padding: 4px;}
.org-page,
.rp-page,
.rotate-page,
.sign-page,
.wm-page,
.sp-page,
.lk-page,
.cp-page,


.fl-page,.ipp-page,.p2w-page,
.pp-page,
.cmp-page,
.pj-page,.pi-page,.png-page,
.ep-page,
.ap-page,
.ap-base-page { 
position: relative;
border-radius: var(--at-radius-md);
border: 1px solid var(--glass-border);
background: var(--glass-bg);
overflow: hidden;
cursor: pointer;
transition: border-color .2s var(--at-ease), transform .2s var(--at-ease);
 }
.org-page:hover,
.rp-page:hover,
.rotate-page:hover,
.sign-page:hover,
.wm-page:hover,
.sp-page:hover,
.lk-page:hover,
.cp-page:hover,


.fl-page:hover,.ipp-page:hover,.p2w-page:hover,
.pp-page:hover,
.cmp-page:hover,
.pj-page:hover,.pi-page:hover,.png-page:hover,
.ep-page:hover,
.ap-page:hover,
.ap-base-page:hover {  border-color: var(--glass-border-hover); transform: translateY(-2px);  }
.org-page.selected,
.rp-page.selected,
.rotate-page.selected,
.sign-page.selected,
.wm-page.selected,
.sp-page.selected,
.ap-page.selected {  border-color: var(--accent-primary);  }
/* the page currently shown in the placement canvas gets a thicker ring */
.sign-page.current {  outline: 2px solid var(--accent-primary);  outline-offset: 1px;  }
.org-page img,
.rp-page img,
.rotate-page img,
.sign-page img,
.wm-page img,
.sp-page img,
.lk-page img,
.cp-page img,
.ap-page img,
.ap-base-page img {  display: block; width: 100%; height: var(--at-thumb-h); object-fit: contain;  }
.org-page-num,
.rp-page-num,
.rotate-page-num,
.sign-page-num,
.wm-page-num,
.sp-page-num,
.lk-page-num,
.cp-page-num,


.fl-page-num,.ipp-page-num,.p2w-page-num,
.pp-page-num,
.cmp-page-num,
.pj-page-num,.pi-page-num,.png-page-num,
.ep-page-num,
.ap-page-num {position: absolute;inset-block-start: 6px;inset-inline-start: 18px;min-width: 20px;padding: 2px 6px;border-radius: 999px;background: rgba(0, 0, 0, .62);color: #fff;font-size: 11px;font-weight: 700;text-align: center;font-variant-numeric: tabular-nums;height: 20px;}
/* selection tick shown on rotate cards */
.rotate-page-check {position: absolute;inset-block-start: 6px;inset-inline-end: 6px;width: 22px;height: 22px;border-radius: 6px;background: rgba(255, 255, 255, .9);border: 2px solid var(--glass-border);display: flex;align-items: center;justify-content: center;cursor: pointer;z-index: 2;}
.rotate-page.selected .rotate-page-check {  background: var(--accent-primary); border-color: var(--accent-primary);  }
.rotate-page-check svg {  display: none; width: 12px; height: 12px; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;  }
.rotate-page.selected .rotate-page-check svg {  display: block;  }
.sign-page.selected .rotate-page-check {  background: var(--accent-primary); border-color: var(--accent-primary);  }
.sign-page.selected .rotate-page-check svg {  display: block;  }
.wm-page.selected .rotate-page-check {  background: var(--accent-primary); border-color: var(--accent-primary);  }
.wm-page.selected .rotate-page-check svg {  display: block;  }
.sp-page.selected .rotate-page-check {  background: var(--accent-primary); border-color: var(--accent-primary);  }
.sp-page.selected .rotate-page-check svg {  display: block;  }
/* every page-card canvas: one shared box, intrinsic canvas ratio ignored so all
   tools render the same 194px thumbnail (contain keeps the page shape visible) */
.rotate-page canvas,
.sign-page canvas,
.wm-page canvas,
.sp-page canvas,
.lk-page canvas,
.cp-page canvas,
.org-page canvas {  display: block; width: 100%; height: var(--at-thumb-h); aspect-ratio: auto; object-fit: contain;  }
.org-page-thumb {  aspect-ratio: auto;  }
/* thumb wrappers with no size of their own: force the shared box so the canvas
   is not painted at its intrinsic pixel size (which overflowed these cards) */
.rp-page-thumb,
.ap-page-thumb,
.ocr-page-thumb {  display: block; width: 100%; aspect-ratio: auto;  }
.rp-page-thumb canvas,
.ap-page-thumb canvas,
.ap-page-thumb img,
.ocr-page-thumb img {  display: block; width: 100%; height: var(--at-thumb-h); aspect-ratio: auto; object-fit: contain;  }
/* display-only page thumbnails: shared height, page ratio kept via object-fit */
.p2w-page canvas,

.fl-page canvas,.ipp-page canvas,
.pp-page canvas,
.cmp-page canvas,
.pj-page canvas,.pi-page canvas,.png-page canvas {display: block;width: 100%;height: var(--at-thumb-h);object-fit: contain;}
.sign-toolbar-title {  font-size: 13px; font-weight: 600; color: var(--text-primary); }
.wm-toolbar-title {  font-size: 13px; font-weight: 600; color: var(--text-primary); }
.rotate-page-badge {  position: absolute; inset-block-start: 6px; inset-inline-end: 6px; min-width: 20px; padding: 2px 6px; border-radius: 999px; background: var(--accent-primary); color: #fff; font-size: 10.5px; font-weight: 700; text-align: center;  }
.rotate-page-badge:empty {  display: none;  }
.rotate-file-head {
grid-column: 1 / -1;
margin-block-start: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
 }
.rotate-file-head:first-child {  margin-block-start: 0;  }
.org-toolbar,
.rp-toolbar,
.rotate-toolbar,
.sign-toolbar,
.wm-toolbar,
.sp-toolbar,
.lk-toolbar,
.cp-toolbar,


.fl-toolbar,.ipp-toolbar,.p2w-toolbar,
.pp-toolbar,
.cmp-toolbar,
.pj-toolbar,.pi-toolbar,.png-toolbar,
.ep-toolbar,
.w2p-toolbar,
.ap-toolbar,
.compare-toolbar { 
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
margin-block-end: 14px;
 }
.org-toolbar-left,
.rp-toolbar-left,
.rotate-toolbar-left,
.sign-toolbar-left,
.wm-toolbar-left,
.sp-toolbar-left,
.lk-toolbar-left,
.cp-toolbar-left,


.fl-toolbar-left,.ipp-toolbar-left,.p2w-toolbar-left,
.pp-toolbar-left,
.cmp-toolbar-left,
.pj-toolbar-left,.pi-toolbar-left,.png-toolbar-left,
.ep-toolbar-left,
.gif-toolbar-left,
.sv-toolbar-left,
.w2p-toolbar-left,
.ap-toolbar-left {  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;  }
.org-toolbar-right,
.rp-toolbar-right,
.rotate-toolbar-right,
.ap-toolbar-right {  margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 9px;  }
.org-page-count,
.rp-page-count,
.rotate-page-count,
.sign-page-count,
.wm-page-count,
.sp-page-count,
.lk-page-count,
.cp-page-count,


.fl-page-count,.ipp-page-count,.p2w-page-count,
.pp-page-count,
.cmp-page-count,
.pj-page-count,.pi-page-count,.png-page-count,
.ep-page-count,
.w2p-page-count,
.ap-page-count,
.ap-pos-label { 
font-size: 12.5px;
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
 }
/* ============================================
   10. Results
   ============================================ */
.compression-results,
.split-results,
.sign-results,
.compare-view,
.sign-preview-box { 
margin-block-start: 18px;
padding: 20px;
border-radius: var(--at-radius-xl);
border: 1px solid var(--glass-border);
background: var(--bg-card);
box-shadow: var(--at-shadow);
 }
/* word-to-pdf document preview */
.w2p-preview {
background: #fff;
color: #1a1a1a;
padding: 24px;
border-radius: var(--at-radius-md);
font-size: 14px;
line-height: 1.6;
max-height: 1040px;
overflow-y: auto;
 }
.w2p-preview img { max-width: 100%; height: auto; }
.w2p-preview table { max-width: 100%; }
/* epub-to-pdf book preview: each card reads as a page of the book */
.ep-page { cursor: default; background: #fff; }
.ep-page-inner {
aspect-ratio: 3 / 4;
padding: 9px 8px;
overflow: hidden;
font-size: 6.5px;
line-height: 1.45;
color: #2a2a2a;
background: #fff;
 }
.ep-page-inner b { display: block; font-size: 8px; margin-bottom: 3px; }
.ep-page-inner img { max-width: 100%; height: auto; display: block; margin: 3px 0; }
.ep-cover img {
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
 }
.ep-page .ep-page-num { background: rgba(15, 23, 42, .72); color: #fff; }
/* ── image-to-pdf + gif-to-pdf + svg-to-pdf: imported image cards ── */
.ip-img-wrap,.gif-img-wrap,.sv-img-wrap {margin-block-start: 18px;}
.ip-toolbar,.gif-toolbar,.sv-toolbar {display: flex;align-items: center;justify-content: space-between;gap: 10px;margin-block-end: 10px;}
.ip-toolbar-title,.gif-toolbar-title,.sv-toolbar-title {font-size: 13px;font-weight: 600;color: var(--text-primary);}
.ip-img-count,.gif-img-count,.sv-img-count {font-size: 11px;font-weight: 600;color: var(--text-secondary);background: var(--glass-bg);border: 1px solid var(--glass-border);border-radius: 999px;padding: 2px 8px;font-variant-numeric: tabular-nums;}
.ip-img-grid,.gif-img-grid,.sv-img-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 12px;max-height: 1040px;overflow-y: auto;padding: 4px;}
.ip-img,.gif-img,.sv-img {position: relative;border-radius: var(--at-radius-md);border: 1px solid var(--glass-border);background: var(--glass-bg);overflow: hidden;}
.ip-img img,.gif-img img,.sv-img img {display: block;width: 100%;height: var(--at-thumb-h);object-fit: contain;background: var(--glass-bg);}
.ip-img-num,.gif-img-num,.sv-img-num {position: absolute;inset-block-start: 6px;inset-inline-start: 6px;min-width: 20px;padding: 2px 6px;border-radius: 999px;background: rgba(0, 0, 0, .62);color: #fff;font-size: 11px;font-weight: 700;text-align: center;font-variant-numeric: tabular-nums;}
.ip-img-name,.gif-img-name,.sv-img-name {display: block;padding: 5px 7px;font-size: 10.5px;color: var(--text-secondary);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;direction: ltr;text-align: start;}