/* Dashboard — samme mørke designsprog. Radius-regel: kort/paneler 16px, knapper pill, inputs/chips 8px. */
.dash-body { min-height: 100svh; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.dash-nav {
  display: flex; align-items: center; gap: 1rem;
  height: 68px; padding: 0 clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.dash-nav-right { margin-left: auto; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.credits-pill {
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .88rem;
  border-radius: 999px; padding: .35rem .95rem;
}
/* Pillen er klikbar → åbner top-up-popup (topup.js). Diskret "+" så affordancen er tydelig. */
.credits-pill-btn { cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; border: 0; transition: filter .15s ease, transform .1s ease; }
.credits-pill-btn::after { content: "+"; display: grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 999px; background: color-mix(in srgb, var(--accent-ink) 16%, transparent); font-size: .8rem; line-height: 1; font-weight: 700; }
.credits-pill-btn:hover { filter: brightness(1.06); }
.credits-pill-btn:active { transform: translateY(1px); }
.credits-pill-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.plan-chip { color: var(--dim); font-size: .85rem; text-transform: capitalize; border: 1px solid var(--line); border-radius: 8px; padding: .25rem .6rem; }
.btn-small { padding: .45rem 1.1rem; font-size: .88rem; cursor: pointer; font-family: inherit; background: none; }
/* background:none ovenfor må ikke æde primær-knappernes amber (samme specificitet, senere cascade) */
.btn-small.btn-primary { background: var(--accent); color: var(--accent-ink); }

.dash { max-width: 1100px; margin-inline: auto; padding: 2.5rem clamp(1rem, 4vw, 2.5rem) 5rem; display: grid; gap: 2rem; }
.dash-note { border: 1px solid var(--accent); border-radius: 8px; color: var(--text); padding: .8rem 1.1rem; margin: 0; font-size: .92rem; }

.panel { border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--bg-2); padding: 2rem clamp(1.2rem, 3vw, 2.2rem); }
.panel h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
.panel h2 { font-size: 1.3rem; margin: 0 0 1.2rem; }
.panel-sub { color: var(--dim); font-size: .95rem; margin: 0 0 1.6rem; max-width: 60ch; }

.job-form { display: grid; gap: 1.4rem; }

/* ---------- Create-siden (Photoroom-mønsteret, 5/7): FULD arbejdsflade — panel venstre + stage der fylder ---------- */
.dash-wide { max-width: none; padding: 1.4rem clamp(1rem, 2.5vw, 2.25rem) 3.5rem; }
.dash-wide > * { position: relative; z-index: 7; } /* indhold maler OVER fx3d-chipsene */
.cr-shell { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.cr-panel { grid-column: 1; grid-row: 1; position: sticky; top: 1.2rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-media); display: grid; min-width: 0; }
.cr-stagewrap { grid-column: 2; grid-row: 1; display: grid; gap: .9rem; min-width: 0; justify-items: stretch; }
/* Produkt + swatch SIDE OM SIDE (Joachim 5/7: "begge er super vigtige") — swatch-cellen
   forsvinder for værktøjer uden swatch, og produktet fylder så hele bredden */
.cr-stagehost { position: relative; display: grid; grid-template-columns: 1.7fr 1fr; gap: .9rem; align-items: stretch; }
.cr-stagehost:has(#dropSwatch[hidden]) { grid-template-columns: 1fr; }
.cr-stagehost:has(.cr-stage-ex:not([hidden])) { grid-template-columns: 1.4fr 1fr 1fr; } /* text_image: 3 felter */
.cr-stage-empty em { font-style: normal; color: var(--dim); font-weight: 400; }
.cr-stage[hidden] { display: none; }
.cr-stage-sw { min-height: 0; } /* arver rækkens højde fra produkt-cellen */
.cr-stage-sw .cr-stage-empty strong { font-size: 1rem; }
.cr-stage-sw .cr-stage-empty span { font-size: .82rem; }
.cr-upicon-sw { width: 52px; height: 52px; }
.cr-upicon-sw svg { width: 22px; height: 22px; }

/* Entrance: blød stagger på panel-sektioner + stage (respekterer reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .cr-stagewrap { animation: crIn .55s cubic-bezier(.22, .9, .26, 1) backwards; }
  .cr-panel .cr-head { animation: crIn .5s cubic-bezier(.22, .9, .26, 1) backwards; animation-delay: .06s; }
  .cr-panel .cr-sec:nth-of-type(1) { animation: crIn .5s cubic-bezier(.22, .9, .26, 1) backwards; animation-delay: .12s; }
  .cr-panel .cr-sec:nth-of-type(2) { animation: crIn .5s cubic-bezier(.22, .9, .26, 1) backwards; animation-delay: .18s; }
  .cr-panel .cr-sec:nth-of-type(3) { animation: crIn .5s cubic-bezier(.22, .9, .26, 1) backwards; animation-delay: .24s; }
  .cr-panel .cr-sec:nth-of-type(4) { animation: crIn .5s cubic-bezier(.22, .9, .26, 1) backwards; animation-delay: .3s; }
  .cr-panel .cr-sec:nth-of-type(5) { animation: crIn .5s cubic-bezier(.22, .9, .26, 1) backwards; animation-delay: .36s; }
  .cr-upicon svg { animation: crBob 3.4s ease-in-out infinite; }
}
@keyframes crIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes crBob { 50% { transform: translateY(-6px); } }
.cr-panel > * { min-width: 0; }
.cr-head { padding: 1.15rem 1.15rem .95rem; }
.cr-head h1 { font-size: 1.18rem; margin: 0; letter-spacing: -.01em; }
.cr-head p { color: var(--dim); font-size: .86rem; margin: .25rem 0 0; }
.cr-links a { color: var(--accent); text-decoration: none; }
.cr-links a:hover { text-decoration: underline; }
.cr-sec { padding: 1.05rem 1.15rem; border-top: 1px solid var(--line); }
.cr-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .65rem; }
.cr-label { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.cr-more { color: var(--accent); font-size: .85rem; font-weight: 600; text-decoration: none; }
.cr-more:hover { text-decoration: underline; }

/* Værktøjs-kort (2×2): navnet PÅ billedet over en scrim — samme udtryk som video-sidens deck */
.cr-tools { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cr-tool { position: relative; display: block; cursor: pointer; border: 2px solid transparent; outline: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); transition: outline-color .15s, border-color .15s, transform .06s; }
.cr-tool:hover { outline-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.cr-tool:active { transform: scale(.985); }
.cr-tool input { position: absolute; opacity: 0; pointer-events: none; }
.cr-tool img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.22, .9, .26, 1); }
.cr-tool:hover img { transform: scale(1.05); }
.cr-tool::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10, 8, 6, .82), transparent 55%); pointer-events: none; }
.cr-tool-name { position: absolute; z-index: 2; left: .6rem; right: .6rem; bottom: .45rem; color: #fff; font-size: .8rem; font-weight: 650; line-height: 1.25; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
/* Crop hvert kort til den mest læsbare del af visualet */
.cr-tool:nth-of-type(1) img { object-position: 50% 30%; }
.cr-tool:nth-of-type(2) img { object-position: 22% 40%; }
.cr-tool:nth-of-type(3) img { object-position: 72% 45%; }
.cr-tool:nth-of-type(4) img { object-position: 68% 40%; }
.cr-tool-wide { grid-column: 1 / -1; }
.cr-tool-wide img { aspect-ratio: 16 / 5; object-position: 50% 55%; }
.cr-tool:has(input:checked) { border-color: var(--accent); outline-color: transparent; }
.cr-tool:has(input:checked)::after { content: "\2713"; position: absolute; z-index: 3; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.cr-tool:has(input:focus-visible) { outline: 2px solid var(--accent); }
.cr-req { margin: .65rem 0 0; color: var(--dim); font-size: .82rem; }

/* Swatch-række (kompakt upload-slot) */
.cr-row { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .5rem .7rem; border: 1.5px dashed var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s; }
.cr-row:hover, .cr-row:focus-within { border-color: var(--accent); }
.cr-row input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cr-row img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.cr-row img[hidden] { display: none; }
.cr-row .drop-label { color: var(--dim); font-size: .88rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; }
.cr-row.has-file { border-style: solid; border-color: var(--accent); }
.cr-row.has-file .drop-label { color: var(--text); }
.cr-batchnote { margin: .5rem 0 0; color: var(--dim); font-size: .78rem; } /* dim: amber er reserveret til handling/valg */
.cr-batchnote em { font-style: normal; font-weight: 700; }
.cr-alt { display: grid; gap: .4rem; }
.cr-alt a { color: var(--dim); font-size: .85rem; text-decoration: none; width: fit-content; }
.cr-alt a:hover, .cr-alt a:focus-visible { color: var(--accent); }

#textSection textarea { width: 100%; }
.cr-cta { display: grid; gap: .55rem; }
.cr-cta .btn { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 1rem; padding: .9rem 1rem; }
.cr-cta .btn[disabled] { opacity: .6; cursor: wait; }
.cr-cta .job-status { text-align: center; min-height: 1.2em; }
.cr-note { margin: 0; color: var(--dim); font-size: .8rem; text-align: center; }

/* Stagen: produkt-uploaden ER canvas'et — fylder arbejdsfladen, lever med blødt amber-lys */
.cr-stage { position: relative; display: grid; place-items: center; width: 100%; min-height: clamp(460px, calc(100svh - 250px), 780px); border: 1.5px dashed var(--line); border-radius: var(--radius-media); background: #0b0a08; cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s; }
.cr-stage::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%); pointer-events: none; }
.cr-stage:hover, .cr-stage:focus-within, .cr-stage.dragover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, #0b0a08); }
.cr-stage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cr-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b0a08; }
.cr-stage > img[hidden] { display: none; }
.cr-stage-empty { position: relative; display: grid; justify-items: center; gap: .6rem; text-align: center; padding: 1rem; max-width: 38ch; }
.cr-upicon { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--accent); margin-bottom: .2rem; }
.cr-upicon svg { width: 26px; height: 26px; }
.cr-stage-empty strong { font-size: 1.2rem; letter-spacing: -.01em; }
.cr-stage-empty span { color: var(--dim); font-size: .88rem; line-height: 1.5; }
.cr-drophint { border: 1px solid var(--line); border-radius: 999px; padding: .28rem .85rem; font-size: .78rem !important; margin-top: .25rem; }
.cr-stage.has-file { border-style: solid; }
.cr-stage.has-file .cr-stage-empty { display: none; }

/* Prøv-en-sample (Photoroom-trick): i flow under stage-rækken, centreret */
.cr-samples { display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--dim); font-size: .85rem; flex-wrap: wrap; }
.cr-stagehost:has(#dropProduct.has-file) + .cr-samples { display: none; }
.cr-sample { width: 62px; height: 62px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); padding: 0; background: none; cursor: pointer; transition: border-color .15s, transform .1s; }
.cr-sample:hover, .cr-sample:focus-visible { border-color: var(--accent); }
.cr-sample:active { transform: scale(.95); }
.cr-sample img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-stage.has-file + .cr-samples { display: none; }

/* Latest images bor i arbejdsfladen under stagen */
.cr-latest { margin-top: .4rem; }
.cr-latest h2 { font-size: 1.02rem; margin: 0 0 .8rem; }
.cr-chip { position: absolute; z-index: 2; display: none; align-items: center; gap: .45rem; min-height: 36px; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(6px); color: var(--text); font-size: .84rem; font-weight: 600; pointer-events: none; }
.cr-change { top: .65rem; left: .65rem; } /* flyttet til venstre — ×-knappen bor i top-højre */
.cr-stage.has-file .cr-change { display: inline-flex; }
/* ×-knap (Joachim 7/7): fjern det vedhæftede billede; drop et nyt oven på for at skifte */
.cr-clear {
  position: absolute; z-index: 3; top: .65rem; right: .65rem;
  width: 2.1rem; height: 2.1rem; border-radius: 999px; padding: 0;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px); color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: border-color .15s, background .15s;
}
.cr-clear:hover, .cr-clear:focus-visible { border-color: var(--accent); background: var(--bg); }
.cr-clear[hidden] { display: none; }
.cr-swatchchip { top: .65rem; left: .65rem; } /* top-venstre: må ikke kollidere med filnavns-captionen i bunden */
.cr-swatchchip img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.cr-stage.has-file .cr-swatchchip:not([hidden]) { display: inline-flex; }
.cr-stage-cap { position: absolute; left: 0; right: 0; bottom: 0; display: none; padding: 1.5rem .9rem .55rem; text-align: center; font-size: .8rem; color: var(--text); background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 80%, transparent)); pointer-events: none; }
.cr-stage.has-file .cr-stage-cap { display: block; }
.cr-stagewrap .swatch-strip { justify-content: center; }

@media (max-width: 900px) {
  .cr-shell { display: flex; flex-direction: column; align-items: stretch; }
  .cr-stagewrap { order: 1; }
  .cr-panel { order: 2; position: static; } /* sticky panel giver ingen mening i kolonne-flow */
  .cr-stagehost { grid-template-columns: 1fr; } /* mobil: produkt og swatch stakker */
  .cr-stage { min-height: 300px; aspect-ratio: 1 / 1; max-height: 56vh; }
  .cr-stage-sw { min-height: 190px; aspect-ratio: 16 / 9; max-height: 40vh; }
  .cr-samples > span { width: 100%; text-align: center; } /* label på egen linje, thumbs centreret under */
  .cr-latest { order: 3; }
  .cr-cta { position: sticky; bottom: calc(env(safe-area-inset-bottom) + 4.35rem); z-index: 5; background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(8px); margin: 0 0 -1px; border-radius: 0 0 var(--radius-media) var(--radius-media); }
}
.drops { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.drop {
  position: relative; border: 1.5px dashed var(--line); border-radius: var(--radius-media);
  min-height: 190px; display: grid; place-items: center; text-align: center; cursor: pointer;
  overflow: hidden; transition: border-color .2s;
}
.drop:hover, .drop:focus-within { border-color: var(--accent); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg); }
.drop img[hidden] { display: none; } /* styles.css' globale img{display:block} maa ikke vise det tomme preview */
.drop .drop-label { color: var(--dim); font-size: .95rem; padding: 1rem; pointer-events: none; }
.drop.has-file .drop-label { position: absolute; bottom: 0; left: 0; right: 0; background: color-mix(in srgb, var(--bg) 80%, transparent); padding: .4rem; font-size: .8rem; }
.drop.has-file { border-style: solid; border-color: var(--accent); } /* udfyldt felt skal ikke ligne en tom dropzone */

.modes { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; color: var(--dim); font-size: .93rem; }
.modes label { cursor: pointer; }
.modes strong { color: var(--text); }
.modes input { accent-color: var(--accent); margin-right: .35rem; }

/* "Read more" pr. værktøj (Joachim 5/7): LINK til /tools#anker — fuld forklaring m. visuals dér */
.mode-more { display: inline-block; width: fit-content; margin: -.2rem 0 .35rem 1.55rem; color: var(--accent); font-size: .85rem; font-weight: 600; text-decoration: none; }
.mode-more:hover, .mode-more:focus-visible { text-decoration: underline; }

#refineText {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
  font: inherit; font-size: 1rem; padding: .7rem .9rem; min-height: 90px; resize: vertical; /* ≥16px: iOS auto-zoomer ved fokus under 16px */
}
#refineText:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.job-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.job-actions .btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.job-actions .btn[disabled] { opacity: .6; cursor: wait; }
.job-status { color: var(--dim); font-size: .92rem; }
.job-status.error { color: #e08b8b; }
.job-status.busy::before {
  content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .45em;
  border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 999px;
  animation: spin 1s linear infinite; vertical-align: -0.1em;
}
@keyframes spin { to { transform: rotate(1turn); } }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.dash-empty { color: var(--dim); font-size: .95rem; margin: 0; grid-column: 1 / -1; }
.card { border: 1px solid var(--line); border-radius: var(--radius-media); overflow: hidden; background: var(--bg); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.card .card-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .8rem; font-size: .8rem; color: var(--dim); }
.card .card-meta a { color: var(--accent); text-decoration: none; font-weight: 600; }
.card.failed { display: grid; place-items: center; aspect-ratio: 1; padding: 1rem; color: #e08b8b; font-size: .85rem; text-align: center; }

dialog#upgradeModal, dialog#topupModal {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-media);
  padding: 2rem; max-width: 520px; width: calc(100% - 2rem);
}
dialog#upgradeModal::backdrop, dialog#topupModal::backdrop { background: rgba(0, 0, 0, .6); }
dialog#upgradeModal h2, dialog#topupModal h2 { margin: 0 0 1.2rem; font-size: 1.3rem; }
/* Top-up-popup (topup.js): 9 pakker i 3 kolonner, kompakte kort */
dialog#topupModal { max-width: 600px; }
.topup-modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 0 0 1.1rem; }
.topup-modal-grid .modal-plan { padding: .9rem .85rem; gap: .15rem; }
.topup-modal-grid .modal-price { font-size: 1.15rem; }
@media (max-width: 560px) { .topup-modal-grid { grid-template-columns: 1fr 1fr; } }
.modal-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.modal-plan {
  border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--bg);
  color: var(--text); font: inherit; padding: 1.2rem 1rem; cursor: pointer; display: grid; gap: .3rem; text-align: left;
}
.modal-plan:hover, .modal-plan:focus-visible { border-color: var(--accent); }
.modal-plan-featured { border-color: var(--accent); }
.modal-price { font-family: "Space Grotesk", sans-serif; font-size: 1.4rem; font-weight: 700; }
.modal-plan small { color: var(--dim); }

/* Upgrade-modal M10 (Photoroom-mønsteret): benefits-panel + plan-faner + pris + CTA */
dialog#upgradeModal.up2 { max-width: 780px; padding: 0; overflow: hidden; position: relative; }
.up2-x {
  position: absolute; top: .8rem; right: .8rem; z-index: 1;
  width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.up2-x:hover, .up2-x:focus-visible { border-color: var(--accent); }
.up2-grid { display: grid; grid-template-columns: 1fr 1.15fr; }
.up2-left { background: var(--bg); border-right: 1px solid var(--line); padding: 2rem 1.8rem; }
.up2-tag { margin: 0 0 .6rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--accent); }
dialog#upgradeModal.up2 h2 { margin: 0 0 1.2rem; font-size: 1.55rem; line-height: 1.2; text-wrap: balance; }
.up2-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.up2-benefits li { position: relative; padding-left: 1.7rem; font-size: .92rem; color: var(--text); }
.up2-benefits li::before {
  content: "✓"; position: absolute; left: 0; top: -.05em;
  width: 1.2rem; height: 1.2rem; border-radius: .35rem; background: rgba(210, 154, 94, .16);
  color: var(--accent); font-size: .8rem; display: grid; place-items: center;
}
.up2-right { padding: 2rem 1.8rem; display: grid; gap: 1rem; align-content: start; }
.up2-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--line); border-radius: 999px; justify-self: start; }
.up2-tab { border: 0; background: none; color: var(--dim); font: inherit; font-size: .88rem; font-weight: 600; padding: .4rem 1.1rem; border-radius: 999px; cursor: pointer; }
.up2-tab[aria-selected="true"] { background: var(--accent); color: #1a140d; }
.up2-head { margin: 0; font-size: 1.35rem; font-family: "Space Grotesk", sans-serif; }
.up2-price { border: 1px solid var(--accent); border-radius: var(--radius-media); padding: 1rem 1.1rem; display: grid; gap: .2rem; background: var(--bg); }
.up2-amount-row { display: flex; align-items: baseline; gap: .4rem; }
.up2-amount-row strong { font-family: "Space Grotesk", sans-serif; font-size: 1.7rem; }
.up2-amount-row span { color: var(--dim); font-size: .9rem; }
.up2-price small { color: var(--dim); }
.up2-cta { width: 100%; }
.up2-then { margin: 0; color: var(--dim); font-size: .82rem; }
@media (max-width: 700px) {
  .up2-grid { grid-template-columns: 1fr; }
  .up2-left { border-right: 0; border-top: 1px solid var(--line); order: 2; padding: 1.4rem 1.5rem; }
  .up2-right { order: 1; padding: 1.6rem 1.5rem; }
}

/* Try Again-knap på job-kort */
.card-retry { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font: inherit; font-size: .78rem; padding: .2rem .7rem; cursor: pointer; }
.card-retry:hover, .card-retry:focus-visible { border-color: var(--accent); color: var(--text); }
.card-retry[disabled] { opacity: .5; cursor: wait; }
.card.failed .card-retry { margin-top: .6rem; }

/* Email-verifikations-banner ([hidden]-reglen i styles.css vinder over display:flex) */
.verify-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Batch: thumbnail-strip for valgte swatches (Pro) */
.swatch-strip { display: flex; gap: .5rem; flex-wrap: wrap; }
.swatch-strip img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
#swatchStrip { justify-content: flex-end; } /* swatch-feltet er højre kolonne — thumbnails skal stå under det */
/* Fjern-knap på hvert strip-miniature (Joachim 7/7) — hover på desktop, altid synlig på touch */
.ss-item { position: relative; display: inline-flex; }
.ss-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0;
  display: grid; place-items: center; border: none; border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 65%, #000); color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.45); opacity: 0; transition: opacity .12s ease; }
.ss-item:hover .ss-x, .ss-x:focus-visible { opacity: 1; }
@media (hover: none) { .ss-x { opacity: 1; } }
.batch-hint { color: var(--accent); }

/* Profil-siden */
.profile-form { display: grid; gap: 1rem; max-width: 420px; }
.profile-form label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 600; }
.profile-form label .opt { color: var(--dim); font-weight: 400; }
.profile-form input {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font: inherit; padding: .65rem .85rem;
}
.profile-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.profile-form .btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.profile-form .btn[disabled] { opacity: .6; cursor: wait; }
.profile-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.profile-hint { margin-top: 1rem; margin-bottom: 0; font-size: .85rem; }
.profile-form select {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font: inherit; padding: .65rem .85rem;
}
.profile-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ar-toggle { display: flex !important; flex-direction: row; align-items: center; gap: .6rem; }
.ar-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.btn-danger { border-color: #b0564a; color: #d98a80; }
.btn-danger:hover { border-color: #d98a80; color: #f0b0a8; }
.topup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 720px; }

.dash-foot { max-width: 1100px; margin-inline: auto; padding: 0 clamp(1rem, 4vw, 2.5rem) 2rem; color: var(--dim); font-size: .85rem; }
.dash-foot a { color: inherit; }

.capture-cta { margin: 0 0 1.2rem; }
@media (max-width: 640px) { .capture-cta { display: none; } } /* mobil auto-lander i capture + har tab-baren */

/* Bibliotek */
.lib-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.lib-actions { display: flex; gap: .6rem; }
.lib-actions .btn { cursor: pointer; font: inherit; }
.lib-actions .btn[disabled] { opacity: .55; cursor: not-allowed; }
.lib-card {
  position: relative; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-media, 16px);
  overflow: hidden; background: var(--bg); cursor: pointer; display: block;
}
.lib-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.lib-check {
  position: absolute; top: .5rem; right: .5rem; width: 22px; height: 22px; border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--text) 70%, transparent); background: color-mix(in srgb, var(--bg) 55%, transparent);
  display: none;
}
.lib-grid.selecting .lib-check { display: block; }
.lib-card.sel .lib-check { background: var(--accent); border-color: var(--accent); }
.lib-card.sel img { opacity: .7; }

/* Fuldskærms-fremviser */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, black);
  display: grid; grid-template-rows: 1fr auto; padding: max(env(safe-area-inset-top), .8rem) .8rem max(env(safe-area-inset-bottom), .8rem);
}
.lightbox[hidden] { display: none; }
.lightbox img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.lightbox-bar { display: flex; justify-content: center; gap: .8rem; padding-top: .8rem; }
.lightbox-bar .btn { cursor: pointer; font: inherit; }

.see-all { margin: 1rem 0 0; font-size: .92rem; }
.see-all a { color: var(--dim); }

/* Bund-tab-bar (mobil, Photoroom-mønsteret): Hjem · Create (primær pill) · Library · Profil */
.tabbar { display: none; }
@media (max-width: 640px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-around; gap: .3rem;
    padding: .55rem .8rem max(env(safe-area-inset-bottom), .55rem);
    background: color-mix(in srgb, var(--bg) 92%, black);
    border-top: 1px solid var(--line);
  }
  .tabbar .tab {
    color: var(--dim); text-decoration: none; font-size: .82rem; font-weight: 600;
    padding: .45rem .7rem; border-radius: 999px;
  }
  .tabbar .tab.active { color: var(--text); }
  .tabbar .tab-primary { background: var(--accent); color: var(--accent-ink, #1b130b); padding: .55rem 1.15rem; }
  .dash { padding-bottom: 6.5rem; } /* indhold må ikke gemme sig bag tab-baren */
  .dash-foot { padding-bottom: 5.5rem; }
}
.modal-alt { color: var(--dim); font-size: .85rem; margin: .9rem 0 0; }
.modal-alt a { color: inherit; }

/* ---------- Fælles skal: område-rail (Create / Batch / Marketing + Library/Profile) — desktop ----------
   Andet neutralt lag: en anelse mørkere end indholdsfladen, så arbejdsfladen står frem. */
.area-rail { display: none; }
/* Rail fra 641px (hvor tab-baren slutter) — ellers står 641-900px uden område-nav */
@media (min-width: 641px) {
  body.has-rail { padding-left: 86px; }
  .area-rail {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 20; width: 86px;
    display: flex; flex-direction: column; align-items: stretch; gap: .3rem;
    padding: .85rem .5rem calc(.85rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 62%, black); border-right: 1px solid var(--line);
  }
  .ar-item {
    display: grid; justify-items: center; gap: .28rem; padding: .6rem .2rem .5rem;
    border-radius: 12px; color: var(--dim); text-decoration: none;
    font-size: .7rem; font-weight: 650; letter-spacing: .01em; text-align: center;
    transition: background .15s, color .15s;
  }
  .ar-item svg { width: 22px; height: 22px; }
  .ar-item:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
  .ar-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ar-item.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
  .ar-spring { flex: 1; }
  .ar-sub { opacity: .85; }
}

/* 5 tabs (Create/Batch/Marketing/Library/Profile) skal kunne stå på 390px uden wrap */
@media (max-width: 640px) {
  .tabbar { gap: .15rem; padding-inline: .4rem; }
  .tabbar .tab { font-size: .78rem; padding: .45rem .5rem; }
  .tabbar .tab-primary { padding: .5rem .8rem; }
}

@media (max-width: 640px) {
  .drops, .modal-plans, .topup-grid { grid-template-columns: 1fr; }
  /* Headeren må vokse i højden når knapperne wrapper — ellers overlapper de logo/saldo */
  .dash-nav { height: auto; min-height: 68px; flex-wrap: wrap; row-gap: .4rem; padding-block: .6rem; }
  /* Nav-LINKS (Home/Library/Profile/…) dubleres af tab-baren på mobil — skjul dem (Photoroom-minimal
     topbar). Knapper (Upgrade/Log out osv.) er ikke i tab-baren og bliver stående. */
  .dash-nav-right a.btn { display: none; }
}

/* ============================================================
   M17: BULK-EDITOR ("Redigér billeder") — Photoroom-style overlay.
   Genbruger .ed-*-udtrykkene (create.css) + .btn. Minimal ny CSS.
   ============================================================ */

/* "Redigér billeder"-knappen i Latest images-headeren */
.cr-latest-head { display: flex; align-items: center; gap: .8rem; margin: 0 0 .8rem; }
.cr-latest-head h2 { margin: 0; }
.cr-latest-head #editBatchBtn { margin-left: auto; cursor: pointer; }

/* M18: selvstændig "Rediger dine egne billeder"-indgang (uden for #jobForm) */
.bulk-own-entry {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem .9rem;
  margin: 0 0 1rem; padding: .7rem .9rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-media);
}
.bulk-own-entry .bulk-own-lead { color: var(--dim); font-size: .86rem; }
.bulk-own-entry #editOwnBtn { cursor: pointer; margin-left: auto; }
.bulk-own-entry .bulk-own-msg { color: #e08b8b; font-size: .8rem; flex-basis: 100%; }
.bulk-own-entry .bulk-own-msg:empty { display: none; }

/* Overlayet er åbent: lås baggrunds-scroll, dæmp fx3d-laget (R8-approksimation) */
body.bulk-editing { overflow: hidden; }
body.bulk-editing .fx-layer { display: none; }

/* Fælles fuldskærms-flade for både gitter- og drill-tilstand */
.bulk-ed, .bulk-drill {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}
.bulk-ed[hidden], .bulk-drill[hidden] { display: none; }
.bulk-drill { z-index: 61; } /* drill ligger OVER gitteret */

.bulk-top {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem 1.1rem calc(.75rem); border-bottom: 1px solid var(--line);
  min-height: 56px; background: var(--bg-2);
}
.bulk-top h2 { font-size: 1.02rem; margin: 0; letter-spacing: -.01em; flex: 0 0 auto; }
.bulk-top .bulk-status { color: var(--dim); font-size: .82rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-top .bulk-status.error { color: #e08b8b; }
.bulk-top .btn { cursor: pointer; font: inherit; flex: 0 0 auto; }
/* M18: Add images + Tilbage + Download grupperes til højre (auto-margin på det første) */
.bulk-top #bulkAdd { margin-left: auto; }
.bulk-drill .bulk-top #drillDone { margin-left: auto; } /* drill har ikke #bulkAdd */
.bulk-drill-hint { margin: 0 auto 0 0; }

.bulk-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; }

/* Bulk-panelet (venstre): genbruger .ed-panel-look men uden sticky/grid-column-3 */
.bulk-ed .ed-panel {
  grid-column: auto; position: static; top: auto;
  border: none; border-right: 1px solid var(--line); border-radius: 0;
  overflow-y: auto; min-height: 0;
}
.bulk-panel.busy { opacity: .6; pointer-events: none; }

/* Custom bg-swatch (NOT .ed-swatch-custom — den klasse ejes af drill-editorens querySelector) */
.bk-swatch-custom { display: block; overflow: hidden; background: conic-gradient(#e05c5c, #e0c05c, #7bc06a, #5c9fe0, #a45ce0, #e05c5c); }
.bk-swatch-custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; display: block; }
.bk-swatch-custom.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }

.bk-poscustom { display: grid; gap: .7rem; padding: .1rem 0 .2rem; }

/* Gitteret (højre) — responsivt, produkter vist med contain så framing er synlig */
.bulk-grid {
  overflow-y: auto; min-height: 0; padding: 1.25rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 1.25rem; align-content: start;
}
/* "Afslør alle på én gang" (Joachim 8/7): dæmp kortene mens ALLE fritlægges, løft ved samlet reveal */
.bulk-grid.cutting .bulk-item { opacity: .4; pointer-events: none; transition: opacity .25s ease; }
.bulk-spin { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: bkspin .8s linear infinite; }
.bulk-spin[hidden] { display: none; }
@keyframes bkspin { to { transform: rotate(360deg); } }
/* aspect-ratio SKAL sidde på figuren (blok), IKKE på <img> — på et <img> med ikke-kvadratisk
   kilde ignoreres den og kortet bliver aflangt. Figuren giver ALTID et 1:1 felt; thumbnailet
   vises med contain indeni (letterbox = checkerboard), så gitteret er ensartet uanset outputformat. */
.bulk-item {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-media);
  overflow: hidden; cursor: pointer; padding: 0;
  aspect-ratio: var(--bulk-ar, 1); /* framens form følger det valgte Størrelse-format (Original=1:1) */
  background: repeating-conic-gradient(#7d766c 0% 25%, #635d54 0% 50%) 0 0 / 16px 16px;
  transition: border-color .15s, transform .15s;
}
.bulk-item:hover, .bulk-item:focus-visible { border-color: var(--accent); }
.bulk-item img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.bulk-badge {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .3rem .22rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--accent); color: var(--text); font-size: .72rem; font-weight: 600;
}
.bulk-badge[hidden] { display: none; }
.bulk-badge-x {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px;
  border: none; background: color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--text); font: inherit; font-size: .8rem; line-height: 1; cursor: pointer;
}
.bulk-badge-x:hover, .bulk-badge-x:focus-visible { background: var(--accent); color: var(--accent-ink, #1b130b); }

/* Custom px-mål i Størrelse-sektionen */
.bk-fmtcustom { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.bk-fmtcustom[hidden] { display: none; }
.bk-num { display: inline-flex; align-items: center; gap: .35rem; flex: 1; min-width: 0; color: var(--dim, #b8ad9d); font-size: .8rem; }
.bk-num input {
  width: 100%; min-width: 0; padding: .4rem .5rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font: inherit; font-variant-numeric: tabular-nums;
}
.bk-num input:focus-visible { outline: none; border-color: var(--accent); }
.bk-fmtx { color: var(--dim, #b8ad9d); font-size: .85rem; }
.bk-fmtunit { color: var(--dim, #b8ad9d); font-size: .8rem; }

/* Drill-in: editor-motoren (edStage + edPanel) side om side */
.bulk-drill-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; min-height: 0; padding: 1rem; overflow: hidden; }
#bulkDrill .ed-stage { grid-column: auto; min-height: 0; }
#bulkDrill .ed-panel { grid-column: auto; position: static; top: auto; overflow-y: auto; min-height: 0; }
/* Exit sker via #drillDone (bulk.js's kontrakt) — editorens egen back/replace + upscale skjules
   på batch (upscale kræver credit-broen der ikke er wiret her) */
#bulkDrill #edBack, #bulkDrill #edReplace, #bulkDrill #upscaleRow { display: none; }

@media (max-width: 900px) {
  .bulk-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .bulk-ed .ed-panel { border-right: none; border-bottom: 1px solid var(--line); max-height: 45vh; }
  .bulk-drill-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  #bulkDrill .ed-panel { max-height: 42vh; }
}


/* ---------- Batch-retningsvælger (milepæl 4, Joachim 6/7) ---------- */
.batch-dir {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem .8rem;
  margin-bottom: .8rem;
}
#editBatchBtn { margin-left: auto; } /* skub bulk-editor-indgangen til højre (Joachim 8/7) */
.bd-label { color: var(--dim); font-size: .85rem; font-weight: 600; }
.bd-opts { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bd-opt {
  border: 0;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: .85rem;
  padding: .45rem .95rem;
  cursor: pointer;
}
.bd-opt em { font-style: normal; opacity: .65; font-size: .78rem; }
.bd-opt[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.bd-opt[aria-pressed="true"] em { opacity: .8; }
.bd-opt:disabled { opacity: .45; cursor: not-allowed; }
.bd-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Swatch-vælger (genbrug af tidligere swatches) ---------- */
.swpick {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.2rem 1.2rem 1rem;
  width: min(560px, 92vw);
}
.swpick::backdrop { background: rgba(10, 8, 6, .7); }
.swpick-head h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.swpick-sub { margin: 0 0 .9rem; color: var(--dim); font-size: .85rem; }
.swpick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .6rem;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}
.swpick-item {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  color: var(--dim);
  font: inherit;
  cursor: pointer;
}
.swpick-item:hover, .swpick-item:focus-visible { border-color: var(--accent); }
.swpick-item.is-picked { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.swpick-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.swpick-name {
  font-size: .68rem;
  padding: 0 .35rem .35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swpick-status { min-height: 1.1em; margin: .5rem 0 0; color: var(--dim); font-size: .8rem; }
.swpick-foot { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .7rem; flex-wrap: wrap; }