/* ===== UPLOAD ZONE ===== */
 .resizer__tool__wrapper {
     max-width: 680px;
     margin: 36px auto 0 auto;
     padding: 0 16px;
     display: block;
     transition: margin-bottom 0.4s ease;
 }

 .resizer__tool__wrapper.with-panel {
     margin-bottom: 16px;
 }

 /* Upload zone — full size (initial) */
 .upload__zone {
     border: 2px dashed var(--border);
     border-radius: var(--radius-lg);
     background: var(--header-bg);
     box-shadow: var(--box-shadow);
     padding: 52px 24px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 12px;
     cursor: pointer;
     transition: border-color 0.25s, background 0.25s, padding 0.4s ease, border-radius 0.4s ease, box-shadow 0.4s ease;
     overflow: hidden;
 }

 /* Upload zone — compact strip after first upload */
 .upload__zone.compact {
     padding: 10px 20px;
     border-style: dashed;
     border-radius: var(--radius-md);
     box-shadow: none;
     flex-direction: row;
     gap: 10px;
     justify-content: flex-start;
     cursor: default;
 }

 .upload__zone.compact .upload__icon,
 .upload__zone.compact h3,
 .upload__zone.compact p {
     display: none;
 }

 .upload__zone.compact .browse__btn {
     margin-top: 0;
     padding: 7px 16px;
     font-size: 12px;
 }

 .upload__zone.compact::before {
     content: var(--text);
     font-size: 12px;
     color: var(--gray-text);
     white-space: nowrap;
 }

 /* Panel — hidden initially, slides in */
 .resize_panel_container {
     display: none;
     opacity: 0;
     transform: translateY(18px);
     transition: opacity 0.45s ease, transform 0.45s ease;
     grid-template-columns: 1fr 270px;
     gap: 14px;
     align-items: start;
     margin-top: 15px;
 }

 .resize_panel_container.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .upload__zone.dragover {
     border-color: var(--primary-color);
     background: var(--hover-color);
 }

 .upload__zone .upload__icon {
     width: 62px;
     height: 62px;
     background: #ededfe;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     color: var(--primary-color);
 }

 .upload__zone h3 {
     font-size: 16px;
     color: var(--primary-text);
     font-weight: 600;
 }

 .upload__zone p {
     font-size: 12px;
     color: var(--gray-text);
 }

 .upload__zone .browse__btn {
     padding: 9px 24px;
     background: var(--primary-color);
     color: #fff;
     border-radius: var(--radius-md);
     font-size: 13px;
     font-weight: 500;
     border: none;
     cursor: pointer;
     margin-top: 4px;
     box-shadow: 0 6px 18px -4px rgba(99, 101, 241, 0.4);
     transition: opacity 0.2s, transform 0.15s;
 }

 .upload__zone .browse__btn:hover {
     opacity: 0.88;
     transform: translateY(-1px);
 }

 /* ===== UPLOADED IMAGES CARD ===== */
 .uploaded_images_container {
     padding: 18px 16px;
     background: var(--header-bg);
     box-shadow: var(--card-shadow);
     border: 0.5px solid var(--border);
     border-radius: var(--radius-lg);
     overflow: hidden;
     /* KEY FIX */
 }

 .panel__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 14px;
 }

 .panel__header h3 {
     font-size: 13px;
     font-weight: 600;
     color: var(--primary-text);
     text-transform: capitalize;
 }

 .img__count {
     font-size: 11px;
     color: var(--primary-color);
     background: #ededfe;
     padding: 2px 10px;
     border-radius: 20px;
     font-weight: 500;
 }

 /* ===== UPLOAD BAR ===== */
 .uploading_box {
     display: flex;
     align-items: center;
     gap: 10px;
     min-width: 0;
     /* KEY FIX */
     overflow: hidden;
     /* KEY FIX */
 }

 /* Add box */
 .uploading__area {
     flex-shrink: 0;
     width: 120px;
     border: 1px dashed #C7D2FE;
     border-radius: var(--radius-md, 10px);
     padding: 10px 8px;
     background: var(--menu-hover);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 7px;
     text-align: center;
 }

 .uploading__area span {
     font-size: 10px;
     color: var(--gray-text);
     line-height: 1.4;
 }

 .uploading__area button {
     background: #fff;
     border: 1px dashed #C7D2FE;
     color: #5B6CFF;
     background-color: transparent;
     font-size: 11px;
     padding: 5px 9px;
     border-radius: 6px;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 4px;
     font-family: inherit;
     white-space: nowrap;
     transition: background 0.15s;
 }

 .uploading__area button:hover {
     background: #e8ecff;
 }

 /* ===== SCROLLABLE IMAGE TRACK ===== */
 .uploading__images_container {
     display: flex;
     align-items: center;
     gap: 8px;
     flex: 1;
     min-width: 0;
     /* KEY FIX - flex child ko shrink hone deta hai */
     overflow-x: auto;
     /* scroll enable */
     overflow-y: hidden;
     padding-bottom: 6px;
     padding-top: 2px;

     /* Custom scrollbar */
     scrollbar-width: thin;
     scrollbar-color: rgba(99, 101, 241, 0.3) transparent;
 }

 .uploading__images_container::-webkit-scrollbar {
     height: 4px;
 }

 .uploading__images_container::-webkit-scrollbar-track {
     background: transparent;
 }

 .uploading__images_container::-webkit-scrollbar-thumb {
     background: rgba(99, 101, 241, 0.35);
     border-radius: 4px;
 }

 /* ===== IMAGE CARD ===== */
 .uploaded_img {
     flex: 0 0 95px;
     /* shrink/grow band, fixed 95px */
     width: 95px;
     height: 76px;
     border-radius: 8px;
     overflow: hidden;
     position: relative;
     border: 2px solid transparent;
     cursor: pointer;
     transition: border-color 0.2s, transform 0.15s;
 }

 .uploaded_img:hover {
     transform: translateY(-2px);
 }

 .uploaded_img.active {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(99, 101, 241, 0.2);
 }

 .uploaded_img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 6px;
 }

 /* Remove button */
 .uploaded_img .remove__btn {
     position: absolute;
     top: 4px;
     right: 4px;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.92);
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     color: #555;
     z-index: 2;
     transition: background 0.15s, color 0.15s;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
 }

 .uploaded_img .remove__btn:hover {
     background: #fff;
     color: #e24b4a;
 }

 /* Overlay with percentage */
 .uploaded_img .overlayer {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.22);
     display: flex;
     align-items: flex-end;
     justify-content: flex-start;
     padding: 4px 5px;
 }

 .uploaded_img .overlayer span {
     font-size: 10px;
     color: #fff;
     font-weight: 600;
     background: rgba(0, 0, 0, 0.45);
     padding: 1px 5px;
     border-radius: 4px;
     line-height: 1.5;
 }

 /* legacy resize btn removed - see .resize__action__btn */

 /* Quality slider (legacy - kept for compat) */
 .quality__slider__wrapper {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .quality__slider__wrapper input[type="range"] {
     flex: 1;
     accent-color: var(--primary-color);
     cursor: pointer;
 }

 .quality__slider__wrapper span {
     font-size: 12px;
     font-weight: 600;
     color: var(--primary-color);
     min-width: 34px;
     text-align: right;
 }

 /* Resize button */
 .resize__btn {
     width: 100%;
     padding: 11px;
     background: var(--primary-color);
     color: #fff;
     border: none;
     border-radius: var(--radius-md, 10px);
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     box-shadow: 0 6px 18px -4px rgba(99, 101, 241, 0.4);
     transition: opacity 0.2s, transform 0.15s;
     margin-top: 4px;
     font-family: inherit;
 }

 .resize__btn:hover {
     opacity: 0.88;
     transform: translateY(-1px);
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 700px) {

     .resize_panel_container,
     .resize_panel_container.visible {
         grid-template-columns: 1fr;
     }

     .uploading__area {
         width: 100px;
     }
 }

 /* ===== RESIZE SETTINGS PANEL (LEFT MAIN) ===== */
 .rsize__setting_panel {
     margin-top: 10px;
     padding: 18px 16px;
     /* background: var(--header-bg); */
     /* box-shadow: var(--card-shadow); */
     /* border: 0.5px solid var(--border); */
     /* border-radius: var(--radius-lg); */
 }

 .rsize__setting_panel>h3 {
     font-size: 14px;
     font-weight: 700;
     color: var(--primary-text);
 }

 .rsize__setting_panel>p {
     font-size: 11px;
     color: var(--gray-text);
     margin-top: 2px;
     margin-bottom: 16px;
 }

 /* Section divider */
 .settings__section {
     margin-bottom: 18px;
     padding-bottom: 18px;
     border-bottom: 1px solid var(--border);
 }

 .settings__section:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
 }

 .section__label {
     font-size: 11px;
     font-weight: 600;
     color: var(--gray-text);
     text-transform: uppercase;
     letter-spacing: 0.6px;
     margin-bottom: 10px;
 }

 /* Method Cards */
 .method__grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
 }

 @media (max-width: 560px) {
     .method__grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .card_box {
         flex-direction: row !important;
         text-align: left !important;
         align-items: center !important;
         gap: 10px !important;
         padding: 10px 12px !important;
     }

     .card_box .cb__icon {
         flex-shrink: 0;
     }

     .card_box>div:last-child,
     .card_box strong,
     .card_box span {
         display: block;
     }

     .card_box .text__block {
         display: flex;
         flex-direction: column;
         gap: 2px;
     }
 }

 .card_box {
     padding: 10px 8px;
     border: 1.5px solid var(--border);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     cursor: pointer;
     transition: 0.25s;
     border-radius: 10px;
     text-align: center;
     width: 100%;
 }

 .card_box:hover {
     border-color: var(--primary-color);
     background: var(--hover-color);
 }

 .card_box.active {
     border-color: var(--primary-color);
     background: #f0f0ff;
 }

 [data-theme="dark"] .card_box.active {
     background: #1a1a3a;
 }

 [data-theme="dark"] .card_box:hover {
     /* background: var(--menu-hover); */
     background: #1a1a3a;
 }

 .card_box .cb__icon {
     width: 32px;
     height: 32px;
     background: #ededfe;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     color: var(--primary-color);
 }

 .card_box.active .cb__icon {
     background: var(--primary-color);
     color: #fff;
 }

 .card_box strong,
 .card_box .text__block strong {
     font-size: 11px;
     font-weight: 600;
     color: var(--primary-text);
 }

 .card_box span,
 .card_box .text__block span {
     font-size: 9.5px;
     color: var(--gray-text);
     line-height: 1.3;
 }

 /* Inline row grid */
 .fields__row {
     display: grid;
     gap: 10px;
 }

 .fields__row.col2 {
     grid-template-columns: 1fr 1fr;
 }

 .fields__row.col3 {
     grid-template-columns: 1fr 1fr;
 }

 .fields__row.col4 {
     grid-template-columns: 1fr 1fr 1fr 1fr;
 }

 .field__group {
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .field__group label {
     font-size: 11px;
     font-weight: 500;
     color: var(--gray-text);
 }

 .field__group input[type="number"],
 .field__group select,
 .field__group input[type="text"] {
     width: 100%;
     padding: 8px 10px;
     border: 1px solid var(--border);
     border-radius: 8px;
     font-size: 12px;
     font-family: inherit;
     color: var(--primary-text);
     background: var(--input-bg);
     outline: none;
     transition: border-color 0.2s;
     box-sizing: border-box;
 }

 .field__group input:focus,
 .field__group select:focus {
     border-color: var(--primary-color);
 }

 /* Input with suffix */
 .input__suffix {
     position: relative;
 }

 .input__suffix input {
     padding-right: 32px;
 }

 .input__suffix .suffix {
     position: absolute;
     right: 9px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 10px;
     font-weight: 600;
     color: var(--gray-text);
 }

 /* Aspect ratio lock icon between W/H */
 .wh__group {
     display: grid;
     grid-template-columns: 1fr 26px 1fr;
     align-items: end;
     gap: 6px;
 }

 .link__icon {
     width: 26px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--gray-text);
     font-size: 14px;
     border: 1px solid var(--border);
     border-radius: 6px;
     background: var(--input-bg);
     transition: 0.2s;
     margin-bottom: 0;
 }

 .link__icon.locked {
     color: var(--primary-color);
     border-color: var(--primary-color);
     background: #f0f0ff;
 }

 [data-theme="dark"] .link__icon.locked {
     background: #1a1a3a;
 }

 /* Toggle buttons (Landscape/Portrait, Enlarge/Reduce) */
 .toggle__btn__group {
     display: flex;
     gap: 6px;
 }

 .toggle__btn {
     flex: 1;
     padding: 7px 10px;
     border: 1.5px solid var(--border);
     border-radius: 8px;
     background: var(--input-bg);
     font-size: 11px;
     font-weight: 500;
     font-family: inherit;
     cursor: pointer;
     color: var(--gray-text);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
     transition: 0.2s;
 }

 .toggle__btn:hover {
     border-color: var(--primary-color);
 }

 .toggle__btn.active {
     border-color: var(--primary-color);
     background: #f0f0ff;
     color: var(--primary-color);
     font-weight: 600;
 }

 [data-theme="dark"] .toggle__btn.active {
     background: #1a1a3a;
 }

 /* Quality slider row */
 .quality__row {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .quality__row input[type="range"] {
     flex: 1;
     accent-color: var(--primary-color);
     cursor: pointer;
     height: 4px;
 }

 .quality__val {
     font-size: 12px;
     font-weight: 700;
     color: var(--primary-color);
     min-width: 36px;
     text-align: right;
 }

 /* Checkbox row */
 .check__row {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 12px;
     color: var(--primary-text);
     cursor: pointer;
     user-select: none;
 }

 .check__row input[type="checkbox"] {
     accent-color: var(--primary-color);
     width: 14px;
     height: 14px;
     cursor: pointer;
 }

 .check__rows__grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
 }

 /* Color picker */
 .color__pick__group {
     display: flex;
     align-items: center;
     border: 1px solid var(--border);
     border-radius: 8px;
     overflow: hidden;
     background: var(--input-bg);
     height: 36px;
 }

 .color__pick__group input[type="color"] {
     width: 36px;
     height: 36px;
     border: none;
     outline: none;
     cursor: pointer;
     padding: 2px;
     background: none;
 }

 .color__pick__group input[type="text"] {
     flex: 1;
     border: none !important;
     background: transparent !important;
     padding: 0 8px;
     font-size: 12px;
     color: var(--primary-text);
     outline: none;
     height: 36px;
     box-sizing: border-box;
 }

 /* Toggle switch */
 .switch__row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 12px;
     color: var(--primary-text);
 }

 .toggle__switch {
     position: relative;
     width: 36px;
     height: 20px;
     cursor: pointer;
 }

 .toggle__switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .toggle__switch .slider {
     position: absolute;
     inset: 0;
     background: var(--border);
     border-radius: 20px;
     transition: 0.3s;
 }

 .toggle__switch .slider:before {
     content: '';
     position: absolute;
     width: 14px;
     height: 14px;
     background: #fff;
     border-radius: 50%;
     top: 3px;
     left: 3px;
     transition: 0.3s;
 }

 .toggle__switch input:checked+.slider {
     background: var(--primary-color);
 }

 .toggle__switch input:checked+.slider:before {
     transform: translateX(16px);
 }

 /* Resize action button */
 .resize__action__btn {
     width: 100%;
     padding: 12px;
     background: var(--primary-color);
     color: #fff;
     border: none;
     border-radius: var(--radius-md, 10px);
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     box-shadow: 0 6px 18px -4px rgba(99, 101, 241, 0.45);
     transition: opacity 0.2s, transform 0.15s;
     font-family: inherit;
     margin-top: 6px;
 }

 .resize__action__btn:hover {
     opacity: 0.88;
     transform: translateY(-1px);
 }

 .resize__action__btn .img__badge {
     background: rgba(255, 255, 255, 0.25);
     padding: 2px 7px;
     border-radius: 10px;
     font-size: 11px;
 }

 /* Advanced section collapsible */
 .adv__toggle {
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
     padding: 8px 0;
 }

 .adv__toggle h4 {
     font-size: 12px;
     font-weight: 600;
     color: var(--primary-text);
 }

 .adv__toggle .adv__arrow {
     font-size: 12px;
     color: var(--gray-text);
     transition: transform 0.3s;
 }

 .adv__toggle.open .adv__arrow {
     transform: rotate(180deg);
 }

 .adv__body {
     overflow: hidden;
     max-height: 0;
     transition: max-height 0.35s ease;
 }

 .adv__body.open {
     max-height: 600px;
 }

 /* ===== RIGHT SIDE PANEL ===== */
 .right__side__panel {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 /* Summary Card */
 .summary__card {
     padding: 16px;
     background: var(--header-bg);
     box-shadow: var(--card-shadow);
     border: 0.5px solid var(--border);
     border-radius: var(--radius-lg);
 }

 .summary__card h4 {
     font-size: 13px;
     font-weight: 700;
     color: var(--primary-text);
     margin-bottom: 12px;
 }

 .summary__row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 6px 0;
     border-bottom: 1px solid var(--divider);
     font-size: 11.5px;
 }

 .summary__row:last-child {
     border-bottom: none;
 }

 .summary__row .s__label {
     color: var(--gray-text);
 }

 .summary__row .s__val {
     font-weight: 600;
     color: var(--primary-text);
 }

 .summary__row .s__val.highlight {
     color: var(--primary-color);
 }

 .est__size {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-top: 12px;
     padding: 10px 12px;
     background: #f0f0ff;
     border-radius: 10px;
 }

 [data-theme="dark"] .est__size {
     background: #1a1a3a;
 }

 .est__size i {
     color: var(--primary-color);
     font-size: 16px;
 }

 .est__size span {
     font-size: 12px;
     font-weight: 600;
     color: var(--primary-color);
 }

 .est__size small {
     font-size: 10px;
     color: var(--gray-text);
     display: block;
 }

 /* Quick Presets Card */
 .presets__card {
     padding: 16px;
     background: var(--header-bg);
     box-shadow: var(--card-shadow);
     border: 0.5px solid var(--border);
     border-radius: var(--radius-lg);
 }

 .presets__card h4 {
     font-size: 13px;
     font-weight: 700;
     color: var(--primary-text);
     margin-bottom: 12px;
 }

 .preset__item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 8px 10px;
     border-radius: 8px;
     cursor: pointer;
     transition: background 0.2s;
     margin-bottom: 4px;
     border: 1px solid transparent;
 }

 .preset__item:hover {
    background: #f0f0ff;
    border-color: var(--primary-color);
 }

 .preset__item.active {
     background: #f0f0ff;
     border-color: var(--primary-color);
 }

 [data-theme="dark"] .preset__item.active {
     background: #1a1a3a;
 }

  [data-theme="dark"] .preset__item:hover {
    background: #1a1a3a;
 }

 .preset__name {
     font-size: 12px;
     font-weight: 500;
     color: var(--primary-text);
 }

 .preset__dims {
     font-size: 10.5px;
     color: var(--primary-color);
     font-weight: 600;
 }

 .preset__item:last-child {
     margin-bottom: 0;
 }

 /* ===== UPLOAD PROGRESS CARD ===== */
 .uploaded_img.uploading .img__progress__overlay {
     display: flex;
 }

 .uploaded_img.uploading img {
     filter: brightness(0.45);
 }

 .uploaded_img.uploading .remove__btn {
     display: none;
 }

 .img__progress__overlay {
     display: none;
     position: absolute;
     inset: 0;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 4px;
     background: rgba(0, 0, 0, 0.15);
     border-radius: 6px;
     z-index: 3;
 }

 .prog__ring {
     transform: rotate(-90deg);
     flex-shrink: 0;
 }

 .prog__ring__track {
     fill: none;
     stroke: rgba(255, 255, 255, 0.25);
     stroke-width: 3;
 }

 .prog__ring__fill {
     fill: none;
     stroke: #fff;
     stroke-width: 3;
     stroke-linecap: round;
     transition: stroke-dashoffset 0.2s ease;
 }

 .prog__pct {
     font-size: 10px;
     font-weight: 700;
     color: #fff;
     line-height: 1;
 }

 .abort__btn {
     position: absolute;
     top: 4px;
     right: 4px;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: rgba(210, 40, 40, 0.9);
     border: none;
     cursor: pointer;
     display: none;
     align-items: center;
     justify-content: center;
     font-size: 9px;
     color: #fff;
     z-index: 4;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
     transition: background 0.15s;
 }

 .abort__btn:hover {
     background: #b91c1c;
 }

 .uploaded_img.uploading .abort__btn {
     display: flex;
 }

 .images__empty {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     min-height: 76px;
     font-size: 11px;
     color: var(--gray-text);
     gap: 6px;
     flex-shrink: 0;
 }

 /* Reset btn */
 .reset__btn {
     width: 100%;
     padding: 8px;
     background: transparent;
     border: 1.5px solid var(--border);
     border-radius: 8px;
     font-size: 12px;
     font-weight: 500;
     font-family: inherit;
     color: var(--gray-text);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     transition: 0.2s;
     margin-top: 8px;
 }

 .reset__btn:hover {
     border-color: var(--primary-color);
     color: var(--primary-color);
 }

 #main__resize__btn:disabled {
     opacity: .5;
     cursor: not-allowed !important;
     pointer-events: none;
 }



 /* ── Loader Overlay ──────────────────────────────────── */
   /* ── Loader Overlay ── */
   #loaderOverlay {
       position: fixed;
       inset: 0;
       z-index: 9999;
       background: var(--body-background);
       display: none;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 28px;
       padding: 40px 24px;
       transition: opacity 0.5s ease;
       overflow: hidden;
   }

   #loaderOverlay.fade-out {
       opacity: 0;
       pointer-events: none;
   }

   .loader-bg-dots {
       position: absolute;
       inset: 0;
       pointer-events: none;
       overflow: hidden;
   }

   .loader-dot {
       position: absolute;
       border-radius: 50%;
       background: rgba(99, 102, 241, 0.07);
       animation: loaderFloat linear infinite;
   }

   @keyframes loaderFloat {
       0% {
           transform: translateY(0) translateX(0);
           opacity: 0;
       }

       15% {
           opacity: 1;
       }

       85% {
           opacity: 1;
       }

       100% {
           transform: translateY(-140px) translateX(25px);
           opacity: 0;
       }
   }

   .loader-icon-wrap {
       position: relative;
       width: 84px;
       height: 84px;
   }

   .loader-ring-outer {
       position: absolute;
       inset: 0;
       border-radius: 50%;
       border: 3px solid var(--border);
       border-top-color: var(--primary-color);
       animation: spinLoader 0.95s linear infinite;
   }

   .loader-ring-inner {
       position: absolute;
       inset: 10px;
       border-radius: 50%;
       border: 2px solid var(--border);
       border-bottom-color: #818cf8;
       animation: spinLoader 1.4s linear infinite reverse;
   }

   .loader-icon-center {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--primary-color);
       font-size: 28px;
   }

   @keyframes spinLoader {
       to {
           transform: rotate(360deg);
       }
   }

   .loader-title {
       font-size: 18px;
       font-weight: 600;
       color: var(--primary-text);
       text-align: center;
       margin: 0;
   }

   .loader-sub {
       font-size: 13px;
       color: var(--gray-text);
       text-align: center;
       margin: -45px 0 0;
       transition: all 0.3s ease;
       min-height: 20px;
   }

   .loader-steps {
       display: flex;
       flex-direction: column;
       gap: 10px;
       width: 100%;
       max-width: 340px;
   }

   .loader-step {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 10px 14px;
       border-radius: var(--radius-sm);
       background: var(--section-bg);
       border: 1px solid var(--border);
       font-size: 13px;
       color: var(--gray-text);
       transition: all 0.4s ease;
   }

   .loader-step.ls-active {
       border-color: #818cf8;
       color: var(--primary-text);
       background: var(--card-color);
       box-shadow: var(--card-shadow);
   }

   .loader-step.ls-done {
       color: var(--success);
       border-color: rgba(16, 185, 129, 0.35);
       background: var(--success-bg);
   }

   .ls-icon {
       width: 28px;
       height: 28px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 13px;
       flex-shrink: 0;
       background: var(--border);
       color: var(--gray-text);
       transition: all 0.4s ease;
   }

   .loader-step.ls-active .ls-icon {
       background: var(--primary-color);
       color: #fff;
       animation: lsPulse 1s ease-in-out infinite;
   }

   .loader-step.ls-done .ls-icon {
       background: var(--success);
       color: #fff;
       animation: none;
   }

   @keyframes lsPulse {

       0%,
       100% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.12);
       }
   }

   .ls-label {
       flex: 1;
       font-weight: 500;
   }

   .ls-spinner {
       width: 14px;
       height: 14px;
       border: 2px solid rgba(99, 102, 241, 0.2);
       border-top-color: var(--primary-color);
       border-radius: 50%;
       animation: spinLoader 0.7s linear infinite;
       display: none;
       flex-shrink: 0;
   }

   .loader-step.ls-active .ls-spinner {
       display: block;
   }

   .loader-progress-wrap {
       width: 100%;
       max-width: 340px;
   }

   .loader-progress-track {
       height: 5px;
       background: var(--border);
       border-radius: 10px;
       overflow: hidden;
   }

   .loader-progress-fill {
       height: 100%;
       background: linear-gradient(90deg, var(--primary-color), #818cf8);
       border-radius: 10px;
       width: 0%;
       transition: width 0.7s cubic-bezier(.4, 0, .2, 1);
   }

   .loader-progress-meta {
       display: flex;
       justify-content: space-between;
       margin-top: 7px;
       font-size: 11px;
       color: var(--gray-text);
   }



   .resize_how_to_section {
    margin: 70px 0 30px;
    padding: 44px;
    /* border: 1px solid var(--border); */
    /* border-radius: var(--radius-lg); */
    /* background:
        radial-gradient(circle at top left, rgba(99, 102, 241, 0.14), transparent 32%),
        linear-gradient(180deg, var(--header-bg), var(--section-bg)); */
    /* box-shadow: var(--card-shadow); */
    overflow: hidden;
    background-color: var(--section-bg);
}

.resize_how_to_header {
    max-width: 680px;
    margin-bottom: 28px;
}

.resize_section_badge {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #ededfe;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

[data-theme="dark"] .resize_section_badge {
    background: #1a1a3a;
}

.resize_how_to_header h2 {
    font-size: 32px;
    line-height: 1.15;
    color: var(--primary-text);
    text-transform: capitalize;
    margin-bottom: 10px;
}

.resize_how_to_header p {
    color: var(--gray-text);
    font-size: 14px;
    line-height: 1.7;
}

.resize_how_to_wrap {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 18px;
    align-items: stretch;
}

.resize_steps_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.resize_step_card {
    position: relative;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--header-bg);
    overflow: hidden;
    transition: 0.3s ease;
}

.resize_step_card::before {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 3px;
    border-radius: 20px 20px 0 0;
    background: var(--liearcolor);
    transform: scaleX(0);
    transform-origin: left;
    transition: 0.3s ease;
}

.resize_step_card:hover,
.resize_step_card.active {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 18px 35px -24px rgba(99, 102, 241, 0.9);
}

.resize_step_card:hover::before,
.resize_step_card.active::before {
    transform: scaleX(1);
}

.step_number {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 24px;
    font-weight: 800;
    color: rgba(99, 102, 241, 0.13);
}

.step_icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ededfe;
    color: var(--primary-color);
    font-size: 21px;
    margin-bottom: 18px;
}

[data-theme="dark"] .step_icon {
    background: #1a1a3a;
}

.resize_step_card h3 {
    color: var(--primary-text);
    font-size: 16px;
    margin-bottom: 8px;
}

.resize_step_card p {
    color: var(--gray-text);
    font-size: 12px;
    line-height: 1.7;
}

.resize_preview_card {
    padding: 22px;
    border-radius: var(--radius-lg);
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 20px 45px -22px rgba(99, 102, 241, 0.9);
    position: relative;
    overflow: hidden;
}

.resize_preview_card::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -55px;
    top: -55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.preview_top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 26px;
}

.preview_top span {
    font-size: 11px;
    opacity: 0.78;
}

.preview_top h3 {
    font-size: 18px;
    margin-top: 4px;
}

.preview_top i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.preview_compare {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 38px 1fr;
    gap: 8px;
    align-items: center;
}

.preview_box {
    min-height: 130px;
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

.preview_box.resized {
    background: rgba(255, 255, 255, 0.22);
}

.preview_box span {
    font-size: 11px;
    opacity: 0.82;
}

.preview_box strong {
    font-size: 14px;
    margin: 5px 0;
}

.preview_box small {
    font-size: 11px;
    opacity: 0.75;
}

.preview_arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--primary-color);
}

.resize_benefits {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.resize_benefits span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 11px;
}

@media (max-width: 900px) {
    .resize_how_to_section {
        padding: 30px;
    }

    .resize_how_to_wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .resize_how_to_section {
        padding: 22px;
        margin-top: 45px;
    }

    .resize_how_to_header h2 {
        font-size: 24px;
    }

    .resize_steps_grid {
        grid-template-columns: 1fr;
    }

    .preview_compare {
        grid-template-columns: 1fr;
    }

    .preview_arrow {
        transform: rotate(90deg);
        margin: 0 auto;
    }
}




/* Better Upload Area UI */
.premium_upload_zone {
    position: relative;
    min-height: 360px;
    padding: 42px 28px;
    border: 1.5px dashed rgba(99, 102, 241, 0.45);
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(99, 102, 241, 0.16), transparent 35%),
        radial-gradient(circle at bottom right, rgba(129, 140, 248, 0.16), transparent 38%),
        var(--header-bg);
    box-shadow: 0 24px 70px -35px rgba(99, 102, 241, 0.75);
    overflow: hidden;
    isolation: isolate;
    transition: 0.3s ease;
}

.premium_upload_zone::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 22px;
    border: 1px solid rgba(99, 102, 241, 0.08);
    pointer-events: none;
    z-index: -1;
}

.upload__bg__shine {
    position: absolute;
    width: 210px;
    height: 210px;
    top: -90px;
    right: -70px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.14);
    filter: blur(4px);
    pointer-events: none;
}

.premium_upload_zone .upload__icon {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: var(--primary-color);
    box-shadow: 0 18px 30px -18px rgba(99, 102, 241, 0.85);
    font-size: 34px;
    animation: uploadFloat 2.8s ease-in-out infinite;
}

@media screen and (max-width:500px) {
.premium_upload_zone .upload__icon {
    display: none;
}
}


[data-theme="dark"] .premium_upload_zone .upload__icon {
    background: #1a1a3a;
}

.upload__text {
    text-align: center;
}

.upload__badge {
    width: fit-content;
    margin: 0 auto 10px;
    padding: 7px 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    background: #ededfe;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
}

[data-theme="dark"] .upload__badge {
    background: #1a1a3a;
}

.premium_upload_zone h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 6px;
}

.premium_upload_zone p {
    max-width: 460px;
    color: var(--gray-text);
    font-size: 13px;
    line-height: 1.7;
}

.premium_upload_zone .browse__btn {
    height: 44px;
    padding: 0 24px;
    border-radius: 14px;
    background: var(--liearcolor);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 16px 28px -14px rgba(99, 102, 241, 0.95);
}

.upload__formats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.upload__formats span {
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--card-color);
    border: 1px solid var(--border);
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 700;
}

.upload__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.upload__trust span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--gray-text);
    font-size: 11px;
}

.premium_upload_zone:hover,
.premium_upload_zone.dragover {
    border-color: var(--primary-color);
    background:
        radial-gradient(circle at top left, rgba(99, 102, 241, 0.22), transparent 35%),
        radial-gradient(circle at bottom right, rgba(129, 140, 248, 0.22), transparent 38%),
        var(--header-bg);
    transform: translateY(-2px);
}

.premium_upload_zone.compact {
    min-height: auto;
    padding: 12px 18px;
    border-radius: 16px;
    flex-direction: row;
    justify-content: space-between;
    box-shadow: none;
}

.premium_upload_zone.compact::before,
.premium_upload_zone.compact .upload__bg__shine,
.premium_upload_zone.compact .upload__icon,
.premium_upload_zone.compact .upload__text,
.premium_upload_zone.compact .upload__formats,
.premium_upload_zone.compact .upload__trust {
    display: none;
}

.premium_upload_zone.compact::after {
    content: var(--text);
    color: var(--gray-text);
    font-size: 12px;
    margin-right: auto;
}

.premium_upload_zone.compact .browse__btn {
    height: 34px;
    padding: 0 15px;
    font-size: 11px;
    margin-left: auto;
}

@keyframes uploadFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

@media (max-width: 560px) {
    .premium_upload_zone {
        min-height: 320px;
        padding: 34px 18px;
        border-radius: 22px;
    }

    .premium_upload_zone h3 {
        font-size: 18px;
    }

    .premium_upload_zone p {
        font-size: 12px;
    }

    .upload__trust {
        gap: 7px;
    }
}


/* Image Resizer Features Section */
.resize_features_pro {
    /* margin: 75px 0 35px; */
    padding: 46px;
    /* background-color: var(--section-bg); */
    /* border-radius: 26px; */
    /* border: 1px solid var(--border); */
    /* background:
        radial-gradient(circle at 12% 0%, rgba(99, 102, 241, 0.18), transparent 34%),
        radial-gradient(circle at 92% 20%, rgba(129, 140, 248, 0.16), transparent 30%),
        linear-gradient(180deg, var(--header-bg), var(--section-bg)); */
    /* box-shadow: var(--card-shadow); */
    /* overflow: hidden; */
}

.rfp_header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.rfp_badge {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #ededfe;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

[data-theme="dark"] .rfp_badge {
    background: #1a1a3a;
}

.rfp_header h2 {
    max-width: 650px;
    font-size: 34px;
    line-height: 1.14;
    color: var(--primary-text);
    margin-bottom: 10px;
}

.rfp_header p {
    max-width: 670px;
    color: var(--gray-text);
    font-size: 14px;
    line-height: 1.7;
}

.rfp_header_card {
    min-width: 130px;
    padding: 18px;
    border-radius: 18px;
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 18px 35px -22px rgba(99, 102, 241, 1);
}

.rfp_header_card strong {
    display: block;
    font-size: 28px;
    line-height: 1;
}

.rfp_header_card span {
    font-size: 11px;
    opacity: 0.82;
}

.rfp_layout {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 18px;
}

.rfp_spotlight {
    position: relative;
    min-height: 100%;
    padding: 26px;
    border-radius: 22px;
    background: var(--primary-color);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 24px 45px -28px rgba(99, 102, 241, 1);
}

.rfp_spotlight::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -75px;
    top: -75px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.rfp_spotlight_icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 22px;
}

.rfp_spotlight > span {
    font-size: 12px;
    opacity: 0.78;
}

.rfp_spotlight h3 {
    position: relative;
    font-size: 24px;
    line-height: 1.25;
    margin: 8px 0 10px;
}

.rfp_spotlight p {
    position: relative;
    font-size: 13px;
    line-height: 1.75;
    opacity: 0.82;
}

.rfp_preview_box {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 38px 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
}

.rfp_preview_item {
    min-height: 118px;
    padding: 14px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.rfp_preview_item.active {
    background: rgba(255, 255, 255, 0.22);
}

.rfp_preview_item small,
.rfp_preview_item span {
    font-size: 11px;
    opacity: 0.75;
}

.rfp_preview_item strong {
    font-size: 13px;
    margin: 5px 0;
}

.rfp_preview_arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.rfp_card {
    position: relative;
    padding: 22px;
    border-radius: 18px;
    background: var(--header-bg);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: 0.3s ease;
}

.rfp_card::before {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 3px;
    border-radius: 20px 20px 0 0;
    background: var(--liearcolor);
    transform: scaleX(0);
    transform-origin: left;
    transition: 0.3s ease;
}

.rfp_card:hover,
.rfp_card.active {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 20px 38px -28px rgba(99, 102, 241, 0.95);
}

.rfp_card:hover::before,
.rfp_card.active::before {
    transform: scaleX(1);
}

.rfp_icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #ededfe;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
    transition: 0.3s ease;
}

[data-theme="dark"] .rfp_icon {
    background: #1a1a3a;
}

.rfp_card:hover .rfp_icon,
.rfp_card.active .rfp_icon {
    background: var(--primary-color);
    color: #fff;
    transform: rotate(-5deg) scale(1.06);
}

.rfp_card h3 {
    color: var(--primary-text);
    font-size: 15px;
    margin-bottom: 7px;
}

.rfp_card p {
    color: var(--gray-text);
    font-size: 12px;
    line-height: 1.65;
}

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

    .rfp_cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .resize_features_pro {
        padding: 24px;
        margin-top: 48px;
    }

    .rfp_header {
        align-items: flex-start;
        flex-direction: column;
    }

    .rfp_header h2 {
        font-size: 25px;
    }

    .rfp_header_card {
        width: 100%;
    }

    .rfp_cards {
        grid-template-columns: 1fr;
    }

    .rfp_preview_box {
        grid-template-columns: 1fr;
    }

    .rfp_preview_arrow {
        margin: 0 auto;
        transform: rotate(90deg);
    }
}



.resize_content_section {
    /* margin: 75px 0 35px; */
    padding: 46px;
    /* border-radius: 26px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.16), transparent 34%),
        linear-gradient(180deg, var(--header-bg), var(--section-bg));
        box-shadow: var(--card-shadow);
     */
     background-color: var(--section-bg);
}

.rcs_header {
    max-width: 700px;
    margin-bottom: 28px;
}

.rcs_badge {
    width: fit-content;
    padding: 7px 13px;
    border-radius: 999px;
    background: #ededfe;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

[data-theme="dark"] .rcs_badge {
    background: #1a1a3a;
}

.rcs_header h2 {
    font-size: 34px;
    line-height: 1.14;
    color: var(--primary-text);
    margin-bottom: 10px;
}

.rcs_header p {
    color: var(--gray-text);
    font-size: 14px;
    line-height: 1.7;
}

.rcs_layout {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 18px;
}

.rcs_main,
.rcs_side {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--header-bg);
    padding: 24px;
}

.rcs_tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
    border-radius: 16px;
    background: var(--card-color);
    margin-bottom: 20px;
}

.rcs_tab {
    border: 0;
    padding: 9px 15px;
    border-radius: 12px;
    background: transparent;
    color: var(--gray-text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s;
}

.rcs_tab.active,
.rcs_tab:hover {
    background: var(--primary-color);
    color: #fff;
}

.rcs_tab_body {
    display: none;
    animation: rcsFade 0.35s ease;
}

.rcs_tab_body.active {
    display: block;
}

.rcs_tab_body h3 {
    color: var(--primary-text);
    font-size: 21px;
    margin-bottom: 10px;
}

.rcs_tab_body p {
    color: var(--gray-text);
    font-size: 13px;
    line-height: 1.8;
}

.rcs_points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 18px 0 22px;
}

.rcs_points span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border-radius: 999px;
    background: #ededfe;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
}

[data-theme="dark"] .rcs_points span {
    background: #1a1a3a;
}

.rcs_table {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.rcs_table_row {
    display: grid;
    grid-template-columns: 1fr 1fr 0.8fr;
    gap: 10px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--border);
}

.rcs_table_row:last-child {
    border-bottom: 0;
}

.rcs_table_row span {
    color: var(--gray-text);
    font-size: 12px;
}

.rcs_table_row.head {
    background: var(--card-color);
}

.rcs_table_row.head span {
    color: var(--primary-text);
    font-weight: 700;
}

.rcs_side {
    position: relative;
    background: var(--primary-color);
    color: #fff;
    overflow: hidden;
}

.rcs_side::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    top: -80px;
    right: -80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.rcs_side_icon {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    margin-bottom: 22px;
}

.rcs_side h3 {
    position: relative;
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 10px;
}

.rcs_side p {
    position: relative;
    font-size: 13px;
    line-height: 1.8;
    opacity: 0.84;
}

.rcs_stats {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
}

.rcs_stats div {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.rcs_stats strong {
    display: block;
    font-size: 26px;
    line-height: 1;
}

.rcs_stats span {
    display: block;
    font-size: 11px;
    opacity: 0.78;
    margin-top: 6px;
}

@keyframes rcsFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .resize_content_section {
        padding: 30px;
    }

    .rcs_layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .resize_content_section {
        padding: 22px;
        margin-top: 48px;
    }

    .rcs_header h2 {
        font-size: 25px;
    }

    .rcs_table_row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .rcs_stats {
        grid-template-columns: 1fr;
    }
}



.resize_example_section {
    /* margin: 75px 0 35px; */
    padding: 46px;
    /* background-color: var(--section-bg); */
    /* border-radius: 26px; */
    /* border: 1px solid var(--border); */
    /* background:
        radial-gradient(circle at 15% 0%, rgba(99, 102, 241, 0.16), transparent 34%),
        radial-gradient(circle at 100% 35%, rgba(129, 140, 248, 0.13), transparent 32%),
        linear-gradient(180deg, var(--header-bg), var(--section-bg)); */
    /* box-shadow: var(--card-shadow); */
}

.resize_example_header {
    max-width: 720px;
    margin-bottom: 28px;
}

.resize_example_badge {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #ededfe;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

[data-theme="dark"] .resize_example_badge {
    background: #1a1a3a;
}

.resize_example_header h2 {
    font-size: 34px;
    line-height: 1.14;
    color: var(--primary-text);
    margin-bottom: 10px;
}

.resize_example_header p {
    color: var(--gray-text);
    font-size: 14px;
    line-height: 1.7;
}

.resize_example_layout {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 18px;
    align-items: stretch;
}

.resize_example_preview,
.resize_example_controls {
    padding: 24px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--header-bg);
}

.resize_example_preview {
    display: grid;
    grid-template-columns: 1fr 52px 1fr;
    gap: 12px;
    align-items: center;
}

.example_card {
    position: relative;
    min-height: 330px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background:
        linear-gradient(180deg, var(--card-color), var(--header-bg));
    overflow: hidden;
    transition: 0.3s ease;
}

.example_card::before {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 3px;
    border-radius: 20px 20px 0 0;
    background: var(--liearcolor);
    transform: scaleX(0);
    transform-origin: left;
    transition: 0.3s ease;
}

.example_card:hover,
.example_card.active {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 20px 38px -28px rgba(99, 102, 241, 0.95);
}

.example_card:hover::before,
.example_card.active::before {
    transform: scaleX(1);
}

.example_image_box {
    height: 150px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.7), transparent 24%),
        var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    margin-bottom: 18px;
}

.example_card.original .example_image_box {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55), transparent 24%),
        linear-gradient(135deg, #64748b, #334155);
}

.example_image_box i {
    font-size: 38px;
}

.example_image_box span {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.9;
}

.example_info span {
    display: block;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
}

.example_info h3 {
    color: var(--primary-text);
    font-size: 19px;
    margin-bottom: 8px;
}

.example_info p {
    color: var(--gray-text);
    font-size: 12px;
    line-height: 1.7;
}

.example_meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.example_meta span {
    padding: 7px 11px;
    border-radius: 999px;
    background: #ededfe;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
}

[data-theme="dark"] .example_meta span {
    background: #1a1a3a;
}

.example_arrow {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 28px -16px rgba(99, 102, 241, 0.9);
}

.resize_example_controls h3 {
    color: var(--primary-text);
    font-size: 18px;
    margin-bottom: 16px;
}

.example_preset_list {
    display: grid;
    gap: 10px;
}

.example_preset {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--card-color);
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    transition: 0.25s ease;
}

.example_preset i {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #ededfe;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

[data-theme="dark"] .example_preset i {
    background: #1a1a3a;
}

.example_preset span {
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 700;
}

.example_preset small {
    color: var(--gray-text);
    font-size: 11px;
    font-weight: 600;
}

.example_preset:hover,
.example_preset.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateX(4px);
}

.example_preset:hover i,
.example_preset.active i {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.example_preset:hover span,
.example_preset:hover small,
.example_preset.active span,
.example_preset.active small {
    color: #fff;
}

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

@media (max-width: 720px) {
    .resize_example_section {
        padding: 24px;
        margin-top: 48px;
    }

    .resize_example_header h2 {
        font-size: 25px;
    }

    .resize_example_preview {
        grid-template-columns: 1fr;
    }

    .example_arrow {
        margin: 0 auto;
        transform: rotate(90deg);
    }

    .example_card {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .example_preset {
        grid-template-columns: 42px 1fr;
    }

    .example_preset small {
        grid-column: 2;
    }
}


.resize_faq_section {
    /* margin: 75px 0 35px; */
    padding: 46px;
    /* border-radius: 26px; */
    /* border: 1px solid var(--border); */
    background:
        radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.16), transparent 34%),
        linear-gradient(180deg, var(--header-bg), var(--section-bg));
    /* box-shadow: var(--card-shadow); */
    /* background-color: var(--section-bg); */
}

.resize_faq_header {
    max-width: 700px;
    margin-bottom: 28px;
}

.resize_faq_badge {
    width: fit-content;
    padding: 7px 13px;
    border-radius: 999px;
    background: #ededfe;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

[data-theme="dark"] .resize_faq_badge {
    background: #1a1a3a;
}

.resize_faq_header h2 {
    font-size: 34px;
    line-height: 1.14;
    color: var(--primary-text);
    margin-bottom: 10px;
}

.resize_faq_header p {
    color: var(--gray-text);
    font-size: 14px;
    line-height: 1.7;
}

.resize_faq_layout {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 18px;
    align-items: start;
}

.resize_faq_left {
    display: grid;
    gap: 12px;
}

.resize_faq_item {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--header-bg);
    overflow: hidden;
    transition: 0.3s ease;
}

.resize_faq_item.active {
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 18px 36px -28px rgba(99, 102, 241, 0.95);
}

.resize_faq_question {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    cursor: pointer;
}

.resize_faq_question span {
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 700;
}

.resize_faq_question i {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #ededfe;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: 0.3s ease;
}

[data-theme="dark"] .resize_faq_question i {
    background: #1a1a3a;
}

.resize_faq_item.active .resize_faq_question i {
    background: var(--primary-color);
    color: #fff;
    transform: rotate(180deg);
}

.resize_faq_answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s ease;
}

.resize_faq_answer p {
    padding: 0 20px 18px;
    color: var(--gray-text);
    font-size: 13px;
    line-height: 1.8;
}

.resize_faq_card {
    position: sticky;
    top: 95px;
    padding: 26px;
    border-radius: 22px;
    background: var(--primary-color);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 24px 45px -28px rgba(99, 102, 241, 1);
}

.resize_faq_card::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -80px;
    top: -80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.resize_faq_card_icon {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    margin-bottom: 22px;
}

.resize_faq_card h3 {
    position: relative;
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 10px;
}

.resize_faq_card p {
    position: relative;
    font-size: 13px;
    line-height: 1.8;
    opacity: 0.84;
}

.resize_faq_tips {
    position: relative;
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.resize_faq_tips span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 900px) {
    .resize_faq_section {
        padding: 30px;
    }

    .resize_faq_layout {
        grid-template-columns: 1fr;
    }

    .resize_faq_card {
        position: relative;
        top: 0;
    }
}

@media (max-width: 560px) {
    .resize_faq_section {
        padding: 22px;
        margin-top: 48px;
    }

    .resize_faq_header h2 {
        font-size: 25px;
    }

    .resize_faq_question {
        padding: 15px;
    }

    .resize_faq_question span {
        font-size: 13px;
    }

    .resize_faq_answer p {
        padding: 0 15px 15px;
        font-size: 12px;
    }
}


.resize_related_tools {
    margin: 75px 0 35px;
    padding: 46px;
    border-radius: 26px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at 12% 0%, rgba(99, 102, 241, 0.16), transparent 34%),
        radial-gradient(circle at 100% 35%, rgba(129, 140, 248, 0.13), transparent 32%),
        linear-gradient(180deg, var(--header-bg), var(--section-bg));
    box-shadow: var(--card-shadow);
}

.rrt_header {
    max-width: 720px;
    margin-bottom: 28px;
}

.rrt_badge {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #ededfe;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

[data-theme="dark"] .rrt_badge {
    background: #1a1a3a;
}

.rrt_header h2 {
    font-size: 34px;
    line-height: 1.14;
    color: var(--primary-text);
    margin-bottom: 10px;
}

.rrt_header p {
    color: var(--gray-text);
    font-size: 14px;
    line-height: 1.7;
}

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

.rrt_card {
    position: relative;
    padding: 20px;
    min-height: 155px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--header-bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
    transition: 0.3s ease;
}

.rrt_card::before {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 3px;
    border-radius: 20px 20px 0 0;
    background: var(--liearcolor);
    transform: scaleX(0);
    transform-origin: left;
    transition: 0.3s ease;
}

.rrt_card:hover,
.rrt_card.active {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 20px 38px -28px rgba(99, 102, 241, 0.95);
}

.rrt_card:hover::before,
.rrt_card.active::before {
    transform: scaleX(1);
}

.rrt_icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #ededfe;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: 0.3s ease;
}

[data-theme="dark"] .rrt_icon {
    background: #1a1a3a;
}

.rrt_card:hover .rrt_icon,
.rrt_card.active .rrt_icon {
    background: var(--primary-color);
    color: #fff;
    transform: rotate(-5deg) scale(1.06);
}

.rrt_card h3 {
    color: var(--primary-text);
    font-size: 15px;
    margin-bottom: 7px;
}

.rrt_card p {
    color: var(--gray-text);
    font-size: 12px;
    line-height: 1.65;
}

.rrt_arrow {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--card-color);
    color: var(--gray-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

.rrt_card:hover .rrt_arrow,
.rrt_card.active .rrt_arrow {
    background: var(--primary-color);
    color: #fff;
    transform: translateX(3px);
}

@media (max-width: 900px) {
    .resize_related_tools {
        padding: 30px;
    }

    .rrt_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .resize_related_tools {
        padding: 22px;
        margin-top: 48px;
    }

    .rrt_header h2 {
        font-size: 25px;
    }

    .rrt_grid {
        grid-template-columns: 1fr;
    }
}




/* ===== RECENT RESIZE SIDE CARD ===== */

/* ===== RECENT RESIZE SIDE CARD ===== */

.recent_resize_side_card {
    padding: 16px;
    background: var(--header-bg);
    box-shadow: var(--card-shadow);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.recent_resize_side_card::after {
    content: "";
    position: absolute;
    right: -46px;
    top: -46px;
    width: 118px;
    height: 118px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.08);
    pointer-events: none;
}

.rrs_top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}

.rrs_icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 10px 24px -10px rgba(99, 102, 241, 0.9);
}

.rrs_badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 6px;
}

.rrs_top h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 3px;
}

.rrs_top p {
    font-size: 10.5px;
    color: var(--gray-text);
    line-height: 1.45;
}

.rrs_preview_box {
    position: relative;
    z-index: 1;
    padding: 12px;
    border-radius: 12px;
    background: var(--section-bg);
    border: 1px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.rrs_label {
    display: block;
    font-size: 10px;
    color: var(--gray-text);
    margin-bottom: 4px;
}

.rrs_preview_box strong {
    display: block;
    font-size: 13px;
    color: var(--primary-text);
    line-height: 1.25;
}

.rrs_format {
    flex-shrink: 0;
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    max-width: 100px;
    min-width: 0;
}

.rrs_chips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.rrs_chips span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 999px;
    background: var(--body-background);
    border: 1px solid var(--divider);
    color: var(--gray-text);
    font-size: 10px;
    font-weight: 700;
}

.rrs_chips span i {
    color: var(--primary-color);
    font-size: 12px;
}

.rrs_actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.rrs_btn {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    outline: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.2s, transform 0.15s, border-color 0.2s;
}

.rrs_btn:hover {
    transform: translateY(-1px);
}

.rrs_btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.rrs_btn.primary {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 6px 18px -4px rgba(99, 101, 241, 0.45);
}

.rrs_btn.light {
    background: var(--body-background);
    color: var(--primary-text);
    border-color: var(--border);
}

.rrs_clear_btn {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    margin-top: 8px;
    border-radius: 10px;
    border: 1px solid var(--red-border);
    background: var(--danger-bg);
    color: var(--danger);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.2s, transform 0.15s;
    /* max-width: 100px; */
    min-width: 0;
}

.rrs_clear_btn:hover {
    transform: translateY(-1px);
}

.recent_resize_side_card.has-recent .rrs_clear_btn {
    display: flex;
}

.rrs_toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(18px);
    z-index: 99999;
    max-width: calc(100% - 28px);
    padding: 12px 15px;
    border-radius: 14px;
    background: var(--header-bg);
    color: var(--primary-text);
    border: 1px solid var(--divider);
    box-shadow: var(--box-shadow);
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    text-align: center;
}

.rrs_toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

[data-theme="dark"] .recent_resize_side_card::after {
    background: rgba(129, 140, 248, 0.10);
}

@media (max-width: 700px) {
    .recent_resize_side_card {
        border-radius: var(--radius-md);
    }

    .rrs_actions {
        grid-template-columns: 1fr;
    }
}












/* =========================================================
   SIMPLE QUICK SIZE INFORMATION
   Unique prefix: sic-size-info
========================================================= */

.sic-size-info,
.sic-size-info * {
    box-sizing: border-box;
}

.sic-size-info {
    width: 100%;
    padding: 64px 16px;
    background: var(--section-bg);
    margin-top: 80px;
}

.sic-size-info__container {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}

/* Header */

.sic-size-info__header {
    max-width: 650px;
    margin-bottom: 26px;
}

.sic-size-info__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sic-size-info__label i {
    font-size: 15px;
}

.sic-size-info__header h2 {
    margin: 0;
    color: var(--primary-text);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.sic-size-info__header p {
    margin: 8px 0 0;
    color: var(--gray-text);
    font-size: 13px;
    line-height: 1.7;
}

/* Cards */

.sic-size-info__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sic-size-info__item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--header-bg);
    transition:
        border-color 0.2s ease,
        transform 0.2s ease;
}

.sic-size-info__item:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.42);
}

.sic-size-info__icon {
    display: flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    font-size: 18px;
}

.sic-size-info__item > div:last-child {
    min-width: 0;
}

.sic-size-info__item span {
    display: block;
    margin-bottom: 3px;
    color: var(--gray-text);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.sic-size-info__item strong {
    display: block;
    overflow: hidden;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Note */

.sic-size-info__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.06);
}

.sic-size-info__note i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--primary-color);
    font-size: 17px;
}

.sic-size-info__note p {
    margin: 0;
    color: var(--gray-text);
    font-size: 11px;
    line-height: 1.65;
}

/* Dark mode */

[data-theme="dark"] .sic-size-info__icon {
    background: rgba(99, 102, 241, 0.16);
}

[data-theme="dark"] .sic-size-info__note {
    background: rgba(99, 102, 241, 0.09);
}

/* Responsive */

@media (max-width: 800px) {
    .sic-size-info__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .sic-size-info {
        padding: 48px 14px;
    }

    .sic-size-info__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sic-size-info__item {
        padding: 14px;
    }

    .sic-size-info__header {
        margin-bottom: 20px;
    }
}










/* =========================================================
   HOW TO RESIZE + FIT / CROP / STRETCH
   Unique prefix: sic-resize-guide
========================================================= */

.sic-resize-guide,
.sic-resize-guide * {
    box-sizing: border-box;
}

.sic-resize-guide {
    width: 100%;
    padding: 68px 16px;
    background: var(--body-background);
}

.sic-resize-guide__container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

/* Header */

.sic-resize-guide__header {
    max-width: 720px;
    margin: 0 auto 30px;
    text-align: center;
}

.sic-resize-guide__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.sic-resize-guide__eyebrow i {
    font-size: 15px;
}

.sic-resize-guide__header h2 {
    margin: 0;
    color: var(--primary-text);
    font-size: clamp(25px, 4vw, 34px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.6px;
}

.sic-resize-guide__header h2 span {
    color: var(--primary-color);
}

.sic-resize-guide__header p {
    max-width: 620px;
    margin: 10px auto 0;
    color: var(--gray-text);
    font-size: 13px;
    line-height: 1.7;
}

/* Steps */

.sic-resize-guide__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 22px;
}

.sic-resize-guide__step {
    position: relative;
    display: flex;
    min-width: 0;
    gap: 11px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--header-bg);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.sic-resize-guide__step:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.4);
}

.sic-resize-guide__step-number {
    position: absolute;
    top: 9px;
    right: 11px;
    color: rgba(99, 102, 241, 0.19);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.sic-resize-guide__step-icon {
    display: flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    font-size: 16px;
}

.sic-resize-guide__step-content {
    min-width: 0;
    padding-top: 2px;
}

.sic-resize-guide__step-content h3 {
    padding-right: 20px;
    margin: 0;
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.sic-resize-guide__step-content p {
    margin: 6px 0 0;
    color: var(--gray-text);
    font-size: 10px;
    line-height: 1.6;
}

/* Methods grid */

.sic-resize-guide__methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.sic-resize-guide__method {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--header-bg);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sic-resize-guide__method:hover {
    transform: translateY(-3px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 14px 28px -22px rgba(99, 102, 241, 0.55);
}

.sic-resize-guide__method-top {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
}

.sic-resize-guide__method-icon {
    display: flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    font-size: 18px;
}

.sic-resize-guide__method-top span {
    display: block;
    margin-bottom: 2px;
    color: var(--gray-text);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.sic-resize-guide__method-top h3 {
    margin: 0;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 700;
}

/* Preview */

.sic-resize-guide__method-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin-bottom: 14px;
    border: 1px solid var(--divider);
    border-radius: 13px;
    background: var(--input-bg);
}

.sic-resize-guide__canvas {
    display: flex;
    width: 112px;
    height: 112px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed rgba(99, 102, 241, 0.42);
    border-radius: 12px;
    background:
        linear-gradient(
            45deg,
            rgba(99, 102, 241, 0.05) 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            rgba(99, 102, 241, 0.05) 25%,
            transparent 25%
        );
    background-size: 16px 16px;
}

/* Fit illustration */

.sic-resize-guide__fit-shape {
    display: flex;
    width: 88px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--liearcolor);
    color: #fff;
    font-size: 25px;
}

/* Crop illustration */

.sic-resize-guide__crop-shape {
    display: flex;
    width: 145px;
    height: 88px;
    align-items: center;
    justify-content: center;
    background: var(--liearcolor);
    color: #fff;
    font-size: 27px;
}

/* Stretch illustration */

.sic-resize-guide__stretch-shape {
    display: flex;
    width: 98px;
    height: 98px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--liearcolor);
    color: #fff;
    font-size: 28px;
}

/* Method text */

.sic-resize-guide__method > p {
    margin: 0 0 14px;
    color: var(--gray-text);
    font-size: 10.5px;
    line-height: 1.65;
}

.sic-resize-guide__method-use {
    display: block;
    margin-top: auto;
    padding: 9px 10px;
    border-radius: 9px;
    background: rgba(99, 102, 241, 0.07);
    color: var(--primary-text);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.5;
}

/* Tip */

.sic-resize-guide__tip {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 15px;
    padding: 14px 16px;
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 13px;
    background: rgba(99, 102, 241, 0.06);
}

.sic-resize-guide__tip-icon {
    display: flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-color);
    font-size: 17px;
}

.sic-resize-guide__tip strong {
    display: block;
    margin-bottom: 3px;
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 700;
}

.sic-resize-guide__tip p {
    margin: 0;
    color: var(--gray-text);
    font-size: 10.5px;
    line-height: 1.65;
}

.sic-resize-guide__tip b {
    color: var(--primary-text);
}

/* Dark mode */

[data-theme="dark"] .sic-resize-guide__step-icon,
[data-theme="dark"] .sic-resize-guide__method-icon {
    background: rgba(99, 102, 241, 0.16);
}

[data-theme="dark"] .sic-resize-guide__method-use,
[data-theme="dark"] .sic-resize-guide__tip {
    background: rgba(99, 102, 241, 0.09);
}

/* Responsive */

@media (max-width: 920px) {
    .sic-resize-guide__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .sic-resize-guide__methods {
        grid-template-columns: 1fr;
    }

    .sic-resize-guide__method {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        column-gap: 15px;
    }

    .sic-resize-guide__method-top {
        grid-column: 2;
        margin-bottom: 8px;
    }

    .sic-resize-guide__method-preview {
        grid-column: 1;
        grid-row: 1 / 4;
        height: 100%;
        min-height: 160px;
        margin: 0;
    }

    .sic-resize-guide__method > p,
    .sic-resize-guide__method-use {
        grid-column: 2;
    }
}

@media (max-width: 560px) {
    .sic-resize-guide {
        padding: 50px 14px;
    }

    .sic-resize-guide__header {
        margin-bottom: 23px;
        text-align: left;
    }

    .sic-resize-guide__header p {
        margin-right: 0;
        margin-left: 0;
    }

    .sic-resize-guide__steps {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .sic-resize-guide__method {
        display: flex;
    }

    .sic-resize-guide__method-preview {
        width: 100%;
        min-height: auto;
        height: 145px;
        margin-bottom: 13px;
    }

    .sic-resize-guide__tip {
        align-items: flex-start;
    }
}

@media (max-width: 400px) {
    .sic-resize-guide__header h2 {
        font-size: 24px;
    }

    .sic-resize-guide__step {
        padding: 13px;
    }

    .sic-resize-guide__method {
        padding: 15px;
    }
}










/* =========================================================
   SIZE CONVERSION AND DPI INFORMATION
   Unique prefix: sic-dpi-info
========================================================= */

.sic-dpi-info,
.sic-dpi-info * {
    box-sizing: border-box;
}

.sic-dpi-info {
    width: 100%;
    padding: 64px 16px;
    background: var(--section-bg);
}

.sic-dpi-info__container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

/* Header */

.sic-dpi-info__header {
    max-width: 720px;
    margin-bottom: 26px;
}

.sic-dpi-info__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.sic-dpi-info__eyebrow i {
    font-size: 15px;
}

.sic-dpi-info__header h2 {
    margin: 0;
    color: var(--primary-text);
    font-size: clamp(24px, 4vw, 33px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.55px;
}

.sic-dpi-info__header h2 span {
    color: var(--primary-color);
}

.sic-dpi-info__header p {
    max-width: 660px;
    margin: 9px 0 0;
    color: var(--gray-text);
    font-size: 13px;
    line-height: 1.7;
}

/* Summary */

.sic-dpi-info__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 14px;
}

.sic-dpi-info__summary-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--header-bg);
}

.sic-dpi-info__summary-icon {
    display: flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    font-size: 18px;
}

.sic-dpi-info__summary-item > div:last-child {
    min-width: 0;
}

.sic-dpi-info__summary-item span,
.sic-dpi-info__summary-item small {
    display: block;
    color: var(--gray-text);
}

.sic-dpi-info__summary-item span {
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.sic-dpi-info__summary-item strong {
    display: block;
    overflow: hidden;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sic-dpi-info__summary-item small {
    margin-top: 2px;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Table card */

.sic-dpi-info__table-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--header-bg);
}

.sic-dpi-info__table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 18px;
    border-bottom: 1px solid var(--divider);
}

.sic-dpi-info__table-heading h3 {
    margin: 0;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.sic-dpi-info__table-heading p {
    margin: 3px 0 0;
    color: var(--gray-text);
    font-size: 10px;
    line-height: 1.55;
}

.sic-dpi-info__table-badge {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.07);
    color: var(--primary-color);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

/* Table */

.sic-dpi-info__table-scroll {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

.sic-dpi-info__table-scroll::-webkit-scrollbar {
    height: 5px;
}

.sic-dpi-info__table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sic-dpi-info__table-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.3);
}

.sic-dpi-info__table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.sic-dpi-info__table th,
.sic-dpi-info__table td {
    padding: 13px 16px;
    text-align: left;
    vertical-align: middle;
}

.sic-dpi-info__table th {
    border-bottom: 1px solid var(--divider);
    background: var(--input-bg);
    color: var(--gray-text);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.sic-dpi-info__table td {
    border-bottom: 1px solid var(--divider);
    color: var(--gray-text);
    font-size: 10.5px;
    line-height: 1.5;
}

.sic-dpi-info__table tbody tr:last-child td {
    border-bottom: none;
}

.sic-dpi-info__table tbody tr {
    transition: background 0.18s ease;
}

.sic-dpi-info__table tbody tr:hover {
    background: rgba(99, 102, 241, 0.035);
}

.sic-dpi-info__table td strong {
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 650;
}

.sic-dpi-info__dpi {
    display: inline-block;
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 700;
}

.sic-dpi-info__recommended {
    display: inline-flex;
    margin-left: 6px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    font-size: 7.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.sic-dpi-info__usage {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--primary-text);
    font-size: 9px;
    font-weight: 600;
}

.sic-dpi-info__row--recommended {
    background: rgba(99, 102, 241, 0.045);
}

.sic-dpi-info__row--recommended td:first-child {
    box-shadow: inset 3px 0 0 var(--primary-color);
}

/* Bottom note */

.sic-dpi-info__note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 13px;
    background: rgba(99, 102, 241, 0.06);
}

.sic-dpi-info__note-icon {
    display: flex;
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-color);
    font-size: 17px;
}

.sic-dpi-info__note strong {
    display: block;
    margin-bottom: 3px;
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.sic-dpi-info__note p {
    margin: 0;
    color: var(--gray-text);
    font-size: 10.5px;
    line-height: 1.65;
}

/* Dark mode */

[data-theme="dark"] .sic-dpi-info__summary-icon,
[data-theme="dark"] .sic-dpi-info__note-icon {
    background: rgba(99, 102, 241, 0.16);
}

[data-theme="dark"] .sic-dpi-info__note {
    background: rgba(99, 102, 241, 0.09);
}

[data-theme="dark"] .sic-dpi-info__row--recommended {
    background: rgba(99, 102, 241, 0.08);
}

/* Responsive */

@media (max-width: 800px) {
    .sic-dpi-info__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sic-dpi-info__summary-item:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 540px) {
    .sic-dpi-info {
        padding: 48px 14px;
    }

    .sic-dpi-info__header {
        margin-bottom: 20px;
    }

    .sic-dpi-info__summary {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .sic-dpi-info__summary-item:last-child {
        grid-column: auto;
    }

    .sic-dpi-info__table-heading {
        align-items: flex-start;
        padding: 15px;
    }

    .sic-dpi-info__table-badge {
        display: none;
    }

    .sic-dpi-info__table th,
    .sic-dpi-info__table td {
        padding: 11px 13px;
    }
}









/* =========================================================
   COMMON USES + QUALITY TIP
   Unique prefix: sic-rz-usequality
========================================================= */

.sic-rz-usequality,
.sic-rz-usequality * {
    box-sizing: border-box;
}

.sic-rz-usequality {
    width: 100%;
    padding: 64px 16px;
    background: var(--body-background);
}

.sic-rz-usequality__container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

/* Header */

.sic-rz-usequality__header {
    max-width: 700px;
    margin-bottom: 25px;
}

.sic-rz-usequality__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.sic-rz-usequality__eyebrow i {
    font-size: 15px;
}

.sic-rz-usequality__header h2 {
    margin: 0;
    color: var(--primary-text);
    font-size: clamp(24px, 4vw, 33px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.55px;
}

.sic-rz-usequality__header h2 span {
    color: var(--primary-color);
}

.sic-rz-usequality__header p {
    max-width: 640px;
    margin: 9px 0 0;
    color: var(--gray-text);
    font-size: 13px;
    line-height: 1.7;
}

/* Uses grid */

.sic-rz-usequality__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.sic-rz-usequality__card {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 13px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--header-bg);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sic-rz-usequality__card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 14px 28px -23px rgba(99, 102, 241, 0.5);
}

.sic-rz-usequality__card-icon {
    display: flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    font-size: 18px;
}

.sic-rz-usequality__card-content {
    min-width: 0;
}

.sic-rz-usequality__card-content h3 {
    margin: 0;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.sic-rz-usequality__card-content p {
    margin: 6px 0 0;
    color: var(--gray-text);
    font-size: 10.5px;
    line-height: 1.65;
}

/* Quality tip */

.sic-rz-usequality__tip {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(210px, 0.55fr);
    gap: 14px;
    align-items: center;
    margin-top: 14px;
    padding: 17px 18px;
    border: 1px solid rgba(99, 102, 241, 0.17);
    border-radius: 15px;
    background:
        linear-gradient(
            90deg,
            rgba(99, 102, 241, 0.085),
            rgba(99, 102, 241, 0.02)
        ),
        var(--header-bg);
}

.sic-rz-usequality__tip-icon {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(99, 102, 241, 0.13);
    color: var(--primary-color);
    font-size: 20px;
}

.sic-rz-usequality__tip-content {
    min-width: 0;
}

.sic-rz-usequality__tip-content > span {
    display: block;
    margin-bottom: 3px;
    color: var(--primary-color);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sic-rz-usequality__tip-content h3 {
    margin: 0;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.sic-rz-usequality__tip-content p {
    margin: 5px 0 0;
    color: var(--gray-text);
    font-size: 10.5px;
    line-height: 1.65;
}

/* Quality points */

.sic-rz-usequality__tip-points {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-left: 16px;
    border-left: 1px solid var(--divider);
}

.sic-rz-usequality__tip-points div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--primary-text);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.45;
}

.sic-rz-usequality__tip-points i {
    flex: 0 0 auto;
    color: var(--primary-color);
    font-size: 14px;
}

/* Document notice */

.sic-rz-usequality__notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(234, 139, 34, 0.2);
    border-radius: 11px;
    background: rgba(234, 139, 34, 0.07);
}

.sic-rz-usequality__notice i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #d98220;
    font-size: 16px;
}

.sic-rz-usequality__notice p {
    margin: 0;
    color: var(--gray-text);
    font-size: 10px;
    line-height: 1.6;
}

/* Dark mode */

[data-theme="dark"] .sic-rz-usequality__card-icon {
    background: rgba(99, 102, 241, 0.16);
}

[data-theme="dark"] .sic-rz-usequality__tip {
    background:
        linear-gradient(
            90deg,
            rgba(99, 102, 241, 0.11),
            rgba(99, 102, 241, 0.035)
        ),
        var(--header-bg);
}

[data-theme="dark"] .sic-rz-usequality__notice {
    background: rgba(234, 139, 34, 0.1);
}

/* Responsive */

@media (max-width: 800px) {
    .sic-rz-usequality__tip {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .sic-rz-usequality__tip-points {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid var(--divider);
        border-left: none;
    }
}

@media (max-width: 600px) {
    .sic-rz-usequality {
        padding: 48px 14px;
    }

    .sic-rz-usequality__grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .sic-rz-usequality__card {
        padding: 15px;
    }

    .sic-rz-usequality__tip {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 15px;
    }

    .sic-rz-usequality__tip-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .sic-rz-usequality__tip-points {
        grid-template-columns: 1fr;
    }
}








/* =========================================================
   MANUAL RELATED IMAGE RESIZER SIZES
========================================================= */

.sic-related-presets,
.sic-related-presets * {
    box-sizing: border-box;
}

.sic-related-presets {
    width: 100%;
    padding: 58px 16px;
    background: var(--section-bg);
}

.sic-related-presets__container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

/* Header */

.sic-related-presets__header {
    max-width: 650px;
    margin-bottom: 22px;
}

.sic-related-presets__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.sic-related-presets__label i {
    font-size: 15px;
}

.sic-related-presets__header h2 {
    margin: 0;
    color: var(--primary-text);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.sic-related-presets__header h2 span {
    color: var(--primary-color);
}

.sic-related-presets__header p {
    margin: 8px 0 0;
    color: var(--gray-text);
    font-size: 13px;
    line-height: 1.7;
}

/* Grid */

.sic-related-presets__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

/* Card */

.sic-related-presets__card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--header-bg);
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sic-related-presets__card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.42);
    box-shadow: 0 14px 28px -23px rgba(99, 102, 241, 0.55);
}

/* Icon */

.sic-related-presets__icon {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    font-size: 18px;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.sic-related-presets__card:hover .sic-related-presets__icon {
    background: var(--primary-color);
    color: #fff;
}

/* Content */

.sic-related-presets__content {
    min-width: 0;
}

.sic-related-presets__content > span {
    display: inline-flex;
    margin-bottom: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary-color);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.sic-related-presets__content h3 {
    margin: 0;
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.sic-related-presets__content p {
    display: -webkit-box;
    overflow: hidden;
    margin: 5px 0 0;
    color: var(--gray-text);
    font-size: 9.5px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Arrow */

.sic-related-presets__arrow {
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--gray-text);
    font-size: 14px;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.sic-related-presets__card:hover .sic-related-presets__arrow {
    transform: translateX(2px);
    background: rgba(99, 102, 241, 0.09);
    color: var(--primary-color);
}

/* Dark mode */

[data-theme="dark"] .sic-related-presets__icon {
    background: rgba(99, 102, 241, 0.16);
}

[data-theme="dark"] .sic-related-presets__content > span {
    background: rgba(99, 102, 241, 0.14);
}

/* Responsive */

@media (max-width: 900px) {
    .sic-related-presets__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .sic-related-presets {
        padding: 46px 14px;
    }

    .sic-related-presets__header {
        margin-bottom: 19px;
    }

    .sic-related-presets__grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .sic-related-presets__card {
        padding: 14px;
    }
}










/* =========================================================
   JAVASCRIPT IMAGE RESIZER FAQ
   Unique prefix: sic-rz-faqjs
========================================================= */

.sic-rz-faqjs,
.sic-rz-faqjs * {
    box-sizing: border-box;
}

.sic-rz-faqjs {
    width: 100%;
    padding: 58px 16px;
    background: var(--body-background);
}

.sic-rz-faqjs__container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Header */

.sic-rz-faqjs__header {
    max-width: 680px;
    margin-bottom: 23px;
}

.sic-rz-faqjs__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.55px;
    line-height: 1.4;
    text-transform: uppercase;
}

.sic-rz-faqjs__label i {
    font-size: 15px;
}

.sic-rz-faqjs__header h2 {
    margin: 0;
    color: var(--primary-text);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.sic-rz-faqjs__header h2 span {
    color: var(--primary-color);
}

.sic-rz-faqjs__header p {
    margin: 8px 0 0;
    color: var(--gray-text);
    font-size: 13px;
    line-height: 1.7;
}

/* FAQ list */

.sic-rz-faqjs__list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* FAQ item */

.sic-rz-faqjs__item {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--header-bg);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.sic-rz-faqjs__item:hover {
    border-color: rgba(99, 102, 241, 0.24);
}

.sic-rz-faqjs__item--open {
    border-color: rgba(99, 102, 241, 0.38);
    box-shadow: 0 14px 32px -27px rgba(99, 102, 241, 0.7);
}

.sic-rz-faqjs__question-heading {
    margin: 0;
}

/* Question */

.sic-rz-faqjs__question {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 17px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--primary-text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

.sic-rz-faqjs__question:hover {
    background: rgba(99, 102, 241, 0.025);
}

.sic-rz-faqjs__question:focus-visible {
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

.sic-rz-faqjs__item--open .sic-rz-faqjs__question {
    background: rgba(99, 102, 241, 0.04);
    color: var(--primary-color);
}

.sic-rz-faqjs__question-text {
    display: block;
    flex: 1;
    min-width: 0;
}

/* Plus and minus toggle */

.sic-rz-faqjs__toggle {
    position: relative;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(99, 102, 241, 0.09);
    transform: rotate(0deg);
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.25s ease;
}

.sic-rz-faqjs__toggle::before,
.sic-rz-faqjs__toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: var(--primary-color);
    content: "";
    transform: translate(-50%, -50%);
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease;
}

.sic-rz-faqjs__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.sic-rz-faqjs__question[aria-expanded="true"]
.sic-rz-faqjs__toggle {
    background: rgba(99, 102, 241, 0.15);
    transform: rotate(180deg);
}

.sic-rz-faqjs__question[aria-expanded="true"]
.sic-rz-faqjs__toggle::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* Animated answer */

.sic-rz-faqjs__answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease,
        visibility 0s linear 0.4s;
    will-change: height, opacity;
}

.sic-rz-faqjs__item--open .sic-rz-faqjs__answer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        visibility 0s linear 0s;
}

.sic-rz-faqjs__answer-inner {
    padding: 0 17px 16px;
    opacity: 0;
    transform: translateY(-7px);
    transition:
        opacity 0.27s ease,
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sic-rz-faqjs__item--open
.sic-rz-faqjs__answer-inner {
    opacity: 1;
    transform: translateY(0);
}

.sic-rz-faqjs__answer p {
    max-width: 760px;
    margin: 0;
    padding-top: 13px;
    border-top: 1px solid var(--divider);
    color: var(--gray-text);
    font-size: 11px;
    line-height: 1.7;
}

/* Dark mode */

[data-theme="dark"] .sic-rz-faqjs__toggle {
    background: rgba(99, 102, 241, 0.16);
}

[data-theme="dark"]
.sic-rz-faqjs__question[aria-expanded="true"]
.sic-rz-faqjs__toggle {
    background: rgba(99, 102, 241, 0.23);
}

[data-theme="dark"] .sic-rz-faqjs__question:hover {
    background: rgba(99, 102, 241, 0.055);
}

[data-theme="dark"]
.sic-rz-faqjs__item--open
.sic-rz-faqjs__question {
    background: rgba(99, 102, 241, 0.075);
}

/* Mobile */

@media (max-width: 560px) {
    .sic-rz-faqjs {
        padding: 46px 14px;
    }

    .sic-rz-faqjs__header {
        margin-bottom: 19px;
    }

    .sic-rz-faqjs__question {
        min-height: 56px;
        padding: 14px;
        font-size: 11.5px;
    }

    .sic-rz-faqjs__answer-inner {
        padding: 0 14px 14px;
    }

    .sic-rz-faqjs__toggle {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .sic-rz-faqjs__item,
    .sic-rz-faqjs__question,
    .sic-rz-faqjs__toggle,
    .sic-rz-faqjs__toggle::before,
    .sic-rz-faqjs__toggle::after,
    .sic-rz-faqjs__answer,
    .sic-rz-faqjs__answer-inner {
        transition-duration: 0.01ms !important;
    }
}







.sic-rz-faqjs__answer {
    height: 0;
    overflow: hidden;
    transition: height 0.28s ease;
    will-change: height;
}

.sic-rz-faqjs__answer-inner {
    padding: 0 22px 20px;
}

.sic-rz-faqjs__answer-inner p {
    margin: 0;
}

.sic-rz-faqjs__toggle {
    position: relative;
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}

.sic-rz-faqjs__toggle::before,
.sic-rz-faqjs__toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 10px;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease;
}

.sic-rz-faqjs__toggle::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

.sic-rz-faqjs__item--open
.sic-rz-faqjs__toggle::after {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
    .sic-rz-faqjs__answer,
    .sic-rz-faqjs__toggle::after {
        transition: none;
    }
}




#add__images__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    max-width: 100px; /* apne UI ke according change kar sakte ho */
    min-width: 0;
}

#add__images__btn > i {
    flex-shrink: 0;
}

#add__images__btn .text-ellipsis {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}