.cropper-container {
     height: 400px !important;
     max-height: 450px !important;
     max-width: 100% !important;
     box-sizing: border-box;
     overflow: hidden !important;
 }

 /* Result-card tooltips render below their button, so point the arrow up */
 .js-append-result-card .tooltip::after {
     top: -11px;
     bottom: auto;
     border-color: transparent transparent #161618 transparent;
 }

 /* ==================================================================
           Image to Excel — Output / Output Edit.
           Every value below is transcribed from Figma
           (Output: node 7972-37362, Output Edit: node 7972-37551).
           Figma frames paint their 1px strokes INSIDE the frame box, so
           borders here are inset box-shadows: the rendered box then measures
           exactly the width/height Figma specifies.
           ================================================================== */

 /* ---- Buttons (Figma component "Buttons") ---- */
 .sheet-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 4px;
     background: #ffffff;
     color: #18181B;
     border: 0;
     border-radius: 8px;
     box-shadow: inset 0 0 0 1px #D1D5DB, 0 1px 0.5px rgba(0, 0, 0, 0.08);
     font-weight: 600;
     white-space: nowrap;
     cursor: pointer;
     transition: background 0.2s ease-in-out;
 }

 .sheet-btn:hover {
     background: #F9FAFB;
 }

 .sheet-btn:disabled {
     cursor: not-allowed;
 }

 .sheet-btn--lg {
     padding: 8px 16px;
     font-size: 16px;
     line-height: 24px;
 }

 .sheet-btn--sm {
     padding: 10px;
     font-size: 12px;
     line-height: 16px;
 }

 .sheet-btn--dark {
     background: #18181B;
     color: #ffffff;
     box-shadow: inset 0 0 0 1px #000000, 0 1px 0.5px rgba(0, 0, 0, 0.08);
 }

 .sheet-btn--dark:hover {
     background: #000000;
 }

 .sheet-btn .sheet-btn-icon {
     width: 16px;
     height: 16px;
     display: block;
     flex: none;
 }

 /* ---- Result head: Start again / Download all (Figma 800x64) ---- */
 .sheet-result-head {
     padding: 12px 16px;
     box-shadow: inset 0 -1px 0 #F1F1F1;
 }
 .result-div-head.sheet-result-head {
     z-index: 30;
 }

 .sheet-count-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 16px;
     height: 16px;
     padding: 0 3px;
     border-radius: 4px;
     background: #ffffff;
     color: #18181B;
     font-size: 12px;
     line-height: 16px;
     font-weight: 700;
 }

 /* ---- Result card (Figma "Upload File - Before Submit", 768x60) ---- */
 /* These elements are shown/hidden with Tailwind's .hidden by the tool JS,
           and this stylesheet is emitted after the utility layer. */
 .sheet-card-actions.hidden,
 .sheet-action-expand.hidden,
 .sheet-btn.hidden,
 .sheet-menu-wrap.hidden,
 .sheet.hidden {
     display: none !important;
 }

 .sheet-card {
     width: 100%;
 }

 /* Cards sit 8px apart; the first one only gets the 16px list padding. */
 .js-append-result-card>.result-card:first-child {
     margin-top: 0;
 }

 .sheet-card-head {
     position: sticky;
     top: 64px;
     z-index: 10;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 12px 16px;
     background: #ffffff;
     border-radius: 12px;
     box-shadow: inset 0 0 0 1px #D1D5DB;
 }
 .sheet-card-head:hover,
 .sheet-card-head:focus-within,
 .sheet-card-head:has(.tooltip:not(.hidden)) {
     z-index: 20;
 }

 .sheet-card.is-processing .sheet-card-head {
     background: #ffffff;
     min-height: 60px;
 }

 .sheet-card.is-open .sheet-card-head {
     background: #F4F4F5;
     border-radius: 12px 12px 0 0;
 }

 .sheet-card-file {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 0;
 }

 .sheet-thumb {
     width: 24px;
     height: 24px;
     flex: none;
     border-radius: 4px;
     object-fit: cover;
     filter: drop-shadow(0 0 0.25px rgba(0, 17, 58, 0.35));
     cursor: pointer;
 }

 .sheet-card-name {
     min-width: 0;
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     color: #18181B;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     cursor: pointer;
 }

 .sheet-card-actions {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     flex: none;
     align-items: center;
 }

 /* Error state: the tool JS flags the card with .border-red-500 */
 .js-single-img-preview.border-red-500 .sheet-card-head {
     box-shadow: inset 0 0 0 1px #EF4444;
 }

 /* ---- Edit toolbar (Figma 768x60, second row of the edit card) ---- */
 .sheet-toolbar {
     position: sticky;
     /* Keep the toolbar directly beneath the 60px sticky card header. */
     top: 124px;
     z-index: 9;
     display: none;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 12px 16px;
     background: #F4F4F5;
     box-shadow: inset 0 0 0 1px #D1D5DB;
 }
 .sheet-toolbar:has(.sheet-menu.is-open) {
     z-index: 25;
 }

 /* Shown and hidden by the Edit / Cancel toggle alone — not by edit mode,
    which a click on any cell enters on its own. */
 .sheet-card.is-toolbar-open .sheet-toolbar {
     display: flex;
 }

 .sheet-toolbar-group {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .sheet-toolbar-end {
     display: flex;
     align-items: center;
     gap: 10px;
 }
 .sheet-status {
     display: none;
     align-items: center;
     gap: 4px;
 }

 .sheet-status.is-on {
     display: flex;
 }

 .sheet-status-icon {
     width: 20px;
     height: 20px;
     flex: none;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .sheet-status-icon img {
     display: block;
 }
 .sheet-status.is-editing .sheet-status-icon img,
 .sheet-status.is-saved .sheet-status-icon img {
     width: 16px;
     height: 16px;
 }

 .sheet-status.is-saving .sheet-status-icon img {
     width: 20px;
     height: 20px;
     animation: sheet-spin 0.8s linear infinite;
 }

 @keyframes sheet-spin {
     to {
         transform: rotate(360deg);
     }
 }

 .sheet-status-text {
     font-size: 12px;
     line-height: 16px;
     font-weight: 400;
     color: #6B7280;
     white-space: nowrap;
 }

 /* ---- Dropdown menu (Figma "Aspect Ratio List", 177x108) ---- */
 .sheet-menu-wrap {
     position: relative;
 }

 /* The caret points down while closed and flips up while the menu is open. */
 .sheet-btn-caret {
     transition: transform 0.2s ease-in-out;
 }

 .sheet-menu-wrap.is-open .sheet-btn-caret {
     transform: rotate(180deg);
 }

 .sheet-menu {
     position: absolute;
     top: calc(100% + 6px);
     left: 0;
     z-index: 9;
     display: none;
     flex-direction: column;
     padding: 6px;
     background: #ffffff;
     border-radius: 10px;
     box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15);
 }

 .sheet-menu.is-open {
     display: flex;
 }

 .sheet-menu-item {
     display: flex;
     align-items: center;
     width: 100%;
     padding: 8px;
     border: 0;
     border-radius: 8px;
     background: none;
     font-size: 12px;
     line-height: 16px;
     font-weight: 500;
     color: #18181B;
     white-space: nowrap;
     text-align: left;
     cursor: pointer;
 }

 .sheet-menu-item:hover {
     background: #F3F4F6;
 }

 /* ---- Spreadsheet grid (Figma 768x320 = 28 head + 280 body + 12 bar) ---- */
 .sheet {
     display: none;
     flex-direction: column;
     height: 320px;
     background: #ffffff;
     border-radius: 0 0 12px 12px;
     box-shadow: inset 0 0 0 1px #E5E7EB;
     overflow: hidden;
 }

 /* .is-on means the table has been built; the card being open is what shows it,
    so a collapsed result is just its 60px head, as in Figma node 8007-1833. */
 .sheet-card.is-open .sheet.is-on {
     display: flex;
 }

 .sheet.is-expanded {
     height: auto;
 }

 .sheet-main {
     display: flex;
     flex: 1 1 auto;
     min-height: 0;
 }

 .sheet-viewport {
     flex: 1 1 auto;
     min-width: 0;
     overflow: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 .sheet-viewport::-webkit-scrollbar {
     display: none;
 }

 .sheet-table {
     border-collapse: separate;
     border-spacing: 0;
     width: max-content;
     min-width: 100%;
     background: #ffffff;
 }

 .sheet-table th,
 .sheet-table td {
     height: 28px;
     min-width: 104px;
     /* Figma block: 28px tall, 6px vertical padding, stroke inside the
               box. The 1px bottom border is taken out of the bottom padding so
               a row still measures exactly 28px. Figma has no horizontal
               padding; 4px is added so text never touches the cell border. */
     padding: 6px 4px 5px;
     font-size: 12px;
     line-height: 16px;
     font-weight: 400;
     color: #000000;
     text-align: center;
     vertical-align: middle;
     white-space: nowrap;
     background: #ffffff;
     border-right: 1px solid #E5E7EB;
     border-bottom: 1px solid #E5E7EB;
 }

 /* The source table's own header cells. 600 matches the column letters and row
    numbers, and mirrors the bold these cells already get in the .xlsx export. */
 .sheet-table th.sheet-cell {
     font-weight: 600;
 }

 .sheet-table td:focus,
 .sheet-table th:focus {
     outline: none;
 }

 .sheet-head th {
     position: sticky;
     top: 0;
     z-index: 3;
     font-weight: 600;
     color: #18181B;
     border-right: 1px solid #E5E7EB;
     border-bottom: 1px solid #E5E7EB;
 }

 .sheet-table .sheet-corner,
 .sheet-table .sheet-rownum {
     position: sticky;
     left: 0;
     min-width: 28px;
     width: 28px;
     padding: 6px 0 5px;
     font-weight: 600;
     color: #18181B;
     border-right: 1px solid #E5E7EB;
     border-bottom: 1px solid #E5E7EB;
 }

 .sheet-table .sheet-corner {
     z-index: 4;
 }

 .sheet-table .sheet-rownum {
     z-index: 2;
 }

 .sheet-table .sheet-head th:not(.sheet-corner),
 .sheet-table .sheet-rownum {
     cursor: pointer;
 }

 .sheet-table .sheet-cell.is-selected {
     background: #F4F4F5;
 }

 .sheet-table .sheet-chrome.is-selected {
     background: #E5E7EB;
 }

 .sheet-table td.is-active,
 .sheet-table th.sheet-cell.is-active,
 .sheet.is-editing .sheet-table td:focus,
 .sheet.is-editing .sheet-table th.sheet-cell:focus {
     background: #F4F4F5;
     box-shadow: inset 0 0 0 1px #18181B;
 }

 .sheet.is-editing .sheet-cell {
     cursor: text;
 }

 /* ---- Custom scrollbars (Figma "Verticle Scroll" / "Horizontal Scroll") ---- */
 .sheet-vbar {
     flex: none;
     width: 12px;
     display: none;
     flex-direction: column;
     background: #ffffff;
 }

 .sheet-vbar.is-on {
     display: flex;
 }

 .sheet-vbar-cap {
     flex: none;
     height: 28px;
     background: #ffffff;
     border-bottom: 1px solid #E5E7EB;
 }

 .sheet-vbar-track {
     position: relative;
     flex: 1 1 auto;
     min-height: 0;
 }

 .sheet-vbar-thumb {
     position: absolute;
     left: 2px;
     width: 8px;
     border-radius: 99px;
     background: #DADCE0;
     cursor: pointer;
     /* Claim the touch gesture, or the browser pans the page instead and
        cancels the drag mid-way. */
     touch-action: none;
 }

 .sheet-hbar {
     flex: none;
     height: 12px;
     display: none;
     background: #ffffff;
 }

 .sheet-hbar.is-on {
     display: flex;
 }

 .sheet-hbar-track {
     position: relative;
     flex: 1 1 auto;
     min-width: 0;
     cursor: pointer;
 }

 .sheet-hbar-thumb {
     position: absolute;
     top: 2px;
     height: 8px;
     border-radius: 99px;
     background: #DADCE0;
     cursor: pointer;
     touch-action: none;
 }

 /* The bar is 12px tall to match Figma, but an 8px thumb is well under the
    ~44px a finger needs, so the hit area is padded out without moving it. */
 @media (hover: none) and (pointer: coarse) {

     .sheet-hbar-thumb::after,
     .sheet-vbar-thumb::after {
         content: "";
         position: absolute;
         top: -10px;
         right: -10px;
         bottom: -10px;
         left: -10px;
     }
 }

 .sheet-arrow {
     flex: none;
     width: 12px;
     height: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     border: 1px solid #E5E7EB;
     background: #F3F2F2;
     box-sizing: border-box;
     cursor: pointer;
 }

 .sheet-arrow svg {
     display: block;
 }

 /* ---- Responsive (Figma tablet 768 / mobile 375) ---- */
 .sheet-text-short {
     display: inline;
 }

 .sheet-text-long {
     display: none;
 }

 @media (min-width: 768px) {
     .sheet-text-short {
         display: none;
     }

     .sheet-text-long {
         display: inline;
     }
 }

 /* Mobile (Figma 7972-39483): the card head and the edit toolbar are both
    icon-only — a 36x36 square per button, 6px apart, in a 12px/8px row. */
 @media (max-width: 767px) {

     /* Card action buttons — labels are desktop-only */
     .sheet-card-actions .sheet-btn-label,
     .sheet-label-desktop {
         display: none;
     }

     .sheet-card-head {
         padding: 12px 8px;
     }

     /* Tighter gap so icon-only buttons don't spread out */
     .sheet-card-actions {
         gap: 6px;
     }

     .sheet-toolbar {
         padding: 12px 8px;
     }

     .sheet-toolbar-group {
         gap: 6px;
     }

     /* Add Row / Add Column / Delete collapse to their glyph + caret. */
     .sheet-toolbar .sheet-menu-label {
         display: none;
     }
 }

 .sheet-save-mobile {
     display: none;
 }

 .js-after-submit .feedback_section_custom {
     border-top: 1px solid #E5E7EB;
     padding: 12px 16px;
 }

 .js-after-submit .feedback_section {
     padding: 24px;
 }