:root{
      --bg:#f4f5f7; --panel:#fff; --text:#16181d; --muted:#69707d;
      --line:#d8dde6; --accent:#111827; --danger:#b42318; --soft:#f8fafc;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:var(--bg);color:var(--text)
    }
    .app{display:grid;grid-template-columns:480px minmax(0,1fr);min-height:100vh}
    aside{
      background:var(--panel);border-right:1px solid var(--line);
      padding:22px;position:sticky;top:0;height:auto;overflow:auto
    }
    main{padding:28px;overflow:auto}
    h1{font-size:21px;margin:0 0 6px}
    .sub{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:18px}

    .drop{
      display:block;
      width:100%;
      border:2px dashed #cbd5e1;
      border-radius:12px;
      padding:22px 16px;
      text-align:center;
      background:#fafbfc;
      cursor:pointer;
      transition:border-color .15s ease, background-color .15s ease;
      margin-bottom:14px;
    }
    .drop:hover,.drop.drag{
      border-color:#64748b;
      background:#f4f6f8;
    }
    .drop-icon{
      display:none;
    }
    .drop strong{
      display:block;
      margin-bottom:6px;
      font-size:14px;
      line-height:1.3;
    }
    .drop span{
      display:block;
      font-size:12px;
      color:var(--muted);
      line-height:1.45;
    }
    input[type=file]{display:none}

    .price-card{
      margin:0 0 14px;padding:14px;border-radius:12px;background:#f7f8fa;
      border:1px solid #e7eaf0;font-size:12px
    }
    .price-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
    .price-head strong{font-size:13px}
    .price-total{font-size:18px;font-weight:800;white-space:nowrap}
    .price-lines{display:grid;gap:5px;color:var(--muted)}
    .price-line{display:flex;justify-content:space-between;gap:10px}
    .price-note{margin-top:8px;padding-top:8px;border-top:1px solid #e2e6ec;color:var(--muted);line-height:1.4}
    .price-warning{color:#b54708;font-weight:700}

    .price-sheet-wrap{position:relative;margin:0 0 14px}
    .price-sheet-button{
      width:100%;
      text-align:left;
      background:#f7f8fa;
      color:var(--text);
      border:1px solid #e7eaf0;
      padding:12px 14px;
      border-radius:10px;
      font-size:13px;
      font-weight:700;
    }
    .price-sheet-button::after{
      content:"Visa";
      float:right;
      color:var(--muted);
      font-size:11px;
      font-weight:600;
    }
    .price-sheet-button.open::after{content:"Dölj"}
    .price-sheet-popup{
      display:none;
      position:fixed;
      left:20px;
      top:20px;
      width:min(760px,calc(100vw - 40px));
      max-height:none;
      overflow-y:auto;
      overflow-x:hidden;
      z-index:99999;
      border:1px solid #dfe4ea;
      border-radius:12px;
      background:#fff;
      box-shadow:0 16px 40px rgba(0,0,0,.18);
      padding:12px;
    }
    .price-sheet-popup.open{display:block}
    .price-sheet-scroll{overflow-x:hidden;overflow-y:visible}
    .price-table{
      width:100%;
      table-layout:fixed;
      border-collapse:collapse;
      min-width:0;
      font-size:10px;
    }
    .price-table th,.price-table td{
      border:1px solid #dfe4ea;
      padding:6px 7px;
      text-align:right;
      white-space:normal;
      overflow-wrap:anywhere;
    }
    .price-table th:first-child,.price-table td:first-child{text-align:left}
    .price-table thead th{
      background:#f4f6f8;
      font-weight:700;
    }
    .price-sheet-note{
      margin-top:9px;
      color:var(--muted);
      font-size:11px;
      line-height:1.45;
    }

    .buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
    button{border:0;border-radius:10px;padding:11px 12px;font-weight:700;cursor:pointer}
    .primary{background:var(--accent);color:#fff}
    .secondary{background:#eef0f3;color:#17191e}
    button:disabled{opacity:.6;cursor:default}

    .stats{
      font-size:12px;color:var(--muted);padding:12px;border-radius:10px;background:#f7f8fa
    }

    .list{margin-top:16px}
    .item{
      padding:12px;border:1px solid #e7eaf0;border-radius:12px;margin-bottom:10px;background:#fff;
      display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px
    }
    .item img{width:62px;height:62px;object-fit:cover;border-radius:8px;background:#eee}
    .item .name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .item .meta{font-size:11px;color:var(--muted);margin:3px 0 8px}
    .item-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
    .item-controls label{font-size:10px;color:var(--muted)}
    .item-controls input{
      width:100%;margin-top:5px;padding:7px;font-size:12px;border:1px solid var(--line);
      border-radius:8px;background:#fff;color:var(--text)
    }
    .item-actions{display:flex;justify-content:flex-end;margin-top:8px}
    .item-actions button{padding:5px 8px;background:transparent;color:var(--danger);font-size:12px}

    .toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
    .toolbar .note{font-size:12px;color:var(--muted)}
    .sheet-wrap{display:flex;justify-content:center;min-width:max-content}
    .sheet{
      width:min(62vw,760px);
      background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.12);
      position:relative;overflow:hidden;min-height:0
    }
    .sheet-inner{position:absolute;inset:0}
    .thumb{
      position:absolute;overflow:hidden;background:transparent;border:0
    }
    .thumb img{position:absolute;display:block;object-fit:contain;max-width:none!important;max-height:none;inset:0;display:grid;place-items:center;color:#9aa1ad;font-size:14px
    }
    .sheet-label{
      position:absolute;right:8px;bottom:6px;font-size:10px;color:#9aa1ad;
      background:#fff;padding:2px 5px;border-radius:4px
    }

    @media(max-width:900px){
      .app{grid-template-columns:1fr}
      aside{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}
      main{padding:16px}
      .sheet{width:100%}
    }
  
    .mode-switch{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      margin:0 0 14px;
    }
    .mode-btn{
      border:1px solid var(--line);
      background:#f7f8fa;
      color:var(--text);
      padding:11px 12px;
      border-radius:10px;
      font-weight:700;
      cursor:pointer;
    }
    .mode-btn.active{
      background:var(--accent);
      color:#fff;
      border-color:var(--accent);
    }
    .transfer-controls{
      display:none;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin:0 0 14px;
      padding:12px;
      background:#f7f8fa;
      border:1px solid #e7eaf0;
      border-radius:12px;
    }
    .transfer-controls.active{display:grid}
    .transfer-controls label{
      font-size:11px;
      color:var(--muted);
    }
    .transfer-controls select,
    .transfer-controls input{
      width:100%;
      margin-top:5px;
      padding:9px;
      border:1px solid var(--line);
      border-radius:8px;
      background:#fff;
      color:var(--text);
    }


    .transfer-price-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 220px;
      gap:18px;
      align-items:start;
      width:100%;
      min-width:0;
    }
    .transfer-price-main h3{
      margin:0 0 6px;
      font-size:16px;
      font-weight:800;
    }
    .transfer-price-section{
      margin:0 0 16px;
    }
    .transfer-price-title{
      font-size:13px;
      font-weight:800;
      text-decoration:underline;
      margin:0 0 4px;
    }
    .transfer-price-mini{
      width:100%;
      table-layout:fixed;
      border-collapse:collapse;
      font-size:11px;
    }
    .transfer-price-mini th,
    .transfer-price-mini td{
      border:0;
      padding:3px 7px;
      text-align:right;
      white-space:nowrap;
    }
    .transfer-price-mini th:first-child,
    .transfer-price-mini td:first-child{
      text-align:left;
      font-weight:700;
    }
    .transfer-price-mini thead th{
      background:transparent;
      font-weight:700;
    }
    .transfer-price-side{
      font-size:11px;
      line-height:1.4;
    }
    .transfer-price-side h4{
      margin:0 0 4px;
      font-size:12px;
      text-decoration:underline;
    }
    .transfer-side-box{
      margin-bottom:14px;
    }
    .transfer-side-table{
      width:100%;
      border-collapse:collapse;
    }
    .transfer-side-table td{
      padding:2px 0;
      border:0;
      text-align:left;
    }
    .transfer-side-table td:last-child{
      text-align:right;
      white-space:nowrap;
    }
    .transfer-bottom-box{
      margin-top:12px;
      border-top:1px solid #dfe4ea;
      padding-top:10px;
      font-size:11px;
      line-height:1.45;
    }
    @media(max-width:900px){
      .transfer-price-layout{
        grid-template-columns:1fr;
        min-width:0;
      }
    }


/* Responsive layout fix: prevent horizontal scrolling in iframe layouts */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.app,
.layout,
.workspace,
.builder,
.dtf-app,
main {
  min-width: 0;
  max-width: 100%;
}

.sidebar,
.left-panel,
.controls,
.panel-left,
aside {
  min-width: 0;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
}

.preview,
.preview-panel,
.main-panel,
.content,
.sheet-wrap,
.sheet-area {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

img,
canvas,
svg {
  max-width: 100%;
}

@media (max-width: 1100px) {
  .app,
  .layout,
  .workspace,
  .builder,
  .dtf-app {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr) !important;
  }

  .sidebar,
  .left-panel,
  .controls,
  .panel-left,
  aside {
    max-width: 420px;
  }
}

@media (max-width: 820px) {
  .app,
  .layout,
  .workspace,
  .builder,
  .dtf-app {
    grid-template-columns: 1fr !important;
  }

  .sidebar,
  .left-panel,
  .controls,
  .panel-left,
  aside {
    max-width: none;
  }
}


/* Price popup must always render above the preview workspace */
#priceSheetPopup,
.price-sheet-popup {
  position: fixed !important;
  z-index: 2147483000 !important;
  isolation: isolate;
}

#priceSheetPopup .price-sheet,
.price-sheet-popup .price-sheet {
  position: relative;
  z-index: 2147483001 !important;
}

/* Keep preview-related layers below modal/popup UI */
.preview,
.preview-panel,
.sheet-wrap,
.sheet-area,
.sheet,
.thumb,
.main-panel {
  z-index: auto !important;
}



/* Root-level price popup: moved to <body> by JS so it can overlay both columns */
body > #priceSheetPopup {
  position: fixed !important;
  z-index: 2147483646 !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box;
}

body > #priceSheetPopup * {
  box-sizing: border-box;
}



/* Final popup fix: popup is a direct body child and must overlay the whole app */
body > #priceSheetPopup{
  position:fixed !important;
  z-index:2147483647 !important;
  transform:none !important;
  contain:none !important;
  isolation:isolate !important;
}


/* White-heavy artwork preview aid: preview only, never exported */
.white-heavy-preview {
  background: #eceff2 !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}



/* Light-grey aid for white-heavy artwork in preview only */
.white-heavy-preview,
.white-heavy-preview-wrap {
  background-color: #e5e7eb !important;
}

.white-heavy-preview {
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
}



/* Correct white-art preview backing */
.thumb.white-heavy-preview-wrap {
  background: #e5e7eb !important;
  border-radius: 2px;
}

.thumb.white-heavy-preview-wrap > img {
  background: transparent !important;
}



/* Left menu should grow with its content; no internal height limit */
.sidebar,
.left-panel,
.controls,
.panel-left,
aside,
.app > :first-child,
.layout > :first-child,
.workspace > :first-child,
.builder > :first-child,
.dtf-app > :first-child {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}







/* Checkerboard is now the only transparency/white-art background aid */
.white-heavy-preview,
.white-heavy-preview-wrap,
.thumb.white-heavy-preview-wrap,
.thumb.white-heavy-preview-wrap > img {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}



.project-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}

.secondary-project-btn{
  min-height:48px;
  border:1px solid #d8dee8;
  border-radius:12px;
  background:#fff;
  color:#111827;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

.secondary-project-btn:hover{
  background:#f8fafc;
}

.secondary-project-btn:disabled{
  opacity:.6;
  cursor:wait;
}

@media(max-width:520px){
  .project-actions{
    grid-template-columns:1fr;
  }
}





/* Center only the preview sheet, without changing the main grid */
html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

.main,
.main-content,
.content,
.workspace,
.app,
.layout,
.preview,
.preview-panel {
  min-width: 0 !important;
  max-width: 100% !important;
}

.preview,
.preview-panel {
  overflow-x: hidden !important;
}

/* The preview sheet itself is centered inside its available column */
#sheet {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}

/* Keep the sheet contents constrained to the sheet */
#sheetInner {
  max-width: 100% !important;
}






.app { column-gap: 6px !important; }


/* Precise spacing between menu and preview */
.app {
  column-gap: 6px !important;
}



/* Match the left menu to the 480px grid column */
.app > aside {
  width: 100%;
  max-width: 480px !important;
  box-sizing: border-box;
}



/* Spaced dotted outline around each placed image in the preview only */
#sheet .thumb {
  outline: none !important;
}

#sheet .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    repeating-linear-gradient(to right,
      rgba(17,24,39,.65) 0 2px,
      transparent 2px 7px) top left / 100% 1px no-repeat,
    repeating-linear-gradient(to right,
      rgba(17,24,39,.65) 0 2px,
      transparent 2px 7px) bottom left / 100% 1px no-repeat,
    repeating-linear-gradient(to bottom,
      rgba(17,24,39,.65) 0 2px,
      transparent 2px 7px) top left / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom,
      rgba(17,24,39,.65) 0 2px,
      transparent 2px 7px) top right / 1px 100% no-repeat;
}



/* Upload gallery */
#files{display:none!important}
.gallery-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:24px}.gallery-modal.open{display:flex}.gallery-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(2px)}.gallery-dialog{position:relative;z-index:1;width:min(980px,calc(100vw - 32px));max-height:min(820px,calc(100vh - 32px));overflow:hidden;background:#fff;border:1px solid #dbe1e8;border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.24);display:flex;flex-direction:column}.gallery-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px 14px;border-bottom:1px solid #e5e7eb}.gallery-header h2{margin:0 0 4px;font-size:20px}.gallery-sub{color:#64748b;font-size:13px}.gallery-close{border:0;background:transparent;font-size:30px;line-height:1;cursor:pointer;padding:0 4px;color:#475569}.gallery-toolbar{display:flex;gap:10px;padding:14px 22px;border-bottom:1px solid #e5e7eb}.gallery-upload-btn,.gallery-add-btn{border:0;border-radius:10px;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer}.gallery-upload-btn{background:#111827;color:#fff}.gallery-add-btn{background:#2563eb;color:#fff}.gallery-add-btn:disabled{opacity:.45;cursor:not-allowed}.gallery-grid{padding:18px 22px 22px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:14px;min-height:220px}.gallery-card{position:relative;border:2px solid transparent;border-radius:12px;background:#f8fafc;overflow:hidden}.gallery-card.selected{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.12)}.gallery-card.is-disabled{opacity:.68}.gallery-card.is-disabled .gallery-select{cursor:not-allowed}.gallery-card.is-disabled .gallery-name::after{content:" • Endast DTF";color:#b45309;font-weight:600}.gallery-select{display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;text-align:left}.gallery-thumb{height:120px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%),#f8fafc;background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.gallery-thumb img{width:100%;height:100%;object-fit:contain}.gallery-file-icon{font-weight:800;font-size:18px;color:#475569}.gallery-name{padding:9px 10px 11px;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gallery-delete{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#334155;font-size:18px;line-height:1;cursor:pointer;box-shadow:0 1px 5px rgba(15,23,42,.18)}.gallery-empty,.gallery-loading{padding:36px 22px;color:#64748b;text-align:center}@media(max-width:600px){.gallery-modal{padding:8px}.gallery-dialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:10px}}


/* Gallery delete button: centered red X */
.gallery-delete{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  text-align:center !important;
  color:#dc2626 !important;
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1 !important;
}



/* Checkerboard only on the sheet preview itself */
.sheet-wrap,
main,
.preview,
.preview-panel,
.sheet-area,
.preview-canvas,
.preview-surface {
  background: transparent !important;
  background-image: none !important;
}

#sheet {
  background-color: #f3f4f6 !important;
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.045) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.045) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.045) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.045) 75%) !important;
  background-size: 24px 24px !important;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0 !important;
}



/* Gallery upload area styled like the original upload box */
.gallery-toolbar{
  padding:16px 22px 14px !important;
  border-bottom:1px solid #e5e7eb;
  display:block !important;
}

.gallery-upload-btn{
  width:100% !important;
  min-height:108px;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:20px 16px !important;
  border:2px dashed #cbd5e1 !important;
  border-radius:12px !important;
  background:#fafbfc !important;
  color:#111827 !important;
  cursor:pointer;
  text-align:center;
  transition:border-color .15s ease, background-color .15s ease;
}

.gallery-upload-btn:hover{
  border-color:#64748b !important;
  background:#f4f6f8 !important;
}

.gallery-upload-btn strong{
  display:block;
  font-size:15px;
  font-weight:800;
}

.gallery-upload-btn span{
  display:block;
  font-size:12px;
  font-weight:500;
  color:#64748b;
}

.gallery-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:14px 22px 18px;
  border-top:1px solid #e5e7eb;
  background:#fff;
}

.gallery-footer .gallery-add-btn{
  min-width:150px;
  padding:11px 18px;
}



.gallery-upload-btn.drag{
  border-color:#2563eb !important;
  background:#eff6ff !important;
}



.dpi-value{
  font-weight:700;
  color:#334155;
}



.dpi-value{
  transition:color .12s ease;
}



/* Print-sheet heading above preview */
.print-sheet-header{
  width:min(62vw,760px);
  max-width:100%;
  margin:0 auto 12px;
}

.print-sheet-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
  color:#1f2937;
}

.print-sheet-title{
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}

.ark-build-version{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:3px 7px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#f8fafc;
  color:#64748b;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
  vertical-align:2px;
}

.print-sheet-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  margin-left:5px;
  border:1px solid #64748b;
  border-radius:50%;
  font-size:12px;
  line-height:1;
  font-weight:600;
  color:#475569;
  vertical-align:1px;
}

.print-sheet-dimensions{
  font-size:16px;
  font-weight:600;
  text-align:right;
  white-space:nowrap;
}

.print-sheet-width-rule{
  display:flex;
  align-items:center;
  width:100%;
  color:#334155;
}

.rule-line{
  position:relative;
  height:1px;
  background:#94a3b8;
  flex:1;
}

.rule-line:first-child::before,
.rule-line:last-child::after{
  content:"";
  position:absolute;
  top:-10px;
  width:1px;
  height:20px;
  background:#94a3b8;
}

.rule-line:first-child::before{left:0;}
.rule-line:last-child::after{right:0;}

.rule-width{
  padding:0 12px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}

#sheetLabel{
  display:none !important;
}

@media(max-width:900px){
  .print-sheet-header{width:100%;}
}

@media(max-width:560px){
  .print-sheet-header-row{align-items:flex-start;}
  .print-sheet-title,
  .print-sheet-dimensions{font-size:14px;}
}




/* TRYCKARK header must match the preview sheet width exactly */
.preview-header,
.tryckark-header,
.print-sheet-header {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Give only the text breathing room; do not shrink the ruler */
#previewDimensions {
  box-sizing: border-box;
  padding-right: 8px;
  white-space: nowrap;
}

.preview-width-line,
.tryckark-width-line,
.print-sheet-width-line {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep the preview wrapper and header on the same available width */
main > .preview-header,
main > .tryckark-header,
main > .print-sheet-header,
main > .sheet-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}



.auto-fit-option{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:10px;
  padding:9px 10px;
  border:1px solid #e2e8f0;
  border-radius:9px;
  background:#f8fafc;
  cursor:pointer;
}

.auto-fit-option input{
  width:16px;
  height:16px;
  margin:2px 0 0;
  flex:0 0 auto;
}

.auto-fit-option span{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.auto-fit-option strong{
  font-size:11px;
  color:#334155;
}

.auto-fit-option small{
  font-size:10px;
  line-height:1.35;
  color:#64748b;
}



.used-fit-size{
  margin-top:10px;
  padding:8px 10px;
  border-radius:9px;
  background:#f8fafc;
  border:1px dashed #cbd5e1;
  font-size:12px;
  line-height:1.4;
  color:#475569;
}

.used-fit-size strong{
  color:#0f172a;
}


/* Collapsible price calculation */
.price-card{
  padding:0 !important;
  overflow:hidden;
}

.price-summary{
  width:100%;
  min-height:62px;
  padding:14px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
  text-align:left;
}

.price-summary:hover{
  background:#f1f4f7;
}

.price-summary-label{
  font-size:13px;
  font-weight:700;
}

.price-summary-right{
  display:flex;
  align-items:center;
  gap:9px;
  margin-left:auto;
}

.price-summary .price-total{
  font-size:18px;
  font-weight:800;
  white-space:nowrap;
}

.price-toggle-text{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
}

.price-toggle-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  font-size:18px;
  line-height:1;
  color:var(--muted);
  transition:transform .15s ease;
}

.price-summary[aria-expanded="true"] .price-toggle-icon{
  transform:rotate(180deg);
}

.price-details{
  padding:0 14px 14px;
  border-top:1px solid #e2e6ec;
}

.price-details[hidden]{
  display:none !important;
}

.price-details .price-lines{
  padding-top:12px;
}



/* Clickable source image thumbnail */
.source-image-thumb{
  cursor:zoom-in;
}

/* Original source preview popup */
.source-preview-modal{
  position:fixed;
  inset:0;
  z-index:100100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.source-preview-modal.open{
  display:flex;
}

.source-preview-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(2px);
}

.source-preview-dialog{
  position:relative;
  z-index:1;
  width:min(1100px,calc(100vw - 40px));
  max-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 80px rgba(15,23,42,.3);
}

.source-preview-header{
  min-height:58px;
  padding:12px 16px 12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid #e2e8f0;
}

.source-preview-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
  font-weight:800;
  color:#0f172a;
}

.source-preview-close{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:999px;
  background:#f1f5f9;
  color:#dc2626;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

.source-preview-content{
  min-height:200px;
  overflow:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:
    linear-gradient(45deg,#e5e7eb 25%,transparent 25%),
    linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e5e7eb 75%),
    linear-gradient(-45deg,transparent 75%,#e5e7eb 75%),
    #f8fafc;
  background-size:24px 24px;
  background-position:0 0,0 12px,12px -12px,-12px 0;
}

.source-preview-content img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 150px);
  width:auto;
  height:auto;
  object-fit:contain;
}

@media(max-width:600px){
  .source-preview-modal{
    padding:8px;
  }

  .source-preview-dialog{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
  }

  .source-preview-content{
    padding:10px;
  }
}



/* Logged-in account bar */
.account-bar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  margin-bottom:9px;
}
.account-name{
  max-width:210px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:700;
  color:#64748b;
}
.logout-form{margin:0}
.logout-btn{
  min-height:auto !important;
  padding:5px 9px !important;
  border:1px solid #d7dde5 !important;
  border-radius:7px !important;
  background:#fff !important;
  color:#475569 !important;
  font-size:10px !important;
  font-weight:700 !important;
  cursor:pointer;
}
.logout-btn:hover{background:#f8fafc !important}


/* Optional login popup */
.guest-name{color:#64748b;}
.login-modal{
  position:fixed; inset:0; z-index:100300; display:none;
  align-items:center; justify-content:center; padding:20px;
}
.login-modal.open{display:flex;}
.login-backdrop{
  position:absolute; inset:0; background:rgba(15,23,42,.62);
  backdrop-filter:blur(2px);
}
.login-dialog{
  position:relative; z-index:1; width:min(430px,calc(100vw - 32px));
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 24px 80px rgba(15,23,42,.32);
}
.login-dialog-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 18px 14px 20px; border-bottom:1px solid #e2e8f0;
}
.login-dialog-header h2{margin:0 0 4px;font-size:20px;}
.login-subtitle{font-size:12px;line-height:1.45;color:#64748b;}
.login-close{
  flex:0 0 auto; width:36px; height:36px; border:0; border-radius:999px;
  background:#f1f5f9; color:#dc2626; font-size:26px; line-height:1; cursor:pointer;
}
.login-form{display:flex;flex-direction:column;gap:13px;padding:18px 20px 20px;}
.login-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#334155;}
.login-form input{
  width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:9px;
  padding:10px 11px;font:inherit;font-weight:400;background:#fff;color:#0f172a;
}
.login-submit{
  margin-top:3px;border:0;border-radius:9px;padding:11px 14px;
  background:#111827;color:#fff;font-weight:800;cursor:pointer;
}
.login-submit:disabled{opacity:.65;cursor:wait;}
.login-message{min-height:18px;font-size:12px;line-height:1.4;}
.login-message.error{color:#b91c1c;}
.login-message.success{color:#15803d;}


/* Account registration + profile */
.account-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:12px 20px 0;
  background:#fff;
}

.account-tab{
  min-height:39px;
  border:1px solid #dbe2ea;
  border-radius:9px;
  background:#f8fafc;
  color:#64748b;
  font:700 12px/1.2 system-ui,sans-serif;
  cursor:pointer;
}

.account-tab.active{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

.account-panel[hidden]{
  display:none !important;
}

.register-note{
  padding:9px 10px;
  border-radius:8px;
  background:#f8fafc;
  color:#64748b;
  font-size:11px;
  line-height:1.45;
}

.profile-dialog{
  width:min(560px,calc(100vw - 32px)) !important;
  max-width:560px !important;
  max-height:calc(100vh - 40px);
  overflow:auto !important;
}

.profile-form{
  gap:12px !important;
}

.profile-account-readonly{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.profile-account-readonly > div{
  min-width:0;
  padding:9px 10px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f8fafc;
}

.profile-account-readonly span{
  display:block;
  margin-bottom:3px;
  color:#64748b;
  font-size:10px;
  font-weight:700;
}

.profile-account-readonly strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#0f172a;
  font-size:12px;
}

.profile-section-title{
  margin-top:3px;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
}

.profile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}

.profile-grid .profile-wide{
  grid-column:1/-1;
}

.account-bar .profile-btn{
  margin-left:auto;
}

@media(max-width:560px){
  .profile-account-readonly,
  .profile-grid{
    grid-template-columns:1fr;
  }
  .profile-grid .profile-wide{
    grid-column:auto;
  }
}


/* Keep TRYCKARK header/ruler exactly the same width as the preview sheet. */
@media (min-width: 901px) {
  main > .print-sheet-header {
    box-sizing: border-box !important;
    width: min(62vw, 760px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main > .print-sheet-header .print-sheet-width-rule {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  main > .print-sheet-header {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* Only the selected account tab may be visible. This must override
   the generic .login-form { display:flex !important } modal rule. */
.login-modal .account-panel[hidden] {
  display: none !important;
}
.login-modal .account-panel:not([hidden]) {
  display: flex !important;
}


/* Checkout */
.checkout-button{border:0;border-radius:9px;padding:11px 14px;background:#15803d;color:#fff;font-weight:800;cursor:pointer}
.checkout-button:disabled{opacity:.5;cursor:not-allowed}
.checkout-modal[hidden]{display:none!important}
.checkout-modal{position:fixed;inset:0;z-index:2147482500;display:flex;align-items:center;justify-content:center;padding:20px}
.checkout-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(3px)}
.checkout-dialog{position:relative;z-index:1;width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 90px rgba(15,23,42,.34);overflow:hidden}
.checkout-header{display:flex;justify-content:space-between;gap:18px;padding:18px 20px 15px;border-bottom:1px solid #e2e8f0}
.checkout-header h2{margin:0 0 4px;font-size:21px;color:#111827}.checkout-subtitle{font-size:12px;color:#64748b;line-height:1.45}
.checkout-close{width:36px;height:36px;flex:0 0 auto;border:0;border-radius:999px;background:#f1f5f9;color:#dc2626;font-size:25px;font-weight:700;cursor:pointer}
.checkout-body{overflow:auto;padding:18px 20px 20px}
.checkout-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}
.checkout-summary-item{padding:11px 12px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;min-width:0}
.checkout-summary-item span{display:block;font-size:10px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}.checkout-summary-item strong{display:block;font-size:14px;color:#0f172a;overflow-wrap:anywhere}
.checkout-summary-item.checkout-total{background:#f0fdf4;border-color:#bbf7d0}.checkout-summary-item.checkout-total strong{font-size:18px;color:#166534}
.checkout-form h3{margin:0 0 12px;font-size:14px}.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.checkout-wide{grid-column:1/-1}
.checkout-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#334155}.checkout-form input[type=text],.checkout-form input[type=tel],.checkout-form select,.checkout-form textarea{box-sizing:border-box;width:100%;border:1px solid #cbd5e1;border-radius:9px;padding:10px 11px;background:#fff;font:400 14px/1.3 system-ui,sans-serif}.checkout-form textarea{resize:vertical;min-height:72px}.checkout-note-label{margin-top:12px}
.checkout-confirm{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:9px!important;margin:15px 0 12px;padding:10px;border-radius:9px;background:#f8fafc}.checkout-confirm input{margin-top:2px}.checkout-confirm span{font-weight:600;line-height:1.4}
.checkout-submit{width:100%;min-height:44px;border:0;border-radius:9px;background:#111827;color:#fff;font-weight:800;cursor:pointer}.checkout-submit:disabled{opacity:.55;cursor:wait}.checkout-message{min-height:18px;margin:0 0 8px;font-size:12px}.checkout-message.error{color:#b91c1c}.checkout-message.success{color:#15803d}
.checkout-success{text-align:center;padding:24px 8px}.checkout-success-icon{width:52px;height:52px;margin:0 auto 12px;border-radius:999px;display:grid;place-items:center;background:#dcfce7;color:#15803d;font-size:28px;font-weight:900}.checkout-success h3{margin:0 0 8px}.checkout-success p{margin:0 0 18px;color:#475569}
body.checkout-open{overflow:hidden}

.checkout-admin-user-note{display:block;margin-top:2px;font-size:11px;line-height:1.4;font-weight:500;color:#64748b}
@media(max-width:620px){.checkout-summary,.checkout-grid{grid-template-columns:1fr}.checkout-wide{grid-column:auto}}

/* Precisely centered popup close icons.
   Draw the X geometrically instead of relying on the font glyph baseline. */
.login-close,
.source-preview-close,
.checkout-close,
.gallery-close {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
}

.login-close::before,
.login-close::after,
.source-preview-close::before,
.source-preview-close::after,
.checkout-close::before,
.checkout-close::after,
.gallery-close::before,
.gallery-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 50%;
}

.login-close::before,
.source-preview-close::before,
.checkout-close::before,
.gallery-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.login-close::after,
.source-preview-close::after,
.checkout-close::after,
.gallery-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.checkout-email-sent{color:#166534;font-weight:600;}
.checkout-email-warning{color:#9a3412;font-weight:600;}


/* Order history */
.orders-modal[hidden]{display:none!important}
.orders-modal{position:fixed;inset:0;z-index:2147482600;display:flex;align-items:center;justify-content:center;padding:20px}
.orders-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(3px)}
.orders-dialog{position:relative;z-index:1;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 90px rgba(15,23,42,.34);overflow:hidden}
.orders-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px 15px;border-bottom:1px solid #e2e8f0}
.orders-header h2{margin:0 0 4px;font-size:21px;color:#111827}.orders-subtitle{font-size:12px;color:#64748b;line-height:1.45}
.orders-close{width:36px;height:36px;flex:0 0 auto;border:0;border-radius:999px;background:#f1f5f9;color:#dc2626;cursor:pointer}
.orders-body{overflow:auto;padding:16px 20px 20px}.orders-list{display:grid;gap:10px}.orders-loading,.orders-empty{padding:28px 12px;text-align:center;color:#64748b;font-size:13px}.orders-message{min-height:0;margin-bottom:10px;font-size:12px}.orders-message:empty{display:none}.orders-message.error{display:block;color:#b91c1c}
.order-history-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.order-history-main{min-width:0}.order-history-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.order-history-top strong{font-size:14px;color:#0f172a}.order-status{padding:3px 7px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:10px;font-weight:800}.order-history-date{margin-top:4px;font-size:11px;color:#94a3b8}.order-history-desc{margin-top:6px;font-size:12px;color:#475569}.order-history-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}.order-history-side>strong{font-size:14px;color:#0f172a}.order-reopen-btn{min-height:36px;border:0;border-radius:8px;padding:8px 11px;background:#111827;color:#fff;font-size:11px;font-weight:800;cursor:pointer}.order-reopen-btn:disabled{opacity:.55;cursor:wait}
body.orders-open{overflow:hidden}
@media(max-width:620px){.order-history-card{align-items:stretch;flex-direction:column}.order-history-side{align-items:stretch}.order-reopen-btn{width:100%}}

.orders-close{position:relative!important;display:grid!important;place-items:center!important;padding:0!important;line-height:0!important;font-size:0!important;text-indent:-9999px;overflow:hidden}
.orders-close::before,.orders-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:3px;border-radius:999px;background:currentColor;transform-origin:50% 50%}
.orders-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.orders-close::after{transform:translate(-50%,-50%) rotate(-45deg)}


.account-admin-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  background:#111827;
  color:#fff;
  white-space:nowrap;
}


/* Admin order list / completion status */
.order-history-card.completed{background:#f8fff9;border-color:#bbf7d0}
.order-history-customer{margin-top:7px;font-size:11px;line-height:1.45;color:#475569}
.order-history-customer strong{color:#0f172a}
.order-completed-label{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#dcfce7;color:#166534;font-size:10px;font-weight:800}
.order-completed-check{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;color:#334155;font-size:11px;font-weight:750;cursor:pointer;white-space:nowrap}
.order-completed-check input{width:16px;height:16px;margin:0;accent-color:#16a34a;cursor:pointer}
.order-completed-check input:disabled{cursor:wait;opacity:.6}


/* Admin production estimate - Epson SureColor G6000 standard mode */
.order-print-estimate{
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
  margin-top:8px;
  padding:7px 9px;
  border-radius:8px;
  background:rgba(15,23,42,.055);
  font-size:12px;
}
.order-print-estimate span{font-weight:650;color:#475569;}
.order-print-estimate strong{font-size:13px;color:#111827;}
.order-print-estimate small{color:#64748b;font-size:11px;}


/* Local gallery -> permanent account gallery migration */
.gallery-migrate-dialog{max-width:500px!important}
.gallery-migrate-body{padding:20px;display:flex;flex-direction:column;gap:16px}
.gallery-migrate-body p{margin:0;color:#475569;font-size:14px;line-height:1.55}
.gallery-migrate-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.gallery-migrate-primary{width:auto!important;min-width:175px;margin:0!important}
.gallery-migrate-secondary{min-height:44px;padding:10px 14px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#334155;font:700 14px/1.2 system-ui,sans-serif;cursor:pointer}
.gallery-migrate-secondary:disabled,.gallery-migrate-primary:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:560px){.gallery-migrate-actions{flex-direction:column-reverse}.gallery-migrate-primary,.gallery-migrate-secondary{width:100%!important}}


/* Bitmap/vector indicator in gallery thumbnails. */
.gallery-thumb{position:relative}
.gallery-kind-badge{
  position:absolute;
  left:7px;
  bottom:7px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:21px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 1px 4px rgba(15,23,42,.22);
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.045em;
  pointer-events:none;
  backdrop-filter:blur(3px);
}
.gallery-kind-badge.is-vector{background:rgba(236,253,245,.94);color:#047857;border-color:rgba(16,185,129,.38)}
.gallery-kind-badge.is-bitmap{background:rgba(255,247,237,.95);color:#c2410c;border-color:rgba(249,115,22,.38)}
.gallery-kind-badge.is-loading{background:rgba(255,255,255,.9);color:#64748b}

.transfer-color-auto{
  box-sizing:border-box;
  min-height:42px;
  display:flex;
  align-items:center;
  padding:9px 12px;
  border:1px solid #d7dde5;
  border-radius:9px;
  background:#f8fafc;
  color:#111827;
  font-weight:800;
}
.transfer-color-auto::after{
  content:"Auto";
  margin-left:auto;
  padding:3px 7px;
  border-radius:999px;
  background:#e2e8f0;
  color:#475569;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.transfer-color-auto.too-many{
  border-color:#f59e0b;
  background:#fff7ed;
  color:#9a3412;
}


/* Admin-only destructive action in order history. */
.order-delete-btn{
  border:1px solid #fecaca;
  border-radius:8px;
  background:#fff;
  color:#b91c1c;
  padding:8px 10px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.order-delete-btn:hover{background:#fef2f2;border-color:#fca5a5}
.order-delete-btn:disabled{opacity:.55;cursor:wait}

/* Vector colour editor */
.vector-color-modal[hidden]{display:none!important}
.vector-color-modal{position:fixed;inset:0;z-index:2147483100;display:flex;align-items:center;justify-content:center;padding:20px}
.vector-color-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.64);backdrop-filter:blur(3px)}
.vector-color-dialog{position:relative;z-index:1;width:min(620px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 32px));display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(15,23,42,.34)}
.vector-color-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 15px;border-bottom:1px solid #e2e8f0}
.vector-color-header h2{margin:0 0 4px;font-size:21px;line-height:1.2;color:#111827}
.vector-color-sub{font-size:12px;line-height:1.45;color:#64748b;word-break:break-word}
.vector-color-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:#f1f5f9;color:#dc2626;font:700 25px/1 system-ui,sans-serif;cursor:pointer}
.vector-color-body{padding:18px 20px;overflow:auto}
.vector-color-list{display:flex;flex-direction:column;gap:10px}
.vector-color-row{display:grid;grid-template-columns:minmax(120px,1fr) 42px minmax(260px,1.45fr);align-items:center;gap:12px;padding:11px 12px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc}
.vector-color-name{min-width:0;font-size:13px;font-weight:800;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vector-color-preview{width:42px;height:36px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.vector-cmyk-fields{display:grid;grid-template-columns:repeat(4,minmax(52px,1fr));gap:7px}
.vector-cmyk-fields label{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:4px;color:#475569;font:800 11px/1 system-ui,sans-serif}
.vector-cmyk-fields input{box-sizing:border-box;width:100%;height:36px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;padding:6px 5px;font:700 12px/1 monospace;color:#111827;text-align:center}
.vector-color-note{margin-top:14px;padding:10px 12px;border-radius:8px;background:#f1f5f9;color:#64748b;font-size:11px;line-height:1.45}
.vector-color-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px 18px;border-top:1px solid #e2e8f0}
.vector-color-cancel,.vector-color-save{min-height:40px;padding:9px 14px;border-radius:8px;font-weight:800;cursor:pointer}
.vector-color-cancel{border:1px solid #cbd5e1;background:#fff;color:#334155}
.vector-color-save{border:1px solid #111827;background:#111827;color:#fff}
.vector-color-save:disabled{opacity:.55;cursor:wait}
.vector-color-btn{border:1px solid #cbd5e1!important;background:#fff!important;color:#334155!important}
.vector-color-btn:hover{background:#f8fafc!important;border-color:#94a3b8!important}
@media(max-width:660px){.vector-color-row{grid-template-columns:minmax(0,1fr) 42px;gap:8px}.vector-cmyk-fields{grid-column:1/-1;grid-template-columns:repeat(4,minmax(54px,1fr))}.vector-color-body{padding:14px}.vector-color-footer{padding:12px 14px 16px}}


/* Vector color editor: large clickable color swatch backed by the native color picker. */
.vector-color-picker-wrap{
  position:relative;
  display:inline-block;
  width:54px;
  height:40px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  background:#fff;
  flex:0 0 auto;
}
.vector-color-picker{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  z-index:2;
  border:0;
  padding:0;
}
.vector-color-picker-wrap .vector-color-preview{
  position:absolute;
  inset:3px;
  display:block;
  border-radius:5px;
  border:1px solid rgba(15,23,42,.16);
  pointer-events:none;
}
.vector-color-picker-wrap:focus-within{
  outline:2px solid #2563eb;
  outline-offset:2px;
}


/* Refined vector color picker layout */
.vector-color-row{
  column-gap:18px;
}
.vector-color-picker-wrap{
  width:52px;
  height:36px;
  border:1px solid #b8c2cf;
  border-radius:10px;
  overflow:visible;
  background:#fff;
  box-shadow:none;
  margin-right:10px;
}
.vector-color-picker-wrap .vector-color-preview{
  inset:2px;
  border-radius:7px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:none;
}
.vector-color-picker{
  border-radius:10px;
}
.vector-cmyk-fields{
  gap:14px;
}
.vector-cmyk-fields label{
  gap:6px;
}

/* Keep the clickable swatch fully inside its grid cell. */
.vector-color-row{
  grid-template-columns:minmax(120px,1fr) 48px minmax(260px,1.45fr);
  column-gap:16px;
}
.vector-color-picker-wrap{
  box-sizing:border-box;
  width:48px;
  height:36px;
  margin-right:0;
  overflow:hidden;
  justify-self:center;
}
@media(max-width:660px){
  .vector-color-row{grid-template-columns:minmax(0,1fr) 48px;column-gap:12px}
}


/* Bitmap background removal editor */
.bitmap-bg-modal[hidden]{display:none!important}
.bitmap-bg-modal{position:fixed;inset:0;z-index:2147483110;display:flex;align-items:center;justify-content:center;padding:20px}
.bitmap-bg-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.64);backdrop-filter:blur(3px)}
.bitmap-bg-dialog{position:relative;z-index:1;width:min(900px,calc(100vw - 32px));max-height:min(860px,calc(100vh - 32px));display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(15,23,42,.34)}
.bitmap-bg-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 15px;border-bottom:1px solid #e2e8f0}
.bitmap-bg-header h2{margin:0 0 4px;font-size:21px;line-height:1.2;color:#111827}
.bitmap-bg-sub{font-size:12px;line-height:1.45;color:#64748b;word-break:break-word}
.bitmap-bg-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:#f1f5f9;color:#dc2626;font:700 25px/1 system-ui,sans-serif;cursor:pointer}
.bitmap-bg-body{padding:18px 20px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.bitmap-bg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bitmap-bg-picked{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bitmap-bg-picked-label{font-size:12px;font-weight:800;color:#475569}
.bitmap-bg-picked-swatch{position:relative;display:inline-block;width:50px;height:38px;border:1px solid #cbd5e1;border-radius:10px;overflow:hidden;background:#fff;cursor:pointer}
.bitmap-bg-picked-swatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.bitmap-bg-picked-swatch span{position:absolute;inset:3px;border-radius:7px;border:1px solid rgba(15,23,42,.14);background:#fff;pointer-events:none}
.bitmap-bg-picked code{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;color:#0f172a;font:700 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.bitmap-bg-tolerance-group{display:grid;grid-template-columns:auto minmax(180px,280px) 76px;align-items:center;gap:10px;min-width:min(100%,420px);flex:1 1 340px}
.bitmap-bg-tolerance-group label{font-size:12px;font-weight:800;color:#475569}
.bitmap-bg-tolerance-group input[type="range"]{width:100%}
.bitmap-bg-tolerance-group input[type="number"]{width:76px;height:38px;border:1px solid #cbd5e1;border-radius:8px;padding:6px 8px;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#111827;text-align:center}
.bitmap-bg-instruction{font-size:12px;line-height:1.45;color:#475569}
.bitmap-bg-canvas-wrap{display:flex;align-items:center;justify-content:center;min-height:220px;padding:12px;border:1px solid #e2e8f0;border-radius:12px;background:linear-gradient(45deg,#f8fafc 25%,#eef2f7 25%,#eef2f7 50%,#f8fafc 50%,#f8fafc 75%,#eef2f7 75%,#eef2f7 100%);background-size:24px 24px}
.bitmap-bg-canvas-wrap canvas{display:block;max-width:100%;max-height:58vh;border-radius:8px;box-shadow:0 8px 20px rgba(15,23,42,.12);background:transparent;cursor:crosshair}
.bitmap-bg-note{padding:10px 12px;border-radius:8px;background:#f1f5f9;color:#64748b;font-size:11px;line-height:1.45}
.bitmap-bg-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px 18px;border-top:1px solid #e2e8f0}
.bitmap-bg-cancel,.bitmap-bg-save{min-height:40px;padding:9px 14px;border-radius:8px;font-weight:800;cursor:pointer}
.bitmap-bg-cancel{border:1px solid #cbd5e1;background:#fff;color:#334155}
.bitmap-bg-save{border:1px solid #111827;background:#111827;color:#fff}
.bitmap-bg-save:disabled{opacity:.55;cursor:wait}
.bitmap-bg-btn{border:1px solid #cbd5e1!important;background:#fff!important;color:#334155!important}
.bitmap-bg-btn:hover{background:#f8fafc!important;border-color:#94a3b8!important}
@media(max-width:760px){.bitmap-bg-body{padding:14px}.bitmap-bg-toolbar{align-items:stretch}.bitmap-bg-tolerance-group{grid-template-columns:1fr 78px;gap:8px}.bitmap-bg-tolerance-group label{grid-column:1/-1}.bitmap-bg-tolerance-group input[type="range"]{grid-column:1/2}.bitmap-bg-tolerance-group input[type="number"]{grid-column:2/3;justify-self:end}.bitmap-bg-footer{padding:12px 14px 16px}}

.bitmap-bg-preview-status{
  align-self:flex-start;
  padding:7px 10px;
  border:1px solid #dbe3ec;
  border-radius:8px;
  background:#f8fafc;
  color:#334155;
  font-size:12px;
  font-weight:800;
}


/* PMS / named CMYK combobox in vector color editor */
.vector-color-dialog{width:min(780px,calc(100vw - 32px))}
.vector-color-row{grid-template-columns:minmax(130px,.9fr) 48px minmax(360px,1.7fr)}
.vector-color-controls{display:grid;gap:9px;min-width:0}
.vector-color-preset-label{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:9px;color:#475569;font:800 11px/1.2 system-ui,sans-serif}
.vector-color-preset-label>span{white-space:nowrap}
.vector-color-preset-label input{box-sizing:border-box;width:100%;height:36px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;padding:6px 9px;font:700 12px/1.2 system-ui,sans-serif;color:#111827}
.vector-color-preset-label input:focus{outline:2px solid #2563eb;outline-offset:1px;border-color:#2563eb}
.vector-color-preset-label input.is-invalid{border-color:#f59e0b;background:#fffbeb}
@media(max-width:760px){
  .vector-color-row{grid-template-columns:minmax(0,1fr) 48px;column-gap:12px}
  .vector-color-controls{grid-column:1/-1}
  .vector-color-preset-label{grid-template-columns:1fr;gap:6px}
}

/* Vector colour editor alignment refinement */
.vector-color-row{
  grid-template-columns:minmax(130px,.9fr) 54px minmax(380px,1.8fr);
  column-gap:18px;
}
.vector-color-picker-wrap{
  box-sizing:border-box;
  width:54px;
  height:44px;
  padding:4px;
  margin:0;
  overflow:hidden;
  justify-self:center;
  align-self:center;
  border:1px solid #b8c2cf;
  border-radius:10px;
  background:#fff;
}
.vector-color-picker-wrap .vector-color-preview{
  inset:4px;
  width:auto;
  height:auto;
  box-sizing:border-box;
  border-radius:6px;
}
.vector-color-controls{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.vector-color-preset-label{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 auto 2px;
  width:100%;
  color:#475569;
  font:800 11px/1.2 system-ui,sans-serif;
  text-align:center;
}
.vector-color-preset-label>span{
  width:100%;
  text-align:center;
  white-space:nowrap;
}
.vector-color-preset-label input{
  width:min(100%,340px);
  margin:0 auto;
  text-align:left;
}
.vector-cmyk-fields{
  gap:16px;
}
@media(max-width:760px){
  .vector-color-row{grid-template-columns:minmax(0,1fr) 54px;column-gap:14px}
  .vector-color-controls{grid-column:1/-1;gap:12px}
  .vector-color-preset-label input{width:min(100%,360px)}
}

/* TEST-19: standardise Arkbuilder working popups to the 90% viewport rule.
   Keep account/login/confirmation dialogs compact; large work surfaces use 90vw x 90vh. */
.gallery-dialog,
.source-preview-dialog,
.checkout-dialog,
.orders-dialog,
.vector-color-dialog,
.bitmap-bg-dialog {
  box-sizing: border-box !important;
  width: 90vw !important;
  max-width: 90vw !important;
  height: 90vh !important;
  max-height: 90vh !important;
}

/* Price list intentionally keeps the original compact tooltip sizing.
   It is excluded from the TEST-19 90% modal rule. */
body > #priceSheetPopup {
  box-sizing: border-box !important;
  width: min(760px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Let the preview/editor bodies actually use the added height. */
.gallery-grid,
.source-preview-content,
.checkout-body,
.orders-body,
.vector-color-body,
.bitmap-bg-body {
  min-height: 0;
  flex: 1 1 auto;
}

.source-preview-content img {
  max-height: 100% !important;
}

.bitmap-bg-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.bitmap-bg-canvas-wrap canvas {
  max-height: 100% !important;
}

/* TEST-20: keep gallery items compact inside the 90% modal.
   The 90vh gallery grid used to stretch its grid rows, making every card
   appear full-height even though the actual thumbnail was only at the top. */
.gallery-grid {
  align-content: start !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
}
.gallery-card {
  align-self: start !important;
  height: max-content !important;
  min-height: 0 !important;
}
.gallery-select {
  height: auto !important;
}
.gallery-thumb {
  height: 132px !important;
  min-height: 132px !important;
  max-height: 132px !important;
}
.gallery-name {
  min-height: 0 !important;
}
@media(max-width:600px){
  .gallery-thumb {
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
  }
}

/* TEST-26: gallery folders + search */
.gallery-toolbar{flex-wrap:wrap;align-items:stretch}.gallery-folder-btn{border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#334155;padding:10px 14px;font:700 13px/1.2 system-ui,sans-serif;cursor:pointer}.gallery-folder-btn:disabled{opacity:.45;cursor:not-allowed}.gallery-search-wrap{margin-left:auto;min-width:min(300px,100%);display:grid;grid-template-columns:auto minmax(160px,1fr);align-items:center;gap:8px;color:#64748b;font-size:12px;font-weight:700}.gallery-search-wrap input{width:100%;min-height:42px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:9px 11px;font:inherit;color:#0f172a}.gallery-breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 22px;border-bottom:1px solid #e5e7eb;background:#fff;font-size:12px}.gallery-breadcrumb button{border:0;background:transparent;padding:3px 2px;color:#334155;font:700 12px/1.2 system-ui,sans-serif;cursor:pointer}.gallery-breadcrumb button:hover{text-decoration:underline}.gallery-breadcrumb span{color:#94a3b8}.gallery-folder-card{position:relative;min-height:155px;border:1px solid #dbe1e8;border-radius:12px;background:#fff;overflow:hidden}.gallery-folder-open{width:100%;min-height:155px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px 12px;cursor:pointer;color:#0f172a}.gallery-folder-icon{font-size:36px;line-height:1}.gallery-folder-open strong{font-size:13px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gallery-folder-open span:last-child{font-size:10px;color:#64748b}.gallery-folder-delete{position:absolute;top:8px;right:8px;z-index:3;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#fff;color:#475569;box-shadow:0 1px 5px rgba(15,23,42,.18);cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}.gallery-path{padding:0 10px 9px;color:#64748b;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gallery-footer{justify-content:space-between}.gallery-move-controls{display:flex;align-items:center;gap:8px}.gallery-move-controls select{min-height:38px;max-width:240px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;padding:7px 9px;color:#334155;font:600 12px/1.2 system-ui,sans-serif}@media(max-width:600px){.gallery-search-wrap{width:100%;margin-left:0;grid-template-columns:1fr}.gallery-search-wrap span{display:none}.gallery-footer{align-items:stretch;flex-direction:column}.gallery-move-controls{width:100%;flex-direction:column}.gallery-move-controls select,.gallery-move-controls .gallery-folder-btn,.gallery-footer .gallery-add-btn{width:100%;max-width:none}}


/* TEST-28: gallery layout and folder-action reliability */
.gallery-dialog{
  height:min(900px,calc(100vh - 32px));
  max-height:calc(100vh - 32px);
}
.gallery-toolbar{
  display:flex !important;
  flex-direction:column;
  gap:10px;
  padding:14px 22px 12px !important;
}
.gallery-upload-btn{
  min-height:88px;
  flex:0 0 auto;
}
.gallery-controls-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
.gallery-controls-row .gallery-folder-btn{
  flex:0 0 auto;
  min-height:42px;
}
.gallery-controls-row .gallery-search-wrap{
  flex:1 1 auto;
  margin-left:0;
  min-width:0;
}
.gallery-grid{
  min-height:280px;
}
@media(max-width:600px){
  .gallery-dialog{height:calc(100vh - 16px);max-height:calc(100vh - 16px)}
  .gallery-toolbar{padding:10px 12px !important}
  .gallery-upload-btn{min-height:76px}
  .gallery-controls-row{flex-direction:column;align-items:stretch}
  .gallery-controls-row .gallery-folder-btn,.gallery-controls-row .gallery-search-wrap{width:100%}
}


/* TEST-30: compact upload strip, leaving more room for the gallery */
.gallery-toolbar{
  gap:8px;
  padding:10px 22px 9px !important;
}
.gallery-upload-btn{
  min-height:48px !important;
  padding:8px 14px !important;
  flex-direction:row !important;
  justify-content:center;
  gap:10px;
}
.gallery-upload-btn strong{
  font-size:14px;
  white-space:nowrap;
}
.gallery-upload-btn span{
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gallery-grid{
  min-height:360px;
}
@media(max-width:600px){
  .gallery-toolbar{padding:8px 12px !important}
  .gallery-upload-btn{min-height:46px !important;padding:8px 10px !important}
  .gallery-upload-btn span{display:none}
}

/* TEST-31: single-line compact gallery toolbar */
.gallery-toolbar{
  flex-direction:row !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  padding:8px 22px !important;
}
.gallery-upload-btn{
  width:auto !important;
  min-height:38px !important;
  height:38px !important;
  padding:7px 12px !important;
  flex:0 0 auto !important;
  border:1px dashed #94a3b8 !important;
  border-radius:9px !important;
  background:#f8fafc !important;
  color:#0f172a !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.gallery-upload-btn strong{font-size:12px !important;line-height:1 !important}
.gallery-upload-btn span{display:none !important}
.gallery-controls-row{
  display:flex !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  align-items:center !important;
  gap:8px !important;
}
.gallery-controls-row .gallery-folder-btn{min-height:38px !important;height:38px !important;padding:7px 12px !important}
.gallery-controls-row .gallery-search-wrap{min-width:0 !important;grid-template-columns:auto minmax(120px,1fr) !important}
.gallery-controls-row .gallery-search-wrap input{min-height:38px !important;height:38px !important;padding:7px 10px !important}
.gallery-breadcrumb{padding:6px 22px !important}
.gallery-grid{min-height:420px !important;padding-top:12px !important}
@media(max-width:700px){
  .gallery-toolbar{flex-wrap:wrap !important;padding:7px 12px !important}
  .gallery-upload-btn{flex:0 0 auto !important}
  .gallery-controls-row{flex:1 1 100% !important}
  .gallery-controls-row .gallery-search-wrap span{display:none !important}
  .gallery-grid{min-height:360px !important}
}

/* TEST-35: clearly distinguish permanent server items from temporary browser items. */
.gallery-storage-badge{position:absolute;left:6px;top:6px;z-index:4;display:inline-flex;align-items:center;min-height:20px;padding:3px 7px;border-radius:999px;font-size:8px;line-height:1;font-weight:900;letter-spacing:.04em;box-shadow:0 1px 5px rgba(15,23,42,.16)}
.gallery-storage-badge.is-permanent{background:rgba(236,253,245,.96);color:#047857;border:1px solid rgba(16,185,129,.42)}
.gallery-storage-badge.is-temporary{background:rgba(254,249,195,.97);color:#854d0e;border:1px solid rgba(202,138,4,.42)}
.gallery-promote{display:block;width:calc(100% - 18px);margin:0 9px 9px;padding:6px 8px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.gallery-promote:hover{background:#f8fafc}.gallery-promote:disabled{opacity:.55;cursor:wait}


/* TEST-37: fixed gallery viewport + always-visible action footer. */
.gallery-dialog{
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
.gallery-header,
.gallery-toolbar,
.gallery-breadcrumb,
.gallery-footer{
  flex:0 0 auto !important;
}
.gallery-grid{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  scrollbar-gutter:stable both-edges !important;
  overscroll-behavior:contain;
  align-content:start !important;
  padding-bottom:24px !important;
}
.gallery-grid::-webkit-scrollbar{width:12px;}
.gallery-grid::-webkit-scrollbar-track{background:#f1f5f9;border-left:1px solid #e2e8f0;}
.gallery-grid::-webkit-scrollbar-thumb{background:#94a3b8;border:3px solid #f1f5f9;border-radius:999px;}
.gallery-grid::-webkit-scrollbar-thumb:hover{background:#64748b;}
.gallery-footer{
  position:relative !important;
  z-index:5 !important;
  background:#fff !important;
  box-shadow:0 -1px 0 #e5e7eb !important;
}
.gallery-file-icon-broken{
  padding:8px;
  text-align:center;
  font-size:11px;
  line-height:1.25;
  color:#64748b;
}
@media(max-width:700px){
  .gallery-grid{min-height:0 !important;padding-bottom:18px !important;}
}

/* TEST48: order naming + order search */
.orders-search-wrap{margin:0 0 12px}.orders-search{width:100%;min-height:42px;box-sizing:border-box;padding:9px 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#0f172a;font:400 13px/1.2 system-ui,sans-serif;outline:none}.orders-search:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.order-display-name{font-size:15px!important}.order-number-secondary{font-size:10px;font-weight:700;color:#64748b}.order-admin-name-row{display:flex;align-items:flex-end;gap:7px;margin-top:9px;max-width:520px}.order-admin-name-row label{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px;font-size:10px;font-weight:800;color:#64748b}.order-admin-name-input{width:100%;min-height:34px;box-sizing:border-box;padding:7px 9px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#0f172a;font:400 12px/1.2 system-ui,sans-serif}.order-admin-name-save{min-height:34px;padding:7px 10px;border:0;border-radius:7px;background:#334155;color:#fff;font-size:11px;font-weight:800;cursor:pointer}.order-admin-name-save:disabled{opacity:.55;cursor:wait}
@media(max-width:620px){.order-admin-name-row{align-items:stretch;flex-direction:column}.order-admin-name-save{width:100%}}


/* TEST52 vector split modal */

.vector-split-modal{position:fixed;inset:0;display:none;z-index:2147483200}
.vector-split-modal.open{display:block}
.vector-split-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.65)}
.vector-split-dialog{position:relative;max-width:min(1100px,96vw);width:96vw;max-height:88vh;overflow:hidden;margin:5vh auto;background:#fff;border-radius:18px;box-shadow:0 22px 60px rgba(15,23,42,.35);display:flex;flex-direction:column}
.vector-split-header,.vector-split-footer{padding:16px 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;gap:12px}
.vector-split-footer{border-bottom:0;border-top:1px solid #e5e7eb}
.vector-split-header h2{margin:0;font-size:1.3rem}
.vector-split-sub{color:#64748b;font-size:.95rem;margin-top:4px}
.vector-split-close,.vector-split-cancel,.vector-split-save{border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.vector-split-close{background:#e2e8f0;color:#0f172a;font-size:1.1rem;line-height:1;padding:10px 12px}
.vector-split-cancel{background:#e2e8f0;color:#0f172a}
.vector-split-save{background:#0f766e;color:#fff}
.vector-split-save[disabled]{opacity:.55;cursor:not-allowed}
.vector-split-body{padding:18px 20px 22px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.vector-split-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:end;justify-content:space-between}
.vector-split-folder-wrap{display:flex;flex-direction:column;gap:6px;min-width:min(100%,340px)}
.vector-split-folder-wrap span{font-size:.92rem;font-weight:700;color:#334155}
.vector-split-folder-wrap input{min-width:280px;max-width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:10px;font:inherit}
.vector-split-meta{display:flex;flex-direction:column;gap:4px;color:#475569;font-size:.92rem;text-align:right}
.vector-split-status{padding:12px 14px;border-radius:12px;background:#eff6ff;color:#1e3a8a;font-size:.95rem}
.vector-split-status.error{background:#fef2f2;color:#991b1b}
.vector-split-status.success{background:#ecfdf5;color:#166534}
.vector-split-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.vector-split-card{border:1px solid #e2e8f0;border-radius:14px;background:#fff;overflow:hidden;display:flex;flex-direction:column;min-height:180px}
.vector-split-card-preview{background-image:linear-gradient(45deg,#f8fafc 25%,#e2e8f0 25%,#e2e8f0 50%,#f8fafc 50%,#f8fafc 75%,#e2e8f0 75%,#e2e8f0 100%);background-size:18px 18px;display:flex;align-items:center;justify-content:center;min-height:130px;padding:10px}
.vector-split-card-preview img{max-width:100%;max-height:120px;display:block}
.vector-split-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.vector-split-card-title{font-weight:700;color:#0f172a;font-size:.94rem;word-break:break-word}
.vector-split-card-sub{font-size:.82rem;color:#64748b}
@media (max-width:720px){.vector-split-dialog{width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0;border-radius:0}.vector-split-meta{text-align:left}.vector-split-toolbar{align-items:stretch}}

/* TEST-59: historical order data-loss marker. Informational only; no runtime data is changed. */
.order-history-damage-badge{padding:3px 7px;border-radius:999px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;font-size:10px;font-weight:800}
.order-history-damage-note{margin-top:7px;max-width:760px;padding:7px 9px;border-radius:8px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:11px;line-height:1.4}


/* TEST98 compact source/motif cards */
.item.motif-card{
  grid-template-columns:48px minmax(0,1fr);
  gap:9px;
  padding:8px 9px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.item.motif-card.is-collapsed{
  cursor:pointer;
}
.item.motif-card.is-collapsed:hover{
  border-color:#cbd5e1;
  box-shadow:0 2px 8px rgba(15,23,42,.05);
}
.item.motif-card > .source-image-thumb{
  width:48px;
  height:48px;
  align-self:start;
}
.motif-card-summary{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text);
  text-align:left;
}
.motif-card-summary-main{
  min-width:0;
  display:block;
}
.motif-card-summary .name{
  display:block;
  max-width:100%;
}
.motif-card-quickmeta{
  display:block;
  margin-top:3px;
  font-size:10.5px;
  line-height:1.25;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.motif-card-chevron{
  flex:0 0 auto;
  font-size:12px;
  color:var(--muted);
}
.motif-card-detail{
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid #edf0f4;
}
.motif-card-detail[hidden]{display:none!important}
.item.motif-card .meta{
  margin:0 0 7px;
}
.item.motif-card .item-actions{
  margin-top:6px;
}


/* TEST104: non-destructive embroidery preview controls */
.motif-effect-actions{align-items:center;flex-wrap:wrap}
.brodyr-toggle{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 9px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a;font-size:12px;font-weight:700;cursor:pointer;user-select:none}
.brodyr-toggle input{margin:0;accent-color:#2563eb}
.brodyr-strength{display:inline-grid;grid-template-columns:auto minmax(86px,130px) 38px;align-items:center;gap:7px;min-height:32px;padding:5px 9px;border:1px solid #dbe3ed;border-radius:8px;background:#f8fafc;color:#334155;font-size:11px;font-weight:700}
.brodyr-strength input[type=range]{width:100%;min-width:86px;margin:0;accent-color:#2563eb}
.brodyr-strength output{font-variant-numeric:tabular-nums;text-align:right;color:#475569}
.brodyr-strength.is-disabled{opacity:.48}
.source-image-thumb.brodyr-source-preview{border-radius:7px}
.thumb.brodyr-preview{--brodyr-thread-opacity:.52;--brodyr-relief-opacity:.24;isolation:isolate}
.thumb.brodyr-preview img{position:relative;z-index:1}
/* TEST105: stitch layer mirrors the exact displayed image viewport, including vector crop/offset. */
.brodyr-thread-layer{overflow:hidden;opacity:var(--brodyr-thread-opacity);background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.72) 0 1px,rgba(255,255,255,.10) 1px 2px,rgba(15,23,42,.28) 2px 3px,rgba(15,23,42,.03) 3px 5px),
  repeating-linear-gradient(45deg,transparent 0 5px,rgba(255,255,255,.18) 5px 6px,transparent 6px 10px);
  background-size:7px 7px,12px 12px;mix-blend-mode:overlay;filter:drop-shadow(0 1px .3px rgba(15,23,42,var(--brodyr-relief-opacity)))}
.brodyr-thread-layer::after{content:"";position:absolute;inset:0;opacity:var(--brodyr-relief-opacity);background:repeating-linear-gradient(135deg,rgba(255,255,255,.75) 0 1px,transparent 1px 3px,rgba(2,6,23,.32) 3px 4px,transparent 4px 6px);mix-blend-mode:soft-light}
@media(max-width:720px){.brodyr-strength{grid-template-columns:auto minmax(70px,1fr) 36px;flex:1 1 180px}.brodyr-toggle{flex:0 0 auto}}


/* TEST112: floating Effects panel with stacked print effects */
.effects-btn{min-height:32px;padding:6px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a;font-size:12px;font-weight:700;cursor:pointer}
.effects-btn.is-active{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}
.effects-modal[hidden]{display:none!important}
.effects-modal{position:fixed;inset:0;z-index:2147482500;pointer-events:none}
.effects-dialog{position:fixed;left:18px;top:96px;z-index:1;width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;background:#fff;border:1px solid #dbe3ed;border-radius:16px;box-shadow:0 18px 46px rgba(15,23,42,.20);pointer-events:auto}
.effects-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 16px 12px;border-bottom:1px solid #e2e8f0}
.effects-header h2{margin:0 0 4px;font-size:20px;color:#0f172a}
.effects-sub{font-size:12px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}
.effects-close{width:34px;height:34px;border:0;border-radius:999px;background:#f1f5f9;color:#dc2626;font-size:23px;font-weight:700;cursor:pointer}
.effects-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 16px 16px}
.effect-option{padding:12px;border:1px solid #dbe3ed;border-radius:12px;background:#f8fafc}
.effect-switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.effect-switch-row>span{display:flex;flex-direction:column;gap:3px}
.effect-switch-row strong{font-size:14px;color:#0f172a}
.effect-switch-row small{font-size:11px;color:#64748b;font-weight:500}
.effect-switch-row input{width:19px;height:19px;accent-color:#2563eb}
.effect-strength-row{display:grid;grid-template-columns:48px 1fr 42px;align-items:center;gap:9px;margin-top:12px;font-size:11px;font-weight:700;color:#475569}
.effect-strength-row input[type=range]{width:100%;accent-color:#2563eb}
.effect-strength-row output{text-align:right;font-variant-numeric:tabular-nums}
.effects-note{grid-column:1/-1;font-size:11px;line-height:1.45;color:#64748b}
.thumb.puff-preview img{position:relative;z-index:1}
.source-image-thumb.puff-source-preview,.source-image-thumb.metallic-source-preview,.source-image-thumb.vintage-source-preview{border-radius:7px}
.thumb.metallic-preview,.thumb.vintage-preview{isolation:isolate}
.thumb.metallic-preview img,.thumb.vintage-preview img{position:relative;z-index:1}
.effect-overlay-layer,.distress-layer{position:absolute;pointer-events:none;z-index:2;inset:0;overflow:hidden}
.effect-overlay-layer.metallic-layer{mix-blend-mode:screen;background:linear-gradient(115deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.70) 22%,rgba(255,255,255,.14) 40%,rgba(255,255,255,.75) 55%,rgba(255,255,255,.08) 72%,rgba(255,255,255,.52) 88%,rgba(255,255,255,.10) 100%);opacity:var(--metallic-shine-opacity,.45);filter:blur(.12px)}
.effect-overlay-layer.metallic-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0) 28%,rgba(15,23,42,.10) 100%);mix-blend-mode:soft-light;opacity:var(--metallic-depth-opacity,.35)}
.distress-layer{opacity:var(--distress-opacity,.45);background:radial-gradient(circle at 8px 8px,rgba(255,255,255,.98) 0 1px,transparent 1.3px),radial-gradient(circle at 20px 12px,rgba(255,255,255,.92) 0 1.2px,transparent 1.5px),repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.80) 12px 13px,transparent 13px 28px),repeating-linear-gradient(35deg,transparent 0 18px,rgba(255,255,255,.75) 18px 19px,transparent 19px 40px);background-size:28px 20px,34px 22px,auto,auto;mix-blend-mode:screen}
@media(max-width:860px){.effects-dialog{width:min(360px,calc(100vw - 18px))}}
@media(max-width:560px){.effects-dialog{left:8px!important;right:8px!important;top:auto!important;bottom:10px!important;width:auto;max-height:min(72vh,calc(100vh - 18px))}.effects-sub{max-width:210px}}


/* TEST115: Effects panel top alignment + centered close glyph */
.effects-close{display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;padding:0!important;font-family:Arial,sans-serif!important}

/* TEST116 additional effect previews */
.effect-overlay-layer.glitter-layer{mix-blend-mode:screen;opacity:var(--glitter-opacity,.55);background:
  radial-gradient(circle at 8% 16%,rgba(255,255,255,.98) 0 1px,transparent 1.7px),
  radial-gradient(circle at 29% 61%,rgba(255,255,255,.92) 0 1.2px,transparent 2px),
  radial-gradient(circle at 51% 23%,rgba(255,255,255,.96) 0 1px,transparent 1.8px),
  radial-gradient(circle at 73% 72%,rgba(255,255,255,.95) 0 1.2px,transparent 2px),
  radial-gradient(circle at 91% 39%,rgba(255,255,255,.92) 0 1px,transparent 1.7px);
  background-size:37px 31px,43px 39px,47px 41px,53px 46px,59px 51px;filter:drop-shadow(0 0 1px rgba(255,255,255,.85))}
.effect-overlay-layer.reflex-layer{mix-blend-mode:screen;opacity:var(--reflex-opacity,.6);background:linear-gradient(112deg,rgba(255,255,255,.08) 0 30%,rgba(255,255,255,.92) 43%,rgba(255,255,255,.18) 49%,rgba(255,255,255,.75) 58%,rgba(255,255,255,.06) 72%)}
.effect-overlay-layer.gloss-layer{mix-blend-mode:screen;opacity:var(--gloss-opacity,.48);background:linear-gradient(165deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.24) 22%,rgba(255,255,255,0) 46%,rgba(255,255,255,.18) 72%,rgba(255,255,255,0) 100%)}
.thumb.raised-preview img{position:relative;z-index:1}


/* TEST117: density controls for texture/particle effects */
.effect-density-row{margin-top:7px}
.effect-density-row span{color:#334155}

/* TEST118: two effect cards per row on desktop */
@media(max-width:700px){.effects-body{grid-template-columns:1fr}}

/* TEST119: max three controls per effect; keep two-column panel compact. */
.effect-option .effect-strength-row{margin-top:7px}
.effect-option .effect-strength-row output{min-width:34px}


/* TEST120: collapse each effect card until it is enabled. */
.effect-option{transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.effect-option:not(.is-enabled){background:#f8fafc}
.effect-option:not(.is-enabled) .effect-strength-row{display:none}
.effect-option.is-enabled{background:#ffffff;border-color:#bfdbfe;box-shadow:0 4px 14px rgba(37,99,235,.08)}
.effect-option.is-enabled .effect-switch-row{padding-bottom:2px}


/* TEST121: curated mask effect */
.effect-select-row{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:9px;margin-top:7px;font-size:11px;font-weight:700;color:#475569}
.effect-select-row select{min-width:0;width:100%;height:30px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#0f172a;padding:0 8px;font:inherit}
.effect-mask-invert-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;font-size:11px;font-weight:700;color:#475569}
.effect-mask-invert-row input{width:17px;height:17px;accent-color:#2563eb}
.effect-option:not(.is-enabled) .effect-select-row,.effect-option:not(.is-enabled) .effect-mask-invert-row{display:none}

/* TEST122: admin-managed persistent mask library */
.mask-admin-modal[hidden]{display:none!important}
.mask-admin-modal{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;padding:18px}
.mask-admin-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(2px)}
.mask-admin-dialog{position:relative;z-index:1;width:min(860px,calc(100vw - 28px));max-height:min(88vh,920px);display:flex;flex-direction:column;background:#fff;border:1px solid #dbe3ed;border-radius:16px;box-shadow:0 26px 90px rgba(15,23,42,.34);overflow:hidden}
.mask-admin-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 20px 15px;border-bottom:1px solid #e2e8f0}
.mask-admin-header h2{margin:0 0 4px;font-size:21px;color:#0f172a}
.mask-admin-sub{font-size:12px;line-height:1.45;color:#64748b}
.mask-admin-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:999px;background:#f1f5f9;color:#dc2626;font:700 24px/1 Arial,sans-serif;cursor:pointer}
.mask-admin-body{padding:16px 20px 20px;overflow:auto}
.mask-admin-upload{padding:14px;border:1px solid #dbe3ed;border-radius:12px;background:#f8fafc}
.mask-admin-upload-grid{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.2fr) auto;gap:10px;align-items:end}
.mask-admin-upload-grid label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;color:#334155}
.mask-admin-upload-grid input[type=text],.mask-admin-upload-grid input[type=file]{width:100%;box-sizing:border-box;min-height:39px;padding:8px 9px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a;font-size:12px}
.mask-admin-upload-grid button{min-height:39px;padding:8px 13px;border:0;border-radius:8px;background:#0f172a;color:#fff;font-size:12px;font-weight:800;cursor:pointer}
.mask-admin-upload-grid button:disabled{opacity:.55;cursor:wait}
.mask-admin-help{margin-top:9px;font-size:11px;line-height:1.45;color:#64748b}
.mask-admin-status{min-height:18px;margin-top:7px;font-size:11px;font-weight:700;color:#15803d}
.mask-admin-status.error{color:#b91c1c}
.mask-admin-env{margin:14px 0 8px;font-size:11px;font-weight:700;color:#475569}
.mask-admin-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mask-admin-card{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid #dbe3ed;border-radius:11px;background:#fff}
.mask-admin-card.is-builtin{grid-template-columns:88px minmax(0,1fr);background:#f8fafc}
.mask-admin-thumb{width:88px;height:70px;border:1px solid #e2e8f0;border-radius:8px;background-color:#fff;background-image:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;overflow:hidden}
.mask-admin-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.mask-admin-fields{min-width:0;display:flex;flex-direction:column;gap:6px}
.mask-admin-fields>input[type=text]{width:100%;box-sizing:border-box;padding:7px 8px;border:1px solid #cbd5e1;border-radius:7px;font-size:12px;font-weight:700;color:#0f172a}
.mask-admin-fields strong{font-size:13px;color:#0f172a}
.mask-admin-meta,.mask-admin-readonly{font-size:10px;color:#64748b;overflow-wrap:anywhere}
.mask-admin-enabled{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#334155}
.mask-admin-enabled input{accent-color:#2563eb}
.mask-admin-actions{display:flex;flex-direction:column;gap:5px}
.mask-admin-actions button{min-width:48px;padding:6px 8px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#0f172a;font-size:11px;font-weight:700;cursor:pointer}
.mask-admin-actions button:last-child{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.mask-admin-actions button:disabled{opacity:.35;cursor:default}
.mask-admin-empty{grid-column:1/-1;padding:16px;border:1px dashed #cbd5e1;border-radius:10px;text-align:center;font-size:12px;color:#64748b}
body.mask-admin-open{overflow:hidden}
@media(max-width:760px){.mask-admin-upload-grid{grid-template-columns:1fr}.mask-admin-list{grid-template-columns:1fr}.mask-admin-card{grid-template-columns:72px minmax(0,1fr) auto}.mask-admin-thumb{width:72px;height:62px}}


/* TEST123/126: Blackout mask production controls + Photoshop-like levels UI */
.blackout-option{grid-column:1/-1}
.blackout-stage-title{font-size:11px;font-weight:800;color:#334155;margin-top:10px;padding-top:8px;border-top:1px solid #e2e8f0;text-transform:uppercase;letter-spacing:.04em}
.effect-option:not(.is-enabled) .blackout-stage-title,.effect-option:not(.is-enabled) .blackout-levels-shell{display:none}
.blackout-option.is-enabled{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
.blackout-option.is-enabled .effect-switch-row,.blackout-option.is-enabled .blackout-stage-title,.blackout-option.is-enabled .blackout-levels-shell,.blackout-option.is-enabled .effect-select-row,.blackout-option.is-enabled .effect-mask-invert-row{grid-column:1/-1}
.blackout-levels-shell{display:grid;grid-template-columns:1fr;gap:8px}
.blackout-levels-toolbar{display:flex;justify-content:flex-start}
.blackout-inline-select{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#475569}
.blackout-inline-select span{color:#475569}
.blackout-inline-select select{height:30px;min-width:104px;padding:0 10px;border:1px solid #4b5563;border-radius:7px;background:#3f3f46;color:#fff;font:inherit;appearance:none}
.blackout-inline-select select:disabled{opacity:1;cursor:default}
.blackout-levels-panel{padding:10px;border:1px solid #3f3f46;border-radius:10px;background:#3f3f46;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.blackout-levels-caption{font-size:11px;font-weight:700;color:#e5e7eb;margin-bottom:8px}
.blackout-histogram-frame{position:relative;border:1px solid #6b7280;border-radius:2px;background:#2f2f33;padding:4px 4px 20px;overflow:hidden}
.blackout-histogram-frame canvas{display:block;width:100%;height:92px;background:linear-gradient(180deg,#4a4a4f,#35353a)}
.blackout-marker-strip{position:absolute;left:4px;right:4px;bottom:4px;height:16px;background:linear-gradient(90deg,#111 0%,#666 50%,#f3f4f6 100%);border-top:1px solid rgba(255,255,255,.10);touch-action:none;user-select:none;--blackout-black-pos:10%;--blackout-gamma-pos:50%;--blackout-white-pos:90%}
.blackout-marker{position:absolute;bottom:-1px;width:0;height:0;padding:0;background:transparent;transform:translateX(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid #d1d5db;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4));cursor:ew-resize;appearance:none;-webkit-appearance:none;pointer-events:auto}
.blackout-marker-black{left:var(--blackout-black-pos);border-top-color:#111827}
.blackout-marker-gamma{left:var(--blackout-gamma-pos);border-top-color:#9ca3af}
.blackout-marker-white{left:var(--blackout-white-pos);border-top-color:#ffffff}
.blackout-marker::before{content:"";position:absolute;left:-14px;right:-14px;top:-10px;bottom:-10px}
.blackout-marker:focus-visible{outline:none;filter:drop-shadow(0 0 0 2px rgba(147,197,253,.85)) drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.blackout-marker-strip::before,.blackout-marker-strip::after{content:"";position:absolute;top:0;bottom:14px;width:1px;background:rgba(255,255,255,.22);pointer-events:none}
.blackout-marker-strip::before{left:var(--blackout-black-pos)}
.blackout-marker-strip::after{left:var(--blackout-white-pos)}
.blackout-levels-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.blackout-levels-inputs label{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:700;color:#d1d5db}
.blackout-levels-inputs input{width:100%;height:34px;padding:0 8px;border:1px solid #71717a;border-radius:4px;background:#52525b;color:#fff;font:inherit;font-variant-numeric:tabular-nums;box-sizing:border-box}
.blackout-levels-inputs input:focus{outline:none;border-color:#93c5fd;box-shadow:0 0 0 2px rgba(147,197,253,.18)}
.blackout-range-row{margin-top:0}
.blackout-range-row span{min-width:68px}

#sheet.sheet-blackout-preview{background-color:var(--sheet-blackout-preview-bg,#0b0b0d) !important;background-image:none !important}
#sheet.sheet-blackout-preview .sheet-label{background:rgba(255,255,255,.14);color:#f3f4f6}
.blackout-preview-bg-row{margin-top:8px}
.blackout-preview-bg-row input{accent-color:#2563eb}
@media(max-width:700px){.blackout-option.is-enabled{display:block}.blackout-levels-inputs{grid-template-columns:1fr}}


/* TEST124: live blackout-mask preview overlay. */
.blackout-preview-layer{pointer-events:none;z-index:5;opacity:.72;mix-blend-mode:multiply;filter:contrast(1.08)}
.thumb:has(> .blackout-preview-layer)::after{content:"BLACKOUT";position:absolute;right:4px;bottom:4px;z-index:6;padding:2px 5px;border-radius:4px;background:rgba(15,23,42,.78);color:#fff;font-size:8px;font-weight:800;letter-spacing:.04em;pointer-events:none}

.blackout-color-row input[type="color"]{width:42px;height:34px;padding:0;border:1px solid #cbd5e1;border-radius:8px;background:#fff;cursor:pointer}


/* TEST137: standard Effects modal with live affected-art preview. */
.effects-modal{position:fixed;inset:0;z-index:2147482500;display:grid;place-items:center;padding:24px;pointer-events:auto}
.effects-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.52);backdrop-filter:blur(2px)}
.effects-dialog{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;z-index:1;width:min(1500px,calc(100vw - 24px));height:min(920px,calc(100vh - 24px));max-height:calc(100vh - 24px);overflow:hidden;background:#fff;border:1px solid #dbe3ed;border-radius:18px;box-shadow:0 24px 80px rgba(15,23,42,.32);pointer-events:auto;display:flex;flex-direction:column}
.effects-header{flex:0 0 auto}
.effects-layout{display:grid;grid-template-columns:minmax(440px,.9fr) minmax(560px,1.35fr);min-height:0;flex:1 1 auto}
.effects-body{overflow:auto;align-content:start;padding:16px;min-height:0}
.effects-preview{border-left:1px solid #e2e8f0;background:#f8fafc;padding:18px;display:flex;flex-direction:column;min-width:0;min-height:0}
.effects-preview-title{font-size:13px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.effects-preview-stage{flex:1 1 auto;min-height:420px;display:grid;place-items:center;border:1px solid #dbe3ed;border-radius:14px;background-color:#fff;background-image:linear-gradient(45deg,#eef2f7 25%,transparent 25%),linear-gradient(-45deg,#eef2f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f7 75%),linear-gradient(-45deg,transparent 75%,#eef2f7 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;overflow:hidden;padding:20px}
.effects-preview-thumb{position:relative!important;display:grid!important;place-items:center!important;width:100%!important;height:100%!important;min-height:380px!important;overflow:visible!important;background:transparent!important;border:0!important;border-radius:0!important}
.effects-preview-thumb>img{display:block;position:relative;z-index:1;max-width:100%;max-height:calc(100vh - 250px);width:auto!important;height:auto!important;object-fit:contain;transform:none!important;left:auto!important;top:auto!important}
.effects-preview-help{font-size:11px;line-height:1.45;color:#64748b;margin-top:10px}
body.effects-modal-open{overflow:hidden}
@media(max-width:1050px){.effects-modal{padding:10px}.effects-dialog{width:min(960px,calc(100vw - 20px));height:auto;max-height:calc(100vh - 20px)}.effects-layout{grid-template-columns:1fr}.effects-preview{border-left:0;border-top:1px solid #e2e8f0;min-height:260px}.effects-preview-stage{min-height:220px}.effects-preview-thumb{min-height:200px!important}.effects-body{max-height:48vh}}
@media(max-width:560px){.effects-dialog{width:calc(100vw - 12px)!important;max-height:calc(100vh - 12px)!important}.effects-modal{padding:6px}.effects-layout{display:block;overflow:auto}.effects-body{max-height:none}.effects-preview{min-height:240px}.effects-preview-stage{min-height:190px;padding:12px}}

/* TEST140: wider preview and headerless Effects modal. */
.effects-dialog{width:min(1660px,calc(100vw - 16px));height:min(960px,calc(100vh - 16px));max-height:calc(100vh - 16px)}
.effects-layout{grid-template-columns:minmax(390px,.68fr) minmax(720px,1.72fr)}
.effects-body{padding:20px 14px 16px 18px}
.effects-preview{padding:14px 18px 18px 18px}
.effects-preview-stage{min-height:520px;padding:12px}
.effects-preview-thumb{min-height:500px!important}
.effects-preview-thumb>img{max-height:calc(100vh - 150px)}
.effects-close-floating{position:absolute;top:10px;right:10px;z-index:20}
.effects-preview-title{padding-right:48px}
@media(max-width:1200px){.effects-layout{grid-template-columns:minmax(360px,.78fr) minmax(560px,1.45fr)}.effects-preview-stage{min-height:420px}.effects-preview-thumb{min-height:400px!important}}
@media(max-width:1050px){.effects-dialog{width:min(980px,calc(100vw - 16px));height:auto;max-height:calc(100vh - 16px)}.effects-layout{grid-template-columns:1fr}.effects-preview-stage{min-height:260px}.effects-preview-thumb{min-height:240px!important}.effects-preview-thumb>img{max-height:42vh}}

/* TEST141: force Effects content to use the full modal width; preview gets most of it. */
.effects-layout{width:100%;max-width:none;align-self:stretch;box-sizing:border-box;grid-template-columns:minmax(340px,28%) minmax(0,72%)}
.effects-body{min-width:0}
.effects-preview{width:100%;max-width:none;box-sizing:border-box}
.effects-preview-stage{width:100%;max-width:none;box-sizing:border-box}
.effects-preview-thumb{width:100%!important;max-width:none!important}
.effects-preview-thumb>img{max-width:100%!important}
@media(max-width:1350px){.effects-layout{grid-template-columns:minmax(330px,32%) minmax(0,68%)}}
@media(max-width:1050px){.effects-layout{width:100%;grid-template-columns:1fr}}

/* TEST146: overview floats independently so it can never push/hide the main ark. */
.sheet-preview-area{position:relative;display:block;width:100%;min-width:0}
.sheet-preview-area>.sheet-wrap{display:flex;justify-content:center;width:100%;min-width:0}
.sheet-overview{position:fixed;right:18px;top:170px;width:170px;max-height:calc(100vh - 190px);padding:10px;border:1px solid #dbe3ed;border-radius:12px;background:rgba(255,255,255,.97);box-shadow:0 8px 24px rgba(15,23,42,.18);z-index:35}
.sheet-overview[hidden]{display:none!important}
.sheet-overview-title{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;font:inherit;font-size:10px;font-weight:800;letter-spacing:.06em;color:#475569;margin-bottom:8px;cursor:pointer}
.sheet-overview-title::after{content:"−";float:right;font-size:13px;line-height:10px;color:#64748b}
.sheet-overview.is-collapsed .sheet-overview-title::after{content:"+"}
.sheet-overview-stage{display:flex;align-items:flex-start;justify-content:center;max-height:calc(100vh - 265px);overflow:hidden;border:1px solid #e2e8f0;border-radius:8px;background-image:linear-gradient(45deg,#f1f5f9 25%,transparent 25%),linear-gradient(-45deg,#f1f5f9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f5f9 75%),linear-gradient(-45deg,transparent 75%,#f1f5f9 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}
.sheet-overview-canvas{position:relative;width:145px;background:#fff;overflow:hidden}
.sheet-overview-item{position:absolute;overflow:hidden;background:transparent}
.sheet-overview-item img{width:100%;height:100%;object-fit:contain;display:block}
.sheet-overview-meta{font-size:9px;color:#64748b;text-align:center;margin-top:7px}
@media(max-width:1200px){
  .sheet-overview{display:block;right:8px;top:118px;width:112px;padding:7px;max-height:calc(100vh - 136px);z-index:45}
  .sheet-overview[hidden]{display:none!important}
  .sheet-overview-title{font-size:9px;margin-bottom:5px}
  .sheet-overview-stage{max-height:calc(100vh - 205px)}
  .sheet-overview-canvas{width:96px}
  .sheet-overview-meta{font-size:8px;margin-top:5px}
}
@media(max-width:700px){
  .sheet-overview{right:6px;top:104px;width:96px;padding:6px;border-radius:9px;background:rgba(255,255,255,.94);transition:width .16s ease,padding .16s ease}
  .sheet-overview-stage{max-height:42vh}
  .sheet-overview-canvas{width:80px}
  .sheet-overview-meta{font-size:7px}
  .sheet-overview.is-collapsed{width:auto;max-height:none;padding:0;border:0;background:transparent;box-shadow:none}
  .sheet-overview.is-collapsed .sheet-overview-title{width:auto;margin:0;padding:8px 10px;border:1px solid #dbe3ed;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 4px 14px rgba(15,23,42,.15);font-size:9px;white-space:nowrap}
  .sheet-overview.is-collapsed .sheet-overview-stage,.sheet-overview.is-collapsed .sheet-overview-meta{display:none}
  .sheet-overview.is-collapsed .sheet-overview-title::after{margin-left:6px}
}

/* TEST147: show the same DTF PDF page splits in the working preview. */
.dtf-preview-page{position:absolute;left:0;right:0;box-sizing:border-box;border-top:1px solid rgba(37,99,235,.20);border-bottom:1px solid rgba(37,99,235,.20);background:rgba(37,99,235,.025);pointer-events:none;z-index:8}
.dtf-preview-page:nth-of-type(even){background:rgba(15,23,42,.018)}
.dtf-preview-page-label{position:absolute;right:6px;top:5px;padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.92);border:1px solid #cbd5e1;color:#334155;font-size:10px;font-weight:800;line-height:1;box-shadow:0 1px 3px rgba(15,23,42,.08)}
.dtf-preview-page-cut{position:absolute;left:0;right:0;height:0;border-top:2px dashed #2563eb;pointer-events:none;z-index:12}
.dtf-preview-page-cut span{position:absolute;right:8px;top:-11px;padding:2px 6px;border-radius:5px;background:#2563eb;color:#fff;font-size:9px;font-weight:800;letter-spacing:.03em;white-space:nowrap}
.sheet-overview-page{position:absolute;left:0;right:0;box-sizing:border-box;margin:0;padding:0;border:1px solid rgba(37,99,235,.34);background:rgba(37,99,235,.025);cursor:pointer;z-index:6;appearance:none;-webkit-appearance:none}
.sheet-overview-page span{position:absolute;right:2px;top:2px;min-width:13px;height:13px;padding:0 2px;border-radius:4px;background:rgba(37,99,235,.88);color:#fff;font-size:8px;font-weight:800;line-height:13px;text-align:center}
.sheet-overview-page:hover,.sheet-overview-page:focus-visible{background:rgba(37,99,235,.11);border-color:rgba(37,99,235,.72);outline:none}
.sheet-overview-page:active{background:rgba(37,99,235,.17)}
.sheet-overview-page-cut{position:absolute;left:0;right:0;height:0;border-top:2px solid #2563eb;pointer-events:none;z-index:5}
.sheet-overview-item{z-index:2}

.order-normal-mode-btn{white-space:nowrap}
.order-normal-mode-btn[hidden]{display:none!important}

/* TEST155: admin production batch for unfinished orders. Each saved order PDF
   remains its own section and is never repacked together with another order. */
.orders-search-wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.orders-search-wrap .orders-search{flex:1 1 320px}
.orders-import-unfinished{border:0;border-radius:9px;background:#0f172a;color:#fff;font-weight:800;padding:10px 14px;cursor:pointer;white-space:nowrap}
.orders-import-unfinished:disabled{opacity:.55;cursor:wait}
.unfinished-batch-view{width:min(1180px,100%);margin:0 auto;padding:14px;box-sizing:border-box}
.unfinished-batch-view[hidden]{display:none!important}
.unfinished-batch-toolbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;margin-bottom:14px;border:1px solid #dbe3ec;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 6px 20px rgba(15,23,42,.08);backdrop-filter:blur(8px)}
.unfinished-batch-toolbar>div:first-child{display:flex;flex-direction:column;gap:2px}
.unfinished-batch-toolbar strong{font-size:14px;letter-spacing:.04em}
.unfinished-batch-toolbar span{font-size:12px;color:#64748b}
.unfinished-batch-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.unfinished-batch-list{display:flex;flex-direction:column;gap:18px}
.unfinished-order-card{border:1px solid #cbd5e1;border-radius:14px;background:#f8fafc;overflow:hidden;box-shadow:0 5px 16px rgba(15,23,42,.07)}
.unfinished-order-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;background:#fff;border-bottom:1px solid #e2e8f0}
.unfinished-order-head-main{min-width:0}
.unfinished-order-head strong{display:block;font-size:15px;color:#0f172a}
.unfinished-order-sub{margin-top:3px;font-size:12px;line-height:1.4;color:#64748b;overflow-wrap:anywhere}
.unfinished-order-open{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:8px 11px;font-weight:700;cursor:pointer;white-space:nowrap}
.unfinished-order-pages{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px}
.unfinished-order-page{width:min(100%,760px);background:#fff;border:1px solid #dbe3ec;border-radius:8px;padding:8px;box-sizing:border-box}
.unfinished-order-page-label{font-size:11px;font-weight:800;color:#64748b;margin:0 0 6px}
.unfinished-order-page canvas{display:block;max-width:100%;height:auto;margin:0 auto;background:#fff;box-shadow:0 1px 5px rgba(15,23,42,.12)}
.unfinished-order-loading,.unfinished-order-error{padding:22px;text-align:center;color:#64748b}
.unfinished-order-error{color:#b91c1c}
@media(max-width:700px){
  .orders-import-unfinished{width:100%}
  .unfinished-batch-view{padding:8px}
  .unfinished-batch-toolbar{align-items:stretch;flex-direction:column}
  .unfinished-batch-actions{justify-content:stretch}
  .unfinished-batch-actions button{flex:1 1 auto}
  .unfinished-order-head{flex-direction:column}
  .unfinished-order-open{width:100%}
  .unfinished-order-pages{padding:8px}
}


/* TEST156: prominent combined DTF roll length for unfinished-order batch. */
.unfinished-batch-total{display:inline-flex;align-items:center;width:max-content;margin-top:5px;padding:5px 9px;border-radius:999px;background:#eef2f7;color:#0f172a!important;font-size:13px!important;font-weight:800;letter-spacing:.02em}


/* TEST157: safe unfinished-order list controls. "Ta bort från listan" only
   removes the card from this temporary batch view; Klar uses the existing
   completed-order API and then removes the order from the unfinished list. */
.unfinished-order-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.unfinished-order-finished{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.unfinished-order-finished input{width:16px;height:16px;margin:0}
.unfinished-order-remove{border:1px solid #cbd5e1;background:#f8fafc;border-radius:8px;padding:8px 11px;font-weight:700;cursor:pointer;white-space:nowrap}
.unfinished-order-remove:hover{background:#eef2f7}
.unfinished-order-controls button:disabled,.unfinished-order-finished:has(input:disabled){opacity:.55;cursor:wait}
@media(max-width:700px){
  .unfinished-order-controls{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .unfinished-order-open{grid-column:1/-1;width:100%}
  .unfinished-order-remove{width:100%}
  .unfinished-order-finished{justify-content:center}
}


/* TEST159: compact unfinished-order overview. It is only a navigation/read-only
   view; each order remains separate and the detailed order PDFs stay unchanged. */
.unfinished-batch-overview{margin:0 0 16px;padding:12px;border:1px solid #dbe3ec;border-radius:12px;background:#fff}
.unfinished-batch-overview-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.unfinished-batch-overview-head strong{font-size:13px;letter-spacing:.05em;color:#0f172a}
.unfinished-batch-overview-head span{font-size:11px;color:#64748b}
.unfinished-batch-overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.unfinished-overview-item{display:grid;grid-template-columns:74px minmax(0,1fr);gap:10px;align-items:center;min-height:94px;padding:8px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;text-align:left;cursor:pointer}
.unfinished-overview-item:hover{border-color:#94a3b8;background:#f1f5f9}
.unfinished-overview-thumb{display:flex;align-items:center;justify-content:center;width:74px;height:76px;overflow:hidden;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#94a3b8;font-size:10px}
.unfinished-overview-thumb canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.unfinished-overview-copy{display:flex;min-width:0;flex-direction:column;gap:4px}
.unfinished-overview-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#0f172a}
.unfinished-overview-copy>span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:10px;line-height:1.25;color:#64748b}
.unfinished-overview-copy small{font-size:10px;font-weight:800;color:#334155}
.unfinished-overview-item-error{border-color:#fecaca;background:#fff7f7}
.unfinished-order-card-focus{outline:3px solid rgba(37,99,235,.28);outline-offset:3px}
@media(max-width:700px){
  .unfinished-batch-overview{padding:8px}
  .unfinished-batch-overview-head{align-items:flex-start;flex-direction:column;gap:2px}
  .unfinished-batch-overview-grid{display:flex;overflow-x:auto;gap:8px;padding-bottom:3px;scroll-snap-type:x proximity}
  .unfinished-overview-item{flex:0 0 205px;grid-template-columns:66px minmax(0,1fr);min-height:84px;scroll-snap-align:start}
  .unfinished-overview-thumb{width:66px;height:68px}
}


/* TEST160: admin user list and reseller tagging. */
.users-admin-modal[hidden]{display:none!important}
.users-admin-modal{position:fixed;inset:0;z-index:2147483650;display:flex;align-items:center;justify-content:center;padding:18px}
.users-admin-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(3px)}
.users-admin-dialog{position:relative;z-index:1;display:flex;flex-direction:column;width:min(920px,calc(100vw - 28px));max-height:min(780px,calc(100vh - 28px));overflow:hidden;border:1px solid #dbe3ed;border-radius:16px;background:#fff;box-shadow:0 24px 80px rgba(15,23,42,.3)}
.users-admin-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 15px;border-bottom:1px solid #e2e8f0}
.users-admin-header h2{margin:0 0 4px;font-size:21px;color:#0f172a}
.users-admin-sub{font-size:12px;line-height:1.45;color:#64748b}
.users-admin-close{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border:0;border-radius:999px;background:#f1f5f9;color:#dc2626;font:700 24px/1 Arial,sans-serif;cursor:pointer}
.users-admin-body{padding:16px 20px 20px;overflow:auto}
.users-admin-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.users-admin-toolbar input{flex:1 1 300px;min-width:0;height:42px;padding:9px 11px;border:1px solid #cbd5e1;border-radius:9px;font-size:13px;color:#0f172a;background:#fff}
.users-admin-toolbar span{font-size:11px;font-weight:800;color:#64748b;white-space:nowrap}
.users-admin-status{min-height:18px;margin:3px 0 8px;font-size:11px;font-weight:700;color:#15803d}
.users-admin-status.error{color:#b91c1c}
.users-admin-list{display:flex;flex-direction:column;gap:8px}
.users-admin-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(120px,.9fr) auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid #dbe3ed;border-radius:11px;background:#fff}
.users-admin-row.is-reseller{border-color:#bbf7d0;background:#f0fdf4}
.users-admin-identity{min-width:0}
.users-admin-name{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;font-weight:800;color:#0f172a}
.users-admin-name span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.users-admin-badge{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;background:#e2e8f0;color:#475569;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.users-admin-badge.admin{background:#dbeafe;color:#1d4ed8}
.users-admin-email,.users-admin-company,.users-admin-meta{margin-top:3px;overflow-wrap:anywhere;font-size:10px;line-height:1.35;color:#64748b}
.users-admin-company{font-size:11px;font-weight:700;color:#334155}
.users-admin-toggle{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;font-size:11px;font-weight:800;color:#334155;white-space:nowrap}
.users-admin-toggle input{width:18px;height:18px;margin:0;accent-color:#15803d}
.users-admin-toggle input:disabled{opacity:.5;cursor:wait}
.users-admin-empty{padding:20px;text-align:center;color:#64748b;font-size:12px}
body.users-admin-open{overflow:hidden}
@media(max-width:680px){.users-admin-modal{padding:8px}.users-admin-dialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}.users-admin-body{padding:12px}.users-admin-toolbar{align-items:stretch;flex-direction:column}.users-admin-toolbar span{align-self:flex-end}.users-admin-row{grid-template-columns:1fr auto}.users-admin-company-wrap{grid-column:1/-1;grid-row:2}.users-admin-toggle{grid-column:2;grid-row:1;align-self:start}.users-admin-header{padding:15px 14px 12px}}

.ark-kalender-overlay{position:fixed;inset:0;background:#111827a8;z-index:2147483700;display:grid;place-items:center;padding:16px}.ark-kalender-preview{background:#fff;border-radius:14px;padding:22px;max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 18px 60px #0005}.ark-kalender-preview h3{margin:0 0 8px}.ark-kalender-preview dl{display:grid;grid-template-columns:110px 1fr;gap:9px;margin:20px 0}.ark-kalender-preview dt{font-weight:700}.ark-kalender-preview dd{margin:0;overflow-wrap:anywhere}.ark-kalender-buttons{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.ark-kalender-error{color:#b91c1c}

/* Motif summary inside the Kalender confirmation dialog. */
.ark-kalender-motifs{margin:12px 0 18px;padding:12px;border:1px solid #dbe3ed;border-radius:10px;background:#f8fafc}.ark-kalender-motifs h4{margin:0 0 8px}.ark-kalender-motifs ul{margin:0;padding-left:20px}.ark-kalender-motifs li{margin:4px 0;overflow-wrap:anywhere}

/* TEST-170: Saved print sheet preview in Kalender confirmation */
.ark-kalender-preview{max-width:850px}
.ark-kalender-sheet{margin:14px 0;padding:12px;border:1px solid #dbe3ed;border-radius:10px;background:#f8fafc}
.ark-kalender-sheet h4{margin:0 0 10px}
.ark-kalender-sheet-view{max-height:48vh;overflow:auto;display:flex;justify-content:center;align-items:flex-start;background:white;border:1px solid #e2e8f0;border-radius:6px;padding:10px}
.ark-kalender-sheet-view canvas{display:block;max-width:100%;height:auto;box-shadow:0 2px 8px #0002}
.ark-kalender-sheet-nav{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:12px}
.ark-kalender-sheet-nav[hidden]{display:none}

/* TEST-179: viewport-anchored motif controls stay visible throughout long arks. */
.sheet-preview-area.has-selected-motif{position:relative;display:block}
.sheet-preview-area.has-selected-motif>.ark-selected-motif{position:fixed;left:var(--ark-motif-panel-left, 330px);top:100px;width:280px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 116px);overflow:auto;box-sizing:border-box;padding:12px;border:1px solid #d8dde6;border-radius:12px;background:#fff;box-shadow:0 6px 22px rgba(15,23,42,.10);z-index:25}
.sheet-preview-area.has-selected-motif>.sheet-wrap{display:flex;justify-content:center;width:100%;min-width:0}
.ark-selected-motif[hidden]{display:none!important}
.ark-selected-motif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12px;color:#334155;letter-spacing:.05em}
.ark-selected-motif-head button{border:1px solid #d8dde6;border-radius:7px;background:#fff;color:#334155;padding:4px 9px;cursor:pointer;font-size:18px}
.ark-selected-motif .motif-card{min-width:0}
.ark-selected-motif .motif-card-detail{display:block!important}
.ark-preview-motif{cursor:pointer}
.ark-preview-motif-selected{outline:3px solid #2563eb;outline-offset:1px;z-index:6!important}
.ark-preview-motif:focus-visible{outline:3px solid #2563eb;outline-offset:1px;z-index:6!important}
@media(max-width:800px){.sheet-preview-area.has-selected-motif>.ark-selected-motif{position:fixed;left:12px;top:90px;width:min(280px,calc(100vw - 24px));max-height:calc(100dvh - 110px);z-index:200}}

/* TEST-187: checkerboard behind transparent white artwork in admin batch previews. */
.unfinished-overview-thumb,.unfinished-order-page canvas{background-color:#fff;background-image:linear-gradient(45deg,#d9dde4 25%,transparent 25%),linear-gradient(-45deg,#d9dde4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9dde4 75%),linear-gradient(-45deg,transparent 75%,#d9dde4 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0!important}
.unfinished-order-pages[hidden]{display:none!important}
.unfinished-order-toggle{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:8px 11px;font-weight:700;cursor:pointer;white-space:nowrap}
.unfinished-order-toggle:hover{background:#eef2f7}

/* TEST-188: checkerboard behind expanded PDF pages. */
.unfinished-order-page{background-color:#fff;background-image:linear-gradient(45deg,#d9dde4 25%,transparent 25%),linear-gradient(-45deg,#d9dde4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9dde4 75%),linear-gradient(-45deg,transparent 75%,#d9dde4 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.unfinished-order-page canvas{background:transparent!important}
.unfinished-order-page-label{background:#fff;display:table;padding:2px 5px;border-radius:4px}

/* TEST-189: Floating return-to-top control for long print sheets. */
.ark-back-to-top{position:fixed;right:22px;bottom:22px;z-index:220;border:0;border-radius:999px;padding:11px 16px;background:#1e293b;color:#fff;box-shadow:0 5px 18px rgba(15,23,42,.32);font:700 13px Arial,Helvetica,sans-serif;cursor:pointer;display:flex;align-items:center;gap:7px}
.ark-back-to-top[hidden]{display:none!important}
.ark-back-to-top:hover{background:#334155}
.ark-back-to-top:focus-visible{outline:3px solid #60a5fa;outline-offset:3px}
@media(max-width:600px){.ark-back-to-top{right:12px;bottom:12px;padding:11px 13px}}

/* TEST-195: Profile modal must remain scrollable to its Save button on phones.
   Scroll the overlay itself so mobile browser chrome/keyboard cannot trap the footer. */
.profile-modal.open{
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
}
.profile-modal .profile-dialog{
  flex:0 0 auto;
  box-sizing:border-box;
  margin:auto 0;
  max-height:none !important;
  overflow:visible !important;
}
@media(max-width:600px){
  .profile-modal.open{
    padding:10px 8px calc(20px + env(safe-area-inset-bottom, 0px));
    min-height:0;
  }
  .profile-modal .profile-dialog{
    width:100% !important;
    max-width:560px !important;
  }
  .profile-modal .profile-form{
    padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px));
  }
}

/* TEST-196: Keep the profile heading at the top on narrow viewports.
   TEST-195's auto vertical margins could center a taller-than-screen dialog,
   clipping the header above the overlay's scroll origin. */
.profile-modal.open{
  align-items:flex-start !important;
  justify-content:center;
  height:100dvh;
  max-height:100dvh;
  overflow-x:hidden;
  overflow-y:auto;
}
.profile-modal .profile-dialog{
  margin:0 auto !important;
  flex-shrink:0;
}
@media(max-width:600px){
  .profile-modal.open{
    padding-top:calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* TEST-200: readable lines for the single required checkout confirmation. */
.checkout-confirm .checkout-confirm-lines{display:block;flex:1;min-width:0}
.checkout-confirm .checkout-confirm-lines > span{display:block}
.checkout-confirm .checkout-confirm-lines > span + span{margin-top:8px}

/* Admin: indicative DTF film/ink contribution from historical Instant Peel costs. */
.order-earnings-estimate{margin-top:7px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;max-width:100%;overflow:hidden;}
.order-earnings-estimate summary{display:flex;align-items:center;flex-wrap:wrap;gap:7px;cursor:pointer;padding:8px 10px;list-style:none;}
.order-earnings-estimate summary::-webkit-details-marker{display:none;}
.order-earnings-estimate summary:focus-visible{outline:2px solid #15803d;outline-offset:-3px;}
.order-earnings-estimate summary span:first-child{color:#166534;font-size:12px;font-weight:650;}
.order-earnings-estimate summary strong{font-size:15px;color:#14532d;margin-left:auto;}
.order-earnings-expand{font-size:11px;color:#166534;white-space:nowrap;}
.order-earnings-expand:after{content:' ▾';}
.order-earnings-estimate[open] .order-earnings-expand:after{content:' ▴';}
.order-earnings-details{padding:0 10px 9px;}
.order-earnings-details table{width:100%;border-collapse:collapse;font-size:12px;color:#334155;}
.order-earnings-details th,.order-earnings-details td{padding:5px 2px;border-bottom:1px solid #d1fae5;}
.order-earnings-details th{text-align:left;font-weight:500;}
.order-earnings-details td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.order-earnings-details .order-earnings-total th,.order-earnings-details .order-earnings-total td{font-weight:750;color:#14532d;border-bottom:0;}
.order-earnings-details p{font-size:11px;line-height:1.4;color:#475569;margin:7px 0 0;}


/* TEST-204: Admin read-only DTF material profitability overview */
.orders-profit-dashboard{border:1px solid #cbd5e1;border-radius:12px;margin:0 0 16px;background:#f8fafc;color:#172033;overflow:hidden}
.orders-profit-dashboard>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;padding:14px 16px;list-style:none}
.orders-profit-dashboard>summary::-webkit-details-marker{display:none}
.orders-profit-dashboard>summary span{font-size:12px;color:#475569}
.orders-profit-dashboard[open]>summary{border-bottom:1px solid #e2e8f0}
.profit-filters{display:flex;flex-wrap:wrap;gap:12px;padding:14px 16px 0}
.profit-filters label{display:flex;flex-direction:column;gap:4px;color:#475569;font-size:12px}
.profit-filters select{border:1px solid #cbd5e1;border-radius:7px;background:white;color:#172033;padding:8px;max-width:100%}
.profit-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:16px}
.profit-kpi{background:white;border:1px solid #e2e8f0;border-radius:9px;padding:12px;min-width:0}
.profit-kpi span{display:block;font-size:12px;color:#64748b;margin-bottom:5px}
.profit-kpi strong{display:block;font-size:17px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.profit-chart{padding:0 16px 12px}
.profit-chart-title{font-size:12px;font-weight:600;margin-bottom:10px}
.profit-bars{display:flex;gap:3px;align-items:flex-end;height:140px;overflow-x:auto;padding-bottom:5px}
.profit-bar-wrap{height:100%;min-width:20px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}
.profit-bar{width:min(100%,34px);background:#0d9488;border-radius:3px 3px 0 0;flex-shrink:0;max-height:calc(100% - 20px)}
.profit-bar.negative{background:#dc2626}
.profit-bar-wrap small{font-size:9px;color:#64748b;white-space:nowrap}
.profit-note{font-size:11px;line-height:1.55;color:#64748b;margin:0;padding:0 16px 16px}
@media(max-width:740px){.profit-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.profit-kpi strong{font-size:15px}}

/* TEST-205: Navigate historical calendar weeks and months */
.profit-navigation{display:flex;align-items:center;gap:8px;flex-wrap:wrap;align-self:flex-end}
.profit-navigation strong{font-size:12px;color:#172033;font-variant-numeric:tabular-nums;min-width:155px;text-align:center}
.profit-navigation button{border:1px solid #cbd5e1;border-radius:7px;background:white;color:#172033;padding:8px 10px;cursor:pointer;font-size:12px}
.profit-navigation button:disabled{opacity:.4;cursor:default}
.profit-navigation button[hidden]{display:none}
@media(max-width:740px){.profit-navigation{width:100%;justify-content:space-between}.profit-navigation strong{min-width:0;flex:1}}

/* TEST-206: fixed, collapsible, non-blocking artwork preflight */
.txpark-preflight{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:8500;width:min(365px,calc(100vw - 24px));background:#fff;color:#172033;border:1px solid #cbd5e1;box-shadow:0 8px 32px rgba(15,23,42,.2);border-radius:12px;overflow:hidden;font:13px/1.45 system-ui,sans-serif}
.txpark-preflight-toggle{width:100%;display:flex;align-items:center;gap:9px;padding:11px 13px;border:0;background:#f8fafc;color:#172033;text-align:left;cursor:pointer}
.txpark-preflight-title{font-weight:750}.txpark-preflight-count{margin-left:auto;font-size:12px;color:#475569}.txpark-preflight-chevron{font-size:17px}.txpark-preflight-dot{width:9px;height:9px;border-radius:50%;background:#16a34a;flex:none}.txpark-preflight-alert .txpark-preflight-dot{background:#f59e0b}
.txpark-preflight-body{padding:12px;max-height:min(48vh,370px);overflow:auto;overscroll-behavior:contain}.txpark-preflight-body[hidden]{display:none}.txpark-preflight-hint{margin:0 0 10px;color:#64748b;font-size:12px}.txpark-preflight-results{display:grid;gap:9px}.txpark-preflight-item{display:grid;gap:2px;border-left:3px solid #f59e0b;padding:6px 9px;background:#fffbeb;border-radius:4px;overflow-wrap:anywhere}.txpark-preflight-item strong{font-size:12px}.txpark-preflight-info{border-left-color:#94a3b8;background:#f8fafc}.txpark-preflight-bad{border-left-color:#dc2626;background:#fff1f2}
@media(max-width:680px){.txpark-preflight{right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:min(315px,calc(100vw - 20px))}.txpark-preflight-body{max-height:38vh}}

/* TEST-208: unobtrusive preflight chip, preserving long-ark right-hand overview. */
.txpark-preflight:not(.txpark-preflight-open){width:max-content;max-width:min(200px,calc(100vw - 24px));border-radius:999px;box-shadow:0 3px 12px rgba(15,23,42,.14)}
.txpark-preflight:not(.txpark-preflight-open) .txpark-preflight-toggle{padding:7px 10px;gap:6px;white-space:nowrap;border-radius:999px}
.txpark-preflight:not(.txpark-preflight-open) .txpark-preflight-title{font-size:12px}
.txpark-preflight:not(.txpark-preflight-open) .txpark-preflight-count{font-size:11px;margin-left:0}
.txpark-preflight:not(.txpark-preflight-open) .txpark-preflight-chevron{font-size:12px}
.txpark-preflight.txpark-preflight-open{width:min(310px,calc(100vw - 24px))}
.txpark-preflight.txpark-preflight-open .txpark-preflight-body{max-height:min(30vh,260px)}
@media(max-width:680px){.txpark-preflight:not(.txpark-preflight-open){max-width:min(180px,calc(100vw - 20px))}.txpark-preflight.txpark-preflight-open{width:min(290px,calc(100vw - 20px))}.txpark-preflight.txpark-preflight-open .txpark-preflight-body{max-height:28vh}}

/* TEST-209: preflight must not inherit the app's full-height sidebar styling. */
#txparkPreflight.txpark-preflight{
  position:fixed!important;top:auto!important;left:auto!important;
  right:max(12px,env(safe-area-inset-right))!important;
  bottom:max(14px,env(safe-area-inset-bottom))!important;
  height:fit-content!important;min-height:0!important;max-height:min(55vh,400px)!important;
  padding:0!important;margin:0!important;overflow:hidden!important;
  box-sizing:border-box!important;display:block!important;
  width:min(310px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;
  border:1px solid #cbd5e1!important; border-radius:12px!important;
}
#txparkPreflight.txpark-preflight:not(.txpark-preflight-open){
  width:max-content!important;max-width:min(200px,calc(100vw - 24px))!important;
  max-height:44px!important;border-radius:999px!important;
}
#txparkPreflight.txpark-preflight .txpark-preflight-body[hidden]{display:none!important}
#txparkPreflight.txpark-preflight .txpark-preflight-toggle{margin:0!important;min-height:0!important}
@media(max-width:680px){
  #txparkPreflight.txpark-preflight{right:10px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;width:min(290px,calc(100vw - 20px))!important}
  #txparkPreflight.txpark-preflight:not(.txpark-preflight-open){max-width:min(180px,calc(100vw - 20px))!important}
}

/* TEST-210: Reserve a separate bottom control lane beneath Hela arket.
   The overview must never extend under Filkontroll or Till toppen. */
@media(min-width:701px){
  #sheetOverview.sheet-overview{max-height:calc(100dvh - 250px);bottom:72px;box-sizing:border-box}
  #sheetOverview .sheet-overview-stage{max-height:calc(100dvh - 325px)}
  #arkBackToTop.ark-back-to-top{right:225px;bottom:max(14px,env(safe-area-inset-bottom))}
  body:has(#txparkPreflight.txpark-preflight-open) #arkBackToTop.ark-back-to-top{right:330px}
}
@media(min-width:701px) and (max-width:1200px){
  #sheetOverview.sheet-overview{max-height:calc(100dvh - 190px)}
  #sheetOverview .sheet-overview-stage{max-height:calc(100dvh - 258px)}
}
@media(max-width:700px){
  #arkBackToTop.ark-back-to-top{right:auto;left:10px;bottom:max(10px,env(safe-area-inset-bottom))}
  #sheetOverview.sheet-overview{max-height:calc(100dvh - 185px);bottom:62px;box-sizing:border-box}
  #sheetOverview .sheet-overview-stage{max-height:min(42vh,calc(100dvh - 245px))}
}

/* TEST-213: per-order read-only preflight in unfinished batch view. */
.unfinished-preflight-wrap{padding:8px 14px;background:#fff;border-bottom:1px solid #e2e8f0}
.unfinished-preflight{border:1px solid #cbd5e1;border-radius:9px;background:#f8fafc;color:#334155;font-size:12px}
.unfinished-preflight summary{padding:9px 12px;cursor:pointer;font-weight:750;list-style:revert}
.unfinished-preflight-alert{background:#fffbeb;border-color:#fbbf24}
.unfinished-preflight-unknown{background:#f8fafc}
.unfinished-preflight-results{padding:0 12px 10px;display:grid;gap:7px;overflow-wrap:anywhere}
.unfinished-preflight-warn{border-left:3px solid #d97706;padding:5px 8px;background:#fff7ed}
.unfinished-preflight-info{border-left:3px solid #94a3b8;padding:5px 8px;background:#fff}

/* TEST222: status only. No CSS effect approximations on print composites. */
.effects-preview-thumb[data-effects-state="loading"]::after{
 content:"Effekter ber\00e4knas...";position:absolute;inset:0;display:grid;place-items:center;
 font-size:14px;color:#475569;pointer-events:none;
}
.artwork-effects-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 padding:4px;text-align:center;font-size:11px;color:#b91c1c;background:rgba(255,255,255,.90);pointer-events:none;}

/* TEST-224: admin-only user-gallery switch; other accounts are read-only. */
.gallery-admin-switch{display:flex;flex-direction:column;gap:4px;min-width:190px;max-width:290px;color:#475569;font:700 11px/1.2 system-ui,sans-serif}
.gallery-admin-switch select{height:38px;width:100%;min-width:0;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#0f172a;padding:7px 9px;font:600 12px/1.2 system-ui,sans-serif}
.gallery-admin-notice{flex:1 1 100%;color:#775a19;background:#fff9e6;border:1px solid #f5dda0;padding:8px 10px;border-radius:9px;font:600 12px/1.4 system-ui,sans-serif}
.gallery-admin-notice[hidden]{display:none!important}
.gallery-modal.is-admin-view .gallery-upload-btn,.gallery-modal.is-admin-view #galleryNewFolderBtn,.gallery-modal.is-admin-view #gallerySplitVectorBtn,.gallery-modal.is-admin-view .gallery-delete,.gallery-modal.is-admin-view .gallery-folder-delete,.gallery-modal.is-admin-view .gallery-move-controls{display:none!important}
.gallery-modal.is-admin-view .gallery-card .gallery-select{cursor:pointer}
@media(max-width:700px){.gallery-admin-switch{min-width:0;max-width:none;width:100%}.gallery-toolbar{gap:8px!important}}

/* TEST-226 — Group galleries */
.gallery-group-controls {display:flex;gap:10px;align-items:end;flex-wrap:wrap;padding:10px 0 4px}
.gallery-group-controls label {display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:#334155}
.gallery-group-controls select {min-width:230px;max-width:100%;padding:9px;border:1px solid #cbd5e1;border-radius:9px;background:white}
.gallery-group-controls button {min-height:36px}
.gallery-group-invitations {display:grid;gap:6px;padding:7px 0}
.gallery-group-invite {display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:7px 10px;background:#edf6ff;border-radius:7px;font-size:13px}
.gallery-group-invite span {margin-right:auto;font-weight:600}
.gallery-group-invite button {cursor:pointer;padding:6px 10px;border-radius:7px;border:1px solid #9bb6db;background:white;color:#1f3b68}
.gallery-group-notice {padding:8px 10px;background:#eef6ff;border:1px solid #b7d2fb;border-radius:8px;color:#244b80;font-size:12px}

/* TEST-227 — Group management popup, opened from the gallery header. */
.gallery-header-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.gallery-groups-trigger{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 13px;border:1px solid #b8c7db;border-radius:10px;background:#f5f8fd;color:#18375c;font:750 13px/1.2 system-ui,sans-serif;cursor:pointer}
.gallery-groups-trigger:hover{background:#eaf2ff}
.gallery-groups-trigger:focus-visible,.gallery-groups-modal button:focus-visible,.gallery-groups-modal input:focus-visible,.gallery-groups-modal select:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.gallery-groups-count{display:inline-flex;justify-content:center;align-items:center;min-width:20px;min-height:20px;padding:1px 5px;background:#e2e8f0;color:#0f172a;border-radius:999px;font-size:11px}
.gallery-groups-count[hidden],.gallery-groups-modal[hidden],.gallery-groups-section[hidden],.gallery-groups-status[hidden]{display:none!important}
.gallery-group-controls{padding:0;align-items:center}
.gallery-group-controls label{display:flex;flex-direction:row;align-items:center;gap:9px}
.gallery-group-controls select{min-width:180px;max-width:270px;padding:8px;height:38px}
.gallery-groups-modal{position:fixed;inset:0;z-index:100200;display:flex;align-items:center;justify-content:center;padding:16px}
.gallery-groups-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.61);backdrop-filter:blur(2px)}
.gallery-groups-dialog{position:relative;z-index:1;width:min(790px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;overflow:hidden;background:#fff;color:#0f172a;border-radius:16px;box-shadow:0 24px 80px rgba(15,23,42,.32);border:1px solid #dbe3ec;font-family:system-ui,sans-serif}
.gallery-groups-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:19px 22px;border-bottom:1px solid #e2e8f0}
.gallery-groups-header h2{margin:0 0 4px;font-size:20px;line-height:1.25}
.gallery-groups-header p{margin:0;color:#64748b;font-size:12px;line-height:1.5}
.gallery-groups-close{flex:0 0 auto;display:grid;place-items:center;min-width:36px;min-height:36px;border:0;border-radius:50%;background:#f1f5f9;font-size:26px;line-height:1;color:#334155;cursor:pointer}
.gallery-groups-body{overflow:auto;overscroll-behavior:contain;padding:14px 22px 24px;display:grid;gap:16px}
.gallery-groups-section{padding:14px 16px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;min-width:0}
.gallery-groups-section h3{font-size:14px;font-weight:800;margin:0 0 11px;color:#0f172a}
.gallery-groups-list{display:grid;gap:9px}
.gallery-groups-item{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;padding:9px 12px;border-radius:9px;background:#f8fafc;border:1px solid #e2e8f0}
.gallery-groups-item-details{min-width:0;display:grid;gap:3px}
.gallery-groups-item-details strong{font-size:13px;overflow-wrap:anywhere}
.gallery-groups-item-details span{font-size:11px;color:#64748b;overflow-wrap:anywhere}
.gallery-groups-item-actions{display:flex;flex-wrap:wrap;gap:7px}
.gallery-groups-action,.gallery-groups-form button{min-height:36px;white-space:nowrap;padding:8px 11px;border-radius:8px;border:1px solid #9ab2d2;color:#183e73;background:#edf4ff;font:750 12px/1.2 system-ui,sans-serif;cursor:pointer}
.gallery-groups-action:hover,.gallery-groups-form button:hover{background:#dbeafe}
.gallery-groups-action.is-muted{background:#fff;border-color:#cbd5e1;color:#475569}
.gallery-groups-action:disabled,.gallery-groups-form button:disabled{opacity:.55;cursor:wait}
.gallery-groups-form{display:grid;gap:8px}
.gallery-groups-form label,.gallery-groups-members-label{font-size:12px;font-weight:700;color:#334155}
.gallery-groups-form input,.gallery-groups-form select,.gallery-groups-section>select{width:100%;max-width:100%;min-height:38px;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a;padding:8px 10px;font:600 13px/1.3 system-ui,sans-serif}
.gallery-groups-form-row{display:flex;gap:8px;align-items:stretch}
.gallery-groups-form-row input{flex:1;min-width:0}
.gallery-groups-form button{flex:0 0 auto}
.gallery-groups-help,.gallery-groups-empty{font-size:12px;line-height:1.5;margin:0;color:#64748b}
.gallery-groups-status{padding:10px 12px;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:9px;font-size:12px;font-weight:650}
.gallery-groups-status.is-error{background:#fff1f2;border-color:#fecdd3;color:#be123c}
.gallery-groups-members-label{display:block;margin:3px 0 7px}
#galleryGroupsMembersList{margin-top:10px}
.gallery-groups-pending{font-size:12px;color:#64748b}
@media(max-width:700px){
  .gallery-header{align-items:center;gap:8px;padding:12px!important}
  .gallery-header-actions{gap:7px}
  .gallery-groups-trigger{min-height:34px;padding:7px 9px;font-size:12px}
  .gallery-group-controls,.gallery-group-controls label{width:100%}
  .gallery-group-controls select{max-width:none;flex:1;min-width:0}
  .gallery-groups-modal{padding:8px}
  .gallery-groups-dialog{max-height:calc(100dvh - 16px)}
  .gallery-groups-header{padding:14px}
  .gallery-groups-body{padding:12px;gap:11px}
  .gallery-groups-section{padding:12px}
  .gallery-groups-item{flex-wrap:wrap}
  .gallery-groups-item-actions{width:100%}
  .gallery-groups-form-row{flex-wrap:wrap}
  .gallery-groups-form-row button{width:100%}
}

/* TEST-227: Main account-bar group shortcut. */
.account-groups-btn{white-space:nowrap}

/* TEST-228: share selected original motifs to a group without moving personal files */
.gallery-footer-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.gallery-share-btn{min-height:42px;padding:10px 15px;border:1px solid #a7bcdd;border-radius:9px;background:#edf4ff;color:#173765;font:750 13px/1.2 system-ui,sans-serif;cursor:pointer}
.gallery-share-btn:hover:not(:disabled){background:#dceaff}
.gallery-share-btn:disabled{opacity:.45;cursor:not-allowed}
.gallery-share-modal[hidden],.gallery-share-status[hidden]{display:none!important}
.gallery-share-modal{position:fixed;inset:0;z-index:100300;display:flex;align-items:center;justify-content:center;padding:15px}
.gallery-share-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.56)}
.gallery-share-dialog{position:relative;z-index:1;max-height:calc(100dvh - 30px);overflow:auto;width:min(440px,100%);padding:22px;border-radius:14px;background:#fff;color:#0f172a;box-shadow:0 20px 70px rgba(15,23,42,.32);font-family:system-ui,sans-serif}
.gallery-share-dialog h2{font-size:19px;margin:0 0 8px}
.gallery-share-dialog p{font-size:13px;color:#475569;line-height:1.5;margin:0 0 17px}
.gallery-share-dialog form{display:grid;gap:10px}
.gallery-share-dialog label{font-size:12px;font-weight:750}
.gallery-share-dialog select{width:100%;min-height:42px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#0f172a;padding:8px 10px;font:600 13px system-ui,sans-serif}
.gallery-share-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:8px}
.gallery-share-actions button{min-height:40px;border:1px solid #a7bcdd;border-radius:9px;padding:10px 14px;background:#fff;color:#173765;font:750 13px system-ui,sans-serif;cursor:pointer}
.gallery-share-actions button[type=submit]{background:#163b70;color:#fff;border-color:#163b70}
.gallery-share-actions button:disabled{opacity:.55;cursor:wait}
.gallery-share-status{overflow-wrap:anywhere;font-size:12px;line-height:1.5;padding:10px;border-radius:9px;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8}
.gallery-share-status.is-error{border-color:#fecdd3;background:#fff1f2;color:#be123c}
.gallery-share-modal button:focus-visible,.gallery-share-modal select:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
@media(max-width:600px){.gallery-footer-actions{width:100%;flex-direction:column}.gallery-footer-actions .gallery-share-btn,.gallery-footer-actions .gallery-add-btn{width:100%}.gallery-share-dialog{padding:17px}}
/* TEST-230: variable HTML / SVG motif editor */
.variable-motif-create {white-space:nowrap;}
.variable-motif-modal[hidden]{display:none!important}
.variable-motif-modal{position:fixed;inset:0;z-index:2147482300;display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box}
.variable-motif-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.7)}
.variable-motif-dialog{position:relative;display:flex;flex-direction:column;width:min(1500px,96vw);height:min(900px,95vh);border-radius:16px;background:#fff;box-shadow:0 25px 90px rgba(0,0,0,.36);overflow:hidden;color:#172033}
.variable-motif-header{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 20px;border-bottom:1px solid #e2e8f0}
.variable-motif-header h2{font-size:20px;line-height:1.2;margin:0 0 4px;font-weight:750}.variable-motif-header p{margin:0;color:#64748b;font-size:12px}
.variable-motif-header button{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:50%;font-size:24px;color:#b91c1c;background:#f1f5f9;cursor:pointer}
.variable-motif-body{flex:1;display:grid;grid-template-columns:minmax(360px,1.04fr) minmax(320px,.96fr);min-height:0}
.variable-motif-editor,.variable-motif-right{overflow:auto;padding:14px 18px;min-height:0}
.variable-motif-editor{border-right:1px solid #e2e8f0}
.variable-motif-editor label,.variable-motif-right label{display:flex;flex-direction:column;gap:6px;font-weight:650;color:#334155;font-size:12px}
.variable-motif-tools{display:grid;grid-template-columns:1fr 110px 110px;gap:8px;margin-bottom:10px}
.variable-motif-editor :is(input,select,textarea),.variable-motif-right :is(input,select){min-width:0;width:100%;border:1px solid #cbd5e1;background:#fff;border-radius:7px;padding:9px;color:#0f172a;font-family:inherit;box-sizing:border-box}
.variable-motif-editor textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.5;resize:vertical;tab-size:2}
.variable-motif-input-label{margin:12px 0 0}
.variable-motif-template-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.variable-motif-template-actions button,.variable-motif-import{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;border:1px solid #cbd5e1!important;background:#f8fafc!important;border-radius:8px!important;padding:8px 10px!important;color:#334155!important;font:650 12px system-ui,sans-serif!important;cursor:pointer!important}
.variable-motif-import input[hidden]{display:none!important}
.variable-motif-right{display:flex;flex-direction:column;gap:10px}
.variable-motif-row-controls{display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:8px}.variable-motif-row-controls span{color:#64748b;font-size:12px}
.variable-motif-preview{flex:0 0 auto;display:flex;align-items:center;justify-content:center;max-height:430px;min-height:210px;border:1px dashed #cbd5e1;border-radius:12px;padding:12px;overflow:auto;background:repeating-conic-gradient(#e8edf4 0 25%,#fff 0 50%) 50%/16px 16px}
.variable-motif-frame{border:0;display:block;max-width:100%;max-height:405px;width:100%;height:auto;aspect-ratio:280/300;background:transparent}
.variable-motif-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.variable-motif-note{font-size:12px;line-height:1.4;color:#64748b;margin:0}
.variable-motif-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid #e2e8f0}
.variable-motif-footer button{min-height:38px;padding:9px 12px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:#334155;font-weight:700;cursor:pointer}
#variableMotifSaveAll{background:#111827;color:#fff;border-color:#111827}
#variableMotifSaveOne{background:#e8f2ff;border-color:#bfdbfe;color:#1d4ed8}
.variable-motif-footer button:disabled{opacity:.45;cursor:wait}
.variable-motif-status{margin-right:auto;font-size:12px;color:#15803d;flex:1;min-width:220px}
.variable-motif-status.error{color:#b91c1c}
@media(max-width:780px){
.variable-motif-modal{padding:5px}.variable-motif-dialog{width:100%;height:98dvh;border-radius:10px}
.variable-motif-body{grid-template-columns:1fr}.variable-motif-editor{border-right:0;border-bottom:1px solid #e2e8f0;max-height:50dvh}.variable-motif-right{min-height:36dvh;max-height:45dvh}
.variable-motif-tools{grid-template-columns:1fr 90px 90px}.variable-motif-preview{min-height:180px;max-height:250px}.variable-motif-frame{max-height:225px}
.variable-motif-footer{padding:10px}.variable-motif-status{flex-basis:100%}
}

.variable-motif-modal [hidden]{display:none!important}

/* TEST-231: fixed-size logical HTML/SVG artboard, scaled as a single preview. */
.variable-motif-preview-stage{position:relative;flex:0 0 auto;overflow:hidden;max-width:100%;}
.variable-motif-preview-stage .variable-motif-frame{position:absolute;inset:0;border:0;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;transform-origin:top left;display:block;background:transparent;}

/* TEST-232: compact responsive gallery actions. */
.gallery-toolbar{flex-wrap:wrap !important;align-items:center !important}
.gallery-controls-row{flex-wrap:wrap !important;gap:8px !important}
.gallery-tools-menu{position:relative;flex:0 0 auto;min-width:0;z-index:20}
.gallery-tools-menu>summary{display:flex;align-items:center;gap:6px;list-style:none;user-select:none;cursor:pointer;min-height:38px !important;height:38px !important;padding:7px 12px !important;white-space:nowrap}
.gallery-tools-menu>summary::-webkit-details-marker{display:none}
.gallery-tools-menu[open]>summary{background:#eff6ff;border-color:#93c5fd}
.gallery-tools-panel{position:absolute;z-index:21;right:0;top:calc(100% + 5px);min-width:240px;max-width:min(320px,calc(100vw - 24px));padding:7px;border:1px solid #cbd5e1;border-radius:11px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.18);display:grid;gap:6px}
.gallery-tools-panel .gallery-folder-btn{width:100%;height:auto !important;min-height:38px !important;white-space:normal;text-align:left}
.gallery-controls-row .gallery-search-wrap{flex:1 1 220px;min-width:170px !important}
@media(max-width:700px){
 .gallery-controls-row{flex:1 1 100% !important;display:flex !important;flex-direction:row !important;align-items:center !important}
 .gallery-tools-menu{flex:1 1 auto}
 .gallery-tools-menu>summary{justify-content:center}
 .gallery-controls-row .gallery-search-wrap{flex:1 1 100%;width:100%;min-width:0 !important;margin-left:0 !important}
 .gallery-controls-row #galleryNewFolderBtn{flex:1 1 auto;width:auto !important}
 .gallery-tools-panel{right:0}
}

/* TEST-237: variable HTML artboard auto-size */
.variable-auto-size-option{grid-column:1/-1;display:flex!important;align-items:center;gap:8px;font-size:13px;}
.variable-auto-size-option input{width:17px;height:17px;flex:none;}

/* TEST-240 visual HTML + Ace code views */
.variable-edit-switch{display:flex;gap:6px;margin-top:13px}.variable-edit-switch button,.variable-visual-toolbar button{border:1px solid #cbd5e1;border-radius:7px;background:#f8fafc;padding:8px 11px;color:#334155;font-weight:700;cursor:pointer}
.variable-edit-switch button[aria-pressed="true"]{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}
.variable-visual-toolbar{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;padding:6px;border:1px solid #cbd5e1;border-radius:8px 8px 0 0;background:#f8fafc}
.variable-visual-toolbar button{padding:6px 9px;background:white}.variable-visual-surface{min-height:240px;border:1px solid #cbd5e1;border-top:0;border-radius:0 0 8px 8px;padding:14px;background:white;color:#0f172a;outline-offset:-2px;overflow:auto;white-space:normal}
.variable-visual-note{font-size:12px;color:#64748b}.variable-ace-host{height:240px;width:100%;border:1px solid #cbd5e1;border-radius:8px;margin-top:5px;box-sizing:border-box}
.variable-ace-fallback{display:none!important}.variable-motif-input-label:has(.variable-ace-host){display:block!important}
@media(max-width:780px){.variable-ace-host{height:190px}.variable-visual-surface{min-height:185px}}

/* TEST-241: Tools menu opens under the trigger towards the right, not outside gallery at left. */
.gallery-tools-menu .gallery-tools-panel{left:0 !important;right:auto !important;box-sizing:border-box;}
@media(max-width:700px){.gallery-tools-menu .gallery-tools-panel{left:0 !important;right:auto !important;max-width:min(320px,calc(100vw - 40px));}}

/* TEST-242: compact rich-formatting controls that wrap on mobile */
.variable-visual-toolbar{align-items:center;gap:7px}
.variable-visual-toolbar label{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;color:#334155;white-space:nowrap}
.variable-visual-toolbar select,.variable-visual-toolbar input{min-height:32px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;padding:3px 6px;font:inherit;color:#0f172a}
.variable-visual-toolbar select{max-width:160px}.variable-visual-toolbar input[type=number]{width:65px}.variable-visual-toolbar input[type=color]{padding:2px;width:38px;height:32px;cursor:pointer}
@media(max-width:780px){.variable-visual-toolbar label{flex:1 1 125px}.variable-visual-toolbar select{max-width:100%}}

/* TEST-243 searchable font picker and copyright acknowledgement */
.variable-visual-toolbar #variableFontSearch{min-width:190px;max-width:265px}
.variable-visual-toolbar .variable-font-upload{display:inline-flex;flex-wrap:wrap}
.variable-font-upload input{font-size:11px;max-width:230px}
.variable-visual-toolbar .variable-font-copyright{display:block;flex:1 1 100%;font-size:12px;color:#92400e}
.variable-visual-toolbar .variable-font-license{flex:1 1 100%;white-space:normal}
.variable-visual-toolbar .variable-font-license input{min-height:auto;width:auto}
.variable-font-state{font-size:12px;flex:1 1 100%}

/* TEST-244: concise formatting controls; own fonts in a separate popup */
.variable-visual-toolbar{gap:6px 8px;padding:10px;align-items:center}
.variable-visual-toolbar .variable-font-manager-open{background:#eaf2ff;color:#1d4ed8;border-color:#bfdbfe}
.variable-visual-toolbar #variableFontSearch{min-width:145px;width:180px;max-width:230px}
.variable-visual-toolbar .variable-font-state{flex-basis:100%;margin:0;min-height:0}
.variable-font-modal[hidden]{display:none!important}
.variable-font-modal{position:fixed;inset:0;z-index:2147482600;display:flex;align-items:center;justify-content:center;padding:18px}
.variable-font-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.65)}
.variable-font-dialog{position:relative;display:flex;flex-direction:column;width:min(620px,100%);max-height:min(85vh,790px);overflow:hidden;background:#fff;border-radius:16px;box-shadow:0 15px 55px #0004;color:#0f172a}
.variable-font-dialog-header,.variable-font-dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid #e2e8f0}
.variable-font-dialog-header h2{margin:0;font-size:21px}.variable-font-dialog-header p{margin:4px 0 0;color:#64748b;font-size:13px}
.variable-font-dialog-header button{border:0;border-radius:50%;background:#f1f5f9;font-size:25px;width:36px;height:36px;cursor:pointer}
.variable-font-dialog-footer{border-top:1px solid #e2e8f0;border-bottom:0;justify-content:flex-end}
.variable-font-dialog-footer button,.variable-font-upload-row button{border:1px solid #cbd5e1;background:#eff6ff;color:#1d4ed8;border-radius:8px;padding:8px 15px;cursor:pointer;font-weight:700}
.variable-font-dialog-content{overflow:auto;padding:20px 22px}.variable-font-dialog-content h3{font-size:15px;margin:0 0 9px}
.variable-font-muted,.variable-font-empty{font-size:13px;color:#64748b}
.variable-font-uploads-list{border:1px solid #e2e8f0;border-radius:9px;min-height:65px;padding:10px;margin:12px 0 22px}
.variable-font-upload-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 5px;border-bottom:1px solid #e2e8f0}.variable-font-upload-row:last-child{border:0}
.variable-font-info{display:flex;flex-direction:column;min-width:0}.variable-font-info small{font-size:11px;color:#64748b;overflow-wrap:anywhere}
.variable-font-upload-section{padding:18px;background:#f8fafc;border-radius:10px}.variable-font-upload-section .variable-font-upload{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700}
.variable-font-upload-section input[type=file]{max-width:100%}.variable-font-upload-section .variable-font-copyright{font-size:12px;color:#92400e;margin:14px 0 10px}
.variable-font-upload-section .variable-font-license{display:flex;gap:9px;align-items:start;font-size:13px}
@media(max-width:680px){.variable-font-modal{padding:10px}.variable-font-dialog-header,.variable-font-dialog-content,.variable-font-dialog-footer{padding:14px}}

/* TEST-245: CorelDRAW-style font selector in motif editor. */
.variable-visual-toolbar .variable-font-picker{position:relative;display:flex;flex-direction:column;gap:4px;min-width:225px;max-width:min(100%,330px);flex:1 1 220px}
.variable-font-picker-input{display:flex;align-items:stretch;min-width:0}
.variable-font-picker-input input{min-width:0;flex:1 1 auto;border-radius:7px 0 0 7px}
.variable-font-picker-input button{border:1px solid #cbd5e1;border-left:0;background:#f8fafc;border-radius:0 7px 7px 0;min-width:34px;cursor:pointer}
.variable-font-choices[hidden]{display:none!important}
.variable-font-choices{position:absolute;top:100%;left:0;right:0;min-width:min(360px,85vw);max-height:325px;overflow-y:auto;z-index:200;display:flex;flex-direction:column;padding:5px;background:#fff;border:1px solid #cbd5e1;border-radius:9px;box-shadow:0 13px 27px #0f172a33}
.variable-font-choice-heading{font-size:11px;color:#64748b;background:#f1f5f9;font-weight:700;padding:7px 9px;position:sticky;top:0}
.variable-font-choice{display:flex!important;flex-direction:column!important;gap:0!important;align-items:flex-start!important;text-align:left;max-width:none!important;min-height:51px!important;border:0!important;border-bottom:1px solid #e2e8f0!important;border-radius:5px!important;background:#fff!important;padding:5px 9px!important;cursor:pointer}
.variable-font-choice:hover,.variable-font-choice:focus-visible{background:#eaf2ff!important;outline:1px solid #93c5fd}
.variable-font-choice-sample{font-size:21px;line-height:1.3;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-weight:400}
.variable-font-choice small{font-size:10px;color:#64748b}
.variable-font-choice-empty{margin:9px;font-size:12px;color:#64748b}
@media(max-width:680px){.variable-font-choices{min-width:0;width:max(100%,min(330px,75vw));max-height:245px}}

/* TEST-247: font choices float outside scroll-clipped visual editor. */
body > .variable-font-choices{position:fixed!important;right:auto;z-index:2147483000!important;box-sizing:border-box;max-width:calc(100vw - 16px)}

/* TEST-251: compact alignment icons in visual motif toolbar */
.variable-visual-toolbar button.variable-align-icon{display:inline-flex;align-items:center;justify-content:center;width:35px;height:34px;padding:5px;flex:0 0 35px}
.variable-visual-toolbar button.variable-align-icon svg{display:block;pointer-events:none}

/* TEST-272: gallery drag targets */
.gallery-card[draggable="true"]{cursor:grab}
.gallery-card.gallery-dragging{opacity:.4}
.gallery-card.gallery-drop-target,.gallery-folder-card.gallery-drop-target{outline:3px dashed #2563eb;outline-offset:2px;background:#dbeafe}

/* TEST-272: gallery drag targets */
.gallery-card[draggable="true"]{cursor:grab}
.gallery-card.gallery-dragging{opacity:.4}
.gallery-card.gallery-drop-target,.gallery-folder-card.gallery-drop-target{outline:3px dashed #2563eb;outline-offset:2px;background:#dbeafe}

/* TEST-272: gallery drag targets */
.gallery-card[draggable="true"]{cursor:grab}
.gallery-card.gallery-dragging{opacity:.4}
.gallery-card.gallery-drop-target,.gallery-folder-card.gallery-drop-target{outline:3px dashed #2563eb;outline-offset:2px;background:#dbeafe}

/* TEST-274: saved ark archive */
.ark-drafts-modal[hidden]{display:none!important}
.ark-drafts-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:18px}
.ark-drafts-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.65)}
.ark-drafts-dialog{position:relative;background:#fff;color:#172033;border-radius:16px;padding:22px;width:min(680px,100%);max-height:85vh;overflow:auto;box-shadow:0 25px 80px #0005}
.ark-drafts-head,.ark-draft-row,.ark-draft-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ark-drafts-head h2{margin:0}.ark-drafts-head button{font-size:24px}
.ark-drafts-dialog button{cursor:pointer;border:1px solid #cbd5e1;padding:9px 13px;border-radius:8px;background:#f8fafc;color:#0f172a}
.ark-drafts-dialog button:hover{background:#e2e8f0}
.ark-drafts-save{display:flex;gap:8px;margin:20px 0}.ark-drafts-save input{flex:1;min-width:0;border:1px solid #cbd5e1;border-radius:8px;padding:10px}
.ark-drafts-save button{background:#1d4ed8;color:white;white-space:nowrap}
.ark-drafts-list{display:grid;gap:8px;margin-top:14px}.ark-draft-row{border:1px solid #e2e8f0;border-radius:10px;padding:12px}
.ark-draft-row strong,.ark-draft-row small{display:block}.ark-draft-row small{color:#64748b;margin-top:3px}
#arkDraftMessage.is-error{color:#b91c1c}.ark-draft-delete{color:#b91c1c!important}
@media(max-width:500px){.ark-drafts-save,.ark-draft-row{flex-direction:column;align-items:stretch}}

/* TEST-278: restricted price-comparison switch; checkout unaffected. */
.price-reseller-switch{display:flex;align-items:center;gap:8px;padding:10px 14px 5px;font-size:12px;font-weight:700;cursor:pointer;border-top:1px solid #e2e6ec}
.price-reseller-switch input{width:16px;height:16px;accent-color:#127747;cursor:pointer}
.price-reseller-mode{margin-left:auto;color:#52637b;font-size:11px;font-weight:600}
.price-reseller-hint{margin:0;padding:0 14px 10px;color:#607086;font-size:10px;line-height:1.4}