lorarie-layout-tool [hidden]{display:none!important}
.album-layout-dialog{width:min(97vw,1700px);max-width:none;max-height:95dvh;padding:23px;background:var(--paper,#f4f3ef);border:1px solid #d8d8cf;overflow:auto;color:var(--ink,#262626)}
.album-layout-dialog::backdrop{background:#20221fc2;backdrop-filter:blur(6px)}
.album-layout-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.album-layout-dialog-heading h2{margin:0;font-size:25px;font-weight:450}
.album-layout-dialog-heading .eyebrow{margin:0 0 8px}
.album-layout-dialog .layout-preview-panel{margin:0;padding:20px;min-width:0}
.album-layout-dialog .layout-preview-stage{min-height:350px;height:54vh}
@media(min-width:761px){.album-layout-dialog .layout-workspace{height:calc(91dvh - 180px);min-height:440px}.album-layout-dialog .layout-controls-panel{max-height:100%}.album-layout-dialog .layout-preview-stage{height:calc(91dvh - 270px);min-height:280px}.album-layout-dialog .layout-queue-panel{overflow:auto}}
.layout-page-nav{display:flex;justify-content:center;align-items:center;gap:14px;padding-top:16px}
.photo-page-actions{display:flex;gap:12px;flex-wrap:wrap}
.photo-select{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:10px}
.photo-select input{width:16px;height:16px;accent-color:#8a4936}
.photo-inline-actions{display:flex;gap:9px 13px;flex-wrap:wrap;border-top:1px solid var(--line,#ddd);padding-top:13px}
.photo-inline-actions button,.album-project-row button{border:0;background:none;font:inherit;font-size:11px;color:#6c5c4e;padding:4px 0;cursor:pointer}
.photo-inline-actions button:hover,.album-project-row button:hover{text-decoration:underline}
.album-project-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line,#ddd)}
.album-project-row strong{font-size:13px;font-weight:500}.album-project-row small{display:block;color:#888;font-size:11px;margin-top:7px}
.album-project-row>div:last-child{display:flex;flex-wrap:wrap;gap:15px}
.curation-row{display:grid;grid-template-columns:minmax(180px,1.3fr) auto 85px auto minmax(140px,1fr);gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line,#ddd)}
.curation-identity{display:flex;gap:14px;align-items:center;min-width:0}.curation-identity img{width:65px;height:65px;object-fit:contain}.curation-identity strong{font-size:14px;font-weight:500}.curation-identity small{display:block;font-size:10px;color:#888;margin-top:8px}
.curation-row label{font-size:11px;display:block;line-height:1.6}.curation-row select,.curation-row input[type=number]{padding:9px;background:transparent;border:1px solid var(--line,#ddd);font:inherit;max-width:100%;width:100%;margin-top:6px}.curation-row input[type=checkbox]{accent-color:#8a4936;width:16px;height:16px;vertical-align:middle}
@media(max-width:1150px){.curation-row{grid-template-columns:1fr 1fr;gap:15px}.curation-identity{grid-column:1/-1}}
@media(max-width:720px){.album-layout-dialog{width:98vw;padding:15px;max-height:97dvh}.album-layout-dialog-heading h2{font-size:20px}.album-project-row{display:block}.album-project-row>div:last-child{margin-top:12px}.photo-page-actions{gap:8px}.curation-row{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.album-layout-dialog .layout-preview-panel{order:-1}.album-layout-dialog .layout-preview-stage{height:43vh;min-height:260px}.album-layout-dialog .layout-preview-panel{min-height:0}.album-layout-dialog-heading{position:sticky;top:-15px;z-index:5;background:var(--paper,#f4f3ef);padding:12px 0}}
lorarie-layout-tool {
  display: block;
  color: var(--ink);
}

.layout-page {
  min-height: 100vh;
  background: var(--paper);
}

.layout-page-header {
  width: 100%;
  min-height: 76px;
  padding: 0 4vw;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.layout-page-header nav {
  display: flex;
  gap: 28px;
  color: var(--muted);
  font-size: 12px;
}

.layout-page-main {
  width: min(94vw, 1680px);
  margin: 0 auto;
  padding: 64px 0 100px;
}

.layout-page-title {
  margin-bottom: 46px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

.layout-page-title h1 {
  margin: 0;
  font-size: clamp(48px, 6vw, 86px);
  font-weight: 520;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.layout-page-title > p {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.layout-gate {
  min-height: 480px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  background: var(--card);
}

.layout-gate form {
  width: min(88%, 430px);
  display: grid;
  gap: 22px;
}

.layout-gate h2 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 520;
  letter-spacing: -0.035em;
}

.layout-gate p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.layout-gate label,
.layout-control,
.layout-save-controls > label,
.layout-export-controls > label,
.layout-scope > label,
.layout-photo-picker > label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.layout-gate input,
.layout-tool select,
.layout-tool input[type="number"] {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--white);
  padding: 8px 10px;
  color: var(--ink);
}

.layout-tool button,
.layout-page button {
  font: inherit;
}

.layout-tool .secondary-button,
.layout-page .secondary-button {
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  padding: 9px 13px;
  color: var(--ink);
  font-size: 11px;
  cursor: pointer;
}

.layout-tool .secondary-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.layout-toolbar {
  min-height: 74px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--card);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.layout-toolbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.layout-toolbar label {
  color: var(--muted);
  font-size: 10px;
}

.layout-toolbar select {
  width: min(260px, 42vw);
}

.layout-toolbar-actions,
.layout-inline,
.layout-export-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.layout-workspace {
  min-height: 720px;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(380px, 1.8fr) minmax(270px, 0.9fr);
  background: var(--card);
}

.layout-queue-panel,
.layout-controls-panel {
  min-width: 0;
  padding: 18px;
  background: var(--card);
}

.layout-queue-panel {
  border-right: 1px solid var(--line);
}

.layout-controls-panel {
  max-height: 820px;
  overflow: auto;
  border-left: 1px solid var(--line);
}

.layout-dropzone {
  min-height: 96px;
  border: 1px dashed var(--line-strong);
  display: grid;
  place-content: center;
  gap: 5px;
  text-align: center;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.layout-dropzone.is-dragging {
  border-color: var(--ink);
  background: var(--paper-deep);
}

.layout-dropzone strong {
  font-size: 12px;
  font-weight: 550;
}

.layout-dropzone span,
.layout-empty,
.layout-note,
.layout-capability {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.layout-queue-heading {
  margin: 24px 0 10px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.07em;
}

.layout-queue {
  display: grid;
  gap: 8px;
}

.layout-queue-item {
  border: 1px solid transparent;
  background: var(--paper);
}

.layout-queue-item.is-selected {
  border-color: var(--line-strong);
  background: var(--white);
}

.layout-queue-item.is-incomplete {
  border-color: rgba(174, 103, 30, 0.45);
}

.layout-item-main {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.layout-item-main > span:last-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.layout-item-main strong,
.layout-item-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layout-item-main strong {
  font-size: 11px;
  font-weight: 550;
}

.layout-item-main small,
.layout-item-index {
  color: var(--muted);
  font-size: 9px;
}

.layout-source-strip {
  padding: 0 10px 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.layout-source-strip > span {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper-deep);
}

.layout-source-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.layout-source-strip button {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 19px;
  height: 19px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.76);
  color: #fff;
  padding: 0;
  font-size: 10px;
  cursor: pointer;
}

.layout-source-strip button:first-of-type {
  right: 23px;
}

.layout-preview-panel {
  min-width: 0;
  padding: 24px;
  background: #d9dbd8;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.layout-preview-stage {
  min-height: 580px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.layout-preview-stage canvas {
  display: block;
  max-width: 100%;
  max-height: 660px;
  box-shadow: 0 16px 45px rgba(20, 27, 23, 0.16);
}

.layout-preview-empty {
  max-width: 330px;
  display: grid;
  gap: 10px;
  color: var(--muted);
  text-align: center;
}

.layout-preview-empty strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 520;
}

.layout-preview-empty span {
  font-size: 10px;
  line-height: 1.6;
}

.layout-preview-meta {
  padding-top: 16px;
  border-top: 1px solid rgba(29, 29, 31, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: 10px;
}

.layout-scope,
.layout-controls-panel section {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.layout-scope {
  display: grid;
  gap: 10px;
}

.layout-controls-panel h3 {
  margin: 0 0 17px;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0.03em;
}

.layout-control {
  margin-bottom: 14px;
}

.layout-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.layout-control output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.layout-control input[type="range"] {
  width: 100%;
  accent-color: var(--ink);
}

.layout-check {
  margin: 12px 0 16px;
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  color: var(--muted);
  font-size: 10px;
}

.layout-check input {
  accent-color: var(--ink);
}

.layout-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
}

.layout-inline > .layout-control {
  min-width: 0;
  flex: 1 1 110px;
}

.layout-export-actions,
.layout-save-controls {
  display: grid;
  gap: 9px;
}

.layout-export-actions .secondary-button {
  width: 100%;
}

.layout-save-controls .primary-button,
.layout-save-controls .secondary-button {
  width: 100%;
}

.layout-progress {
  margin-top: 18px;
}

.layout-progress > div {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 9px;
}

.layout-progress progress {
  width: 100%;
  height: 6px;
  accent-color: var(--ink);
}

.layout-message {
  min-height: 34px;
  margin: 16px 0 0;
  color: #476150;
  font-size: 10px;
  line-height: 1.6;
}

.layout-message.is-error {
  color: #9d3932;
}

.layout-photo-picker {
  width: min(92vw, 900px);
  max-height: 86vh;
  border: 0;
  padding: 28px;
  background: var(--paper);
  color: var(--ink);
}

.layout-photo-picker::backdrop {
  background: rgba(18, 18, 18, 0.56);
  backdrop-filter: blur(5px);
}

.layout-picker-heading {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.layout-picker-heading h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 520;
}

.layout-picker-heading button {
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
}

.layout-picker-grid {
  min-height: 220px;
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.layout-picker-grid button {
  min-width: 0;
  border: 1px solid transparent;
  background: var(--white);
  padding: 7px;
  display: grid;
  gap: 7px;
  text-align: left;
  cursor: pointer;
}

.layout-picker-grid button.is-selected {
  border-color: var(--ink);
}

.layout-picker-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.layout-picker-grid span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layout-picker-actions {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
}

.admin-layout-panel .admin-page-heading {
  align-items: flex-end;
}

.admin-layout-panel lorarie-layout-tool {
  margin-top: 32px;
}

@media (max-width: 1280px) {
  .layout-workspace {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .layout-controls-panel {
    grid-column: 1 / -1;
    max-height: none;
    border-top: 1px solid var(--line);
    border-left: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .layout-controls-panel > * {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .layout-page-header {
    min-height: 64px;
    padding: 0 5vw;
  }

  .layout-page-header nav {
    gap: 14px;
  }

  .layout-page-main {
    width: 90vw;
    padding: 44px 0 80px;
  }

  .layout-page-title {
    display: block;
  }

  .layout-page-title h1 {
    font-size: 54px;
  }

  .layout-page-title > p {
    margin-top: 24px;
  }

  .layout-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .layout-toolbar > div:first-child {
    justify-content: space-between;
  }

  .layout-toolbar select {
    width: 65%;
  }

  .layout-toolbar-actions > button {
    flex: 1 1 0;
  }

  .layout-workspace {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .layout-queue-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .layout-queue {
    max-height: 330px;
    overflow: auto;
  }

  .layout-preview-panel {
    min-height: 52vh;
    padding: 16px;
  }

  .layout-preview-stage {
    min-height: 44vh;
  }

  .layout-preview-stage canvas {
    max-height: 52vh;
  }

  .layout-controls-panel {
    display: block;
    border-top: 1px solid var(--line);
  }

  .layout-picker-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .layout-photo-picker {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 20px;
  }
}