/* LAOUTS UI — scoped to #laouts-views-root so editor chrome is unaffected */
/*
 * Colour authority — balayage/plaster system:
 *   _ACCEPTED_LAOUTS_REFERENCES__20260429/ACCEPTED__LAOUTS_UPLOAD_REFERENCE__BALAYAGE.html
 * Screenshot reference:
 *   _ACCEPTED_LAOUTS_REFERENCES__20260429/ACCEPTED__LAOUTS__003_SCREENSHOT.png
 * (Ignore legacy Claude palette docs for colour; use accepted folder only.)
 */

:root {
  /* ---------- Color: surfaces (screenshot-calibrated) ---------- */
  --bg-app:              #f4f1f0;
  --bg-app-plaster:      linear-gradient(165deg, #fcfbf9 0%, #f5f3f0 52%, #ebe7e2 100%);
  --bg-sidebar:          linear-gradient(180deg, #fcf8f7 0%, #faf6f5 40%, #f5f2ee 100%);
  --bg-work-panel:       #fbfaf8;
  --bg-card:             #ffffff;
  --bg-card-ivory:       #faf9f7;
  --bg-muted:            #f4f1ef;
  --bg-muted-plaster:    linear-gradient(180deg, #f8f5f2 0%, #f4f1ef 50%, #eee8e2 100%);
  --bg-banner:           #f4efe8;

  --bg-card-ivory-strong: #e8dfd7;
  --bg-dropzone:           linear-gradient(165deg, #faf9f7 0%, #f2f0ed 42%, #eae4dd 100%);
  --bg-tinted:             #f1efed;

  --bg-stage-1:          #ded3cb;
  --bg-stage-2:          #e8e2dc;
  --bg-stage-3:          #f5f3ef;
  --sidebar-promo-plaster: linear-gradient(165deg, #eee9e4 0%, #ded3cb 55%, #d4cbc3 100%);
  --bg-tip:              #f3efe6;

  --border-soft:   #ebe8e4;
  --border-strong: #d5cdc3;
  --border-dashed: #d5cdc3;

  --text-primary: #1a1815;
  --text-strong:  #2b2622;
  --text-muted:   #746b62;
  --text-subtle:  #a3988c;
  --text-inverse: #fdfaf3;

  --ink:           #141210;
  --ink-hover:     #2a2622;
  --accent-taupe:  #ada095;
  --accent-taupe-soft: #eae0d6;
  --accent-sand:   #f4efe8;
  --accent-sage:   #b6c2a6;
  --accent-cream:  #f3efe6;

  --accent-progress-fill: linear-gradient(90deg, #dcd8d3 0%, #ebe9e7 55%, #e3ded9 100%);
  --accent-stepper-done-ring: #c9c4bf;
  --accent-stepper-done-icon: #8f8780;

  --nav-pill-bg:   #faf7f6;

  --next-up-plaster: linear-gradient(165deg, #faf8f5 0%, #f3efe4 52%, #e8e1d9 100%);

  --product-card-stage-bg:
    radial-gradient(120% 80% at 50% 110%, var(--bg-stage-2) 0%, var(--bg-stage-3) 55%, #faf9f7 100%);
  --product-card-stage-bg-selected:
    radial-gradient(120% 80% at 50% 110%, var(--bg-stage-1) 0%, var(--bg-stage-2) 55%, var(--bg-stage-3) 100%);

  --status-success-bg:  #e8efe0;
  --status-success-fg:  #4a5a3b;
  --status-info-bg:     #f3efe8;
  --status-info-fg:     #6b5d45;
  --status-warning-bg:  #f6ead0;
  --status-warning-fg:  #7a5a1d;

  --shadow-xs: 0 1px 2px rgba(20, 15, 10, .04);
  --shadow-sm: 0 2px 6px rgba(20, 15, 10, .05);
  --shadow-md: 0 8px 22px rgba(20, 15, 10, .07);
  --shadow-lg: 0 22px 56px rgba(20, 15, 10, .10);
  --shadow-cta: 0 6px 16px rgba(20, 15, 10, .18);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  --font-serif: "Fraunces", "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-sans:  "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-base:15px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 34px;
  --fs-5xl: 44px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --sidebar-w: 240px;
  --rail-w:    340px;
  --rail-w-lg: 380px;
  --topbar-h:  64px;
  --max-page-w: 1440px;
}

/* ---------- Route: hide legacy editor ---------- */
body.laouts-route-product .app,
body.laouts-route-upload .app,
body.laouts-route-curate .app,
body.laouts-route-preferences .app,
body.laouts-route-review .app,
body.laouts-route-order-confirmed .app,
body.laouts-route-ai-studio .app,
body.laouts-route-home .app,
body.laouts-route-design .app {
  display: none !important;
}

body.laouts-route-product,
body.laouts-route-upload,
body.laouts-route-curate,
body.laouts-route-preferences,
body.laouts-route-review,
body.laouts-route-order-confirmed,
body.laouts-route-ai-studio,
body.laouts-route-home,
body.laouts-route-design {
  overflow: auto !important;
}

/* ---------- Shell ---------- */
#laouts-views-root {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text-primary);
  background: var(--bg-app-plaster);
  -webkit-font-smoothing: antialiased;
}

#laouts-views-root[aria-hidden="true"] {
  display: none !important;
}

#laouts-views-root[aria-hidden="false"] {
  display: block;
}

#laouts-views-root *,
#laouts-views-root *::before,
#laouts-views-root *::after {
  box-sizing: border-box;
}

#laouts-views-root .app-shell {
  display: flex;
  min-height: 100vh; min-height: 100dvh;
  width: 100%;
}

#laouts-views-root .sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  min-height: 100vh; min-height: 100dvh;
  padding: var(--space-6) var(--space-5);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

#laouts-views-root .sidebar__wordmark {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

#laouts-views-root .btn-new-project {
  width: 100%;
  justify-content: center;
}

#laouts-views-root .sidebar__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

#laouts-views-root .sidebar__nav a.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-strong);
  text-decoration: none;
  transition: background .15s ease;
}

#laouts-views-root .sidebar__nav a.nav-item:hover {
  background: rgba(244, 241, 239, 0.72);
}

#laouts-views-root .sidebar__nav a.nav-item.is-active {
  background: var(--nav-pill-bg);
  color: var(--text-primary);
}

#laouts-views-root .nav-item .ic {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  opacity: .85;
}

#laouts-views-root .sidebar__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#laouts-views-root .sidebar__minor {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-2);
}

#laouts-views-root .sidebar__minor a {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

#laouts-views-root .sidebar__minor a:hover {
  color: var(--text-primary);
  background: rgba(244, 241, 239, 0.55);
}

#laouts-views-root .sidebar-account {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .sidebar-account__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ddd4c8, #c9bfb2);
  flex-shrink: 0;
}

#laouts-views-root .sidebar-account__meta {
  min-width: 0;
}

#laouts-views-root .sidebar-account__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .sidebar-account__plan {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ---------- Main column ---------- */
#laouts-views-root .app-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 100vh; min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-9);
  max-width: var(--max-page-w);
  margin: 0 auto;
  width: 100%;
}

/* ---------- Stepper ---------- */
#laouts-views-root .page-stepper {
  margin-bottom: var(--space-7);
}

#laouts-views-root .stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
}

#laouts-views-root .stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

#laouts-views-root .stepper__between {
  width: 28px;
  height: 1px;
  background: var(--border-soft);
  flex-shrink: 0;
  margin-top: 14px;
  align-self: flex-start;
}

#laouts-views-root .stepper__glyph {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: var(--bg-card);
}

#laouts-views-root .stepper__item.is-active .stepper__glyph {
  background: var(--ink);
  color: var(--text-inverse);
  border-color: var(--ink);
}

#laouts-views-root .stepper__item.is-done .stepper__glyph {
  background: transparent;
  border-color: var(--accent-stepper-done-ring);
  color: var(--accent-stepper-done-icon);
}

#laouts-views-root .stepper__check {
  width: 14px;
  height: 14px;
}

#laouts-views-root .stepper__label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

#laouts-views-root .stepper__item.is-active .stepper__label {
  color: var(--text-primary);
  font-weight: 600;
}

/* ---------- Page header ---------- */
#laouts-views-root .page-header {
  margin-bottom: var(--space-7);
}

#laouts-views-root .page-title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  line-height: var(--lh-tight);
}

#laouts-views-root .page-subtitle {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

/* ---------- Buttons ---------- */
#laouts-views-root .btn {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 10px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

#laouts-views-root .btn:focus-visible {
  outline: 2px solid var(--accent-taupe);
  outline-offset: 2px;
}

#laouts-views-root .btn--primary {
  background: var(--ink);
  color: var(--text-inverse);
  border-color: var(--ink);
}

#laouts-views-root .btn--primary:hover:not(:disabled) {
  background: var(--ink-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta);
}

#laouts-views-root .btn--secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

#laouts-views-root .btn--secondary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

#laouts-views-root .btn--pill {
  border-radius: var(--radius-pill);
}

#laouts-views-root .btn--lg {
  padding: 14px 20px;
  font-size: var(--fs-md);
  width: 100%;
}

/* ---------- Chips ---------- */
#laouts-views-root .chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#laouts-views-root .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#laouts-views-root .chip:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

#laouts-views-root .chip.is-active {
  background: var(--accent-taupe-soft);
  border-color: var(--accent-taupe);
  color: var(--text-primary);
}

/* ---------- Cards & product grid ---------- */
#laouts-views-root .card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .card__title--serif {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  margin: 0 0 var(--space-5);
  color: var(--text-primary);
}

#laouts-views-root .card__body {
  padding: var(--space-6);
}

#laouts-views-root .page-body.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(var(--rail-w-lg), 100%);
  gap: var(--space-7);
  align-items: start;
  flex: 1;
}

#laouts-views-root .product-main {
  min-width: 0;
}

#laouts-views-root .product-filters {
  margin-bottom: var(--space-6);
}

#laouts-views-root .product-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 1100px) {
  #laouts-views-root .page-body.product-grid {
    grid-template-columns: 1fr;
  }
  #laouts-views-root .product-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  #laouts-views-root .app-shell {
    flex-direction: column;
  }
  #laouts-views-root .sidebar {
    width: 100%;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  #laouts-views-root .app-main {
    padding: var(--space-6);
  }
  #laouts-views-root .product-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- PRODUCT CARD (selector grid) ---------- */
#laouts-views-root .product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
  cursor: pointer;
}

#laouts-views-root .product-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

#laouts-views-root .product-card__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--product-card-stage-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

#laouts-views-root .product-card__stage::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 14%;
  height: 14px;
  background: radial-gradient(closest-side,
    rgba(20, 15, 10, .18), rgba(20, 15, 10, 0) 70%);
  filter: blur(2px);
  pointer-events: none;
}

#laouts-views-root .product-card__meta {
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  row-gap: 4px;
  column-gap: 12px;
  align-items: end;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

#laouts-views-root .product-card__name {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

#laouts-views-root .product-card__size,
#laouts-views-root .product-card__pages {
  grid-column: 1 / 2;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .product-card__price {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
  align-self: end;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#laouts-views-root .product-card.is-selected {
  border-color: var(--ink);
  box-shadow:
    0 0 0 1px var(--ink),
    var(--shadow-md);
}

#laouts-views-root .product-card.is-selected .product-card__stage {
  background: var(--product-card-stage-bg-selected);
}

#laouts-views-root .product-card__selected-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  z-index: 5;
}

#laouts-views-root .product-card.is-selected .product-card__selected-badge {
  display: flex;
}

/* ---------- BOOK MOCKUP ---------- */
#laouts-views-root .book-mockup {
  position: relative;
  width: 62%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  filter:
    drop-shadow(0 18px 28px rgba(20, 15, 10, .18))
    drop-shadow(0 4px 8px rgba(20, 15, 10, .10));
  transform: perspective(900px) rotateY(-6deg) rotateX(2deg);
  transform-style: preserve-3d;
}

#laouts-views-root .book-mockup[data-orientation="portrait"] {
  aspect-ratio: 3 / 4;
  width: 50%;
}

#laouts-views-root .book-mockup[data-orientation="landscape"] {
  aspect-ratio: 4 / 3;
  width: 70%;
}

#laouts-views-root .book-mockup__pages {
  position: absolute;
  inset: 2% -3px 2% 2%;
  background:
    linear-gradient(90deg, #f5edda 0%, #efe5cf 60%, #e6dcc3 100%);
  border-radius: 2px 4px 4px 2px;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .08);
}

#laouts-views-root .book-mockup__cover {
  position: absolute;
  inset: 0 6px 0 0;
  border-radius: 2px 6px 6px 2px;
  overflow: hidden;
  background: #1a1815;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    inset 6px 0 0 rgba(0, 0, 0, .25);
}

#laouts-views-root .book-mockup__cover-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      #c9d6dc 0%,
      #e3d9c2 38%,
      #c9a888 60%,
      #8a6d52 78%,
      #4a3a2c 100%),
    linear-gradient(180deg, rgba(255, 235, 200, .12), rgba(20, 15, 10, .25));
  background-blend-mode: multiply;
}

#laouts-views-root .book-mockup__cover-art::before {
  content: "";
  position: absolute;
  inset: 38% 0 28% 0;
  background:
    repeating-linear-gradient(
      92deg,
      rgba(255, 232, 200, .18) 0 3px,
      rgba(70, 50, 35, .12) 3px 7px,
      rgba(20, 15, 10, .16) 7px 11px
    );
  mix-blend-mode: overlay;
  opacity: .55;
}

#laouts-views-root .book-mockup__cover-art::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 60%;
  height: 1px;
  background: rgba(255, 225, 190, .35);
}

#laouts-views-root .book-mockup__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .55) 0%,
      rgba(255, 255, 255, .05) 50%,
      rgba(0, 0, 0, .35) 100%);
}

#laouts-views-root .book-mockup__title {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 18%;
  font-family: var(--font-serif);
  color: #f7ecd5;
  font-size: clamp(9px, 2.4vw, 16px);
  letter-spacing: .14em;
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

#laouts-views-root .book-mockup__sub {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 28%;
  font-family: var(--font-serif);
  color: rgba(247, 236, 213, .82);
  font-size: clamp(7px, 1.6vw, 11px);
  font-style: italic;
  letter-spacing: .02em;
}

#laouts-views-root .book-mockup--xs {
  width: 56px;
  max-width: none;
  transform: none;
  filter: drop-shadow(0 4px 8px rgba(20, 15, 10, .18));
}

#laouts-views-root .book-mockup--md {
  width: 72%;
  max-width: 260px;
}

#laouts-views-root .book-mockup--lg {
  width: 84%;
  max-width: 360px;
}

/* Cover variants (selector grid) */
#laouts-views-root .product-card[data-cover="square"] .book-mockup__cover-art {
  filter: hue-rotate(-8deg) saturate(1.05);
}

#laouts-views-root .product-card[data-cover="a4-portrait"] .book-mockup__cover-art {
  filter: hue-rotate(8deg) brightness(1.05);
}

#laouts-views-root .product-card[data-cover="a4-landscape"] .book-mockup__cover-art {
  filter: hue-rotate(-18deg) saturate(.9);
}

#laouts-views-root .product-card[data-cover="layflat"] .book-mockup__cover-art {
  filter: hue-rotate(20deg) saturate(.9);
}

#laouts-views-root .product-card[data-cover="large-square"] .book-mockup__cover-art {
  filter: hue-rotate(-30deg) saturate(1.1);
}

#laouts-views-root .product-card[data-cover="magazine"] .book-mockup__cover-art {
  filter: hue-rotate(40deg) brightness(1.08);
}

#laouts-views-root .product-card[data-cover="softcover"] .book-mockup__cover-art {
  filter: hue-rotate(-45deg) brightness(1.1) saturate(.85);
}

#laouts-views-root .product-card[data-cover="mohawk"] .book-mockup__cover-art {
  filter: hue-rotate(-60deg) saturate(1.15) brightness(.95);
}

#laouts-views-root .product-card[data-cover="a4-portrait"] .book-mockup,
#laouts-views-root .product-card[data-cover="softcover"] .book-mockup {
  aspect-ratio: 3 / 4;
  width: 48%;
}

#laouts-views-root .product-card[data-cover="a4-landscape"] .book-mockup {
  aspect-ratio: 4 / 3;
  width: 72%;
}

#laouts-views-root .product-card[data-cover="magazine"] .book-mockup,
#laouts-views-root .product-card[data-cover="mohawk"] .book-mockup {
  aspect-ratio: 17 / 22;
  width: 50%;
}

/* ---------- Right rail “Your Selection” ---------- */
#laouts-views-root .your-selection {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-sm);
}

#laouts-views-root .your-selection h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

#laouts-views-root .your-selection .product-card__stage {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  margin: 0;
}

#laouts-views-root .your-selection .book-mockup.book-mockup--lg {
  width: 84%;
  max-width: 360px;
  margin: 8px auto 18px;
}

#laouts-views-root .your-selection .summary-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 16px;
  font-size: var(--fs-sm);
  margin: 0;
}

#laouts-views-root .your-selection .summary-list dt {
  color: var(--text-muted);
  margin: 0;
}

#laouts-views-root .your-selection .summary-list dd {
  margin: 0;
  text-align: right;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

#laouts-views-root .your-selection .feature-block {
  background: var(--bg-card-ivory);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

#laouts-views-root .your-selection .feature-block h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0 0 10px;
}

#laouts-views-root .your-selection .feature-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-strong);
}

#laouts-views-root .your-selection .feature-block li {
  display: flex;
  align-items: center;
  gap: 8px;
}

#laouts-views-root .your-selection .feature-block li::before {
  content: "✓";
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 11px;
}

#laouts-views-root .your-selection .btn--lg {
  width: 100%;
}

#laouts-views-root .your-selection .micro-center {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
}

#laouts-views-root .micro {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  margin: var(--space-4) 0 0;
}

/* ---------- Footer banner ---------- */
#laouts-views-root .footer-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--bg-banner);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  margin-top: 32px;
}

#laouts-views-root .footer-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#laouts-views-root .footer-banner__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  color: var(--text-primary);
}

#laouts-views-root .footer-banner__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------- Upload screen (Screen 3) — balayage tokens; scoped ---------- */
#laouts-views-root .upload-screen__top-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

#laouts-views-root .upload-screen__top-row .page-stepper {
  grid-column: 1 / 2;
  justify-self: center;
  margin-bottom: 0;
  margin-left: clamp(0px, 6vw, 80px);
}

#laouts-views-root .upload-screen__help {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  padding: 0;
}

#laouts-views-root .upload-screen__help:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

#laouts-views-root .upload-screen__help svg {
  width: 14px;
  height: 14px;
}

#laouts-views-root .work-wrap {
  background: var(--bg-work-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: 36px 36px 32px;
  box-shadow: 0 1px 0 rgba(20, 15, 10, .02);
}

#laouts-views-root .upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(260px, 0.85fr);
  gap: 28px;
  align-items: start;
}

@media (max-width: 1100px) {
  #laouts-views-root .upload-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #laouts-views-root .upload-grid > .right-rail {
    grid-column: 1 / -1;
    max-width: 560px;
  }
}

#laouts-views-root .dropzone {
  border: 1.5px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-dropzone);
  padding: 64px 28px 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 480px;
  justify-content: center;
  transition: border-color .15s ease, background .15s ease;
}

#laouts-views-root .dropzone:hover {
  border-color: var(--border-strong);
  background: linear-gradient(165deg, #fcfbf9 0%, #f6f3ef 50%, #ebe6df 100%);
}

#laouts-views-root .dropzone__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-card-ivory-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

#laouts-views-root .dropzone__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--text-strong);
  fill: none;
  stroke-width: 1.6;
}

#laouts-views-root .dropzone__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 2px;
}

#laouts-views-root .dropzone__sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

#laouts-views-root .dropzone__formats {
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 6px;
  letter-spacing: 0.01em;
}

#laouts-views-root .dropzone .btn--secondary {
  margin-top: 20px;
  height: 40px;
  padding: 0 22px;
}

#laouts-views-root .upload-progress {
  margin-top: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
}

#laouts-views-root .upload-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  margin-bottom: 8px;
}

#laouts-views-root .upload-progress__head strong {
  font-weight: 600;
}

#laouts-views-root .upload-progress__head span {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

#laouts-views-root .progress-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
  margin-bottom: 14px;
}

#laouts-views-root .progress-bar__fill {
  height: 100%;
  width: 28%;
  background: var(--accent-progress-fill);
  border-radius: inherit;
}

#laouts-views-root .image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

#laouts-views-root .image-tile {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #d4cec6 0%, #9e9186 100%);
  position: relative;
}

#laouts-views-root .image-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(102deg,
      rgba(250, 247, 242, .14) 0 4px,
      rgba(70, 50, 35, .10) 4px 8px,
      rgba(20, 15, 10, .18) 8px 13px);
  mix-blend-mode: overlay;
  opacity: .55;
}

#laouts-views-root .image-tile[data-mood="ivory"] {
  background: linear-gradient(180deg, #e8dcc1 0%, #b89875 100%);
}

#laouts-views-root .image-tile[data-mood="ocean"] {
  background: linear-gradient(180deg, #c5d3d8 0%, #5e7280 100%);
}

#laouts-views-root .image-tile[data-mood="terracotta"] {
  background: linear-gradient(180deg, #e8c2a4 0%, #8a5a3c 100%);
}

#laouts-views-root .image-tile[data-mood="olive"] {
  background: linear-gradient(180deg, #c2cdb6 0%, #6c7858 100%);
}

#laouts-views-root .image-tile[data-mood="cream"] {
  background: linear-gradient(180deg, #efe5cf 0%, #c0a87c 100%);
}

#laouts-views-root .image-tile[data-mood="sage"] {
  background: linear-gradient(180deg, #d2dcbf 0%, #7a8a68 100%);
}

#laouts-views-root .image-tile[data-mood="rose"] {
  background: linear-gradient(180deg, #efcbbf 0%, #8a584d 100%);
}

#laouts-views-root .image-tile[data-mood="dune"] {
  background: linear-gradient(180deg, #e6d6ae 0%, #8a7250 100%);
}

#laouts-views-root .image-tile[data-mood="overflow"] {
  background: rgba(20, 15, 10, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
}

#laouts-views-root .image-tile[data-mood="overflow"]::after {
  display: none;
}

#laouts-views-root .upload-success {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-strong);
}

#laouts-views-root .upload-success__check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-sage);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#laouts-views-root .upload-success__check svg {
  width: 10px;
  height: 10px;
}

#laouts-views-root .form-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#laouts-views-root .upload-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#laouts-views-root .upload-field__label {
  font-size: 13px;
  color: var(--text-strong);
  font-weight: 500;
}

#laouts-views-root .upload-input-wrap {
  position: relative;
}

#laouts-views-root .upload-field__counter {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-subtle);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

#laouts-views-root .upload-input,
#laouts-views-root .upload-select {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#laouts-views-root .upload-input {
  padding-right: 72px;
}

#laouts-views-root .upload-input:focus,
#laouts-views-root .upload-select:focus {
  outline: none;
  border-color: var(--accent-taupe);
  box-shadow: 0 0 0 3px rgba(173, 160, 149, 0.22);
}

#laouts-views-root .upload-select-wrap {
  position: relative;
}

#laouts-views-root .upload-select-wrap .upload-select-lead {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

#laouts-views-root .upload-select-wrap .upload-select {
  padding-left: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a7060' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

#laouts-views-root .upload-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  #laouts-views-root .upload-two-col {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .upload-form-section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 8px 0 0;
  color: var(--text-primary);
}

#laouts-views-root .upload-footnote {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

#laouts-views-root .upload-form-section-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 4px;
}

#laouts-views-root .upload-question {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

#laouts-views-root .upload-question__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .upload-question__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: -4px;
}

#laouts-views-root .upload-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  overflow: hidden;
}

#laouts-views-root .upload-segmented button {
  height: 46px;
  background: transparent;
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-right: 1px solid var(--border-soft);
  cursor: default;
  font-family: inherit;
  padding: 0 10px;
}

#laouts-views-root .upload-segmented button:last-child {
  border-right: none;
}

#laouts-views-root .upload-segmented button.is-active {
  background: var(--bg-tinted);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent-taupe);
}

#laouts-views-root .upload-segmented svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  flex-shrink: 0;
}

#laouts-views-root .upload-slider-row {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 12px;
}

#laouts-views-root .upload-slider-row > svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

#laouts-views-root .upload-slider {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--border-soft);
}

#laouts-views-root .upload-slider__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 60%;
  border-radius: inherit;
  background: linear-gradient(90deg, #cfc8c0 0%, #ada095 100%);
}

#laouts-views-root .upload-slider__thumb {
  position: absolute;
  left: 60%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--ink);
}

#laouts-views-root .upload-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

#laouts-views-root .upload-mood-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#laouts-views-root .upload-mood-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  cursor: default;
  font-family: inherit;
}

#laouts-views-root .upload-mood-chip.is-active {
  background: var(--bg-tinted);
  border-color: var(--accent-taupe);
  box-shadow: inset 0 0 0 1px var(--accent-taupe);
}

#laouts-views-root .upload-mood-chip__swatch {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f0ece3, #cfc6b4);
}

#laouts-views-root .upload-mood-chip[data-mood="elegant"] .upload-mood-chip__swatch {
  background: linear-gradient(180deg, #d8c8a4 0%, #b89878 50%, #6e5a40 100%);
}

#laouts-views-root .upload-mood-chip[data-mood="bold"] .upload-mood-chip__swatch {
  background: linear-gradient(135deg, #2a2620 0%, #4a3a2e 100%);
}

#laouts-views-root .upload-mood-chip[data-mood="travel"] .upload-mood-chip__swatch {
  background: linear-gradient(180deg, #aebfc4 0%, #c89e7a 70%, #8a5a3c 100%);
}

#laouts-views-root .upload-mood-chip[data-mood="minimal"] .upload-mood-chip__swatch {
  background: linear-gradient(135deg, #f5f2ee, #d5cec6);
}

#laouts-views-root .right-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

#laouts-views-root .ai-assistant {
  background: var(--bg-muted-plaster);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#laouts-views-root .ai-assistant__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .ai-assistant__head svg {
  width: 14px;
  height: 14px;
  color: var(--accent-taupe);
  flex-shrink: 0;
}

#laouts-views-root .ai-assistant__intro {
  font-size: 13px;
  color: var(--text-muted);
  margin: -4px 0 0;
  line-height: 1.5;
}

#laouts-views-root .assistant-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
}

#laouts-views-root .assistant-row__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-strong);
  flex-shrink: 0;
}

#laouts-views-root .assistant-row__icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

#laouts-views-root .assistant-row__title {
  font-size: 13.5px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--text-primary);
}

#laouts-views-root .assistant-row__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
  line-height: 1.45;
}

#laouts-views-root .next-up {
  background: var(--next-up-plaster);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#laouts-views-root .next-up__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

#laouts-views-root .next-up__label svg {
  width: 12px;
  height: 12px;
  color: var(--accent-taupe);
}

#laouts-views-root .next-up__title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

#laouts-views-root .next-up__art {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  margin-top: 4px;
  background:
    linear-gradient(90deg, var(--bg-card) 0% 50%, transparent 50%),
    linear-gradient(180deg, var(--bg-stage-2) 0%, var(--bg-stage-1) 55%, #6b7a82 100%);
  box-shadow: 0 4px 10px rgba(20, 15, 10, .10);
  position: relative;
  overflow: hidden;
}

#laouts-views-root .next-up__art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6%;
  bottom: 6%;
  width: 1px;
  background: rgba(20, 15, 10, .14);
}

#laouts-views-root .sidebar-promo {
  background: var(--sidebar-promo-plaster);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#laouts-views-root .sidebar-promo h3 {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  color: var(--text-primary);
}

#laouts-views-root .sidebar-promo p {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

#laouts-views-root .sidebar-promo__art {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background:
    radial-gradient(120% 80% at 50% 110%, var(--bg-stage-1), var(--bg-stage-3)),
    linear-gradient(180deg, #cfd5d8, #8a6b50);
  background-blend-mode: multiply;
  position: relative;
  overflow: hidden;
}

#laouts-views-root .sidebar-promo__art::before {
  content: "";
  position: absolute;
  inset: 28% 12% 12% 12%;
  border-radius: 2px;
  background: linear-gradient(180deg, #cfd5d8 0%, #c89e7a 60%, #3d2f24 100%);
  box-shadow: 0 6px 12px rgba(20, 15, 10, .18);
}

#laouts-views-root .sidebar-promo .btn--secondary {
  align-self: flex-start;
  font-size: 11.5px;
  height: 30px;
  padding: 0 12px;
}

/* ---------- Smart Curation (Screen 4) ---------- */
#laouts-views-root #laouts-view-curate .app-main.app-main--curate {
  max-width: min(1620px, 100%);
  padding: var(--space-7) clamp(14px, 2.8vw, 40px) var(--space-8);
  margin-left: auto;
  margin-right: auto;
}

#laouts-views-root .curate-screen__top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

#laouts-views-root .curate-screen__top-row .page-stepper {
  justify-self: center;
  margin-bottom: 0;
  margin-left: clamp(0px, 4vw, 72px);
}

#laouts-views-root .curate-screen__top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

#laouts-views-root #laouts-view-curate .upload-screen__help.curate-screen__help {
  flex-shrink: 0;
}

#laouts-views-root .btn--outline {
  background: var(--bg-card);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .btn--outline:hover:not(:disabled) {
  background: var(--bg-muted);
  border-color: var(--accent-taupe);
}

#laouts-views-root #laouts-view-curate .curate-work-wrap {
  padding: 26px clamp(16px, 1.9vw, 32px) 36px;
}

#laouts-views-root .curate-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

#laouts-views-root .curate-page-head .page-title {
  margin-bottom: 6px;
}

#laouts-views-root .curate-page-head .page-subtitle {
  margin: 0;
  max-width: 520px;
}

#laouts-views-root .curate-inline-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

#laouts-views-root .curate-inline-actions__sep {
  width: 1px;
  height: 18px;
  background: var(--border-soft);
}

#laouts-views-root .curate-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

#laouts-views-root .curate-link-btn svg {
  width: 16px;
  height: 16px;
  opacity: .75;
}

#laouts-views-root .curate-link-btn:hover {
  color: var(--text-primary);
  background: rgba(244, 241, 239, 0.65);
}

#laouts-views-root .curate-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-6);
}

#laouts-views-root .curate-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-strong);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#laouts-views-root .curate-filter-pill__ic {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: block;
}

#laouts-views-root .curate-filter-pill:hover:not(.is-active) {
  border-color: var(--border-strong);
  background: var(--bg-muted);
}

#laouts-views-root .curate-filter-pill.is-active {
  background: var(--ink);
  color: var(--text-inverse);
  border-color: var(--ink);
}

#laouts-views-root .curate-layout-grid {
  display: grid;
  grid-template-columns: minmax(248px, 280px) minmax(0, 1fr) minmax(328px, 360px);
  gap: clamp(24px, 2vw, 32px);
  align-items: start;
}

@media (max-width: 1200px) {
  #laouts-views-root .curate-layout-grid {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }
  #laouts-views-root .curate-balance {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  #laouts-views-root .curate-layout-grid {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .curate-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .curate-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

#laouts-views-root .curate-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

#laouts-views-root .curate-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text-muted);
  cursor: pointer;
}

#laouts-views-root .curate-icon-btn--sm {
  width: 24px;
  height: 24px;
}

#laouts-views-root .curate-icon-btn svg {
  width: 14px;
  height: 14px;
}

#laouts-views-root .insights-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#laouts-views-root .insights-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px 12px;
  align-items: center;
  padding: 12px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card-ivory);
}

#laouts-views-root .insights-row__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

#laouts-views-root .insights-row__icon svg {
  width: 16px;
  height: 16px;
}

#laouts-views-root .insights-row__icon--sage {
  background: rgba(182, 194, 166, 0.28);
  color: var(--status-success-fg);
}

#laouts-views-root .insights-row__label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

#laouts-views-root .insights-row__value {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

#laouts-views-root .insights-row__meta {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

#laouts-views-root .insights-row__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(182, 194, 166, 0.35);
  color: var(--status-success-fg);
}

#laouts-views-root .insights-report-btn {
  width: 100%;
}

#laouts-views-root .curate-section {
  margin-bottom: var(--space-7);
}

#laouts-views-root .curate-section:last-child {
  margin-bottom: 0;
}

#laouts-views-root .curate-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

#laouts-views-root .curate-section__head--split {
  align-items: center;
}

#laouts-views-root .curate-section__title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

#laouts-views-root .curate-section__title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

#laouts-views-root .curate-section__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .curate-section__sub {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .curate-arrows {
  display: flex;
  gap: 6px;
}

#laouts-views-root .curate-arrow-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

#laouts-views-root .curate-arrow-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

#laouts-views-root .curate-text-btn {
  border: none;
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

#laouts-views-root .curate-text-btn:hover {
  color: var(--text-primary);
  background: rgba(244, 241, 239, 0.65);
}

#laouts-views-root .story-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

#laouts-views-root .story-group-card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-card-ivory);
}

#laouts-views-root .story-group-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--space-4);
}

#laouts-views-root .story-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--text-inverse);
  font-size: var(--fs-xs);
  font-weight: 700;
}

#laouts-views-root .story-group-card__name {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text-primary);
}

#laouts-views-root .story-group-card__count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

#laouts-views-root .story-strip {
  display: flex;
  gap: 8px;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 4px;
}

#laouts-views-root .story-thumb {
  position: relative;
  flex: 0 0 56px;
  min-height: 76px;
  border-radius: 10px;
  overflow: hidden;
}

#laouts-views-root .story-thumb--hero {
  flex: 1.35;
  min-width: 120px;
}

#laouts-views-root .story-thumb--more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, 0.42);
  border-radius: inherit;
}

#laouts-views-root .story-thumb--more {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#laouts-views-root #laouts-view-curate .thumb-more {
  position: relative;
  z-index: 1;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #faf8f5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

#laouts-views-root .img-ph {
  background-size: cover;
  background-position: center;
}

#laouts-views-root .img-ph--a {
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, transparent 45%),
    linear-gradient(165deg, #c9b8a8 0%, #8b7355 52%, #4a3d32 100%);
}

#laouts-views-root .img-ph--b {
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
    linear-gradient(200deg, #a8b8c9 0%, #6b7a8c 55%, #3d4550 100%);
}

#laouts-views-root .img-ph--c {
  background-image:
    linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #d4c4b0 0%, #9a8470 50%, #5c4d42 100%);
}

#laouts-views-root .img-ph--d {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
    linear-gradient(220deg, #cfd8dd 0%, #7a8e96 60%, #3d474d 100%);
}

#laouts-views-root .img-ph--e {
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, transparent 42%),
    linear-gradient(145deg, #e6ddd3 0%, #b89f8c 55%, #6e5848 100%);
}

#laouts-views-root .img-ph--f {
  background-image:
    linear-gradient(190deg, rgba(255, 255, 255, 0.1) 0%, transparent 48%),
    linear-gradient(125deg, #b8c9b0 0%, #6d7d62 55%, #3d4538 100%);
}

#laouts-views-root .img-ph--blur {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
    linear-gradient(145deg, #a89888 0%, #6e6058 100%);
  filter: blur(0.8px) saturate(0.85);
  opacity: 0.88;
}

#laouts-views-root .img-ph--lowlit {
  background-image: linear-gradient(165deg, #2a2624 0%, #5a524c 100%);
  opacity: 0.82;
}

#laouts-views-root .img-ph--oof {
  background-image: linear-gradient(145deg, #9a9088 0%, #5c534c 100%);
  filter: blur(1.2px);
  opacity: 0.85;
}

#laouts-views-root .img-ph--dup {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%, rgba(255, 255, 255, 0.12) 100%),
    linear-gradient(145deg, #c4b8ae 0%, #7a6e66 100%);
}

#laouts-views-root .img-ph--sim {
  background-image: linear-gradient(135deg, #b0a69c 0%, #6d655e 100%);
  opacity: 0.86;
}

#laouts-views-root .img-ph--lowq {
  background-image: linear-gradient(180deg, #8a827a 0%, #4a443e 100%);
  opacity: 0.8;
}

#laouts-views-root .ranked-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px) {
  #laouts-views-root .ranked-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#laouts-views-root .rank-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
}

#laouts-views-root .rank-tile__num {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--ink);
  color: var(--text-inverse);
  font-size: 11px;
  font-weight: 700;
  z-index: 1;
}

#laouts-views-root .rank-tile__badge {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(232, 239, 224, 0.92);
  color: var(--status-success-fg);
  border: 1px solid rgba(182, 194, 166, 0.45);
  white-space: nowrap;
}

#laouts-views-root .dep-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  #laouts-views-root .dep-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#laouts-views-root .dep-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
}

#laouts-views-root .dep-tile__lbl {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  text-align: center;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(20, 18, 16, 0.58);
  color: #f5f2ee;
}

#laouts-views-root .curate-card--balance {
  padding: var(--space-5);
}

#laouts-views-root .curate-card__head-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

#laouts-views-root .curate-card__title--balance {
  margin-bottom: 6px;
}

#laouts-views-root .curate-card__sub {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 280px;
}

#laouts-views-root .balance-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

#laouts-views-root .balance-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

#laouts-views-root .balance-row__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

#laouts-views-root .balance-row__icon svg {
  width: 18px;
  height: 18px;
}

#laouts-views-root .balance-row__body {
  flex: 1;
  min-width: 0;
}

#laouts-views-root .balance-row__top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  align-items: baseline;
  margin-bottom: 10px;
}

#laouts-views-root .balance-row__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .balance-row__status {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}

#laouts-views-root .balance-row__pct {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-strong);
}

#laouts-views-root .balance-track {
  position: relative;
  height: 6px;
  --balance: 50%;
}

#laouts-views-root .balance-track__rail {
  height: 100%;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
}

#laouts-views-root .balance-track__fill {
  height: 100%;
  width: var(--balance);
  border-radius: inherit;
  background: linear-gradient(90deg, #e0dbd6 0%, #d5cfc8 50%, #cfc7bf 100%);
}

#laouts-views-root .balance-track__knob {
  position: absolute;
  top: 50%;
  left: var(--balance);
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg-card);
  box-shadow: 0 2px 6px rgba(20, 15, 10, 0.18);
}

#laouts-views-root .confidence-card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-muted-plaster);
}

#laouts-views-root .confidence-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

#laouts-views-root .confidence-card__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}

#laouts-views-root .confidence-card__pill {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(182, 194, 166, 0.35);
  color: var(--status-success-fg);
}

#laouts-views-root .confidence-card__text {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

#laouts-views-root .confidence-card__btn {
  width: 100%;
}

#laouts-views-root .sidebar-promo--curate h3 {
  font-size: 13.5px;
}

#laouts-views-root .sidebar-promo--curate p {
  font-size: 11px;
}

#laouts-views-root .sidebar-promo__art--curate {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background:
    radial-gradient(90% 70% at 30% 80%, rgba(120, 140, 160, 0.35), transparent 55%),
    linear-gradient(155deg, #e8e4df 0%, #c9bfb5 45%, #9a8f84 100%);
}

/* ---------- People & Story Preferences ---------- */
#laouts-views-root #laouts-view-preferences .app-main.app-main--preferences {
  max-width: min(1580px, 100%);
  padding: var(--space-5) clamp(14px, 2.6vw, 36px) var(--space-8);
  margin-left: auto;
  margin-right: auto;
}

#laouts-views-root #laouts-view-preferences .prefs-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: calc(100vh - var(--space-8)); min-height: calc(100dvh - var(--space-8));
}

#laouts-views-root .prefs-project-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .prefs-project-bar__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

#laouts-views-root .prefs-project-bar__back {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--bg-muted);
  color: var(--text-strong);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#laouts-views-root .prefs-project-bar__titles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#laouts-views-root .prefs-project-bar__name {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text-primary);
}

#laouts-views-root .prefs-draft-pill {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}

#laouts-views-root .prefs-project-bar__saved {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

#laouts-views-root .prefs-mini-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

#laouts-views-root .prefs-mini-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

#laouts-views-root .prefs-mini-step__glyph {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--accent-stepper-done-ring);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--accent-stepper-done-icon);
}

#laouts-views-root .prefs-mini-step--done .prefs-mini-step__glyph {
  border-color: transparent;
  background: rgba(200, 192, 184, 0.35);
}

#laouts-views-root .prefs-mini-step--done .prefs-mini-step__glyph svg {
  width: 10px;
  height: 10px;
  stroke: var(--accent-stepper-done-icon);
}

#laouts-views-root .prefs-mini-step--active .prefs-mini-step__glyph {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--text-inverse);
}

#laouts-views-root .prefs-mini-step--active {
  color: var(--text-primary);
}

#laouts-views-root .prefs-mini-step__between {
  width: 14px;
  height: 1px;
  background: var(--border-soft);
}

#laouts-views-root .prefs-project-bar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

#laouts-views-root .prefs-collab {
  display: flex;
  align-items: center;
}

#laouts-views-root .prefs-collab__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  margin-left: -8px;
  background: linear-gradient(145deg, #d8cfc6, #9a8b82);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .prefs-collab__dot:first-child {
  margin-left: 0;
}

#laouts-views-root .prefs-collab__dot--b {
  background: linear-gradient(145deg, #c9d4dc, #7a8e9a);
}

#laouts-views-root .prefs-collab__dot--c {
  background: linear-gradient(145deg, #e8ddd2, #b89f8c);
}

#laouts-views-root .prefs-order-btn {
  font-size: var(--fs-sm);
  padding: 0 18px;
  height: 38px;
}

#laouts-views-root .prefs-project-bar__more {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
}

#laouts-views-root .prefs-page-intro {
  padding-top: var(--space-2);
}

#laouts-views-root .prefs-page-title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

#laouts-views-root .prefs-page-sub {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.45;
}

#laouts-views-root .prefs-work-area {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(280px, 1fr);
  gap: clamp(22px, 2.5vw, 36px);
  align-items: start;
  flex: 1;
}

@media (max-width: 1200px) {
  #laouts-views-root .prefs-work-area {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .prefs-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .prefs-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
}

#laouts-views-root .prefs-card__title--inline {
  margin: 0;
}

#laouts-views-root .prefs-card__sub {
  margin: -8px 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

#laouts-views-root .prefs-card__head .prefs-card__sub {
  margin: 0 0 var(--space-4);
}

#laouts-views-root .prefs-people-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#laouts-views-root .prefs-people-row {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-soft);
}

#laouts-views-root .prefs-people-row:last-of-type {
  border-bottom: none;
}

#laouts-views-root .prefs-people-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

#laouts-views-root .prefs-people-row__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text-primary);
}

#laouts-views-root .prefs-crown {
  width: 18px;
  height: 18px;
  color: var(--accent-taupe);
}

#laouts-views-root .prefs-people-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

#laouts-views-root .prefs-chev {
  opacity: 0.45;
  font-size: 14px;
}

#laouts-views-root .prefs-avatar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#laouts-views-root .prefs-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}

#laouts-views-root .prefs-avatar-more {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px dashed var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-muted);
}

#laouts-views-root .prefs-avatar--p1 { background: radial-gradient(circle at 35% 30%, rgba(255, 224, 206, 0.65), transparent 55%), linear-gradient(145deg, #e8c4ae 0%, #a07052 100%); }
#laouts-views-root .prefs-avatar--p2 { background: radial-gradient(circle at 40% 28%, rgba(220, 236, 246, 0.55), transparent 50%), linear-gradient(155deg, #b8ccd8 0%, #5f7584 100%); }
#laouts-views-root .prefs-avatar--p3 { background: radial-gradient(circle at 32% 35%, rgba(255, 236, 214, 0.6), transparent 52%), linear-gradient(160deg, #dcc9b8 0%, #8a7060 100%); }
#laouts-views-root .prefs-avatar--p4 { background: radial-gradient(circle at 38% 32%, rgba(255, 228, 218, 0.58), transparent 54%), linear-gradient(148deg, #e8b8a0 0%, #965e48 100%); }
#laouts-views-root .prefs-avatar--p5 { background: radial-gradient(circle at 30% 30%, rgba(210, 226, 236, 0.55), transparent 52%), linear-gradient(168deg, #a8bcc8 0%, #586a76 100%); }
#laouts-views-root .prefs-avatar--p6 { background: radial-gradient(circle at 42% 38%, rgba(240, 232, 224, 0.52), transparent 55%), linear-gradient(152deg, #cfc3b8 0%, #7d6e62 100%); }
#laouts-views-root .prefs-avatar--p7 { background: radial-gradient(circle at 36% 34%, rgba(255, 242, 228, 0.55), transparent 52%), linear-gradient(158deg, #e2cdb8 0%, #917868 100%); }
#laouts-views-root .prefs-avatar--p8 { background: radial-gradient(circle at 33% 30%, rgba(200, 218, 228, 0.52), transparent 54%), linear-gradient(162deg, #9eb0bc 0%, #566572 100%); }
#laouts-views-root .prefs-avatar--p9 { background: radial-gradient(circle at 40% 36%, rgba(250, 238, 226, 0.58), transparent 53%), linear-gradient(145deg, #dec8b4 0%, #8b7464 100%); }
#laouts-views-root .prefs-avatar--p10 { background: radial-gradient(circle at 35% 33%, rgba(230, 218, 208, 0.5), transparent 56%), linear-gradient(170deg, #c4b4a8 0%, #6e6058 100%); }
#laouts-views-root .prefs-avatar--p11 { background: radial-gradient(circle at 38% 31%, rgba(212, 228, 236, 0.48), transparent 54%), linear-gradient(156deg, #adbfcb 0%, #627884 100%); }
#laouts-views-root .prefs-avatar--p12 { background: radial-gradient(circle at 34% 36%, rgba(255, 236, 220, 0.52), transparent 55%), linear-gradient(150deg, #e2c8b2 0%, #887062 100%); }

#laouts-views-root .prefs-edit-row {
  width: 100%;
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card-ivory);
  cursor: pointer;
  text-align: left;
}

#laouts-views-root .prefs-edit-row__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#laouts-views-root .prefs-edit-row__text strong {
  font-size: var(--fs-md);
  color: var(--text-primary);
}

#laouts-views-root .prefs-edit-row__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 400;
}

#laouts-views-root .prefs-appearance-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

#laouts-views-root .prefs-app-slider {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

#laouts-views-root .prefs-app-slider__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

#laouts-views-root .prefs-app-slider__icon svg {
  width: 18px;
  height: 18px;
}

#laouts-views-root .prefs-app-slider__body {
  flex: 1;
  min-width: 0;
}

#laouts-views-root .prefs-app-slider__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

#laouts-views-root .prefs-app-slider__label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

#laouts-views-root .prefs-app-slider__pct {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text-strong);
}

#laouts-views-root .prefs-app-slider__hint {
  margin: 4px 0 10px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

#laouts-views-root .prefs-app-track {
  position: relative;
  height: 6px;
  --p: 50%;
}

#laouts-views-root .prefs-app-track__rail {
  height: 100%;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
}

#laouts-views-root .prefs-app-track__fill {
  height: 100%;
  width: var(--p);
  border-radius: inherit;
  background: linear-gradient(90deg, #e2dcd6 0%, #d5cec7 100%);
}

#laouts-views-root .prefs-app-track__knob {
  position: absolute;
  top: 50%;
  left: var(--p);
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg-card);
  box-shadow: 0 2px 6px rgba(20, 15, 10, 0.16);
}

#laouts-views-root .prefs-tip-bar {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-muted-plaster);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

#laouts-views-root .prefs-tip-bar__text {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .prefs-tip-bar__reset {
  border: none;
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

#laouts-views-root .prefs-tip-bar__reset:hover {
  background: rgba(244, 241, 239, 0.75);
}

#laouts-views-root .prefs-flow-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  #laouts-views-root .prefs-flow-options {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .prefs-flow-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card-ivory);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#laouts-views-root .prefs-flow-opt__ic {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

#laouts-views-root .prefs-flow-opt__ic svg {
  width: 22px;
  height: 22px;
}

#laouts-views-root .prefs-flow-opt__name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

#laouts-views-root .prefs-flow-opt__desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

#laouts-views-root .prefs-flow-opt--active {
  border-color: var(--ink);
  border-width: 2px;
  padding: calc(var(--space-4) - 1px);
  box-shadow: var(--shadow-sm);
}

#laouts-views-root .prefs-more-card {
  width: 100%;
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
}

#laouts-views-root .prefs-more-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#laouts-views-root .prefs-more-card__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 400;
}

#laouts-views-root .prefs-rail-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#laouts-views-root .prefs-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

#laouts-views-root .prefs-live-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}

#laouts-views-root .prefs-book-stage {
  perspective: 1400px;
  margin-bottom: var(--space-4);
}

#laouts-views-root .prefs-book {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 18px 42px rgba(20, 15, 10, 0.12), 0 2px 0 rgba(255, 255, 255, 0.65) inset;
  transform: rotateX(2deg);
  transform-style: preserve-3d;
}

#laouts-views-root .prefs-book__page {
  flex: 1;
  min-width: 0;
  padding: var(--space-4);
  background: linear-gradient(180deg, #fdfcfa 0%, #f7f4f1 100%);
}

#laouts-views-root .prefs-book__page--left {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border: 1px solid var(--border-soft);
  border-right: none;
}

#laouts-views-root .prefs-book__page--right {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border: 1px solid var(--border-soft);
}

#laouts-views-root .prefs-book__spine {
  width: 10px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #ddd8d3 0%, #f2eeea 45%, #cfc9c2 100%);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

#laouts-views-root .prefs-book__kicker {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#laouts-views-root .prefs-book__chapter {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .prefs-book__lede {
  margin: 0 0 var(--space-3);
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

#laouts-views-root .prefs-book__hero {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
}

#laouts-views-root .prefs-book__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

#laouts-views-root .prefs-book__cell {
  flex: 1;
  min-height: 52px;
  border-radius: 8px;
  overflow: hidden;
}

#laouts-views-root .prefs-carousel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#laouts-views-root .prefs-carousel-bar__nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 16px;
  color: var(--text-muted);
}

#laouts-views-root .prefs-carousel-bar__thumbs {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

#laouts-views-root .prefs-carousel-bar__thumb {
  flex: 0 0 44px;
  height: 52px;
  border-radius: 6px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

#laouts-views-root .prefs-carousel-bar__thumb.is-selected {
  border-color: var(--ink);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .prefs-carousel-bar__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  margin-left: auto;
}

#laouts-views-root .prefs-ai-lead {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

#laouts-views-root .prefs-ai-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#laouts-views-root .prefs-ai-list li {
  display: flex;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-strong);
  line-height: 1.45;
}

#laouts-views-root .prefs-ai-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(182, 194, 166, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

#laouts-views-root .prefs-ai-check svg {
  width: 11px;
  height: 11px;
  stroke: var(--status-success-fg);
}

#laouts-views-root .prefs-ai-pct {
  color: var(--text-muted);
  font-weight: 600;
}

#laouts-views-root .prefs-ai-outro {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

#laouts-views-root .prefs-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0 0;
  margin-top: auto;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}

#laouts-views-root .prefs-bottom-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

#laouts-views-root .sidebar-account__avatar--prefs {
  background: linear-gradient(145deg, #d8d2cc 0%, #9a9088 100%);
}

@media (max-width: 960px) {
  #laouts-views-root .prefs-project-bar {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  #laouts-views-root .prefs-mini-stepper {
    justify-content: flex-start;
  }
}

#laouts-view-preferences .img-ph {
  background-size: cover;
  background-position: center;
}

#laouts-view-preferences .img-ph--a {
  background-image:
    radial-gradient(ellipse 95% 72% at 76% 26%, rgba(255, 246, 232, 0.74), transparent 46%),
    radial-gradient(ellipse 58% 48% at 18% 72%, rgba(42, 88, 118, 0.36), transparent 56%),
    linear-gradient(176deg, #c5e4ee 0%, #789fb4 22%, #eccfb0 50%, #a0684a 73%, #453630 100%);
}

#laouts-view-preferences .img-ph--b {
  background-image:
    radial-gradient(ellipse 82% 68% at 44% 34%, rgba(255, 232, 218, 0.62), transparent 52%),
    linear-gradient(168deg, #f2e2d6 0%, #dab09a 34%, #b07862 66%, #6a4a40 100%);
}

#laouts-view-preferences .img-ph--c {
  background-image:
    radial-gradient(ellipse 88% 62% at 68% 22%, rgba(255, 236, 206, 0.58), transparent 50%),
    linear-gradient(192deg, #f4e5cf 0%, #d9b896 36%, #b88358 66%, #6d4f3e 100%);
}

#laouts-view-preferences .img-ph--d {
  background-image:
    radial-gradient(ellipse 90% 58% at 30% 28%, rgba(235, 242, 246, 0.65), transparent 48%),
    linear-gradient(205deg, #dfe9ee 0%, #9cb0bd 38%, #607884 68%, #39474f 100%);
}

#laouts-view-preferences .img-ph--e {
  background-image:
    radial-gradient(ellipse 78% 62% at 52% 36%, rgba(255, 242, 228, 0.52), transparent 54%),
    linear-gradient(158deg, #efe5da 0%, #cbb49f 40%, #917864 72%, #554338 100%);
}

#laouts-view-preferences .img-ph--f {
  background-image:
    radial-gradient(ellipse 86% 58% at 40% 24%, rgba(224, 236, 216, 0.55), transparent 52%),
    linear-gradient(148deg, #d8e4d0 0%, #92a388 42%, #5f6b52 74%, #383f30 100%);
}

/* ---------- Review & Order ---------- */
#laouts-views-root #laouts-view-review .app-main.app-main--review {
  max-width: min(1640px, 100%);
  padding: var(--space-5) clamp(14px, 2.6vw, 36px) var(--space-8);
  margin-left: auto;
  margin-right: auto;
}

#laouts-views-root #laouts-view-review .rev-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: calc(100vh - var(--space-8)); min-height: calc(100dvh - var(--space-8));
}

#laouts-views-root .rev-page-intro {
  padding-top: var(--space-2);
}

#laouts-views-root .rev-page-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-3xl), 3vw, var(--fs-4xl));
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

#laouts-views-root .rev-page-sub {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.45;
}

#laouts-views-root .rev-work-area {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(300px, 1fr);
  gap: clamp(22px, 2.8vw, 40px);
  align-items: start;
}

@media (max-width: 1200px) {
  #laouts-views-root .rev-work-area {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .rev-main-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

#laouts-views-root .rev-checkout-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-5);
  align-self: start;
}

@media (max-width: 1200px) {
  #laouts-views-root .rev-checkout-col {
    position: static;
  }
}

#laouts-views-root .rev-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .rev-card--preview {
  padding: var(--space-6);
}

#laouts-views-root .rev-card__head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

#laouts-views-root .rev-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .rev-link-edit {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: inherit;
}

#laouts-views-root .rev-link-edit:hover {
  color: var(--text-strong);
}

#laouts-views-root .rev-book-stage {
  perspective: 1600px;
  margin-bottom: var(--space-4);
}

#laouts-views-root .rev-book {
  display: flex;
  align-items: stretch;
  max-width: min(920px, 100%);
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow:
    0 28px 64px rgba(20, 15, 10, 0.14),
    0 12px 28px rgba(20, 15, 10, 0.08),
    0 2px 0 rgba(255, 255, 255, 0.65) inset;
  transform: rotateX(3deg);
  transform-style: preserve-3d;
}

#laouts-views-root .rev-book__page {
  flex: 1;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(180deg, #fdfcfa 0%, #f7f4f1 100%);
  position: relative;
}

#laouts-views-root .rev-book__page--left {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  border: 1px solid var(--border-soft);
  border-right: none;
}

#laouts-views-root .rev-book__page--right {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  border: 1px solid var(--border-soft);
}

#laouts-views-root .rev-book__spine {
  width: 14px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #d9d3cd 0%, #f3eeea 48%, #c9c3bc 100%);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

#laouts-views-root .rev-book__folio {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-4);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-subtle);
}

#laouts-views-root .rev-book__folio--right {
  left: auto;
  right: var(--space-4);
}

#laouts-views-root .rev-book__kicker {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#laouts-views-root .rev-book__chapter {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-xl), 2vw, var(--fs-2xl));
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .rev-book__lede {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

#laouts-views-root .rev-book__hero {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

#laouts-views-root .rev-book__grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 200px;
}

#laouts-views-root .rev-book__cell {
  flex: 1;
  min-height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

#laouts-views-root .rev-preview-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-soft);
  margin-top: var(--space-2);
}

#laouts-views-root .rev-preview-controls__left,
#laouts-views-root .rev-preview-controls__center,
#laouts-views-root .rev-preview-controls__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

#laouts-views-root .rev-preview-controls__center {
  flex: 1;
  justify-content: center;
  min-width: min(280px, 100%);
}

#laouts-views-root .rev-preview-controls__pages {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
}

#laouts-views-root .rev-nav-round {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 18px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#laouts-views-root .rev-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--bg-muted);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

#laouts-views-root .rev-icon-btn--active {
  border-color: var(--border-strong);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .rev-fit-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

#laouts-views-root .rev-fit-select {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-strong);
}

#laouts-views-root .rev-filmstrip {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

#laouts-views-root .rev-filmstrip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

#laouts-views-root .rev-filmstrip__item.is-selected {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .rev-mini-spread {
  display: flex;
  gap: 3px;
  width: 72px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(20, 15, 10, 0.1);
}

#laouts-views-root .rev-mini-spread__p {
  flex: 1;
  min-width: 0;
  background-size: cover;
  background-position: center;
}

#laouts-views-root .rev-filmstrip__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

#laouts-views-root .rev-filmstrip__item.is-selected .rev-filmstrip__label {
  color: var(--text-primary);
}

#laouts-views-root .rev-trust-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 900px) {
  #laouts-views-root .rev-trust-cards {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .rev-trust-mini {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card-ivory);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .rev-trust-mini__ic {
  flex-shrink: 0;
  color: var(--accent-taupe);
}

#laouts-views-root .rev-trust-mini__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#laouts-views-root .rev-trust-mini__text strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}

#laouts-views-root .rev-trust-mini__text span {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

#laouts-views-root .rev-order-product {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  align-items: flex-start;
}

#laouts-views-root .rev-order-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
}

#laouts-views-root .rev-order-product__name {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text-primary);
}

#laouts-views-root .rev-order-product__spec {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .rev-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted-plaster);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}

#laouts-views-root .rev-order-section-label {
  margin: 0 0 var(--space-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

#laouts-views-root .rev-order-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-3);
}

#laouts-views-root .rev-order-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .rev-order-row span:last-child {
  color: var(--text-strong);
  text-align: right;
}

#laouts-views-root .rev-divider {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: var(--space-3) 0;
}

#laouts-views-root .rev-price-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-4);
}

#laouts-views-root .rev-price-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .rev-price-row span:last-child {
  font-weight: 600;
  color: var(--text-strong);
}

#laouts-views-root .rev-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-strong);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text-primary);
}

#laouts-views-root .rev-total-row__amt {
  font-size: var(--fs-xl);
}

#laouts-views-root .rev-address {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-strong);
  line-height: 1.55;
  font-style: normal;
}

#laouts-views-root .rev-pay-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text-strong);
}

#laouts-views-root .rev-pay-mark {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

#laouts-views-root .rev-pay-mark__c {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #7a6a62 0%, #4a403c 100%);
  opacity: 0.85;
}

#laouts-views-root .rev-pay-mark__c--b {
  margin-left: -10px;
  background: linear-gradient(145deg, #a89888 0%, #6e6058 100%);
  opacity: 0.75;
}

#laouts-views-root .rev-pay-mask {
  font-weight: 600;
  letter-spacing: 0.04em;
}

#laouts-views-root .rev-pay-exp {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

#laouts-views-root .rev-card--fulfill {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--bg-muted-plaster);
}

#laouts-views-root .rev-fulfill__ic {
  flex-shrink: 0;
  color: var(--accent-taupe);
}

#laouts-views-root .rev-fulfill__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

#laouts-views-root #laouts-view-review .rev-place-order {
  width: 100%;
  min-height: 52px;
  font-size: var(--fs-md);
  font-weight: 700;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-cta);
}

#laouts-views-root .rev-place-order__ic {
  display: inline-flex;
  opacity: 0.92;
}

#laouts-views-root .rev-guarantee {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

#laouts-views-root .rev-guarantee__ic {
  color: var(--accent-sage);
  display: inline-flex;
}

#laouts-views-root .sidebar-account__avatar--review {
  background: linear-gradient(145deg, #d4cec8 0%, #8f8780 100%);
}

#laouts-view-review .rev-img-ph {
  background-size: cover;
  background-position: center;
}

#laouts-view-review .rev-img-ph--a {
  background-image:
    radial-gradient(ellipse 95% 72% at 76% 26%, rgba(255, 246, 232, 0.74), transparent 46%),
    radial-gradient(ellipse 58% 48% at 18% 72%, rgba(42, 88, 118, 0.36), transparent 56%),
    linear-gradient(176deg, #c5e4ee 0%, #789fb4 22%, #eccfb0 50%, #a0684a 73%, #453630 100%);
}

#laouts-view-review .rev-img-ph--b {
  background-image:
    radial-gradient(ellipse 82% 68% at 44% 34%, rgba(255, 232, 218, 0.62), transparent 52%),
    linear-gradient(168deg, #f2e2d6 0%, #dab09a 34%, #b07862 66%, #6a4a40 100%);
}

#laouts-view-review .rev-img-ph--c {
  background-image:
    radial-gradient(ellipse 88% 62% at 68% 22%, rgba(255, 236, 206, 0.58), transparent 50%),
    linear-gradient(192deg, #f4e5cf 0%, #d9b896 36%, #b88358 66%, #6d4f3e 100%);
}

#laouts-view-review .rev-img-ph--d {
  background-image:
    radial-gradient(ellipse 90% 58% at 30% 28%, rgba(235, 242, 246, 0.65), transparent 48%),
    linear-gradient(205deg, #dfe9ee 0%, #9cb0bd 38%, #607884 68%, #39474f 100%);
}

#laouts-view-review .rev-img-ph--e {
  background-image:
    radial-gradient(ellipse 78% 62% at 52% 36%, rgba(255, 242, 228, 0.52), transparent 54%),
    linear-gradient(158deg, #efe5da 0%, #cbb49f 40%, #917864 72%, #554338 100%);
}

#laouts-view-review .rev-img-ph--f {
  background-image:
    radial-gradient(ellipse 86% 58% at 40% 24%, rgba(224, 236, 216, 0.55), transparent 52%),
    linear-gradient(148deg, #d8e4d0 0%, #92a388 42%, #5f6b52 74%, #383f30 100%);
}

#laouts-view-review .rev-img-ph--mix {
  background-image:
    linear-gradient(145deg, #e8e4df 0%, #c9bfb5 55%, #9a9088 100%),
    radial-gradient(80% 80% at 30% 20%, rgba(255, 248, 240, 0.5), transparent 55%);
}

/* ---------- Order Confirmation ---------- */
#laouts-views-root #laouts-view-order-confirmed .app-main.app-main--order-confirmed {
  max-width: min(1280px, 100%);
  padding: var(--space-6) clamp(16px, 3vw, 40px) var(--space-9);
  margin-left: auto;
  margin-right: auto;
}

#laouts-views-root .oc-shell {
  align-items: stretch;
}

#laouts-views-root .sidebar__nav--oc {
  gap: 2px;
}

#laouts-views-root .nav-item__tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}

#laouts-views-root .sidebar__bottom--oc {
  gap: var(--space-4);
}

#laouts-views-root .oc-sidebar-refer {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card-ivory);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .oc-sidebar-refer__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-muted);
}

#laouts-views-root .oc-sidebar-refer__btn {
  width: 100%;
}

#laouts-views-root .sidebar-account--oc .sidebar-account__avatar--oc {
  background: linear-gradient(145deg, #ddd6cf 0%, #9a928a 100%);
}

#laouts-views-root .oc-page {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 3vw, var(--space-8));
}

#laouts-views-root .oc-hero {
  position: relative;
  padding-top: var(--space-4);
}

#laouts-views-root .oc-hero__confetti {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(420px, 90%);
  height: 48px;
  pointer-events: none;
  display: flex;
  justify-content: space-around;
  opacity: 0.35;
}

#laouts-views-root .oc-hero__confetti span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-taupe);
  animation: oc-confetti-float 4s ease-in-out infinite;
}

#laouts-views-root .oc-hero__confetti span:nth-child(2) { animation-delay: 0.5s; background: var(--accent-sage); opacity: 0.7; }
#laouts-views-root .oc-hero__confetti span:nth-child(3) { animation-delay: 1s; }
#laouts-views-root .oc-hero__confetti span:nth-child(4) { animation-delay: 1.5s; background: var(--accent-sage); opacity: 0.55; }
#laouts-views-root .oc-hero__confetti span:nth-child(5) { animation-delay: 2s; }
#laouts-views-root .oc-hero__confetti span:nth-child(6) { animation-delay: 2.5s; }

@keyframes oc-confetti-float {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-6px); opacity: 0.85; }
}

#laouts-views-root .oc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
}

@media (max-width: 1200px) {
  #laouts-views-root .oc-hero__grid {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .oc-hero__copy {
  text-align: center;
}

@media (min-width: 900px) {
  #laouts-views-root .oc-hero__copy {
    text-align: left;
  }
}

#laouts-views-root .oc-hero__check {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-4);
  color: var(--status-success-fg);
  background: rgba(182, 194, 166, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 900px) {
  #laouts-views-root .oc-hero__copy .oc-hero__check {
    margin-left: 0;
  }
}

#laouts-views-root .oc-hero__check svg {
  width: 44px;
  height: 44px;
}

#laouts-views-root .oc-hero__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl));
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

#laouts-views-root .oc-hero__lead {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-strong);
}

#laouts-views-root .oc-hero__support {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-md);
  color: var(--text-muted);
}

#laouts-views-root .oc-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

@media (min-width: 900px) {
  #laouts-views-root .oc-hero__pills {
    justify-content: flex-start;
  }
}

#laouts-views-root .oc-pill {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}

#laouts-views-root .oc-hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  display: flex;
  gap: var(--space-5);
  align-items: stretch;
  flex-wrap: wrap;
}

#laouts-views-root .oc-hero-card__cover {
  width: 140px;
  min-height: 180px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}

#laouts-views-root .oc-hero-card__body {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#laouts-views-root .oc-hero-card__book-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

#laouts-views-root .oc-hero-card__meta {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

#laouts-views-root .oc-hero-card__btn {
  align-self: flex-start;
  margin-top: auto;
}

#laouts-views-root .oc-panel--ship {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .oc-panel__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .oc-ship-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 960px) {
  #laouts-views-root .oc-ship-layout {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .oc-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  position: relative;
}

@media (max-width: 900px) {
  #laouts-views-root .oc-timeline {
    flex-direction: column;
    gap: 0;
  }
}

#laouts-views-root .oc-timeline__step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  position: relative;
}

@media (max-width: 900px) {
  #laouts-views-root .oc-timeline__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-3) 0;
    border-left: 2px solid var(--border-soft);
    padding-left: var(--space-4);
    margin-left: 11px;
  }
}

#laouts-views-root .oc-timeline__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  width: calc(100% - 28px);
  height: 2px;
  background: var(--border-soft);
  z-index: 0;
}

@media (max-width: 900px) {
  #laouts-views-root .oc-timeline__step:not(:last-child)::after {
    display: none;
  }
}

#laouts-views-root .oc-timeline__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink);
  color: var(--text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
}

#laouts-views-root .oc-timeline__dot svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

#laouts-views-root .oc-timeline__step--done .oc-timeline__dot {
  background: var(--ink);
}

#laouts-views-root .oc-timeline__dot--ring {
  background: var(--bg-card);
  border: 2px solid var(--accent-taupe);
  box-shadow: 0 0 0 4px rgba(173, 160, 149, 0.15);
}

#laouts-views-root .oc-timeline__dot--ring::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-taupe);
}

#laouts-views-root .oc-timeline__dot--muted {
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
}

#laouts-views-root .oc-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#laouts-views-root .oc-timeline__body strong {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-primary);
}

#laouts-views-root .oc-timeline__date {
  font-size: 10px;
  color: var(--text-muted);
}

#laouts-views-root .oc-delivery-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-muted-plaster);
}

#laouts-views-root .oc-delivery-card__kicker {
  margin: 0 0 var(--space-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

#laouts-views-root .oc-delivery-card__range {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .oc-delivery-card__loc,
#laouts-views-root .oc-delivery-card__svc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .oc-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 1200px) {
  #laouts-views-root .oc-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #laouts-views-root .oc-cards-grid {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .oc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .oc-card--detail {
  grid-column: span 1;
}

#laouts-views-root .oc-card--files {
  grid-column: span 1;
}

#laouts-views-root .oc-card--warm {
  background: linear-gradient(165deg, #faf8f5 0%, #f3eee8 55%, #ebe4dc 100%);
  border-color: var(--border-soft);
}

#laouts-views-root .oc-card__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .oc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

#laouts-views-root .oc-card__head .oc-card__title {
  margin: 0;
}

#laouts-views-root .oc-count-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}

#laouts-views-root .oc-link-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: inherit;
}

#laouts-views-root .oc-link-btn:hover {
  color: var(--text-strong);
}

#laouts-views-root .oc-kv {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#laouts-views-root .oc-kv > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

#laouts-views-root .oc-kv dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 500;
}

#laouts-views-root .oc-kv dd {
  margin: 0;
  text-align: right;
  color: var(--text-strong);
  font-weight: 600;
}

#laouts-views-root .oc-divider {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: var(--space-4) 0;
}

#laouts-views-root .oc-kv--price > div {
  font-weight: 500;
}

#laouts-views-root .oc-kv--price dd {
  font-weight: 600;
}

#laouts-views-root .oc-total-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-strong);
  font-weight: 700;
  font-size: var(--fs-md);
}

#laouts-views-root .oc-address {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  line-height: 1.55;
  font-style: normal;
  color: var(--text-strong);
}

#laouts-views-root .oc-address-line {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .oc-address-label {
  font-weight: 600;
  color: var(--text-strong);
}

#laouts-views-root .oc-note-card {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}

#laouts-views-root .oc-file-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#laouts-views-root .oc-file-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
}

#laouts-views-root .oc-file-row:last-of-type {
  border-bottom: none;
}

#laouts-views-root .oc-file-row__icon {
  width: 32px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: var(--bg-muted-plaster);
}

#laouts-views-root .oc-file-row__icon--pdf {
  background: linear-gradient(145deg, #e8e4e0 0%, #c9c2bc 100%);
}

#laouts-views-root .oc-file-row__icon--spread {
  background: linear-gradient(145deg, #e4e8ea 0%, #aeb8bf 100%);
}

#laouts-views-root .oc-file-row__icon--img {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5), transparent 50%),
    linear-gradient(155deg, #dccfc4 0%, #9a8b80 100%);
}

#laouts-views-root .oc-file-row__icon--zip {
  background: linear-gradient(145deg, #ebe6df 0%, #c4bbb2 100%);
}

#laouts-views-root .oc-file-row__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#laouts-views-root .oc-file-row__size {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

#laouts-views-root .oc-file-row__dl {
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}

#laouts-views-root .oc-file-row__dl:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

#laouts-views-root .oc-download-all {
  width: 100%;
}

#laouts-views-root .oc-card__copy {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

#laouts-views-root .oc-set-mockup {
  height: 140px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-soft);
}

#laouts-views-root .oc-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

#laouts-views-root .oc-card__actions .btn {
  flex: 1;
  min-width: 140px;
}

#laouts-views-root .oc-continue {
  padding-top: var(--space-4);
}

#laouts-views-root .oc-continue__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

#laouts-views-root .oc-continue__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .oc-continue__sub {
  margin: 0;
  max-width: 520px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

#laouts-views-root .oc-suggest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 900px) {
  #laouts-views-root .oc-suggest-grid {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .oc-suggest-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, 140px);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

@media (max-width: 520px) {
  #laouts-views-root .oc-suggest-card {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .oc-suggest-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
}

#laouts-views-root .oc-suggest-card__desc {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.45;
}

#laouts-views-root .oc-suggest-card__btn {
  font-size: var(--fs-xs);
}

#laouts-views-root .oc-suggest-card__art {
  width: 100%;
  min-height: 100px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}

#laouts-views-root .oc-footer {
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-4);
}

#laouts-views-root .oc-footer__line {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

#laouts-views-root .oc-footer__heart {
  color: var(--accent-taupe);
  display: inline-flex;
}

#laouts-view-order-confirmed .oc-img-ph {
  background-size: cover;
  background-position: center;
}

#laouts-view-order-confirmed .oc-img-ph--cover {
  background-image:
    radial-gradient(ellipse 90% 70% at 40% 25%, rgba(255, 246, 236, 0.75), transparent 45%),
    linear-gradient(165deg, #e8dfd6 0%, #b89a88 45%, #7d6558 85%);
}

#laouts-view-order-confirmed .oc-img-ph--spread {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 45%),
    linear-gradient(165deg, #f5f1eb 0%, #d9cfc4 40%, #a8988c 100%);
}

#laouts-view-order-confirmed .oc-img-ph--s1 {
  background-image:
    linear-gradient(148deg, #ebe6e1 0%, #c5bdb4 50%, #8a827a 100%);
}

#laouts-view-order-confirmed .oc-img-ph--s2 {
  background-image:
    linear-gradient(155deg, #e8e4df 0%, #c9c0b6 48%, #92877e 100%);
}

#laouts-view-order-confirmed .oc-img-ph--s3 {
  background-image:
    linear-gradient(160deg, #dfe6ea 0%, #aeb9c2 55%, #6f7c88 100%);
}

#laouts-view-order-confirmed .oc-img-ph--s4 {
  background-image:
    linear-gradient(152deg, #efe8e0 0%, #d4c7bb 50%, #a69488 100%);
}

#laouts-views-root #laouts-view-order-confirmed a.btn:focus-visible,
#laouts-views-root #laouts-view-order-confirmed button:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
}

/* ---------- AI Studio / Generate with AI ---------- */
#laouts-views-root #laouts-view-ai-studio .app-main.app-main--ai-studio {
  flex: 1;
  min-width: 0;
  max-width: min(1480px, 100%);
  padding: var(--space-5) clamp(16px, 2.5vw, 40px) var(--space-8);
}

#laouts-views-root .ais-shell {
  align-items: stretch;
}

#laouts-views-root .sidebar__bottom--ais {
  gap: var(--space-4);
}

#laouts-views-root .ais-credits-card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card-ivory);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .ais-credits-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#laouts-views-root .ais-credits-card__usage {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
}

#laouts-views-root .ais-credits-card__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}

#laouts-views-root .ais-credits-card__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #dcd7d1 0%, #c4bbb2 50%, #ada095 100%);
}

#laouts-views-root .ais-credits-card__reset {
  margin: var(--space-3) 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

#laouts-views-root .ais-credits-card__upgrade {
  width: 100%;
}

#laouts-views-root .sidebar-account__avatar--ais {
  background: linear-gradient(145deg, #d8d2cc 0%, #8f8780 100%);
}

#laouts-views-root .ais-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

#laouts-views-root .ais-page-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#laouts-views-root .ais-page-head__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

#laouts-views-root .ais-bc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .ais-bc a {
  color: var(--text-strong);
  text-decoration: none;
  font-weight: 600;
}

#laouts-views-root .ais-bc a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#laouts-views-root .ais-bc__sep {
  margin: 0 6px;
  opacity: 0.45;
}

#laouts-views-root .ais-page-head__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#laouts-views-root .ais-head-chip {
  font-size: var(--fs-xs);
}

#laouts-views-root .ais-icon-round {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

#laouts-views-root .ais-icon-round:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

#laouts-views-root .ais-page-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-2xl), 2.8vw, var(--fs-4xl));
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

#laouts-views-root .ais-page-lede {
  margin: 0;
  max-width: 560px;
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: 1.45;
}

#laouts-views-root .ais-work {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  align-items: start;
}

@media (max-width: 1200px) {
  #laouts-views-root .ais-work {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .ais-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .ais-panel--controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#laouts-views-root .ais-panel--results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

#laouts-views-root .ais-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#laouts-views-root .ais-textarea {
  width: 100%;
  min-height: 140px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card-ivory);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-primary);
  resize: vertical;
}

#laouts-views-root .ais-textarea:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(26, 24, 21, 0.06);
}

#laouts-views-root .ais-char-count {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  text-align: right;
}

#laouts-views-root .ais-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#laouts-views-root .ais-quick-btn {
  font-size: var(--fs-xs);
}

#laouts-views-root .ais-section-label {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#laouts-views-root .ais-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#laouts-views-root .ais-pill {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--bg-muted-plaster);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}

#laouts-views-root .ais-pill.is-active {
  background: var(--bg-card);
  border-color: var(--ink);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .ais-style-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 520px) {
  #laouts-views-root .ais-style-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#laouts-views-root .ais-style-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

#laouts-views-root .ais-style-tile.is-active {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
}

#laouts-views-root .ais-style-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
}

#laouts-views-root .ais-style-thumb--wc {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 252, 248, 0.85), transparent 45%),
    linear-gradient(155deg, #e8f2f6 0%, #b8cfe0 35%, #f2dcc8 70%, #c4a894 100%);
}

#laouts-views-root .ais-style-thumb--ed {
  background: linear-gradient(165deg, #3a3a38 0%, #6e6e6c 40%, #e8e7e4 100%);
}

#laouts-views-root .ais-style-thumb--mn {
  background: linear-gradient(145deg, #f7f6f4 0%, #e2dfd9 100%);
}

#laouts-views-root .ais-style-thumb--vt {
  background:
    radial-gradient(ellipse 80% 60% at 40% 30%, rgba(255, 236, 210, 0.65), transparent 50%),
    linear-gradient(165deg, #d4c4b0 0%, #8b7360 100%);
}

#laouts-views-root .ais-style-thumb--lx {
  background: linear-gradient(148deg, #2c2622 0%, #6b6058 45%, #d4c9bc 100%);
}

#laouts-views-root .ais-style-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

#laouts-views-root .ais-style-tile.is-active .ais-style-name {
  color: var(--text-primary);
}

#laouts-views-root .ais-ratio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#laouts-views-root .ais-ratio-btn {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}

#laouts-views-root .ais-ratio-btn.is-active {
  border-color: var(--ink);
  background: var(--bg-card);
  color: var(--text-primary);
}

#laouts-views-root .ais-ratio-btn--custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#laouts-views-root .ais-generate-btn {
  width: 100%;
  min-height: 48px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-2);
}

#laouts-views-root .ais-generate-btn__ic {
  opacity: 0.9;
}

#laouts-views-root .ais-credits-note {
  margin: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

#laouts-views-root .ais-results-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

#laouts-views-root .ais-results-head__left {
  min-width: 0;
}

#laouts-views-root .ais-results-title {
  margin: 0 0 6px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
}

#laouts-views-root .ais-results-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

#laouts-views-root .ais-results-spark {
  color: var(--accent-taupe);
  display: inline-flex;
}

#laouts-views-root .ais-results-head__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

#laouts-views-root .ais-sim-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}

#laouts-views-root .ais-sim-select {
  min-width: 160px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  font-size: var(--fs-xs);
  font-family: inherit;
  color: var(--text-strong);
}

#laouts-views-root .ais-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}

#laouts-views-root .ais-view-btn {
  width: 38px;
  height: 36px;
  border: none;
  background: var(--bg-muted);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#laouts-views-root .ais-view-btn.is-active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

#laouts-views-root .ais-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 900px) {
  #laouts-views-root .ais-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#laouts-views-root .ais-result {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-soft);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

#laouts-views-root .ais-result.is-selected {
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}

#laouts-views-root .ais-result__badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 252, 248, 0.92);
  border: 1px solid rgba(26, 24, 21, 0.12);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

#laouts-views-root .ais-result__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-taupe);
  pointer-events: none;
}

#laouts-views-root .ais-result.is-selected .ais-result__fav {
  color: var(--text-strong);
}

#laouts-views-root .ais-gen--1 {
  background-image:
    radial-gradient(ellipse 90% 65% at 45% 35%, rgba(255, 248, 238, 0.75), transparent 48%),
    linear-gradient(165deg, #cde4ee 0%, #8fb8cf 28%, #f4e8dc 62%, #d4a894 100%);
}

#laouts-views-root .ais-gen--2 {
  background-image:
    radial-gradient(ellipse 70% 55% at 60% 40%, rgba(255, 255, 255, 0.55), transparent 52%),
    linear-gradient(175deg, #a8c9dc 0%, #6a94b0 45%, #e8ddd2 100%);
}

#laouts-views-root .ais-gen--3 {
  background-image:
    radial-gradient(circle at 25% 65%, rgba(255, 236, 200, 0.45), transparent 45%),
    linear-gradient(155deg, #f0e6dc 0%, #c9b09a 42%, #9d8474 100%);
}

#laouts-views-root .ais-gen--4 {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 25%, rgba(255, 252, 246, 0.8), transparent 55%),
    linear-gradient(185deg, #eef6fa 0%, #b9d3e2 38%, #89a8bc 100%);
}

#laouts-views-root .ais-gen--5 {
  background-image:
    radial-gradient(circle at 70% 30%, rgba(220, 245, 210, 0.35), transparent 42%),
    linear-gradient(160deg, #e8efe4 0%, #a8bfaa 48%, #6d8472 100%);
}

#laouts-views-root .ais-gen--6 {
  background-image:
    radial-gradient(ellipse 65% 55% at 40% 45%, rgba(255, 245, 228, 0.65), transparent 50%),
    linear-gradient(175deg, #f6eee3 0%, #dccbb8 40%, #b09280 100%);
}

#laouts-views-root .ais-gen--7 {
  background-image:
    linear-gradient(165deg, #dfe9ee 0%, #9fb6c4 38%, #6a7f8f 78%, #4a5c6b 100%);
}

#laouts-views-root .ais-gen--8 {
  background-image:
    radial-gradient(ellipse 95% 70% at 48% 38%, rgba(180, 210, 235, 0.45), transparent 50%),
    linear-gradient(155deg, #2f4a62 0%, #4d6f88 32%, #c9d9e4 78%, #eef4f8 100%);
}

#laouts-views-root .ais-results-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

#laouts-views-root .ais-results-disclaimer {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  max-width: 280px;
}

#laouts-views-root .ais-results-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

#laouts-views-root .ais-results-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

#laouts-views-root .ais-apply {
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .ais-apply__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

#laouts-views-root .ais-apply__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .ais-apply__sub {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .ais-apply-strip {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

#laouts-views-root .ais-page-thumb {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 96px;
}

#laouts-views-root .ais-page-thumb__preview {
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border-radius: 10px;
}

#laouts-views-root .ais-mini-spread {
  display: flex;
  gap: 3px;
  width: 88px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .ais-page-thumb.is-active .ais-mini-spread {
  border-color: var(--ink);
}

#laouts-views-root .ais-mini-spread__p {
  flex: 1;
  min-width: 0;
  background-size: cover;
  background-position: center;
}

#laouts-views-root .ais-mini-spread--a .ais-mini-spread__p:first-child {
  background-image: linear-gradient(160deg, #ddd8d2 0%, #a89890 100%);
}

#laouts-views-root .ais-mini-spread--a .ais-mini-spread__p:last-child {
  background-image: linear-gradient(155deg, #e8e4df 0%, #c4bbb2 100%);
}

#laouts-views-root .ais-mini-spread--b .ais-mini-spread__p:first-child {
  background-image: linear-gradient(165deg, #cfdde6 0%, #8faab8 100%);
}

#laouts-views-root .ais-mini-spread--b .ais-mini-spread__p:last-child {
  background-image: linear-gradient(160deg, #eeeae6 0%, #c9bfb8 100%);
}

#laouts-views-root .ais-mini-spread--c .ais-mini-spread__p:first-child {
  background-image: linear-gradient(168deg, #f2ebe4 0%, #d2c4b8 100%);
}

#laouts-views-root .ais-mini-spread--c .ais-mini-spread__p:last-child {
  background-image: linear-gradient(155deg, #dce8ec 0%, #9fb0bc 100%);
}

#laouts-views-root .ais-mini-spread--d .ais-mini-spread__p:first-child {
  background-image: linear-gradient(152deg, #e6dfd8 0%, #b8a89e 100%);
}

#laouts-views-root .ais-mini-spread--d .ais-mini-spread__p:last-child {
  background-image: linear-gradient(170deg, #c8d8e2 0%, #7d949f 100%);
}

#laouts-views-root .ais-mini-spread--e .ais-mini-spread__p:first-child {
  background-image: linear-gradient(158deg, #eef2e8 0%, #b8c4ae 100%);
}

#laouts-views-root .ais-mini-spread--e .ais-mini-spread__p:last-child {
  background-image: linear-gradient(162deg, #ebe6e1 0%, #c9c0b8 100%);
}

#laouts-views-root .ais-mini-spread--f .ais-mini-spread__p:first-child {
  background-image: linear-gradient(165deg, #d4e0ea 0%, #8fa3b0 100%);
}

#laouts-views-root .ais-mini-spread--f .ais-mini-spread__p:last-child {
  background-image: linear-gradient(155deg, #f5f0ea 0%, #d8cfc6 100%);
}

#laouts-views-root .ais-page-thumb__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

#laouts-views-root .ais-page-thumb.is-active .ais-page-thumb__label {
  color: var(--text-primary);
}

#laouts-views-root .ais-page-thumb--add .ais-page-thumb__add {
  width: 88px;
  height: 56px;
  border-radius: 8px;
  border: 2px dashed var(--border-strong);
  background: var(--bg-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#laouts-views-root .ais-page-thumb__plus {
  font-size: 22px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1;
}

#laouts-views-root #laouts-view-ai-studio a.btn:focus-visible,
#laouts-views-root #laouts-view-ai-studio button:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
}

/* ---------- Home / Dashboard ---------- */
#laouts-views-root #laouts-view-home .app-main.app-main--dashboard {
  flex: 1;
  min-width: 0;
  max-width: min(1540px, 100%);
  padding: var(--space-6) clamp(18px, 3vw, 44px) var(--space-9);
}

#laouts-views-root .dh-shell {
  align-items: stretch;
}

#laouts-views-root .sidebar__bottom--dh {
  gap: var(--space-4);
}

#laouts-views-root .dh-sidebar-refer {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card-ivory);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .dh-sidebar-refer__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-muted);
}

#laouts-views-root .dh-sidebar-refer__btn {
  width: 100%;
}

#laouts-views-root .sidebar-account__avatar--dh {
  background: linear-gradient(145deg, #ddd7cf 0%, #938c84 100%);
}

#laouts-views-root .dh-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(28px, 3vw, 44px);
  align-items: start;
}

@media (max-width: 1200px) {
  #laouts-views-root .dh-layout {
    grid-template-columns: 1fr;
  }
}

#laouts-views-root .dh-main-col {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 3vw, var(--space-8));
  min-width: 0;
}

#laouts-views-root .dh-greet {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

#laouts-views-root .dh-greet__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-2xl), 2.8vw, var(--fs-4xl));
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

#laouts-views-root .dh-greet__wave {
  font-style: normal;
}

#laouts-views-root .dh-greet__sub {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
}

#laouts-views-root .dh-greet__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#laouts-views-root .dh-icon-round {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}

#laouts-views-root .dh-icon-round:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

#laouts-views-root .dh-notify-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c45c52;
  border: 1px solid var(--bg-card);
}

#laouts-views-root .dh-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#laouts-views-root .dh-block__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .dh-block__heading--inline {
  font-size: var(--fs-lg);
}

#laouts-views-root .dh-block__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

#laouts-views-root .dh-block__row--split {
  align-items: flex-start;
}

#laouts-views-root .dh-block__lead {
  min-width: 0;
}

#laouts-views-root .dh-block__intro {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root .dh-link-more {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}

#laouts-views-root .dh-link-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#laouts-views-root .dh-beta-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: middle;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}

#laouts-views-root .dh-create-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 1100px) {
  #laouts-views-root .dh-create-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #laouts-views-root .dh-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#laouts-views-root .dh-create-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#laouts-views-root .dh-create-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

#laouts-views-root .dh-create-card__art {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}

#laouts-views-root .dh-create-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .dh-create-card__sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

#laouts-views-root .dh-create-card__art--photo {
  background:
    radial-gradient(ellipse 80% 65% at 45% 40%, rgba(255, 250, 244, 0.85), transparent 52%),
    linear-gradient(160deg, #ebe7e2 0%, #c9bfb6 45%, #8f847c 100%);
}

#laouts-views-root .dh-create-card__art--travel {
  background:
    radial-gradient(circle at 70% 30%, rgba(180, 220, 250, 0.45), transparent 42%),
    linear-gradient(175deg, #dfeaf0 0%, #9bb5c8 48%, #5f7588 100%);
}

#laouts-views-root .dh-create-card__art--mag {
  background:
    linear-gradient(135deg, #2a2826 0%, #4a4542 38%, #e8e4df 100%);
}

#laouts-views-root .dh-create-card__art--layflat {
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%, rgba(255, 248, 238, 0.65), transparent 48%),
    linear-gradient(168deg, #f2ebe4 0%, #d4c4b4 42%, #9e8878 100%);
}

#laouts-views-root .dh-create-card__art--album {
  background:
    radial-gradient(circle at 28% 70%, rgba(255, 220, 200, 0.35), transparent 46%),
    linear-gradient(155deg, #ece8e4 0%, #cbbfb5 50%, #8a7d74 100%);
}

#laouts-views-root .dh-recent-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 1100px) {
  #laouts-views-root .dh-recent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #laouts-views-root .dh-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#laouts-views-root .dh-project-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#laouts-views-root .dh-project-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

#laouts-views-root .dh-project-card__cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}

#laouts-views-root .dh-project-card__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}

#laouts-views-root .dh-project-card__meta {
  font-size: 11px;
  color: var(--text-muted);
}

#laouts-views-root .dh-project-card--new {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--bg-muted-plaster);
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 220px;
}

#laouts-views-root .dh-project-card__plus {
  font-size: 28px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1;
  margin-bottom: var(--space-2);
}

#laouts-views-root .dh-ph {
  background-size: cover;
  background-position: center;
}

#laouts-views-root .dh-ph--japan {
  background-image:
    radial-gradient(ellipse 75% 55% at 45% 35%, rgba(255, 250, 245, 0.72), transparent 48%),
    linear-gradient(168deg, #f5ebe4 0%, #ddb8b8 35%, #a87878 72%, #5c4848 100%);
}

#laouts-views-root .dh-ph--amalfi {
  background-image:
    radial-gradient(ellipse 85% 60% at 55% 30%, rgba(255, 252, 248, 0.78), transparent 52%),
    linear-gradient(175deg, #cfe8f4 0%, #8fbdd8 30%, #f6e8d8 65%, #d4b098 100%);
}

#laouts-views-root .dh-ph--wedding {
  background-image:
    radial-gradient(circle at 40% 25%, rgba(255, 255, 255, 0.75), transparent 48%),
    linear-gradient(160deg, #f8f2ee 0%, #e8ddd8 40%, #c9b8b0 100%);
}

#laouts-views-root .dh-ph--ice {
  background-image:
    radial-gradient(ellipse 70% 55% at 35% 40%, rgba(230, 245, 255, 0.65), transparent 50%),
    linear-gradient(180deg, #dfebf2 0%, #a8c5da 42%, #5f7f94 100%);
}

#laouts-views-root .dh-ai-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 1100px) {
  #laouts-views-root .dh-ai-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #laouts-views-root .dh-ai-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#laouts-views-root .dh-ai-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#laouts-views-root .dh-ai-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

#laouts-views-root .dh-ai-card__cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  position: relative;
}

#laouts-views-root .dh-ai-card__spark {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 252, 248, 0.92);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-taupe);
}

#laouts-views-root .dh-ai-card__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}

#laouts-views-root .dh-ai-card__sub {
  font-size: 11px;
  color: var(--text-muted);
}

#laouts-views-root .dh-ai-card--more {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--bg-muted-plaster);
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
}

#laouts-views-root .dh-ai-card__plus {
  font-size: 26px;
  font-weight: 300;
  color: var(--text-muted);
}

#laouts-views-root .dh-ph--kyoto {
  background-image:
    radial-gradient(ellipse 80% 60% at 45% 35%, rgba(255, 240, 230, 0.65), transparent 48%),
    linear-gradient(165deg, #f4eae4 0%, #d8b8a8 38%, #9d7468 100%);
}

#laouts-views-root .dh-ph--norway {
  background-image:
    radial-gradient(ellipse 70% 55% at 38% 40%, rgba(220, 240, 255, 0.5), transparent 50%),
    linear-gradient(175deg, #dbe8ee 0%, #8fadbf 45%, #4f6778 100%);
}

#laouts-views-root .dh-ph--portugal {
  background-image:
    radial-gradient(circle at 65% 30%, rgba(255, 235, 200, 0.42), transparent 44%),
    linear-gradient(155deg, #f8ebd8 0%, #e8c49c 42%, #b88458 100%);
}

#laouts-views-root .dh-ph--paris {
  background-image:
    radial-gradient(ellipse 85% 55% at 50% 25%, rgba(252, 248, 255, 0.72), transparent 52%),
    linear-gradient(170deg, #ebe6ee 0%, #c4b8c8 45%, #7d7288 100%);
}

#laouts-views-root .dh-ai-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: linear-gradient(145deg, #faf7f4 0%, #f0eae4 42%, #e8dfd8 100%);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .dh-ai-banner__copy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: min(100%, 420px);
}

#laouts-views-root .dh-ai-banner__ic {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-taupe);
}

#laouts-views-root .dh-ai-banner__title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

#laouts-views-root .dh-ai-banner__sub {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

#laouts-views-root .dh-ai-banner__btn {
  flex-shrink: 0;
}

#laouts-views-root .dh-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-6);
}

@media (max-width: 1200px) {
  #laouts-views-root .dh-rail {
    position: static;
  }
}

#laouts-views-root .dh-card {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .dh-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .dh-card__subtitle {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

#laouts-views-root .dh-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

#laouts-views-root .dh-timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border-soft);
  border-radius: 1px;
}

#laouts-views-root .dh-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding-bottom: var(--space-4);
}

#laouts-views-root .dh-timeline__item:last-child {
  padding-bottom: 0;
}

#laouts-views-root .dh-timeline__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(255, 252, 248, 0.85);
  z-index: 1;
}

#laouts-views-root .dh-timeline__item div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#laouts-views-root .dh-timeline__item strong {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}

#laouts-views-root .dh-timeline__item span:last-child {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

#laouts-views-root .dh-promo {
  padding: 0;
  overflow: hidden;
}

#laouts-views-root .dh-promo__visual {
  height: 160px;
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(ellipse 90% 80% at 50% 100%, rgba(40, 35, 32, 0.15), transparent 55%),
    radial-gradient(ellipse 70% 50% at 40% 40%, rgba(255, 252, 248, 0.35), transparent 50%),
    linear-gradient(168deg, #ebe6e1 0%, #cfc6bd 38%, #9a9088 85%);
  position: relative;
}

#laouts-views-root .dh-promo__visual::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 56%;
  height: 44%;
  border-radius: 6px 8px 10px 6px;
  background: linear-gradient(155deg, #faf9f7 0%, #e0dbd6 55%, #b8afa8 100%);
  box-shadow: 0 12px 28px rgba(20, 15, 10, 0.12);
}

#laouts-views-root .dh-promo__title {
  margin: 0;
  padding: var(--space-4) var(--space-5) 0;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}

#laouts-views-root .dh-promo__sub {
  margin: 0;
  padding: var(--space-2) var(--space-5) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root #laouts-view-home a.btn:focus-visible,
#laouts-views-root #laouts-view-home a.dh-create-card:focus-visible,
#laouts-views-root #laouts-view-home a.dh-project-card:focus-visible,
#laouts-views-root #laouts-view-home a.dh-ai-card:focus-visible,
#laouts-views-root #laouts-view-home button:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
}

/* ---------- Design Editor shell (#laouts-view-design) ---------- */
#laouts-views-root #laouts-view-design.view--design:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  width: 100%;
  background: var(--bg-app-plaster);
}

#laouts-views-root .des-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

/* Top bar */
#laouts-views-root .des-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(280px, 520px) minmax(200px, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #fdfcfa 0%, #f8f6f3 100%);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .des-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

#laouts-views-root .des-back {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: var(--fs-lg);
  line-height: 1;
  box-shadow: var(--shadow-xs);
  transition: background 0.15s ease, border-color 0.15s ease;
}

#laouts-views-root .des-back:hover {
  background: var(--bg-muted);
}

#laouts-views-root .des-header__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#laouts-views-root .des-header__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#laouts-views-root .des-header__saved {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Stepper — compact center rail */
#laouts-views-root .des-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  min-width: 0;
}

#laouts-views-root .des-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: var(--fw-medium);
}

#laouts-views-root .des-step__between {
  width: 12px;
  height: 1px;
  margin: 0 2px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  opacity: 0.75;
}

#laouts-views-root .des-step__g {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  border: 1px solid var(--border-strong);
  background: var(--bg-muted-plaster);
  color: var(--text-muted);
  flex-shrink: 0;
}

#laouts-views-root .des-step__g svg {
  width: 12px;
  height: 12px;
  color: var(--accent-stepper-done-icon);
}

#laouts-views-root .des-step--done .des-step__g {
  border-color: var(--accent-stepper-done-ring);
  background: linear-gradient(165deg, #faf9f7 0%, #eeeae6 100%);
}

#laouts-views-root .des-step--active .des-step__g {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--text-inverse);
}

#laouts-views-root .des-step--active {
  color: var(--text-primary);
}

#laouts-views-root .des-step:not(.des-step--done):not(.des-step--active) .des-step__g {
  opacity: 0.85;
}

#laouts-views-root .des-step__l {
  white-space: nowrap;
}

#laouts-views-root .des-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
}

#laouts-views-root .des-collab {
  display: flex;
  align-items: center;
}

#laouts-views-root .des-collab span {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-card);
  margin-left: -10px;
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .des-collab span:first-child {
  margin-left: 0;
  background: linear-gradient(145deg, #e8dfd8 0%, #cfc4bc 100%);
}

#laouts-views-root .des-collab span:nth-child(2) {
  background: linear-gradient(145deg, #dcd6cf 0%, #b8aea6 100%);
}

#laouts-views-root .des-collab span:nth-child(3) {
  background: linear-gradient(145deg, #d4cbc4 0%, #9c928a 100%);
}

#laouts-views-root .des-order-btn {
  padding-inline: var(--space-5);
  white-space: nowrap;
}

#laouts-views-root .des-btn-more {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  font-size: 14px;
  line-height: 1;
}

#laouts-views-root .des-btn-more:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

/* Main grid */
#laouts-views-root .des-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(300px, 380px);
  gap: 0;
  min-height: 0;
  border-top: 1px solid transparent;
}

/* Left — tool rail + thumbs */
#laouts-views-root .des-col--left {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3) var(--space-4) var(--space-4);
  border-right: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #faf9f7 0%, #f5f2ee 100%);
  min-width: 0;
}

#laouts-views-root .des-toolrail {
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

#laouts-views-root .des-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) 4px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: var(--fw-medium);
  transition: background 0.15s ease, color 0.15s ease;
}

#laouts-views-root .des-tool:hover {
  background: rgba(255, 252, 248, 0.65);
  color: var(--text-primary);
}

#laouts-views-root .des-tool.is-active {
  background: linear-gradient(165deg, #ebe4dc 0%, #e3dbd4 100%);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#laouts-views-root .des-tool__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

#laouts-views-root .des-thumb-strip {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  padding-right: var(--space-1);
}

#laouts-views-root .des-thumb-spread {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-xs);
}

#laouts-views-root .des-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  aspect-ratio: 1.15 / 1;
  padding: 5px;
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .des-mini span {
  border-radius: 3px;
  background:
    linear-gradient(145deg, rgba(220, 212, 204, 0.65) 0%, rgba(190, 182, 174, 0.35) 100%),
    radial-gradient(ellipse 80% 60% at 40% 35%, rgba(255, 252, 248, 0.75), transparent 60%);
  border: 1px solid rgba(213, 205, 196, 0.65);
}

#laouts-views-root .des-mini--b span:first-child {
  background:
    linear-gradient(165deg, #c9bfb6 0%, #a89f96 100%),
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.35), transparent 55%);
}

#laouts-views-root .des-mini--c span:last-child {
  background:
    linear-gradient(155deg, #b9afa8 0%, #8f8780 95%),
    radial-gradient(circle at 70% 35%, rgba(255, 252, 248, 0.25), transparent 50%);
}

#laouts-views-root .des-mini--e span:first-child {
  background:
    linear-gradient(135deg, #9c9288 0%, #6e6762 100%);
}

#laouts-views-root .des-mini--e span:last-child {
  background:
    linear-gradient(225deg, #d8cfc7 0%, #a89f96 100%);
}

#laouts-views-root .des-thumb-spread__lbl {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

#laouts-views-root .des-thumb-spread.is-selected .des-mini {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

#laouts-views-root .des-thumb-spread.is-selected .des-thumb-spread__lbl {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

#laouts-views-root .des-thumb-spread--add .des-thumb-spread__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.15 / 1;
  border-radius: var(--radius-xs);
  border: 1px dashed var(--border-strong);
  background: rgba(255, 252, 248, 0.5);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

/* Center column */
#laouts-views-root .des-col--center {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-3);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 252, 248, 0.75), transparent 52%),
    linear-gradient(165deg, #f3f0ec 0%, #ebe6e1 55%, #e3ded8 100%);
}

#laouts-views-root .design-preview-mount.des-mount {
  flex: 1;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

#laouts-views-root .des-stage {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

#laouts-views-root .des-book {
  display: flex;
  align-items: stretch;
  justify-content: center;
  filter: drop-shadow(0 18px 36px rgba(26, 22, 18, 0.14));
}

#laouts-views-root .des-book__page {
  flex: 1;
  min-width: 0;
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(165deg, #fefdfb 0%, #faf8f5 48%, #f4f0eb 100%);
  border: 1px solid var(--border-soft);
}

#laouts-views-root .des-book__page--left {
  border-radius: var(--radius-md) 2px 2px var(--radius-md);
  border-right: none;
}

#laouts-views-root .des-book__page--right {
  border-radius: 2px var(--radius-md) var(--radius-md) 2px;
  border-left: none;
}

#laouts-views-root .des-book__folio {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  margin-bottom: var(--space-3);
}

#laouts-views-root .des-book__folio--r {
  text-align: right;
}

#laouts-views-root .des-book__seam {
  flex: 0 0 10px;
  align-self: stretch;
  background: linear-gradient(90deg, #e8e4df 0%, #d9d3cd 45%, #ece8e4 100%);
  box-shadow: inset 2px 0 4px rgba(255, 252, 248, 0.35), inset -2px 0 4px rgba(40, 35, 30, 0.06);
}

#laouts-views-root .des-book__kicker {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#laouts-views-root .des-book__chapter {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--text-strong);
  line-height: var(--lh-tight);
}

#laouts-views-root .des-book__body {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-snug);
  max-width: 36ch;
}

#laouts-views-root .des-book__hero.des-ph {
  height: 180px;
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
  background:
    linear-gradient(135deg, rgba(180, 168, 156, 0.55) 0%, rgba(120, 108, 98, 0.55) 100%),
    radial-gradient(ellipse 70% 55% at 35% 40%, rgba(255, 252, 248, 0.55), transparent 62%);
  border: 1px solid rgba(213, 205, 196, 0.85);
}

#laouts-views-root .des-book__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

#laouts-views-root .des-book__cell.des-ph {
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(213, 205, 196, 0.85);
}

#laouts-views-root .des-book__cell.des-ph--c1 {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(155deg, #cbbfb6 0%, #9a9088 100%),
    radial-gradient(circle at 28% 35%, rgba(255, 252, 248, 0.35), transparent 55%);
}

#laouts-views-root .des-book__cell.des-ph--c2 {
  background:
    linear-gradient(165deg, #cfc6bd 0%, #a69e96 100%);
}

#laouts-views-root .des-book__cell.des-ph--c3 {
  background:
    linear-gradient(195deg, #d8cfc8 0%, #8f8780 100%);
}

/* Preview toolbar */
#laouts-views-root .des-preview-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: rgba(255, 252, 248, 0.82);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .des-preview-toolbar__left,
#laouts-views-root .des-preview-toolbar__mid,
#laouts-views-root .des-preview-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

#laouts-views-root .des-preview-toolbar__mid {
  flex: 1;
  justify-content: center;
}

#laouts-views-root .des-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#laouts-views-root .des-icon-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

#laouts-views-root .des-icon-btn.is-active {
  border-color: var(--border-strong);
  background: linear-gradient(165deg, #ebe4dc 0%, #e3dbd4 100%);
  color: var(--text-primary);
}

#laouts-views-root .des-round-nav {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  font-size: 18px;
  line-height: 1;
  color: var(--text-primary);
  cursor: pointer;
}

#laouts-views-root .des-page-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  padding: 0 var(--space-3);
}

#laouts-views-root .des-fit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

#laouts-views-root .des-fit__sel {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  font-size: var(--fs-xs);
  color: var(--text-primary);
  cursor: pointer;
}

/* Filmstrip */
#laouts-views-root .des-filmstrip-wrap {
  flex: 0 0 auto;
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

#laouts-views-root .des-filmstrip {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  min-width: min-content;
}

#laouts-views-root .des-fs-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

#laouts-views-root .des-fs-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 104px;
  aspect-ratio: 1.2 / 1;
  padding: 6px;
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
}

#laouts-views-root .des-fs-mini span {
  border-radius: 3px;
  background:
    linear-gradient(145deg, rgba(215, 208, 200, 0.85) 0%, rgba(175, 168, 160, 0.55) 100%);
  border: 1px solid rgba(200, 192, 184, 0.65);
}

#laouts-views-root .des-fs-mini--x2 span:first-child {
  background: linear-gradient(145deg, #aeaaa6 0%, #8c8783 100%);
}

#laouts-views-root .des-fs-mini--x2 span:last-child {
  background: linear-gradient(215deg, #cbc4bd 0%, #9e9690 100%);
}

#laouts-views-root .des-fs-lbl {
  font-size: 11px;
  color: var(--text-muted);
}

#laouts-views-root .des-fs-item.is-selected .des-fs-mini {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

#laouts-views-root .des-fs-item.is-selected .des-fs-lbl {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* Right rail */
#laouts-views-root .des-col--right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border-left: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #fcfbf9 0%, #f7f4f1 100%);
  overflow-y: auto;
  min-height: 0;
}

#laouts-views-root #laouts-view-design .des-panel {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

#laouts-views-root #laouts-view-design .des-panel__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

#laouts-views-root #laouts-view-design .des-panel__block {
  margin-bottom: var(--space-4);
}

#laouts-views-root #laouts-view-design .des-panel__label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

#laouts-views-root #laouts-view-design .des-panel__strong {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

#laouts-views-root #laouts-view-design .des-panel__muted {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

#laouts-views-root #laouts-view-design .des-panel__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-muted-plaster);
  border: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
}

#laouts-views-root #laouts-view-design .des-panel__stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#laouts-views-root #laouts-view-design .des-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#laouts-views-root #laouts-view-design .des-pill {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-card-ivory);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  cursor: pointer;
}

#laouts-views-root #laouts-view-design .des-pill:hover {
  border-color: var(--accent-taupe);
}

#laouts-views-root #laouts-view-design .des-pill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--text-inverse);
}

#laouts-views-root #laouts-view-design .des-dir-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

#laouts-views-root #laouts-view-design .des-dir.des-ph {
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-soft);
  padding: 0;
  cursor: pointer;
}

#laouts-views-root #laouts-view-design .des-dir--1 {
  background:
    linear-gradient(145deg, #cfc7bf 0%, #8f8780 100%);
}

#laouts-views-root #laouts-view-design .des-dir--2 {
  background: linear-gradient(165deg, #ddd6cf 0%, #a9a29c 100%);
}

#laouts-views-root #laouts-view-design .des-dir--3 {
  background: linear-gradient(135deg, #e3dcd6 0%, #b5aea8 100%);
}

#laouts-views-root #laouts-view-design .des-dir--4 {
  background: linear-gradient(205deg, #cac3bd 0%, #908983 100%);
}

#laouts-views-root #laouts-view-design .des-dir--5 {
  background: linear-gradient(155deg, #ded8d2 0%, #a39d97 100%);
}

#laouts-views-root #laouts-view-design .des-dir--6 {
  background: linear-gradient(175deg, #bdb6b0 0%, #868079 100%);
}

#laouts-views-root #laouts-view-design .des-dir--7 {
  background: linear-gradient(125deg, #d9d2cc 0%, #9e9690 100%);
}

#laouts-views-root #laouts-view-design .des-dir--8 {
  background: linear-gradient(195deg, #c8c2bc 0%, #7f7974 100%);
}

#laouts-views-root #laouts-view-design .des-dir.is-selected {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#laouts-views-root #laouts-view-design .des-regen {
  width: 100%;
  margin-bottom: var(--space-4);
}

#laouts-views-root #laouts-view-design .des-gen-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#laouts-views-root #laouts-view-design .des-gen-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

#laouts-views-root #laouts-view-design .des-gen-list li:last-child {
  border-bottom: none;
}

#laouts-views-root #laouts-view-design .des-gen-link {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#laouts-views-root #laouts-view-design .des-gen-link:hover {
  color: var(--ink);
}

#laouts-views-root #laouts-view-design .des-panel--order .des-order-dl {
  margin: 0 0 var(--space-4);
}

#laouts-views-root #laouts-view-design .des-order-dl div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}

#laouts-views-root #laouts-view-design .des-order-dl div:last-child {
  border-bottom: none;
}

#laouts-views-root #laouts-view-design .des-order-dl dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

#laouts-views-root #laouts-view-design .des-order-dl dd {
  margin: 0;
  text-align: right;
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

#laouts-views-root #laouts-view-design .des-order-wide {
  width: 100%;
}

@media (max-width: 1200px) {
  #laouts-views-root .des-body {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(260px, 320px);
  }

  #laouts-views-root .des-header {
    grid-template-columns: 1fr;
    row-gap: var(--space-3);
  }

  #laouts-views-root .des-stepper {
    order: 1;
    grid-column: 1 / -1;
  }

  #laouts-views-root .des-header__left {
    order: 2;
  }

  #laouts-views-root .des-header__right {
    order: 3;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 900px) {
  #laouts-views-root .des-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  #laouts-views-root .des-col--left {
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
  }

  #laouts-views-root .des-thumb-strip {
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
  }

  #laouts-views-root .des-col--right {
    border-left: none;
    border-top: 1px solid var(--border-soft);
  }
}

/* ---------- Utilities ---------- */
#laouts-views-root .tabular {
  font-variant-numeric: tabular-nums;
}