/* Global & Layout */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      height: 100%;
      min-height: 100vh;
      overflow: hidden;
      font-family: sans-serif;
      overscroll-behavior: none;
    }
    .hidden { display: none !important; }
    .container {
      display: grid;
      grid-template-columns: minmax(320px, 1fr) minmax(300px, 0.95fr) minmax(320px, 1fr);
      gap: 16px;
      height: 100%;
      padding: 16px;
      background: #f6f5f6;
      min-height: 0;           /* allow children to manage their own scroll */
      align-items: stretch;
    }

    /* Panel Base */
    .panel {
      background: #fff;
      border-radius: 25px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
    }
    .panel-header {
      padding: 12px 16px;
      font-size: 1.2rem;
      font-weight: bold;
      border-bottom: 1px solid #ddd;
    }
    .panel-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;           /* enable interior scrolling when space is tight */
      overflow: hidden;
    }

    /* Contained scrolling zones (no page scroll chaining) */
    .cards,
    .picked-cards,
    #detail-content,
    #detail-items-wrapper,
    #detail-notes-wrapper,
    .design-panel-body {
      overscroll-behavior: contain;
    }

    @media (max-width: 1400px) {
      .container {
        grid-template-columns: minmax(260px, 1fr) minmax(240px, 0.95fr) minmax(260px, 1fr);
        gap: 12px;
        padding: 12px;
      }
      .panel { border-radius: 22px; }
      .drag-area { margin: 12px; height: clamp(120px, 20vh, 180px); }
      .picked-cards { margin: 0 12px; padding: 12px 0; }
      .summary { width: calc(100% - 24px); margin: 0 auto 12px; }
      .fulfillment { gap: 12px; padding: 12px; }
    }

    
    @media (max-height: 850px) {
      .create-body {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 12px;
      }
      .drag-area {
        margin: 12px;
        height: clamp(100px, 20vh, 180px);
      }
      .picked-cards {
        margin: 0 12px;
        padding: 12px 0;
        min-height: 0;
      }
      .summary {
        width: calc(100% - 24px);
        margin: 0 auto 12px;
      }
    }

    /* Order Pipeline (Left) */
    /* AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA */
    /* Panel container */
    .pipeline {
      background: #fff;
      border-radius: 25px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Header */
    .pipeline .panel-header {
      padding: 12px 16px;
      font-size: 1.2rem;
      font-weight: bold;
      border-bottom: 1px solid #ddd;
      position: relative;
    }
    #pipeline-count {
      position: absolute;
      top: 12px;
      right: 16px;
    }

    /* Cards container: 3-col flex grid, percent gaps */
    .pipeline .cards {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between; /* 3 per row; center if fewer */
      align-content: flex-start;      /* rows start at top */
      gap: 1%;                        /* 2% gap instead of px */
      padding: 16px;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    /* Each card: 32% width -> three across, perfect square */
    .cards .pipeline-card {
      flex: 0 0 calc((100% - 2%) / 3);
      max-width: calc((100% - 2%) / 3);
      max-height: 30%;
      aspect-ratio: auto;
      min-height: 250px;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      overflow: hidden;
      padding: 0;
    }

    .pipeline-card {
      position: relative;
      overflow: hidden;
    }

    .pipeline-card::before {
      content: "";
      position: absolute;
      top: -50%; left: -50%;
      width: 200%; height: 200%;

      /* stronger white band at 50% */
      background:
        linear-gradient(
          60deg,
          rgba(255,255,255,0)   30%,
          rgba(255,255,255,0.13) 50%,
          rgba(255,255,255,0)   70%
        );

      transform: rotate(25deg) translateX(-100%);
      pointer-events: none;

      /* use CSS var for per-card delay */
      animation: shimmer 3s infinite;
      animation-delay: var(--shimmer-delay, 0s);
    }

    @keyframes shimmer {
      to { transform: rotate(25deg) translateX(100%); }
    }

    /* Header bar */
    .pipeline-card .card-header {
      background: linear-gradient(
        90deg,
        rgba(26,115,232,1) 0%,
        rgba(23,101,193,1) 100%
      );
      color: #fff;
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    .pipeline-card .time-ago-pill {
      background: rgba(255,255,255,0.25);
      padding: 2px 6px;
      border-radius: 12px;
      font-size: 0.75rem;
      margin: 0;
    }

    /* Body */
    .pipeline-card .card-body {
      padding: 10px 12px;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
      overflow: hidden;        /* no scrollbars */
    }
    .pipeline-card .cust-name {
      font-size: 1rem;
      font-weight: 700;
      margin: 4px 0 2px;
      line-height: 1.25;
      width: 100%;
    }

    /* Counts: no wrapping + 8px inner gap */
    .pipeline-card .counts {
      display: flex;
      justify-content: center;
      font-size: 0.9rem;
      margin: 0 5px 5px;
      column-gap: 12px;
      row-gap: 4px;
      white-space: nowrap; /* never break lines */
      width: 100%;
    }
    .pipeline-card .counts span {
      display: flex;
      align-items: center;
    }
    .pipeline-card .counts span:last-child {
      margin-left: 2px;
    }
    .pipeline-card .mockup-slot {
      width: 100%;
      max-width: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      overflow: hidden;
    }
    .pipeline-card .mockup-slot img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .pipeline-card .card-body.has-mockup {
      justify-content: flex-start;
    }
    .pipeline-card .card-body.no-mockup {
      justify-content: center;
      align-items: flex-start;
      text-align: left;
    }
    .pipeline-card .card-body.no-mockup .cust-name {
      text-align: left;
    }
    .pipeline-card .card-body.no-mockup .counts {
      justify-content: space-between;
    }

    /* Footer bar */
    .pipeline-card .card-footer {
      background: linear-gradient(
        90deg,
        rgba(23,101,193,1) 0%,
        rgba(26,115,232,1) 100%
      );
      color: #fff;
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      margin: 0;
    }

    /* HEADER BAR */
    .pipeline-card .card-header {
      background: #1a73e8;
      color: #fff;
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    .pipeline-card .time-ago-pill {
      background: rgba(255,255,255,0.25);
      padding: 2px 6px;
      border-radius: 12px;
      font-size: 0.75rem;
      margin: 0;               /* no extra margins */
    }

    .status-yellow { background: #fdd835 !important; color: #000 !important; }
    .status-green { background: #43a047 !important; }

    .bundle-card {
      background: #1a73e8 !important;
      color: #fff;
    }
    .bundle-card .card-header {
      background: transparent;
    }
    .bundle-card .card-body {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #fff;
    }

    .bundle-card .counts {
      font-size: 2.2rem;
      margin: 0;
      white-space: nowrap;
    }

    /* Ready To Print progress view */
    .print-card .card-body {
      position: relative;
    }
    .print-card .progress-view,
    .print-card .normal-view {
      position: absolute;
      inset: 0;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: opacity 0.3s;
    }
    .print-card .normal-view { opacity: 0; }
    .print-card:hover .progress-view { opacity: 0; }
    .print-card:hover .normal-view { opacity: 1; }
    .print-card .progress-pct {
      font-weight: bold;
      font-size: 1.4rem;        /* smaller to prevent overflow */
      text-align: center;
      margin-top: 4px;
    }

    .delete-btn {
      position: absolute;
      top: 4px;
      right: 4px;
      padding: 2px 6px;
      font-size: 1rem;
      line-height: 1;
      border: none;
      background: rgba(0,0,0,0.1);
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.2s;
      z-index: 5;
    }
    .delete-btn:hover {
      background: rgba(0,0,0,0.3);
    }

    /* BODY */
    .pipeline-card .card-body {
      padding: 10px 12px;       /* tighter padding for more room */
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      text-align: center;        /* center align the content */
      gap: 8px;
      overflow: hidden;        /* no scrollbars */
    }
    .pipeline-card .cust-name {
      font-size: 1rem;         /* slightly smaller */
      font-weight: 700;
      margin: 4px 0 2px 0;       /* small bottom gap */
      line-height: 1.25;
      width: 100%;
    }
    .pipeline-card .counts {
      display: flex;
      justify-content: center;
      font-size: 0.9rem;
      margin: 0 5px 5px;
      margin-top: auto;
      column-gap: 12px;
      row-gap: 4px;
      width: 100%;
    }
    .pipeline-card .counts span {
      display: flex;
      align-items: center;
    }
    .pipeline-card .counts .count-icon {
      width: 18px;
      height: 18px;
      margin-right: 4px;
      vertical-align: middle;
    }

    /* FOOTER BAR */
    .pipeline-card .card-footer {
      background: #1a73e8;
      color: #fff;
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      margin: 0;               /* flush to bottom */
    }

    /* Create Blanks Order (Middle) */
    .create {
      /* allow this panel to stretch with the grid */
      align-self: stretch;
      min-height: 0;
    }
    .create-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      height: 100%;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .drag-area {
      margin: 16px;
      background: #f0f0f0;
      border: 2px dashed #ccc;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 1rem;
      transition: background 0.2s;
      height: clamp(120px, 22vh, 200px);
    }
    .drag-area.over {
      background: #d0d0d0;
    }
    .picked-cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;  /* center each line horizontally */
      align-content: flex-start;
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;         /* scroll when overflow */

      margin: 0 16px;           /* keep your side padding */
      padding: 16px 0;          /* vertical padding, no extra horizontal */
      background: #fafafa;
      border-radius: 6px;
    }
    /* each card takes 30% of the container width */
    .picked-cards .card {
      flex: 0 0 30%;            /* always 30% width */
      margin: 0 1.666% 1.666%    /* top/right/bottom, left inherited by shorthand */;
      /* shorthand expanded: margin-top:0; margin-right:1.666%; margin-bottom:1.666%; margin-left:1.666% */

      aspect-ratio: 1 / 1;       /* stay perfect squares */
    }
    /* give picked cards the same look as pipeline cards */
    .picked-cards .pipeline-card {
      flex: 0 0 30%;
      max-width: 30%;
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      overflow: hidden;
      padding: 0;
      transform: scale(0.9);   /* shrink entire card */
      transform-origin: top left;
    }
    .picked-cards .pipeline-card .card-header {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      white-space: nowrap;   /* keep on one line */
      overflow: hidden;      /* allow shrinkTextToFit */
    }
    .picked-cards .pipeline-card .card-header .cust-name {
      width: 100%;
      text-align: center;
      margin: 0;
    }
    .picked-cards .pipeline-card .card-body {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .picked-cards .pipeline-card .counts {
      font-size: 1.5rem;
      margin: 0;
    }
    .summary {
      margin: 0 auto 16px;
      width: calc(100% - 32px);
      max-width: 520px;
      background: #fff;
      padding: 16px;
      border-radius: 6px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 0 0 auto;
      position: sticky;
      bottom: 0;
      z-index: 1;
    }
    .summary h3 { text-align: center; }
    .summary ul {
      display: none;
    }
    #cart-total { font-weight: bold; text-align: center !important; }
    #order-submit {
      margin-top: 8px;
      padding: 10px;
      font-size: 1rem;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #clear-picked {
      margin-top: 8px;
      width: 100%;
      padding: 8px;
      font-size: 1rem;
      background: #ccc;
      color: #000;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #clear-picked:disabled {
      opacity: 0.5;
      cursor: default;
    }

    /* Production & Fulfillment (Right) */
    .fulfillment {
      display: flex;
      gap: 16px;      
      padding: 16px;         
      box-sizing: border-box;
      min-height: 0;
    }
    .fulfillment .sub-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      overflow: hidden;
      min-height: 0;
    }
    .fulfillment .sub-section h3 {
      margin: 0;
      padding: 12px 16px;
      font-size: 1rem;
    }
    .fulfillment .sub-section .cards {
      flex: 1;                    /* fill available height */
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;  /* three per row; center if fewer */
      align-content: flex-start;       /* rows start at top */
      gap: 1%;                         /* percent-based gutter */
      padding: 16px;
      overflow-y: auto;                /* vertical scrolling when needed */
      background: transparent;
      min-height: 0;
    }
    .fulfillment .sub-section .cards .card {
      flex: 0 0 calc((100% - 2%) / 3);   /* 100% minus 2% total gutter, /3 */
      max-width: calc((100% - 2%) / 3);
      aspect-ratio: 1 / 1;               /* perfect square */
      display: flex;
      flex-direction: column;
    }

    /* Cards (all sections) */
    .card {
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      width: 100%;
      aspect-ratio: 1 / 1;
      padding: 8px;
      display: flex;
      flex-direction: column;
      cursor: grab;
      overflow: hidden;
      font-size: 0.85rem;
    }
    body.dragging-cursor,
    body.dragging-cursor * {
      cursor: grabbing !important;
    }
    .card.dragging {
      opacity: 0.5;
    }
    .card .order-number,
    .card .order-cust,
    .card .counts {
      white-space: normal;
      overflow: clip;
      word-break: break-word;
    }
    .card .order-number {
      font-weight: bold;
      margin-bottom: 4px;
    }
    .card .order-cust {
      margin-bottom: 4px;
    }
    .card .counts {
      margin-top: auto;
    }
    #picked-cards .delete-btn {
      display: none !important;
    }
    .pipeline.no-delete .delete-btn {
      display: none !important;
      pointer-events: none !important;
    }
    .bundle-selected { outline: 3px solid #1a73e8; }
    .bundle-btn,
    .bundle-confirm,
    .bundle-cancel {
      margin-left: 8px;
      background: #1a73e8;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 6px 12px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .bundle-btn:hover,
    .bundle-confirm:hover {
      background: #1765c1;
    }
    .bundle-cancel {
      background: #fff;
      color: #1a73e8;
      border: 1px solid #1a73e8;
    }
    .bundle-cancel:hover {
      background: #e8f0fe;
    }
    .bundle-btn.hidden,
    .bundle-confirm.hidden,
    .bundle-cancel.hidden {
      display: none;
    }

    #bundle-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      display: grid;
      place-items: center;
      transition: opacity 0.3s;
      z-index: 1400;
    }
    #bundle-overlay.hidden { opacity: 0; pointer-events: none; }
    #bundle-modal {
      background: #fff;
      border-radius: 8px;
      width: 33vw;
      height: 33vw;
      padding: 16px;
      display: flex;
      flex-direction: column;
    }
    #bundle-cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
      gap: 1%;
      flex: 1;
      overflow-y: auto;
    }
    #bundle-destroy {
      align-self: center;
      margin-top: 12px;
    }
    #bundle-cards .pipeline-card {
      flex: 0 0 calc((100% - 2%) / 3);
      max-width: calc((100% - 2%) / 3);
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      overflow: hidden;
      padding: 0;
    }

    #bundle-name-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      display: grid;
      place-items: center;
      transition: opacity 0.3s;
      z-index: 1450;
    }
    #bundle-name-overlay.hidden {
      opacity: 0;
      pointer-events: none;
    }
    #bundle-name-modal {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 300px;
    }
    #bundle-name-modal input {
      padding: 8px;
      font-size: 1rem;
    }
    #bundle-name-modal .buttons {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    /* Detail Screen --------------------------------------- */
    #detail-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      display: grid;
      place-items: center;
      transition: opacity 0.3s;
      z-index: 1500; /* above fullscreen overlay */
    }
    #detail-overlay.hidden { opacity: 0; pointer-events: none; }
    #detail-card {
      background: #fff;
      border-radius: 8px;
      width: 90vw;
      max-width: 1100px;
      transform: scale(0.8);
      transition: transform 0.3s;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      max-height: 90vh;
      position: relative;
    }
    #detail-content {
      display: flex;
      gap: 16px;
      padding: 16px;
      flex: 1;
      min-height: 0;
    }
    #detail-mockups-strip {
      flex: 0 0 18%;
      min-height: 110px;
      max-height: 180px;
      padding: 12px 16px;
      background: #f6f7fb;
      border-bottom: 1px solid #e6e8ef;
      display: flex;
      align-items: center;
      overflow: hidden;
      position: relative;
    }
    #detail-mockups-track {
      display: flex;
      align-items: center;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 6px;
      width: 100%;
      height: 100%;
      scrollbar-width: thin;
      justify-content: center;
    }
    #detail-mockups-track.center-align { justify-content: center; }
    #detail-mockups-track.left-align { justify-content: flex-start; }
    #detail-mockups-track::-webkit-scrollbar {
      height: 8px;
    }
    #detail-mockups-track::-webkit-scrollbar-thumb {
      background: #c8d2e6;
      border-radius: 999px;
    }
    .mockup-thumb {
      height: 100%;
      max-height: 100%;
      min-width: 110px;
      max-width: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: 1px solid #e0e6f0;
      border-radius: 10px;
      padding: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      cursor: pointer;
    }
    .mockup-thumb img {
      max-height: 100%;
      max-width: 100%;
      object-fit: contain;
      display: block;
    }
    .detail-assets-empty {
      font-size: 0.9rem;
      color: #666;
    }
    #detail-design-panel {
      width: 100%;
      flex: 0 0 auto;
      padding-left: 0;
      display: flex;
      flex-direction: column;
      background: #fafbff;
      min-height: 0;
    }
    .design-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0 10px;
    }
    .design-panel-body {
      flex: 1;
      overflow: visible;
      padding-right: 6px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overscroll-behavior: contain;
    }
    .design-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 0 0 auto;
      min-height: 0;
      width: 100%;
    }
    .design-group-title {
      font-weight: bold;
      color: #1f2d3d;
    }
    .design-tiles {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 6px;
      height: auto;
      align-items: center;
      scrollbar-width: thin;
    }
    .design-tiles::-webkit-scrollbar {
      height: 8px;
    }
    .design-tiles::-webkit-scrollbar-thumb {
      background: #c8d2e6;
      border-radius: 999px;
    }
    .design-tile {
      background: #fff;
      border: 1px solid #e3e7ef;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      min-width: 150px;
      max-width: 190px;
      height: auto;
      flex: 0 0 auto;
    }
    .design-thumb {
      width: 100%;
      flex: 0 0 auto;
      background: #f6f7fb;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid #e0e6f0;
      cursor: pointer;
      min-height: 110px;
      max-height: 140px;
    }
    .design-thumb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .design-label {
      font-size: 0.85rem;
      color: #2f3a4a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
    .design-actions {
      display: flex;
      gap: 6px;
    }
    .detail-asset-download {
      padding: 6px 8px;
      border-radius: 6px;
      border: 1px solid #1a73e8;
      background: #1a73e8;
      color: #fff;
      font-size: 0.8rem;
      cursor: pointer;
      flex: 1;
      text-align: center;
    }
    .detail-asset-download:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    .detail-asset-status {
      font-size: 0.8rem;
      color: #a00;
    }
    .detail-asset-status.hidden {
      display: none;
    }

    /* Asset viewer */
    #asset-viewer {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      display: grid;
      place-items: center;
      z-index: 1700;
      transition: opacity 0.2s;
    }
    #asset-viewer.hidden {
      opacity: 0;
      pointer-events: none;
    }
    #asset-viewer .viewer-content {
      position: relative;
      max-width: 90vw;
      max-height: 90vh;
      background: #000;
      border-radius: 8px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.35);
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #asset-viewer img {
      max-width: 88vw;
      max-height: 88vh;
      object-fit: contain;
      display: block;
    }
    #asset-viewer-close {
      position: absolute;
      top: 6px;
      right: 6px;
      background: rgba(0,0,0,0.6);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      cursor: pointer;
      font-size: 1.1rem;
      line-height: 1;
    }
    #detail-content {
      display: flex;
      flex-direction: column;
      gap: 16px;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    #detail-main-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-height: 0;
      min-width: 0;
    }
    #detail-main-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }
    #detail-design-panel {
      width: 100%;
      max-width: none;
      background: #f7f9fc;
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      overflow: hidden;
    }
    #detail-name-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5% 5% 0;
      margin-bottom: 12px;
    }
    #detail-cust-name { flex: 1; }
    #detail-edit-name-btn { margin: 0; }
    #detail-edit-notes-btn {
      margin: 0;
    }
    #detail-view-notes-btn {
      margin: 0;
    }
    .detail-notes-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin: 0 5% 8px;
    }
    #detail-notes-wrapper {
      border: 1px solid #ccc;
      border-radius: 6px;
      margin: 0 5% 16px;
      padding: 8px 12px;
      overflow-y: auto;
    }
    #detail-notes {
      padding: 0;
    }
    #progress-section {
      margin: 0 5% 16px;
    }
    #progress-text { margin-bottom: 4px; }
    #progress-row { display: flex; align-items: center; gap: 8px; }
    #progress-bar-container {
      background: #eee;
      border-radius: 4px;
      flex: 1;
      height: 20px;
      overflow: hidden;
    }
    #progress-bar {
      background: #1a73e8;
      height: 100%;
      width: 0;
      transition: width 0.3s;
    }
    #detail-overlay.visible #detail-card {
      transform: scale(1);
    }
    #detail-close {
      position: absolute;
      top: 8px; right: 8px;
      font-size: 1.2rem;
      background: none; border: none;
      cursor: pointer;
    }
    #detail-header {
      background: linear-gradient(90deg, #1a73e8, #1565c0);
      color: #fff;
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    #detail-items-wrapper {
      flex: 1;
      overflow-y: auto;
      margin: 16px 0;
    }
    #detail-items {
      width: 100%;
      border-collapse: collapse;
    }
    #detail-items th,
    #detail-items td {
      border-bottom: 1px solid #eee;
      padding: 8px;
      text-align: left;
    }
    #detail-summary {
      width: 100%;
      border-collapse: collapse;
      margin: 0 0 8px;
    }
    #detail-summary td {
      border-bottom: 1px solid #eee;
      padding: 8px;
      text-align: left;
    }
    #detail-summary tr:nth-last-child(-n+2) td {
      font-weight: bold;
    }
    #ready-controls {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 12px;
      flex-wrap: wrap;
    }
    #ready-apply.hidden {
      display: none;
    }

    /* Files Modal ----------------------- */
    #files-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      display: grid;
      place-items: center;
      transition: opacity 0.3s;
      z-index: 1600;
    }
    #files-overlay.hidden { opacity: 0; pointer-events: none; }
    #files-modal {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      width: 400px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #file-drop {
      border: 2px dashed #999;
      border-radius: 6px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
    }
    #file-drop.over { background: #eee; }
    #file-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      overflow-y: auto;
    }
    #file-actions { text-align: right; }
    #file-actions button {
      background: #1a73e8;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 6px 12px;
      cursor: pointer;
      transition: background 0.2s;
    }
    #file-actions button:hover { background: #1765c1; }
    #files-remove-btn.hidden,
    #files-delete-btn.hidden,
    #files-cancel-btn.hidden { display: none; }
    .file-selected { outline: 3px solid #1a73e8; border-radius: 6px; }
    .file-item {
      width: 80px;
      text-align: center;
      cursor: pointer;
      font-size: 0.75rem;
    }
    .file-item img,
    .file-item .svg-placeholder {
      width: 100%;
      height: 80px;
      object-fit: cover;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .file-item .svg-placeholder { background: #ccc; }

    /* Notes Modal ----------------------- */
    #notes-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      display: grid;
      place-items: center;
      transition: opacity 0.3s;
      z-index: 1550;
    }
    #notes-overlay.hidden { opacity: 0; pointer-events: none; }
    #notes-modal {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      width: 400px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #notes-modal textarea {
      width: 100%;
      height: 200px;
      padding: 8px;
      font-size: 1rem;
    }
    #notes-modal .buttons {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    /* Name Modal ----------------------- */
    #name-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      display: grid;
      place-items: center;
      transition: opacity 0.3s;
      z-index: 1550;
    }
    #name-overlay.hidden { opacity: 0; pointer-events: none; }
    #name-modal {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      width: 300px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #name-modal input { width: 100%; padding: 8px; font-size: 1rem; }
    #name-modal .buttons {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    /* Progress Modal ----------------------- */
    #progress-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      display: grid;
      place-items: center;
      transition: opacity 0.3s;
      z-index: 1550;
    }
    #progress-overlay.hidden { opacity: 0; pointer-events: none; }
    #progress-modal {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      width: 300px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #progress-modal input { width: 100%; padding: 8px; font-size: 1rem; }
    #progress-modal .buttons {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    #view-notes-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      display: grid;
      place-items: center;
      transition: opacity 0.3s;
      z-index: 1555;
    }
    #view-notes-overlay.hidden { opacity: 0; pointer-events: none; }
    #view-notes-modal {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      width: 50vw;
      max-width: 50vw;
      max-height: 80vh;
      overflow-y: auto;
    }
    #view-notes-modal p { white-space: pre-wrap; }
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid #eee;
    }
    #blanks-section.fullscreen .section-header,
    #print-section.fullscreen .section-header {
      justify-content: center;
    }
    #blanks-section.fullscreen .section-header h3,
    #print-section.fullscreen .section-header h3 {
      font-size: 2rem;
    }
    #blanks-section.fullscreen .section-header button,
    #print-section.fullscreen .section-header button {
      display: none;
    }
    .fullscreen-btn {
      background: #1a73e8;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 0.85rem;
      transition: background 0.2s;
    }
    .fullscreen-btn:hover {
      background: #1765c1;
    }
    #blanks-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      transition: opacity 0.3s;
      z-index: 1000;
    }
    #blanks-overlay.hidden {
      opacity: 0;
      pointer-events: none;
    }
    #blanks-section.fullscreen {
      position: fixed;
      inset: 10vh 10vw; /* avoid transform blurriness */
      background: #fff;
      z-index: 1001;
      display: flex;
      flex-direction: column;
    }
    #blanks-section.fullscreen .cards {
      flex: 1;
    }
    #blanks-section.fullscreen .cards .card {
      flex: 0 0 calc((100% - 4%) / 5);
      max-width: calc((100% - 4%) / 5);
    }

    #print-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      transition: opacity 0.3s;
      z-index: 1000;
    }
    #print-overlay.hidden {
      opacity: 0;
      pointer-events: none;
    }
    #print-section.fullscreen {
      position: fixed;
      inset: 10vh 10vw;
      background: #fff;
      z-index: 1001;
      display: flex;
      flex-direction: column;
    }
    #print-section.fullscreen .cards {
      flex: 1;
    }
    #print-section.fullscreen .cards .card {
      flex: 0 0 calc((100% - 4%) / 5);
      max-width: calc((100% - 4%) / 5);
    }