:root {
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel-soft: #f1f5f9;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --purple: #7c3aed;
  --purple-dark: #5b21b6;
  --indigo: #4f46e5;
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.09);
}

html.dark {
  --bg: #0b1020;
  --panel: #111827;
  --panel-soft: #172033;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #273449;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

.page-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.04);
}

.header-inner {
  position: relative;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 64px;
  max-height: 64px;
  overflow: hidden;
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.brand {
  height: 64px;
  max-height: 64px;
  overflow: hidden;
}

.brand-icon {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 32px;
  border-radius: 6px;
  border: 3px solid #1062ff;
  background: #f7fbff;
  box-shadow: inset 0 -8px 0 #1062ff;
  flex: 0 0 auto;
}

.brand-icon::before {
  content: "";
  position: absolute;
  left: 7px;
  top: -10px;
  width: 17px;
  height: 10px;
  border: 3px solid #1062ff;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: #f7fbff;
}

.brand-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: 5px;
  width: 17px;
  height: 3px;
  border-radius: 999px;
  background: #ffffff;
}

.brand-mark {
  display: block;
  width: 48px;
  height: 40px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

.brand .brand-mark {
  width: clamp(190px, 16vw, 260px);
  height: 92px;
  transform: translateY(5px);
}

.brand-mark::before {
  display: none;
}

.brand-mark::after {
  display: none;
}

.brand strong {
  display: block;
  color: #0b1736;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: 0;
}

.brand strong span {
  color: #0b1736;
}

.brand strong,
.hero h1 span,
.section-title h2 span {
  color: var(--purple);
}

.brand strong span:first-child {
  color: #0b1736;
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}

.desktop-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}

.nav-item {
  position: relative;
}

.desktop-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 64px;
  padding: 0;
  color: #0b1736;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.desktop-nav a:hover,
.desktop-nav a.active {
  background: transparent;
  color: #0b63ff;
}

.desktop-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: #0b63ff;
}

.has-mega > a::before {
  content: "";
  order: 2;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border: solid #0b1736;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.contact-nav-item > a {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 52px;
  font-size: 12px;
}

.contact-nav-item > a::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mega {
  display: none;
  position: fixed;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 48px));
  max-height: min(560px, calc(100vh - 86px));
  overflow: auto;
  overflow-x: hidden;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14);
}

.mega-pdf-tools {
  width: min(1120px, calc(100vw - 48px));
}

.mega-image-tools {
  width: min(1120px, calc(100vw - 48px));
}

.mega-id-card-print {
  width: min(1120px, calc(100vw - 48px));
}

.nav-item:hover .mega,
.nav-item:focus-within .mega {
  display: block;
}

.mega-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.mega-search-wrap {
  position: relative;
  display: block;
  width: min(380px, 46%);
}

.mega-search-wrap > span {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  transform: translateY(-50%);
}

.mega-search-wrap > span::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: #94a3b8;
  transform: rotate(45deg);
}

.mega-search {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px 7px 36px;
  background: #ffffff;
  color: var(--text);
  outline: 0;
}

.mega-search:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.mega-tabs {
  display: flex;
  align-items: center;
  gap: 34px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.mega-toolbar-note {
  margin: 0 auto 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.mega-tabs span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mega-tabs b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 13px;
}

.mega-tab-star {
  color: #f59e0b;
}

.mega-tab-clock {
  color: #64748b;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 14px 12px 12px;
}

.mega-column {
  min-width: 0;
  padding: 0 12px;
  border-right: 1px solid #e5e7eb;
}

.mega-column:last-child {
  border-right: 0;
}

.mega-column h3 {
  position: relative;
  margin: 0 0 12px;
  color: #0b4db3;
  font-size: 13px;
  line-height: 1.2;
}

.mega-column h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: #0b63ff;
}

.mega-column-list {
  display: grid;
  gap: 2px;
}

.mega-row {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 8px;
  height: auto;
  min-height: 30px;
  padding: 3px 5px;
  border-radius: 8px;
  color: var(--text);
  transition: background-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.desktop-nav .mega-row {
  height: auto;
  min-height: 30px;
  padding: 3px 5px;
  font-size: inherit;
}

.mega-row:hover,
.mega-row:focus {
  background: #f5f9ff;
  box-shadow: inset 3px 0 0 #0b63ff;
  outline: 0;
}

.mega-row:hover strong,
.mega-row:focus strong {
  color: #0b63ff;
}

.mega-icon {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 1px;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border-radius: 6px;
  background: #2563eb;
  color: #ffffff;
}

.mega-icon::before {
  content: "";
  width: 13px;
  height: 13px;
  background: #ffffff;
  -webkit-mask: var(--mega-icon-mask) center / contain no-repeat;
  mask: var(--mega-icon-mask) center / contain no-repeat;
}

.mega-icon-red {
  background: #ef4444;
}

.mega-icon-purple {
  background: #7c3aed;
}

.mega-icon-teal {
  background: #14b8a6;
}

.mega-icon-green {
  background: #16a34a;
}

.mega-icon-orange {
  background: #f97316;
}

.mega-icon-blue {
  background: #2563eb;
}

.mega-icon-slate {
  background: #64748b;
}

.mega-symbol-pdf {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6zM14 3.5V8h4.5M8 13h8v2H8zm0 4h7v2H8z'/%3E%3C/svg%3E");
}

.mega-symbol-repair,
.mega-symbol-tool {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10l4 4v16H7zM16 3.5V7h3.5M3 8h10v2H3zm0 4h10v2H3zm0 4h10v2H3z'/%3E%3C/svg%3E");
}

.mega-symbol-scan {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h5v2H6v3H4zm11 0h5v5h-2V5h-3zM4 16h2v3h3v2H4zm14 0h2v5h-5v-2h3zM8 8h8v8H8z'/%3E%3C/svg%3E");
}

.mega-symbol-compress {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h7v2H7.4l4.3 4.3-1.4 1.4L6 6.4V10H4zm16 0v7h-2V6.4l-4.3 4.3-1.4-1.4L16.6 5H13V3zM4 21v-7h2v3.6l4.3-4.3 1.4 1.4L7.4 19H11v2zm16 0h-7v-2h3.6l-4.3-4.3 1.4-1.4 4.3 4.3V14h2z'/%3E%3C/svg%3E");
}

.mega-symbol-merge {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h9v6H5zm5 12h9v6h-9zM7 11h2v2h5v-2l4 3-4 3v-2H7z'/%3E%3C/svg%3E");
}

.mega-symbol-split {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 4h6v6H5zm8 0h6v6h-6zM5 14h6v6H5zm8 0h6v6h-6zM11 7h2v10h-2z'/%3E%3C/svg%3E");
}

.mega-symbol-crop {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h2v4h10v10h4v2h-4v4h-2V8H2V6h4zM10 10h4v4h-4z'/%3E%3C/svg%3E");
}

.mega-symbol-resize {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v2H7.4l4.3 4.3-1.4 1.4L6 7.4V11H4zm16 0v7h-2V7.4l-4.3 4.3-1.4-1.4L16.6 6H13V4zM4 20v-7h2v3.6l4.3-4.3 1.4 1.4L7.4 18H11v2zm16 0h-7v-2h3.6l-4.3-4.3 1.4-1.4 4.3 4.3V13h2z'/%3E%3C/svg%3E");
}

.mega-symbol-rotate {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5V2l5 5-5 5V8a5 5 0 1 0 4.6 7h2.2A7 7 0 1 1 12 5z'/%3E%3C/svg%3E");
}

.mega-symbol-flip {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 4l8 8-8 8zm18 0v16l-8-8zm-9 0h2v16h-2z'/%3E%3C/svg%3E");
}

.mega-symbol-circle-crop {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h2v4h3V2h2v4h3V2h2v4h4v2h-4v3h4v2h-4v3h4v2h-4v4h-2v-4h-3v4h-2v-4H8v4H6v-4H2v-2h4v-3H2v-2h4V8H2V6h4zm2 6v3h3V8zm5 0v3h3V8zm-5 5v3h3v-3zm5 0v3h3v-3z'/%3E%3C/svg%3E");
}

.mega-symbol-grid {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z'/%3E%3C/svg%3E");
}

.mega-symbol-watermark {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2s7 7.1 7 13a7 7 0 1 1-14 0c0-5.9 7-13 7-13zm-3 13a3 3 0 0 0 6 0z'/%3E%3C/svg%3E");
}

.mega-symbol-edit,
.mega-symbol-form {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h12l4 4v14H4zM15 4.5V8h3.5M7 12h8v2H7zm0 4h6v2H7z'/%3E%3C/svg%3E");
}

.mega-symbol-image {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v14H4zm3 11h10l-4-5-3 4-2-2zm10-7a2 2 0 1 0-4 0 2 2 0 0 0 4 0z'/%3E%3C/svg%3E");
}

.mega-symbol-word::before,
.mega-symbol-ppt::before,
.mega-symbol-excel::before,
.mega-symbol-text::before {
  -webkit-mask: none;
  mask: none;
  width: auto;
  height: auto;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  background: transparent;
}

.mega-symbol-word::before {
  content: "W";
}

.mega-symbol-ppt::before {
  content: "P";
}

.mega-symbol-excel::before {
  content: "X";
}

.mega-symbol-text::before {
  content: "T";
}

.mega-symbol-lock {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V7a5 5 0 0 1 10 0v3h2v11H5V10zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E");
}

.mega-symbol-lock-open {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V7a5 5 0 0 1 9.6-2h-2.4A3 3 0 0 0 9 7v3h10v11H5V10z'/%3E%3C/svg%3E");
}

.mega-symbol-shield {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l8 3v6c0 5-3.4 9.5-8 11-4.6-1.5-8-6-8-11V5zm-1 13l6-6-1.4-1.4L11 12.2 8.8 10 7.4 11.4z'/%3E%3C/svg%3E");
}

.mega-symbol-card {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18v14H3zm3 4h6v2H6zm0 4h10v2H6zm12-3a2 2 0 1 0-4 0 2 2 0 0 0 4 0z'/%3E%3C/svg%3E");
}

.mega-symbol-id-aadhaar,
.mega-symbol-id-pan,
.mega-symbol-id-custom,
.mega-symbol-id-driving {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18v14H3zm3 4h6v2H6zm0 4h9v2H6zm12-4a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0zm-6 7c.6-1.8 2-3 3.5-3s2.9 1.2 3.5 3z'/%3E%3C/svg%3E");
}

.mega-symbol-id-abha {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l8 3v6c0 5-3.4 9.5-8 11-4.6-1.5-8-6-8-11V5zm-1 7v3H8v2h3v3h2v-3h3v-2h-3V9z'/%3E%3C/svg%3E");
}

.mega-symbol-signature {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17c4 0 4-10 8-10 3 0 2 6 4 6 1.4 0 1.5-2 3-2 1.2 0 1.8 1 3 1v3c-1.8 0-2.5-1-3.2-1-.8 0-.8 2-2.8 2-3.4 0-2.4-6-4-6-1.8 0-2.5 10-8 10z'/%3E%3C/svg%3E");
}

.mega-symbol-background {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v14H4zm2 10h12l-4-5-3 4-2-2zm11-8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM3 3l18 18 1-1L4 2z'/%3E%3C/svg%3E");
}

.mega-symbol-enhance {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l2.2 5.8L20 10l-5.8 2.2L12 18l-2.2-5.8L4 10l5.8-2.2zM19 15l1 2.5 2.5 1-2.5 1-1 2.5-1-2.5-2.5-1 2.5-1z'/%3E%3C/svg%3E");
}

.idcard-mega {
  width: min(580px, 100%);
  margin: 0 auto;
  padding: 16px 18px 18px;
}

.idcard-mega-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.idcard-head-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.idcard-head-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #f97316;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18v14H3zm3 4h6v2H6zm0 4h9v2H6zm13-3a2 2 0 1 0-4 0 2 2 0 0 0 4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18v14H3zm3 4h6v2H6zm0 4h9v2H6zm13-3a2 2 0 1 0-4 0 2 2 0 0 0 4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.idcard-mega-head h3 {
  margin: 0;
  color: #b45309;
  font-size: 16px;
  line-height: 1.2;
}

.idcard-mega-head p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 11px;
}

.idcard-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.idcard-mega-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-radius: 10px;
  padding: 6px;
  transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.idcard-mega-item:hover,
.idcard-mega-item:focus {
  background: #f8fafc;
  box-shadow: inset 3px 0 0 #f97316;
  outline: 0;
}

.idcard-mega-item strong {
  display: block;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;
}

.idcard-mega-item small {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 3px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.3;
  white-space: normal;
}

.idcard-thumb {
  width: 64px;
  height: 38px;
  display: block;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.mega-text {
  display: block;
  min-width: 0;
}

.mega-row strong {
  display: block;
  overflow: visible;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.22;
  white-space: normal;
}

.mega-row small {
  display: inline-flex;
  margin-top: 2px;
  border-radius: 999px;
  background: #fee2e2;
  color: #ef4444;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.mega-row em {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.mega-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: #eef6ff;
}

.mega-footer strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
  color: #0f172a;
  font-size: 12px;
}

.mega-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid #dbeafe;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

.mega-footer a:hover,
.mega-footer a:focus {
  border-color: #93c5fd;
  color: #0b63ff;
}

.mega-footer .mega-view-all {
  margin-left: auto;
  border-color: transparent;
  background: transparent;
  color: #0b4db3;
  font-weight: 850;
}

.menu-btn {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.menu-btn {
  display: none;
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  padding: 8px 16px 14px;
  background: var(--panel);
}

.mobile-nav.open {
  display: grid;
}

.mobile-nav a {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-weight: 700;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(420px, 0.44fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  overflow: hidden;
  width: 100%;
  min-height: 420px;
  padding: 28px max(32px, calc((100vw - 1180px) / 2)) 28px;
  background:
    radial-gradient(circle at 68% 28%, rgba(14, 165, 233, 0.14), transparent 28%),
    linear-gradient(105deg, #f8fbff 0%, #ffffff 44%, #eef4ff 100%);
  box-shadow: inset 0 -1px 0 rgba(226, 232, 240, 0.8);
}

.eyebrow {
  display: inline-flex;
  border-radius: 999px;
  background: #f3e8ff;
  color: var(--purple-dark);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
}

html.dark .eyebrow {
  background: #26184a;
  color: #d8b4fe;
}

.hero h1,
.tool-hero h1,
.simple-page h1,
.not-found h1 {
  margin: 16px 0 0;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.14;
  letter-spacing: 0;
}

.hero h1 {
  max-width: 620px;
  margin-top: 0;
  color: #0b1736;
  font-weight: 900;
}

.hero h1 span {
  background: linear-gradient(90deg, #7c3aed, #0b63ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p,
.tool-hero p,
.simple-page p {
  color: var(--muted);
  line-height: 1.7;
  max-width: 620px;
}

.hero p {
  max-width: 620px;
  margin: 12px 0 0;
  color: #334155;
  font-size: 17px;
  line-height: 1.55;
}

.hero p strong {
  color: #0b63ff;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.primary-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 10px;
  padding: 0 18px;
  border: 1px solid transparent;
  font-weight: 850;
  cursor: pointer;
}

.primary-btn {
  background: linear-gradient(90deg, var(--indigo), var(--purple));
  color: white;
  box-shadow: 0 10px 20px rgba(124, 58, 237, 0.2);
}

.secondary-btn {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
}

.full {
  width: 100%;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hero-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(88px, 1fr));
  gap: 14px;
  margin-top: 24px;
  max-width: 560px;
}

.hero-card,
.tool-card,
.panel,
.feature-strip,
.category-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.hero-card,
.tool-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hero-card {
  place-items: center;
  min-height: 100px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.09);
}

.hero-card:hover,
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.hero-card > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  background: #f5f3ff;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
}

.hero-card-blue > span {
  background: #1062ff;
}

.hero-card-red > span {
  background: #dc2626;
}

.hero-card-green > span {
  background: #16a34a;
}

.hero-card-orange > span {
  background: #f97316;
}

.hero-card-purple > span {
  background: #7c3aed;
}

.hero-card strong,
.tool-card strong {
  color: var(--text);
}

.hero-card strong {
  font-size: 12px;
  line-height: 1.25;
}

.hero-card small,
.tool-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.hero-visual {
  overflow: visible;
  align-self: center;
  justify-self: end;
  width: min(100%, 860px);
  min-height: 0;
  border-radius: 8px;
}

.hero-visual img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 560px;
  object-fit: contain;
  object-position: right center;
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: start;
  gap: 20px;
  width: 100%;
  max-width: 720px;
  padding: 0;
  margin-top: 20px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.feature-strip div {
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 26px;
  padding-left: 28px;
}

.feature-strip div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #16a34a;
  transform: translateY(-50%);
}

.feature-strip div::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 5px;
  height: 8px;
  border: solid #16a34a;
  border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg);
}

.feature-strip strong {
  display: block;
  color: #0b1736;
  font-size: 14px;
  line-height: 1.2;
}

.feature-strip span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.tool-section {
  padding: 48px 0 0;
}

.section-title {
  text-align: center;
  margin-bottom: 22px;
}

.section-title h2,
.related h2 {
  margin: 0;
  font-size: 30px;
}

.section-title p {
  margin: 8px 0 0;
  color: var(--muted);
}

.category-block {
  padding: 18px;
  margin-top: 18px;
}

.category-block h3 {
  margin: 0 0 12px;
}

.home-tools {
  display: grid;
  gap: 18px;
  padding: 22px 0 0;
}

.home-tool-panel,
.why-strip,
.home-help-card,
.home-support-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.home-tool-panel {
  padding: 18px;
}

.home-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.home-panel-head h2 {
  margin: 0;
  color: #0b1736;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.15;
}

.home-panel-head h2 span {
  color: #0ea5a5;
}

.home-panel-head a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  color: #0b4db3;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.home-panel-head-green a {
  border-color: #dcfce7;
  color: #15803d;
}

.home-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
}

.home-tool-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 112px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.home-tool-card:hover,
.home-tool-card:focus {
  border-color: #bfdbfe;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  outline: 0;
}

.home-tool-icon {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border-radius: 9px;
}

.home-tool-icon::before {
  width: 25px;
  height: 25px;
}

.home-tool-card strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.2;
}

.home-tool-card small {
  display: block;
  margin-top: 7px;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

.home-promo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-promo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(180px, 1fr);
  gap: 10px;
  min-height: 182px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 18px 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.home-promo-passport {
  background: linear-gradient(135deg, #eef6ff, #ffffff);
}

.home-promo-id {
  background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.home-promo-age {
  background: linear-gradient(135deg, #f5f3ff, #ffffff);
}

.home-promo strong {
  display: block;
  margin-bottom: 9px;
  font-size: 18px;
  line-height: 1.15;
}

.home-promo-passport strong {
  color: #0b4db3;
}

.home-promo-id strong {
  color: #c2410c;
}

.home-promo-age strong {
  color: #6d28d9;
}

.home-promo small {
  position: relative;
  display: block;
  margin-top: 6px;
  padding-left: 18px;
  color: #334155;
  font-size: 12px;
  line-height: 1.25;
}

.home-promo small::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 8px;
  height: 5px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.home-promo b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 12px;
  border-radius: 7px;
  background: #0b63ff;
  color: #ffffff;
  padding: 0 13px;
  font-size: 12px;
  line-height: 1;
}

.home-promo-id b {
  background: #f97316;
}

.home-promo-age b {
  background: #7c3aed;
}

.passport-preview,
.id-preview,
.calendar-preview {
  align-self: center;
  justify-self: end;
}

.home-promo-visual {
  display: grid;
  place-items: center;
  width: min(100%, 250px);
  min-height: 148px;
}

.home-promo-visual img {
  display: block;
  max-width: 100%;
  max-height: 188px;
  object-fit: contain;
}

.passport-preview img {
  max-height: 196px;
}

.id-preview img {
  max-height: 182px;
}

.calendar-preview img {
  max-height: 178px;
}

.why-strip {
  padding: 10px 18px 14px;
}

.why-strip h2 {
  margin: 0 0 10px;
  color: #0b1736;
  text-align: center;
  font-size: 19px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.why-grid div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 5px 10px;
  align-items: center;
  min-width: 0;
}

.why-grid strong {
  color: #0f172a;
  font-size: 12px;
  line-height: 1.15;
}

.why-grid small {
  grid-column: 2;
  color: #475569;
  font-size: 11px;
  line-height: 1.35;
}

.why-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
}

.why-icon::before {
  content: "";
  width: 23px;
  height: 23px;
  background: currentColor;
  -webkit-mask: var(--why-mask) center / contain no-repeat;
  mask: var(--why-mask) center / contain no-repeat;
}

.why-fast {
  color: #0b63ff;
  --why-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2L3 14h7l-1 8 10-12h-7z'/%3E%3C/svg%3E");
}

.why-secure {
  color: #16a34a;
  --why-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V7a5 5 0 0 1 10 0v3h2v11H5V10zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E");
}

.why-mobile {
  color: #7c3aed;
  --why-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10v20H7zm2 3v14h6V5z'/%3E%3C/svg%3E");
}

.why-cloud {
  color: #f97316;
  --why-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 19a6 6 0 0 1-.5-12A7 7 0 0 1 21 10a4.5 4.5 0 0 1-1.5 9z'/%3E%3C/svg%3E");
}

.why-free {
  color: #db2777;
  --why-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 7h-3.2A3 3 0 0 0 12 3.5 3 3 0 0 0 7.2 7H4v5h1v9h14v-9h1zM9 5a1 1 0 0 1 1 1v1H8a2 2 0 0 1 1-2zm5 1a1 1 0 0 1 2 1h-2z'/%3E%3C/svg%3E");
}

.why-support {
  color: #0b63ff;
  --why-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-7H6v-1a6 6 0 0 1 12 0v1h-3v7h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8z'/%3E%3C/svg%3E");
}

.home-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .98fr);
  gap: 14px;
}

.home-help-card,
.home-support-card {
  display: grid;
  align-items: center;
  min-height: 136px;
  padding: 16px 18px;
}

.home-help-card {
  grid-template-columns: 64px minmax(0, 1fr) 116px;
  gap: 14px;
}

.home-support-card {
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 12px;
  background: linear-gradient(135deg, #f8fbff, #ffffff);
}

.home-help-card h2,
.home-support-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
}

.home-help-card p,
.home-support-card p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.home-support-card p strong {
  display: inline-block;
  min-width: 66px;
  color: #0f172a;
}

.coffee-note {
  max-width: 560px;
  margin-top: 10px;
}

.coffee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-top: 14px;
  border-radius: 8px;
  background: #0f9f5a;
  color: #ffffff;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(15, 159, 90, 0.22);
}

.coffee-btn:hover,
.coffee-btn:focus {
  background: #0b8c4e;
}

.home-help-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 10px;
  border-radius: 7px;
  background: #16a34a;
  color: #ffffff;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 850;
}

.home-help-card img {
  width: 112px;
  height: 112px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
}

.whatsapp-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(37, 211, 102, 0.24);
}

.whatsapp-mark::before {
  content: "";
  width: 32px;
  height: 32px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-support-image {
  display: block;
  width: min(100%, 230px);
  max-height: 150px;
  justify-self: center;
  object-fit: contain;
}

.home-coffee-qr {
  display: block;
  width: min(100%, 160px);
  aspect-ratio: 1;
  justify-self: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  object-fit: cover;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.coffee-support-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 28px;
  align-items: center;
  margin-top: 24px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.coffee-support-panel h2 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 22px;
}

.coffee-support-panel p {
  margin: 0;
  color: #475569;
  line-height: 1.65;
  max-width: 640px;
}

.coffee-support-panel img {
  width: min(100%, 360px);
  max-height: 520px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  object-fit: contain;
}

.tool-hero {
  width: min(760px, calc(100% - 32px));
  padding: 16px 0 18px;
  text-align: center;
}

.tool-hero p {
  margin-left: auto;
  margin-right: auto;
}

.compact-tool-hero {
  width: min(760px, calc(100% - 32px));
  padding: 16px 0 18px;
}

.tool-hero .eyebrow,
.compact-tool-hero .eyebrow {
  padding: 5px 12px;
  font-size: 11px;
}

.tool-hero h1,
.compact-tool-hero h1 {
  margin-top: 10px;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.05;
}

.tool-hero p,
.compact-tool-hero p {
  max-width: 560px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
}

.tool-titlebar {
  width: min(100% - 48px, 1560px);
  margin: 18px auto 14px;
  padding: 0;
  text-align: center;
}

.tool-titlebar h1 {
  margin: 0;
  color: #0b1736;
  font-size: clamp(23px, 2.6vw, 34px);
  line-height: 1.15;
  font-weight: 900;
}

.tool-titlebar h1 b {
  color: #5b21e8;
}

.workspace {
  margin-top: 12px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.steps span {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.steps .active {
  background: #f3e8ff;
  color: var(--purple-dark);
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 16px;
  align-items: start;
}

.panel {
  padding: 18px;
}

.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 210px;
  border: 2px dashed #c4b5fd;
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel-soft) 70%, transparent);
  text-align: center;
  cursor: pointer;
}

.dropzone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dropzone strong {
  font-size: 18px;
}

.dropzone small,
.muted {
  color: var(--muted);
}

.file-list,
.result-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.file-row,
.result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--panel-soft);
  font-size: 13px;
}

.file-row > span,
.result-row > span {
  min-width: 0;
  flex: 1 1 auto;
}

.file-row strong,
.result-row strong {
  display: inline-block;
  max-width: min(100%, 220px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.file-row .primary-btn,
.file-row .secondary-btn,
.result-row .primary-btn,
.result-row .secondary-btn,
.result-row a {
  flex: 0 0 auto;
}

.file-row small {
  color: var(--muted);
}

.preview-canvas {
  display: none;
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
}

.preview-canvas.ready {
  display: block;
}

.qrscan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.qrscan-preview-panel {
  min-height: 540px;
}

.qrscan-camera {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 480px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 16px;
}

.qrscan-camera video,
.qrscan-camera canvas {
  display: none;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  background: white;
  box-shadow: var(--shadow);
}

.qrscan-camera video.ready,
.qrscan-camera canvas.ready {
  display: block;
}

.qrscan-upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 118px;
  margin-bottom: 14px;
  border: 2px dashed var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
  cursor: pointer;
  font-weight: 800;
}

.qrscan-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.qrscan-controls textarea {
  resize: vertical;
}

.affidavit-grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.affidavit-controls {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.affidavit-controls h2 {
  margin: 0;
  font-size: 18px;
}

.affidavit-preview-panel {
  overflow: auto;
}

.affidavit-paper {
  width: min(100%, 794px);
  min-height: 1123px;
  margin: 0 auto;
  padding: 74px 68px;
  border: 1px solid var(--border);
  background: white;
  color: #111827;
  box-shadow: var(--shadow);
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.7;
}

.affidavit-paper h1 {
  margin: 0 0 34px;
  text-align: center;
  text-decoration: underline;
  font-size: 22px;
  letter-spacing: 0;
}

.affidavit-paper h2 {
  margin: 34px 0 12px;
  text-align: center;
  text-decoration: underline;
  font-size: 18px;
}

.affidavit-paper p {
  margin: 0 0 16px;
  text-align: justify;
}

.affidavit-sign-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 46px;
  font-weight: 700;
}

.resume-grid {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.resume-controls {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.resume-controls h2 {
  margin: 0;
  font-size: 18px;
}

.route-note {
  margin: -4px 0 2px;
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}

.resume-preview-panel {
  overflow: auto;
}

.resume-paper {
  --resume-accent: #2563eb;
  width: min(100%, 794px);
  min-height: 1123px;
  margin: 0 auto;
  padding: 58px 62px;
  border: 1px solid var(--border);
  background: white;
  color: #111827;
  box-shadow: var(--shadow);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

.resume-paper header {
  margin-bottom: 26px;
  border-bottom: 3px solid var(--resume-accent);
  padding-bottom: 18px;
}

.resume-paper h1 {
  margin: 0;
  color: var(--resume-accent);
  font-size: 34px;
  letter-spacing: 0;
}

.resume-paper h3 {
  margin: 5px 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.resume-paper h2 {
  margin: 22px 0 8px;
  color: var(--resume-accent);
  border-bottom: 1px solid #d1d5db;
  padding-bottom: 4px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.resume-paper p {
  margin: 0 0 7px;
}

.resume-bullet::before {
  content: "- ";
  font-weight: 700;
}

.resume-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.resume-skills span {
  border: 1px solid color-mix(in srgb, var(--resume-accent) 38%, #d1d5db);
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--resume-accent) 8%, white);
  color: #111827;
  font-size: 12px;
}

.resume-template-ats {
  font-family: Arial, Helvetica, sans-serif;
}

.resume-template-ats header,
.resume-template-government header {
  border-bottom: 1px solid #111827;
}

.resume-template-ats h1,
.resume-template-ats h2,
.resume-template-government h1,
.resume-template-government h2 {
  color: #111827;
}

.resume-template-modern header {
  background: color-mix(in srgb, var(--resume-accent) 8%, white);
  border-radius: 8px;
  border-bottom: 0;
  padding: 20px;
}

.resume-template-professional h1 {
  font-family: Georgia, "Times New Roman", serif;
}

.vcard-grid {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.vcard-controls {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.vcard-controls h2 {
  margin: 0;
  font-size: 18px;
}

.vcard-preview-stack {
  display: grid;
  gap: 18px;
  justify-items: center;
}

.vcard-preview-stack canvas {
  display: none;
  width: min(100%, 640px);
  height: auto;
  border-radius: 12px;
  background: white;
  box-shadow: var(--shadow);
}

.vcard-preview-stack canvas.ready {
  display: block;
}

.schoolid-grid {
  display: grid;
  grid-template-columns: 410px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.schoolid-controls {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.schoolid-controls h2 {
  margin: 0;
  font-size: 18px;
}

.schoolid-controls textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.schoolid-preview-panel {
  position: sticky;
  top: 82px;
}

.schoolid-preview-box {
  min-height: 460px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid var(--line);
  overflow: auto;
  padding: 16px;
}

.schoolid-preview-box canvas {
  display: none;
  max-width: 100%;
  width: auto;
  max-height: 76vh;
  height: auto;
  background: white;
  box-shadow: var(--shadow);
}

.schoolid-preview-box canvas.ready {
  display: block;
}

.annotate-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.annotate-controls {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.annotate-controls h2 {
  margin: 0;
  font-size: 18px;
}

.annotate-upload {
  min-height: 120px;
}

.annotate-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-height: 520px;
  background: #eef2f7;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
  padding: 16px;
}

.annotate-stage canvas {
  display: none;
  max-width: 100%;
  height: auto;
  background: white;
  box-shadow: var(--shadow);
}

.annotate-stage canvas.ready {
  display: block;
}

.annotate-mark {
  position: absolute;
  cursor: move;
  user-select: none;
  border: 1px dashed color-mix(in srgb, var(--brand) 70%, white);
  background: rgba(255, 255, 255, 0.2);
  line-height: 1.1;
}

.annotate-mark button {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: #ef4444;
  color: white;
  font-size: 12px;
  cursor: pointer;
}

.annotate-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.annotate-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.annotate-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: var(--panel-soft);
  font-size: 12px;
}

.annotate-row button {
  border: 0;
  background: transparent;
  color: #ef4444;
  cursor: pointer;
}

.pdfform-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.pdfform-controls {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.pdfform-controls h2 {
  margin: 0;
  font-size: 18px;
}

.pdfform-upload {
  min-height: 120px;
}

.pdfform-fields {
  display: grid;
  gap: 12px;
}

.pdfform-row {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-soft);
  padding: 12px;
}

.pdfform-row label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pdfform-row input[type="text"],
.pdfform-row select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
}

.pdfform-row small {
  color: var(--muted);
}

.dxf-grid {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.dxf-grid > *,
.dxf-controls > *,
.dxf-preview-panel {
  min-width: 0;
}

.dxf-controls {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
  overflow: hidden;
}

.dxf-controls h2 {
  margin: 0;
  font-size: 18px;
}

.dxf-upload {
  width: 100%;
  min-height: 128px;
  padding: 18px;
  border-radius: 10px;
  overflow: hidden;
}

.dxf-upload strong,
.dxf-upload small,
.dxf-status,
.dxf-controls .muted {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.dxf-controls label:not(.dropzone) {
  display: grid;
  gap: 8px;
  color: #0f172a;
  font-weight: 800;
}

.dxf-controls input[type="range"] {
  width: 100%;
  min-width: 0;
}

.dxf-controls .button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dxf-controls .button-row button {
  min-width: 0;
  white-space: normal;
}

.dxf-preview {
  position: relative;
  display: grid;
  min-height: clamp(320px, 46vw, 560px);
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--panel-soft) 80%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--panel-soft) 80%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--panel-soft) 80%, transparent) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--panel-soft) 80%, transparent) 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.dxf-preview img {
  display: none;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
}

.dxf-preview img.ready {
  display: block;
}

.dxf-preview iframe {
  display: none;
  width: 100%;
  max-width: 900px;
  height: clamp(300px, 44vw, 540px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.dxf-preview iframe.ready {
  display: block;
}

.aibg-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.aibg-controls {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.aibg-controls h2 {
  margin: 0;
  font-size: 18px;
}

.aibg-upload {
  min-height: 128px;
}

.aibg-list {
  display: grid;
  gap: 12px;
}

.aibg-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-soft);
  padding: 12px;
}

.aibg-thumb {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: conic-gradient(#e5e7eb 25%, #fff 0 50%, #e5e7eb 0 75%, #fff 0) 0 0 / 20px 20px;
}

.aibg-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.aibg-row small {
  color: var(--muted);
}

.aibg-progress {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.aibg-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #22c55e);
  transition: width .2s ease;
}

.heic-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.heic-controls {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.heic-controls h2 {
  margin: 0;
  font-size: 18px;
}

.heic-upload {
  min-height: 128px;
}

.heic-list {
  display: grid;
  gap: 12px;
}

.heic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-soft);
  padding: 12px;
}

.heic-row small {
  color: var(--muted);
}

.heic-row .progress {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.heic-row .progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #22c55e);
  transition: width .2s ease;
}

.options-panel {
  position: sticky;
  top: 82px;
}

.options-panel h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.option {
  display: grid;
  gap: 6px;
  margin-bottom: 13px;
}

.option label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.option input,
.option select,
.option textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
}

.pdf-options,
.passport-options {
  display: none;
}

[data-tool-mode="pdf"] .pdf-options,
[data-tool-mode="pdfhub"] .pdf-options,
[data-tool-mode="textpdf"] .textpdf-options,
[data-tool-mode="passport"] .passport-options {
  display: grid;
}

[data-tool-mode="pdf"] .image-options,
[data-tool-mode="pdfhub"] .image-options,
[data-tool-mode="textpdf"] .image-options {
  display: none;
}

.pdf-page-sort {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding: 2px;
}

.pdf-page-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-soft);
  padding: 8px;
  cursor: grab;
  display: grid;
  gap: 6px;
  user-select: none;
}

.pdf-page-card.dragging {
  opacity: 0.48;
  outline: 2px solid var(--brand);
}

.pdf-page-card canvas {
  width: 100%;
  height: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.pdf-page-card strong {
  font-size: 12px;
  color: var(--text);
}

.pdf-page-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pdf-page-actions button {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 5px;
  font-size: 12px;
  cursor: pointer;
}

.textpdf-options {
  display: none;
}

.qr-preview {
  display: grid;
  place-items: center;
  min-height: 420px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
}

.qr-preview canvas,
.qr-preview img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  background: white;
  padding: 12px;
  box-shadow: var(--shadow);
}

.calculator-result h2 {
  margin-top: 0;
}

.calc-output {
  display: grid;
  gap: 8px;
  min-height: 220px;
  border-radius: 14px;
  background: var(--panel-soft);
  padding: 18px;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.calc-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.calc-line small {
  color: var(--muted);
  font-size: 12px;
}

.calc-fields {
  display: grid;
  gap: 12px;
}

.calc-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.agecalc-workspace {
  padding-top: 0;
}

.agecalc-grid {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.agecalc-panel,
.agecalc-dashboard {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.agecalc-controls {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.agecalc-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agecalc-step {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1d4ed8, #7c3aed);
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.agecalc-panel-head h2,
.agecalc-info-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.15;
}

.agecalc-panel-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.agecalc-form {
  display: grid;
  gap: 13px;
}

.agecalc-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.agecalc-form input,
.agecalc-form select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
}

.agecalc-date-field {
  position: relative;
  display: block;
}

.agecalc-date-field::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  background: #0f172a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3zm11 8H6v10h12z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3zm11 8H6v10h12z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agecalc-toggle {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px !important;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  padding: 12px;
  background: #f8fbff;
}

.agecalc-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.agecalc-toggle span {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background-color 0.2s ease;
}

.agecalc-toggle span::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
  transition: transform 0.2s ease;
}

.agecalc-toggle input:checked + span {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.agecalc-toggle input:checked + span::before {
  transform: translateX(20px);
}

.agecalc-toggle strong {
  color: #0f172a;
  font-size: 14px;
}

.agecalc-cta {
  min-height: 54px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  font-size: 16px;
  box-shadow: 0 16px 30px rgba(79, 70, 229, 0.22);
}

.agecalc-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 10px;
}

.agecalc-reset {
  min-height: 54px;
  border-radius: 10px;
  font-size: 16px;
}

.agecalc-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.agecalc-quick-grid button {
  display: grid;
  gap: 6px;
  min-height: 86px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.agecalc-quick-grid span {
  font-size: 20px;
}

.agecalc-quick-grid strong {
  font-size: 13px;
  line-height: 1.2;
}

.agecalc-dashboard {
  display: grid;
  gap: 16px;
  padding: 18px;
  min-width: 0;
}

.agecalc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.agecalc-tabs button {
  min-height: 38px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 16px;
  font-weight: 900;
  cursor: pointer;
}

.agecalc-tabs button.active,
.agecalc-quick-grid button.active {
  border-color: #6d5dfc;
  background: #f1edff;
  color: #3b25e8;
}

.agecalc-result-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 12%, rgba(124, 58, 237, 0.46), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(37, 99, 235, 0.4), transparent 34%),
    linear-gradient(135deg, #0f172a, #1e1b4b 52%, #082f49);
  padding: 52px 20px 24px;
  color: #ffffff;
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.22);
}

.agecalc-badge {
  position: absolute;
  right: 16px;
  top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  padding: 7px 11px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
}

.agecalc-badge strong {
  color: #ffffff;
}

.agecalc-rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 18px;
}

.agecalc-ring {
  --ring-color: #8b5cf6;
  --progress: 0%;
  display: grid;
  place-items: center;
  width: min(100%, 190px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, #111827 58%, transparent 59%),
    conic-gradient(var(--ring-color) var(--progress), rgba(255, 255, 255, 0.14) 0);
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--ring-color), transparent 62%));
  transition: background 0.35s ease, transform 0.25s ease;
}

.agecalc-ring.blue {
  --ring-color: #38bdf8;
}

.agecalc-ring.green {
  --ring-color: #22c55e;
}

.agecalc-ring div {
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.92);
}

.agecalc-ring strong {
  color: #ffffff;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
}

.agecalc-ring span {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 900;
}

.agecalc-zodiac {
  margin-top: 16px;
  text-align: center;
  color: #cbd5e1;
  font-weight: 800;
}

.agecalc-zodiac strong {
  color: #86efac;
}

.agecalc-stat-grid,
.agecalc-bottom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.agecalc-stat {
  display: grid;
  gap: 4px;
  border: 1px solid #e0e7ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f7f8ff);
  padding: 14px;
  box-shadow: 0 12px 26px rgba(79, 70, 229, 0.08);
}

.agecalc-stat span {
  font-size: 20px;
}

.agecalc-stat small,
.agecalc-summary-bar small,
.agecalc-retirement-grid small {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.agecalc-stat strong {
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.1;
}

.agecalc-bottom-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.agecalc-info-card {
  min-width: 0;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  padding: 16px;
  background: #ffffff;
}

.agecalc-info-card.birthday {
  background: linear-gradient(135deg, #fff7ed, #f5f3ff);
}

.agecalc-info-card.retirement {
  background: linear-gradient(135deg, #ecfdf5, #e0f2fe);
}

.agecalc-workspace.is-private-employee [data-agecalc-retirement-control],
.agecalc-workspace.is-private-employee [data-agecalc-retirement-only],
.agecalc-workspace.is-private-employee .agecalc-info-card.retirement {
  display: none;
}

.agecalc-workspace.is-private-employee .agecalc-bottom-grid {
  grid-template-columns: minmax(0, 1fr);
}

.agecalc-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.agecalc-card-title span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.agecalc-countdown,
.agecalc-retirement-grid,
.agecalc-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.agecalc-countdown div,
.agecalc-retirement-grid div,
.agecalc-summary-bar div {
  min-width: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  padding: 12px;
}

.agecalc-countdown strong,
.agecalc-retirement-grid strong,
.agecalc-summary-bar strong {
  display: block;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.15;
}

.agecalc-countdown small {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.agecalc-retirement-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agecalc-summary-bar {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff, #ffffff);
  padding: 12px;
}

@media (max-width: 1180px) {
  .agecalc-grid {
    grid-template-columns: 1fr;
  }

  .agecalc-controls {
    position: static;
  }
}

@media (max-width: 820px) {
  .agecalc-workspace {
    padding-inline: 12px;
  }

  .agecalc-controls,
  .agecalc-dashboard {
    padding: 14px;
  }

  .agecalc-rings,
  .agecalc-stat-grid,
  .agecalc-bottom-grid,
  .agecalc-summary-bar {
    grid-template-columns: 1fr;
  }

  .agecalc-result-card {
    padding-top: 74px;
  }

  .agecalc-badge {
    left: 14px;
    right: auto;
  }
}

@media (max-width: 560px) {
  .agecalc-quick-grid,
  .agecalc-countdown,
  .agecalc-retirement-grid,
  .agecalc-action-row {
    grid-template-columns: 1fr;
  }

  .agecalc-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agecalc-tabs button {
    width: 100%;
    padding-inline: 10px;
  }
}

.calc-fields input,
.calc-fields select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  padding: 10px 11px;
}

.mergepdf-workspace {
  width: min(1220px, calc(100% - 24px));
  margin-top: 8px;
}

.mergepdf-workspace [hidden] {
  display: none !important;
}

.mergepdf-app,
.mergepdf-feature-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.055);
}

.mergepdf-app {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: 430px;
  overflow: hidden;
}

.mergepdf-sidebar {
  border-right: 1px solid #e5eaf3;
  background: #fbfdff;
  padding: 18px 12px;
}

.mergepdf-sidebar h2 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 13px;
}

.mergepdf-sidebar a {
  display: flex;
  align-items: center;
  min-height: 32px;
  border-radius: 7px;
  color: #334155;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.mergepdf-sidebar a:hover,
.mergepdf-sidebar a.active {
  background: #f1edff;
  color: #351cf0;
}

.mergepdf-main {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-width: 0;
  padding: 20px 22px 18px;
}

.mergepdf-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.mergepdf-head h2,
.mergepdf-progress-panel h3,
.mergepdf-complete-panel h3 {
  margin: 0;
  color: #0f172a;
}

.mergepdf-head h2 {
  font-size: 24px;
}

.mergepdf-head p,
.mergepdf-progress-panel p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.mergepdf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.mergepdf-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: #eef2ff;
  color: #351cf0;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 850;
}

.mergepdf-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: #f1edff;
  color: #351cf0;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.mergepdf-drop {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 260px;
  border: 1.5px dashed #a78bfa;
  border-radius: 8px;
  background: #fbfaff;
  text-align: center;
  cursor: pointer;
}

.mergepdf-drop.dragging {
  border-color: #351cf0;
  background: #f2efff;
}

.mergepdf-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.mergepdf-upload-icon {
  position: relative;
  width: 60px;
  height: 44px;
  color: #351cf0;
}

.mergepdf-upload-icon::before {
  content: "";
  position: absolute;
  inset: 12px 4px 0;
  border: 5px solid currentColor;
  border-radius: 999px 999px 7px 7px;
  border-bottom-width: 4px;
}

.mergepdf-upload-icon::after {
  content: "↑";
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  color: currentColor;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.mergepdf-drop strong {
  color: #0f172a;
  font-size: 15px;
}

.mergepdf-drop small,
.mergepdf-drop em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.mergepdf-drop b {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  border-radius: 7px;
  background: linear-gradient(135deg, #351cf0, #7c3aed);
  color: #ffffff;
  padding: 0 24px;
  font-size: 13px;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.2);
}

.pdfconvert-workspace {
  margin-top: 12px;
}

.pdfconvert-app {
  min-height: 520px;
}

.pdfconvert-main {
  grid-template-rows: auto 1fr auto;
}

.pdfconvert-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.pdfconvert-drop {
  min-height: 300px;
}

.pdfconvert-options {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 12px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fbfdff;
  padding: 16px;
}

.pdfconvert-options h3 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
}

.pdfconvert-options .muted {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.pdfconvert-actions {
  display: grid;
  gap: 8px;
}

.pdfconvert-file-list,
.pdfconvert-results {
  margin-top: 12px;
}

.pdfconvert-results:empty {
  display: none;
}

.image-tools-workspace {
  margin-top: 12px;
}

.image-tools-app {
  min-height: 560px;
}

.image-tools-main {
  grid-template-rows: auto 1fr auto;
}

.image-tools-sidebar {
  gap: 4px;
}

.image-tools-sidebar h3 {
  display: block;
  margin: 12px 10px 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.image-tools-sidebar h2 + h3 {
  margin-top: 4px;
}

.image-sidebar-group {
  display: block;
  margin: 12px 10px 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.image-tools-sidebar h2 + .image-sidebar-group {
  margin-top: 4px;
}

.image-tools-inner-grid {
  align-items: start;
}

.image-tools-embedded-shell {
  width: 100%;
}

.imageconvert-options [data-image-height],
.imageconvert-options [data-image-rotate],
.imageconvert-options [data-image-merge-layout] {
  display: block;
}

.compress-image-app {
  min-height: 620px;
}

.compress-image-app .image-tools-main {
  grid-template-rows: auto 1fr;
  padding: 18px;
}

.compress-image-head {
  align-items: center;
  margin-bottom: 12px;
}

.compress-image-head h2 {
  font-size: 22px;
}

.compress-image-head p {
  max-width: 520px;
  font-size: 12px;
}

.compress-image-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.compress-image-left,
.compress-image-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.compress-image-steps,
.compress-image-card,
.compress-image-side-card {
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.compress-image-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.compress-image-steps span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  min-width: 0;
}

.compress-image-steps b {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border: 1px solid #dbe3ef;
  border-radius: 50%;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.compress-image-steps .active b {
  border-color: transparent;
  background: linear-gradient(135deg, #351cf0, #7c3aed);
  color: #ffffff;
}

.compress-image-steps strong,
.compress-image-steps small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compress-image-steps strong {
  color: #0f172a;
  font-size: 11px;
}

.compress-image-steps small {
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
}

.compress-image-drop {
  min-height: 205px;
  padding: 18px;
}

.compress-image-drop .mergepdf-upload-icon {
  width: 54px;
  height: 40px;
}

.compress-image-drop strong {
  font-size: 14px;
}

.compress-image-drop small,
.compress-image-drop em {
  font-size: 11px;
}

.compress-image-drop b {
  min-height: 38px;
  padding: 0 24px;
  font-size: 12px;
}

.compress-image-card,
.compress-image-side-card {
  padding: 14px;
}

.compress-image-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.compress-image-card-head h3,
.compress-image-side-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
}

.compress-image-card-head small {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.compress-image-card-head button {
  border: 1px solid #ded8ff;
  border-radius: 7px;
  background: #fbfaff;
  color: #351cf0;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.compress-image-presets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.compress-image-presets button {
  min-height: 38px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.compress-image-presets button.active {
  border-color: #351cf0;
  background: linear-gradient(135deg, #351cf0, #7c3aed);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.18);
}

.compress-image-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 16px 0;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
}

.compress-image-divider::before,
.compress-image-divider::after {
  content: "";
  height: 1px;
  background: #e5eaf3;
}

.compress-image-hidden-options {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.compress-image-options {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 12px;
}

.compress-image-options .option {
  margin-bottom: 0;
}

.compress-image-options .option label {
  font-size: 10px;
}

.compress-image-options .option input,
.compress-image-options .option select {
  min-height: 38px;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
}

.compress-image-file-list {
  margin-top: 0;
}

.compress-image-file-list:empty::before {
  content: "No image selected yet.";
  display: block;
  border: 1px dashed #dbe3ef;
  border-radius: 8px;
  color: #64748b;
  padding: 13px;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
}

.compress-image-file-list .file-row,
.compress-image-results .result-row {
  border-radius: 8px;
  background: #fbfdff;
  padding: 9px 10px;
  font-size: 12px;
}

.compress-image-file-list .file-row > span,
.compress-image-results .result-row > span {
  min-width: 0;
  flex: 1 1 auto;
}

.compress-image-file-list .file-row strong,
.compress-image-results .result-row strong {
  display: inline-block;
  max-width: min(100%, 170px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compress-image-results .result-row strong {
  max-width: 15ch;
}

.compress-image-file-list .file-row .secondary-btn,
.compress-image-results .result-row .primary-btn {
  flex: 0 0 auto;
  min-height: 30px;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 11px;
}

.compress-image-actions {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.compress-image-actions .primary-btn,
.compress-image-actions .secondary-btn {
  min-height: 42px;
  border-radius: 7px;
  font-size: 13px;
}

.compress-image-side {
  position: sticky;
  top: 82px;
}

.compress-image-side-card {
  overflow: hidden;
}

.compress-image-ring {
  display: grid;
  place-items: center;
  width: 96px;
  aspect-ratio: 1;
  margin: 16px auto;
  border: 9px solid #e8fff2;
  border-top-color: #12b76a;
  border-radius: 50%;
}

.compress-image-ring strong {
  color: #12a866;
  font-size: 22px;
  line-height: 1;
}

.compress-image-ring small {
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
}

.compress-image-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-top: 1px solid #edf2f7;
  padding-top: 12px;
}

.compress-image-summary-grid small {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
}

.compress-image-summary-grid strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 12px;
}

.compress-image-preview {
  max-height: 220px;
  margin-top: 12px;
  border-radius: 8px;
}

.compress-image-preview.ready + .compress-image-empty-preview {
  display: none;
}

.compress-image-empty-preview {
  margin: 12px 0 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.compress-image-tips {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.compress-image-tips li {
  position: relative;
  padding-left: 18px;
  color: #334155;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.compress-image-tips li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #0ea66b;
  font-weight: 900;
}

.compress-image-results {
  margin-top: 12px;
}

.compress-image-results:empty::before {
  content: "Compressed images will appear here.";
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.rotateimage-workspace {
  width: min(1220px, calc(100% - 24px));
  margin-top: 14px;
}

.rotateimage-app {
  min-height: 640px;
}

.rotateimage-main {
  grid-template-rows: auto 1fr auto;
  padding: 18px;
}

.rotateimage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.rotateimage-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 26px;
  line-height: 1.1;
}

.rotateimage-head p {
  margin: 8px 0 0;
  color: #334155;
  font-size: 13px;
  font-weight: 650;
}

.rotateimage-head > span {
  display: grid;
  justify-items: end;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.rotateimage-head > span small {
  color: #64748b;
  font-size: 10px;
}

.rotateimage-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.rotateimage-upload-card,
.rotateimage-mode-card {
  grid-column: span 3;
}

.rotateimage-review-card,
.rotateimage-download-card {
  grid-column: span 3;
}

.rotateimage-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.rotateimage-preview-step {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #e5eaf3;
}

.rotateimage-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.rotateimage-step b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #351cf0, #7c3aed);
  color: #fff;
  font-size: 12px;
  flex: 0 0 auto;
}

.rotateimage-step strong,
.rotateimage-step small {
  display: block;
}

.rotateimage-step strong {
  color: #0f172a;
  font-size: 12px;
  text-transform: uppercase;
}

.rotateimage-step small {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 750;
}

.rotateimage-drop {
  min-height: 170px;
  padding: 16px;
}

.rotateimage-card-head,
.rotateimage-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rotateimage-card-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 12px;
}

.rotateimage-card-head button {
  border: 0;
  background: transparent;
  color: #351cf0;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.rotateimage-files,
.rotateimage-preview-grid,
.rotateimage-downloads,
.rotateimage-jobs {
  display: grid;
  gap: 10px;
}

.rotateimage-files {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rotateimage-empty {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.rotateimage-file,
.rotateimage-preview {
  position: relative;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fbfdff;
  padding: 9px;
}

.rotateimage-file button {
  position: absolute;
  right: 6px;
  top: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #e5eaf3;
  border-radius: 50%;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
}

.rotateimage-file img,
.rotateimage-preview img {
  width: 100%;
  height: 110px;
  border-radius: 6px;
  object-fit: contain;
  background: #ffffff;
}

.rotateimage-file strong,
.rotateimage-preview strong,
.rotateimage-download-row strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rotateimage-file small,
.rotateimage-preview small,
.rotateimage-download-row small {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
}

.rotateimage-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.rotateimage-mode button {
  display: grid;
  gap: 8px;
  min-height: 118px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.rotateimage-mode button.active {
  border-color: #7c3aed;
  background: #fbfaff;
  box-shadow: inset 0 0 0 1px #c4b5fd;
}

.rotateimage-mode button span {
  width: 14px;
  height: 14px;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
}

.rotateimage-mode button.active span {
  border: 4px solid #6d35f4;
}

.rotateimage-mode strong {
  font-size: 12px;
}

.rotateimage-mode small,
.rotateimage-note {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.rotateimage-note {
  border: 1px solid #cfe8ff;
  border-radius: 7px;
  background: #eff8ff;
  color: #075985;
  padding: 10px;
}

.rotateimage-range {
  display: grid;
  gap: 12px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
}

.rotateimage-range span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px auto;
  gap: 12px;
  align-items: center;
}

.rotateimage-range input {
  accent-color: #6d35f4;
}

.rotateimage-range output {
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #fff;
}

.rotateimage-quick {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.rotateimage-quick button {
  min-height: 34px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #ffffff;
  color: #351cf0;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.rotateimage-quick button.active {
  border-color: #6d35f4;
  background: #f1edff;
}

.rotateimage-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 12px;
  align-items: center;
}

.rotateimage-progress[hidden],
.rotateimage-jobs[hidden] {
  display: none !important;
}

.rotateimage-progress strong {
  grid-column: 2;
  color: #0369a1;
  font-size: 18px;
}

.rotateimage-progress span {
  grid-column: 1;
  grid-row: 1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.rotateimage-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, #351cf0, #7c3aed);
}

.rotateimage-job,
.rotateimage-download-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  padding: 8px;
}

.rotateimage-job span {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.rotateimage-job img {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  object-fit: cover;
}

.rotateimage-preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rotateimage-preview b {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 11px;
}

.rotateimage-complete {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.rotateimage-complete span {
  display: grid;
  place-items: center;
  width: 64px;
  aspect-ratio: 1;
  border: 4px solid #0f9f68;
  border-radius: 50%;
  color: #0f9f68;
  font-size: 36px;
  font-weight: 900;
}

.rotateimage-complete strong {
  color: #0f172a;
  font-size: 14px;
}

.rotateimage-complete small {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

.rotateimage-download-row .secondary-btn {
  min-height: 32px;
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 11px;
}

.rotateimage-tips {
  display: grid;
  grid-template-columns: 150px repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 14px;
  border: 1px solid #ded8ff;
  border-radius: 8px;
  background: #fbfaff;
  overflow: hidden;
}

.rotateimage-tips span {
  display: flex;
  align-items: center;
  min-height: 50px;
  border-right: 1px solid #ede9fe;
  color: #334155;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 750;
}

.rotateimage-tips span:last-child {
  border-right: 0;
}

.rotateimage-tips strong {
  color: #351cf0;
}

.imagemerge-workspace {
  width: min(1220px, calc(100% - 24px));
  margin-top: 14px;
}

.imagemerge-app {
  min-height: 660px;
}

.imagemerge-main {
  padding: 18px;
}

.imagemerge-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.imagemerge-head h2 {
  margin: 6px 0 5px;
  color: #0f172a;
  font-size: 25px;
  line-height: 1.1;
}

.imagemerge-head p {
  margin: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.imagemerge-head > span {
  display: grid;
  justify-items: end;
  align-content: start;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.imagemerge-head > span small {
  color: #64748b;
  font-size: 10px;
}

.imagemerge-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.imagemerge-grid > .imagemerge-card:nth-child(1),
.imagemerge-grid > .imagemerge-card:nth-child(2) {
  grid-column: span 3;
}

.imagemerge-grid > .imagemerge-card:nth-child(3),
.imagemerge-grid > .imagemerge-card:nth-child(4),
.imagemerge-grid > .imagemerge-card:nth-child(5) {
  grid-column: span 2;
}

.imagemerge-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.imagemerge-step {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.imagemerge-step b {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: linear-gradient(135deg, #351cf0, #7c3aed);
  color: #fff;
  font-size: 11px;
  flex: 0 0 auto;
}

.imagemerge-step strong,
.imagemerge-step small {
  display: block;
}

.imagemerge-step strong {
  color: #0f172a;
  font-size: 11.5px;
  text-transform: uppercase;
}

.imagemerge-step small,
.imagemerge-note,
.imagemerge-empty-preview {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.35;
}

.imagemerge-drop {
  min-height: 150px;
  padding: 16px;
}

.imagemerge-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.imagemerge-card-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 12px;
}

.imagemerge-card-head button {
  border: 0;
  background: transparent;
  color: #351cf0;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.imagemerge-file-list {
  display: grid;
  max-height: 220px;
  overflow: auto;
  gap: 8px;
}

.imagemerge-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.imagemerge-layout button {
  min-height: 36px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #fff;
  color: #351cf0;
  padding: 7px 9px;
  font-size: 10.5px;
  font-weight: 850;
  cursor: pointer;
}

.imagemerge-layout button.active {
  border-color: #6d35f4;
  background: #f1edff;
}

.imagemerge-layout select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.image-convert-pro-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.image-convert-pro-settings label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 11px;
  font-weight: 850;
}

.image-convert-pro-settings input,
.image-convert-pro-settings select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  padding: 8px 10px;
  font: inherit;
}

.image-convert-pro-settings input[type="range"] {
  min-height: auto;
  padding: 0;
  accent-color: #6d35f4;
}

.image-convert-size-presets {
  display: grid;
  gap: 7px;
}

.image-convert-size-presets strong {
  color: #334155;
  font-size: 11px;
  font-weight: 850;
}

.image-convert-size-presets div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.image-convert-size-presets button {
  min-height: 38px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #fff;
  color: #351cf0;
  padding: 7px 8px;
  font-size: 10.5px;
  font-weight: 900;
  cursor: pointer;
}

.image-convert-size-presets button.active {
  border-color: #6d35f4;
  background: #f1edff;
}

.image-edit-crop-card {
  gap: 10px;
}

.image-edit-cropper {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #f8fafc;
  cursor: crosshair;
}

.image-edit-cropper.ready {
  min-height: 0;
}

.image-edit-cropper img {
  display: none;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.image-edit-cropper.ready img {
  display: block;
}

.image-edit-cropper > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.image-edit-crop-box {
  position: absolute;
  display: none;
  border: 2px solid #2563eb;
  background: rgba(37, 99, 235, 0.12);
  cursor: move;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.32);
  touch-action: none;
}

.image-edit-cropper.ready .image-edit-crop-box {
  display: block;
}

.image-edit-cropper.round .image-edit-crop-box {
  border-radius: 50%;
}

.image-edit-crop-box i {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #2563eb;
  cursor: nwse-resize;
}

.imagemerge-mini-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-height: 120px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fbfaff;
  padding: 12px;
}

.imagemerge-mini-preview span {
  border: 1.5px dashed #b79cff;
  border-radius: 7px;
  background: #ffffff;
}

.imagemerge-note {
  border: 1px solid #cfe8ff;
  border-radius: 7px;
  background: #eff8ff;
  color: #075985;
  padding: 9px;
}

.imagemerge-settings {
  display: grid;
  gap: 10px;
}

.imagemerge-settings label {
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: 10.5px;
  font-weight: 850;
}

.imagemerge-settings input,
.imagemerge-settings select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  padding: 7px 9px;
  font: inherit;
}

.imagemerge-settings input[type="range"] {
  min-height: auto;
  padding: 0;
  accent-color: #6d35f4;
}

.imagemerge-preview {
  width: 100%;
  min-height: 210px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #f8fafc;
}

.imagemerge-empty-preview {
  margin: 0;
  text-align: center;
}

.imagemerge-final-card {
  justify-items: stretch;
}

.imagemerge-results {
  display: grid;
  gap: 8px;
}

.imagemerge-footer-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 14px;
  border: 1px solid #ded8ff;
  border-radius: 8px;
  background: #fbfaff;
  overflow: hidden;
}

.imagemerge-footer-strip span {
  display: grid;
  gap: 2px;
  min-height: 50px;
  border-right: 1px solid #ede9fe;
  color: #0f172a;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 900;
}

.imagemerge-footer-strip span:last-child {
  border-right: 0;
}

.imagemerge-footer-strip small {
  color: #64748b;
  font-size: 10px;
}

@media (max-width: 980px) {
  .imagemerge-grid > .imagemerge-card:nth-child(1),
  .imagemerge-grid > .imagemerge-card:nth-child(2),
  .imagemerge-grid > .imagemerge-card:nth-child(3),
  .imagemerge-grid > .imagemerge-card:nth-child(4),
  .imagemerge-grid > .imagemerge-card:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .imagemerge-workspace {
    width: min(100% - 14px, 1220px);
  }

  .imagemerge-main {
    padding: 12px;
  }

  .imagemerge-head,
  .imagemerge-head > span {
    display: block;
  }

  .imagemerge-head h2 {
    font-size: 21px;
  }

  .imagemerge-grid,
  .imagemerge-layout,
  .imagemerge-footer-strip {
    grid-template-columns: 1fr;
  }

  .imagemerge-card {
    padding: 10px;
  }

  .imagemerge-footer-strip span {
    border-right: 0;
    border-bottom: 1px solid #ede9fe;
  }

  .imagemerge-footer-strip span:last-child {
    border-bottom: 0;
  }
}

.mergepdf-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 14px;
  align-items: stretch;
  min-height: 268px;
}

.mergepdf-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-content: start;
}

.mergepdf-file-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 246px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  text-align: center;
  cursor: grab;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
}

.mergepdf-file-card.dragging {
  opacity: .55;
  outline: 2px solid #7c3aed;
}

.mergepdf-file-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px 24px;
  gap: 7px;
  align-items: center;
  margin-bottom: 8px;
}

.mergepdf-file-top small {
  overflow: hidden;
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.mergepdf-file-top button,
.mergepdf-delete {
  display: grid;
  place-items: center;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
}

.mergepdf-file-top button {
  width: 24px;
  height: 24px;
}

.mergepdf-file-top button::before {
  content: attr(data-icon);
  font-weight: 900;
}

.mergepdf-frame {
  width: 100%;
  height: 154px;
  border: 1px solid #edf0f5;
  border-radius: 5px;
  background: #ffffff;
}

.mergepdf-image-preview {
  object-fit: contain;
}

.mergepdf-file-card strong {
  overflow: hidden;
  margin-top: 8px;
  color: #0f172a;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mergepdf-file-card > small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.mergepdf-add-card {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 246px;
  border: 1.5px dashed #d8d1ff;
  border-radius: 999px;
  background: #ffffff;
  color: #351cf0;
  padding: 14px;
  cursor: pointer;
}

.mergepdf-add-card span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #d8d1ff;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}

.mergepdf-add-card strong {
  margin-top: 8px;
  color: #0f172a;
  font-size: 13px;
}

.mergepdf-add-card small,
.mergepdf-order-note {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.mergepdf-order-note {
  margin: 10px 0 0;
  border-radius: 7px;
  background: #f8fafc;
  padding: 8px 10px;
  text-align: center;
}

.mergepdf-actions {
  display: grid;
  grid-template-columns: auto 42px auto;
  justify-content: end;
  gap: 10px;
  margin-top: 14px;
}

.mergepdf-actions .primary-btn,
.mergepdf-actions .secondary-btn {
  min-height: 42px;
  border-radius: 7px;
}

.mergepdf-delete::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 21h10l1-14H6zm3-17h4l1 1h5v2H4V5h5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 21h10l1-14H6zm3-17h4l1 1h5v2H4V5h5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mergepdf-progress-panel,
.mergepdf-complete-panel {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 300px;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
  text-align: center;
}

.mergepdf-ring {
  --progress: 0%;
  display: grid;
  place-items: center;
  width: 124px;
  aspect-ratio: 1;
  margin: 16px auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffffff 58%, transparent 59%),
    conic-gradient(#351cf0 var(--progress), #eeeaff 0);
}

.mergepdf-ring strong {
  color: #351cf0;
  font-size: 26px;
}

.mergepdf-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 10px;
  width: min(100%, 460px);
}

.mergepdf-stats div,
.mergepdf-result-row {
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
}

.mergepdf-stats small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.mergepdf-stats strong {
  color: #351cf0;
  font-size: 18px;
}

.mergepdf-progress-list {
  display: grid;
  gap: 8px;
  width: min(100%, 520px);
  margin-top: 14px;
}

.mergepdf-progress-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  padding: 9px 10px;
  color: #0f172a;
  font-size: 12px;
}

.mergepdf-progress-item span:first-child {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  font-weight: 900;
}

.mergepdf-success {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #22c55e;
  color: #ffffff;
  font-size: 42px;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(34, 197, 94, .22);
}

.mergepdf-result-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(100%, 520px);
  margin: 12px 0;
  text-align: left;
}

.mergepdf-result-row strong,
.mergepdf-result-row small {
  display: block;
}

.mergepdf-result-row strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mergepdf-result-row small {
  color: #64748b;
  font-size: 11px;
}

.mergepdf-result-row a {
  color: #351cf0;
  font-size: 12px;
  font-weight: 900;
}

.mergepdf-complete-panel > .primary-btn,
.mergepdf-complete-panel > .secondary-btn {
  width: min(100%, 520px);
  border-radius: 7px;
}

.mergepdf-compress-box {
  width: min(100%, 520px);
  margin: 14px 0;
}

.mergepdf-compress-box h4 {
  margin: 0 0 9px;
  color: #0f172a;
  font-size: 13px;
}

.mergepdf-compress-box div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mergepdf-compress-box button {
  min-height: 34px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  background: #ffffff;
  color: #351cf0;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.mergepdf-download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 520px);
  margin-bottom: 10px;
}

.mergepdf-download-grid .secondary-btn {
  border-radius: 7px;
}

.mergepdf-feature-row {
  display: grid;
  grid-template-columns: 160px repeat(7, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  overflow: hidden;
}

.mergepdf-feature-row strong,
.mergepdf-feature-row span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 58px;
  border-right: 1px solid #eef2f7;
  padding: 10px 12px;
  color: #0f172a;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.mergepdf-feature-row strong {
  display: flex;
  border-right: 1px solid #eef2f7;
  font-size: 14px;
}

.mergepdf-feature-row span:last-child {
  border-right: 0;
}

.mergepdf-feature-row .mega-icon {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}

.splitpdf-workspace {
  width: min(1220px, calc(100% - 24px));
  margin-top: 8px;
}

.splitpdf-workspace [hidden] {
  display: none !important;
}

.splitpdf-uploaded,
.splitpdf-method,
.splitpdf-processing {
  min-height: 286px;
}

.splitpdf-file-box {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 14px;
  width: min(100%, 520px);
  margin: 70px auto 0;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.splitpdf-file-box .pdf-badge {
  width: 44px;
  height: 52px;
  border-radius: 7px;
  font-size: 12px;
}

.splitpdf-file-box strong,
.splitpdf-file-box small {
  display: block;
}

.splitpdf-file-box strong {
  overflow: hidden;
  color: #0f172a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.splitpdf-file-box small {
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.splitpdf-file-box button {
  border: 0;
  background: transparent;
  color: #0f172a;
  cursor: pointer;
  font-size: 22px;
  font-weight: 900;
}

.splitpdf-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.splitpdf-tabs button {
  min-height: 38px;
  border: 1px solid #e1ddff;
  border-radius: 7px;
  background: #ffffff;
  color: #351cf0;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.splitpdf-tabs button.active {
  border-color: #351cf0;
  background: #f1edff;
}

.splitpdf-method-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: 12px;
}

.splitpdf-range-panel,
.splitpdf-preview-panel {
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.splitpdf-range-panel h3,
.splitpdf-preview-panel h3 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 13px;
}

.splitpdf-range-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.splitpdf-range-row label {
  display: grid;
  gap: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.splitpdf-range-row input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  padding: 0 10px;
  color: #0f172a;
  font-weight: 850;
}

.splitpdf-range-row .primary-btn {
  min-height: 38px;
  border-radius: 7px;
}

.splitpdf-range-list {
  display: grid;
  gap: 8px;
}

.splitpdf-range-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  min-height: 38px;
  border: 1px solid #eef2f7;
  border-radius: 7px;
  background: #fbfdff;
  padding: 0 10px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.splitpdf-range-item button {
  border: 0;
  background: transparent;
  color: #ef4444;
  cursor: pointer;
  font-weight: 900;
}

.splitpdf-preview-panel {
  margin-top: 12px;
}

.splitpdf-page-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 10px;
}

.splitpdf-page {
  display: grid;
  place-items: center;
  min-height: 74px;
  border: 1px solid #e5eaf3;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: #351cf0;
  font-size: 12px;
  font-weight: 900;
}

.splitpdf-processing {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 18px;
}

.splitpdf-process-card {
  width: min(100%, 420px);
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 28px;
  text-align: center;
}

.splitpdf-process-icon {
  display: block;
  width: 62px;
  height: 62px;
  margin: 0 auto 12px;
  color: #351cf0;
  background: currentColor;
  -webkit-mask: var(--mega-icon-mask) center / contain no-repeat;
  mask: var(--mega-icon-mask) center / contain no-repeat;
}

.splitpdf-process-card {
  --mega-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6zM14 3.5V8h4.5M4 18l5-5 2 2-5 5zm8-1l2-2 3 3 3-3 2 2-3 3 3 3-2 2-3-3-3 3-2-2 3-3z'/%3E%3C/svg%3E");
}

.splitpdf-process-card h3 {
  margin: 0;
  color: #0f172a;
}

.splitpdf-process-card p {
  margin: 8px 0 16px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.splitpdf-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eeeaff;
}

.splitpdf-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #351cf0;
  transition: width .2s ease;
}

.splitpdf-process-card small {
  display: block;
  margin-top: 8px;
  color: #351cf0;
  font-weight: 900;
}

.splitpdf-complete p {
  margin: -6px 0 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.splitpdf-results {
  display: grid;
  gap: 10px;
  width: min(100%, 560px);
}

.splitpdf-result-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  text-align: left;
}

.splitpdf-result-row strong,
.splitpdf-result-row small {
  display: block;
}

.splitpdf-result-row strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.splitpdf-result-row small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.splitpdf-result-row > span,
.mergepdf-result-row > span,
.compresspdf-download-row > span,
.rotateimage-download-row > span {
  min-width: 0;
}

.splitpdf-result-row a,
.mergepdf-result-row a,
.compresspdf-download-row .secondary-btn,
.rotateimage-download-row .secondary-btn {
  flex: 0 0 auto;
}

.splitpdf-result-row a {
  color: #351cf0;
  font-size: 12px;
  font-weight: 900;
}

.splitpdf-feature-row {
  grid-template-columns: 190px repeat(6, minmax(0, 1fr));
}

.croppdf-workspace [hidden] {
  display: none !important;
}

.croppdf-editor,
.croppdf-preview {
  min-height: 470px;
}

.croppdf-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.croppdf-toolbar label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.croppdf-toolbar select {
  min-width: 240px;
  min-height: 34px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 10px;
  font-weight: 800;
}

.croppdf-pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.croppdf-pager button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #0d6efd;
  color: #ffffff;
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
}

.croppdf-pager button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.croppdf-pager span {
  min-width: 66px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  padding: 7px 10px;
  text-align: center;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.croppdf-canvas-shell {
  position: relative;
  display: grid;
  justify-content: center;
  min-height: 405px;
  overflow: auto;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fbfdff;
  padding: 18px;
}

.croppdf-canvas-shell canvas,
.croppdf-preview canvas {
  max-width: 100%;
  height: auto;
  border: 1px solid #dbe3ef;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.croppdf-selection {
  position: absolute;
  min-width: 40px;
  min-height: 40px;
  border: 2px dashed #351cf0;
  background: rgba(53, 28, 240, .06);
  cursor: move;
  touch-action: none;
}

.croppdf-selection i {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #351cf0;
  border-radius: 999px;
  background: #ffffff;
}

.croppdf-selection i[data-handle="nw"] {
  top: -7px;
  left: -7px;
  cursor: nwse-resize;
}

.croppdf-selection i[data-handle="ne"] {
  top: -7px;
  right: -7px;
  cursor: nesw-resize;
}

.croppdf-selection i[data-handle="sw"] {
  bottom: -7px;
  left: -7px;
  cursor: nesw-resize;
}

.croppdf-selection i[data-handle="se"] {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.croppdf-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
}

.croppdf-preview-grid section {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.croppdf-preview-grid h3 {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
}

.croppdf-preview-grid > span {
  color: #351cf0;
  font-size: 24px;
  font-weight: 900;
}

.croppdf-preview p {
  margin: 12px 0 0;
  border-radius: 7px;
  background: #f3f0ff;
  color: #351cf0;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.croppdf-complete p {
  margin: -6px 0 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.organizepdf-workspace [hidden] {
  display: none !important;
}

.organizepdf-editor,
.organizepdf-preview {
  min-height: 470px;
}

.organizepdf-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.organizepdf-toolbar span {
  margin-right: auto;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  background: #ffffff;
  padding: 9px 12px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.organizepdf-toolbar .secondary-btn {
  min-height: 34px;
  border-radius: 7px;
  padding: 0 14px;
  font-size: 12px;
}

.organizepdf-toolbar .secondary-btn.active {
  border-color: #351cf0;
  background: #f1edff;
  color: #351cf0;
}

.organizepdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 16px;
  max-height: 430px;
  overflow: auto;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.organizepdf-grid.compact {
  max-height: 360px;
}

.organizepdf-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 164px;
  border: 1px solid #e9eef7;
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px 10px 10px;
  cursor: grab;
  user-select: none;
}

.organizepdf-card.dragging {
  opacity: .5;
  outline: 2px solid #351cf0;
}

.organizepdf-card.selected {
  border-color: #351cf0;
  background: #f3f0ff;
  box-shadow: 0 0 0 2px rgba(53, 28, 240, .12);
}

.organizepdf-card img {
  width: 78px;
  height: 112px;
  object-fit: contain;
  border: 1px solid #e5eaf3;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.organizepdf-card strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.organizepdf-card button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #e5eaf3;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
  font-weight: 900;
}

.organizepdf-note,
.organizepdf-success-note {
  margin: 12px 0 0;
  border-radius: 7px;
  padding: 11px 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.organizepdf-note {
  background: #f3f0ff;
  color: #351cf0;
}

.organizepdf-success-note {
  background: #ecfdf5;
  color: #10b981;
}

.organizepdf-preview h3 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 16px;
}

.organizepdf-preview > p {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.organizepdf-complete p {
  margin: -6px 0 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.rotatepdf-workspace [hidden] {
  display: none !important;
}

.rotatepdf-editor,
.rotatepdf-preview {
  min-height: 470px;
}

.rotatepdf-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.rotatepdf-tabs button {
  min-height: 38px;
  border: 1px solid #e1ddff;
  border-radius: 7px;
  background: #ffffff;
  color: #351cf0;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.rotatepdf-tabs button.active {
  border-color: #351cf0;
  background: #f1edff;
}

.rotatepdf-quick {
  display: grid;
  grid-template-columns: 120px repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.rotatepdf-quick span {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.rotatepdf-quick button {
  min-height: 34px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  background: #ffffff;
  color: #351cf0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.rotatepdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 16px;
  max-height: 430px;
  overflow: auto;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.rotatepdf-grid.compact {
  max-height: 380px;
}

.rotatepdf-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 178px;
  border: 1px solid #e9eef7;
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px 10px 10px;
}

.rotatepdf-card strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.rotatepdf-card img {
  width: 74px;
  height: 104px;
  object-fit: contain;
  border: 1px solid #e5eaf3;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
  transition: transform .18s ease;
}

.rotatepdf-card small {
  color: #351cf0;
  font-size: 11px;
  font-weight: 900;
}

.rotatepdf-card-actions {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  gap: 6px;
}

.rotatepdf-card-actions button {
  display: grid;
  place-items: center;
  min-height: 26px;
  border: 1px solid #e1ddff;
  border-radius: 6px;
  background: #ffffff;
  color: #351cf0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.rotatepdf-complete p {
  margin: -6px 0 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.removepdf-workspace [hidden] {
  display: none !important;
}

.removepdf-editor,
.removepdf-preview {
  min-height: 470px;
}

.removepdf-editor h3,
.removepdf-preview h3 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 16px;
}

.removepdf-editor > p {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.removepdf-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.removepdf-tabs button {
  min-height: 38px;
  border: 1px solid #e1ddff;
  border-radius: 7px;
  background: #ffffff;
  color: #351cf0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.removepdf-tabs button.active {
  border-color: #351cf0;
  background: #f1edff;
}

.removepdf-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 12px;
}

.removepdf-range input {
  min-height: 40px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  padding: 0 12px;
  color: #0f172a;
  font-weight: 850;
}

.remove-pdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 16px;
  max-height: 430px;
  overflow: auto;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.remove-pdf-grid.compact {
  max-height: 330px;
}

.remove-pdf-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 158px;
  border: 1px solid #e9eef7;
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px 10px 10px;
  cursor: pointer;
  user-select: none;
}

.remove-pdf-card.selected {
  border-color: #351cf0;
  background: #f3f0ff;
  box-shadow: 0 0 0 2px rgba(53, 28, 240, .12);
}

.remove-pdf-card input {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  accent-color: #351cf0;
}

.remove-pdf-card img {
  width: 72px;
  height: 104px;
  object-fit: contain;
  border: 1px solid #e5eaf3;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.remove-pdf-card strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.removepdf-alert {
  margin: 0 0 12px;
  border-radius: 7px;
  background: #ecfdf5;
  color: #047857;
  padding: 12px;
  font-size: 12px;
  font-weight: 900;
}

.removepdf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.removepdf-chips span {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  border-radius: 999px;
  background: #351cf0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.removepdf-complete p {
  margin: -6px 0 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.extractpdf-workspace [hidden] {
  display: none !important;
}

.extractpdf-preview,
.extractpdf-filters,
.extractpdf-settings,
.extractpdf-processing {
  min-height: 470px;
}

.extractpdf-found {
  margin: 0 0 12px;
  border: 1px solid #e1ddff;
  border-radius: 8px;
  background: #f7f5ff;
  color: #351cf0;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 900;
}

.extractpdf-select-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 12px;
}

.extractpdf-select-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
}

.extractpdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 16px;
  max-height: 420px;
  overflow: auto;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.extractpdf-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 154px;
  border: 1px solid #e9eef7;
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px 10px 10px;
  cursor: pointer;
}

.extractpdf-card.selected {
  border-color: #351cf0;
  background: #f3f0ff;
  box-shadow: 0 0 0 2px rgba(53, 28, 240, .12);
}

.extractpdf-card input {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 16px;
  height: 16px;
  accent-color: #351cf0;
}

.extractpdf-card img {
  width: 78px;
  height: 86px;
  object-fit: cover;
  border: 1px solid #e5eaf3;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.extractpdf-card strong,
.extractpdf-card small {
  display: block;
  text-align: center;
}

.extractpdf-card strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.extractpdf-card small {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.extractpdf-filters,
.extractpdf-settings {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
}

.extractpdf-filter-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.extractpdf-filter-panel h3,
.extractpdf-filters section h3,
.extractpdf-settings section h3 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
}

.extractpdf-filter-panel label {
  display: grid;
  gap: 7px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.extractpdf-filter-panel select,
.extractpdf-filter-panel input[type="range"] {
  width: 100%;
}

.extractpdf-filter-panel select {
  min-height: 38px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 10px;
  font-weight: 850;
}

.extractpdf-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.extractpdf-mini-grid img,
.extractpdf-mini-grid span {
  width: 100%;
  min-height: 110px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  background: #fbfdff;
  object-fit: cover;
}

.extractpdf-mini-grid span {
  display: grid;
  place-items: center;
  color: #351cf0;
  font-weight: 900;
}

.extractpdf-processing {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
}

.extractpdf-processing h3 {
  margin: 0;
  color: #0f172a;
}

.extractpdf-processing p,
.extractpdf-complete p {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.pagenumpdf-workspace [hidden] {
  display: none !important;
}

.pagenumpdf-settings,
.pagenumpdf-range,
.pagenumpdf-final-preview {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 16px;
  min-height: 470px;
}

.pagenumpdf-panel {
  display: grid;
  align-content: start;
  gap: 13px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.pagenumpdf-panel h3,
.pagenumpdf-live h3,
.pagenumpdf-range section h3 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
}

.pagenumpdf-panel label {
  display: grid;
  gap: 7px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.pagenumpdf-panel select,
.pagenumpdf-panel input[type="number"],
.pagenumpdf-panel input[type="text"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  padding: 0 10px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 850;
}

.pagenumpdf-position {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  gap: 8px;
}

.pagenumpdf-position button {
  position: relative;
  width: 46px;
  height: 42px;
  border: 1px solid #e1ddff;
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
}

.pagenumpdf-position button::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 2px solid #9ca3af;
  border-radius: 999px;
}

.pagenumpdf-position button.active {
  border-color: #351cf0;
  background: #f1edff;
}

.pagenumpdf-position button.active::before {
  border-color: #351cf0;
  background: #351cf0;
}

.pagenumpdf-live {
  display: grid;
  justify-items: center;
  gap: 12px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fbfdff;
  padding: 18px;
}

.pagenumpdf-live h3 {
  justify-self: stretch;
}

.pagenumpdf-live small {
  margin-left: 8px;
  color: #64748b;
  font-size: 11px;
}

.pagenumpdf-live canvas {
  max-width: 100%;
  max-height: 390px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .1);
}

.pagenumpdf-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 14px;
  max-height: 430px;
  overflow: auto;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.pagenumpdf-processing {
  display: grid;
  justify-items: center;
  align-content: center;
}

.pagenumpdf-complete p {
  margin: -6px 0 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.compresspdf-workspace {
  width: min(1220px, calc(100% - 24px));
  margin-top: 6px;
}

.compresspdf-main {
  min-width: 0;
}

.compresspdf-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.08fr);
  gap: 14px;
  align-items: start;
}

.compresspdf-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.compresspdf-bottom-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 14px;
  align-items: stretch;
}

.compresspdf-preview-card,
.compresspdf-done-card {
  min-height: 0;
}

.compresspdf-step {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 16px;
}

.compresspdf-step span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #2838f7, #4d16e8);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.compresspdf-step h2 {
  margin: 0;
  font-size: 15px;
}

.compresspdf-step p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.compresspdf-card h3 {
  margin: 14px 0 10px;
  font-size: 13px;
}

.compresspdf-drop {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 196px;
  border: 1.5px dashed #7c6cff;
  border-radius: 8px;
  background: #fbfaff;
  text-align: center;
  cursor: pointer;
}

.compresspdf-drop.dragging {
  background: #f0edff;
  border-color: #2f21e8;
}

.compresspdf-drop::before {
  content: "↑";
  display: grid;
  place-items: center;
  width: 54px;
  height: 42px;
  border-radius: 20px;
  background: #351cf0;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
}

.compresspdf-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.compresspdf-drop strong {
  margin-top: 8px;
  font-size: 14px;
}

.compresspdf-drop small {
  color: var(--muted);
  font-size: 11px;
}

.compresspdf-drop b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 6px;
  border-radius: 7px;
  background: #351cf0;
  color: #fff;
  padding: 10px 20px;
  font-size: 13px;
}

.compresspdf-file-list,
.compresspdf-progress-list,
.compresspdf-downloads {
  display: grid;
  gap: 8px;
}

.compresspdf-file-list {
  margin-top: 12px;
}

.compresspdf-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.compresspdf-file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}

.pdf-badge {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 27px;
  border-radius: 4px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.compresspdf-file-row strong,
.compresspdf-download-row strong {
  display: block;
  overflow: hidden;
  color: #10173f;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compresspdf-file-row small,
.compresspdf-download-row small {
  color: var(--muted);
  font-size: 11px;
}

.compresspdf-file-row button,
.compresspdf-preview > button {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  color: #10173f;
  cursor: pointer;
  font-weight: 900;
}

.compresspdf-total {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: #10173f;
  font-size: 12px;
  font-weight: 800;
}

.compresspdf-presets,
.compresspdf-targets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.compresspdf-presets button,
.compresspdf-targets button,
.compresspdf-custom-target {
  min-height: 62px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  color: #10173f;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.compresspdf-presets button {
  display: grid;
  place-items: center;
  gap: 3px;
}

.compresspdf-presets small {
  color: var(--muted);
  font-size: 10px;
}

.compresspdf-presets button.active,
.compresspdf-targets button.active,
.compresspdf-custom-target.active {
  border-color: #351cf0;
  background: #f6f4ff;
  color: #2f21e8;
  box-shadow: inset 0 0 0 1px #b7adff;
}

.compresspdf-custom-target {
  display: grid;
  place-items: center;
  gap: 4px;
  text-align: center;
  cursor: text;
}

.compresspdf-custom-target span {
  font-size: 13px;
  font-weight: 800;
}

.compresspdf-custom-target input {
  width: 86px;
  border: 0;
  border-radius: 5px;
  background: #eef2ff;
  color: #2f21e8;
  padding: 5px 7px;
  text-align: center;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  outline: none;
}

.compresspdf-note {
  margin: 18px 0 0;
  border-radius: 7px;
  background: #f1edff;
  color: #2f21e8;
  padding: 10px;
  font-size: 12px;
  font-weight: 800;
}

.compresspdf-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 58px;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  font-size: 11px;
}

.compresspdf-progress-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compresspdf-progress-row div {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8e8ef;
}

.compresspdf-progress-row span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #351cf0;
  transition: width .2s ease;
}

.compresspdf-progress-row b {
  color: #2f21e8;
  font-size: 11px;
  text-align: right;
}

.compresspdf-previews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.compresspdf-preview,
.compresspdf-add-more {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 340px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  text-align: center;
}

.compresspdf-preview > button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
}

.compresspdf-preview strong {
  max-width: calc(100% - 28px);
  overflow: hidden;
  margin: 0 auto;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compresspdf-preview small {
  color: #10173f;
  font-size: 11px;
  font-weight: 800;
}

.compresspdf-page {
  display: grid;
  place-items: center;
  height: 220px;
  margin: 12px 0 14px;
}

.compresspdf-page canvas {
  width: auto;
  height: auto;
  max-width: 260px;
  max-height: 220px;
  border: 1px solid #edf0f5;
  background: white;
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.12);
}

.compresspdf-frame {
  width: min(100%, 360px);
  height: 220px;
  border: 1px solid #edf0f5;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.12);
}

.compresspdf-estimate {
  border-radius: 8px;
  background: #fbfdff;
  padding: 7px 5px;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05);
}

.compresspdf-estimate span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.compresspdf-estimate b {
  color: #0aa968;
  font-size: 14px;
}

.compresspdf-add-more {
  place-items: center;
  border-style: dashed;
  color: #10173f;
  cursor: pointer;
}

.compresspdf-add-more span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e1ddff;
  border-radius: 50%;
  color: #351cf0;
  font-size: 28px;
  font-weight: 500;
}

.compresspdf-run {
  margin-top: 12px;
}

.compresspdf-check {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 8px auto 14px;
  border-radius: 50%;
  background: #12b76a;
  color: white;
  font-size: 34px;
  font-weight: 900;
}

.compresspdf-sizes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.compresspdf-sizes div {
  border-radius: 8px;
  background: #f1fbf6;
  padding: 13px;
  text-align: center;
}

.compresspdf-sizes small {
  display: block;
  color: #10173f;
  font-size: 11px;
  font-weight: 800;
}

.compresspdf-sizes strong {
  display: block;
  margin-top: 6px;
  color: #0aa968;
  font-size: 18px;
}

.compresspdf-download-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 10px;
}

.compresspdf-download-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.compresspdf-download-row .secondary-btn {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 11px;
}

.compresspdf-app .compresspdf-main {
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  min-width: 0;
}

.compresspdf-app .compresspdf-drop {
  gap: 8px;
  min-height: 260px;
  padding: 18px;
  border-color: #a78bfa;
  background: #fbfaff;
}

.compresspdf-app .compresspdf-drop::before {
  display: none;
}

.compresspdf-app .compresspdf-drop b {
  margin-top: 0;
  background: linear-gradient(135deg, #351cf0, #7c3aed);
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.2);
}

.compresspdf-app .compresspdf-drop strong {
  margin-top: 0;
  color: #0f172a;
  font-size: 15px;
}

.compresspdf-app .compresspdf-drop small,
.compresspdf-app .compresspdf-drop em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.compresspdf-app .compresspdf-file-list {
  margin-top: 12px;
}

.compresspdf-app .compresspdf-file-list:has(.compresspdf-empty) {
  display: none;
}

.compresspdf-options-inline {
  margin-top: 14px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fbfdff;
  padding: 14px;
}

.compresspdf-options-inline h3 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 13px;
}

.compresspdf-progress-panel {
  margin-top: 14px;
  min-height: 0;
}

.compresspdf-progress-panel .mergepdf-stats {
  width: min(100%, 620px);
}

.compresspdf-progress-panel .mergepdf-stats strong {
  display: block;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compresspdf-progress-panel .compresspdf-progress-list {
  width: min(100%, 620px);
  margin-top: 14px;
}

.compresspdf-complete-panel {
  margin-top: 14px;
}

.compresspdf-complete-panel p {
  margin: -4px 0 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.compresspdf-complete-panel .mergepdf-stats {
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  margin-bottom: 12px;
}

.compresspdf-complete-panel .compresspdf-download-actions,
.compresspdf-complete-panel > .secondary-btn,
.compresspdf-complete-panel .compresspdf-downloads {
  width: min(100%, 520px);
}

.related {
  margin-top: 34px;
}

.idcard-workspace {
  margin-top: 16px;
}

.panprint-workspace {
  width: min(100% - 64px, 1560px);
  margin: 18px auto 28px;
}

.panprint-topbar {
  display: block;
  margin-bottom: 14px;
  text-align: center;
}

.panprint-topbar h1 {
  margin: 0;
  text-align: center;
  color: #0f172a;
  font-size: 24px;
}

.panprint-topbar h1 b {
  color: #5b21e8;
}

.panprint-size {
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fff;
  color: #5b21e8;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.panprint-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(260px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.panprint-panel {
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.panprint-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #0f172a;
  font-size: 15px;
}

.panprint-panel h2 span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: #5b21e8;
  color: #fff;
  font-size: 13px;
}

.panprint-drop {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 178px;
  border: 1px dashed #a78bfa;
  border-radius: 8px;
  background: #fbfaff;
  text-align: center;
  cursor: pointer;
}

.panprint-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.panprint-drop b {
  border-radius: 6px;
  background: #5b21e8;
  color: #fff;
  padding: 11px 22px;
}

.panprint-file {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: 14px;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
  padding: 14px 42px 14px 16px;
}

.panprint-file small {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.panprint-file[hidden] {
  display: none;
}

.panprint-file button {
  position: absolute;
  right: 12px;
  top: 18px;
  border: 0;
  background: transparent;
  color: #ef4444;
  cursor: pointer;
  font-size: 24px;
}

.panprint-password,
.panprint-password-inline {
  display: grid;
  align-content: start;
  gap: 12px;
}

.panprint-password-inline {
  margin-top: 20px;
  border-top: 1px solid #eef2f7;
  padding-top: 18px;
}

.panprint-password-inline h3 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
}

.panprint-lock {
  width: 72px;
  height: 72px;
  margin: 28px auto 0;
  border-radius: 999px;
  background: #ede9fe;
}

.panprint-password p,
.panprint-password-inline p,
.panprint-options p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
}

.panprint-password label,
.panprint-password-inline label,
.panprint-edit label,
.panprint-settings label,
.panprint-selects label {
  display: grid;
  gap: 8px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.panprint-pass-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  overflow: hidden;
}

.panprint-pass-row input,
.panprint-selects select {
  min-height: 42px;
  border: 0;
  padding: 0 12px;
}

.panprint-pass-row button {
  border: 0;
  background: #fff;
  cursor: pointer;
}

.panprint-card-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.panprint-card-preview > div {
  min-width: 0;
  overflow: hidden;
}

.panprint-card-preview h3 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 14px;
}

.panprint-card-preview canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #eef6ff;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .65);
}

.panprint-preview {
  grid-column: span 2;
}

.panprint-segment,
.panprint-imagebar,
.panprint-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.panprint-segment {
  align-items: center;
  margin-top: 18px;
}

.panprint-segment span {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}

.panprint-segment button,
.panprint-imagebar button {
  min-height: 34px;
  border: 1px solid #e5eaf3;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  padding: 0 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.panprint-segment label {
  display: grid;
  grid-template-columns: max-content minmax(120px, 180px);
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.panprint-segment label output {
  color: #5b21e8;
}

.panprint-segment label input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #1769ff;
}

.panprint-segment button.active {
  border-color: #5b21e8;
  background: #5b21e8;
  color: #fff;
}

.panprint-edit {
  display: grid;
  align-content: start;
  gap: 14px;
}

.panprint-settings {
  margin-top: 14px;
  border-top: 1px solid #eef2f7;
  padding-top: 14px;
}

.panprint-imagebar {
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

.panprint-imagebar button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-inline: 10px;
}

.panprint-output {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.panprint-output canvas {
  display: none;
}

.panprint-printsize {
  display: grid;
  gap: 14px;
}

.panprint-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 112px;
  gap: 6px;
  align-items: start;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
}

.panprint-option input {
  margin-top: 3px;
  accent-color: #5b21e8;
}

.panprint-option strong,
.panprint-option small {
  grid-column: 2;
}

.panprint-option small {
  color: #475569;
  line-height: 1.4;
}

.panprint-option.active {
  border-color: #5b21e8;
  background: #fbfaff;
}

.panprint-mini {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: block;
  width: 104px;
  height: 72px;
  border: 1px solid #e5eaf3;
  border-radius: 6px;
  background: #f8fafc;
  position: relative;
  overflow: hidden;
}

.panprint-mini::before,
.panprint-mini::after {
  content: "";
  position: absolute;
  border-radius: 4px;
  background: linear-gradient(135deg, #dbeafe, #bae6fd 45%, #fce7f3);
  border: 1px solid #bfdbfe;
}

.panprint-mini-smart::before {
  left: 11px;
  top: 19px;
  width: 36px;
  height: 23px;
}

.panprint-mini-smart::after {
  right: 11px;
  top: 19px;
  width: 36px;
  height: 23px;
}

.panprint-mini-4r::before {
  left: 28px;
  top: 9px;
  width: 48px;
  height: 54px;
  background: linear-gradient(#fff, #f8fafc);
}

.panprint-mini-4r::after {
  left: 36px;
  top: 18px;
  width: 32px;
  height: 19px;
}

.panprint-mini-a4::before {
  left: 35px;
  top: 7px;
  width: 34px;
  height: 58px;
  background: linear-gradient(#fff, #f8fafc);
}

.panprint-mini-a4::after {
  left: 43px;
  top: 15px;
  width: 18px;
  height: 32px;
}

.panprint-options {
  display: grid;
  gap: 18px;
}

.panprint-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.panprint-total {
  display: grid;
  gap: 12px;
  border-radius: 8px;
  background: #fbfaff;
  color: #0f172a;
  padding: 26px;
  text-align: center;
}

.panprint-total b {
  color: #5b21e8;
  font-size: 18px;
}

.panprint-a4 canvas {
  width: 100%;
  max-height: 520px;
  border: 1px solid #dbe3ef;
  background: #fff;
  object-fit: contain;
}

.panprint-a4 aside {
  display: grid;
  gap: 12px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fbfaff;
  padding: 26px;
}

.panprint-a4 aside strong {
  color: #0f172a;
}

.panprint-a4 aside span {
  color: #475569;
  font-size: 13px;
}

.panprint-a4 aside .ok {
  color: #047857;
}

.panprint-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.panprint-actions .primary-btn {
  min-width: 150px;
}

.primary-btn.green {
  background: #10a66a;
}

.primary-btn.blue {
  background: #0d6efd;
}

.idcard-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.idcard-controls {
  display: grid;
  gap: 16px;
}

.idcard-controls .panel h2,
.preview-head h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip,
.mode-toggle button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.chip.active,
.mode-toggle button.active {
  border-color: var(--indigo);
  background: #eef2ff;
  color: #3730a3;
}

html.dark .chip.active,
html.dark .mode-toggle button.active {
  background: #1e1b4b;
  color: #c7d2fe;
}

.mode-toggle,
.manual-upload {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.auto-upload {
  margin-top: 10px;
}

.id-upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 128px;
  overflow: hidden;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--panel-soft);
  cursor: pointer;
  text-align: center;
}

.id-upload.wide {
  min-height: 155px;
}

.id-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.id-upload span {
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: 2;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: white;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.id-upload small {
  max-width: 220px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.id-upload img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
}

.id-upload.has-image small {
  display: none;
}

.id-upload.has-image img {
  display: block;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.status-text {
  min-height: 18px;
  margin: 8px 0 0;
  color: #d97706;
  font-size: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.form-grid input,
.form-grid select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  padding: 10px 11px;
}

.button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.idcard-preview-panel {
  position: sticky;
  top: 84px;
}

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.preview-head span {
  color: var(--muted);
  font-size: 12px;
}

.idcard-preview-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 16px;
}

.idcard-preview-box canvas {
  display: none;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  background: white;
  box-shadow: var(--shadow);
}

.idcard-preview-box canvas.ready {
  display: block;
}

.custom-smartcard {
  width: min(100% - 28px, 1880px);
  max-width: 1880px;
  margin: 12px auto 26px;
  color: #050b3f;
  font-family: Arial, Helvetica, sans-serif;
}

.custom-smart-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.smart-upload-panel {
  grid-column: span 3;
}

.smart-crop-panel {
  grid-column: span 4;
}

.smart-panel {
  min-width: 0;
  border: 1px solid #dfe5f4;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(36, 34, 93, .05);
}

.smart-panel h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: #050b3f;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.smart-panel h2 span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 999px;
  background: #3212df;
  color: #fff;
  font-size: 14px;
}

.smart-panel h2 small {
  color: #050b3f;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.smart-panel h2 b {
  margin-left: auto;
  border-radius: 4px;
  background: #e9fbef;
  color: #087c27;
  padding: 8px 14px;
  font-size: 12px;
  white-space: nowrap;
}

.smart-upload-actions,
.smart-crop-actions,
.smart-side-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.smart-card-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.smart-card-upload {
  position: relative;
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 160px;
  border: 1px dashed #3212df;
  border-radius: 7px;
  background: #fff;
  color: #050b3f;
  text-align: center;
  cursor: pointer;
  padding: 18px 12px;
  overflow: hidden;
}

.smart-card-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.smart-card-upload strong {
  font-size: 15px;
  font-weight: 900;
}

.smart-card-upload small {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.smart-card-upload b {
  border-radius: 5px;
  background: #3212df;
  color: #fff;
  padding: 10px 14px;
  font-size: 12px;
  white-space: nowrap;
}

.smart-main-btn,
.smart-ghost-btn,
.smart-reset,
.smart-print-green,
.smart-print-blue,
.smart-print-purple,
.smart-tool-buttons button,
.smart-tool-grid button,
.smart-bold-row button,
.smart-preview-tools button {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 35px;
  border: 1px solid #dfe5f4;
  border-radius: 5px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.smart-main-btn {
  border-color: #3212df;
  background: #3212df;
  color: #fff;
}

.smart-ghost-btn,
.smart-reset {
  background: #fff;
  color: #3212df;
}

.smart-main-btn input,
.smart-ghost-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.smart-drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: 9px;
  min-height: 158px;
  margin-top: 14px;
  border: 1px dashed #3212df;
  border-radius: 7px;
  background: #fff;
  color: #050b3f;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}

.smart-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.smart-drop strong {
  font-size: 14px;
  font-weight: 900;
}

.smart-drop em {
  color: #050b3f;
  font-style: normal;
  font-size: 13px;
}

.smart-drop b {
  border-radius: 5px;
  background: #3212df;
  color: #fff;
  padding: 10px 24px;
  font-size: 13px;
}

.smart-cloud {
  display: none;
}

.smart-cloud::before,
.smart-cloud::after {
  content: "";
  position: absolute;
  background: #3212df;
}

.smart-cloud::before {
  width: 4px;
  height: 24px;
  left: 19px;
  top: 3px;
}

.smart-cloud::after {
  width: 18px;
  height: 4px;
  left: 12px;
  top: 3px;
  transform: rotate(45deg);
}

.smart-file-status,
.smart-info-box,
.smart-note-box {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  border: 1px solid #dfe5f4;
  border-radius: 7px;
  padding: 13px;
  color: #050b3f;
  font-size: 12px;
  font-weight: 800;
}

.smart-file-status {
  background: #f0fff6;
  color: #087c27;
}

.smart-note-box {
  background: #f2f6ff;
  color: #1641cb;
  line-height: 1.45;
}

.smart-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 16px;
}

.smart-examples strong {
  grid-column: 1 / -1;
  font-size: 13px;
}

.smart-examples div {
  display: contents;
}

.smart-examples span {
  height: 48px;
  border: 1px solid #cbd5ff;
  border-radius: 4px;
  background: linear-gradient(135deg, #e9f6ff 0 40%, #fff 40% 70%, #dcecff 70%);
}

.smart-examples small {
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  line-height: 1.35;
}

.smart-reset {
  width: 100%;
  margin-top: 14px;
}

.smart-crop-toolbar {
  display: grid;
  grid-template-columns: minmax(128px, 1fr) 34px 58px 34px 62px 50px;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
}

.smart-crop-toolbar label,
.smart-range,
.smart-actions-panel label {
  display: grid;
  align-items: center;
  gap: 7px;
  color: #050b3f;
  font-size: 12px;
  font-weight: 900;
}

.smart-crop-toolbar label {
  display: flex;
  min-width: 0;
  min-height: 35px;
  border-radius: 5px;
  background: #f5f7ff;
  padding: 0 7px;
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
}

.smart-crop-toolbar button,
.smart-crop-toolbar output {
  min-height: 32px;
  border: 1px solid #dfe5f4;
  border-radius: 5px;
  background: #f7f8fe;
  color: #050b3f;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.smart-crop-toolbar output {
  display: grid;
  place-items: center;
}

.smart-crop-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 350px;
  overflow: hidden;
  border: 1px solid #dfe5f4;
  border-radius: 7px;
  background: #f8fafc;
}

.smart-crop-stage canvas {
  display: none;
  width: 100%;
  height: auto;
  max-height: 390px;
}

.smart-crop-stage.has-image {
  display: block;
  min-height: 0;
}

.smart-crop-stage.has-image canvas {
  display: block;
}

.smart-crop-empty {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.smart-crop-stage.has-image .smart-crop-empty {
  display: none;
}

.smart-crop-rect {
  position: absolute;
  display: none;
  border: 2px solid #5132ff;
  box-shadow: 0 0 0 9999px rgba(24, 10, 84, .18);
  cursor: move;
  touch-action: none;
}

.smart-crop-stage.has-image .smart-crop-rect {
  display: block;
}

.smart-crop-rect i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #5132ff;
  background: #fff;
}

.smart-crop-rect i:nth-child(1) { left: -8px; top: -8px; cursor: nwse-resize; }
.smart-crop-rect i:nth-child(2) { right: -8px; top: -8px; cursor: nesw-resize; }
.smart-crop-rect i:nth-child(3) { left: -8px; bottom: -8px; cursor: nesw-resize; }
.smart-crop-rect i:nth-child(4) { right: -8px; bottom: -8px; cursor: nwse-resize; }

.smart-crop-actions {
  margin-top: 14px;
}

.smart-success {
  display: none;
  margin: 12px 0 0;
  border-radius: 6px;
  background: #effcf4;
  color: #087c27;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
}

.smart-success.show {
  display: block;
}

.smart-side-tabs button {
  border-radius: 5px;
}

.smart-tool-buttons,
.smart-tool-grid,
.smart-bold-row,
.smart-preview-tools {
  display: grid;
  gap: 8px;
}

.smart-tool-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smart-tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.smart-tool-buttons button,
.smart-tool-grid button,
.smart-bold-row button,
.smart-preview-tools button {
  background: #fff;
  color: #050b3f;
}

.smart-tool-buttons button {
  min-height: 33px;
  padding: 0 6px;
  font-size: 10px;
}

.smart-range {
  grid-template-columns: 76px minmax(0, 1fr) 44px;
  margin-top: 14px;
}

.smart-range input {
  width: 100%;
  accent-color: #3212df;
}

.smart-range output {
  text-align: right;
}

.smart-bold-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.smart-bold-row .active {
  background: #3212df;
  color: #fff;
}

.smart-preview-panel {
  grid-column: span 4;
}

.smart-side-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.smart-side-preview figure {
  margin: 0;
}

.smart-side-preview figcaption {
  margin-bottom: 8px;
  color: #050b3f;
  font-size: 12px;
  font-weight: 900;
}

.smart-side-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 86 / 54;
  object-fit: contain;
  border: 1px solid #dfe5f4;
  border-radius: 6px;
  background: #f8fafc;
}

.smart-side-preview img:not([src]) {
  display: block;
}

.smart-final-preview {
  min-height: 230px;
  margin-top: 16px;
  border-radius: 7px;
}

.smart-final-preview canvas {
  max-height: 360px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
}

.smart-preview-tools {
  grid-template-columns: 38px 38px 76px 120px;
  margin-top: 16px;
}

.smart-print-panel {
  grid-column: span 5;
}

.smart-actions-panel {
  grid-column: span 3;
}

.smart-print-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.smart-print-options label {
  display: grid;
  gap: 8px;
  min-height: 148px;
  border: 1px solid #dfe5f4;
  border-radius: 7px;
  padding: 12px;
  color: #050b3f;
  font-size: 12px;
  font-weight: 900;
}

.smart-print-options label.active {
  border-color: #3212df;
  background: #fbfaff;
}

.smart-print-options small {
  line-height: 1.55;
}

.smart-a4-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 130px;
  gap: 12px;
  margin-top: 16px;
  align-items: end;
}

.smart-a4-settings strong {
  grid-column: 1 / -1;
  font-size: 13px;
}

.smart-a4-settings label {
  display: grid;
  gap: 7px;
  color: #050b3f;
  font-size: 12px;
  font-weight: 900;
}

.smart-a4-settings input,
.smart-actions-panel select {
  min-height: 38px;
  width: 100%;
  border: 1px solid #dfe5f4;
  border-radius: 5px;
  background: #fff;
  color: #050b3f;
  padding: 0 12px;
  font-weight: 800;
}

.smart-a4-settings div {
  display: grid;
  place-items: center;
  min-height: 62px;
  border-radius: 6px;
  background: #f2efff;
  color: #3212df;
  font-size: 12px;
  font-weight: 900;
}

.smart-a4-settings b {
  display: block;
  font-size: 15px;
}

.smart-actions-panel {
  display: grid;
  gap: 12px;
}

.smart-actions-panel h2 {
  margin-bottom: 2px;
}

.smart-actions-panel .check-row {
  margin-top: 0;
}

.smart-print-green,
.smart-print-blue,
.smart-print-purple {
  min-height: 52px;
  border: 0;
  color: #fff;
  font-size: 15px;
}

.smart-print-green { background: #079b4a; }
.smart-print-blue { background: #0a72f0; }
.smart-print-purple { background: #3212df; }

.smart-bottom-note {
  margin-top: 14px;
  border-radius: 7px;
  background: #f2efff;
  color: #3212df;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 900;
}

.empty-preview {
  color: var(--muted);
  text-align: center;
}

.passport-workspace {
  width: min(100% - 48px, 1560px);
  margin: 18px auto 28px;
}

.passport-topbar {
  display: block;
  margin-bottom: 14px;
  text-align: center;
}

.passport-topbar h1 {
  margin: 0;
  text-align: center;
  color: #0f172a;
  font-size: 23px;
}

.passport-topbar h1 b {
  color: #5b21e8;
}

.passport-size {
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fff;
  color: #5b21e8;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.passport-grid {
  display: grid;
  grid-template-columns: minmax(270px, 350px) minmax(0, 1.2fr) minmax(300px, .78fr);
  gap: 14px;
  align-items: start;
}

.passport-panel {
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.passport-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #0f172a;
  font-size: 15px;
}

.passport-panel h2 span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: #5b21e8;
  color: #fff;
  font-size: 13px;
}

.passport-panel h2 small {
  color: #64748b;
  font-size: 12px;
}

.passport-drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 178px;
  border: 1px dashed #a78bfa;
  border-radius: 8px;
  background: #fbfaff;
  text-align: center;
  cursor: pointer;
  padding: 18px;
}

.passport-drop strong {
  font-size: 17px;
  line-height: 1.25;
}

.passport-drop small {
  color: #334155;
  font-size: 14px;
}

.passport-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.passport-drop b {
  border-radius: 6px;
  background: #5b21e8;
  color: #fff;
  padding: 11px 22px;
}

.passport-help {
  margin: 14px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.passport-options-panel {
  display: grid;
  gap: 12px;
}

.passport-options-panel label,
.passport-mini-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.passport-options-panel input,
.passport-options-panel select,
.passport-mini-grid input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 9px 10px;
}

.upload-btn {
  position: relative;
  min-height: 42px;
}

.upload-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.passport-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.passport-actions .primary-btn,
.passport-actions .secondary-btn {
  min-height: 38px;
  padding: 0 9px;
  font-size: 12px;
}

.passport-editor {
  display: grid;
  gap: 12px;
  grid-column: span 2;
}

.passport-side-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.passport-side-tools button {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: #0f172a;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  flex: 1 1 110px;
}

.passport-side-tools button:hover {
  border-color: var(--indigo);
  color: var(--indigo);
}

.passport-edit-main {
  display: grid;
  gap: 12px;
}

.passport-image-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--panel-soft);
}

.passport-image-box img {
  display: none;
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  user-select: none;
}

.passport-image-box.ready img {
  display: block;
}

.passport-empty {
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}

.passport-image-box.ready > .passport-empty {
  display: none;
}

.passport-crop {
  position: absolute;
  display: none;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.36);
  cursor: move;
}

.passport-image-box.ready .passport-crop {
  display: block;
}

.passport-crop span {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid #64748b;
  border-radius: 999px;
  background: white;
}

.passport-crop [data-handle="nw"] {
  left: -8px;
  top: -8px;
  cursor: nwse-resize;
}

.passport-crop [data-handle="ne"] {
  right: -8px;
  top: -8px;
  cursor: nesw-resize;
}

.passport-crop [data-handle="sw"] {
  left: -8px;
  bottom: -8px;
  cursor: nesw-resize;
}

.passport-crop [data-handle="se"] {
  right: -8px;
  bottom: -8px;
  cursor: nwse-resize;
}

.passport-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.passport-bg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.passport-bg-row button {
  width: 30px;
  height: 30px;
  border: 2px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.passport-bg-row button.active {
  border-color: var(--indigo);
}

.passport-bg-row input[type="color"] {
  width: 36px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
}

.passport-bg-row label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.passport-sheet-panel {
  position: sticky;
  top: 84px;
  grid-column: span 2;
}

.passport-sheet-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 400px;
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.passport-sheet-box canvas {
  display: none;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  background: white;
  box-shadow: var(--shadow);
}

.passport-sheet-box canvas.ready {
  display: block;
}

.passport-sheet-box canvas.ready + .passport-empty {
  display: none;
}

.passport-info {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.passport-guide-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eef2f7;
  padding-top: 10px;
}

.passport-pro {
  width: min(100% - 28px, 1680px);
}

.passport-pro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 4px 2px;
}

.passport-pro-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.passport-pro-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #4f22e8;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(79, 34, 232, .2);
}

.passport-pro-head h1 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.12;
}

.passport-pro-head p {
  margin: 4px 0 0;
  color: #475569;
  font-size: 13px;
}

.passport-pro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.passport-pro-actions button {
  min-height: 44px;
  border-radius: 8px;
}

.passport-pro-grid {
  display: grid;
  grid-template-columns: minmax(330px, 440px) minmax(270px, 320px) minmax(460px, 1fr) minmax(230px, 270px);
  gap: 12px;
  align-items: start;
}

.passport-pro .passport-panel {
  border-radius: 8px;
  padding: 14px;
}

.passport-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #e5eaf3;
  margin: -2px -2px 14px;
}

.passport-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #334155;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.passport-tabs button.active {
  border-color: #4f22e8;
  color: #4f22e8;
}

.passport-photo-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.passport-photo-tab {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.passport-photo-tab.active {
  box-shadow: none;
}

.passport-photo-tab input {
  display: none;
}

.passport-photo-tab h3 {
  margin: 0;
  color: #07122f;
  font-size: 22px;
  line-height: 1.08;
  font-weight: 900;
}

.passport-photo-tab h3 span {
  font-weight: 500;
}

.passport-upload-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border: 1.5px solid #d8dee8;
  border-radius: 15px;
  background: #fff;
  color: #07122f;
  padding: 22px 18px;
  text-align: center;
  cursor: pointer;
}

.passport-photo-tab.active .passport-upload-card {
  border-color: #6d28d9;
  box-shadow: 0 0 0 1px rgba(109, 40, 217, .08);
}

.passport-upload-card:hover,
.passport-upload-card:focus-visible {
  border-color: #6d28d9;
  background: #fbfaff;
  outline: none;
}

.passport-upload-plus {
  display: block;
  margin-bottom: 12px;
  color: #07122f;
  font-size: 42px;
  line-height: .75;
  font-weight: 300;
}

.passport-upload-card strong {
  display: block;
  color: #07122f;
  font-size: 24px;
  line-height: 1.24;
  font-weight: 500;
}

.passport-upload-card img {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 62px;
  height: 62px;
  border-radius: 6px;
  background: #eef2ff;
  object-fit: cover;
}

.passport-copy-box img {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  background: #eef2ff;
  object-fit: cover;
}

.passport-photo-tab b {
  display: block;
  color: #0f172a;
  font-size: 13px;
}

.passport-photo-tab small {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.passport-photo-tab em {
  display: none;
}

.passport-editor-panel {
  display: none;
}

.passport-editor-panel.active {
  display: block;
}

.passport-remove-icon {
  position: absolute;
  right: 18px;
  bottom: 20px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #07122f;
  cursor: pointer;
}

.passport-remove-icon::before {
  content: "";
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.passport-remove-icon:hover,
.passport-remove-icon:focus-visible {
  color: #dc2626;
  outline: none;
}

.passport-remove-icon:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.passport-photo-actions {
  display: none;
  position: relative;
  z-index: 2;
}

.passport-photo-actions button {
  min-height: 26px;
  border: 1px solid #dbe4f0;
  border-radius: 7px;
  background: #fff;
  color: #4b19e6;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.passport-photo-actions button:hover,
.passport-photo-actions button:focus-visible {
  border-color: #5b21e8;
  background: #f5f3ff;
  outline: none;
}

.passport-photo-actions button:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.passport-edit-layout {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 12px;
}

.passport-tool-rail {
  display: grid;
  gap: 8px;
  align-self: start;
}

.passport-tool-rail button {
  min-height: 46px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.passport-tool-rail button.active,
.passport-tool-rail button:hover {
  border-color: #7c3aed;
  color: #4f22e8;
}

.passport-pro .passport-image-box {
  min-height: 430px;
  border-radius: 8px;
  background: linear-gradient(180deg, #eef6ff, #f8fbff);
}

.passport-range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.passport-range-grid label,
.passport-guide-sliders label,
.passport-offset label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.passport-guide-sliders {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border-top: 1px solid #e5eaf3;
  padding-top: 12px;
}

.passport-guide-sliders strong,
.passport-radio-group b,
.passport-copy-box b,
.passport-bg-card b,
.passport-border-box b,
.passport-offset b {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.passport-option-note {
  margin: -6px 0 4px;
  color: #475569;
  font-size: 12px;
}

.passport-radio-group,
.passport-copy-box,
.passport-bg-card,
.passport-border-box,
.passport-offset {
  display: grid;
  gap: 10px;
  border-top: 1px solid #eef2f7;
  padding-top: 12px;
}

.passport-radio-group label,
.passport-check,
.passport-border-box label,
.passport-preview-toggles label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.passport-print-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.passport-print-mode-options label {
  min-width: 0;
  white-space: nowrap;
}

.passport-radio-group p {
  margin: 0;
  border-radius: 6px;
  background: #f0fdf4;
  color: #15803d;
  padding: 10px;
  font-size: 12px;
  line-height: 1.45;
}

.passport-copy-box label {
  display: grid;
  gap: 6px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.passport-copy-box label span {
  display: grid;
  grid-template-columns: 54px 78px auto;
  align-items: center;
  gap: 10px;
  color: #475569;
  font-weight: 800;
}

.passport-copy-box input,
.passport-offset input,
.passport-range-grid input,
.passport-guide-sliders input {
  width: 100%;
}

.passport-bg-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.passport-bg-group span {
  grid-column: 1 / -1;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.passport-bg-group button {
  min-height: 44px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.passport-bg-group button.active {
  border-color: #6d28d9;
  background: #f5f3ff;
  color: #4f22e8;
}

.passport-pro .passport-sheet-panel {
  position: sticky;
  top: 82px;
  grid-column: auto;
}

.passport-pro .passport-sheet-box {
  min-height: 640px;
}

.passport-preview-toggles {
  display: grid;
  gap: 8px;
  min-width: 160px;
}

.passport-info-strip,
.passport-validation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.passport-info-strip span,
.passport-validation span {
  color: #475569;
  font-size: 11px;
}

.passport-info-strip b,
.passport-validation span {
  display: block;
  color: #0f172a;
  font-weight: 900;
}

.passport-validation {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.passport-validation span::before {
  content: "✓ ";
  color: #16a34a;
}

.passport-print-panel {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 82px;
}

.passport-print-panel h2 {
  margin-bottom: 0;
}

.passport-print-panel dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.passport-print-panel dt {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.passport-print-panel dd {
  margin: -5px 0 4px;
  color: #334155;
  font-size: 12px;
}

.passport-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.passport-pro {
  width: min(100% - 28px, 1510px);
  color: #07122f;
}

.passport-pro-head {
  gap: 14px;
  margin-bottom: 14px;
  padding: 4px 2px;
}

.passport-pro-icon {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background: #4b19e6;
  font-size: 14px;
  box-shadow: 0 10px 22px rgba(75, 25, 230, .2);
}

.passport-pro-head h1 {
  font-size: 22px;
  letter-spacing: 0;
}

.passport-pro-head p {
  font-size: 12px;
}

.passport-pro-actions button {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 900;
}

.passport-pro-actions button span {
  margin-right: 7px;
}

.passport-pro-grid {
  grid-template-columns: 424px 262px minmax(500px, 1fr) 262px;
  gap: 10px;
}

.passport-pro .passport-panel {
  border-color: #dfe7f2;
  border-radius: 8px;
  padding: 13px;
  box-shadow: none;
}

.passport-tabs {
  margin: -4px -4px 14px;
}

.passport-tabs button {
  padding: 11px 8px;
  color: #0b1736;
  font-size: 12px;
}

.passport-tabs button.active {
  border-color: #4b19e6;
  color: #4b19e6;
}

.passport-photo-tabs {
  gap: 12px;
  margin-bottom: 18px;
}

.passport-photo-tab {
  grid-template-columns: 58px minmax(0, 1fr) 18px;
  min-height: 72px;
  padding: 9px 11px;
}

.passport-photo-tab.active {
  border-color: #5b21e8;
  box-shadow: 0 0 0 1px rgba(91, 33, 232, .12);
}

.passport-photo-tab img,
.passport-copy-box img {
  width: 50px;
  height: 50px;
}

.passport-photo-tab b {
  font-size: 12px;
}

.passport-photo-tab small {
  font-size: 10px;
}

.passport-edit-layout {
  gap: 14px;
}

.passport-tool-rail {
  gap: 7px;
}

.passport-tool-rail button {
  min-height: 47px;
  color: #24324a;
  font-size: 10px;
}

.passport-tool-rail button.active,
.passport-tool-rail button:hover {
  border-color: #8b5cf6;
  background: #fbfaff;
  color: #4b19e6;
}

.passport-tool-rail button:disabled {
  color: #b6c1d4;
  cursor: not-allowed;
}

.passport-pro .passport-image-box {
  min-height: 417px;
  background: linear-gradient(180deg, #eef6ff, #f8fbff);
}

.passport-range-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 58px;
  gap: 10px;
}

.passport-adjust-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.passport-range-grid label,
.passport-guide-sliders label,
.passport-offset label {
  color: #334155;
  font-size: 11px;
}

.passport-range-grid output,
.passport-offset output {
  float: right;
  color: #475569;
  font-weight: 800;
}

.passport-inline-reset {
  align-self: end;
  min-height: 28px;
  border: 1px solid #dfe7f2;
  border-radius: 7px;
  background: #fff;
  color: #4b19e6;
  font-size: 11px;
  font-weight: 900;
}

.passport-guide-sliders {
  gap: 8px;
  padding-top: 11px;
}

.passport-guide-sliders strong,
.passport-radio-group b,
.passport-copy-box b,
.passport-bg-card b,
.passport-border-box b,
.passport-offset b,
.passport-distribution b {
  color: #07122f;
  font-size: 12px;
}

.passport-option-note,
.passport-radio-group label,
.passport-check,
.passport-border-box label,
.passport-preview-toggles label,
.passport-print-checks label,
.passport-distribution label,
.passport-copy-box label,
.passport-print-panel dt,
.passport-print-panel dd {
  font-size: 11px;
}

.passport-radio-group,
.passport-copy-box,
.passport-bg-card,
.passport-border-box,
.passport-offset,
.passport-print-checks {
  gap: 9px;
  padding-top: 12px;
}

.passport-radio-group p {
  padding: 9px;
  font-size: 11px;
}

.passport-copy-box label span {
  grid-template-columns: 52px 78px auto;
  gap: 8px;
}

.passport-distribution {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  padding: 9px;
}

.passport-distribution b {
  grid-column: 1 / -1;
}

.passport-bg-group {
  gap: 6px;
}

.passport-bg-group span {
  font-size: 11px;
}

.passport-bg-group button {
  min-height: 47px;
  font-size: 10px;
}

.passport-bg-group button.active {
  border-color: #5b21e8;
  color: #4b19e6;
}

.passport-auto-fit {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 1px solid #c4b5fd;
  border-radius: 8px;
  background: #fff;
  color: #4b19e6;
  font-size: 13px;
  font-weight: 900;
}

.passport-pro .passport-sheet-box {
  min-height: 636px;
  padding: 13px;
  background: #f8fafc;
}

.passport-preview-toggles {
  gap: 7px;
}

.passport-info-strip,
.passport-validation {
  gap: 7px;
  margin-top: 10px;
  padding: 10px 11px;
}

.passport-print-panel {
  gap: 13px;
}

.passport-border-box {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.passport-border-box b,
.passport-border-box label:last-child {
  grid-column: 1 / -1;
}

.passport-border-box label:not(:last-child) {
  display: grid;
  place-items: center;
  min-height: 60px;
  border: 1px solid #e5eaf3;
  border-radius: 7px;
  padding: 6px;
  text-align: center;
}

.passport-border-box input[type="radio"] {
  order: 2;
}

.passport-print-checks {
  display: grid;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  padding: 11px;
}

.passport-tip {
  margin: 0;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  background: #fbfaff;
  color: #4b19e6;
  padding: 12px;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.passport-offset .secondary-btn {
  min-height: 34px;
  border-radius: 7px;
  font-size: 11px;
}

.passport-pro,
.passport-pro * {
  min-width: 0;
}

@media (min-width: 1121px) {
  .passport-pro {
    width: min(calc(100vw - 28px), 1510px);
    max-width: 1510px;
    overflow: hidden;
  }

  .passport-pro-grid {
    grid-template-columns: minmax(0, .95fr) minmax(0, .66fr) minmax(0, 1fr) minmax(0, .56fr);
  }

  .passport-pro .passport-panel {
    overflow: hidden;
  }

  .passport-pro .passport-image-box {
    min-height: clamp(300px, 25vw, 417px);
  }

  .passport-pro .passport-sheet-box {
    min-height: clamp(390px, 38vw, 636px);
  }

  .passport-preview-toggles {
    min-width: 126px;
  }

  .passport-sheet-panel .preview-head {
    gap: 10px;
  }

  .passport-sheet-panel .preview-head h2 {
    min-width: 0;
    font-size: clamp(16px, 1.15vw, 18px);
  }
}

@media (min-width: 1121px) and (max-width: 1450px) {
  .passport-pro-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }

  .passport-pro .passport-sheet-panel,
  .passport-print-panel {
    position: static;
  }

  .passport-pro .passport-sheet-box {
    min-height: 520px;
  }
}

.photo50-workspace {
  margin-top: 16px;
}

.photo50-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.photo50-controls {
  display: grid;
  gap: 16px;
}

.photo50-controls .panel h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.photo50-upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border: 2px dashed var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
  cursor: pointer;
}

.photo50-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.photo50-upload img {
  display: none;
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: white;
}

.photo50-upload.has-image img {
  display: block;
}

.photo50-upload.has-image span {
  display: none;
}

.photo50-preview-panel {
  position: sticky;
  top: 84px;
}

.photo50-preview-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 16px;
}

.photo50-preview-box canvas {
  display: none;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  background: white;
  box-shadow: var(--shadow);
}

.photo50-preview-box canvas.ready {
  display: block;
}

.photo50-preview-box canvas.ready + .empty-preview {
  display: none;
}

.psr-workspace {
  width: min(1220px, calc(100% - 24px));
  margin-top: 14px;
}

.psr-app {
  min-height: 680px;
}

.psr-main {
  padding: 18px;
}

.psr-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.psr-head h2 {
  margin: 6px 0 5px;
  color: #0f172a;
  font-size: 25px;
  line-height: 1.1;
}

.psr-head p {
  margin: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.psr-head > span {
  display: grid;
  justify-items: end;
  align-content: start;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.psr-head > span small {
  color: #64748b;
  font-size: 10px;
}

.psr-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.psr-grid > .psr-card:nth-child(1),
.psr-grid > .psr-card:nth-child(2) {
  grid-column: span 3;
}

.psr-grid > .psr-card:nth-child(3),
.psr-grid > .psr-card:nth-child(4),
.psr-grid > .psr-card:nth-child(5) {
  grid-column: span 2;
}

.psr-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.psr-step {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.psr-step b {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: linear-gradient(135deg, #351cf0, #7c3aed);
  color: #fff;
  font-size: 11px;
  flex: 0 0 auto;
}

.psr-step strong,
.psr-step small {
  display: block;
}

.psr-step strong {
  color: #0f172a;
  font-size: 11.5px;
  text-transform: uppercase;
}

.psr-step small,
.psr-info,
.psr-note {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.35;
}

.psr-upload-grid,
.psr-preview-pair,
.psr-settings-grid,
.psr-download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.psr-final-card {
  justify-items: stretch;
}

.psr-tool {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.psr-tool h3,
.psr-preview-pair h3,
.psr-settings-grid h3 {
  margin: 0;
  color: #0f172a;
  font-size: 11px;
}

.psr-upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 112px;
  overflow: hidden;
  border: 1.5px dashed #b79cff;
  border-radius: 8px;
  background: #fbfaff;
  color: #0f172a;
  text-align: center;
  cursor: pointer;
}

.psr-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.psr-upload img {
  display: none;
  width: 100%;
  height: 112px;
  object-fit: contain;
  background: #ffffff;
}

.psr-upload.has-image img {
  display: block;
}

.psr-upload.has-image span {
  display: none;
}

.psr-upload span {
  font-size: 11px;
  font-weight: 850;
}

.psr-upload em {
  display: inline-grid;
  margin-top: 8px;
  border-radius: 7px;
  background: linear-gradient(135deg, #351cf0, #7c3aed);
  color: #fff;
  padding: 8px 12px;
  font-style: normal;
  font-size: 10.5px;
}

.psr-camera {
  min-height: 30px;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 10.5px;
}

.psr-controls {
  display: none !important;
}

.psr-preview-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background-color: #f8fafc;
  padding: 8px;
}

.psr-preview-box canvas {
  display: none;
  max-width: 100%;
  max-height: 170px;
  width: auto;
  height: auto;
  background: white;
  border-radius: 5px;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.psr-preview-box canvas.ready {
  display: block;
}

.psr-preview-box canvas.ready + .empty-preview {
  display: none;
}

.psr-tipbox,
.psr-note {
  display: grid;
  gap: 6px;
  border: 1px solid #cfe8ff;
  border-radius: 7px;
  background: #eff8ff;
  color: #075985;
  padding: 9px;
}

.psr-tipbox strong {
  color: #075985;
  font-size: 11px;
}

.psr-tipbox span {
  color: #334155;
  font-size: 10.5px;
  font-weight: 750;
}

.psr-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.psr-adjust-actions,
.psr-preset-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.psr-adjust-actions .secondary-btn,
.psr-preset-row button {
  min-height: 30px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #fff;
  color: #351cf0;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 850;
}

.psr-preset-row button.active {
  border-color: #6d35f4;
  background: #f1edff;
}

.psr-settings-grid label {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  color: #334155;
  font-size: 10.5px;
  font-weight: 850;
}

.psr-settings-grid input {
  width: 100%;
  min-height: 34px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  padding: 7px 9px;
  font: inherit;
}

.psr-settings-grid input[type="range"] {
  padding: 0;
  accent-color: #6d35f4;
}

.psr-processing,
.psr-complete,
.psr-start-new {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.psr-processing > span,
.psr-complete span,
.psr-start-new span {
  display: grid;
  place-items: center;
  width: 62px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #0f9f68;
  font-size: 34px;
  font-weight: 900;
}

.psr-processing > span {
  border: 6px solid #ede9fe;
  border-top-color: #6d35f4;
}

.psr-complete span {
  border: 4px solid #0f9f68;
}

.psr-start-new span,
.psr-zip-icon {
  background: linear-gradient(135deg, #351cf0, #7c3aed);
  color: #fff;
}

.psr-processing ul {
  display: grid;
  width: min(100%, 260px);
  gap: 7px;
  margin: 0;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  padding: 10px 12px 10px 26px;
  color: #334155;
  font-size: 10.5px;
  font-weight: 800;
  text-align: left;
}

.psr-processing strong {
  color: #0369a1;
  font-size: 18px;
}

.psr-complete strong,
.psr-start-new strong,
.psr-center-title {
  color: #0f172a;
  font-size: 13px;
  text-align: center;
}

.psr-complete small,
.psr-start-new small {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 750;
}

.psr-review h3 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.psr-review em {
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  padding: 2px 7px;
  font-style: normal;
  font-size: 9px;
}

.psr-download-grid .secondary-btn {
  min-height: 42px;
  font-size: 11px;
}

.psr-zip-icon {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 80px;
  aspect-ratio: 1;
  border-radius: 14px;
  font-size: 22px;
  font-weight: 950;
}

.psr-footer-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 14px;
  border: 1px solid #ded8ff;
  border-radius: 8px;
  background: #fbfaff;
  overflow: hidden;
}

.psr-footer-strip span {
  display: grid;
  gap: 2px;
  min-height: 50px;
  border-right: 1px solid #ede9fe;
  color: #0f172a;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 900;
}

.psr-footer-strip span:last-child {
  border-right: 0;
}

.psr-footer-strip small {
  color: #64748b;
  font-size: 10px;
}

@media (max-width: 980px) {
  .psr-grid > .psr-card:nth-child(1),
  .psr-grid > .psr-card:nth-child(2),
  .psr-grid > .psr-card:nth-child(3),
  .psr-grid > .psr-card:nth-child(4),
  .psr-grid > .psr-card:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .psr-workspace {
    width: min(100% - 14px, 1220px);
  }

  .psr-main {
    padding: 12px;
  }

  .psr-head,
  .psr-head > span {
    display: block;
  }

  .psr-head h2 {
    font-size: 21px;
  }

  .psr-grid,
  .psr-upload-grid,
  .psr-preview-pair,
  .psr-settings-grid,
  .psr-download-grid,
  .psr-footer-strip {
    grid-template-columns: 1fr;
  }

  .psr-card {
    min-height: 0;
    padding: 10px;
  }

  .psr-adjust-actions,
  .psr-preset-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .psr-footer-strip span {
    border-right: 0;
    border-bottom: 1px solid #ede9fe;
  }

  .psr-footer-strip span:last-child {
    border-bottom: 0;
  }
}

.signature-workspace {
  margin-top: 16px;
}

.signature-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.signature-controls {
  display: grid;
  gap: 16px;
}

.signature-controls .panel h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.signature-upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border: 2px dashed var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
  cursor: pointer;
}

.signature-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.signature-upload img {
  display: none;
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: white;
}

.signature-upload.has-image img {
  display: block;
}

.signature-upload.has-image span {
  display: none;
}

.signature-preview-panel {
  position: sticky;
  top: 84px;
}

.signature-preview-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
}

.checkerboard {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.signature-preview-box canvas {
  display: none;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
}

.signature-preview-box canvas.ready {
  display: block;
}

.signature-preview-box canvas.ready + .empty-preview {
  display: none;
}

.scanner-workspace {
  margin-top: 16px;
}

.scanner-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.scanner-controls {
  display: grid;
  gap: 16px;
}

.scanner-controls .panel h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.scanner-upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border: 2px dashed var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
  cursor: pointer;
}

.scanner-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.scanner-upload img {
  display: none;
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: white;
}

.scanner-upload.has-image img {
  display: block;
}

.scanner-upload.has-image span {
  display: none;
}

.scanner-preview-panel {
  position: sticky;
  top: 84px;
}

.scanner-source-box,
.scanner-output-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 300px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-soft);
  overflow: hidden;
  padding: 14px;
}

.scanner-output-box {
  margin-top: 14px;
  min-height: 420px;
}

.scanner-source-box canvas,
.scanner-output-box canvas {
  display: none;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  background: white;
  box-shadow: var(--shadow);
}

.scanner-source-box canvas.ready,
.scanner-output-box canvas.ready {
  display: block;
}

.scanner-output-box canvas.ready + .empty-preview {
  display: none;
}

.scanner-crop-box {
  position: absolute;
  border: 2px solid #22c55e;
  background: rgba(34, 197, 94, 0.1);
  box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.35);
  cursor: move;
}

.scanner-crop-box span {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid white;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}

.scanner-crop-box [data-scanner-handle="nw"] {
  left: -8px;
  top: -8px;
  cursor: nwse-resize;
}

.scanner-crop-box [data-scanner-handle="ne"] {
  right: -8px;
  top: -8px;
  cursor: nesw-resize;
}

.scanner-crop-box [data-scanner-handle="sw"] {
  left: -8px;
  bottom: -8px;
  cursor: nesw-resize;
}

.scanner-crop-box [data-scanner-handle="se"] {
  right: -8px;
  bottom: -8px;
  cursor: nwse-resize;
}

.bgremove-workspace {
  margin-top: 16px;
}

.bgremove-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.bgremove-controls {
  display: grid;
  gap: 16px;
}

.bgremove-controls .panel h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.bgremove-upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border: 2px dashed var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
  cursor: pointer;
}

.bgremove-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.bgremove-upload img {
  display: none;
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: white;
}

.bgremove-upload.has-image img {
  display: block;
}

.bgremove-upload.has-image span {
  display: none;
}

.bgremove-preview-panel {
  position: sticky;
  top: 84px;
}

.bgremove-preview-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}

.bgremove-preview-box canvas {
  display: none;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: var(--shadow);
}

.bgremove-preview-box canvas.ready {
  display: block;
}

.bgremove-preview-box canvas.ready + .empty-preview {
  display: none;
}

.enhancer-workspace {
  margin-top: 16px;
}

.enhancer-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.enhancer-controls {
  display: grid;
  gap: 16px;
}

.enhancer-controls .panel h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.enhancer-upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border: 2px dashed var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
  cursor: pointer;
}

.enhancer-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.enhancer-upload img {
  display: none;
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: white;
}

.enhancer-upload.has-image img {
  display: block;
}

.enhancer-upload.has-image span {
  display: none;
}

.enhancer-preview-panel {
  position: sticky;
  top: 84px;
}

.enhancer-preview-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 16px;
}

.enhancer-preview-box canvas {
  display: none;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  background: white;
  box-shadow: var(--shadow);
}

.enhancer-preview-box canvas.ready {
  display: block;
}

.enhancer-preview-box canvas[data-enhancer-before].ready {
  position: absolute;
  clip-path: inset(0 50% 0 0);
  z-index: 2;
}

.enhancer-preview-box canvas[data-enhancer-after].ready {
  z-index: 1;
}

.enhancer-preview-box canvas.ready ~ .empty-preview {
  display: none;
}

.enhancer-split {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  z-index: 3;
  width: 2px;
  background: white;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25), 0 0 14px rgba(15, 23, 42, 0.25);
}

@media print {
  body * {
    visibility: hidden !important;
  }

  .passport-sheet-box,
  .passport-sheet-box * {
    visibility: visible !important;
  }

  .passport-sheet-box {
    position: fixed;
    inset: 0 auto auto 0;
    padding: 0;
    background: white;
  }
}

.simple-page,
.not-found {
  margin-top: 34px;
  margin-bottom: 34px;
  padding: 56px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.05);
}

.simple-page {
  max-width: 1040px;
}

.simple-page h1 {
  max-width: 860px;
}

.simple-page p {
  max-width: 820px;
}

.about-page {
  max-width: 1040px;
}

.about-page .eyebrow {
  margin-bottom: 4px;
}

.about-page h1 {
  max-width: 760px;
}

.about-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  margin-top: 28px;
}

.about-card {
  border: 1px solid #e5edf7;
  border-radius: 8px;
  background: #ffffff;
  padding: 22px;
  box-shadow: none;
}

.about-card h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.2;
}

.about-card p {
  margin: 0 0 14px;
}

.about-card p:last-child {
  margin-bottom: 0;
}

.about-check-list {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.about-check-list li {
  position: relative;
  padding-left: 28px;
  color: #334155;
  font-weight: 700;
  line-height: 1.45;
}

.about-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #16a34a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M8.1 13.8 4.4 10.1l1.4-1.4 2.3 2.3 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M8.1 13.8 4.4 10.1l1.4-1.4 2.3 2.3 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.about-contact-card {
  margin-top: 18px;
}

.about-contact-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.about-contact-list a {
  display: flex;
  min-height: 44px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
  color: #0b63ff;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.legal-page {
  max-width: 1040px;
}

.legal-updated {
  margin-top: 10px;
  color: #0b63ff;
  font-weight: 800;
}

.legal-card {
  margin-top: 18px;
  border: 0;
  border-top: 1px solid #e5edf7;
  border-radius: 0;
  background: #ffffff;
  padding: 24px 0 0;
  box-shadow: none;
}

.legal-card h2 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.25;
}

.legal-card h3 {
  margin: 18px 0 8px;
  color: #0b1736;
  font-size: 16px;
  line-height: 1.35;
}

.legal-card p {
  margin: 0 0 12px;
}

.legal-card p:last-child {
  margin-bottom: 0;
}

.legal-card ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
  padding-left: 20px;
  color: #334155;
  line-height: 1.55;
}

.legal-card li {
  padding-left: 2px;
}

.site-footer {
  margin-top: 70px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.08), transparent 28%),
    linear-gradient(225deg, rgba(34, 197, 94, 0.07), transparent 30%),
    #0b1222;
  color: #dbe4f0;
}

.footer-visitor-bar {
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(15, 23, 42, 0.86)),
    rgba(15, 23, 42, 0.94);
  color: #ffffff;
  padding: 6px 16px 8px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.3);
}

.visitor-live-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

.visitor-live-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(34, 197, 94, 0.45);
  border-radius: inherit;
  animation: visitorPulse 1.8s ease-out infinite;
}

.visitor-label {
  color: #eaf2ff;
  white-space: nowrap;
}

.footer-visitor-bar strong {
  min-width: 78px;
  border-radius: 999px;
  background: #ffffff;
  color: #0b4fca;
  padding: 6px 14px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
  box-shadow: inset 0 -2px 0 rgba(15, 23, 42, 0.12);
}

.visitor-note {
  color: #9cc8ff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

@keyframes visitorPulse {
  0% {
    opacity: 0.75;
    transform: scale(0.72);
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.footer-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) repeat(5, minmax(130px, 1fr));
  gap: clamp(18px, 2.6vw, 38px);
  padding: 42px 0 30px;
}

.footer-about p {
  max-width: 280px;
}

.footer-grid h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.25;
}

.footer-grid ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-grid p,
.footer-grid a {
  color: #c3cedd;
  font-size: 13px;
  line-height: 1.55;
}

.footer-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  transition: color 0.18s ease, transform 0.18s ease;
}

.footer-grid a:hover,
.footer-grid a:focus {
  color: #ffffff;
  transform: translateX(2px);
}

.footer-brand {
  color: #ffffff;
  margin-bottom: 12px;
}

.footer-main-logo {
  display: block;
  width: min(220px, 100%);
  height: auto;
  object-fit: contain;
}

.footer-brand strong {
  font-size: 20px;
  line-height: 1.1;
}

.socials {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.social-link {
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(203, 213, 225, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.social-link span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.social-link::before,
.whatsapp-fab span::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
}

.social-facebook::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 8h3V4h-3c-3.3 0-5 2-5 5v2H6v4h3v5h4v-5h3l1-4h-4V9c0-.7.3-1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 8h3V4h-3c-3.3 0-5 2-5 5v2H6v4h3v5h4v-5h3l1-4h-4V9c0-.7.3-1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.social-youtube::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2s-.2-1.5-.8-2.1c-.8-.8-1.7-.8-2.1-.9C15.8 4 12 4 12 4s-3.8 0-6.7.2c-.4.1-1.3.1-2.1.9-.6.6-.8 2.1-.8 2.1S2.2 9 2.2 10.7v1.6c0 1.7.2 3.5.2 3.5s.2 1.5.8 2.1c.8.8 1.9.8 2.4.9 1.7.2 6.4.2 6.4.2s3.8 0 6.7-.2c.4-.1 1.3-.1 2.1-.9.6-.6.8-2.1.8-2.1s.2-1.8.2-3.5v-1.6c0-1.7-.2-3.5-.2-3.5zM10.1 14.4V8.3l5.8 3.1-5.8 3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2s-.2-1.5-.8-2.1c-.8-.8-1.7-.8-2.1-.9C15.8 4 12 4 12 4s-3.8 0-6.7.2c-.4.1-1.3.1-2.1.9-.6.6-.8 2.1-.8 2.1S2.2 9 2.2 10.7v1.6c0 1.7.2 3.5.2 3.5s.2 1.5.8 2.1c.8.8 1.9.8 2.4.9 1.7.2 6.4.2 6.4.2s3.8 0 6.7-.2c.4-.1 1.3-.1 2.1-.9.6-.6.8-2.1.8-2.1s.2-1.8.2-3.5v-1.6c0-1.7-.2-3.5-.2-3.5zM10.1 14.4V8.3l5.8 3.1-5.8 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.social-whatsapp::before,
.whatsapp-fab span::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 3.5A11.8 11.8 0 0 0 12.1 0C5.6 0 .3 5.3.3 11.8c0 2.1.5 4.1 1.6 5.9L0 24l6.5-1.7a11.7 11.7 0 0 0 5.6 1.4c6.5 0 11.8-5.3 11.8-11.8 0-3.2-1.2-6.1-3.4-8.4zM12.1 21.7c-1.8 0-3.5-.5-5-1.4l-.4-.2-3.8 1 1-3.7-.2-.4a9.8 9.8 0 0 1-1.5-5.2c0-5.4 4.4-9.8 9.8-9.8 2.6 0 5.1 1 6.9 2.9a9.7 9.7 0 0 1 2.9 6.9c.1 5.5-4.3 9.9-9.7 9.9zm5.4-7.3c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.2-.3-.3-.5-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 3.5A11.8 11.8 0 0 0 12.1 0C5.6 0 .3 5.3.3 11.8c0 2.1.5 4.1 1.6 5.9L0 24l6.5-1.7a11.7 11.7 0 0 0 5.6 1.4c6.5 0 11.8-5.3 11.8-11.8 0-3.2-1.2-6.1-3.4-8.4zM12.1 21.7c-1.8 0-3.5-.5-5-1.4l-.4-.2-3.8 1 1-3.7-.2-.4a9.8 9.8 0 0 1-1.5-5.2c0-5.4 4.4-9.8 9.8-9.8 2.6 0 5.1 1 6.9 2.9a9.7 9.7 0 0 1 2.9 6.9c.1 5.5-4.3 9.9-9.7 9.9zm5.4-7.3c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.2-.3-.3-.5-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding: 14px 0;
  color: #9aa8ba;
  text-align: center;
  font-size: 12px;
}

.whatsapp-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: #22c55e;
  color: white;
  padding: 11px 16px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(34, 197, 94, 0.35);
}

.namedate-workspace {
  background: radial-gradient(circle at 82% 18%, rgba(37, 99, 235, 0.08), transparent 34%), linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
  padding: 10px 0 36px;
}

.namedate-shell {
  width: min(1320px, calc(100% - 24px));
  margin: 0 auto;
  overflow-x: clip;
}

.namedate-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.namedate-crumb a {
  color: #0f2857;
}

.namedate-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}

.namedate-head h1 {
  margin: 0 0 6px;
  font-size: clamp(26px, 2vw, 34px);
  line-height: 1.05;
  color: #071636;
}

.namedate-head h1 span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #6d35f4;
  color: #fff;
  font-size: 12px;
  vertical-align: middle;
}

.namedate-head p {
  margin: 0;
  color: #52627a;
  font-size: 15px;
  font-weight: 600;
}

.namedate-head-download {
  min-width: 360px;
  padding: 12px 14px;
  border: 1px solid #dce5f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.namedate-head-download h2 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #0f172a;
}

.namedate-head-download > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.namedate-head-download .primary-btn,
.namedate-head-download .secondary-btn {
  min-height: 38px;
  padding: 9px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.namedate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.82fr) minmax(260px, 0.55fr);
  gap: 14px;
  align-items: start;
}

.namedate-grid > *,
.namedate-grid .panel {
  min-width: 0;
}

.namedate-grid .panel,
.namedate-bottom .panel {
  border-radius: 8px;
  border-color: #dfe7f2;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.05);
}

.namedate-editor,
.namedate-controls,
.namedate-live,
.namedate-info,
.namedate-resize,
.namedate-download {
  padding: 14px;
}

.namedate-controls {
  display: grid;
  gap: 12px;
}

.namedate-editor h2,
.namedate-controls h2,
.namedate-live h2,
.namedate-info h2,
.namedate-resize h2,
.namedate-download h2 {
  margin: 0 0 16px;
  font-size: 15px;
  color: #0f172a;
}

.namedate-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.namedate-editor-head h2 {
  margin-bottom: 0;
}

.namedate-toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 8px;
}

.namedate-toolbar button,
.namedate-upload-btn,
.namedate-inline button,
.namedate-position-grid button,
.namedate-arrows button,
.namedate-quick button,
.namedate-live-zoom button,
.namedate-setting-row button,
.namedate-original button {
  min-height: 40px;
  border: 1px solid #dbe5f1;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
}

.namedate-toolbar button {
  min-height: 38px;
  font-size: 12px;
}

.namedate-upload-btn {
  display: grid;
  place-items: center;
  min-width: 138px;
  min-height: 38px;
  color: #6d35f4;
  border-color: #9b7cff;
  font-size: 13px;
  background: #fff;
}

.namedate-upload-main {
  display: inline-grid;
  min-width: 150px;
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, #351cf0, #7c3aed);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.2);
}

.namedate-upload-main:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(79, 70, 229, 0.26);
}

.namedate-upload-btn input {
  display: none;
}

.namedate-stage {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.namedate-stage canvas {
  max-width: 86%;
  max-height: 440px;
  border: 1px solid #000000;
  background: #fff;
  display: none;
}

.namedate-stage canvas.ready,
.namedate-live canvas.ready {
  display: block;
}

.namedate-stage canvas.ready + .empty-preview {
  display: none;
}

.namedate-original {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fff;
  color: #52627a;
  font-weight: 700;
}

.namedate-original span {
  margin-right: auto;
}

.namedate-inline {
  display: grid;
  grid-template-columns: repeat(3, 46px) repeat(2, minmax(82px, 1fr));
  gap: 8px;
  margin: 0;
  max-width: none;
  align-items: end;
}

.namedate-inline label {
  display: grid;
  gap: 5px;
  color: #52627a;
  font-size: 11px;
  font-weight: 800;
}

.namedate-main-fields {
  gap: 10px;
}

.namedate-font-family {
  display: grid;
  gap: 6px;
  color: #52627a;
  font-size: 12px;
  font-weight: 800;
}

.namedate-font-family select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  padding: 8px 10px;
  font-weight: 800;
}

.namedate-inline .active,
.namedate-position-grid .active,
.namedate-quick .active,
.namedate-setting-row button.active {
  color: #fff;
  border-color: #6d35f4;
  background: #6d35f4;
}

.namedate-colors {
  gap: 10px;
  margin-top: 0;
}

.namedate-colors input[type="color"],
.namedate-inline input[type="color"] {
  width: 48px;
  min-height: 38px;
  padding: 2px;
}

.namedate-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}

.namedate-position {
  margin-top: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
}

.namedate-position > strong {
  grid-column: 1 / -1;
}

.namedate-position-grid {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  gap: 6px;
}

.namedate-position-grid button::before {
  content: "";
  width: 6px;
  height: 6px;
  display: block;
  margin: auto;
  background: currentColor;
  border-radius: 2px;
}

.namedate-arrows {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  grid-template-rows: repeat(3, 34px);
  gap: 5px;
  justify-self: end;
}

.namedate-arrows button {
  min-height: 34px;
}

.namedate-arrows [data-move="up"] {
  grid-column: 2;
}

.namedate-arrows [data-move="left"] {
  grid-column: 1;
  grid-row: 2;
}

.namedate-arrows [data-move="right"] {
  grid-column: 3;
  grid-row: 2;
}

.namedate-arrows [data-move="down"] {
  grid-column: 2;
  grid-row: 3;
}

.namedate-quick {
  display: grid;
  gap: 8px;
  margin-top: 0;
}

.namedate-quick {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.namedate-preview-col {
  display: grid;
  gap: 10px;
}

.namedate-live .preview-head span {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #bbf7d0;
  color: #15803d;
  font-size: 12px;
  font-weight: 900;
}

.namedate-live-head {
  display: block;
  align-items: start;
  gap: 10px;
  flex-wrap: nowrap;
}

.namedate-live-head > div:first-child {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.namedate-live-download {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

.namedate-live-download strong {
  color: #0f172a;
  font-size: 15px;
  white-space: nowrap;
}

.namedate-live-download > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.namedate-live-download h2 {
  margin: 4px 0 0;
  color: #0f172a;
  font-size: 15px;
}

.namedate-live-download .primary-btn,
.namedate-live-download .secondary-btn {
  min-height: 36px;
  padding: 8px 9px;
  font-size: 12px;
  min-width: 0;
  overflow-wrap: normal;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}

.namedate-live canvas {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  border: 1px solid #000000;
  background: #ffffff;
}

.namedate-live .preview-head {
  margin-bottom: 6px;
}

.namedate-live .preview-head::after {
  content: none;
}

.namedate-live-zoom {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.namedate-live-zoom button {
  min-width: 48px;
}

.namedate-info dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 0;
  color: #52627a;
  font-size: 13px;
  font-weight: 700;
}

.namedate-info dd {
  margin: 0;
  color: #0f172a;
}

.namedate-bottom {
  display: block;
  margin-top: 14px;
}

.namedate-file-settings {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid #e5eaf3;
}

.namedate-file-settings h3 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 14px;
}

.namedate-setting-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}

.namedate-setting-row strong {
  display: block;
  margin-bottom: 8px;
  color: #52627a;
  font-size: 12px;
}

.namedate-setting-row .chip-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.namedate-setting-row [data-namedate-targets] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.namedate-setting-row [data-namedate-formats] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.namedate-setting-row label {
  display: grid;
  gap: 7px;
  color: #52627a;
  font-size: 12px;
  font-weight: 800;
}

.namedate-download {
  align-self: stretch;
}

.namedate-download .secondary-btn {
  margin-top: 10px;
  color: #6d35f4;
  border-color: #9b7cff;
}

@media (max-width: 1280px) {
  .namedate-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  }

  .namedate-preview-col {
    grid-column: 1 / -1;
  }

  .namedate-live {
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }

  .namedate-live .namedate-live-head {
    grid-column: 1 / -1;
  }

  .namedate-live canvas {
    max-width: 420px;
  }

  .namedate-live-zoom {
    align-self: center;
    margin-top: 0;
  }
}

@media (max-width: 1120px) {
  .custom-smart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smart-upload-panel,
  .smart-crop-panel,
  .smart-actions-panel {
    grid-column: auto;
  }

  .smart-preview-panel,
  .smart-print-panel {
    grid-column: span 2;
  }

  .namedate-grid {
    grid-template-columns: 1fr;
  }

  .namedate-preview-col {
    grid-column: auto;
  }

  .namedate-live {
    display: block;
  }

  .namedate-live canvas {
    max-width: 100%;
  }

  .namedate-live-zoom {
    margin-top: 10px;
  }
}

@media (max-width: 1050px) {
  .desktop-nav {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
  }

  .header-inner {
    justify-content: space-between;
  }

  .hero,
  .workspace-grid,
  .qrscan-grid,
  .affidavit-grid,
  .resume-grid,
  .vcard-grid,
  .schoolid-grid,
  .annotate-grid,
  .pdfform-grid,
  .dxf-grid,
  .aibg-grid,
  .heic-grid,
  .idcard-grid,
  .passport-grid,
  .photo50-grid,
  .signature-grid,
  .scanner-grid,
  .bgremove-grid,
  .enhancer-grid,
  .namedate-grid,
  .namedate-setting-row {
    grid-template-columns: 1fr;
  }

  .namedate-controls {
    order: 2;
  }

  .namedate-preview-col {
    order: 3;
  }

  .options-panel {
    position: static;
  }

  .affidavit-controls {
    position: static;
  }

  .resume-controls {
    position: static;
  }

  .vcard-controls {
    position: static;
  }

  .schoolid-controls,
  .schoolid-preview-panel {
    position: static;
  }

  .annotate-controls {
    position: static;
  }

  .pdfform-controls {
    position: static;
  }

  .dxf-controls {
    position: static;
  }

  .aibg-controls {
    position: static;
  }

  .heic-controls {
    position: static;
  }

  .idcard-preview-panel {
    position: static;
  }

  .panprint-workspace {
    width: min(100% - 24px, 1560px);
  }

  .panprint-topbar,
  .panprint-grid,
  .panprint-card-preview,
  .panprint-settings {
    grid-template-columns: 1fr;
  }

  .panprint-topbar h1 {
    text-align: left;
    font-size: 20px;
  }

  .panprint-preview,
  .panprint-a4 {
    grid-column: auto;
  }

  .panprint-selects {
    grid-template-columns: 1fr;
  }

  .panprint-segment label {
    grid-template-columns: 1fr auto;
    margin-left: 0;
    width: 100%;
  }

  .panprint-actions {
    justify-content: stretch;
  }

  .panprint-actions .primary-btn {
    flex: 1 1 100%;
  }

  .passport-workspace {
    width: min(100% - 24px, 980px);
  }

  .passport-pro-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .passport-pro-actions {
    width: 100%;
  }

  .passport-pro-actions button {
    flex: 1 1 150px;
  }

  .passport-pro-grid {
    grid-template-columns: 1fr;
  }

  .passport-pro .passport-sheet-panel,
  .passport-print-panel {
    position: static;
  }

  .passport-pro .passport-sheet-box {
    min-height: 460px;
  }

  .passport-topbar {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .passport-topbar h1 {
    text-align: left;
    font-size: 22px;
  }

  .passport-editor,
  .passport-sheet-panel {
    grid-column: auto;
  }

  .passport-sheet-panel {
    position: static;
  }

  .photo50-preview-panel {
    position: static;
  }

  .signature-preview-panel {
    position: static;
  }

  .scanner-preview-panel {
    position: static;
  }

  .bgremove-preview-panel {
    position: static;
  }

  .enhancer-preview-panel {
    position: static;
  }

  .namedate-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .namedate-shell {
    width: min(100% - 40px, 1440px);
  }

  .namedate-head-download {
    min-width: 0;
    width: 100%;
  }

  .feature-strip,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-promo-grid,
  .home-contact-grid {
    grid-template-columns: 1fr;
  }

  .why-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .brand strong {
    font-size: 18px;
  }

  .brand small {
    font-size: 10px;
  }

  .desktop-nav {
    gap: 15px;
  }

  .desktop-nav a {
    font-size: 12px;
  }

  .contact-nav-item > a {
    font-size: 11px;
  }

  .mega {
    width: min(1040px, calc(100vw - 32px));
  }

  .mega-pdf-tools {
    width: min(1040px, calc(100vw - 32px));
  }

.mega-image-tools {
  width: min(1040px, calc(100vw - 32px));
}

.mega-id-card-print {
  width: min(1040px, calc(100vw - 32px));
}

  .mega-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mega-column:nth-child(3n) {
    border-right: 1px solid #e5e7eb;
  }

  .mega-column:last-child {
    border-right: 0;
  }
}

@media (max-width: 900px) {
  .panprint-workspace {
    width: min(100% - 24px, 760px);
    margin-top: 12px;
  }

  .panprint-topbar,
  .panprint-grid,
  .panprint-card-preview {
    grid-template-columns: 1fr;
  }

  .panprint-topbar {
    gap: 10px;
  }

  .panprint-topbar h1 {
    text-align: left;
    font-size: 20px;
  }

  .panprint-size {
    justify-self: start;
    max-width: 100%;
  }

  .panprint-preview,
  .panprint-a4 {
    grid-column: auto;
  }

  .panprint-imagebar {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .panprint-imagebar button {
    flex: 1 1 calc(50% - 8px);
  }

  .mega {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 88px);
    padding: 16px;
  }

  .mega-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .mega-search-wrap {
    width: 100%;
    margin-left: 0;
  }

  .mega-tabs {
    justify-content: space-between;
    gap: 12px;
  }

  .mega-grid {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .mega-column {
    padding: 0 0 16px;
    border-right: 0;
    border-bottom: 1px solid #e5e7eb;
  }

  .mega-column:last-child {
    border-bottom: 0;
  }

  .idcard-mega {
    padding: 16px;
  }

  .idcard-mega-grid {
    grid-template-columns: 1fr;
  }

  .compresspdf-grid,
  .compresspdf-bottom-grid {
    grid-template-columns: 1fr;
  }

  .mergepdf-app {
    grid-template-columns: 1fr;
  }

  .mergepdf-sidebar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #e5eaf3;
    padding: 10px;
  }

  .mergepdf-sidebar h2 {
    display: none;
  }

  .mergepdf-sidebar a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .image-tools-sidebar h3 {
    display: none;
  }

  .compress-image-app .image-tools-main {
    padding: 14px;
  }

  .compress-image-grid {
    grid-template-columns: 1fr;
  }

  .compress-image-side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compress-image-side-card:last-child {
    grid-column: 1 / -1;
  }

  .compress-image-steps {
    grid-template-columns: repeat(5, minmax(84px, 1fr));
    overflow-x: auto;
  }

  .rotateimage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rotateimage-upload-card,
  .rotateimage-mode-card,
  .rotateimage-review-card,
  .rotateimage-download-card {
    grid-column: span 1;
  }

  .rotateimage-tips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rotateimage-tips span {
    border-bottom: 1px solid #ede9fe;
  }

  .mergepdf-stage {
    grid-template-columns: 1fr;
  }

  .mergepdf-add-card {
    min-height: 118px;
    border-radius: 8px;
  }

  .mergepdf-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mergepdf-feature-row strong {
    grid-column: 1 / -1;
  }

  .splitpdf-method-grid {
    grid-template-columns: 1fr;
  }

  .splitpdf-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .croppdf-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .croppdf-toolbar label,
  .croppdf-toolbar select {
    width: 100%;
  }

  .croppdf-pager {
    justify-content: space-between;
  }

  .croppdf-preview-grid {
    grid-template-columns: 1fr;
  }

  .organizepdf-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .organizepdf-toolbar span {
    flex: 1 0 100%;
    margin-right: 0;
  }

  .organizepdf-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .organizepdf-card {
    min-height: 148px;
  }

  .organizepdf-card img {
    width: 66px;
    height: 98px;
  }

  .rotatepdf-tabs,
  .rotatepdf-quick {
    grid-template-columns: 1fr;
  }

  .rotatepdf-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .rotatepdf-card {
    min-height: 164px;
  }

  .rotatepdf-card img {
    width: 62px;
    height: 92px;
  }

  .removepdf-tabs,
  .removepdf-range {
    grid-template-columns: 1fr;
  }

  .remove-pdf-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .remove-pdf-card {
    min-height: 146px;
  }

  .remove-pdf-card img {
    width: 62px;
    height: 92px;
  }

  .extractpdf-filters,
  .extractpdf-settings {
    grid-template-columns: 1fr;
  }

  .extractpdf-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .extractpdf-card {
    min-height: 146px;
  }

  .extractpdf-card img {
    width: 66px;
    height: 78px;
  }

  .pagenumpdf-settings,
  .pagenumpdf-range,
  .pagenumpdf-final-preview {
    grid-template-columns: 1fr;
  }

  .pagenumpdf-position {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pagenumpdf-position button {
    width: 100%;
  }

  .compresspdf-preview-card {
    grid-column: auto;
  }

  .compresspdf-previews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-promo {
    min-height: 176px;
  }

  .home-help-card {
    grid-template-columns: 64px minmax(0, 1fr) 104px;
  }

  .home-help-card img {
    width: 104px;
    height: 104px;
  }
}

@media (max-width: 760px) {
  .custom-smartcard {
    width: min(100% - 18px, 1880px);
  }

  .custom-smart-grid,
  .smart-upload-actions,
  .smart-card-upload-grid,
  .smart-side-preview,
  .smart-print-options,
  .smart-a4-settings,
  .smart-tool-buttons,
  .smart-tool-grid {
    grid-template-columns: 1fr;
  }

  .smart-preview-panel,
  .smart-print-panel,
  .smart-actions-panel {
    grid-column: auto;
  }

  .smart-panel {
    padding: 12px;
  }

  .smart-panel h2 {
    flex-wrap: wrap;
    font-size: 14px;
  }

  .smart-panel h2 b {
    width: 100%;
    margin-left: 36px;
    text-align: center;
  }

  .smart-crop-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .smart-crop-toolbar label {
    grid-column: 1 / -1;
  }

  .smart-crop-stage {
    min-height: 230px;
  }

  .smart-range {
    grid-template-columns: 1fr;
  }

  .smart-preview-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-shell,
  .header-inner,
  .footer-grid {
    width: min(100% - 22px, 1180px);
  }

  .site-footer {
    width: 100%;
  }

  .compress-image-app .image-tools-main {
    padding: 12px;
  }

  .compress-image-head {
    display: grid;
    gap: 8px;
  }

  .compress-image-head h2 {
    font-size: 18px;
  }

  .compress-image-head p {
    font-size: 11px;
  }

  .compress-image-steps {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

  .compress-image-steps span {
    min-height: 34px;
  }

  .compress-image-drop {
    min-height: 190px;
  }

  .compress-image-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compress-image-options,
  .image-convert-pro-settings,
  .compress-image-summary-grid,
  .compress-image-side,
  .compress-image-actions {
    grid-template-columns: 1fr;
  }

  .compress-image-card,
  .compress-image-side-card {
    padding: 12px;
  }

  .compress-image-file-list .file-row,
  .compress-image-results .result-row {
    align-items: stretch;
    flex-direction: column;
  }

  .compress-image-file-list .file-row .secondary-btn,
  .compress-image-results .result-row .primary-btn {
    width: 100%;
  }

  .rotateimage-head,
  .rotateimage-card-head,
  .rotateimage-bottom-actions,
  .rotateimage-job,
  .rotateimage-download-row {
    align-items: stretch;
    flex-direction: column;
  }

  .rotateimage-head h2 {
    font-size: 22px;
  }

  .rotateimage-grid,
  .rotateimage-mode,
  .rotateimage-files,
  .rotateimage-preview-grid,
  .rotateimage-tips {
    grid-template-columns: 1fr;
  }

  .rotateimage-upload-card,
  .rotateimage-mode-card,
  .rotateimage-review-card,
  .rotateimage-download-card {
    grid-column: 1 / -1;
  }

  .rotateimage-card {
    min-height: 0;
    padding: 12px;
  }

  .rotateimage-range span {
    grid-template-columns: 1fr 58px auto;
  }

  .rotateimage-quick {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .panprint-workspace {
    width: min(100% - 20px, 560px);
  }

  .panprint-panel {
    padding: 12px;
  }

  .panprint-drop {
    min-height: 148px;
  }

  .panprint-card-preview canvas {
    min-height: 150px;
  }

  .panprint-segment {
    align-items: stretch;
    gap: 8px;
  }

  .panprint-segment span {
    flex: 1 0 100%;
  }

  .panprint-segment button {
    flex: 1 1 100%;
  }

  .panprint-segment label {
    margin-top: 4px;
  }

  .panprint-imagebar button {
    flex-basis: 100%;
  }

  .panprint-option {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .panprint-mini {
    display: none;
  }

  .passport-workspace {
    width: min(100% - 20px, 560px);
    margin-top: 12px;
  }

  .passport-pro-head {
    gap: 10px;
  }

  .passport-pro-brand {
    gap: 10px;
  }

  .passport-pro-icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    font-size: 13px;
  }

  .passport-pro-head h1 {
    font-size: 20px;
  }

  .passport-pro-head p {
    font-size: 12px;
  }

  .passport-pro-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .passport-pro-actions button {
    min-height: 38px;
    padding: 0 8px;
    font-size: 11px;
  }

  .passport-photo-tabs {
    grid-template-columns: 1fr;
  }

  .passport-photo-tab {
    min-height: 64px;
  }

  .passport-edit-layout {
    grid-template-columns: 1fr;
  }

  .passport-tool-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .passport-tool-rail button {
    min-height: 40px;
    padding: 6px 4px;
    font-size: 9px;
  }

  .passport-range-grid,
  .passport-info-strip,
  .passport-validation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .passport-bg-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .passport-copy-box label span {
    grid-template-columns: 48px 70px auto;
  }

  .passport-preview-toggles {
    width: 100%;
  }

  .passport-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .passport-topbar {
    gap: 10px;
  }

  .passport-topbar h1 {
    font-size: 19px;
  }

  .passport-size {
    width: 100%;
    white-space: normal;
  }

  .passport-panel {
    padding: 12px;
  }

  .passport-panel h2 {
    align-items: flex-start;
    font-size: 14px;
  }

  .passport-drop {
    min-height: 150px;
  }

  .passport-image-box {
    min-height: 270px;
  }

  .passport-sheet-box {
    min-height: 290px;
    padding: 10px;
  }

  .related .tool-grid {
    grid-template-columns: 1fr;
  }

  .brand small {
    display: none;
  }

  .hero {
    padding-top: 26px;
  }

  .hero-cards,
  .tool-grid,
  .home-tool-grid,
  .why-grid,
  .feature-strip,
  .steps,
  .manual-upload,
  .mode-toggle,
  .form-grid,
  .button-row,
  .passport-mini-grid,
  .passport-actions {
    grid-template-columns: 1fr;
  }

  .passport-side-tools button {
    flex-basis: 100%;
  }

  .passport-bg-row label {
    flex-basis: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .home-tools {
    width: min(100% - 22px, 1180px);
    gap: 14px;
    padding-top: 16px;
  }

  .home-tool-panel,
  .why-strip,
  .home-help-card,
  .home-support-card {
    padding: 14px;
  }

  .home-panel-head {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .home-panel-head a {
    width: 100%;
  }

  .home-tool-card {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 0;
    padding: 14px;
  }

  .home-tool-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .home-tool-icon::before {
    width: 22px;
    height: 22px;
  }

  .home-promo {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px;
  }

  .passport-preview,
  .id-preview,
  .calendar-preview {
    justify-self: start;
  }

  .home-promo-visual {
    width: min(100%, 230px);
    min-height: 140px;
  }

  .home-promo-visual img {
    max-height: 180px;
  }

  .why-grid div {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .home-help-card,
  .home-support-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .home-help-card img {
    width: 118px;
    height: 118px;
  }

  .home-support-image {
    justify-self: start;
    width: min(100%, 190px);
    max-height: 155px;
  }

  .home-coffee-qr {
    justify-self: start;
    width: min(100%, 150px);
  }

  .coffee-support-panel {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .coffee-support-panel img {
    justify-self: center;
    width: min(100%, 330px);
    max-height: none;
  }

  .footer-visitor-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    text-align: center;
  }

  .splitpdf-file-box,
  .splitpdf-result-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .splitpdf-result-row a {
    justify-self: start;
  }

  .splitpdf-range-row {
    grid-template-columns: 1fr;
  }

  .splitpdf-tabs {
    grid-template-columns: 1fr;
  }

  .tool-hero h1,
  .hero h1 {
    font-size: 34px;
  }

  .namedate-shell {
    width: min(100% - 24px, 1440px);
  }

  .namedate-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .namedate-editor-head {
    align-items: stretch;
    flex-direction: column;
  }

  .namedate-upload-main {
    width: 100%;
  }

  .namedate-stage {
    min-height: 360px;
  }

  .namedate-position {
    grid-template-columns: 1fr;
  }

  .namedate-position-grid,
  .namedate-arrows {
    justify-self: start;
  }

  .namedate-quick {
    grid-template-columns: 1fr;
  }

  .namedate-inline {
    grid-template-columns: repeat(3, 46px) repeat(2, minmax(80px, 1fr));
    max-width: none;
  }

  .namedate-setting-row [data-namedate-formats],
  .namedate-setting-row .chip-row {
    grid-template-columns: 1fr;
  }

  .namedate-setting-row [data-namedate-targets] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dxf-controls .button-row {
    grid-template-columns: 1fr;
  }

  .dxf-preview {
    min-height: 300px;
  }

  .dxf-preview iframe {
    height: 320px;
  }

  .namedate-live-head {
    flex-direction: column;
  }

  .namedate-live-download > div {
    grid-template-columns: 1fr;
  }

  .namedate-live-download .primary-btn,
  .namedate-live-download .secondary-btn {
    width: 100%;
  }

  .compresspdf-workspace {
    width: min(100% - 16px, 1180px);
    gap: 12px;
  }

  .mergepdf-workspace {
    width: min(100% - 16px, 1180px);
  }

  .mergepdf-main {
    padding: 14px;
  }

  .mergepdf-head {
    display: grid;
  }

  .mergepdf-head h2 {
    font-size: 21px;
  }

  .mergepdf-drop {
    min-height: 238px;
    padding: 18px;
  }

  .mergepdf-files {
    grid-template-columns: 1fr;
  }

  .mergepdf-actions,
  .mergepdf-stats,
  .mergepdf-download-grid,
  .mergepdf-compress-box div {
    grid-template-columns: 1fr;
  }

  .mergepdf-actions {
    justify-content: stretch;
  }

  .mergepdf-actions .primary-btn,
  .mergepdf-actions .secondary-btn,
  .mergepdf-delete {
    width: 100%;
  }

  .mergepdf-feature-row {
    grid-template-columns: 1fr;
  }

  .mergepdf-feature-row strong,
  .mergepdf-feature-row span {
    border-right: 0;
    border-bottom: 1px solid #eef2f7;
  }

  .mergepdf-feature-row span:last-child {
    border-bottom: 0;
  }

  .compresspdf-card {
    padding: 13px;
  }

  .compresspdf-presets,
  .compresspdf-targets,
  .compresspdf-previews,
  .compresspdf-download-actions,
  .compresspdf-sizes {
    grid-template-columns: 1fr;
  }

  .compresspdf-progress-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .compresspdf-progress-row b {
    text-align: left;
  }

  .compresspdf-total {
    display: grid;
    grid-template-columns: 1fr;
    text-align: left;
  }
}

@media print {
  body * {
    visibility: hidden !important;
  }

  .affidavit-paper,
  .affidavit-paper *,
  .resume-paper,
  .resume-paper * {
    visibility: visible !important;
  }

  .affidavit-paper {
    position: absolute;
    inset: 0 auto auto 0;
    width: 210mm;
    min-height: 297mm;
    margin: 0;
    padding: 22mm 18mm;
    border: 0;
    box-shadow: none;
  }

  .resume-paper {
    position: absolute;
    inset: 0 auto auto 0;
    width: 210mm;
    min-height: 297mm;
    margin: 0;
    padding: 18mm 16mm;
    border: 0;
    box-shadow: none;
  }
}

.mobile-only-card {
  display: none;
}

@media (max-width: 980px) {
  .about-section-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-about {
    grid-column: 1 / -1;
  }

}

@media (max-width: 760px) {
  body {
    background: #f8fbff;
  }

  .simple-page,
  .not-found {
    width: min(100% - 20px, 1040px);
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 28px 18px;
  }

  .about-card {
    padding: 18px;
  }

  .legal-card {
    padding: 18px;
  }

  .about-card h2 {
    font-size: 20px;
  }

  .legal-card h2 {
    font-size: 19px;
  }

  .site-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e6edf7;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  }

  .tool-titlebar {
    width: min(100% - 22px, 1180px);
    margin-top: 12px;
  }

  .tool-titlebar h1 {
    font-size: 20px;
    line-height: 1.15;
  }

  .header-inner {
    width: min(100% - 24px, 1180px);
    height: 68px;
    max-height: 68px;
    gap: 10px;
  }

  .brand {
    min-width: 0;
    height: 68px;
    max-height: 68px;
    gap: 8px;
  }

  .brand .brand-mark {
    width: clamp(176px, 54vw, 250px);
    height: 98px;
    transform: translateY(6px);
  }

  .brand strong {
    font-size: clamp(22px, 6vw, 30px);
    white-space: nowrap;
  }

  .brand strong span:first-child {
    color: #0b1736;
  }

  .menu-btn {
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    overflow: hidden;
    border-radius: 12px;
    background: #ffffff;
    color: transparent;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  }

  .menu-btn::before,
  .menu-btn::after {
    content: "";
    position: absolute;
    left: 17px;
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: #0b1736;
  }

  .menu-btn::before {
    top: 19px;
    box-shadow: 0 7px 0 #0b1736;
  }

  .menu-btn::after {
    top: 33px;
  }

  .menu-btn::before,
  .menu-btn::after {
    left: 14px;
    width: 20px;
  }

  .menu-btn::before {
    top: 15px;
    box-shadow: 0 7px 0 #0b1736;
  }

  .menu-btn::after {
    top: 29px;
  }

  .hero.page-shell {
    width: 100%;
  }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
    padding: 22px 14px 18px;
    background:
      radial-gradient(circle at 20% 18%, rgba(124, 58, 237, 0.08), transparent 26%),
      radial-gradient(circle at 82% 12%, rgba(14, 165, 233, 0.12), transparent 28%),
      linear-gradient(180deg, #f9fbff 0%, #ffffff 54%, #f7fbff 100%);
    box-shadow: inset 0 -1px 0 #e8eef7;
  }

  .hero-visual {
    order: 1;
    justify-self: center;
    width: min(100%, 360px);
    margin: 0 auto 12px;
  }

  .hero-visual img {
    max-height: 310px;
    object-position: center;
  }

  .hero-copy {
    order: 2;
    width: 100%;
    text-align: center;
  }

  .hero-copy::before {
    content: "100% FREE - No Sign Up Required";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    margin: 0 auto 12px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #11834c;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  }

  .hero h1 {
    max-width: 340px;
    margin: 0 auto;
    color: #0b1736;
    font-size: clamp(30px, 8.8vw, 42px);
    line-height: 1.1;
    font-weight: 950;
  }

  .hero p {
    max-width: 340px;
    margin: 10px auto 0;
    color: #45556f;
    font-size: 15px;
    line-height: 1.48;
  }

  .hero-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 360px;
    margin: 18px auto 0;
  }

  .mobile-only-card {
    display: grid;
  }

  .hero-card {
    grid-template-columns: 46px minmax(0, 1fr);
    place-items: center start;
    gap: 10px;
    min-height: 92px;
    border-color: #e6edf7;
    border-radius: 12px;
    padding: 12px;
    text-align: left;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
  }

  .hero-card > span {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    font-size: 13px;
  }

  .hero-card strong {
    align-self: end;
    color: #0b1736;
    font-size: 15px;
    line-height: 1.18;
  }

  .hero-card::after {
    align-self: start;
    color: #52627a;
    font-size: 12px;
    line-height: 1.35;
  }

  .hero-card:nth-child(1)::after {
    content: "Create passport size photos easily";
  }

  .hero-card:nth-child(2)::after {
    content: "Edit, Convert, Merge PDFs in seconds";
  }

  .hero-card:nth-child(3)::after {
    content: "Convert, Compress images easily";
  }

  .hero-card:nth-child(4)::after {
    content: "Print ID cards, PAN, Aadhaar & more";
  }

  .hero-card:nth-child(5)::after {
    content: "Calculate age, DOB & more";
  }

  .hero-card-more::after {
    content: "Explore more free tools";
  }

  .hero-card-more > span {
    background: #e4e9f7;
    color: #5061b7;
    letter-spacing: 2px;
  }

  .feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 360px;
    margin: 18px auto 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .feature-strip div {
    justify-content: flex-start;
    min-height: 54px;
    border: 1px solid #e6edf7;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    padding: 10px 10px 10px 42px;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  }

  .feature-strip div:not(:last-child) {
    border-right: 1px solid #e6edf7;
  }

  .feature-strip div::before {
    left: 12px;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
  }

  .feature-strip div::after {
    left: 20px;
    top: 50%;
    transform: translateY(-60%) rotate(45deg);
  }

  .feature-strip strong {
    color: #0b1736;
    font-size: 12px;
    line-height: 1.25;
  }

  .home-tools {
    display: grid;
    width: min(100% - 20px, 1180px);
    gap: 12px;
    padding-top: 12px;
  }

  .home-tool-panel {
    padding: 12px;
    border-radius: 10px;
  }

  .home-panel-head {
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 12px;
  }

  .home-panel-head h2 {
    font-size: 19px;
    line-height: 1.15;
  }

  .home-panel-head a {
    width: auto;
    min-height: 34px;
    flex: 0 0 auto;
    border-radius: 8px;
    padding: 0 9px;
    font-size: 11px;
    white-space: nowrap;
  }

  .home-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-tool-card {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
    min-height: 132px;
    padding: 11px;
    border-radius: 10px;
  }

  .home-tool-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .home-tool-icon::before {
    width: 20px;
    height: 20px;
  }

  .home-tool-card strong {
    font-size: 14px;
    line-height: 1.22;
  }

  .home-tool-card small {
    display: -webkit-box;
    overflow: hidden;
    color: #52627a;
    font-size: 11.5px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .home-promo-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .home-promo {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 1fr);
    align-items: center;
    min-height: 210px;
    padding: 18px 16px;
    border-radius: 10px;
  }

  .home-promo strong {
    margin-bottom: 9px;
    font-size: 22px;
    line-height: 1.12;
  }

  .home-promo small {
    margin-top: 6px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.2;
  }

  .home-promo small::before {
    top: 4px;
    width: 10px;
    height: 6px;
  }

  .home-promo b {
    min-height: 42px;
    margin-top: 14px;
    border-radius: 7px;
    padding: 0 16px;
    font-size: 14px;
  }

  .home-promo-visual {
    justify-self: end;
    width: 100%;
    min-height: 156px;
    margin-top: 0;
  }

  .home-promo-visual img,
  .passport-preview img,
  .id-preview img,
  .calendar-preview img {
    max-height: 168px;
  }

  .home-promo-age {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 1fr);
    min-height: 210px;
  }

  .home-promo-age .home-promo-visual {
    align-self: center;
    margin-top: 0;
  }

  .home-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-help-card,
  .home-support-card {
    grid-template-columns: 1fr;
    align-content: start;
    justify-items: start;
    min-height: 186px;
    padding: 12px;
    border-radius: 10px;
  }

  .home-help-card img,
  .home-coffee-qr {
    display: none;
  }

  .whatsapp-mark {
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
  }

  .whatsapp-mark::before {
    width: 22px;
    height: 22px;
  }

  .home-help-card h2,
  .home-support-card h2 {
    font-size: 15px;
    line-height: 1.2;
  }

  .home-help-card p,
  .home-support-card p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 7px;
    font-size: 11.5px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .home-help-card a,
  .coffee-btn {
    min-height: 32px;
    margin-top: 10px;
    border-radius: 7px;
    padding: 0 9px;
    font-size: 11px;
  }

  .why-strip {
    padding: 14px 12px;
    border-radius: 10px;
  }

  .why-strip h2 {
    max-width: 260px;
    margin: 0 auto 12px;
    font-size: 20px;
    line-height: 1.15;
  }

  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .why-grid div {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 4px 8px;
    min-height: 76px;
    border: 1px solid #e6edf7;
    border-radius: 10px;
    background: #ffffff;
    padding: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
  }

  .why-icon {
    align-self: start;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: currentColor;
  }

  .why-icon::before {
    width: 18px;
    height: 18px;
    background: #ffffff;
  }

  .why-grid strong {
    font-size: 12.5px;
    line-height: 1.18;
  }

  .why-grid small {
    grid-column: 2;
    font-size: 10.8px;
    line-height: 1.28;
  }

  .footer-shell {
    width: min(100% - 22px, 1180px);
  }

  .footer-grid {
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
    padding: 30px 0 22px;
  }

  .footer-visitor-bar {
    max-width: calc(100% - 22px);
    gap: 8px;
    padding: 7px 12px 9px;
  }

  .visitor-note {
    display: none;
  }

  .footer-about {
    grid-column: 1 / -1;
    text-align: center;
  }

  .footer-about p {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-brand {
    justify-content: center;
  }

  .socials {
    justify-content: center;
  }

  .footer-grid section:not(.footer-about) {
    text-align: center;
  }

  .footer-grid a {
    justify-content: center;
  }

  .footer-grid h2 {
    font-size: 15px;
  }

  .footer-grid p,
  .footer-grid a {
    font-size: 12.5px;
    line-height: 1.45;
  }

  .copyright {
    padding-bottom: 70px;
  }

  .whatsapp-fab {
    left: auto;
    right: 12px;
    bottom: 12px;
    min-height: 0;
    padding: 10px 14px;
    font-size: 15px;
  }
}

@media (max-width: 390px) {
  .hero {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero-card {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 11px;
    min-height: 104px;
    padding: 13px;
  }

  .hero-card > span {
    width: 48px;
    height: 48px;
    font-size: 14px;
  }

  .hero-card strong {
    font-size: 16px;
  }

  .hero-card::after {
    font-size: 12.5px;
  }

  .feature-strip strong {
    font-size: 11px;
  }

  .feature-strip {
    gap: 7px;
  }

  .feature-strip div {
    min-height: 50px;
    padding: 9px 8px 9px 36px;
  }

  .feature-strip div::before {
    left: 9px;
    width: 20px;
    height: 20px;
  }

  .feature-strip div::after {
    left: 16px;
  }

  .home-tool-panel {
    padding: 10px;
  }

  .home-panel-head {
    gap: 8px;
  }

  .home-panel-head h2 {
    font-size: 17px;
  }

  .home-panel-head a {
    min-height: 32px;
    padding: 0 7px;
    font-size: 10px;
  }

  .home-tool-grid {
    gap: 8px;
  }

  .home-tool-card {
    min-height: 122px;
    padding: 9px;
  }

  .home-tool-card strong {
    font-size: 13px;
  }

  .home-tool-card small {
    font-size: 10.8px;
  }

  .home-promo-grid,
  .home-contact-grid {
    gap: 8px;
  }

  .home-promo {
    grid-template-columns: minmax(0, 1fr) 130px;
    min-height: 176px;
    padding: 14px 12px;
  }

  .home-promo strong {
    font-size: 19px;
  }

  .home-promo small {
    padding-left: 17px;
    font-size: 12.5px;
  }

  .home-promo b {
    min-height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }

  .home-promo-visual {
    min-height: 118px;
  }

  .home-promo-visual img,
  .passport-preview img,
  .id-preview img,
  .calendar-preview img {
    max-height: 136px;
  }

  .home-promo-age {
    grid-template-columns: minmax(0, 1fr) 130px;
    min-height: 176px;
  }

  .home-help-card,
  .home-support-card {
    min-height: 172px;
    padding: 10px;
  }

  .whatsapp-mark {
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
  }

  .home-help-card h2,
  .home-support-card h2 {
    font-size: 13.5px;
  }

  .home-help-card p,
  .home-support-card p {
    font-size: 10.5px;
    -webkit-line-clamp: 4;
  }

  .home-help-card a,
  .coffee-btn {
    min-height: 30px;
    padding: 0 7px;
    font-size: 10px;
  }

  .why-strip {
    padding: 12px 10px;
  }

  .why-strip h2 {
    font-size: 18px;
  }

  .why-grid {
    gap: 8px;
  }

  .why-grid div {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 72px;
    padding: 9px 8px;
  }

  .why-icon {
    width: 28px;
    height: 28px;
  }

  .why-icon::before {
    width: 16px;
    height: 16px;
  }

  .why-grid strong {
    font-size: 11.5px;
  }

  .why-grid small {
    font-size: 10px;
  }
}

@media (min-width: 980px) {
  .passport-pro {
    width: min(1510px, calc(100% - 32px)) !important;
    max-width: 1510px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible;
  }

  .passport-pro-head {
    align-items: center !important;
    flex-direction: row !important;
  }

  .passport-pro-actions {
    width: auto !important;
  }

  .passport-pro-grid {
    grid-template-columns: minmax(330px, 424px) minmax(235px, 262px) minmax(380px, 552px) minmax(220px, 262px) !important;
    gap: 10px !important;
  }

  .passport-pro .passport-editor,
  .passport-pro .passport-sheet-panel,
  .passport-pro .passport-options-panel,
  .passport-pro .passport-print-panel {
    grid-column: auto !important;
    position: static !important;
    min-width: 0 !important;
  }

  .passport-pro .passport-image-box {
    min-height: 417px !important;
  }

  .passport-pro .passport-sheet-box {
    min-height: 636px !important;
  }
}

@media (min-width: 980px) and (max-width: 1399px) {
  .passport-pro-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr) !important;
  }

  .passport-pro .passport-sheet-panel,
  .passport-pro .passport-print-panel {
    position: static !important;
  }
}

@media (max-width: 979px) {
  .passport-pro {
    width: min(100% - 24px, 760px) !important;
    max-width: 760px !important;
    overflow: visible !important;
  }

  .passport-pro-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .passport-pro-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100% !important;
  }

  .passport-pro-grid {
    grid-template-columns: 1fr !important;
  }

  .passport-photo-tabs {
    grid-template-columns: 1fr !important;
  }

  .passport-edit-layout {
    grid-template-columns: 1fr !important;
  }

  .passport-tool-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .passport-pro .passport-image-box,
  .passport-pro .passport-sheet-box {
    min-height: 320px !important;
  }

  .passport-pro .passport-sheet-panel,
  .passport-pro .passport-print-panel {
    position: static !important;
  }
}

@media (max-width: 560px) {
  .passport-pro {
    width: min(100% - 18px, 520px) !important;
  }

  .passport-pro-actions {
    grid-template-columns: 1fr !important;
  }

  .passport-range-grid,
  .passport-adjust-grid,
  .passport-info-strip,
  .passport-validation,
  .passport-border-box {
    grid-template-columns: 1fr !important;
  }

  .passport-tool-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.passport-actions button {
  border: 1px solid #4b19e6;
  background: #4b19e6;
  color: #fff;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
  box-shadow: 0 8px 18px rgba(75, 25, 230, .16);
}

.passport-actions button:hover,
.passport-actions button:focus-visible {
  border-color: #3b12c7;
  background: #3b12c7;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.passport-actions button.active {
  border-color: #4b19e6;
  background: #4b19e6;
  color: #fff;
  box-shadow: 0 8px 18px rgba(75, 25, 230, .2);
}

.passport-pro .passport-photo-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 6px 0 20px !important;
}

.passport-pro .passport-photo-tab {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.passport-pro .passport-photo-tab h3 {
  margin: 0 !important;
  color: #07122f !important;
  font-size: clamp(18px, 1.45vw, 22px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
}

.passport-pro .passport-photo-tab h3 span {
  font-weight: 500 !important;
}

.passport-pro .passport-upload-card {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: 150px !important;
  overflow: hidden !important;
  border: 1.5px solid #d8dee8 !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #07122f !important;
  padding: 22px 18px !important;
  text-align: center !important;
  cursor: pointer !important;
}

.passport-pro .passport-photo-tab.active .passport-upload-card,
.passport-pro .passport-upload-card:hover,
.passport-pro .passport-upload-card:focus-visible,
.passport-pro .passport-upload-card.dragging {
  border-color: #6d28d9 !important;
  background: #fbfaff !important;
  outline: none !important;
}

.passport-pro .passport-upload-plus {
  display: block !important;
  margin-bottom: 12px !important;
  color: #07122f !important;
  font-size: 42px !important;
  line-height: .75 !important;
  font-weight: 300 !important;
}

.passport-pro .passport-upload-card strong {
  display: block !important;
  color: #07122f !important;
  font-size: clamp(17px, 1.55vw, 24px) !important;
  line-height: 1.24 !important;
  font-weight: 500 !important;
}

.passport-pro .passport-upload-card img {
  position: absolute !important;
  left: 16px !important;
  bottom: 16px !important;
  width: 62px !important;
  height: 62px !important;
  border-radius: 8px !important;
  background: #eef2ff !important;
  object-fit: cover !important;
}

.passport-pro .passport-remove-icon {
  position: absolute !important;
  right: 18px !important;
  bottom: 20px !important;
  z-index: 3 !important;
}

@media (max-width: 760px) {
  .passport-pro .passport-photo-tabs {
    grid-template-columns: 1fr !important;
  }

  .passport-pro .passport-upload-card {
    min-height: 138px !important;
  }
}

@media (max-width: 420px) {
  .passport-pro .passport-photo-tab h3 {
    font-size: 18px !important;
  }

  .passport-pro .passport-upload-card strong {
    font-size: 17px !important;
  }

  .passport-pro .passport-upload-card img {
    width: 54px !important;
    height: 54px !important;
  }
}

.passport-pro .passport-photo-tabs {
  gap: 14px !important;
}

.passport-pro .passport-photo-tab h3 {
  font-size: clamp(15px, 1.05vw, 17px) !important;
  line-height: 1.2 !important;
}

.passport-pro .passport-photo-tab h3 span {
  color: #334155 !important;
  font-size: .92em !important;
  font-weight: 500 !important;
}

.passport-pro .passport-upload-card {
  min-height: 128px !important;
  border-radius: 10px !important;
  padding: 16px 70px 50px !important;
}

.passport-pro .passport-upload-plus {
  margin-bottom: 8px !important;
  font-size: 30px !important;
  line-height: .8 !important;
}

.passport-pro .passport-upload-card strong {
  max-width: 190px !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.passport-pro .passport-photo-tab.has-photo .passport-upload-card {
  padding-top: 20px !important;
}

.passport-pro .passport-photo-tab.has-photo .passport-upload-card strong {
  font-size: 13px !important;
}

.passport-pro .passport-upload-card img {
  left: 14px !important;
  bottom: 14px !important;
  width: 52px !important;
  height: 52px !important;
}

.passport-pro .passport-remove-icon {
  right: 14px !important;
  bottom: 17px !important;
  width: 30px !important;
  height: 30px !important;
}

.passport-pro .passport-remove-icon::before {
  width: 22px !important;
  height: 22px !important;
}

@media (max-width: 1399px) and (min-width: 980px) {
  .passport-pro .passport-upload-card {
    padding-left: 62px !important;
    padding-right: 54px !important;
  }

  .passport-pro .passport-upload-card strong {
    max-width: 150px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 760px) {
  .passport-pro .passport-upload-card {
    min-height: 118px !important;
  }
}

.passport-pro .passport-photo-tabs {
  gap: 12px !important;
  margin: 4px 0 14px !important;
}

.passport-pro .passport-photo-tab {
  gap: 7px !important;
}

.passport-pro .passport-photo-tab h3 {
  font-size: clamp(13px, .9vw, 15px) !important;
  line-height: 1.22 !important;
}

.passport-pro .passport-photo-tab h3 span {
  font-size: .9em !important;
}

.passport-pro .passport-upload-card {
  min-height: 98px !important;
  border-radius: 8px !important;
  padding: 12px 54px 34px !important;
}

.passport-pro .passport-upload-plus {
  margin-bottom: 4px !important;
  font-size: 22px !important;
}

.passport-pro .passport-upload-card strong {
  max-width: 104px !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
}

.passport-pro .passport-upload-card img {
  left: 11px !important;
  bottom: 11px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 7px !important;
}

.passport-pro .passport-remove-icon {
  right: 10px !important;
  bottom: 10px !important;
  width: 24px !important;
  height: 24px !important;
}

.passport-pro .passport-remove-icon::before {
  width: 18px !important;
  height: 18px !important;
}

@media (max-width: 1399px) and (min-width: 980px) {
  .passport-pro .passport-upload-card {
    min-height: 96px !important;
    padding-left: 48px !important;
    padding-right: 42px !important;
  }

  .passport-pro .passport-upload-card strong {
    max-width: 92px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 760px) {
  .passport-pro .passport-upload-card {
    min-height: 94px !important;
  }
}

@media (max-width: 760px) {
  .pdfconvert-grid {
    grid-template-columns: 1fr;
  }

  .pdfconvert-options {
    position: static;
  }

  .pdfconvert-drop {
    min-height: 238px;
  }

  .image-sidebar-group {
    display: none;
  }
}