* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0; padding: 24px 32px 48px; background: #f7f6f2; color: #23221f;
}
h1 { margin: 0; font-size: 22px; }
.subtitle { margin: 2px 0 0; color: #6b6a64; font-size: 13px; }
.top-bar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
button.stroked {
  border: 1px solid #d3d1c7; background: #fff; color: #23221f;
  border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer;
}
button.stroked:hover { background: #f1efe8; }
button.stroked:disabled { opacity: 0.5; cursor: default; }

.selection-layout { display: flex; gap: 28px; align-items: flex-start; }
.main-column { flex: 1 1 auto; min-width: 0; }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar-search {
  border: 1px solid #d3d1c7; border-radius: 8px; padding: 7px 12px; font-size: 13px;
  font-family: inherit; min-width: 200px;
}
.toolbar-select {
  border: 1px solid #d3d1c7; background: #fff; color: #23221f; border-radius: 20px;
  padding: 6px 12px; font-size: 13px; font-family: inherit; cursor: pointer;
}
.product-count { font-size: 13px; color: #6b6a64; margin-left: auto; }

table { border-collapse: collapse; width: 100%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.04); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 0.5px solid #e5e4de; vertical-align: middle; font-size: 13.5px; }
th { color: #5f5e5a; font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.02em; background: #fafaf7; }
tr:last-child td { border-bottom: none; }
.thumb { width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid #e8e6e0; border-radius: 4px; }
.thumb-placeholder { width: 48px; height: 48px; background: #f4f3ef; border-radius: 4px; }
s { color: #6b6a64; margin-left: 4px; }
.offer-pct { color: #1a7a3d; font-size: 12px; margin-left: 4px; }

.action-btn {
  border: 1px solid #534ab7; background: #fff; color: #534ab7; font-size: 12px;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
  /* Shared with the Download <a> links (server.js's push-shopify/restore
     siblings are all real <button>s, which never need this) -- an <a>
     needs an explicit reset or it renders as an underlined, block-level
     link instead of matching the bordered button look. */
  text-decoration: none; display: inline-block;
}
.action-btn:hover { background: #f1efe8; }
.action-btn:disabled { opacity: 0.5; cursor: default; }
.row-status { font-size: 11px; color: #6b6a64; margin-top: 4px; margin-left: 10px; }
.row-error { color: #b00020; font-size: 12px; margin-top: 4px; max-width: 220px; }

.detail-panel { flex: 0 1 340px; min-width: 260px; position: sticky; top: 24px; }
.detail-panel h2 {
  margin: 0 0 14px; font-size: 15px; font-weight: 600; display: flex; align-items: center;
  justify-content: space-between; padding-bottom: 10px; border-bottom: 0.5px solid #e5e4de;
}
.panel-count { font-size: 12px; font-weight: 600; color: #534ab7; background: #eeedfe; border-radius: 10px; padding: 2px 9px; }
.panel-empty { background: #fff; border: 1px dashed #d3d1c7; border-radius: 12px; padding: 24px; text-align: center; color: #6b6a64; font-size: 13px; }

.panel-card { background: #fff; border: 0.5px solid #e5e4de; border-radius: 12px; overflow: hidden; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); transition: box-shadow 0.15s; }
.panel-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
/* align-items: flex-start plus the name span's min-width/overflow-wrap: a long product name wraps onto a second line instead of
   squeezing the video-type badge (which keeps a reserved, never-shrinking area) until its own text is cut off. */
.panel-card-header { padding: 9px 12px; font-size: 13px; font-weight: 600; background: #fafaf7; border-bottom: 0.5px solid #e5e4de; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.panel-card-header > span:first-child { min-width: 0; overflow-wrap: break-word; }
.video-type-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 8px; flex-shrink: 0; }
.video-type-badge.hero_product { color: #8a5a00; background: #fdf0d5; }
.video-type-badge.lifestyle { color: #534ab7; background: #eeedfe; }
.video-type-badge.image_transition { color: #1d7a5f; background: #e3f2ed; }

/* Per-slot status, aggregated onto a product row -- same metrics as
   .video-type-badge, colors reused from elsewhere in this file so a new
   status doesn't introduce a new hue. */
.status-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 8px; margin-right: 4px; display: inline-block; }
.status-badge.rendering { color: #8a5a00; background: #fdf0d5; }
.status-badge.candidates { color: #534ab7; background: #eeedfe; }
.status-badge.ready { color: #1a7a3d; background: #e6f4ea; }
.status-badge.published { color: #1a7a3d; background: #e6f4ea; }
.status-badge.failed { color: #b00020; background: #fbe9e9; }
.status-badge.canceled { color: #6b6a64; background: #f1efe8; }
.status-badge.none { color: #6b6a64; background: #f1efe8; }
.status-badge.clickable { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.status-badge.clickable:hover { filter: brightness(0.95); }
.spinner-inline { width: 10px; height: 10px; border-width: 1.5px; vertical-align: -1px; }

.clickable-name, .clickable-thumb { cursor: pointer; }
.clickable-name:hover { text-decoration: underline; color: #534ab7; }
.clickable-thumb:hover { opacity: 0.85; }
.thumb.enlargeable { cursor: zoom-in; }

.row-changed { color: #8a5a00; font-size: 11.5px; margin-top: 4px; cursor: pointer; }
.row-changed:hover { text-decoration: underline; }
.changed-detail-row td { background: #fdf6ec; border-top: none; padding: 4px 12px 10px; }
.changed-detail { font-size: 12.5px; color: #5f5e5a; display: flex; flex-direction: column; gap: 3px; }
.changed-detail img { display: none; } /* image "from"/"to" values are URLs, not rendered inline */

.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; background: #eeedfe; color: #534ab7;
  font-size: 12px; padding: 4px 6px 4px 10px; border-radius: 14px;
}
.filter-chip button { border: none; background: none; color: inherit; cursor: pointer; font-size: 11px; padding: 2px; line-height: 1; }
.filter-chip-clear-all { border: none; background: none; color: #6b6a64; font-size: 12px; cursor: pointer; text-decoration: underline; }

.refresh-error { color: #b00020; background: #fbe9e9; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }

.panel-card-media { position: relative; width: 100%; aspect-ratio: 16/9; background: #f4f3ef; display: flex; align-items: center; justify-content: center; }
.panel-card-media.playable { cursor: pointer; }
.panel-card-media img { width: 100%; height: 100%; object-fit: cover; }
.panel-card-media.playable:hover .panel-card-play { transform: scale(1.1); opacity: 1; }
.panel-card-play { position: absolute; font-size: 40px; color: #fff; opacity: 0.9; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); transition: transform 0.15s, opacity 0.15s; pointer-events: none; }
.panel-card-play::before { content: "▶"; }
.panel-card-error { color: #b00020; font-size: 13px; padding: 12px; text-align: center; }
.panel-card-placeholder { color: #6b6a64; font-size: 13px; padding: 12px; text-align: center; }
.panel-card-footer { padding: 8px 12px; font-size: 12px; color: #6b6a64; border-top: 0.5px solid #e5e4de; display: flex; align-items: center; justify-content: space-between; }
.panel-card-delete { border: none; background: none; color: #23221f; cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; opacity: 0.6; display: inline-flex; align-items: center; }
.panel-card-delete:hover { opacity: 1; background: #fbe9e9; }
.panel-card-icon-btn {
  border: none; background: none; color: #23221f; font-size: 14px; padding: 2px 6px;
  border-radius: 4px; opacity: 0.6; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.panel-card-icon-btn:hover { opacity: 1; background: #eeedfe; }
.spinner { width: 20px; height: 20px; border: 2.5px solid #e5e4de; border-top-color: #534ab7; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Generate Video modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: #fff; border-radius: 12px; width: 480px; max-width: 92vw; max-height: 88vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
/* Image Transitions' stills picker needs room for a 4-wide photo grid --
   same precedent as .plan-modal below (a per-flow width override, not a
   change to the base .modal every other step still uses). */
.modal.wide { width: 720px; }
.modal-header { padding: 18px 22px 4px; font-size: 17px; font-weight: 600; }
.modal-body { padding: 10px 22px 4px; }
.modal-actions { padding: 14px 22px 18px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: #5f5e5a; margin-bottom: 4px; }
.field select, .field textarea {
  width: 100%; border: 1px solid #d3d1c7; border-radius: 8px; padding: 8px 10px; font-size: 13.5px; font-family: inherit;
}
.field textarea { resize: vertical; }
/* Variable N's token-name input and the "Custom text…" value input had
   no rule at all before this (only select/textarea were styled above),
   so they rendered as bare unstyled browser inputs next to everything
   else's consistent bordered look. Laid out as a wrapping flex row
   instead of full-width stacked, since a name input + value select +
   remove button share one line. */
.field.variable-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.field.variable-row label { width: 100%; }
.field.variable-row input[type="text"], .field.variable-row select {
  border: 1px solid #d3d1c7; border-radius: 8px; padding: 8px 10px; font-size: 13.5px; font-family: inherit;
}
.field.variable-row input[type="text"] { flex: 1 1 130px; }
.field.variable-row select { flex: 1 1 160px; }
.field-hint { font-size: 11.5px; color: #6b6a64; margin-top: 3px; }
.btn-text { border: none; background: none; color: #534ab7; font-size: 13px; cursor: pointer; padding: 8px 10px; }
.btn-primary { border: none; background: #534ab7; color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 8px; cursor: pointer; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.loading-block { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 0; }

/* Usage badge + Plans & Billing modal */
.usage-badge {
  font-size: 12px; color: #5f5e5a; background: #f1efe8; border-radius: 20px;
  padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; border: none;
}
.usage-badge.warn { color: #8a5a00; background: #fdf0d5; }
.usage-badge.blocked { color: #b00020; background: #fbe9e9; }
.plan-modal { width: 720px; }
.plan-gate-banner { background: #fdf0d5; color: #6b4400; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin: 0 22px 14px; }
.plan-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.cycle-toggle { display: inline-flex; border: 1px solid #d3d1c7; border-radius: 20px; padding: 2px; margin: 0; }
.cycle-toggle button {
  border: none; background: none; font-size: 12.5px; padding: 0 14px; height: 26px; border-radius: 18px; cursor: pointer;
  color: #5f5e5a; display: inline-flex; align-items: center;
}
.cycle-toggle button.active { background: #534ab7; color: #fff; }
/* Outline (not border) so it never affects the button's own box size or
   shifts it out of alignment with the Pro card's right edge below it.
   height: 30px matches the cycle-toggle capsule's own outer height
   (its 26px buttons + the toggle container's 2px padding top/bottom)
   so the two line up instead of the taller default text button. */
.cancel-plan-btn {
  border: none; background: none; color: #b00020; font-size: 13px; padding: 0 14px; height: 30px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; outline: 1.5px solid #2f9e63; outline-offset: -1px; border-radius: 100px;
}
.cancel-plan-btn:disabled { opacity: 0.5; cursor: default; }
/* min-height alone isn't enough to stop the Monthly <-> Annual toggle
   from resizing the modal -- it's a floor, and either variant's wrapped
   text can exceed a guessed floor and grow past it, which is just as
   visible as not reserving space at all. The price row and meta text
   below instead get a HARD height (with overflow hidden, and
   line-clamp on meta) so every variant -- however many lines its own
   copy actually wraps to -- is truncated/padded to the exact same box,
   not just "at least" it. (For whichever tier the shop is actually
   subscribed to, toggling cycle can also swap a plain "Current plan"
   label for a full-size "Choose plan"/"Renew now" button; both are
   forced to the same min-height instead, since neither ever wraps.)
   margin-top: auto keeps every card's action pinned to the bottom. */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.plan-card { border: 1px solid #e5e4de; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; }
.plan-card.current { border-color: #534ab7; background: #f8f7fd; }
.plan-card h4 { margin: 0 0 4px; font-size: 14px; }
.plan-card .plan-price { font-size: 20px; font-weight: 700; margin: 4px 0; }
.plan-card .plan-price small { font-size: 11px; font-weight: 400; color: #6b6a64; }
.plan-card .plan-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.plan-card .plan-price-row .plan-price { margin: 0; }
.plan-card .plan-price-strike { font-size: 13px; color: #6b6a64; text-decoration: line-through; }
.plan-card .plan-save-badge { font-size: 10.5px; font-weight: 600; color: #14683c; background: #e6f4ec; border-radius: 10px; padding: 2px 8px; }
.plan-card > .plan-price, .plan-card > .plan-price-row { height: 56px; overflow: hidden; }
.plan-card .plan-meta {
  font-size: 12px; line-height: 16px; color: #6b6a64; margin-bottom: 10px;
  height: 64px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.plan-card .plan-current-label { font-size: 11.5px; color: #534ab7; font-weight: 600; }
.plan-card > .btn-primary, .plan-card > .plan-current-label {
  box-sizing: border-box; min-height: 34px; display: flex; align-items: center; justify-content: center; margin-top: auto;
}
.plan-contact-note {
  width: 100%; border: 1px solid #d3d1c7; border-radius: 8px; padding: 6px 8px;
  font-size: 12px; font-family: inherit; resize: vertical; margin-bottom: 6px;
}
.plan-error { color: #b00020; font-size: 12.5px; margin: 0 22px 10px; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
/* Image Transitions' stills picker (product-photos row + generated-stills
   row, see productImagesGridHtml/generatedImagesSectionHtml) -- 4 across
   instead of 2; Hero Product's 2-column grid above is untouched. */
.preview-grid.wide { grid-template-columns: repeat(4, 1fr); }
.preview-tile { position: relative; border: 1px solid #e5e4de; border-radius: 8px; padding: 0; overflow: hidden; cursor: pointer; background: none; }
.preview-tile:hover { border-color: #534ab7; }
.preview-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.preview-tile.selected { border-color: #534ab7; box-shadow: 0 0 0 3px #534ab7; }
.preview-tile[draggable="true"] { cursor: grab; }
.still-badge {
  position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: #534ab7; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
/* "Change Image" -- real tiles only (stillTileHtml only renders this
   overlay when tile.source === "real"), hover-revealed. Content is
   anchored to the BOTTOM, not vertically centered -- a plain click/tap
   anywhere near the tile's center (the natural "select this tile" spot)
   must still land on the dark background and bubble up to the tile's
   own onclick (toggleStillSelection), not get swallowed by the Change
   Image button sitting dead-center on top of it. */
.tile-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45); color: #fff;
  display: none; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px; padding-bottom: 10px; font-size: 11px; text-align: center;
}
.preview-tile[data-source="real"]:hover .tile-overlay { display: flex; }
.tile-overlay-btn {
  border: none; background: rgba(255,255,255,0.9); color: #333; border-radius: 6px;
  width: 28px; height: 28px; font-size: 14px; cursor: pointer;
}
/* Change Image's "pick another of this product's photos" panel -- a
   small scrollable strip of thumbnails inside the same tile-overlay. */
.tile-overlay-picker { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-height: 60px; overflow-y: auto; width: 100%; }
.tile-overlay-pick { border: 1px solid rgba(255,255,255,0.6); border-radius: 4px; padding: 0; width: 28px; height: 28px; overflow: hidden; cursor: pointer; background: none; flex: none; }
.tile-overlay-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A just-uploaded tile before its real image exists yet -- no <img> at
   all (there's nothing to show), just a placeholder box + spinner. */
.uploading-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; background: #f1efe8; cursor: default; }
.muted { color: #6b6a64; font-size: 13px; }
/* <p> tags default to a ~1em top/bottom margin; this one sits between the title (which has its own margin-bottom) and the action
   buttons/footer right after it, so the browser default left an oversized gap above and below. */
.overlay-line { margin: 0 0 6px; }
.ratio-inline { color: #6b6a64; font-weight: 500; }

/* Video preview popup — mirrors circular-importer's VideoPreviewDialogComponent:
   fixed 16:9 box, object-fit:contain (native fullscreen crops/pixelates these
   clips), floating header bar instead of a separate row. */
.video-preview-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; }
.video-preview-box { position: relative; background: #000; overflow: hidden; border-radius: 8px; }
.image-preview-box { width: min(80vw, 900px); height: min(80vh, 900px); }
.image-preview-box .video-preview-body img { width: 100%; height: 100%; object-fit: contain; }
.video-preview-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; padding: 8px 8px 8px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0));
}
.video-preview-title { font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.video-preview-close { border: none; background: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; padding: 4px 8px; }
.video-preview-body { position: absolute; inset: 0; }
.video-preview-body video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Per-product detail page */
.back-link { display: inline-block; margin-bottom: 14px; padding: 0; }
.detail-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.detail-header .thumb, .detail-header .thumb-placeholder { width: 56px; height: 56px; }
.detail-header-title { margin: 0; font-size: 20px; }
.detail-header-sub { margin: 2px 0 0; color: #6b6a64; font-size: 13px; }
.tabs { display: flex; gap: 4px; border-bottom: 0.5px solid #e5e4de; margin-bottom: 18px; }
.tab {
  border: none; background: none; color: #5f5e5a; font-size: 13.5px; font-weight: 500;
  padding: 9px 4px; margin-right: 18px; cursor: pointer; border-bottom: 2px solid transparent;
}
.tab.active { color: #23221f; font-weight: 600; border-bottom-color: #534ab7; }
.detail-layout { display: flex; gap: 28px; align-items: flex-start; }
/* flex-basis: 0, not auto -- an auto basis lets the video's own intrinsic aspect ratio (which the browser only treats as real once
   playback starts) feed into this column's preferred width, squeezing .detail-side the moment Play is pressed. A 0 basis makes the
   width purely a function of the available space, independent of what is playing inside it. */
.detail-main { flex: 1 1 0; min-width: 0; }
.detail-side { flex: 0 1 300px; min-width: 230px; }
.detail-overview { background: #fff; border: 0.5px solid #e5e4de; border-radius: 12px; padding: 16px 18px; }
.detail-player-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.detail-actions { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.detail-player { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.detail-player video { width: 100%; height: 100%; object-fit: contain; }
.detail-player-empty {
  width: 100%; aspect-ratio: 16/9; background: #f4f3ef; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; text-align: center; padding: 20px;
}
/* Same treatment as .preview-tile.selected: marks the slot the main player above is showing. */
.slot-card.selected { border-color: #534ab7; box-shadow: 0 0 0 3px rgba(83,74,183,0.16); }
.slot-card-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.slot-card-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; background: #f4f3ef; }
.slot-card-meta { display: flex; flex-direction: column; gap: 4px; }
.slot-card-type { font-size: 13px; font-weight: 600; }
.slot-card-body { padding: 0 12px 10px; }

@media (max-width: 900px) {
  .selection-layout { flex-direction: column; }
  .detail-panel { width: 100%; position: static; }
  .detail-layout { flex-direction: column; }
  .detail-side { width: 100%; }
}

body.embed { padding-top: 12px; }

/* Plans & Billing additions: notices, summary strip, tabs, payment history */
.plan-notice { background: #e6f4ec; color: #1a5c3a; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin: 0 22px 14px; }
.plan-notice a { color: inherit; font-weight: 600; }
.plan-summary { font-size: 12.5px; color: #5f5e5a; margin: 0 22px 10px; }
.plan-tabs { display: flex; gap: 4px; margin: 0 22px 14px; border-bottom: 1px solid #e5e4de; }
.plan-tabs button { border: none; background: none; padding: 8px 12px; font-size: 13px; cursor: pointer; color: #5f5e5a; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.plan-tabs button.active { color: #534ab7; border-bottom-color: #534ab7; font-weight: 600; }
.history-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.history-table th, .history-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #ece9df; vertical-align: top; }
.history-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pay-status { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #f1efe8; font-size: 11.5px; }
.pay-status.paid { background: #e6f4ec; color: #14683c; } .pay-status.failed, .pay-status.canceled { background: #fbe9e9; color: #b00020; }
.pay-status.pending, .pay-status.created { background: #fdf0d5; color: #8a5a00; }
.pay-status.refunded, .pay-status.partially_refunded { background: #ece9f8; color: #534ab7; }

.plan-footer { display: flex; justify-content: space-between; align-items: center; }
.plan-footer-left { display: flex; gap: 4px; flex-wrap: wrap; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- bug fixes of 26 Oct 2026 ---- */
/* A close X in the top-right corner of every dialog: a zero-height bar that stays at the top of the scrolling window, with the button inside it. */
.modal-close-bar { position: sticky; top: 0; height: 0; z-index: 3; }
.modal-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: #fff; color: #444; font-size: 22px; line-height: 30px; text-align: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); }
.modal-close:hover { background: #f1efe8; }
.modal-close:focus-visible { outline: 2px solid #2a78d6; outline-offset: 2px; }
.modal-header { padding-right: 56px; }
/* A Download button that is working. */
.is-busy { opacity: 0.65; pointer-events: none; }
/* A photo that was uploaded (not one of the store's own). */
.tile-tag { position: absolute; left: 6px; bottom: 6px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 11px; line-height: 1.2; padding: 2px 6px; border-radius: 4px; pointer-events: none; }
.failure-detail { margin-top: 8px; font-size: 12px; color: #6b6a64; word-break: break-word; }

/* ---- phone layout (FND-UI-1): nothing may be wider than the screen ---- */
@media (max-width: 900px) {
  /* in the stacked layout the list column takes the screen's width instead of the width of its widest content */
  .selection-layout { align-items: stretch; }
  .main-column, .detail-panel { width: 100%; min-width: 0; box-sizing: border-box; }
}
/* a long search word makes a long filter chip: it wraps inside the screen at every width, not only on a phone */
.filter-chip { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  /* the product table is wider than a phone: it scrolls sideways inside its own box instead of widening the page */
  .main-column table { display: block; overflow-x: auto; max-width: 100%; }
}
@media (max-width: 640px) {
  /* the title and the usage badge / View Plans / Refresh buttons stack and wrap instead of running off the screen */
  .top-bar { flex-wrap: wrap; gap: 12px; }
  .top-bar > div:last-child { flex-wrap: wrap; }
}