.pdf-suite-shell { max-width: 1240px; margin: 30px auto 76px; padding: 0 24px; display: grid; grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr); gap: 20px; align-items: start; }
.pdf-suite-panel { min-width: 0; padding: 27px; border: 1px solid #dfe3ef; border-radius: 25px; background: #fff; box-shadow: 0 18px 50px rgba(25,34,84,.065); }
.pdf-suite-panel.sticky { position: sticky; top: 24px; }
.pdf-suite-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.pdf-suite-heading > div > span { color: #5c49bd; font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.pdf-suite-heading h2 { margin: 7px 0 6px; font-size: 23px; letter-spacing: -.035em; }
.pdf-suite-heading p { margin: 0; color: #747e99; font-size: 10px; line-height: 1.55; }
.pdf-suite-reset { min-height: 39px; padding: 0 13px; border: 1px solid #efcbd3; border-radius: 10px; color: #b33b52; background: #fff8f9; cursor: pointer; font-size: 9px; font-weight: 900; }
.pdf-suite-drop { min-height: 290px; }
.pdf-suite-drop h3 { margin: 17px 0 7px; font-size: 22px; letter-spacing: -.035em; }
.pdf-suite-drop p { margin: 0 0 18px; color: #747e99; font-size: 10px; line-height: 1.55; }
.pdf-suite-files { margin-top: 16px; display: grid; gap: 9px; }
.pdf-suite-file { min-width: 0; padding: 11px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid #dfe3ee; border-radius: 14px; background: #fff; }
.pdf-suite-file > i { width: 46px; height: 52px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(145deg,#2a236f,#1988dd); font-size: 8px; font-style: normal; font-weight: 950; }
.pdf-suite-file > div { min-width: 0; }
.pdf-suite-file b,.pdf-suite-file span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-suite-file b { font-size: 10px; }
.pdf-suite-file span { margin-top: 5px; color: #747e99; font-size: 8px; }
.pdf-suite-file-actions { display: flex; gap: 5px; }
.pdf-suite-file-actions button { min-width: 35px; height: 35px; border: 1px solid #d9ddea; border-radius: 9px; color: #4f5a79; background: #fff; cursor: pointer; font-size: 9px; font-weight: 900; }
.pdf-suite-file-actions button.danger { color: #ac3850; border-color: #efd4d9; background: #fff9fa; }
.pdf-suite-settings { margin-top: 20px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.pdf-suite-field { min-width: 0; padding: 15px; border: 1px solid #e0e3ed; border-radius: 14px; background: #fafbfe; }
.pdf-suite-field.full { grid-column: 1 / -1; }
.pdf-suite-field > span { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #303a5c; font-size: 9px; font-weight: 900; }
.pdf-suite-field small { color: #7d86a0; font-size: 7px; font-weight: 800; }
.pdf-suite-field input[type="text"],.pdf-suite-field input[type="number"],.pdf-suite-field select { width: 100%; min-height: 45px; padding: 0 11px; border: 1px solid #d7dbe8; border-radius: 10px; outline: 0; color: #202a52; background: #fff; font-size: 10px; font-weight: 800; }
.pdf-suite-field input[type="range"] { width: 100%; accent-color: #6345c1; }
.pdf-suite-help { margin-top: 7px; display: block; color: #7a849d; font-size: 8px; line-height: 1.5; }
.pdf-suite-actions { margin-top: 15px; display: grid; gap: 10px; }
.pdf-suite-actions .process-button { margin: 0; }
.pdf-suite-status { min-height: 18px; margin: 11px 0 0; color: #69738e; font-size: 9px; line-height: 1.5; }
.pdf-suite-status.error { color: #b33c52; }
.pdf-suite-status.success { color: #117755; }
.pdf-suite-preview { min-height: 520px; display: flex; flex-direction: column; }
.pdf-suite-empty { flex: 1; min-height: 380px; display: grid; place-items: center; align-content: center; text-align: center; }
.pdf-suite-empty > i { width: 82px; height: 104px; display: grid; place-items: center; border: 1px solid #dfe3ee; border-radius: 12px; color: #6048b9; background: linear-gradient(145deg,#fff,#f2effc); font-size: 14px; font-style: normal; font-weight: 950; box-shadow: 8px 8px 0 #e6e9f2; }
.pdf-suite-empty h3 { margin: 25px 0 7px; font-size: 19px; }
.pdf-suite-empty p { max-width: 360px; margin: 0; color: #7a849e; font-size: 10px; line-height: 1.6; }
.pdf-suite-summary { margin-top: 18px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.pdf-suite-summary div { min-width: 0; padding: 12px; border: 1px solid #e0e4ed; border-radius: 12px; background: #fafbfe; }
.pdf-suite-summary span,.pdf-suite-summary b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-suite-summary span { color: #7c859d; font-size: 7px; }
.pdf-suite-summary b { margin-top: 6px; color: #293452; font-size: 9px; }
.pdf-suite-result { margin-top: 18px; padding: 18px; border: 1px solid #cbe6da; border-radius: 17px; background: linear-gradient(145deg,#fff,#f0fbf6); }
.pdf-suite-result[hidden] { display: none; }
.pdf-suite-result-top { display: flex; align-items: center; gap: 13px; }
.pdf-suite-result-icon { width: 48px; height: 55px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg,#107958,#18ae7f); font-size: 9px; font-weight: 950; }
.pdf-suite-result-top b,.pdf-suite-result-top span { display: block; }
.pdf-suite-result-top b { font-size: 13px; }
.pdf-suite-result-top span { margin-top: 5px; color: #65758b; font-size: 9px; }
.pdf-suite-downloads { margin-top: 14px; display: grid; gap: 8px; }
.pdf-suite-downloads a { min-height: 48px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 11px; color: #fff; background: #148765; font-size: 10px; font-weight: 900; }
.pdf-page-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.pdf-page-card { min-width: 0; padding: 8px; border: 1px solid #dfe3ed; border-radius: 12px; background: #fafbfe; }
.pdf-page-card canvas,.pdf-page-card img { width: 100%; height: 150px; display: block; object-fit: contain; border: 1px solid #e2e5ed; border-radius: 7px; background: #fff; }
.pdf-page-card b,.pdf-page-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-page-card b { margin-top: 8px; font-size: 9px; }
.pdf-page-card span { margin-top: 4px; color: #75809a; font-size: 7px; }
.pdf-page-card a { margin-top: 8px; min-height: 34px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #5c45b5; font-size: 8px; font-weight: 900; }
.pdf-suite-warning { margin-top: 14px; padding: 13px; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; border: 1px solid #efdcb8; border-radius: 13px; background: #fffaf0; }
.pdf-suite-warning > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #d69224; font-size: 11px; font-weight: 950; }
.pdf-suite-warning b { display: block; color: #684d1e; font-size: 9px; }
.pdf-suite-warning p { margin: 4px 0 0; color: #7b6541; font-size: 8px; line-height: 1.55; }
.page-range-pills { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.page-range-pills button { min-height: 34px; padding: 0 11px; border: 1px solid #d9ddea; border-radius: 9px; color: #53607e; background: #fff; cursor: pointer; font-size: 8px; font-weight: 900; }
.page-range-pills button.active { color: #fff; border-color: #6045bc; background: #6045bc; }
@media (max-width: 1020px) {
  .pdf-suite-shell { grid-template-columns: 1fr; }
  .pdf-suite-panel.sticky { position: static; }
}
@media (max-width: 720px) {
  .pdf-suite-shell { margin-top: 20px; padding: 0 12px; }
  .pdf-suite-panel { padding: 16px; border-radius: 21px; }
  .pdf-suite-heading { flex-direction: column; }
  .pdf-suite-reset { width: 100%; }
  .pdf-suite-settings { grid-template-columns: 1fr; }
  .pdf-suite-field.full { grid-column: auto; }
  .pdf-suite-file { grid-template-columns: 42px minmax(0,1fr); }
  .pdf-suite-file > i { width: 42px; height: 48px; }
  .pdf-suite-file-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .pdf-suite-summary { grid-template-columns: 1fr; }
  .pdf-page-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 430px) {
  .pdf-page-grid { grid-template-columns: 1fr; }
}

/* Add text to photo */
.text-photo-shell { max-width: 1300px; margin: 30px auto 76px; padding: 0 24px; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(330px,.7fr); gap: 20px; align-items: start; }
.text-photo-canvas-wrap { min-height: 570px; padding: 18px; display: grid; place-items: center; overflow: hidden; border: 1px solid #252c49; border-radius: 18px; background: #151b34; }
.text-photo-canvas-wrap canvas { max-width: 100%; max-height: 650px; border-radius: 6px; box-shadow: 0 17px 38px rgba(0,0,0,.25); touch-action: none; }
.text-photo-controls { display: grid; gap: 12px; }
.text-layer-list { display: grid; gap: 7px; }
.text-layer-item { padding: 10px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; border: 1px solid #dde1ec; border-radius: 11px; background: #fff; cursor: pointer; }
.text-layer-item.active { border-color: #6045bc; background: #f6f2ff; }
.text-layer-item b,.text-layer-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-layer-item b { font-size: 9px; }
.text-layer-item span { margin-top: 4px; color: #7a849d; font-size: 7px; }
.text-layer-item button { width: 32px; height: 32px; border: 1px solid #efd4d9; border-radius: 8px; color: #ad3a51; background: #fff9fa; cursor: pointer; }
.text-photo-toolbar { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.text-photo-toolbar button { min-height: 42px; padding: 0 7px; border: 1px solid #d9ddea; border-radius: 10px; color: #52607e; background: #fff; cursor: pointer; font-size: 8px; font-weight: 900; }
.text-photo-toolbar button.active { color: #fff; border-color: #5e44b7; background: #5e44b7; }
.text-photo-hint { margin: 11px 0 0; color: #7a849d; font-size: 8px; text-align: center; }
@media (max-width: 1040px) { .text-photo-shell { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .text-photo-shell { margin-top: 20px; padding: 0 12px; } .text-photo-canvas-wrap { min-height: 390px; } }