/* =========================================================
   Base / reset
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
    /* Brand palette (female/pink default). Overridden to blue under html[data-sex-theme="male"]. */
    --c-accent: #4a1c1c;
    --c-text: #3b1010;
    --c-shadow: #5b2020;
    --c-primary-dark: #b87a6b;
    --c-primary: #d4a89a;
    --c-primary-hover: #a86a5b;
    --c-primary-text: #7a3b2b;
    --c-cream: #faf3ee;
    --c-bg-soft: #f5ece5;
    --c-card: #fffdf9;
    --c-card2: #fffbf4;
    --c-accent-rgb: 74, 28, 28;
    --c-shadow-rgb: 91, 32, 32;
    --c-primary-rgb: 212, 168, 154;
    --c-primary-dark-rgb: 184, 122, 107;
    --c-cream-rgb: 255, 251, 244;
  --color-primary: var(--c-primary);
  --color-primary-dark: var(--c-primary-dark);
  --color-accent: var(--c-accent);
  --color-text: var(--c-text);
  --color-cream: var(--c-cream);
  --color-bg-soft: var(--c-bg-soft);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 30px;
  --radius-bubble: 50px;

  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-btn: 0 4px 16px rgba(var(--c-accent-rgb), 0.15);
  --shadow-modal:
    0 8px 32px rgba(var(--cwt-180-130-110), 0.15),
    0 1.5px 8px rgba(0, 0, 0, 0.08);
  --shadow-turn:
    0 8px 32px rgba(0, 0, 0, 0.18),
    0 0 40px 10px rgba(0, 0, 0, 0.12);

  --turn-easing: cubic-bezier(.22, .61, .36, 1);
  --turn-duration: 420ms;
  --fade-duration: 180ms;

  --content-pad-y: 24px;
  --content-pad-x: 16px;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  overflow-y: auto;
  color: var(--color-text);

  background: linear-gradient(135deg, var(--cw-e8cfc4) 0%, var(--cw-dfc4be) 25%, var(--cw-d4b0a8) 50%, var(--cw-e5cfc5) 75%, var(--cw-f2e6dc) 100%);
  background-attachment: fixed;
}

body.no-bg {
  background: var(--color-bg-soft);
}

.container {
  max-width: 800px;
  margin: auto;
}

/* =========================================================
   Utilities
   ========================================================= */
.u-page-center {
  max-width: 600px;
  width: 100%;
  text-align: center;
  margin-top: 6vh;
}

.u-back-link {
  margin-top: 1rem;
}

.u-button-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* Margin-top scale (extracted from inline styles) */
.u-mt-2  { margin-top: 0.2rem; }
.u-mt-25 { margin-top: 0.25rem; }
.u-mt-4  { margin-top: 0.4rem; }
.u-mt-8  { margin-top: 0.8rem; }
.u-mt-1  { margin-top: 1rem; }
.u-mt-8px  { margin-top: 8px; }
.u-mt-12px { margin-top: 12px; }
.u-mb-18 { margin-bottom: 18px; }

/* Text helpers */
.u-text-left { text-align: left; }
.u-fs-sm { font-size: 0.85rem; }
.u-inline-block { display: inline-block; }

/* Prose / page container (Privacy, Consent, DeleteData, etc.) */
.u-prose-page {
  max-width: 720px;
  margin: 2rem auto;
  padding: 1.5rem;
}
.u-prose-page--wide { max-width: 860px; line-height: 1.55; }

/* Auth reset-password page (overrides .u-page-center default width) */
.u-page-center.u-page-center--auth { max-width: 480px; padding-top: 60px; }

/* Form helpers */
.u-textarea-fluid { width: 100%; resize: vertical; }
.u-label-block { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.u-fieldset-bare { border: 0; padding: 0; margin: 0 0 0.8rem 0; }
.u-fieldset-bare > legend { font-weight: 600; margin-bottom: 0.3rem; }
.u-grid-autofit-140 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.4rem 0.8rem;
}

/* Debug error toggle (Create Look error modal) */
.btn-debug-toggle {
  background: none;
  border: 1px solid #888;
  color: #888;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.82rem;
}
.debug-error-pre {
  max-height: 300px;
  overflow: auto;
  background: #1a1a1a;
  color: #ccc;
  padding: 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 0.4rem;
}

/* Auth (reset password) modal-content variant */
.studio-login-modal-content--reset {
  position: relative;
  padding: 36px;
}

/* Knowledge status banner */
.knowledge-status-banner {
  max-width: 960px;
  margin: 1rem auto 0;
  padding: 0.65rem 1rem;
  background: var(--cw-fff8e1);
  border: 1px solid var(--cw-f0c36d);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--cw-5b4604);
}

/* Studio login footer alignment variant */
.studio-form-footer--login {
  text-align: left;
  margin-bottom: 18px;
}

/* ManageRetryFeedback */
.feedback-result-pre {
  white-space: pre-wrap;
  background: #f6f6f8;
  padding: 12px;
  border-radius: 8px;
  margin-top: 8px;
}
.feedback-cell {
  max-width: 340px;
  white-space: pre-wrap;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-primary-dark);
}

.btn--secondary {
  background: var(--cw-ede4dc);
  color: var(--color-text);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--cw-d4c0b4);
}

.btn--secondary:hover {
  background: var(--cw-e2d6cc);
}

.btn--danger {
  background: var(--cw-b42318);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-pill);
}

.btn--danger:hover {
  background: var(--cw-922015);
}

/* Style suggestion chips */
.style-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.btn--chip {
  background: var(--color-cream);
  color: var(--color-text);
  border: 1px solid var(--cw-d4c0b4);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn--chip:hover {
  background: var(--cw-ede4dc);
  border-color: var(--cw-b8a99a);
}

.btn--chip-active,
.btn--chip-active:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Bubble button - colors preserved */
.btn--bubble {
  position: fixed;
  left: 50%;
  bottom: max(50px, env(safe-area-inset-bottom, 0px));
  z-index: 1000;

  display: inline-block;
  padding: 1rem 2.5rem;
  border: 0;
  border-radius: var(--radius-bubble);

  background: var(--color-primary);
  color: var(--color-text);

  font-size: 1.3rem;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;

  box-shadow: var(--shadow-btn);
  transform: translateX(-50%) translateZ(0);
  will-change: transform;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.12s ease;
}

.support-floating-btn.btn--bubble {
  left: auto;
  right: 24px;
  bottom: 50px;
  transform: translateZ(0);
}

.support-floating-btn.btn--bubble:hover {
  transform: scale(1.08);
}

.support-floating-btn.btn--bubble:active {
  transform: scale(1.03);
}

.vcep-floating-btn.btn--bubble {
  left: auto;
  right: 24px;
  bottom: 112px;
  transform: translateZ(0);
}

.vcep-floating-btn.btn--bubble:hover {
  transform: scale(1.08);
}

.vcep-floating-btn.btn--bubble:active {
  transform: scale(1.03);
}

#createLookBtn.btn--bubble:hover {
  transform: translateX(-50%) scale(1.2);
}

/* =========================================================
   Modal
   ========================================================= */
.modal-content {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--cwt-180-130-110), 0.35);
  box-shadow: var(--shadow-modal);
  color: var(--color-text);
  overflow: hidden;
}

.modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1.2rem 1.5rem 1rem 1.5rem;

  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-cream) 100%);
  border-bottom: 1.5px solid rgba(var(--cwt-180-130-110), 0.4);
  color: var(--color-text);
}

.modal-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.modal-header .close {
  position: absolute;
  top: 0.7rem;
  right: 1.2rem;

  font-size: 2rem;
  line-height: 1;

  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}

.modal-header .close:hover {
  color: var(--color-text);
}

.modal-body label {
  color: var(--color-accent);
}

/* Home page auth modal popup behavior */
.app-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(13, 18, 28, 0.58);
  z-index: 2000;
}

.app-modal.is-open {
  display: flex;
}

.app-modal .modal-dialog {
  width: min(92vw, 440px);
  max-width: 440px;
  margin: 0;
}

.app-modal .modal-body .form-group:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-modal .btn {
  min-height: 40px;
}

.auth-view-hidden {
  display: none;
}

/* =========================================================
   Studio login modal — restyled to match cream/serif design
   ========================================================= */
.studio-login-modal .modal-dialog {
  width: min(92vw, 460px);
}

.studio-login-modal .modal-content {
  position: relative;
  background: var(--color-cream, var(--c-cream));
  border: none;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(var(--cwt-40-16-16), 0.22);
  padding: 36px 36px 28px;
}

.studio-login-modal .modal-body {
  padding: 0;
}

.studio-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text, var(--c-text));
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.85;
}

.studio-modal-close:hover {
  opacity: 1;
}

.studio-modal-title {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent, var(--c-accent));
  margin: 0 0 22px;
  text-align: left;
  letter-spacing: 0.2px;
}

.studio-form .form-group {
  margin-bottom: 18px;
}

.studio-form label {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-accent, var(--c-accent));
  margin-bottom: 6px;
}

.studio-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  background: #ffffff;
  border: 1px solid rgba(var(--c-accent-rgb), 0.18);
  border-radius: 10px;
  color: var(--color-text, var(--c-text));
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.studio-input::placeholder {
  color: rgba(var(--c-accent-rgb), 0.35);
}

.studio-input:focus {
  outline: none;
  border-color: var(--color-primary-dark, var(--c-primary-dark));
  box-shadow: 0 0 0 3px rgba(var(--c-primary-dark-rgb), 0.18);
}

.studio-textarea {
  resize: vertical;
  min-height: 120px;
  border-radius: 14px;
  font-family: inherit;
  line-height: 1.4;
}

.studio-form-error.text-success {
  color: #2c7a3d;
}

.studio-form-error {
  min-height: 1.25em;
  margin-bottom: 8px;
  color: var(--cw-a02020);
  font-size: 0.9rem;
}

.studio-btn-primary {
  display: block;
  width: 100%;
  padding: 14px 20px;
  margin-top: 6px;
  background: linear-gradient(180deg, var(--cw-e6cfc2) 0%, var(--c-primary) 100%);
  color: var(--color-accent, var(--c-accent));
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(var(--c-primary-dark-rgb), 0.28);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.studio-btn-primary:hover {
  filter: brightness(1.03);
  box-shadow: 0 6px 18px rgba(var(--c-primary-dark-rgb), 0.36);
}

.studio-btn-primary:active {
  transform: translateY(1px);
}

.studio-btn-google {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  background: #ffffff;
  color: var(--color-accent, var(--c-accent));
  border: 1px solid rgba(var(--c-accent-rgb), 0.18);
  border-radius: 999px;
  font-weight: 500;
}

.studio-btn-google:hover {
  background: #fbf6f1;
}

.studio-form-links {
  margin-top: 18px;
  text-align: center;
}

.studio-link-forgot {
  display: inline-block;
  color: var(--color-accent, var(--c-accent));
  text-decoration: underline;
  font-weight: 600;
  margin-bottom: 10px;
}

.studio-form-footer {
  margin: 6px 0 0;
  font-size: 0.95rem;
  color: var(--color-text, var(--c-text));
}

.studio-link-signup {
  color: var(--color-accent, var(--c-accent));
  text-decoration: underline;
  font-weight: 600;
  margin-left: 4px;
}

@media (max-width: 480px) {
  .studio-login-modal .modal-content {
    padding: 28px 22px 22px;
    border-radius: 14px;
  }
  .studio-modal-title {
    font-size: 1.7rem;
  }
}

/* =========================================================
   Support page
   ========================================================= */
.support-page {
  max-width: 780px;
  margin: 32px auto;
}

.support-form-group {
  margin-bottom: 12px;
}

.support-register-btn {
  margin-left: 8px;
}

/* =========================================================
   Shein search popup
   ========================================================= */
.shein-page {
  font-family: Arial, Helvetica, sans-serif;
  margin: 12px;
}

.shein-page .search-bar {
  margin-bottom: 12px;
}

.shein-page .results {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.shein-page .tile {
  position: relative;
  width: clamp(140px, 45vw, 200px);
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.shein-page .tile img {
  width: 100%;
  height: clamp(140px, 45vw, 200px);
  object-fit: cover;
}

.shein-page .tile .meta {
  padding: 8px;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}

.shein-page .try-btn {
  position: absolute;
  left: 6px;
  top: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: none;
}

.shein-page .tile:hover .try-btn {
  display: block;
}

.shein-query-input {
  width: 60%;
  min-width: 180px;
  max-width: 100%;
  padding: 6px;
}

.shein-affiliate-status {
  margin-top: 6px;
  color: #444;
  font-size: 12px;
}

.shein-response-meta {
  color: #444;
  margin-bottom: 8px;
  font-size: 12px;
}

.shein-challenge-alert {
  width: 100%;
  border: 1px solid var(--cw-f0c36d);
  background: var(--cw-fff8e5);
  color: var(--cw-7a4e00);
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 12px;
}

.shein-direct-link {
  font-weight: bold;
}

.shein-product-link {
  font-size: 11px;
}

.shein-empty {
  color: #666;
}

/* =========================================================
   Shared content panel backgrounds
   ========================================================= */
.profile-form-column,
.create-look-form,
.look-page,
#lookImageContainer {
  width: 100%;
  min-height: 350px;
  height: 100%;
  border-radius: var(--radius-md);
  padding: var(--content-pad-y) var(--content-pad-x);
  margin-bottom: 24px;
  box-sizing: border-box;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Profile form panel — profile.png overlaid on top of look1.png (look1 at 50%) */
.profile-form-column {
  background-image: url('/images/profile.png'), url('/images/look1.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: contain, 80% auto;
}

.profile-form-column label {
  font-weight: 500;
}

.profile-form-column input[type="text"],
.profile-form-column input[type="number"] {
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

/* Create look panel — uses same parchment gradient as saved-look pages */
.book-page#createLookPage {
  background: linear-gradient(135deg, var(--cw-e8cfc4) 0%, var(--cw-dfc4be) 25%, var(--cw-d4b0a8) 50%, var(--cw-e5cfc5) 75%, var(--cw-f2e6dc) 100%);
  /* Paint the gradient across the full viewport (not the page's narrower,
     aspect-locked box) so its colour stops line up with the fixed <body>
     gradient and the page blends in seamlessly instead of showing an edge seam. */
  background-size: 100vw 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.create-look-form {
  background: transparent !important;
  background-image: none !important;
}

/* ---------------------------------------------------------
   Create-look page layout — wrapper IS the look-page--rework grid
   (row of 4 tiles top | centered photo | row of 4 tiles bottom).
   --------------------------------------------------------- */
#createLookPage .create-look-form { margin: 0; border-radius: 0; min-height: 0; box-sizing: border-box; background: transparent !important; }

#createLookPage .create-items-row {
  margin: 0;
  min-height: 0;
  align-items: stretch;
  gap: 1.2cqw;
}

#createLookPage .create-photo-wrap {
  /* Mirror .look-page--rework .look-photo-wrap visuals so the create wrap
     renders at the exact same size, position and chrome as the read-only
     look-photo-wrap (grid-row: 3 stretch, centered content, soft cream bg). */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-md, 10px);
  background: rgba(var(--c-cream-rgb), 0.55);
  border: 1px solid rgba(var(--c-accent-rgb), 0.18);
  gap: 0.5rem;
  padding: 0;
  box-shadow: none;
}
#createLookPage .create-photo-frame {
  /* Neutralize the legacy chrome (padding/bg/shadow) — the outer wrap now
     carries the visual treatment. Frame just stretches to hold the stack. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  gap: 0;
}
/* Two-column variant: the photo stack fills the frame and itself splits into
   a photo/palette column plus the retailer-picker column. */
#createLookPage .create-photo-frame--2col {
  flex-direction: row;
  align-items: stretch;
  gap: 0.75rem;
}
#createLookPage .create-photo-frame--2col > .create-photo-stack {
  flex: 1 1 auto;
  min-width: 0;
}
#createLookPage .create-look-photo {
  /* Hug the photo: size to its own aspect ratio (capped to the frame)
     instead of filling the box, so there are no letterbox bars. */
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}
#createLookPage .create-photo-stack {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.75rem;
  min-height: 0;
}
/* Two-column variant: photo on the LEFT, retailers + palette stacked on the RIGHT.
   Collapses to a single column on mobile. */
#createLookPage .create-photo-stack--rows {
  flex-direction: row;
  align-items: stretch;
}
/* Left column — the photo. Fills its column; the image scales via object-fit. */
#createLookPage .create-photo-stack__photo {
  /* Grow to take the available height of the stack column so the photo has a
     real box to scale against (instead of sizing to the image's own height). */
  flex: 1 1 52%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
}
#createLookPage .create-photo-stack--rows .create-look-photo {
  /* Scale the photo to the height OR width of .create-photo-stack__photo
     (whichever is the limiting dimension), preserving aspect ratio via
     object-fit: contain. Transparent background means no visible letterbox. */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Right column — retailers search stacked ABOVE the colour-palette control.
   (The photo is the left column; on mobile everything stacks vertically.) */
#createLookPage .create-photo-stack__secondrow {
  flex: 1 1 48%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
#createLookPage .create-photo-stack__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-height: 0;
}
#createLookPage .create-photo-stack__col--retailers {
  flex: 0 0 auto;
  width: 100%;
}
#createLookPage .create-photo-stack__col--palette {
  flex: 1 1 auto;
  width: 100%;
  align-items: center;
}
#createLookPage .create-photo-stack__col--season {
  flex: 1 1 auto;
  width: 100%;
  align-items: center;
}
#createLookPage .create-photo-stack__col--actions {
  flex: 0 0 auto;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
}
/* Look action buttons (Suggest / Generate / Wardrobe / Clear All), stacked
   vertically under the seasonal colour palette in the --season column. */
#createLookPage .look-actions-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
  align-items: stretch;
}
#createLookPage .look-actions-group .btn {
  width: 100%;
}
/* ── Custom per-item palette (integrated into the season slider's far-right
   "Custom" notch — items render as .season-swatch cells in #seasonSwatches) ── */
#createLookPage .season-custom__hint {
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  color: var(--c-text);
  opacity: 0.85;
  margin: -2px 0 2px;
}
/* Custom item cell = a clickable .season-swatch (button reset) */
#createLookPage .season-swatch--custom {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 4px 2px;
  border-radius: 12px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
#createLookPage .season-swatch--custom:hover {
  background: rgba(var(--c-shadow-rgb), 0.06);
}
#createLookPage .season-swatch--custom.is-set {
  box-shadow: 0 0 0 2px rgba(var(--c-shadow-rgb), 0.18);
}
#createLookPage .season-swatch__dot--any {
  background: repeating-conic-gradient(#e9e2e4 0deg 90deg, #fff 90deg 180deg) 0 0 / 12px 12px;
}
#createLookPage .season-swatch__sub {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--c-shadow);
  opacity: 0.8;
  text-align: center;
  line-height: 1.1;
}
#createLookPage .season-custom__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(179, 38, 30, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  padding: 7px 15px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b3261e;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
}
#createLookPage .season-custom__clear::before { content: "🧹"; font-size: 0.9rem; line-height: 1; }
#createLookPage .season-custom__clear:hover {
  background: rgba(179, 38, 30, 0.10);
  border-color: #b3261e;
  transform: translateY(-1px);
}
#createLookPage .season-custom__save {
  border: 0;
  border-radius: 999px;
  background: var(--c-shadow);
  color: #fff;
  padding: 8px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s ease;
}
#createLookPage .season-custom__save:hover {
  filter: brightness(1.06);
}
#createLookPage .season-custom__save:disabled {
  opacity: 0.7;
  cursor: default;
}
/* Shared colour-picker popup opened when a custom slot is tapped */
#createLookPage .item-color-popup {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(58, 47, 51, 0.42);
}
#createLookPage .item-color-popup[hidden] {
  display: none;
}
#createLookPage .item-color-popup__panel {
  width: min(360px, 100%);
  box-sizing: border-box;
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 48px rgba(58, 47, 51, 0.3);
}
#createLookPage .item-color-popup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#createLookPage .item-color-popup__title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--c-text);
}
#createLookPage .item-color-popup__close {
  border: 0;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  color: var(--c-text);
  opacity: 0.7;
  cursor: pointer;
  padding: 4px;
}
#createLookPage .item-color-popup__close:hover {
  opacity: 1;
}
#createLookPage .item-color-popup__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
#createLookPage .item-swatch__name {
  font-weight: 600;
}
#createLookPage .item-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 10px 3px 8px;
  border: 1.5px solid rgba(var(--c-shadow-rgb), 0.28);
  border-radius: 999px;
  background: #fff;
  font-size: 0.74rem;
  color: var(--c-text);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
#createLookPage .item-swatch:hover {
  border-color: var(--c-shadow);
}
#createLookPage .item-swatch__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  flex: 0 0 auto;
}
#createLookPage .item-swatch__any {
  font-weight: 600;
  opacity: 0.75;
  padding: 0 2px;
}
#createLookPage .item-swatch.is-selected {
  border-color: var(--c-shadow);
  background: rgba(var(--c-shadow-rgb), 0.10);
  box-shadow: 0 0 0 2px rgba(var(--c-shadow-rgb), 0.18);
  font-weight: 700;
}
/* ── Landscape photo layout ─────────────────────────────────────────
   When a landscape (wider-than-tall) photo is uploaded, the photo moves
   to a full-width top row and the controls sit below in three columns:
   retailers | colour palette | buttons. Toggled by JS via the
   .create-photo-stack--landscape class. Portrait/square keeps the
   default photo-left / controls-right two-column layout. */
#createLookPage .create-photo-stack--rows.create-photo-stack--landscape {
  flex-direction: column;
}
#createLookPage .create-photo-stack--landscape .create-photo-stack__photo {
  flex: 0 0 auto;
  width: 100%;
  max-height: 56vh;
}
#createLookPage .create-photo-stack--landscape .create-photo-stack__photo .create-look-photo,
#createLookPage .create-photo-stack--landscape .create-photo-stack__photo .create-look-photo-btn {
  max-height: 56vh;
}
#createLookPage .create-photo-stack--landscape .create-photo-stack__secondrow {
  flex: 0 0 auto;
  width: 100%;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
#createLookPage .create-photo-stack--landscape .create-photo-stack__col--retailers,
#createLookPage .create-photo-stack--landscape .create-photo-stack__col--season,
#createLookPage .create-photo-stack--landscape .create-photo-stack__col--actions {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
/* ── Seasonal colour palette card (replaces the manual colour-frame picker) ── */
#createLookPage .season-card {
  flex: 1 1 auto;
  /* Fill the --season column so its left/right edges line up exactly with the
     retailer picker (above) and the look-actions-group + item palette (below).
     box-sizing keeps the 14/16px padding inside that 100% width. */
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 10px 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(var(--c-cream-rgb), 0.92), rgba(var(--c-cream-rgb), 0.72));
  border: 1px solid rgba(var(--c-shadow-rgb), 0.16);
  box-shadow: 0 10px 26px rgba(var(--c-shadow-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  overflow: auto;
}
#createLookPage .season-card__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
#createLookPage .season-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c-text);
  line-height: 1.15;
}
#createLookPage .season-card__tagline {
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(var(--c-shadow-rgb), 0.72);
}
#createLookPage .season-card__sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(var(--c-shadow-rgb), 0.12);
}
#createLookPage .season-card__sub-main {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--c-primary-text);
}
#createLookPage .season-card__sub-sub {
  font-size: 0.72rem;
  color: rgba(var(--c-shadow-rgb), 0.6);
}
#createLookPage .season-card__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  justify-content: center;
  gap: 5px 5px;
  padding: 2px 0;
}
#createLookPage .season-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
#createLookPage .season-swatch__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(var(--c-shadow-rgb), 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.75);
}
#createLookPage .season-swatch__label {
  font-size: 0.62rem;
  line-height: 1.1;
  text-align: center;
  color: rgba(var(--c-shadow-rgb), 0.78);
  max-width: 8ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#createLookPage .season-card__slider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
#createLookPage .season-card__slider-end {
  font-size: 0.6rem;
  color: rgba(var(--c-shadow-rgb), 0.6);
  max-width: 8ch;
  text-align: center;
  line-height: 1.05;
}
#createLookPage #seasonSlider {
  flex: 1 1 auto;
  accent-color: var(--c-primary-dark);
  cursor: pointer;
}
#createLookPage .season-card__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
#createLookPage .season-recolor-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.86rem;
  color: #fff;
  background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary-hover));
  box-shadow: 0 6px 16px rgba(var(--c-shadow-rgb), 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
#createLookPage .season-recolor-btn::before { content: "🎨"; font-size: 1rem; }
#createLookPage .season-recolor-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--c-shadow-rgb), 0.28); }
#createLookPage .season-recolor-btn:disabled, #createLookPage .season-recolor-btn.is-busy { opacity: 0.7; cursor: default; transform: none; }
#createLookPage .season-recolor-btn.is-busy .season-recolor-btn__label::after {
  content: "…";
}
#createLookPage .season-recolor-btn__cost {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.02em;
}
#createLookPage .season-revert-btn {
  padding: 7px 12px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-primary-text);
  background: rgba(var(--c-cream-rgb), 0.9);
  border: 1px solid rgba(var(--c-shadow-rgb), 0.22);
}
#createLookPage .season-revert-btn:hover { background: #fff; }
#createLookPage .season-card__msg {
  font-size: 0.78rem;
  color: rgba(var(--c-shadow-rgb), 0.82);
  min-height: 1em;
}
#createLookPage .season-card__msg--error { color: #b3261e; font-weight: 600; }
#createLookPage .create-photo-stack__col--retailers > .retailer-picker {
  width: 100%;
  margin-top: 0;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}
#createLookPage .create-photo-stack .create-look-photo-btn {
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: 100%;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}
#createLookPage .create-photo-stack #colorFrame {
  flex: 0 0 auto;
  max-height: 12cqh;
  width: 100%;
  grid-template-columns: repeat(auto-fill, 28px);
  grid-auto-rows: 28px;
  justify-content: center;
}
#createLookPage .create-photo-stack .palette-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
#createLookPage .create-photo-stack .palette-row #colorFrame {
  flex: 0 1 auto;
  width: auto;
  justify-content: center;
  justify-self: center;
  margin-inline: auto;
}
#createLookPage .create-photo-stack .palette-title {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-fg, #2a2a2a);
  opacity: 0.85;
  user-select: none;
}
#createLookPage .create-photo-stack .palette-title__main {
  font-size: 0.95rem;
  text-transform: uppercase;
}
#createLookPage .create-photo-stack .palette-title__sub {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.7;
}
#createLookPage .create-photo-stack .palette-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}
#createLookPage .create-photo-stack .palette-actions .palette-reset-btn,
#createLookPage .create-photo-stack .palette-actions .palette-clear-btn,
#createLookPage .create-photo-stack .palette-actions .palette-save-btn {
  position: static;
  right: auto;
  bottom: auto;
}
#createLookPage .create-look-description { width: 100%; max-width: 720px; }

#createLookPage .create-look-disclaimer { display: none; }

/* =========================================================
   Mobile responsiveness for the central photo stack
   (.create-photo-wrap > .create-photo-frame > .create-photo-stack)
   The desktop layout relies on container-query units (cqh/cqw)
   and an inline-flex side panel. On narrow viewports we switch
   to viewport units and a single-column stack so everything
   resizes cleanly with the window.
   ========================================================= */
@media (max-width: 820px) {
  #createLookPage .create-photo-wrap,
  .create-photo-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    overflow: visible;
  }
  #createLookPage .create-photo-frame,
  .create-photo-frame {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px;
    gap: 10px;
    min-height: 0;
    max-height: none;
  }
  #createLookPage .create-photo-stack,
  .create-photo-stack {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 8px;
    flex-direction: column;
  }
  /* Second row collapses to a single column on mobile. */
  #createLookPage .create-photo-stack__secondrow,
  #createLookPage .create-photo-stack--landscape .create-photo-stack__secondrow {
    flex-direction: column;
    gap: 8px;
  }
  #createLookPage .create-photo-stack__col--retailers,
  #createLookPage .create-photo-stack__col--palette,
  #createLookPage .create-photo-stack__col--season,
  #createLookPage .create-photo-stack__col--actions,
  #createLookPage .create-photo-stack--landscape .create-photo-stack__col--retailers,
  #createLookPage .create-photo-stack--landscape .create-photo-stack__col--season,
  #createLookPage .create-photo-stack--landscape .create-photo-stack__col--actions {
    flex: 0 0 auto;
    width: 100%;
  }
  /* Retailer column goes full width when the second row is vertical. */
  #createLookPage .create-photo-stack__col--retailers > .retailer-picker,
  .create-photo-stack__col--retailers > .retailer-picker {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  /* Photo: use viewport-height so it always has a sensible size,
     even when no container-query context is established. */
  #createLookPage .create-look-photo,
  .create-look-photo {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 55vh;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  /* Override the desktop cqh cap on mobile (higher-specificity rows selector). */
  #createLookPage .create-photo-stack--rows .create-look-photo {
    max-height: 55vh;
  }
  #createLookPage .create-photo-stack .create-look-photo-btn,
  .create-photo-stack .create-look-photo-btn {
    width: 100%;
    max-width: 100%;
  }
  /* Touch devices have no hover — keep the upload hint visible. */
  .create-look-photo-btn .create-look-photo-hint {
    opacity: 1;
    font-size: 0.7rem;
    bottom: 8px;
    padding: 0.18rem 0.5rem;
  }
  /* Color palette row: allow wrap and shrink swatches */
  #createLookPage .create-photo-stack .palette-row {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  #createLookPage .create-photo-stack #colorFrame,
  #createLookPage .create-photo-stack .palette-row #colorFrame {
    max-height: none;
    grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
    grid-auto-rows: 22px;
  }
  #createLookPage .create-photo-stack .palette-title {
    flex-direction: row;
    align-items: baseline;
    text-align: left;
    gap: 4px;
  }
  /* AI Analysis side panel stacks below the photo on mobile */
  .ai-analysis-section.ai-analysis-side {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
}

@media (max-width: 480px) {
  #createLookPage .create-photo-frame,
  .create-photo-frame {
    padding: 8px;
    border-radius: 12px;
  }
  #createLookPage .create-look-photo,
  .create-look-photo {
    max-height: 50vh;
  }
  .create-look-photo-btn .create-look-photo-hint {
    font-size: 0.65rem;
    bottom: 6px;
    padding: 0.15rem 0.45rem;
  }
  #createLookPage .create-photo-stack #colorFrame,
  #createLookPage .create-photo-stack .palette-row #colorFrame {
    grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
    grid-auto-rows: 20px;
  }
  #createLookPage .create-photo-stack .palette-actions .btn {
    font-size: 0.78rem;
    padding: 4px 8px;
  }
}

/* Preferred class name */
.look-page {
  background-size: cover;
}

/* Dynamic look image panel */
#lookImageContainer {
  transform: translateZ(0);
  will-change: background-image;
}

/* =========================================================
   Book / page turn container
   ========================================================= */
.book-container,
#book-container {
  position: relative;
  /* Aspect-lock the book to the background image ratio so children using
     cqw/cqh stay in sync regardless of viewport shape. */
  aspect-ratio: 1536 / 2752;
  width: min(100vw, calc(100vh * 1536 / 2752));
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
  margin: auto;

  /* Establish a size container so direct-child overlays (e.g. the
     .logout-container header) can use cqh/cqw/cqmin to scale
     proportionally with the book on every window resize. */
  container-type: size;
  container-name: book;

  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;

  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;

  perspective: 1400px;
  overflow: hidden;
  touch-action: pan-y;

  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
}

.book-container.dragging,
#book-container.dragging {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

/* =========================================================
   Pages
   ========================================================= */
.book-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;

  background: transparent;
  /* Note: aspect-ratio/max-width/max-height intentionally omitted here —
     `inset: 0` + 100% sizing already fills the aspect-locked .book-container,
     so aspect-ratio would be ignored anyway. */

  /* Establish a size container so children can use cqh/cqw/cqmin to scale
     proportionally with the page itself (matching the background image). */
  container-type: size;
  container-name: bookpage;

  transform-origin: left center;
  transform-style: preserve-3d;

  -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  will-change: opacity;

  /* Page-flip/fade navigation removed — pages switch instantly via the
     .is-active / .is-under / .is-hidden state classes (button navigation). */
  transition: none;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* New state classes for improved JS */
.book-page.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.book-page.is-under {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

.book-page.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* =========================================================
   Input preview (photo preview box)
   ========================================================= */
.input-preview {
  display: inline-block;
  width: 100px !important;
  height: 100px !important;
  max-width: 100px !important;
  max-height: 100px !important;
  margin-left: 8px;
  vertical-align: middle;
  overflow: hidden;
  box-sizing: border-box;
}

.input-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100px !important;
  max-height: 100px !important;
  display: block;
  object-fit: cover;
  border-radius: 4px;
}

.input-preview-fallback {
  max-width: 100px;
  max-height: 100px;
  margin-left: 8px;
  vertical-align: middle;
}

/* =========================================================
   Look page preview wrapper (generated look thumbnails)
   ========================================================= */
.preview-wrapper {
  display: inline-block;
  margin: 6px;
}

.preview-wrapper img {
  max-width: 220px;
  max-height: 220px;
  display: block;
}

.preview-caption {
  text-align: center;
  font-size: 0.9em;
  margin-top: 4px;
}

/* =========================================================
   Article photos fieldset
   ========================================================= */
/* Make all fieldsets inside the book pages span the full page width */
#profilePage fieldset,
#createLookPage fieldset,
.profile-form-column > fieldset,
.profile-form-column fieldset,
.create-look-form > fieldset,
.create-look-form fieldset {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.article-photos {
  border: 1px solid var(--cw-d4c0b4);
  border-radius: 10px;
  padding: 16px 14px 12px;
  margin: 14px 0;
  background: var(--color-cream);
  width: 100%;
  box-sizing: border-box;
}

.article-photos > legend {
  padding: 0 6px;
  font-weight: 600;
}

/* =========================================================
   Article item rows – checkbox + stacked inputs + button + preview
   ========================================================= */
.article-item-row {
  border: 1px solid var(--cw-d4c0b4);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--c-cream);
  transition: opacity 0.2s;
}

.article-item-row.disabled {
  opacity: 0.4;
}

.article-item-row.disabled .article-item-body {
  pointer-events: none;
}

.article-item-header {
  margin-bottom: 8px;
}

.article-item-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  cursor: pointer;
}

.article-item-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.article-item-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.article-item-sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.article-item-preview {
  width: 100px !important;
  height: 100px !important;
  max-width: 100px !important;
  max-height: 100px !important;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.article-item-preview:hover {
  border-color: #999;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}

.article-item-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100px !important;
  max-height: 100px !important;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.auto-populate-status {
  font-size: 0.65rem;
  text-align: center;
  padding: 4px;
  color: #666;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  background: #fafafa;
  position: relative;
  z-index: 2;
}
.auto-populate-status.searching {
  color: #2563eb;
  animation: pulse-text 1.5s ease-in-out infinite;
}
.auto-populate-status.no-results {
  color: var(--cw-b91c1c);
}
.auto-populate-status.search-error {
  color: var(--cw-b91c1c);
}
.auto-populate-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(37, 99, 235, 0.25);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: auto-populate-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes auto-populate-spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* When a loading/status indicator is present, hide the "Click to find on SHEIN" placeholder */
.create-item-tile__preview:has(.auto-populate-status)::before { content: none; }

.article-item-sidebar .shein-btn {
  font-size: 0.75rem;
  padding: 4px 8px;
  white-space: nowrap;
}

.article-item-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.article-item-fields input {
  width: 100%;
}

/* =========================================================
   Page-nav buttons (live inside .navigation-bar, one Prev at
   the start and one Next at the end of the bar's flex row).
   Renamed from .book-nav / .book-prev / .book-next.
   ========================================================= */
.navigation-bar__nav {
  z-index: 4;

  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid #ccc;

  background: #fff;
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

/* Push prev to the leftmost edge and next to the rightmost edge of
   the navigation-bar row while the action buttons stay clustered
   in between. */
.navigation-bar__nav--prev {
  margin-right: auto;
}

.navigation-bar__nav--next {
  margin-left: auto;
}

/* Domain boundary state — disabled when there is no prev/next page within
   the current page's navigation domain (set via data-nav-domain). */
.navigation-bar__nav:disabled,
.navigation-bar__nav.is-disabled,
.navigation-bar__nav[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Note: .book-page visibility is controlled via .is-active / .is-under /
   .is-hidden state classes defined above (opacity + visibility + pointer-events),
   which preserves the fade transition. Do NOT re-toggle `display` here — that
   would clobber the flex column layout and kill the page-turn animation. */

/* Top centered nav container (was top-right). Sits OUTSIDE the
   book-container in the DOM, so it cannot use cq* units — we use
   vmin/vh instead so it still scales smoothly on window resize. */
.logout-container {
  position: absolute;
  top: 1.5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 0.8vmin;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: calc(100vw - 4vmin);
}

/* In-row variant: when the logout/header buttons live inside a page's
   top row (.create-items-row--top) instead of floating above the book,
   drop the absolute positioning and flow inline with the rest of the
   row content. Mobile-responsive scaling is defined further down. */
.logout-container.logout-container--inrow {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  z-index: auto;
  max-width: 100%;
  width: 100%;
  padding: 6px 8px;
  gap: 8px;
  box-sizing: border-box;
}
.logout-container--inrow > .btn,
.logout-container--inrow > .credits-row,
.logout-container--inrow > .credits-row > .btn,
.logout-container--inrow > form > .btn {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}
@media (max-width: 480px) {
  .logout-container--inrow {
    gap: 6px;
    padding: 4px 6px;
  }
  .logout-container--inrow > .btn,
  .logout-container--inrow > .credits-row,
  .logout-container--inrow > .credits-row > .btn,
  .logout-container--inrow > form > .btn {
    flex: 1 1 calc(50% - 6px);
    font-size: 0.78rem;
    padding: 6px 8px;
    line-height: 1.15;
  }
  .logout-container--inrow .credits-balance-pill {
    font-size: 0.72em;
  }
}

/* Bottom nav container removed — Prev/Next now live inside each
   page's .navigation-bar as .navigation-bar__nav--prev /
   .navigation-bar__nav--next so every page owns its own bottom row. */

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 768px) {
  .modal-title {
    font-size: 1.5rem;
  }

  .btn--bubble {
    font-size: 1.05rem;
    padding: 0.85rem 1.8rem;
    bottom: 24px;
  }

  .profile-form-column,
  .create-look-form,
  .look-page,
  #lookImageContainer {
    min-height: 280px;
    padding: 18px 12px;
  }
}

/* =========================================================
   Small button variant
   ========================================================= */
.btn--sm {
  font-size: 0.85rem;
}

/* =========================================================
   Credits summary row (profile page) — anchored top-right of fieldset
   ========================================================= */
.profile-form-column fieldset {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Profile page: no scrollbar; content stays inside the page artwork */
#profilePage {
  overflow: hidden;
}
#profilePage .profile-form-column {
  height: 100%;
  overflow: hidden;
  padding-left: var(--content-pad-x) !important;
  padding-right: var(--content-pad-x) !important;
  box-sizing: border-box;
}

/* Saved look pages (Page 3+): same behavior as profile — no vertical scroll,
   inner .look-page fills the page and the background image is contained.
   Parchment gradient matches index/landing body so saved-look pages share
   the visual theme. */
.book-page[id^="lookPage-"] {
  overflow: hidden;
  background: linear-gradient(135deg, var(--cw-e8cfc4) 0%, var(--cw-dfc4be) 25%, var(--cw-d4b0a8) 50%, var(--cw-e5cfc5) 75%, var(--cw-f2e6dc) 100%);
  /* Align the gradient to the full viewport so saved-look pages blend seamlessly
     with the fixed <body> gradient instead of showing a seam at the page edges. */
  background-size: 100vw 100vh;
  background-position: center center;
  background-repeat: no-repeat;
}
.book-page[id^="lookPage-"] .look-page {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------------------------------------------------------
   Reworked saved-look page: parchment background (matches
   index.html body gradient) with a strip of 4 item tiles
   above and below the centered look photo.
   --------------------------------------------------------- */

.book-page[id^="lookPage-"] .look-page.look-page--rework,
.look-page.look-page--rework {
  /* Reset container styling: this is now a 5-row grid:
     row 1 = reserved space for the global .logout-container header bar
     row 2 = top strip of 4 item tiles
     row 3 = central photo / main content
     row 4 = bottom strip of 4 item tiles
     row 5 = unified bottom row holding .navigation-bar, which
             spans the full width and contains the page-nav buttons
             (.navigation-bar__nav--prev at the left edge,
             .navigation-bar__nav--next at the right edge) plus the
             page's action buttons clustered in the center. */
  background: transparent !important;
  background-image: none !important;
  padding: 1cqh 2cqmin 1cqh;
  display: grid;
  grid-template-rows: 6cqh 14cqh 1fr 14cqh 6cqh;
  gap: 1.5cqh;
  position: relative;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

/* Custom tooltip for look-item-tile. Default renders ABOVE the tile
   (suits bottom row so it doesn't fall off the page). Top row flips
   below the tile via .look-items-row--top override. Uses data-tip
   attribute instead of native title to allow CSS positioning. */
.look-item-tile[data-tip] { position: relative; overflow: visible !important; }
.look-item-tile[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  top: auto;
  transform: translateX(-50%);
  background: rgba(20, 10, 10, 0.92);
  color: #fff;
  padding: 0.45rem 0.65rem;
  border-radius: 0.4rem;
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: 0.78rem;
  line-height: 1.3;
  white-space: pre-line;
  width: max-content;
  max-width: 260px;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.look-item-tile[data-tip]:hover::after,
.look-item-tile[data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Top row: tooltip flips BELOW the tile so it doesn't render off the
   top of the page artwork. Bottom row keeps the default (ABOVE).
   Raise z-index on hover so the tooltip clears the sibling photo. */
.look-items-row--top .look-item-tile[data-tip]:hover,
.look-items-row--top .look-item-tile[data-tip]:focus-visible {
  z-index: 10;
}
.look-items-row--top .look-item-tile[data-tip]::after {
  top: calc(100% + 0.5rem);
  bottom: auto;
}

.look-page--rework .look-items-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2cqw;
  align-items: stretch;
  min-height: 0;
  position: relative;
  z-index: 2;
}

/* Explicit grid placement so the existing markup (top items, photo,
   bottom items, badge) lands in the correct rows of the 5-row grid
   (row 1 + row 5 are reserved spacers for the global header/nav).
   Covers all three child-naming conventions used across pages:
   .look-items-row-- (saved-look + placeholder pages),
   .create-items-row-- / .create-photo-wrap (create-look form),
   .control-panel__tiles-- / .control-panel__central (control panel). */
.look-page--rework > .look-items-row--top,
.look-page--rework > .create-items-row--top,
.look-page--rework > .control-panel__tiles--top { grid-row: 2; }
.look-page--rework > .look-photo-wrap,
.look-page--rework > .create-photo-wrap,
.look-page--rework > .control-panel__central { grid-row: 3; }
.look-page--rework > .look-items-row--bottom,
.look-page--rework > .create-items-row--bottom,
.look-page--rework > .control-panel__tiles--bottom { grid-row: 4; }

/* Page header row: flat flex row of action buttons that sits in grid-row
   1 of .look-page--rework, spanning the same full width as the sibling
   .create-items-row--top / --bottom rows. Wraps onto multiple lines on
   small screens. */
.look-page--rework > .create-items-row--header { grid-row: 1; align-self: start; }
.create-items-row--header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  margin: 0;
  position: relative;
  z-index: 2;
}
.create-items-row--header > .btn {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}
/* Tablet / small laptop */
@media (max-width: 768px) {
  .create-items-row--header {
    gap: 6px;
    padding: 5px 6px;
  }
  .create-items-row--header > .btn {
    font-size: 0.82rem;
    padding: 6px 10px;
    line-height: 1.2;
  }
  .create-items-row--header .credits-balance-pill { font-size: 0.78em; }
}
/* Phones */
@media (max-width: 480px) {
  .create-items-row--header {
    gap: 5px;
    padding: 4px 5px;
  }
  .create-items-row--header > .btn {
    flex: 1 1 calc(50% - 5px);
    font-size: 0.74rem;
    padding: 5px 7px;
    line-height: 1.15;
    border-radius: 6px;
  }
  .create-items-row--header > .btn.btn--sm {
    font-size: 0.7rem;
    padding: 4px 6px;
  }
  .create-items-row--header .credits-balance-pill { font-size: 0.7em; }
}
/* Very small phones */
@media (max-width: 360px) {
  .create-items-row--header {
    gap: 4px;
    padding: 3px 4px;
  }
  .create-items-row--header > .btn {
    flex: 1 1 100%;
    font-size: 0.72rem;
    padding: 5px 6px;
  }
  .create-items-row--header > .btn.btn--sm {
    flex: 1 1 calc(50% - 4px);
    font-size: 0.68rem;
  }
}

/* .control-panel uses its own grid declaration so re-pin its children
   to the same rows (selector specificity matches). */
.control-panel > .control-panel__tiles--top { grid-row: 2; }
.control-panel > .control-panel__central { grid-row: 3; }
.control-panel > .control-panel__tiles--bottom { grid-row: 4; }

.look-page--rework .look-item-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4cqh;
  padding: 0.6cqmin;
  background: rgba(var(--c-cream-rgb), 0.65);
  border: 1px solid rgba(var(--c-accent-rgb), 0.22);
  border-radius: var(--radius-md, 10px);
  text-decoration: none;
  color: var(--c-text);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}

.look-page--rework .look-item-tile--nolink {
  cursor: default;
  background: rgba(var(--c-cream-rgb), 0.65);
  border: 1px dashed rgba(var(--c-accent-rgb), 0.25);
}

.look-page--rework .look-item-tile:hover,
.look-page--rework .look-item-tile:focus-visible {
  background: rgba(var(--c-cream-rgb), 0.92);
  box-shadow: 0 0.4cqmin 1.2cqmin rgba(var(--c-shadow-rgb), 0.18);
  transform: translateY(-0.3cqmin);
  outline: none;
}

.look-page--rework .look-item-tile--nolink:hover,
.look-page--rework .look-item-tile--nolink:focus-visible {
  background: rgba(var(--c-cream-rgb), 0.92);
  border-style: solid;
  transform: none;
  box-shadow: none;
}

.look-page--rework .look-item-tile.is-active,
.wardrobe-cat.is-active {
  border: 3px solid #5a2020 !important;
  box-shadow: 0 0 12px rgba(90, 32, 32, 0.45), inset 0 0 4px rgba(90, 32, 32, 0.2) !important;
  background: rgba(var(--c-cream-rgb), 0.98) !important;
  transform: scale(1.03) !important;
}

.look-page--rework .look-item-tile img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.look-page--rework .look-item-tile__img--missing {
  visibility: hidden;
}

.look-page--rework .look-item-tile__caption {
  position: absolute;
  top: 0.4cqmin;
  left: 0.6cqmin;
  z-index: 3;
  padding: 0.2cqmin 0.6cqmin;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 0.6cqmin;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.4cqmin;
  font-weight: 600;
  line-height: 1.1;
  text-align: left;
  color: var(--cw-5a2020);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 1.2cqmin);
  pointer-events: none;
  user-select: none;
}

.look-page--rework .look-photo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-md, 10px);
  background: rgba(var(--c-cream-rgb), 0.55);
  border: 1px solid rgba(var(--c-accent-rgb), 0.18);
}

.book-page[id^="lookPage-"] .look-photo-wrap .look-favorite-btn {
  position: absolute;
  top: 0.8cqmin;
  right: calc(0.8cqmin + 4cqmin + 0.6cqmin);
  width: 4cqmin;
  height: 4cqmin;
  min-width: 28px;
  min-height: 28px;
  padding: 0.4cqmin;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #888;
  box-shadow: 0 0.4cqmin 1.2cqmin rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.book-page[id^="lookPage-"] .look-photo-wrap .look-favorite-btn:hover:not(:disabled) {
  background: #fff;
  transform: scale(1.08);
}

.book-page[id^="lookPage-"] .look-photo-wrap .look-favorite-btn:disabled {
  opacity: 0.7;
  cursor: progress;
}

.book-page[id^="lookPage-"] .look-photo-wrap .look-favorite-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

.book-page[id^="lookPage-"] .look-photo-wrap .look-favorite-btn.is-favorite {
  color: var(--cw-d4af37);
}

.book-page[id^="lookPage-"] .look-photo-wrap .look-favorite-btn .star-filled { display: none; }
.book-page[id^="lookPage-"] .look-photo-wrap .look-favorite-btn .star-outline { display: block; }
.book-page[id^="lookPage-"] .look-photo-wrap .look-favorite-btn.is-favorite .star-filled { display: block; }
.book-page[id^="lookPage-"] .look-photo-wrap .look-favorite-btn.is-favorite .star-outline { display: none; }

.book-page[id^="lookPage-"] .look-photo-wrap .look-retry-btn {
  position: absolute;
  top: 0.8cqmin;
  right: 0.8cqmin;
  width: 4cqmin;
  height: 4cqmin;
  min-width: 28px;
  min-height: 28px;
  padding: 0.4cqmin;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cw-5a2020);
  box-shadow: 0 0.4cqmin 1.2cqmin rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  transition: transform 0.15s ease, background 0.15s ease;
}

.book-page[id^="lookPage-"] .look-photo-wrap .look-retry-btn:hover:not(:disabled) {
  background: #fff;
  transform: rotate(45deg);
}

.book-page[id^="lookPage-"] .look-photo-wrap .look-retry-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.book-page[id^="lookPage-"] .look-photo-wrap .look-retry-btn.is-loading svg {
  animation: lookRetrySpin 0.9s linear infinite;
}

.book-page[id^="lookPage-"] .look-photo-wrap .look-retry-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Style Check — big round button anchored in the bottom-right corner of the look photo */
.look-photo-wrap .look-style-check-btn {
  position: absolute;
  bottom: 1.4cqmin;
  right: 1.4cqmin;
  width: 15cqmin;
  height: 15cqmin;
  min-width: 76px;
  min-height: 76px;
  padding: 0;
  border: 2px solid rgba(var(--cwt-255-247-236), 0.85);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cw-7a2e2e), var(--cw-5a2020));
  color: var(--cw-fff7ec);
  font-weight: 700;
  font-size: clamp(0.6rem, 2.5cqmin, 0.95rem);
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0.01em;
  box-shadow: 0 0.6cqmin 1.8cqmin rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.look-photo-wrap .look-style-check-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0.9cqmin 2.4cqmin rgba(0, 0, 0, 0.42);
}

.look-photo-wrap .look-style-check-btn:active {
  transform: scale(0.98);
}

@keyframes lookRetrySpin {
  to { transform: rotate(360deg); }
}

.look-page--rework .look-photo-wrap .look-photo {
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md, 10px);
  background: transparent;
}

.book-page[id^="lookPage-"] .navigation-bar,
.look-page--rework .navigation-bar {
  /* Bottom row (row 5) of the .look-page--rework grid. Spans the
     full width so the embedded .navigation-bar__nav--prev/--next can
     sit at the left/right edges (via auto margins) while the
     action buttons stay clustered in the center — the three
     groups unify into one bottom strip per page. No background —
     the bar is transparent so the page background shows through. */
  grid-row: 5;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  padding: 0 1.5cqw;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6cqmin;
  justify-content: center;
  align-items: center;
  background: transparent;
  z-index: 5;
}

/* Stack the three "Suggest" buttons vertically as a single unit
   within the navigation bar. */
.suggest-look-group {
  display: flex;
  flex-direction: column;
  gap: 0.6cqmin;
  align-items: stretch;
}
.suggest-look-group .btn {
  width: 100%;
}
   Buttons shrink (smaller font + padding); if the row would still
   overflow on very small phones, allow horizontal scroll. */
@media (max-width: 900px) {
  .navigation-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 4px;
    padding: 0 6px;
  }
  .navigation-bar > .btn,
  .navigation-bar > .navigation-bar__nav {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.8rem;
    padding: 6px 10px;
    line-height: 1.15;
  }
  .navigation-bar > #generateCreditsStatusText,
  .navigation-bar > .text-muted {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.75rem;
  }
}
@media (max-width: 600px) {
  .navigation-bar > .btn,
  .navigation-bar > .navigation-bar__nav {
    font-size: 0.72rem;
    padding: 5px 8px;
    border-radius: 6px;
  }
  .navigation-bar > #generateCreditsStatusText,
  .navigation-bar > .text-muted {
    font-size: 0.7rem;
  }
}
@media (max-width: 420px) {
  .navigation-bar {
    gap: 3px;
    padding: 0 4px;
  }
  .navigation-bar > .btn,
  .navigation-bar > .navigation-bar__nav {
    font-size: 0.66rem;
    padding: 4px 6px;
  }
}

/* Profile page only: 2x larger parameter bubbles/swatches and look image cards.
   Sizes use cqmin (container query min) of the .book-page so every element
   scales proportionally with the page (just like the background image). */
#profilePage .swatch-picker,
#profilePage .bubble-picker,
#profilePage .body-shape-picker { min-height: 8.3cqmin !important; gap: 1.6cqmin !important; flex-wrap: wrap !important; max-width: 100% !important; }
#profilePage .swatch-picker__preview,
#profilePage .bubble-picker__preview,
#profilePage .body-shape-picker__preview { width: 8.3cqmin !important; height: 8.3cqmin !important; }
#profilePage .swatch-picker__chip { width: 6.25cqmin !important; height: 6.25cqmin !important; }
#profilePage .bubble-picker__glyph { font-size: 3.65cqmin !important; }
#profilePage .body-shape-picker__icon { width: 3.65cqmin !important; height: 5.5cqmin !important; }
#profilePage .swatch-picker__hint,
#profilePage .bubble-picker__hint,
#profilePage .body-shape-picker__label { font-size: 1.4cqmin !important; max-width: 7.3cqmin !important; margin-top: 0.4cqmin !important; }
/* Expanded panels: scale up swatches/options to roughly match the preview button */
#profilePage .skin-tone-chart { gap: 0.8cqmin !important; max-width: 100% !important; flex-wrap: wrap !important; }
#profilePage .skin-tone-swatch { width: 5.5cqmin !important; height: 5.5cqmin !important; border-width: 0.25cqmin !important; }
#profilePage .skin-tone-swatch.selected::after { font-size: 2.4cqmin !important; }
#profilePage .sex-options { gap: 0.8cqmin !important; padding: 0.8cqmin !important; border-radius: 1cqmin !important; flex-wrap: wrap !important; max-width: 100% !important; }
#profilePage .sex-option { width: 7.3cqmin !important; height: 8.3cqmin !important; padding: 0.6cqmin 0.5cqmin !important; border-radius: 0.9cqmin !important; border-width: 0.13cqmin !important; }
#profilePage .sex-option__glyph { font-size: 3.65cqmin !important; }
#profilePage .sex-option__label { font-size: 1cqmin !important; margin-top: 0.5cqmin !important; }
#profilePage .sex-picker__glyph { font-size: 2.85cqmin !important; }
#profilePage .bubble-picker__panel { gap: 0.8cqmin !important; padding: 0.8cqmin 1cqmin !important; border-radius: 1cqmin !important; max-width: 100% !important; flex-wrap: wrap !important; }
#profilePage .dob-picker .bubble-picker__panel input[type="date"] { padding: 0.9cqmin 1cqmin !important; font-size: 1.6cqmin !important; border-radius: 0.65cqmin !important; max-width: 100% !important; }
#profilePage .bubble-picker__panel input[type="text"],
#profilePage .bubble-picker__panel input[type="number"],
#profilePage .bubble-picker__panel select,
#profilePage .bubble-picker__panel button { padding: 0.8cqmin 1cqmin !important; font-size: 1.5cqmin !important; border-radius: 0.65cqmin !important; min-height: 3.65cqmin !important; max-width: 100% !important; }
#profilePage .body-shape-picker__options { gap: 1cqmin !important; flex-wrap: wrap !important; max-width: 100% !important; }
/* Right-side image gallery scales with the page, no overflow */
#profilePage .profile-image-column { right: 5cqmin !important; max-width: 30% !important; gap: 0.9cqmin !important; }
#profilePage .profile-image-card { width: 10.4cqmin !important; }
#profilePage .hour-rose { width: 14cqw !important; max-width: none !important; }
.credits-row {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.credits-balance-pill {
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.9;
}
/* Spacer added under the absolute-positioned Buy Credits button so the
   first real form-row is pushed down and doesn't overlap. */
.credits-row + .form-row {
  margin-top: 10%;
}
/* When the Buy Credits row lives inside the top nav (.logout-container),
   override the absolute-positioning used in the profile fieldset so the
   button sits in-line with the other nav buttons. */
.logout-container > .credits-row {
  position: static;
  top: auto;
  right: auto;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.logout-container > .credits-row #openAddCreditsBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* Don't push the next nav item down when credits-row is in the header. */
.logout-container > .credits-row + .form-row,
.logout-container > .credits-row + a,
.logout-container > .credits-row + form {
  margin-top: 0;
}
/* Sex row sits 15% from the top of the fieldset (matches the image column on the right). */
.profile-form-column .form-row:has(#Sex) {
  margin-top: 15%;
}
/* Indent every form-row in the profile column 5% from the left. */
.profile-form-column .form-row {
  margin-left: 5%;
}

/* =========================================================
   Profile page — two-column layout (form + image gallery)
   ========================================================= */
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: stretch;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.profile-layout > .profile-form-column {
  margin-bottom: 0;
}

.profile-image-column {
  position: absolute;
  top: 15%;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: flex-start;
  z-index: 3;
}

.profile-image-card {
  position: relative;
  margin: 0;
  width: 160px;
  flex: 0 0 auto;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background: rgba(var(--c-cream-rgb), 0.55);
  box-shadow:
    0 1px 2px rgba(var(--c-accent-rgb), 0.08),
    0 6px 18px rgba(var(--c-accent-rgb), 0.10);
  border: 1px solid rgba(var(--c-accent-rgb), 0.10);
  transition:
    transform 280ms cubic-bezier(.22,.61,.36,1),
    box-shadow 280ms ease,
    border-color 280ms ease,
    z-index 0s linear 280ms;
  display: flex;
  flex-direction: column;
  transform-origin: center center;
  will-change: transform;
}

/* Button-variant card (clickable) — strip default button chrome */
.profile-image-card--link {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.profile-image-card--link:focus-visible {
  outline: 2px solid var(--color-ink, var(--c-accent));
  outline-offset: 3px;
}

.profile-image-card:hover,
.profile-image-card:focus-visible {
  transform: translateY(-6px) scale(1.08) rotate(-1deg);
  border-color: rgba(var(--c-accent-rgb), 0.25);
  box-shadow:
    0 4px 8px rgba(var(--c-accent-rgb), 0.12),
    0 18px 38px rgba(var(--c-accent-rgb), 0.22);
  z-index: 3;
  transition:
    transform 280ms cubic-bezier(.22,.61,.36,1),
    box-shadow 280ms ease,
    border-color 280ms ease,
    z-index 0s linear 0s;
}

.profile-image-card--link:hover,
.profile-image-card--link:focus-visible {
  transform: translateY(-6px) scale(1.10) rotate(-1.5deg);
}

.profile-image-card--link:active {
  transform: translateY(-2px) scale(1.04) rotate(-0.5deg);
  transition-duration: 120ms;
}

.profile-image-card img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex: 1 1 auto;
  transition: transform 420ms cubic-bezier(.22,.61,.36,1), filter 280ms ease;
}

.profile-image-card:hover img,
.profile-image-card:focus-visible img {
  transform: scale(1.08);
  filter: saturate(1.1) brightness(1.03);
}

.profile-image-card--link::after {
  content: '↗';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(var(--c-cream-rgb), 0.92);
  color: var(--color-ink, var(--c-accent));
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(var(--c-accent-rgb), 0.18);
  opacity: 0;
  transform: translateY(-4px) scale(0.8);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}

.profile-image-card--link:hover::after,
.profile-image-card--link:focus-visible::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stack vertically on tablets & phones so the form stays usable. */
@media (max-width: 900px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .profile-image-column {
    top: 12px;
    right: 8px;
    gap: 8px;
  }
  .profile-image-card {
    width: 96px;
  }
}

/* Photo + color wheel side-by-side on the Create Look page. */
.photo-and-wheel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.photo-and-wheel__photo,
.photo-and-wheel__wheel {
  flex: 1 1 280px;
  min-width: 0;
}
.photo-and-wheel__wheel .color-wheel-container {
  margin-top: 8px;
}

#deleteProfileBtn {
  margin-left: 8px;
}

#generateCreditsStatusText {
  align-self: center;
  margin-left: 10px;
}

/* =========================================================
   Form hints & action rows
   ========================================================= */
.form-hint {
  margin-top: 6px;
}

.form-row--actions {
  margin-top: 12px;
}

/* =========================================================
   Legacy .look-badge rules removed — the rework markup is now
   .navigation-bar (see above) and has no background.
   ========================================================= */

.vox-send-unavailable {
  display: inline-block;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
}

/* =========================================================
   Modal overlay & panel (shared)
   ========================================================= */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
}

#addCreditsModal        { z-index: 10003; }
#styleSuggestionModal   { z-index: 10003; }
#retryFeedbackModal     { z-index: 10003; }
#reviewLookModal        { z-index: 10002; }
#promptPreviewModal     { z-index: 10001; }
#lookInfoModal          { z-index: 10000; }
#generateLookErrorModal { z-index: 9999; }
#sendToNDSConfirmModal  { z-index: 9998; }
/* Consent gate must sit above everything else so it is never hidden behind the
   book-page layout's stacking contexts. */
#biometricConsentModal  { z-index: 10010; }

.modal-panel {
  background: var(--color-cream);
  padding: 18px;
  max-width: 480px;
  width: calc(100% - 24px);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(var(--c-accent-rgb), 0.2);
}

.modal-panel h3 {
  margin-top: 0;
}

.modal-panel p {
  margin-bottom: 10px;
}

.modal-panel--sm  { max-width: 420px; }
.modal-panel--md  { max-width: 460px; }
.modal-panel--lg  { max-width: 760px; }
.modal-panel--xl  { max-width: 820px; }

.modal-panel--scroll {
  max-height: min(80vh, 90dvh);
  overflow: auto;
}

@media (max-width: 480px) {
  .modal-panel { padding: 14px; width: calc(100% - 16px); }
  .modal-panel--scroll { max-height: 75dvh; }
  .btn--bubble { font-size: 1.05rem; padding: 0.8rem 1.6rem; }
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Purchase modal tabs (Buy Credits / Premium Subscription). */
.purchase-tabs {
  display: flex;
  gap: 4px;
  margin: 6px 0 12px;
  border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.18);
}
.purchase-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  color: rgba(var(--c-accent-rgb), 0.7);
  border-radius: 6px 6px 0 0;
}
.purchase-tab:hover { color: rgba(var(--c-accent-rgb), 0.95); }
.purchase-tab--active {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
  font-weight: 600;
}
.purchase-panel[hidden] { display: none; }
#subscriptionAmountPreview {
  font-weight: 600;
  margin: 6px 0;
}

.modal-actions--spaced {
  margin-top: 14px;
}

.modal-checkbox-label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

/* =========================================================
   Add credits modal
   ========================================================= */
#creditsAmountPreview {
  font-weight: 600;
  margin-bottom: 12px;
}

#addCreditsError {
  min-height: 20px;
  margin-bottom: 10px;
}

/* =========================================================
   Generate look error modal
   ========================================================= */
#generateLookErrorTitle {
  color: var(--cw-b42318);
}

#generateLookErrorText {
  margin-bottom: 14px;
  white-space: pre-wrap;
}

/* =========================================================
   Prompt preview modal
   ========================================================= */
.prompt-label {
  font-weight: 600;
  margin-bottom: 8px;
}

#promptPreviewUserLabel {
  margin: 10px 0 8px;
}

.prompt-code {
  white-space: pre-wrap;
  background: #f8fafc;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #e6eef6;
  max-height: 28vh;
  overflow: auto;
}

/* =========================================================
   Look info modal (JS-generated content)
   ========================================================= */
.look-info-field {
  margin-bottom: 10px;
}

.look-info-desc {
  margin-bottom: 14px;
  white-space: pre-wrap;
}

.look-info-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
}

.look-info-item-name {
  font-weight: 700;
  margin-bottom: 6px;
}

.look-info-preview-label {
  margin-top: 8px;
}

.look-info-thumb {
  margin-top: 6px;
  width: 120px;
  height: 120px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

.look-info-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .book-page,
  .page-turn-right,
  .page-turn-left,
  .btn--bubble {
    transition: none !important;
  }
}

/* =========================================================
   Manage Submissions page
   ========================================================= */
.submissions-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem;
}

.submissions-header {
  background: var(--color-cream);
  border: 1px solid var(--cw-d4c0b4);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 1.5rem;
}

.submissions-header h1 {
  margin-top: 0;
}

.submissions-header p {
  margin-bottom: 0;
}

.submissions-section {
  margin-top: 1.5rem;
}

.submissions-section h2 {
  margin: 0 0 0.75rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.stat-card {
  border: 1px solid var(--cw-d4c0b4);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.stat-card strong {
  display: block;
  font-size: 1.5rem;
}

.stat-card span {
  color: var(--cw-6f625c);
  font-size: 0.86rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--cw-d4c0b4);
  border-radius: 999px;
  background: #fff;
  padding: 6px 10px;
  font-size: 0.88rem;
}

.submissions-empty {
  border: 1px solid var(--cw-d4c0b4);
  border-radius: 10px;
  padding: 3rem 14px;
  margin: 14px 0;
  background: #fff;
  text-align: center;
  color: #888;
}

.submissions-table-wrap {
  border: 1px solid var(--cw-d4c0b4);
  border-radius: 10px;
  padding: 16px 14px 12px;
  margin: 14px 0;
  background: var(--color-cream);
  overflow-x: auto;
}

.submissions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.submissions-table th,
.submissions-table td {
  border: 1px solid var(--cw-d4c0b4);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: middle;
  color: var(--color-text);
}

.submissions-table th {
  background: var(--cw-ede4dc);
  color: var(--color-text);
  font-weight: 600;
  white-space: nowrap;
}

.submissions-table tbody tr:nth-child(even) {
  background: var(--c-cream);
}

.submissions-table tbody tr:hover {
  background: var(--cw-ede4dc);
}

.look-id-cell {
  font-family: monospace;
  font-size: 0.85rem;
  word-break: break-all;
  max-width: 180px;
}

.img-cell {
  text-align: center;
  min-width: 100px;
}

.thumb-container {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 6px;
  display: inline-block;
  background: #222;
}

.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.actions-cell {
  min-width: 140px;
}

.actions-cell .btn {
  margin: 2px;
  font-size: 0.78rem;
  display: inline-block;
}

.admin-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: admin-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

@keyframes admin-spin {
  to { transform: rotate(360deg); }
}

.look-info-item-thumb img {
  max-width: 120px;
  max-height: 120px;
  border-radius: 6px;
}

/* =========================================================
   Color picker dropdowns (Eyes / Hair / Skin)
   ========================================================= */
.color-picker-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  appearance: auto;
  cursor: pointer;
}

.color-swatch-preview {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ccc;
  vertical-align: middle;
  margin-left: 8px;
  flex-shrink: 0;
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-picker-wrapper .color-picker-select {
  flex: 1;
}

/* =========================================================
   Skin Tone chart (Monk Skin Tone Scale)
   ========================================================= */
.skin-tone-chart {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.skin-tone-swatch {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  outline: none;
  padding: 0;
  position: relative;
}

.skin-tone-swatch:hover {
  transform: scale(1.18);
  border-color: #666;
}

.skin-tone-swatch:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.skin-tone-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 3px #0d6efd, 0 0 8px rgba(13,110,253,0.45);
  transform: scale(1.2);
}

.skin-tone-swatch.selected::after {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.7);
  pointer-events: none;
}

.skin-tone-label {
  margin-top: 6px;
  font-size: 0.88rem;
  color: #555;
  min-height: 1.2em;
}

/* =========================================================
   Collapsible swatch picker (Eyes / Hair / Skin)
   ========================================================= */
.swatch-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  min-height: 64px;
}
.swatch-picker__preview {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.18);
  background: #fff;
  cursor: pointer;
  padding: 0;
  font: inherit;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.18s ease;
}
.swatch-picker__preview:hover,
.swatch-picker__preview:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  outline: none;
}
.swatch-picker__chip {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--cw-e74c3c), var(--cw-f39c12), var(--cw-f1c40f), #2ecc71, #3498db, #9b59b6, var(--cw-e91e63), var(--cw-e74c3c));
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
}
.swatch-picker__hint {
  font-size: 0.62rem;
  font-weight: 600;
  color: #2a2a2a;
  margin-top: 3px;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}
.swatch-picker[data-state="collapsed"] .skin-tone-chart {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transform: scale(0.6);
  transform-origin: left center;
  transition: opacity 0.15s ease, transform 0.18s ease;
}
.swatch-picker[data-state="expanded"] .swatch-picker__preview {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
}
.swatch-picker[data-state="expanded"] .skin-tone-chart {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* =========================================================
   Clothing Color Wheel (two-tier pie)
   ========================================================= */
.color-wheel-container {
  position: relative;
  width: 540px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 20px auto;
  padding: 0;
  overflow: visible;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,200,200,0.08) 0%, transparent 70%);
}

#colorWheelSvg {
  display: block;
  width: 100%;
  height: 100%;
}

.cw-family,
.cw-shade {
  cursor: pointer;
  transition: filter 0.18s, opacity 0.18s, stroke 0.18s, stroke-width 0.18s;
}

.cw-family:hover {
  filter: brightness(1.1) saturate(1.15);
}

/* Default shade = OFF visual: desaturated. */
.cw-shade {
  filter: grayscale(0.9) brightness(0.95);
  opacity: 0.55;
}
.cw-shade:hover {
  filter: grayscale(0.5) brightness(1.05);
  opacity: 0.85;
}

/* Selected (saved/override) = ON visual: full color. !important to beat :hover. */
.cw-shade.cw-shade--selected,
.cw-shade.cw-shade--selected:hover {
  filter: none !important;
  opacity: 1 !important;
  stroke: rgba(0,0,0,0.55) !important;
  stroke-width: 1.2 !important;
}

.cw-family--selected {
  stroke: #111;
  stroke-width: 2.2;
}

.cw-fam-text {
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-family: var(--font-sans, system-ui, sans-serif);
  text-transform: uppercase;
}

.color-wheel-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 90px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #2a2a2a;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .color-wheel-container {
    width: 340px;
  }
  .cw-fam-text {
    font-size: 5.8px;
  }
  .color-wheel-label {
    font-size: 0.68rem;
    padding: 4px 9px;
  }
}

/* =========================================================
   Generic "bubble picker" — round preview that expands to a panel on hover/focus.
   Used by Sex and Date-of-Birth selectors.
   ========================================================= */
.bubble-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  min-height: 64px;
}
.bubble-picker__preview {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.18);
  background: #fff;
  cursor: pointer;
  padding: 0;
  font: inherit;
  flex: 0 0 auto;
  color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.18s ease;
}
.bubble-picker__preview:hover,
.bubble-picker__preview:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  outline: none;
}
.bubble-picker__glyph {
  font-size: 28px;
  line-height: 1;
  display: block;
}
.bubble-picker__hint {
  font-size: 0.62rem;
  font-weight: 600;
  color: #2a2a2a;
  margin-top: 3px;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}
.bubble-picker__panel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transform: scale(0.6);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.2s ease;
}
.bubble-picker[data-state="expanded"] .bubble-picker__preview {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
}
.bubble-picker[data-state="expanded"] .bubble-picker__panel {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Sex picker (uses .swatch-picker container with .sex-options panel). */
.sex-options {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transform: scale(0.6);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.2s ease;
}
.swatch-picker.sex-picker[data-state="expanded"] .sex-options {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.swatch-picker.sex-picker[data-state="expanded"] .swatch-picker__preview {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
}
.sex-picker__glyph {
  background: #fff !important;
  color: #2a2a2a;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}
.sex-option {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 64px;
  padding: 4px 3px;
  border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.15);
  background: #fff;
  cursor: pointer;
  color: #1d4ed8;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.sex-option:hover,
.sex-option:focus-visible {
  transform: translateY(-2px);
  border-color: #1d4ed8;
  box-shadow: 0 4px 10px rgba(29,78,216,0.18);
  outline: none;
}
.sex-option__glyph {
  font-size: 26px;
  line-height: 1;
}
.sex-option__label {
  font-size: 0.58rem;
  font-weight: 600;
  margin-top: 3px;
  line-height: 1;
  color: #2a2a2a;
}

/* DOB picker keeps the date input compact inside the panel. */
.dob-picker .bubble-picker__panel input[type="date"] {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
}

/* =========================================================
   Body shape calculator
   ========================================================= */
.body-shape-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  min-height: 64px;
}
.body-shape-picker__preview {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.18);
  background: #fff;
  cursor: pointer;
  padding: 0;
  font: inherit;
  flex: 0 0 auto;
  color: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.18s ease;
}
.body-shape-picker__preview:hover,
.body-shape-picker__preview:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  outline: none;
}
.body-shape-picker__icon {
  width: 24px;
  height: 36px;
  display: block;
  color: #1d4ed8;
}
.body-shape-picker__label {
  font-size: 0.62rem;
  font-weight: 600;
  color: #2a2a2a;
  margin-top: 3px;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}
.body-shape-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
  margin-top: 4px;
}
.body-shape-picker[data-state="collapsed"] .body-shape-picker__options {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transform: scale(0.6);
  transform-origin: left center;
  transition: opacity 0.15s ease, transform 0.18s ease;
}
.body-shape-picker[data-state="expanded"] .body-shape-picker__preview {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
}
.body-shape-picker[data-state="expanded"] .body-shape-picker__options {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.body-shape-option {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 56px;
  height: 64px;
  padding: 4px 3px;
  border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.15);
  background: #fff;
  cursor: pointer;
  color: #1d4ed8;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.body-shape-option:hover,
.body-shape-option:focus-visible {
  transform: translateY(-2px);
  border-color: #1d4ed8;
  box-shadow: 0 4px 10px rgba(29,78,216,0.18);
  outline: none;
}
.body-shape-option--calc {
  color: #6b7280;
}
.body-shape-option--calc:hover,
.body-shape-option--calc:focus-visible {
  color: #111;
  border-color: #111;
  box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}
.body-shape-option__icon {
  width: 22px;
  height: 34px;
  display: block;
}
.body-shape-option__label {
  font-size: 0.58rem;
  font-weight: 600;
  margin-top: 3px;
  line-height: 1;
  color: #2a2a2a;
}
.body-shape-measurements {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
}
.body-shape-measurements .form-hint {
  margin: 0 0 10px;
  font-size: 0.85rem;
  opacity: 0.85;
}
.bsm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-bottom: 12px;
}
.bsm-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bsm-cell label {
  font-size: 0.85rem;
  font-weight: 500;
}
.bsm-cell input.int-field {
  width: 100%;
}
.body-shape-calc-run[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.body-shape-calc-msg {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--accent-color, #3b7);
}
@media (max-width: 480px) {
  .bsm-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Hero landing page
   ========================================================= */
.hero-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
  gap: 0;
  margin-top: 0;
}

.hero-welcome {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.8rem;
  color: var(--cw-5a2020);
  margin: 0 0 0.2em;
  font-weight: 400;
}

.hero-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--c-text);
  letter-spacing: 0.06em;
  margin: 0 0 0.15em;
  text-transform: uppercase;
}

.hero-title--image {
  letter-spacing: normal;
  text-transform: none;
  line-height: 0;
  margin: 0 0 0.6em;
}

.hero-title-img {
  display: block;
  margin: 0 auto;
  max-width: min(560px, 80vw);
  width: 100%;
  height: auto;
}

.hero-subtitle {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--cw-5a2020);
  margin: 0 0 1.5em;
  font-weight: 400;
}

.hero-tagline {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--cw-6b3030);
  margin: 0 0 2em;
  letter-spacing: 0.04em;
}

.btn--hero {
  display: inline-block;
  padding: 1rem 2.8rem;
  border: 1px solid var(--cw-c4a898);
  border-radius: var(--radius-bubble);
  background: rgba(var(--cwt-245-235-225), 0.85);
  color: var(--color-text);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(var(--c-accent-rgb), 0.1);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
}

.btn--hero:hover {
  background: rgba(var(--cwt-240-225-212), 0.95);
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(var(--c-accent-rgb), 0.18);
}

.hero-instagram {
  margin-top: 2.5em;
  font-size: 0.95rem;
  color: var(--cw-6b3030);
}

.hero-instagram a {
  color: var(--cw-5a2020);
  text-decoration: none;
  font-style: italic;
}

.hero-instagram a:hover {
  text-decoration: underline;
}

.vcep-pitch {
  max-width: 1120px;
  margin: 0 auto 56px;
  padding: 0 1rem;
}

.vcep-pitch--modal {
  max-width: none;
  margin: 0;
  padding: 0;
}

.vcep-pitch--modal .vcep-pitch__inner {
  border: 0;
  background: transparent;
  padding: 0;
}

.vcep-pitch__details {
  margin-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 12px;
}

.vcep-pitch__details > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--cw-7a6a5e);
  list-style: none;
  user-select: none;
}

.vcep-pitch__details > summary::-webkit-details-marker { display: none; }

.vcep-pitch__details > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}

.vcep-pitch__details[open] > summary::before {
  content: "▾ ";
}

.vcep-pitch__details-body {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--cw-4a3f36);
}

.vcep-pitch__details-body ul {
  padding-left: 18px;
  margin: 8px 0;
}

.vcep-pitch__inner {
  border: 1px solid var(--cw-d4c0b4);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 22px;
  color: var(--color-text);
}

.vcep-pitch__eyebrow {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--cw-6b3030);
  font-weight: 700;
}

.vcep-pitch h2 {
  margin: 0 0 10px;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--c-text);
}

.vcep-pitch__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.vcep-pitch__grid > div {
  border-left: 3px solid var(--cw-c4a898);
  padding-left: 12px;
}

.vcep-pitch__grid h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.vcep-pitch__grid p,
.vcep-pitch__footer {
  margin: 0;
}

.vcep-pitch__footer {
  color: var(--cw-5a2020);
  font-style: italic;
}

/* =========================================================
   VCEP business sales pitch (collapsible, inside About modal)
   ========================================================= */
.vcep-business {
  margin: 22px 0 6px;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  color: inherit;
}

.vcep-business__summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
}

.vcep-business__summary::-webkit-details-marker { display: none; }

.vcep-business__chevron {
  margin-left: auto;
  display: inline-block;
  transition: transform 0.15s ease;
  color: inherit;
  opacity: 0.6;
}

.vcep-business__chevron::before { content: "▸"; }

.vcep-business[open] .vcep-business__chevron::before { content: "▾"; }

.vcep-business__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
  color: inherit;
  opacity: 0.7;
}

.vcep-business__title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.05rem;
  color: inherit;
  font-weight: 600;
}

.vcep-business__lede {
  margin: 12px 0 14px;
  color: inherit;
  line-height: 1.5;
  font-size: 0.95rem;
}

.vcep-business__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 12px 0 16px;
}

.vcep-business__grid > div {
  border-left: 3px solid rgba(0, 0, 0, 0.15);
  padding: 2px 0 2px 12px;
}

.vcep-business__grid h4 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  color: inherit;
}

.vcep-business__grid p {
  margin: 0;
  font-size: 0.86rem;
  color: inherit;
  opacity: 0.85;
  line-height: 1.45;
}

.vcep-business__who {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: inherit;
  line-height: 1.55;
  opacity: 0.9;
}

.vcep-business__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.vcep-business__cta-btn {
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

.vcep-business__cta-note {
  font-size: 0.82rem;
  color: inherit;
  opacity: 0.75;
}

.vcep-business__cta-note a {
  color: inherit;
  text-decoration: underline;
}

/* =========================================================
   AI Style Analysis section
   ========================================================= */
.ai-analysis-section {
  border: 1px solid var(--cw-d4c0b4);
  border-radius: 10px;
  padding: 16px 14px 12px;
  margin: 18px 0 6px;
  background: var(--cw-f5ede5);
}

.ai-analysis-section > legend {
  padding: 0 6px;
  font-weight: 600;
}

.ai-analysis-section > legend h3 {
  margin: 0;
  font-size: 1rem;
}

.ai-analysis-section .form-row {
  margin-bottom: 10px;
}

.ai-analysis-section textarea,
.ai-analysis-section input[readonly] {
  background: var(--c-cream);
  border: 1px solid var(--cw-d4c0b4);
  color: var(--cw-3a2a1a);
  resize: none;
}


/* =========================================================
   Hour rose (white on even hours, yellow on odd hours)
   ========================================================= */
.hour-rose {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(80px, 10vw, 140px);
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 50;
  opacity: 0.95;
  filter: drop-shadow(0 6px 14px rgba(var(--c-accent-rgb), 0.18));
}

@media (max-width: 768px) {
  .hour-rose {
    width: 64px;
    right: 8px;
  }
}



/* Rose pinned to the same spot of the background image (the vase) regardless
   of screen size. Uses container-query units so its position and size scale
   in lock-step with the .book-page (which scales with the background image). */
#profilePage .hour-rose,
.profile-image-column .hour-rose {
  position: absolute !important;
  top: 54cqh !important;
  left: 75cqw !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  width: 14cqw !important;
  max-width: none !important;
  height: auto !important;
  transform: none;
  z-index: 5;
  display: block;
  pointer-events: none;
}



/* ===== Create Look rework — tiles around photo with hover-revealed details ===== */
.create-look-rework .photo-and-wheel-row,
.create-look-rework .shein-btn,
.create-look-rework .article-item-header,
.create-look-rework .article-item-sidebar > .shein-btn { display: none !important; }

.create-look-stage {
    border: 0;
    padding: 0;
    margin: 0 0 1.2rem 0;
    background: none !important;
}
.create-look-stage > legend { padding: 0; margin: 0; }

/* Mirror .look-page--rework .look-items-row exactly so create + look rows
   share identical sizing/spacing. No extra margins, no min-height, no
   aspect-ratio — the row stretches to fill its grid-row from look-page--rework
   and tiles stretch to fill the cell, matching look-item-tile. */
.create-items-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2cqw;
    align-items: stretch;
    justify-items: stretch;
    min-height: 0;
    position: relative;
    z-index: 2;
}

.create-item-tile {
    position: relative;
    /* Match .look-page--rework .look-item-tile visuals exactly. */
    background: rgba(var(--c-cream-rgb), 0.65);
    border: 1px solid rgba(var(--c-accent-rgb), 0.22);
    border-radius: var(--radius-md, 10px);
    padding: 0.6cqmin;
    box-shadow: 0 0.2cqmin 0.6cqmin rgba(var(--c-shadow-rgb), 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4cqh;
    min-width: 0;
    min-height: 0;
    height: 100%;
    color: var(--c-text);
    overflow: visible;
    box-sizing: border-box;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.create-item-tile:hover,
.create-item-tile:focus-within {
    background: rgba(var(--c-cream-rgb), 0.92);
    box-shadow: 0 0.4cqmin 1.2cqmin rgba(var(--c-shadow-rgb), 0.18);
    transform: translateY(-0.3cqmin);
    z-index: 6;
}
.create-item-tile:hover .create-item-tile__preview,
.create-item-tile:focus-within .create-item-tile__preview {
    background: rgba(255, 255, 255, 0.95);
}

.create-item-tile__toggle {
    position: absolute;
    top: 0.4cqmin;
    left: 0.6cqmin;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.5cqmin;
    padding: 0.2cqmin 0.6cqmin;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 0.6cqmin;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.4cqmin;
    font-weight: 600;
    color: var(--cw-5a2020);
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
}
.create-item-tile__toggle input[type=checkbox] { margin: 0; }

.create-item-tile__preview {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius-md, 10px) - 2px);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.create-item-tile__preview img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block;
    border-radius: 0;
}
.create-look-rework .article-item-row.create-item-tile {
    background: rgba(var(--c-cream-rgb), 0.65);
    border: 1px solid rgba(var(--c-accent-rgb), 0.22);
    padding: 0.6cqmin;
    margin-bottom: 0;
}
.create-item-tile__preview::before {
    content: 'Click to find on SHEIN';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(var(--c-shadow-rgb), 0.55);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.4cqmin;
    padding: 0.6cqmin;
    pointer-events: none;
}
.create-item-tile__preview:has(img)::before,
.create-item-tile__preview.has-image::before { content: none; }

/* Bottom slot locked because a dress is selected as the Top (a dress is a
   one-piece, so no separate bottom is used). Dim + lock the inner content and
   show a clear badge while keeping the badge itself crisp. */
.create-item-tile--dress-locked .create-item-tile__preview,
.create-item-tile--dress-locked .create-item-tile__details,
.create-item-tile--dress-locked .create-item-tile__toggle {
    opacity: 0.45;
    filter: grayscale(0.4);
    pointer-events: none;
}
.create-item-tile--dress-locked::after {
    content: 'Covered by dress';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 7;
    padding: 0.4cqmin 0.9cqmin;
    background: rgba(var(--c-shadow-rgb), 0.9);
    color: #fff;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.4cqmin;
    font-weight: 600;
    border-radius: 0.6cqmin;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}
/* Single image rule — cover fills the preview fully. */
.create-item-tile__preview .input-preview-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover-revealed details panel — styled to mirror .look-item-tile[data-tip]
   tooltip: dark, compact, narrow, sits above/below the tile. Form inputs are
   kept in the DOM (so postback still works) but are visually de-chromed so
   the popover reads as a single tooltip card. */
.create-item-tile__details {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 6px);
    top: calc(100% + 0.5rem);
    width: max-content;
    max-width: 260px;
    background: rgba(20, 10, 10, 0.92);
    color: #fff;
    border: 0;
    border-radius: 0.4rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    padding: 0.45rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 9999;
}
.create-item-tile:hover .create-item-tile__details,
.create-item-tile:focus-within .create-item-tile__details {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
/* Bottom row opens details ABOVE the tile so the popover doesn't render off-screen. */
.create-items-row--bottom .create-item-tile__details {
    top: auto;
    bottom: calc(100% + 0.5rem);
    transform: translate(-50%, -6px);
}
.create-items-row--bottom .create-item-tile:hover .create-item-tile__details,
.create-items-row--bottom .create-item-tile:focus-within .create-item-tile__details {
    transform: translate(-50%, 0);
}
/* De-chrome all inputs inside the dark popover so they read like tooltip text
   rather than a form. Hidden ones (file, item-desc, URL) are removed visually
   but stay in DOM for form submission. */
.create-item-tile__details input {
    background: transparent;
    color: #fff;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0;
    padding: 0.2rem 0;
    font: inherit;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}
.create-item-tile__details input::placeholder { color: rgba(255, 255, 255, 0.55); }
.create-item-tile__details input:focus { border-bottom-color: #fff; }
/* Hide only the file input (not editable as text) — keep description, item
   description, search term, and product URL visible in the tooltip so the
   user sees all metadata on hover as before. */
.create-item-tile__details input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.create-item-tile__details .text-danger {
    color: var(--cw-ffb4b4);
    font-size: 0.7rem;
}

/* Disable visual when item turned off */
.create-item-tile:has(.article-item-check:not(:checked)) {
    opacity: 0.45;
    filter: grayscale(0.6);
}

/* ===== Alternative Profile layout — tiles aligned with CreateLook page =====
   Activated by adding .profile-form-column--tiles to the profile column.
   Toggled via ?profileLayout=tiles. Mostly CSS — the only HTML change is a
   .profile-tile__body wrapper around each form-row's editor portion, which is
   `display: contents` (invisible) in the classic layout. */

.profile-layout-toggle {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0 0 0.6rem 0;
}

/* In classic layout the body wrapper is transparent (no visual / layout effect). */
.profile-tile__body { display: contents; }

.profile-form-column--tiles > fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    background: none !important;
    display: grid;
    /* Fill the page: tiles flex to consume the full container width. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    align-items: stretch;
    overflow: visible;
}
.profile-form-column--tiles > fieldset > legend {
    grid-column: 1 / -1;
    padding: 0;
    margin: 0 0 0.2rem 0;
}
.profile-form-column--tiles > fieldset > legend h2 {
    margin: 0;
    font-size: 1.05rem;
}

/* Each form-row becomes a uniform square tile that fills its grid cell */
.profile-form-column--tiles > fieldset > .form-row {
    position: relative;
    aspect-ratio: 1 / 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(var(--c-shadow-rgb), 0.18);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(var(--c-shadow-rgb), 0.10);
    padding: 0.5rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--c-text);
    cursor: pointer;
    overflow: visible;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.profile-form-column--tiles > fieldset > .form-row:hover,
.profile-form-column--tiles > fieldset > .form-row:focus-within {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 24px rgba(var(--c-shadow-rgb), 0.22);
    transform: translateY(-2px);
    z-index: 60;
}

/* Tile label = always-visible content */
.profile-form-column--tiles > fieldset > .form-row > label {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 700;
    color: var(--cw-5a2020);
    font-size: clamp(0.78rem, 1.6vw, 1rem);
    line-height: 1.15;
    margin: 0;
    pointer-events: none;
    word-break: break-word;
    hyphens: auto;
}
.profile-form-column--tiles > fieldset > .form-row > br { display: none; }

/* Hide any non-wrapped text-danger/labels that escaped the body wrap */
.profile-form-column--tiles > fieldset > .form-row > .text-danger,
.profile-form-column--tiles > fieldset > .form-row > .skin-tone-label {
    position: absolute;
    left: 50%;
    bottom: 0.25rem;
    transform: translateX(-50%);
    font-size: 0.7rem;
    max-width: 95%;
}

/* Hover-revealed popover body (mirrors .create-item-tile__details) */
.profile-form-column--tiles .profile-tile__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: max(240px, 130%);
    max-width: 90vw;
    background: #fff;
    border: 1px solid rgba(var(--c-shadow-rgb), 0.25);
    border-radius: 12px;
    padding: 0.7rem 0.75rem;
    box-shadow: 0 14px 32px rgba(var(--c-shadow-rgb), 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 70;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.profile-form-column--tiles > fieldset > .form-row:hover > .profile-tile__body,
.profile-form-column--tiles > fieldset > .form-row:focus-within > .profile-tile__body {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Body inputs fill width */
.profile-form-column--tiles .profile-tile__body input[type="text"],
.profile-form-column--tiles .profile-tile__body input[type="number"],
.profile-form-column--tiles .profile-tile__body input[type="date"],
.profile-form-column--tiles .profile-tile__body textarea,
.profile-form-column--tiles .profile-tile__body select {
    width: 100%;
    box-sizing: border-box;
}

/* Existing collapsible pickers — keep open inside the popover so users
   don't need a second click to see the options. */
.profile-form-column--tiles .profile-tile__body .swatch-picker,
.profile-form-column--tiles .profile-tile__body .bubble-picker,
.profile-form-column--tiles .profile-tile__body .body-shape-picker {
    margin: 0;
}
.profile-form-column--tiles .profile-tile__body .swatch-picker__preview,
.profile-form-column--tiles .profile-tile__body .bubble-picker__preview,
.profile-form-column--tiles .profile-tile__body .body-shape-picker__preview {
    display: none;
}
.profile-form-column--tiles .profile-tile__body .sex-options,
.profile-form-column--tiles .profile-tile__body .bubble-picker__panel,
.profile-form-column--tiles .profile-tile__body .body-shape-picker__options,
.profile-form-column--tiles .profile-tile__body .skin-tone-chart {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    visibility: visible;
    opacity: 1;
    max-height: none;
    pointer-events: auto;
    transform: none;
    position: static;
}
.profile-form-column--tiles .profile-tile__body .body-shape-measurements[hidden] {
    display: block !important;
}

/* Description tile spans full width and stays open without hover */
.profile-form-column--tiles > fieldset > .form-row--wide {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    min-height: 160px;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    cursor: default;
}
.profile-form-column--tiles > fieldset > .form-row--wide > label {
    align-self: flex-start;
    margin-bottom: 0.3rem;
}
.profile-form-column--tiles > fieldset > .form-row--wide > .profile-tile__body {
    position: static;
    width: 100%;
    max-width: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    z-index: auto;
}

/* Credits row stays as a single tile (button is its visible content) */
.profile-form-column--tiles > fieldset > .credits-row {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    min-height: 0;
    padding: 0.6rem;
    cursor: default;
}
.profile-form-column--tiles > fieldset > .credits-row:hover {
    transform: none;
    box-shadow: 0 2px 6px rgba(var(--c-shadow-rgb), 0.10);
}

/* Save / Delete actions and the style-journey thumbnails */
.profile-form-column--tiles > fieldset > #saveProfileBtn,
.profile-form-column--tiles > fieldset > #deleteProfileBtn {
    grid-column: 1 / -1;
    height: auto;
    justify-self: stretch;
}
.profile-form-column--tiles > fieldset > #deleteProfileBtn { margin-top: 0; }
.profile-form-column--tiles > fieldset > .text-muted.form-hint {
    grid-column: 1 / -1;
    height: auto;
}
.profile-form-column--tiles > fieldset > .profile-image-column {
    grid-column: 1 / -1;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
    margin-top: 0.6rem;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}
.profile-form-column--tiles > fieldset > .profile-image-column:hover {
    transform: none;
    box-shadow: none;
}
.profile-form-column--tiles > fieldset > .hour-rose { display: none; }

/* ===== Responsive: fewer columns + bigger touch targets ===== */

/* Tablet */
@media (max-width: 900px) {
    .profile-form-column--tiles > fieldset {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
    }
}

/* Phone */
@media (max-width: 600px) {
    .profile-layout-toggle {
        justify-content: center;
    }
    .profile-form-column--tiles > fieldset {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }
    .profile-form-column--tiles > fieldset > .form-row {
        border-radius: 16px;
        padding: 0.6rem;
    }
    .profile-form-column--tiles > fieldset > .form-row > label {
        font-size: 0.95rem;
    }

    /* On touch devices a hover popover is awkward — promote the popover to a
       centered fixed overlay shown on focus-within (tap to open). */
    .profile-form-column--tiles .profile-tile__body {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.96);
        width: min(92vw, 420px);
        max-width: 92vw;
        max-height: 80vh;
        overflow-y: auto;
        padding: 1rem;
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    }
    .profile-form-column--tiles > fieldset > .form-row:focus-within > .profile-tile__body,
    .profile-form-column--tiles > fieldset > .form-row:hover > .profile-tile__body {
        transform: translate(-50%, -50%) scale(1);
    }
    /* Dim the page behind the open popover */
    .profile-form-column--tiles > fieldset > .form-row:focus-within::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 65;
    }

    /* Description tile still inline (no popover behaviour) */
    .profile-form-column--tiles > fieldset > .form-row--wide > .profile-tile__body {
        position: static;
        width: 100%;
        max-width: none;
        max-height: none;
        overflow: visible;
        padding: 0;
        box-shadow: none;
        transform: none;
    }
    .profile-form-column--tiles > fieldset > .form-row--wide:focus-within::before {
        display: none;
    }
}

/* Very small phones — single column for extra-readable tiles */
@media (max-width: 380px) {
    .profile-form-column--tiles > fieldset {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .profile-form-column--tiles > fieldset > .form-row {
        aspect-ratio: 1.15 / 1; /* slightly shorter on tiny screens */
    }
}

/* ----- Center photo with color frame around it ----- */
.create-photo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    margin: 0.6rem 0 1.2rem 0;
}
.create-photo-frame {
    position: relative;
    padding: 14px 14px 14px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.55);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    display: inline-flex;
    align-items: flex-start;
    gap: 14px;
}

/* AI Style Analysis as the third column inside .create-photo-frame */
.ai-analysis-section.ai-analysis-side {
    flex: 0 0 360px;
    width: 360px;
    max-width: 42vw;
    max-height: 70cqh;
    overflow-y: auto;
    margin: 0;
    padding: 10px 12px 8px;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(var(--c-shadow-rgb),0.18);
    border-radius: 12px;
    align-self: stretch;
}
.ai-analysis-section.ai-analysis-side .create-look-description {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 0 0;
}
.ai-analysis-section.ai-analysis-side .create-look-description textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.82rem;
}
.ai-analysis-section.ai-analysis-side .create-look-buttons {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 6px;
}
.ai-analysis-section.ai-analysis-side .create-look-buttons .btn {
    font-size: 0.78rem;
    padding: 5px 10px;
}
.ai-analysis-section.ai-analysis-side > legend {
    padding: 0 4px;
    font-weight: 600;
}
.ai-analysis-section.ai-analysis-side > legend h3 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
}
.ai-analysis-section.ai-analysis-side .form-row {
    display: block;
    margin-bottom: 8px;
}
.ai-analysis-section.ai-analysis-side .form-row label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0 0 3px 2px;
    color: var(--cw-5a2020);
}
.ai-analysis-section.ai-analysis-side textarea,
.ai-analysis-section.ai-analysis-side input[readonly] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.82rem;
    padding: 4px 6px;
}
@media (max-width: 980px) {
    .create-photo-frame { flex-wrap: wrap; }
    .ai-analysis-section.ai-analysis-side {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        max-height: none;
    }
}
.create-look-photo-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
    height: fit-content;
    max-width: 100%;
    line-height: 0;
}
.create-look-photo {
    display: block;
    width: auto;
    height: 32cqh;
    max-height: 32cqh;
    max-width: 70%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 1.2cqmin;
    background: #fff;
    box-shadow: 0 0.4cqmin 1.2cqmin rgba(var(--c-shadow-rgb), 0.25);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.create-look-photo-btn:hover .create-look-photo { filter: brightness(0.92); transform: scale(1.01); }
.create-look-photo-btn:focus-visible .create-look-photo { outline: 3px solid var(--cw-ffb84d); outline-offset: 2px; }

.create-look-photo-preview {
    /* Hidden: main #createLookPhoto already shows the uploaded image.
       Kept in DOM because JS checks for `#previewContainer-Photo img` to
       detect whether a photo has been loaded. */
    display: none !important;
}

.create-look-photo-hint {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.create-look-photo-btn:hover .create-look-photo-hint { opacity: 1; }

/* Color palette beside the photo — 4-column grid, larger swatches */
.color-frame {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, 22px);
    grid-auto-rows: 22px;
    gap: 5px;
    padding: 4px;
    width: auto;
    max-height: 32cqh;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    z-index: 4;
    scrollbar-width: thin;
    align-content: start;
    justify-content: center;
}
.color-frame__strip {
    display: contents;
}
.color-frame__strip--top,
.color-frame__strip--bottom,
.color-frame__strip--left,
.color-frame__strip--right { grid-area: auto; }
.color-frame__pad {
    width: 22px;
    height: 22px;
    visibility: hidden;
    pointer-events: none;
}
.color-frame__swatch {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    opacity: 0.45;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    flex: 0 0 auto;
}
.color-frame__swatch:hover { transform: scale(1.18); }
.color-frame__swatch.is-selected {
    opacity: 1;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,0.45);
    transform: scale(1.1);
}
.color-frame__swatch.is-recommended {
    border-color: gold;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 0 6px 1px rgba(var(--cwt-255-215-0),0.55);
}
.color-frame__swatch.is-recommended.is-selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px gold, 0 0 8px 2px rgba(var(--cwt-255-215-0),0.75);
}
.palette-reset-btn,
.palette-clear-btn,
.palette-save-btn {
    position: absolute;
    bottom: 8px;
    z-index: 5;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.7);
    color: #fff;
    border-radius: 14px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.palette-reset-btn { right: 8px;   background: rgba(0,0,0,0.55); }
.palette-clear-btn { right: 122px; background: rgba(0,0,0,0.55); }
.palette-save-btn  { right: 232px; background: rgba(33,120,60,0.85); border-color: rgba(255,255,255,0.85); }
.palette-reset-btn:hover,
.palette-clear-btn:hover { opacity: 1; background: rgba(0,0,0,0.75); }
.palette-save-btn:hover  { opacity: 1; background: rgba(33,140,70,1); }

/* ===== Palette: My colors chips, search, and family accordion ===== */

.palette-selected { width: 100%; margin-bottom: 6px; }
.palette-selected__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.palette-selected__title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-fg, #2a2a2a);
    opacity: 0.85;
}
.palette-userec-btn {
    border: 1px solid rgba(var(--c-shadow-rgb),0.3);
    background: #fff;
    color: var(--c-shadow);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.palette-userec-btn:hover { background: var(--c-shadow); color: #fff; }

.palette-selected__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 26px;
    align-content: flex-start;
}
.palette-selected__empty {
    font-size: 0.72rem;
    color: var(--cw-8a7d7d);
    font-style: italic;
    padding: 3px 0;
}
.palette-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px 2px 4px;
    background: #fff;
    border: 1px solid rgba(var(--c-shadow-rgb),0.22);
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.2;
    max-width: 100%;
}
.palette-chip__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.palette-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
    color: #2a2a2a;
}
.palette-chip__remove {
    border: 0;
    background: none;
    color: var(--cw-9a6a6a);
    font-size: 1rem;
    line-height: 1;
    padding: 0 1px;
    cursor: pointer;
    border-radius: 50%;
}
.palette-chip__remove:hover { color: var(--cw-b3261e); }

.palette-search-wrap { width: 100%; margin-bottom: 6px; }
.palette-search {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 10px;
    font-size: 0.8rem;
    border: 1px solid rgba(var(--c-shadow-rgb),0.25);
    border-radius: 999px;
    background: #fff;
    color: #2a2a2a;
    outline: none;
}
.palette-search:focus { border-color: var(--c-shadow); box-shadow: 0 0 0 2px rgba(var(--c-shadow-rgb),0.15); }

/* Accordion: the frame becomes a vertical list of collapsible family sections. */
.color-frame.color-frame--accordion {
    display: block;
    grid-template-columns: none;
    width: 100%;
    max-height: 40cqh;
    padding: 0;
    justify-content: stretch;
    text-align: left;
}
.color-fam { border-bottom: 1px solid rgba(var(--c-shadow-rgb),0.12); }
.color-fam__header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 4px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: var(--color-fg, #2a2a2a);
    text-align: left;
}
.color-fam__header:hover { background: rgba(var(--c-shadow-rgb),0.05); }
.color-fam__name {
    font-size: 0.76rem;
    font-weight: 600;
    flex: 0 0 auto;
}
.color-fam__preview {
    display: inline-flex;
    gap: 2px;
    flex: 1 1 auto;
    overflow: hidden;
}
.color-fam__previewdot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.color-fam.is-open .color-fam__preview { visibility: hidden; }
.color-fam__count {
    font-size: 0.68rem;
    color: var(--cw-8a7d7d);
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.color-fam.has-selected .color-fam__count { color: #21783c; font-weight: 600; }
.color-fam__chevron {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--cw-9a6a6a);
    transition: transform 0.15s ease;
}
.color-fam.is-open .color-fam__chevron { transform: rotate(90deg); }
.color-fam__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 22px);
    gap: 5px;
    padding: 2px 4px 8px;
    justify-content: start;
}
.color-fam:not(.is-open) .color-fam__grid { display: none; }

/* Width override so the accordion fills the palette column and grows to use
   the full available height (scrolling internally when the list is long). */
#createLookPage .create-photo-stack .palette-row #colorFrame.color-frame--accordion {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    justify-content: stretch;
}

/* Description + actions below photo */
.create-look-description { width: min(560px, 90vw); margin: 0; }
.create-look-description textarea { width: 100%; }
.create-look-disclaimer {
    width: min(640px, 92vw);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    text-align: center;
}

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

@media (max-width: 720px) {
    .create-items-row { gap: 0.5rem; }
    .create-item-tile { min-height: 140px; }
    .create-look-photo { width: clamp(180px, 70vw, 260px); }
}
@media (max-width: 480px) {
    .create-items-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
    .create-item-tile { min-height: 120px; }
    .create-item-tile__toggle { font-size: 0.65rem; padding: 0.15rem 0.4rem; }
}
@media (max-width: 360px) {
    .create-items-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .create-item-tile { min-height: 110px; }
}


/* ===================== Discover Looks page ===================== */
#discoverLooksPage { padding: 0; }
.discover-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 5cqh 2cqmin 5cqh;
    box-sizing: border-box;
    overflow: hidden;
}
.discover-page__header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "back titles filters";
    column-gap: 0.7rem;
    align-items: center;
    margin-bottom: 0.55rem;
}
.discover-page__back { grid-area: back; align-self: center; padding: 0.32rem 0.6rem; font-size: 0.82rem; }
.discover-page__titles { grid-area: titles; min-width: 0; }
.discover-page__title { margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.4rem); }
.discover-page__subtitle { margin: 0; font-size: 0.72rem; color: var(--cw-7a5b5b); }
.discover-filters { grid-area: filters; display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
.discover-filter {
    text-decoration: none;
    font-size: 0.72rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--c-shadow-rgb),0.22);
    color: var(--cw-5a2020);
    background: rgba(255,255,255,0.5);
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.discover-filter:hover { background: rgba(var(--c-shadow-rgb),0.08); }
.discover-filter.is-active { background: var(--cw-5a2020); color: #fff; border-color: var(--cw-5a2020); }
.discover-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--cw-7a5b5b);
    gap: 0.3rem;
}
.discover-feed {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.2rem 0.2rem 0.6rem;
    scrollbar-width: thin;
    scroll-snap-type: y proximity;
}
.discover-card {
    margin: 0;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(var(--c-shadow-rgb),0.12);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(var(--c-shadow-rgb),0.10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}
.discover-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid rgba(var(--c-shadow-rgb),0.10);
}
.discover-card__who { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.discover-card__avatar {
    width: 32px; height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cw-c98c8c), var(--cw-5a2020));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
    text-transform: uppercase;
}
.discover-card__handle { font-weight: 600; color: var(--cw-3d1010); font-size: 0.88rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.discover-card__time { font-size: 0.7rem; color: var(--cw-7a5b5b); }
.discover-card__try { padding: 0.32rem 0.65rem; font-size: 0.78rem; white-space: nowrap; }
.discover-card__main {
    width: 100%;
    background: var(--cw-efe2e2);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.discover-card__hero {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.discover-card__items {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.3rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255,255,255,0.55);
    border-top: 1px solid rgba(var(--c-shadow-rgb),0.08);
}
.discover-card__item {
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #f7eded;
    box-shadow: 0 1px 3px rgba(var(--c-shadow-rgb),0.10);
    display: block;
    text-decoration: none;
    transition: transform 0.12s;
}
.discover-card__item:hover { transform: translateY(-2px); }
.discover-card__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.discover-card__caption {
    margin: 0;
    padding: 0.5rem 0.75rem 0.2rem;
    font-size: 0.85rem;
    color: var(--cw-3d1010);
    line-height: 1.35;
}
.discover-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem 0.6rem;
}
.discover-like-form { margin: 0; }
.discover-like {
    background: none;
    border: 1px solid rgba(var(--c-shadow-rgb),0.18);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--cw-5a2020);
    font-size: 0.85rem;
    transition: background 0.12s, color 0.12s, transform 0.08s;
}
.discover-like:hover { background: rgba(var(--c-shadow-rgb),0.08); }
.discover-like:active { transform: scale(0.96); }
.discover-like.is-liked { background: var(--cw-e63946); color: #fff; border-color: var(--cw-e63946); }
.discover-like__icon { font-size: 1.05rem; line-height: 1; }
.discover-like__count { font-weight: 600; min-width: 1ch; text-align: left; }

@media (max-width: 720px) {
    .discover-page__header {
        grid-template-columns: auto 1fr;
        grid-template-areas: "back titles" "filters filters";
        row-gap: 0.4rem;
    }
    .discover-filters { justify-content: flex-start; }
    .discover-card__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .discover-card__head { flex-wrap: wrap; }
    .discover-card__try { order: 3; width: 100%; text-align: center; }
    .discover-card__handle { max-width: 18ch; }
    .discover-card__items { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0.4rem; gap: 0.25rem; }
    .discover-card__main { aspect-ratio: 1 / 1; }
}

/* ===================== Perfume page ===================== */
#perfumePage,
#organizerPage,
#bodyAndSpiritPage,
#wardrobePage,
#makeupPage {
    background: linear-gradient(135deg, var(--cw-e8cfc4) 0%, var(--cw-dfc4be) 25%, var(--cw-d4b0a8) 50%, var(--cw-e5cfc5) 75%, var(--cw-f2e6dc) 100%);
    /* Align the gradient to the full viewport so these pages blend seamlessly
       with the fixed <body> gradient instead of showing a seam at the edges. */
    background-size: 100vw 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.perfume-placeholder {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: transparent;
    border: 0;
    color: var(--c-accent);
    text-align: center;
    padding: 1rem;
    border-radius: 0;
    width: 100%;
    height: 100%;
}
.perfume-placeholder__glyph { font-size: 4rem; line-height: 1; }
.perfume-placeholder__text {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 0.95rem;
    max-width: 28ch;
}

/* ===================== Organizer → Google Calendar ===================== */
.gcal {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    color: var(--c-accent);
    background: rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    position: relative;
    font-family: var(--font-sans, system-ui, "Segoe UI", sans-serif);
}
/* The explicit display rules below (.gcal__connect / .gcal__view use display:flex) would
   otherwise override the [hidden] attribute, leaving the Connect/Loading panels visible even
   when hidden. Force [hidden] to win for any element inside the calendar. */
.gcal [hidden] { display: none !important; }

/* Calendar panel = Calendar | Diary sub-views (sub-tabs reuse .cp-tabs). */
.plan-calbody { flex: 1; min-height: 0; display: flex; position: relative; }
.plan-calview { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.plan-calview[hidden] { display: none !important; }
/* Inside the wrapper the gcal no longer needs its own card chrome. */
.plan-calbody .gcal { background: transparent; padding: 0; border-radius: 0; }

/* Diary editor: entry list (with search) on the left, the day's page on the right. */
.plan-diary { gap: 0.6rem; flex-direction: row; align-items: stretch; }
.plan-diary__side {
    flex: 0 0 34%; max-width: 240px; min-width: 150px; display: flex; flex-direction: column;
    gap: 0.35rem; min-height: 0; border-right: 1px solid rgba(var(--c-accent-rgb), 0.12); padding-right: 0.55rem;
}
.plan-diary__main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.plan-diary__bar { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.plan-diary__date {
    flex: 0 0 auto; border: 1px solid rgba(var(--c-accent-rgb), 0.2); border-radius: 6px;
    padding: 0.2rem 0.4rem; font: inherit; font-size: 0.82rem; color: var(--color-text, var(--c-text));
    background: rgba(255, 255, 255, 0.6);
}
.plan-diary__status { flex: 1; text-align: right; font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.6); }
.plan-diary__title {
    flex: 0 0 auto; border: none; border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.14); background: transparent;
    font: inherit; font-weight: 700; font-size: 0.95rem; color: var(--color-accent, var(--c-accent)); padding: 0.2rem 0.15rem;
}
.plan-diary__title::placeholder { color: rgba(var(--cwt-59-16-16), 0.35); font-weight: 400; font-style: italic; }
.plan-diary__title:focus { outline: none; border-bottom-color: var(--color-primary, var(--c-primary)); }
.plan-diary__text {
    flex: 1; min-height: 0; resize: none; border: 1px solid rgba(var(--c-accent-rgb), 0.14); border-radius: 8px;
    background: rgba(var(--c-cream-rgb), 0.7); padding: 0.5rem; font: inherit; font-size: 0.9rem; line-height: 1.5;
    color: var(--color-text, var(--c-text)); box-sizing: border-box;
}
.plan-diary__text:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.plan-diary__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; flex: 0 0 auto; }
.plan-diary__save {
    border: none; border-radius: 6px; background: var(--color-primary, var(--cw-c98b7e)); color: #fff;
    font: inherit; font-weight: 600; font-size: 0.8rem; padding: 0.3rem 0.9rem; cursor: pointer;
}
.plan-diary__save:hover { background: var(--color-primary-dark, var(--c-primary-dark)); }
.plan-diary__search {
    flex: 0 0 auto; border: 1px solid rgba(var(--c-accent-rgb), 0.14); border-radius: 6px; background: rgba(255, 255, 255, 0.6);
    font: inherit; font-size: 0.82rem; padding: 0.3rem 0.4rem; color: var(--color-text, var(--c-text));
}
.plan-diary__search::placeholder { color: rgba(var(--cwt-59-16-16), 0.4); }
.plan-diary__search:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.plan-diary__list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.plan-diary__entry {
    display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0.3rem; border-radius: 6px;
    border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.08); cursor: pointer;
}
.plan-diary__entry:hover { background: rgba(var(--c-primary-rgb), 0.18); }
.plan-diary__entry.is-active { background: rgba(var(--cwt-201-139-126), 0.22); }
.plan-diary__entry-date { flex: 0 0 auto; font-size: 0.74rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); }
.plan-diary__entry-prev { min-width: 0; font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-diary__empty { text-align: center; color: rgba(var(--cwt-59-16-16), 0.5); font-size: 0.78rem; padding: 0.4rem; }

/* On narrow screens stack the diary list above the editor. */
@media (max-width: 640px) {
    .plan-diary { flex-direction: column; }
    .plan-diary__side {
        flex: 0 0 auto; max-width: none; width: 100%; border-right: none; padding-right: 0;
        border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.12); padding-bottom: 0.45rem;
    }
    .plan-diary__list { max-height: 30vh; }
}

/* ---------- Travel: weekend trip planner ---------- */
.plan-travel { overflow-y: auto; }
.plan-trip { display: flex; flex-direction: column; gap: 0.5rem; }
.plan-trip__form { display: flex; flex-direction: column; gap: 0.4rem; }
.plan-trip__input, .plan-trip__date, .plan-trip__select {
    border: 1px solid rgba(var(--c-accent-rgb), 0.18); border-radius: 7px; background: rgba(255, 255, 255, 0.7);
    font: inherit; font-size: 0.86rem; padding: 0.35rem 0.5rem; color: var(--color-text, var(--c-text)); box-sizing: border-box;
}
.plan-trip__input { width: 100%; }
.plan-trip__input:focus, .plan-trip__date:focus, .plan-trip__select:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.plan-trip__row { display: flex; gap: 0.4rem; align-items: flex-end; flex-wrap: wrap; }
.plan-trip__field { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.7rem; color: rgba(var(--cwt-59-16-16), 0.7); flex: 1; min-width: 88px; }
.plan-trip__check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: rgba(var(--cwt-59-16-16), 0.8); cursor: pointer; white-space: nowrap; padding-bottom: 0.2rem; }
.plan-trip__check input { accent-color: var(--color-accent, var(--c-accent)); width: 16px; height: 16px; }
.plan-trip__go {
    border: none; border-radius: 7px; background: var(--color-primary, var(--cw-c98b7e)); color: #fff; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 0.85rem; padding: 0.42rem 1rem; flex: 0 0 auto;
}
.plan-trip__go:hover { background: var(--color-primary-dark, var(--c-primary-dark)); }
.plan-trip__go:disabled { opacity: 0.6; cursor: default; }
.plan-trip__results { display: flex; flex-direction: column; gap: 0.45rem; }
.plan-trip__summary { font-weight: 700; font-size: 0.9rem; color: var(--color-accent, var(--c-accent)); }
.plan-trip__hint { font-size: 0.82rem; color: rgba(var(--cwt-59-16-16), 0.7); padding: 0.2rem 0; }
.plan-trip__card, .plan-trip__weatherbox, .plan-trip__budget {
    border: 1px solid rgba(var(--c-accent-rgb), 0.12); border-radius: 9px; background: rgba(var(--c-cream-rgb), 0.75); padding: 0.5rem 0.6rem;
}
.plan-trip__weatherbox { background: rgba(214, 235, 245, 0.5); }
.plan-trip__card-title { font-size: 0.85rem; font-weight: 600; color: var(--color-text, var(--c-text)); }
.plan-trip__weather-basis { font-size: 0.68rem; color: rgba(var(--cwt-59-16-16), 0.55); margin-top: 0.15rem; }
.plan-trip__book {
    display: inline-block; margin-top: 0.35rem; font-size: 0.78rem; font-weight: 600;
    color: var(--color-primary-dark, var(--c-primary-dark)); text-decoration: none;
}
.plan-trip__book:hover { text-decoration: underline; }
.plan-trip__budget-title { font-size: 0.85rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); margin-bottom: 0.25rem; }
.plan-trip__budget-row { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; padding: 0.12rem 0; color: rgba(var(--cwt-59-16-16), 0.85); }
.plan-trip__budget-amt { font-variant-numeric: tabular-nums; }
.plan-trip__budget-total { border-top: 1px solid rgba(var(--c-accent-rgb), 0.16); margin-top: 0.2rem; padding-top: 0.3rem; font-weight: 800; color: var(--color-accent, var(--c-accent)); }
.plan-trip__note { font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.55); margin: 0.3rem 0 0; }

/* ---------- Goals ---------- */
.plan-goals { display: flex; flex-direction: column; min-height: 0; }
.plan-goal-newbtn {
    margin-left: auto; border: none; background: var(--color-primary, var(--cw-c98a7a)); color: #fff;
    font-size: 0.78rem; font-weight: 600; border-radius: 999px; padding: 0.28rem 0.7rem; cursor: pointer;
}
.plan-goal-newbtn:hover { background: var(--color-primary-dark, var(--c-primary-dark)); }
.plan-goals-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.3rem 0; }
.plan-goal-hint { text-align: center; color: rgba(var(--cwt-59-16-16), 0.6); font-size: 0.85rem; padding: 1rem 0.5rem; }

.plan-goal-form { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem; background: rgba(214, 235, 245, 0.4); border-radius: 12px; margin-bottom: 0.4rem; }
.plan-goal-input { width: 100%; border: 1px solid rgba(var(--c-accent-rgb), 0.18); border-radius: 8px; padding: 0.4rem 0.55rem; font-size: 0.85rem; background: var(--c-card); }
.plan-goal-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.plan-goal-field { display: flex; flex-direction: column; gap: 0.12rem; font-size: 0.68rem; color: rgba(var(--cwt-59-16-16), 0.7); flex: 1; min-width: 90px; }
.plan-goal-date { border: 1px solid rgba(var(--c-accent-rgb), 0.18); border-radius: 8px; padding: 0.35rem 0.4rem; font-size: 0.8rem; background: var(--c-card); }
.plan-goal-check { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: rgba(var(--cwt-59-16-16), 0.8); cursor: pointer; }
.plan-goal-check input { accent-color: var(--color-accent, var(--c-accent)); width: 16px; height: 16px; }
.plan-goal-formbtns { display: flex; gap: 0.4rem; justify-content: flex-end; }
.plan-goal-cancel, .plan-goal-create { border: none; border-radius: 8px; padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.plan-goal-cancel { background: rgba(var(--c-accent-rgb), 0.1); color: var(--color-accent, var(--c-accent)); }
.plan-goal-create { background: var(--color-primary, var(--cw-c98a7a)); color: #fff; }
.plan-goal-create:hover { background: var(--color-primary-dark, var(--c-primary-dark)); }
.plan-goal-create:disabled { opacity: 0.6; cursor: default; }

.plan-goal-card { background: rgba(var(--c-cream-rgb), 0.85); border: 1px solid rgba(var(--c-accent-rgb), 0.12); border-radius: 12px; padding: 0.6rem 0.7rem; }
.plan-goal-card.is-done { background: rgba(228, 244, 230, 0.7); }
.plan-goal-cardhead { display: flex; align-items: flex-start; gap: 0.4rem; }
.plan-goal-cardtitle { font-weight: 700; color: var(--color-accent, var(--c-accent)); font-size: 0.92rem; line-height: 1.2; flex: 1; }
.plan-goal-del { border: none; background: none; color: rgba(var(--cwt-59-16-16), 0.4); font-size: 0.9rem; cursor: pointer; line-height: 1; padding: 0.1rem 0.2rem; }
.plan-goal-del:hover { color: #b14; }
.plan-goal-why { font-size: 0.8rem; font-style: italic; color: rgba(var(--cwt-59-16-16), 0.7); margin-top: 0.2rem; }
.plan-goal-meta { font-size: 0.74rem; color: rgba(var(--cwt-59-16-16), 0.65); margin-top: 0.25rem; }
.plan-goal-bar { height: 7px; background: rgba(var(--c-accent-rgb), 0.1); border-radius: 999px; overflow: hidden; margin-top: 0.45rem; }
.plan-goal-barfill { height: 100%; background: linear-gradient(90deg, #7bbf86, #4a9d63); border-radius: 999px; transition: width 0.3s ease; }
.plan-goal-prlabel { font-size: 0.7rem; color: rgba(var(--cwt-59-16-16), 0.6); margin-top: 0.2rem; }

.plan-goal-steps { list-style: none; margin: 0.45rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.plan-goal-step { display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.25rem 0; }
.plan-goal-step.is-done .plan-goal-steptitle { text-decoration: line-through; color: rgba(var(--cwt-59-16-16), 0.45); }
.plan-goal-stepcb { margin-top: 0.15rem; accent-color: #4a9d63; width: 16px; height: 16px; flex: none; }
.plan-goal-steptext { flex: 1; }
.plan-goal-steptitle { font-size: 0.82rem; color: var(--color-text, var(--c-text)); line-height: 1.25; }
.plan-goal-stepsub { font-size: 0.7rem; color: rgba(var(--cwt-59-16-16), 0.55); margin-top: 0.1rem; }
.plan-goal-stepcal { text-decoration: none; font-size: 0.85rem; }
.plan-goal-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.plan-goal-actbtn { border: 1px solid rgba(var(--c-accent-rgb), 0.18); background: var(--c-card); color: var(--color-accent, var(--c-accent)); border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.plan-goal-actbtn:hover { background: rgba(var(--cwt-201-138-122), 0.15); }

/* ---------- Virtual wardrobe ---------- */
.wardrobe {
    display: flex; flex-direction: column; gap: 0.6rem; flex: 1; min-height: 0; overflow-y: auto;
    padding: 0.6rem 0.7rem; box-sizing: border-box; width: 100%; height: 100%;
}
/* Category tiles (4 above + 4 below) filter the wardrobe grid; active one is highlighted. */
.wardrobe-cat.is-active { outline: 2px solid var(--color-primary, var(--c-primary)); outline-offset: -2px; border-radius: var(--radius-md, 10px); }
.wardrobe-cat img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md, 10px); display: block; }
.wardrobe__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.wardrobe__title { font-weight: 700; font-size: 1rem; color: var(--color-accent, var(--c-accent)); }
.wardrobe__head-actions { display: flex; gap: 0.4rem; align-items: center; }
.wardrobe__filter {
    border: 1px solid rgba(var(--c-accent-rgb), 0.18); border-radius: 7px; background: rgba(255, 255, 255, 0.7);
    font: inherit; font-size: 0.82rem; padding: 0.3rem 0.45rem; color: var(--color-text, var(--c-text));
}
.wardrobe__addbtn, .wardrobe__save {
    border: none; border-radius: 7px; background: var(--color-primary, var(--cw-c98b7e)); color: #fff; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 0.82rem; padding: 0.4rem 0.9rem;
}
.wardrobe__addbtn:hover, .wardrobe__save:hover { background: var(--color-primary-dark, var(--c-primary-dark)); }
.wardrobe__cancel {
    border: 1px solid rgba(var(--c-accent-rgb), 0.25); border-radius: 7px; background: transparent; cursor: pointer;
    font: inherit; font-size: 0.82rem; padding: 0.4rem 0.8rem; color: var(--color-text, var(--c-text));
}
.wardrobe__form {
    display: none; flex-direction: column; align-items: center; gap: 0.7rem; padding: 0.8rem; border: 1px solid rgba(var(--c-accent-rgb), 0.18); border-radius: 14px;
    background: rgba(var(--c-cream-rgb), 0.75); margin-bottom: 1rem; box-sizing: border-box; width: 100%; height: 100%; flex: 1; min-height: 0;
}
.wardrobe__form[hidden] { display: none !important; }
.wardrobe-stage { width: 100%; flex: 1; min-height: 220px; max-height: 48vh; aspect-ratio: auto; margin: 0 auto; border: 2px solid rgba(var(--c-accent-rgb), 0.35); border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wardrobe__fields { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
.wardrobe__fields-inline { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }
.wardrobe__fields-inline .wardrobe__in { flex: 1 1 120px; min-width: 90px; }
.wardrobe__in {
    border: 1px solid rgba(var(--c-accent-rgb), 0.18); border-radius: 7px; background: rgba(255, 255, 255, 0.85);
    font: inherit; font-size: 0.84rem; padding: 0.35rem 0.5rem; color: var(--color-text, var(--c-text)); box-sizing: border-box; width: 100%;
}
.wardrobe__in:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.wardrobe__form-actions { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 100%; margin-top: 0.3rem; }
.wardrobe__status { font-size: 0.76rem; color: rgba(var(--cwt-59-16-16), 0.65); text-align: center; }
.wardrobe__save--big {
    width: 100%; height: 44px; font-size: 0.95rem; font-weight: 700; border-radius: 12px; background: var(--color-accent, var(--c-accent)); color: #ffffff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem; box-shadow: 0 4px 12px rgba(0,0,0,0.12); transition: transform 0.15s ease, background 0.2s ease;
}
.wardrobe__save--big:hover { background: var(--color-primary-dark, var(--c-primary-dark)); transform: translateY(-1px); }
.wardrobe__clear-all {
    background: transparent; border: none; color: rgba(var(--cwt-59-16-16), 0.7); font-size: 0.82rem; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0.2rem 0.6rem; transition: color 0.2s ease;
}
.wardrobe__clear-all:hover { color: #c0392b; }
.wardrobe__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; }
.wardrobe__card {
    position: relative; display: flex; flex-direction: column; border: 1px solid rgba(var(--c-accent-rgb), 0.12);
    border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.85);
}
.wardrobe__card-photo {
    width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(var(--c-primary-rgb), 0.15);
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.wardrobe__card-photo img { width: 100%; height: 100%; object-fit: cover; }
.wardrobe__card-photo--none { color: rgba(var(--cwt-59-16-16), 0.4); }
.wardrobe__card-name { font-size: 0.8rem; font-weight: 600; color: var(--color-accent, var(--c-accent)); padding: 0.35rem 0.45rem 0.1rem; }
.wardrobe__card-meta { font-size: 0.7rem; color: rgba(var(--cwt-59-16-16), 0.6); padding: 0 0.45rem 0.45rem; }
.wardrobe__card-del {
    position: absolute; top: 0.3rem; right: 0.3rem; width: 22px; height: 22px; border-radius: 50%;
    border: none; background: rgba(0, 0, 0, 0.5); color: #fff; cursor: pointer; font-size: 1rem; line-height: 1;
}
.wardrobe__card-del:hover { background: rgba(var(--cwt-180-30-30), 0.85); }
.wardrobe__empty { text-align: center; color: rgba(var(--cwt-59-16-16), 0.55); font-size: 0.85rem; padding: 1rem; }

/* ---- Wardrobe redesign: centred head, filter bar, multi-select grid, item detail ---- */
/* Keep the title + Add button centred in the panel. */
.wardrobe__head { justify-content: center; }
/* Centre the add-photo drop above the fields. */
.wardrobe__form { justify-content: center; }
.wardrobe__photo { flex: 1 1 100%; display: flex; justify-content: center; }

/* Top filter bar over the combined (multi-category) grid. */
.wardrobe__filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wardrobe__search {
    flex: 1 1 200px; min-width: 0; border: 1px solid rgba(var(--c-accent-rgb), 0.2); border-radius: 999px;
    background: rgba(255, 255, 255, 0.8); font: inherit; font-size: 0.82rem; padding: 0.4rem 0.8rem;
    color: var(--color-text, var(--c-text));
}
.wardrobe__search:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.wardrobe__count { font-size: 0.74rem; color: rgba(var(--cwt-59-16-16), 0.6); white-space: nowrap; }
.wardrobe__clear {
    border: 1px solid rgba(var(--c-accent-rgb), 0.25); border-radius: 999px; background: transparent; cursor: pointer;
    font: inherit; font-size: 0.76rem; padding: 0.3rem 0.7rem; color: var(--color-text, var(--c-text));
}
.wardrobe__clear:hover { background: rgba(var(--c-accent-rgb), 0.1); }

/* The item cards are now clickable buttons (tap to open details). Reset button chrome. */
.wardrobe__card { text-align: left; font: inherit; cursor: pointer; width: 100%; padding: 0; -webkit-appearance: none; appearance: none; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.wardrobe__card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.wardrobe__card:focus-visible { outline: 2px solid var(--color-primary, var(--c-primary)); outline-offset: 2px; }
.wardrobe__card-tryon {
    margin: 0.2rem 0.45rem 0.45rem;
    padding: 0.3rem 0.6rem;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #5a2020, #8b3a3a);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, transform 0.1s ease;
}
.wardrobe__card-tryon:hover {
    background: linear-gradient(135deg, #722828, #a34444);
    transform: scale(1.02);
}

/* Item-detail overlay (tap a card to open). */
.wardrobe__detail {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.45); padding: 1rem; box-sizing: border-box;
}
.wardrobe__detail[hidden] { display: none; }
.wardrobe__detail-card {
    position: relative; display: flex; flex-direction: column; gap: 0.6rem; width: min(420px, 100%);
    max-height: 90vh; overflow-y: auto; background: var(--color-cream, #fff); border-radius: 14px;
    padding: 0.9rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.wardrobe__detail-close {
    position: absolute; top: 0.5rem; right: 0.5rem; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: rgba(0, 0, 0, 0.5); color: #fff; cursor: pointer; font-size: 1.2rem; line-height: 1; z-index: 1;
}
.wardrobe__detail-close:hover { background: rgba(var(--cwt-180-30-30), 0.85); }
.wardrobe__detail-photo {
    width: 100%; aspect-ratio: 4 / 5; max-height: 50vh; overflow: hidden; border-radius: 10px;
    background: rgba(var(--c-primary-rgb), 0.15); display: flex; align-items: center; justify-content: center; font-size: 3rem;
}
.wardrobe__detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.wardrobe__detail-photo--none { color: rgba(var(--cwt-59-16-16), 0.4); }
.wardrobe__detail-name { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); text-align: center; }
.wardrobe__detail-rows { display: flex; flex-direction: column; gap: 0.25rem; }
.wardrobe__detail-row { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.1); padding: 0.25rem 0; }
.wardrobe__detail-key { color: rgba(var(--cwt-59-16-16), 0.6); }
.wardrobe__detail-val { color: var(--color-text, var(--c-text)); font-weight: 600; text-align: right; }
.wardrobe__detail-del {
    margin-top: 0.4rem; border: 1px solid rgba(var(--cwt-180-30-30), 0.4); border-radius: 8px; background: transparent;
    color: rgba(var(--cwt-180-30-30), 0.95); cursor: pointer; font: inherit; font-size: 0.82rem; padding: 0.5rem 0.8rem; align-self: center;
}
.wardrobe__detail-del:hover { background: rgba(var(--cwt-180-30-30), 0.1); }


/* ---------- Organizer Planner: tabs / lists / reminders ---------- */
.plan-panel[hidden] { display: none !important; }

/* Top row = 4 button-tiles that switch the central window (Lists / Calendar /
   Events / Travel). They live in the look-items-row--top grid cell so they share
   the 4-column grid and the size of the bottom reminder tiles, framing the central
   window exactly like every other book-page's top/bottom tile rows. These are
   buttons that change the central window — NOT folder tabs. */
.plan-nav { z-index: 3; }
.plan-navbtn {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 0.3rem;
    width: 100%; height: 100%; box-sizing: border-box; padding: 0; overflow: hidden;
    border: 1px solid rgba(var(--c-accent-rgb), 0.18);
    border-radius: var(--radius-md, 10px);
    background: rgba(var(--c-cream-rgb), 0.72);
    color: var(--cw-5a2020); font-family: inherit; font-weight: 600;
    font-size: clamp(0.78rem, 1.5cqw, 1rem); line-height: 1.15; text-align: center;
    cursor: pointer; box-shadow: 0 2px 6px rgba(var(--c-shadow-rgb), 0.08);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.plan-navbtn img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.plan-navbtn:hover { box-shadow: 0 4px 10px rgba(var(--c-shadow-rgb), 0.14); transform: translateY(-1px); }
.plan-navbtn:focus-visible { outline: 2px solid var(--cw-ffb84d); outline-offset: 2px; }
.plan-navbtn--active {
    border: 2px solid var(--color-primary, var(--cw-c98b7e));
    box-shadow: 0 4px 12px rgba(var(--c-shadow-rgb), 0.25);
}

.look-photo.plan-panel:not(.gcal) {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0.6rem;
    gap: 0.4rem;
    overflow: hidden;
    box-sizing: border-box;
}
/* Lists & Calendar use the control-panel tab layout: the sub-tab strip sits flush on TOP of the block
   (full width, no surrounding padding) and the content fills the panel below it — rather than the tabs
   floating inside the block. Panels without sub-tabs (Events, Travel) keep the padding above. */
.look-photo.plan-panel.plan-lists,
.look-photo.plan-panel.plan-events,
.look-photo.plan-panel.plan-travel,
.look-photo.plan-panel.plan-calwrap { padding: 0; gap: 0; }
.plan-lists > .plan-subtabs,
.plan-events > .plan-subtabs,
.plan-travel > .plan-subtabs,
.plan-calwrap > .plan-subtabs { flex: 0 0 auto; padding: 0; gap: 0; }
/* Control-panel look: the tab strip sits on the transparent page background (so the gaps behind/
   between the tabs show through), and only the window BELOW the tabs carries a background. So the
   .look-photo-wrap block chrome is dropped for the planner and each window gets its own background. */
#organizerPage .look-photo-wrap { background: transparent; border: none; }
/* Body & Spirit: same treatment so the Cookbook/Fitness flush tabs sit on the transparent page
   (no cream box behind the tabs); each central view (.cookbook--tabwin) carries its own window. */
#bodyAndSpiritPage .look-photo-wrap { background: transparent; border: none; }
.plan-lists-body,
.plan-evbody,
.plan-travel-body,
.plan-calbody {
    padding: 0.5rem 0.6rem 0.6rem; box-sizing: border-box;
    background: rgba(var(--c-cream-rgb), 0.72);
    border: 1px solid rgba(var(--c-shadow-rgb), 0.18);
    border-top: none;
    border-radius: 0 0 12px 12px;
}
.plan-evbody { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.plan-evbody .ev-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Travel now uses the flush sub-tab strip + a padded body window (like Lists/Events). */
.plan-travel-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; }
/* Events tab: search row, cards, badges, reminder menu. */
.ev-search { display: flex; gap: 0.35rem; align-items: center; flex: 0 0 auto; margin-bottom: 0.4rem; flex-wrap: wrap; }
.ev-search .plan-add-input { flex: 1 1 7rem; border: 1px solid rgba(var(--c-accent-rgb), 0.18); border-radius: 6px; height: 26px; padding: 0 0.4rem; background: rgba(255,255,255,0.6); }
.ev-search .plan-add-btn { width: auto; padding: 0 0.55rem; height: 26px; font-size: 0.78rem; }
.ev-connect { flex: 0 0 auto; margin-bottom: 0.4rem; }
.ev-connect-btn, .ev-disconnect-btn { border: 1px solid rgba(var(--c-accent-rgb), 0.2); background: rgba(255,255,255,0.6); color: var(--color-accent, var(--c-accent)); border-radius: 6px; padding: 0.25rem 0.6rem; font-size: 0.78rem; cursor: pointer; }
.ev-connect-btn:hover, .ev-disconnect-btn:hover { background: rgba(var(--c-primary-rgb), 0.25); }
.ev-filters { display: flex; gap: 0.35rem; flex-wrap: wrap; flex: 0 0 auto; margin-bottom: 0.4rem; }
.ev-filter { font-size: 0.74rem; padding: 0.18rem 0.3rem; border: 1px solid rgba(var(--c-accent-rgb), 0.2); border-radius: 6px; background: rgba(255,255,255,0.7); color: var(--color-text, var(--c-text)); }
.ev-cat { font-size: 0.64rem; padding: 0.05rem 0.35rem; border-radius: 999px; background: rgba(var(--c-accent-rgb), 0.08); color: rgba(var(--cwt-59-16-16), 0.75); }
.ev-list { overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ev-card { display: flex; gap: 0.5rem; background: rgba(255,255,255,0.55); border: 1px solid rgba(var(--c-accent-rgb), 0.14); border-radius: 10px; padding: 0.4rem; position: relative; }
.ev-card__img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.ev-card__body { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
.ev-card__title { font-weight: 700; color: var(--color-text, var(--c-text)); font-size: 0.9rem; line-height: 1.2; }
a.ev-card__title { text-decoration: none; cursor: pointer; }
a.ev-card__title:hover { text-decoration: underline; color: var(--color-primary-dark, var(--c-primary-dark)); }
.ev-card__meta { font-size: 0.76rem; color: rgba(var(--cwt-59-16-16), 0.7); }
.ev-card__foot { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.15rem; }
.ev-badge { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.05rem 0.35rem; border-radius: 999px; background: rgba(var(--c-accent-rgb), 0.1); color: var(--color-accent, var(--c-accent)); }
.ev-badge--ticketmaster { background: rgba(2, 108, 223, 0.14); color: #0264c7; }
.ev-badge--seatgeek { background: rgba(var(--cwt-255-90-95), 0.16); color: var(--cw-d23b40); }
.ev-badge--eventbrite { background: rgba(var(--cwt-247-110-96), 0.18); color: var(--cw-d2492f); }
.ev-badge--skiddle { background: rgba(124, 58, 237, 0.16); color: #6d28d9; }
.ev-price { font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.7); }
.ev-btn { border: 1px solid rgba(var(--c-accent-rgb), 0.2); background: transparent; color: var(--color-accent, var(--c-accent)); border-radius: 6px; padding: 0.18rem 0.5rem; font-size: 0.72rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ev-btn--buy { background: var(--color-primary, var(--c-primary)); color: #fff; border-color: transparent; }
.ev-btn--track.is-tracked { background: rgba(106, 168, 79, 0.18); color: #3f7a2e; border-color: rgba(106, 168, 79, 0.4); }
.ev-btn:hover { background: rgba(var(--c-primary-rgb), 0.25); }
.ev-reminders { margin-top: 0.4rem; background: rgba(255,255,255,0.92); border: 1px solid rgba(var(--c-accent-rgb), 0.18); border-radius: 8px; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.2rem; }
.ev-reminders__head { font-size: 0.74rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); margin-bottom: 0.1rem; }
.ev-reminders__opt { text-align: left; border: none; background: transparent; color: var(--color-text, var(--c-text)); font-size: 0.78rem; padding: 0.25rem 0.3rem; border-radius: 5px; cursor: pointer; }
.ev-reminders__opt:hover { background: rgba(var(--c-primary-rgb), 0.25); }
.ev-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(1rem); background: rgba(var(--cwt-59-16-16), 0.92); color: #fff; padding: 0.55rem 0.9rem; border-radius: 8px; font-size: 0.82rem; opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 9999; max-width: 90vw; text-align: center; }
.ev-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.plan-list-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.plan-list-head--actions { justify-content: flex-end; }
.plan-list-title { font-weight: 700; color: var(--color-accent, var(--c-accent)); font-size: 1.05rem; }
.plan-clear-btn {
    flex: 0 0 auto; border: 1px solid rgba(var(--c-accent-rgb), 0.2); background: transparent; color: var(--color-accent, var(--c-accent));
    border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 0.72rem; cursor: pointer; white-space: nowrap;
}
.plan-clear-btn:hover { background: rgba(var(--c-primary-rgb), 0.25); }
.plan-add { display: flex; gap: 0.35rem; align-items: center; flex: 0 0 auto; height: 26px; flex-wrap: nowrap; border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.14); }
.plan-add-input {
    flex: 1 1 auto; min-width: 0; height: 22px; line-height: 22px; border: none; border-radius: 0;
    background: transparent; padding: 0 0.15rem; font-size: 0.84rem; color: var(--color-text, var(--c-text));
}
.plan-add-input::placeholder { color: rgba(var(--cwt-59-16-16), 0.4); font-style: italic; }
.plan-add-input:focus { outline: none; }
.plan-add-btn {
    flex: 0 0 auto; width: 1.3rem; height: 1.3rem; border: none; border-radius: 5px; cursor: pointer;
    background: var(--color-primary, var(--c-primary)); color: #fff; font-size: 0.9rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.plan-add-btn:hover { background: var(--color-primary-dark, var(--c-primary-dark)); }
/* Ruled-notebook list: each item sits on a horizontal line. */
.plan-list {
    list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent 31px, rgba(var(--c-accent-rgb), 0.14) 31px, rgba(var(--c-accent-rgb), 0.14) 32px);
    background-attachment: local;
}
.plan-item {
    display: flex; align-items: center; gap: 0.5rem;
    height: 32px; padding: 0 0.15rem; background: transparent; border: none; border-radius: 0;
}
.plan-item__check { width: 1rem; height: 1rem; accent-color: var(--color-primary, var(--c-primary)); flex: 0 0 auto; }
.plan-item__text { flex: 1; color: var(--color-text, var(--c-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; }
.plan-item.is-done .plan-item__text { text-decoration: line-through; opacity: 0.5; }
.plan-item__del {
    flex: 0 0 auto; border: none; background: transparent; color: var(--color-accent, var(--c-accent));
    font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: 0; padding: 0 0.3rem;
}
.plan-item:hover .plan-item__del { opacity: 0.6; }
.plan-item__del:hover { opacity: 1 !important; color: var(--cw-a12222); }
/* To-do priority stars + due date/time + overdue state */
.plan-listview[data-plan-listview="todo"] .plan-item { flex-wrap: wrap; height: auto; min-height: 32px; }
.plan-item__stars { flex: 0 0 auto; display: inline-flex; gap: 1px; }
.plan-star { border: none; background: transparent; cursor: pointer; padding: 0 1px; font-size: 0.95rem; line-height: 1; color: rgba(var(--cwt-59-16-16), 0.35); }
.plan-star.is-on { color: var(--cw-e0a93b); }
.plan-item__due { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; }
.plan-due-input { font-size: 0.7rem; padding: 1px 2px; border: 1px solid rgba(var(--cwt-59-16-16), 0.2); border-radius: 4px; background: rgba(255, 255, 255, 0.5); color: var(--color-text, var(--c-text)); max-width: 9.5rem; }
.plan-due-clear { border: none; background: transparent; cursor: pointer; color: var(--color-accent, var(--c-accent)); font-size: 0.85rem; line-height: 1; padding: 0 2px; opacity: 0.6; }
.plan-due-clear:hover { opacity: 1; color: var(--cw-a12222); }
.plan-item.is-overdue .plan-item__text { color: var(--cw-a12222); font-weight: 600; }
.plan-item.is-overdue .plan-due-input { border-color: var(--cw-a12222); color: var(--cw-a12222); }
.plan-empty { text-align: center; color: rgba(var(--cwt-59-16-16), 0.55); font-size: 0.9rem; margin: auto 0; }

/* Movies: AI recommend controls + suggestion cards. */
/* Movies: reworked unified add/recommend bar + filter bar. */
.plan-movies-add {
    height: auto; gap: 0.4rem; padding: 0.32rem 0.45rem; margin-bottom: 0.45rem;
    border: 1px solid rgba(var(--c-accent-rgb), 0.22); border-radius: 9px;
    background: rgba(var(--c-cream-rgb), 0.55);
}
.plan-movies-add .plan-add-input { height: 26px; line-height: 26px; font-size: 0.9rem; }
.plan-movies-add .plan-add-input::placeholder { font-style: normal; }
.plan-movies-bar { display: flex; gap: 0.45rem; align-items: center; flex: 0 0 auto; margin-bottom: 0.45rem; flex-wrap: wrap; }
.plan-seg { display: inline-flex; flex: 0 0 auto; padding: 2px; gap: 2px; border: 1px solid rgba(var(--c-accent-rgb), 0.22); border-radius: 999px; background: rgba(255,255,255,0.5); }
.plan-seg__btn {
    appearance: none; border: none; background: transparent; cursor: pointer; font: inherit;
    font-size: 0.78rem; font-weight: 600; color: var(--color-accent, var(--c-accent));
    padding: 0.22rem 0.7rem; border-radius: 999px; white-space: nowrap; line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease;
}
.plan-seg__btn:hover { background: rgba(var(--c-primary-rgb), 0.14); }
.plan-seg__btn.is-active { background: var(--color-primary, var(--c-primary)); color: #fff; }
.plan-seg__btn:focus-visible { outline: 2px solid var(--cw-ffb84d); outline-offset: 2px; }
.plan-movies-filter {
    flex: 1 1 7rem; min-width: 0; height: 28px; border: 1px solid rgba(var(--c-accent-rgb), 0.22);
    border-radius: 7px; padding: 0 0.55rem; background: rgba(255,255,255,0.6);
    font-size: 0.82rem; color: var(--color-text, var(--c-text));
}
.plan-movies-filter::placeholder { color: rgba(var(--cwt-59-16-16), 0.45); }
.plan-movies-filter:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }

/* Body & Spirit button tile reset and full-span background images */
#bodyAndSpiritPage button.look-item-tile {
  margin: 0;
  padding: 0 !important;
  background: rgba(var(--c-cream-rgb), 0.65);
  border: 1px solid rgba(var(--c-accent-rgb), 0.22);
  border-radius: var(--radius-md, 10px);
  outline: none;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  height: 100%;
}
#bodyAndSpiritPage .look-item-tile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  margin: 0;
  padding: 0;
}

/* Esoteric + Visualisation Board central views (static content). */
/* Higher specificity than .cookbook__panel (which sets overflow:hidden later in the file) so the
   panels — notably the 22-card Tarot grid — scroll instead of being clipped. */
.cookbook__panel.eso__panel { overflow-y: auto; min-height: 0; }
.eso__intro { font-size: 0.86rem; color: rgba(var(--cwt-59-16-16), 0.7); margin: 0 0 0.7rem; line-height: 1.4; }
.eso__subhead { font-size: 0.9rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); margin: 1rem 0 0.5rem; }
.eso__none { color: rgba(var(--cwt-59-16-16), 0.55); font-size: 0.85rem; text-align: center; padding: 0.8rem; }
.eso__search { width: 100%; box-sizing: border-box; height: 32px; border: 1px solid rgba(var(--c-accent-rgb), 0.25); border-radius: 8px; padding: 0 0.6rem; font-size: 0.86rem; background: rgba(255,255,255,0.7); margin-bottom: 0.7rem; color: var(--color-text, var(--c-text)); }
.eso__search:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.eso__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
.eso__card { border: 1px solid rgba(var(--c-accent-rgb), 0.15); border-radius: 12px; background: rgba(var(--c-cream-rgb), 0.7); padding: 0.7rem; }
.eso__card-title { font-size: 0.92rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); margin: 0.2rem 0; }
.eso__signs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.4rem; margin-bottom: 0.8rem; }
.eso__sign { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid rgba(var(--c-accent-rgb), 0.2); border-radius: 10px; background: rgba(255,255,255,0.6); padding: 0.4rem 0.2rem; cursor: pointer; font: inherit; color: var(--color-text, var(--c-text)); }
.eso__sign:hover { background: rgba(var(--c-primary-rgb), 0.12); }
.eso__sign.is-active { background: var(--color-primary, var(--c-primary)); color: #fff; border-color: transparent; }
.eso__sign-glyph { font-size: 1.2rem; }
.eso__sign-name { font-size: 0.66rem; }
.eso__astrocard { text-align: center; }
.eso__astro-glyph { font-size: 2.4rem; }
.eso__astro-meta { font-size: 0.78rem; color: rgba(var(--cwt-59-16-16), 0.7); }
.eso__astro-traits { font-size: 0.88rem; margin: 0.4rem 0; }
.eso__reading { border-top: 1px dashed rgba(var(--c-accent-rgb), 0.25); margin-top: 0.6rem; padding-top: 0.6rem; }
.eso__reading-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary-dark, var(--c-primary-dark)); }
.eso__reading-text { font-size: 0.9rem; font-style: italic; margin: 0.25rem 0 0; }
.eso__crystal { text-align: center; }
.eso__crystal-emoji { font-size: 1.8rem; }
.eso__crystal-props { font-size: 0.78rem; margin: 0.2rem 0; }
.eso__crystal-helps { font-size: 0.74rem; color: var(--color-primary-dark, var(--c-primary-dark)); }
.eso__draw { text-align: center; margin-bottom: 0.8rem; }
.eso__draw-result { margin-top: 0.7rem; }
.eso__tarot-drawn { max-width: 260px; margin: 0 auto; text-align: center; }
.eso__tarot { text-align: center; }
.eso__tarot-emoji { font-size: 1.7rem; }
.eso__tarot-num { font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.6); }
.eso__tarot-up { font-size: 0.8rem; }
.eso__tarot-rev { font-size: 0.78rem; color: rgba(var(--cwt-59-16-16), 0.7); margin-top: 0.15rem; }
.eso__tarot-yn { font-size: 0.72rem; font-weight: 700; color: var(--color-primary-dark, var(--c-primary-dark)); margin-top: 0.2rem; }
.eso__tarot-emoji--rev { display: inline-block; transform: rotate(180deg); }
.vis__add { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
.vis__add .eso__search { margin-bottom: 0; }
.vis__board { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; }
.vis__note { position: relative; min-height: 84px; border-radius: 10px; padding: 0.6rem; font-size: 0.86rem; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.vis__note--c0 { background: #fff6c8; transform: rotate(-1.5deg); }
.vis__note--c1 { background: #d9f2e6; transform: rotate(1deg); }
.vis__note--c2 { background: #ffe0e6; transform: rotate(-0.5deg); }
.vis__note--c3 { background: #dbe9ff; transform: rotate(1.5deg); }
.vis__note-text { color: #3a2a2a; }
.vis__note-del { position: absolute; top: 2px; right: 4px; border: none; background: transparent; font-size: 1rem; line-height: 1; color: rgba(0,0,0,0.4); cursor: pointer; }
.vis__note-del:hover { color: #a12222; }
.vis__daily { text-align: center; background: linear-gradient(135deg, rgba(var(--c-primary-rgb),0.14), rgba(var(--c-accent-rgb),0.10)); }
.vis__daily-text { font-size: 1.05rem; font-style: italic; margin: 0.3rem 0 0; }
.vis__affirms { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.3rem; }
.vis__affirm { display: flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(var(--c-accent-rgb), 0.15); border-radius: 8px; background: rgba(var(--c-cream-rgb), 0.7); padding: 0.45rem 0.6rem; }
.vis__affirm-text { flex: 1; font-size: 0.88rem; }
.vis__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.vis__chip { border: 1px dashed rgba(var(--c-primary-rgb), 0.4); border-radius: 999px; background: transparent; padding: 0.25rem 0.6rem; font-size: 0.76rem; cursor: pointer; color: var(--color-primary-dark, var(--c-primary-dark)); }
.vis__chip:hover { background: rgba(var(--c-primary-rgb), 0.12); }
.vis__tips-wrap { margin-bottom: 0.6rem; background: rgba(var(--c-cream-rgb, 250, 248, 245), 0.6); padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid rgba(var(--c-accent-rgb, 212, 175, 55), 0.2); }
.vis__tips-title { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-text, #333); }
.vis__chips-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vis__chip-btn { border: 1px solid rgba(var(--c-primary-rgb, 180, 140, 90), 0.3); border-radius: 20px; background: #fff; padding: 0.3rem 0.7rem; font-size: 0.8rem; font-weight: 500; cursor: pointer; color: var(--color-primary-dark, #5a4020); transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.vis__chip-btn:hover { background: var(--color-primary-light, #f4ece1); border-color: var(--color-primary, #b48c5a); transform: translateY(-1px); }
.vis__desc { width: 100%; box-sizing: border-box; min-height: 96px; border: 1px solid rgba(var(--c-accent-rgb), 0.25); border-radius: 9px; padding: 0.6rem 0.7rem; font: inherit; font-size: 0.9rem; line-height: 1.4; background: rgba(255,255,255,0.7); color: var(--color-text, var(--c-text)); resize: vertical; margin-bottom: 0.5rem; }
.vis__desc:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.vis__genbar { display: flex; margin-bottom: 0.4rem; }
.vis__genstatus { font-size: 0.82rem; color: rgba(var(--cwt-59-16-16), 0.7); min-height: 1.1rem; margin-bottom: 0.4rem; }
.vis__genresult { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 100%; }
.vis__genresult:not(:empty) { margin-bottom: 0.6rem; }
.vis__genimg { display: block; width: 100%; max-width: 100%; height: auto; max-height: 58vh; object-fit: contain; border-radius: 12px; border: 1px solid rgba(var(--c-accent-rgb), 0.2); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

/* Personal Growth: Gratitude Jar + Growth Mindset. */
.grat-addbar { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
.grat-input { flex: 1; min-width: 0; box-sizing: border-box; height: 38px; border: 1px solid rgba(var(--c-accent-rgb), 0.3); border-radius: 9px; padding: 0 0.7rem; font: inherit; font-size: 0.9rem; background: rgba(255,255,255,0.7); color: var(--color-text, var(--c-text)); }
.grat-input:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.grat-vis { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.grat-shelf { width: 100%; text-align: center; }
.grat-shelf__label { font-size: 0.8rem; color: rgba(var(--cwt-59-16-16), 0.7); }
.grat-shelf__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem; margin-top: 0.3rem; }
.grat-minijar { font-size: 1.6rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18)); }
.grat-jarwrap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; }
.grat-jar { width: min(440px, 96%); margin: 0 auto; }
.grat-jar__lid { width: 76%; height: 26px; margin: 0 auto -4px; background: linear-gradient(#caa37e, #b58a62); border-radius: 12px 12px 5px 5px; box-shadow: inset 0 -2px 3px rgba(0,0,0,0.2); }
.grat-jar__neck { width: 70%; height: 16px; margin: 0 auto -2px; background: rgba(255,255,255,0.32); border-left: 2px solid rgba(var(--c-accent-rgb), 0.35); border-right: 2px solid rgba(var(--c-accent-rgb), 0.35); }
.grat-jar__body { position: relative; width: 100%; height: min(440px, 52vh); min-height: 320px; margin: 0 auto; border: 2px solid rgba(var(--c-accent-rgb), 0.4); border-radius: 22px 22px 40px 40px; overflow: hidden; background: linear-gradient(105deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,0.5) 100%); box-shadow: inset 0 0 18px rgba(255,255,255,0.55); }
.grat-jar__body::before { content: ''; position: absolute; top: 12px; left: 18px; width: 20px; height: 68%; border-radius: 14px; background: linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0)); pointer-events: none; }
.grat-jar__papers { position: absolute; inset: 0; }
.grat-paper { position: absolute; width: 66px; height: 42px; background: linear-gradient(#fffdf6, #fdf0cf); border: 1px solid rgba(var(--c-accent-rgb), 0.28); border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.14); }
.grat-paper::after { content: ''; position: absolute; left: 6px; right: 6px; top: 9px; height: 2px; background: rgba(var(--c-accent-rgb), 0.28); box-shadow: 0 7px 0 rgba(var(--c-accent-rgb), 0.2), 0 14px 0 rgba(var(--c-accent-rgb), 0.14); }
.grat-jar__label { font-size: 0.84rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); }
.grat-jar__hint, .grat-jar__cheer { font-size: 0.82rem; text-align: center; }
.grat-jar__hint { color: rgba(var(--cwt-59-16-16), 0.7); }
.grat-jar__cheer { color: var(--color-accent, var(--c-accent)); font-weight: 700; }
.grat-listwrap { width: 100%; }
.grat-list { display: flex; flex-direction: column; gap: 0.4rem; }
.grat-note { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border: 1px solid rgba(var(--c-accent-rgb), 0.15); border-radius: 9px; background: rgba(var(--c-cream-rgb), 0.7); }
.grat-note__text { flex: 1; font-size: 0.88rem; }
.grat-note__date { font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.55); white-space: nowrap; }
.grat-note__del { background: none; border: none; cursor: pointer; color: rgba(var(--cwt-59-16-16), 0.5); font-size: 0.9rem; padding: 0 0.2rem; }
.grat-note__del:hover { color: #c0392b; }
.grat-prompt { margin-bottom: 0.6rem; }
.grat-reframes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; margin-bottom: 0.4rem; }
.grat-reframe { border: 1px solid rgba(var(--c-accent-rgb), 0.15); border-radius: 12px; background: rgba(var(--c-cream-rgb), 0.7); padding: 0.7rem; }
.grat-reframe__fixed { font-size: 0.85rem; color: rgba(var(--cwt-59-16-16), 0.6); margin: 0 0 0.3rem; }
.grat-reframe__growth { font-size: 0.9rem; color: var(--color-accent, var(--c-accent)); margin: 0; }
.grat-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; }
.grat-book { display: flex; flex-direction: column; gap: 0.15rem; }
.grat-book__title { font-size: 0.92rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); }
.grat-book__author { font-size: 0.78rem; color: rgba(var(--cwt-59-16-16), 0.6); }
.grat-book__take { font-size: 0.84rem; margin: 0.25rem 0 0.4rem; line-height: 1.35; }

/* 369 manifestation method. */
.m369-how { margin-bottom: 0.6rem; }
.m369-steps { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.86rem; line-height: 1.4; }
.m369-steps li { margin-bottom: 0.3rem; }
.m369-sessions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.m369-session--done { opacity: 0.7; }
.m369-session__head { display: flex; justify-content: space-between; align-items: center; }
.m369-session__title { font-weight: 700; color: var(--color-accent, var(--c-accent)); }
.m369-session__count { font-size: 0.8rem; color: rgba(var(--cwt-59-16-16), 0.6); }
.m369-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 0.5rem 0; }
.m369-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(var(--c-accent-rgb), 0.5); background: transparent; }
.m369-dot--on { background: var(--color-accent, var(--c-accent)); border-color: var(--color-accent, var(--c-accent)); }
.m369-write { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.m369-alldone { text-align: center; color: var(--color-accent, var(--c-accent)); font-weight: 700; font-size: 0.9rem; margin-top: 0.5rem; }
.vis__genactions { display: flex; gap: 0.4rem; }

/* Salon AI beauty studio (Make Up page → Hair / Nails / Skin / Makeup). */
.salon-tabs .salon-tab { padding: 0; overflow: hidden; }
.salon-tabs .salon-tab img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.salon-tabs .salon-tab--active { outline: 2px solid var(--color-accent, var(--c-accent)); outline-offset: -2px; border-radius: 10px; }
.salon { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* The salon page has no bottom tile row, so let its central frame span the central row AND the
   (otherwise empty) bottom-tiles row, filling the space down to the nav bar — no awkward gap. */
#makeupPage .look-page--rework > .look-photo-wrap { grid-row: 3 / 5; }
/* Sit in the framed central area like the Body & Spirit views: fill the .look-photo-wrap
   (which centers + clips its child) and scroll internally instead of overflowing the frame. */
.look-page--rework .look-photo-wrap > .salon {
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem;
  box-sizing: border-box;
}
.salon-panel { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; }
/* A bare class selector ties with [hidden] on specificity, so without this the hidden panels still
   render (display:flex) and stack on top of each other. Make hidden panels actually collapse so each
   salon tab REPLACES the central view instead of adding below. */
.salon-panel[hidden] { display: none; }
.salon-stage { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 52vh; margin: 0 auto; border: 2px solid rgba(var(--c-accent-rgb), 0.35); border-radius: 16px; overflow: hidden; background: rgba(var(--c-cream-rgb), 0.6); display: flex; align-items: center; justify-content: center; }
.salon-stage__img { width: 100%; height: 100%; object-fit: contain; background: #1c1622; }
.salon-stage__ph { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(var(--cwt-59-16-16), 0.6); text-align: center; padding: 1rem; }
.salon-stage__glyph { font-size: 2.6rem; }
.salon-stage__hint { font-size: 0.9rem; }
.salon-busy { text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--color-accent, var(--c-accent)); }
.salon-selectors { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.salon-field { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 140px; min-width: 0; }
.salon-field__label { font-size: 0.74rem; font-weight: 600; color: rgba(var(--cwt-59-16-16), 0.7); }
.salon-field__select { height: 36px; border: 1px solid rgba(var(--c-accent-rgb), 0.3); border-radius: 9px; padding: 0 0.5rem; font: inherit; font-size: 0.86rem; background: rgba(255,255,255,0.8); color: var(--color-text, var(--c-text)); }
.salon-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.salon-btn { border: none; border-radius: 10px; padding: 0.5rem 0.9rem; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.salon-btn:disabled { opacity: 0.5; cursor: default; }
.salon-btn--primary { background: var(--color-accent, var(--c-accent)); color: #fff; flex: 1 1 auto; }
.salon-btn--ghost { background: rgba(var(--c-accent-rgb), 0.12); color: var(--color-accent, var(--c-accent)); }
.salon-msg { font-size: 0.84rem; color: var(--color-accent, var(--c-accent)); text-align: center; }
.salon-msg--error { color: #c0392b; }
.salon-looks { margin-top: 0.3rem; }
.salon-looks__title { font-size: 0.86rem; margin: 0 0 0.3rem; color: var(--color-accent, var(--c-accent)); }
.salon-looks__row { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.3rem; min-height: 84px; }
.salon-looks__empty { font-size: 0.8rem; color: rgba(var(--cwt-59-16-16), 0.55); }
.salon-look { position: relative; flex: 0 0 auto; width: 64px; }
.salon-look__img { width: 64px; height: 80px; object-fit: cover; border-radius: 9px; border: 1px solid rgba(var(--c-accent-rgb), 0.3); cursor: pointer; background: #1c1622; }
.salon-look__tag { position: absolute; bottom: 2px; left: 2px; font-size: 0.6rem; background: rgba(0,0,0,0.55); color: #fff; padding: 0 4px; border-radius: 4px; text-transform: capitalize; }
.salon-look__del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #c0392b; color: #fff; font-size: 0.7rem; line-height: 1; cursor: pointer; }
.salon-looks__hint { font-size: 0.74rem; color: rgba(var(--cwt-59-16-16), 0.55); margin: 0.3rem 0 0; }
.salon-stage--skin { aspect-ratio: auto; height: 130px; min-height: 130px; max-height: 130px; margin-bottom: 0.6rem; background: linear-gradient(135deg, rgba(var(--c-cream-rgb), 0.8), rgba(var(--c-primary-rgb), 0.15)); border-color: rgba(var(--c-accent-rgb), 0.25); }
.salon-skin__intro { font-size: 0.88rem; margin: 0 0 0.4rem; color: rgba(var(--cwt-59-16-16), 0.75); }
.salon-skin__out { display: flex; flex-direction: column; gap: 0.6rem; overflow-y: auto; margin-top: 0.6rem; }
.salon-skin__card { border: 1px solid rgba(var(--c-accent-rgb), 0.18); border-radius: 12px; background: rgba(255, 255, 255, 0.85); padding: 0.75rem 0.9rem; box-shadow: 0 2px 8px rgba(0,0,0,0.02); transition: transform 0.2s ease; }
.salon-skin__card:hover { transform: translateY(-1px); background: #ffffff; }
.salon-skin__head { font-size: 0.92rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--color-accent, var(--c-accent)); }
.salon-skin__list { margin: 0; padding-left: 1.2rem; font-size: 0.86rem; line-height: 1.5; color: var(--color-text, var(--c-text)); }
.salon-skin__list li { margin-bottom: 0.3rem; }

/* Travel → Deals tab + price tracker. */
.plan-deals { display: flex; flex-direction: column; min-height: 0; }
.plan-deals__bar { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.plan-deals__bar .plan-trip__input { flex: 1 1 8rem; }
.plan-deals__results { display: flex; flex-direction: column; gap: 0.4rem; overflow-y: auto; }
.plan-deal { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.55rem; border: 1px solid rgba(var(--c-accent-rgb), 0.15); border-radius: 9px; background: rgba(var(--c-cream-rgb), 0.7); }
.plan-deal__info { flex: 1; min-width: 0; }
.plan-deal__dest { font-size: 0.88rem; font-weight: 600; color: var(--color-accent, var(--c-accent)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-deal__meta { font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-deal__price { flex: 0 0 auto; font-weight: 700; font-size: 0.92rem; color: var(--color-primary-dark, var(--c-primary-dark)); }
.plan-deal__actions { flex: 0 0 auto; display: flex; gap: 0.3rem; }
.plan-deal__book, .plan-deal__track, .plan-deal__pkg { border-radius: 6px; font-size: 0.74rem; font-weight: 600; padding: 0.25rem 0.5rem; cursor: pointer; white-space: nowrap; text-decoration: none; }
.plan-deal__book { background: var(--color-primary, var(--c-primary)); color: #fff; border: none; }
.plan-deal__pkg { background: rgba(var(--c-primary-rgb), 0.12); border: 1px solid rgba(var(--c-primary-rgb), 0.35); color: var(--color-primary-dark, var(--c-primary-dark)); }
.plan-deal__pkg:hover { background: rgba(var(--c-primary-rgb), 0.22); }
.plan-deal__track { background: transparent; border: 1px solid rgba(var(--c-accent-rgb), 0.3); color: var(--color-accent, var(--c-accent)); }
.plan-deal__track:hover { background: rgba(var(--c-primary-rgb), 0.12); }
.plan-deals__subhead { font-size: 0.86rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); margin: 0.8rem 0 0.2rem; }
.plan-deals__hint { font-size: 0.74rem; color: rgba(var(--cwt-59-16-16), 0.6); margin: 0 0 0.4rem; }
.plan-deals__watches { display: flex; flex-direction: column; gap: 0.35rem; }
.plan-watch { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border: 1px dashed rgba(var(--c-primary-rgb), 0.35); border-radius: 8px; }
.plan-watch__info { flex: 1; min-width: 0; }
.plan-watch__dest { font-size: 0.84rem; font-weight: 600; }
.plan-watch__meta { font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.6); }
.plan-watch__del { flex: 0 0 auto; border: none; background: transparent; color: var(--color-accent, var(--c-accent)); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.plan-watch__del:hover { color: var(--cw-a12222); }
.plan-rec-btn {
    border: none; border-radius: 7px; background: var(--color-primary, var(--cw-c98b7e)); color: #fff; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 0.8rem; padding: 0.32rem 0.7rem; white-space: nowrap; flex: 0 0 auto;
}
.plan-rec-btn:hover { background: var(--color-primary-dark, var(--c-primary-dark)); }
.plan-rec-btn:disabled { opacity: 0.6; cursor: default; }
.plan-rec-suggestions { display: flex; flex-direction: column; gap: 0.3rem; flex: 0 0 auto; max-height: 40%; overflow-y: auto; margin-bottom: 0.3rem; }
.plan-rec-status { font-size: 0.8rem; color: rgba(var(--cwt-59-16-16), 0.6); padding: 0.3rem 0.1rem; }
.plan-rec-card {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.45rem; border-radius: 8px;
    border: 1px solid rgba(var(--c-accent-rgb), 0.12); background: rgba(var(--c-cream-rgb), 0.75);
}
.plan-rec-card.is-added { opacity: 0.6; }
.plan-rec-info { flex: 1; min-width: 0; }
.plan-rec-title { font-size: 0.82rem; font-weight: 600; color: var(--color-accent, var(--c-accent)); }
.plan-rec-why { font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.6); }
.plan-rec-add {
    flex: 0 0 auto; border: 1px solid var(--color-primary, var(--cw-c98b7e)); border-radius: 6px; background: transparent;
    color: var(--color-primary-dark, var(--c-primary-dark)); cursor: pointer; font: inherit; font-weight: 600; font-size: 0.74rem; padding: 0.25rem 0.55rem;
}
.plan-rec-add:hover:not(:disabled) { background: var(--color-primary, var(--cw-c98b7e)); color: #fff; }
.plan-rec-add:disabled { cursor: default; }
/* Calendar day pop-up: list of all events on the clicked day. */
.gcal__daydialog { min-width: min(92vw, 360px); }
.gcal__day-cycle { color: var(--cw-c98b7e, #c98b7e); }
.gcal__day-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 46vh; overflow-y: auto; margin: 0.5rem 0; }
.gcal__day-event {
    display: flex; align-items: baseline; gap: 0.55rem; width: 100%; text-align: left; cursor: pointer;
    border: 1px solid rgba(var(--c-accent-rgb), 0.15); border-radius: 8px; background: rgba(var(--c-cream-rgb), 0.7);
    padding: 0.4rem 0.55rem; font: inherit; color: var(--color-text, var(--c-text));
}
.gcal__day-event:hover { background: rgba(var(--c-primary-rgb), 0.12); border-color: rgba(var(--c-primary-rgb), 0.3); }
.gcal__day-event .gcal__event-time { flex: 0 0 auto; font-size: 0.74rem; color: var(--color-accent, var(--c-accent)); min-width: 3.4rem; }
.gcal__day-event .gcal__event-title { flex: 1; min-width: 0; font-size: 0.86rem; }
.gcal__day-none { color: rgba(var(--cwt-59-16-16), 0.55); font-size: 0.85rem; margin: 0.6rem 0; text-align: center; }

.plan-item__reviews {
    flex: 0 0 auto; border: 1px solid rgba(var(--c-accent-rgb), 0.2); border-radius: 6px; background: transparent;
    color: var(--color-accent, var(--c-accent)); cursor: pointer; font: inherit; font-size: 0.7rem; padding: 0.12rem 0.4rem; white-space: nowrap;
}
.plan-item__reviews:hover { background: rgba(var(--c-primary-rgb), 0.2); }
.plan-review-card {
    border: 1px solid rgba(var(--c-accent-rgb), 0.14); border-radius: 9px; background: rgba(var(--c-cream-rgb), 0.85); padding: 0.5rem 0.6rem;
}
.plan-review-title { font-size: 0.85rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); }
.plan-review-scores { font-size: 0.8rem; font-weight: 600; color: var(--color-text, var(--c-text)); margin: 0.2rem 0; }
.plan-review-summary { font-size: 0.78rem; color: rgba(var(--cwt-59-16-16), 0.8); line-height: 1.4; }
.plan-review-sources { font-size: 0.68rem; margin-top: 0.3rem; }
.plan-review-sources a { color: var(--color-primary-dark, var(--c-primary-dark)); text-decoration: none; }
.plan-review-sources a:hover { text-decoration: underline; }
/* Planner reminder/notification tiles: filled background, centred content, larger text. */
.plan-reminders .plan-reminder {
    background: linear-gradient(rgba(var(--c-primary-rgb), 0.16), rgba(var(--c-primary-rgb), 0.16)), var(--c-card);
    border: 1px solid rgba(var(--c-accent-rgb), 0.22);
}
.plan-reminders .plan-reminder:not(.plan-reminder--empty):hover,
.plan-reminders .plan-reminder:not(.plan-reminder--empty):focus-visible {
    background: linear-gradient(rgba(var(--c-primary-rgb), 0.28), rgba(var(--c-primary-rgb), 0.28)), var(--c-card);
    border-color: rgba(var(--c-accent-rgb), 0.38);
}
/* Override the small top-left caption chip so it fills the tile and centres. */
.plan-reminders .look-item-tile__caption {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.3rem;
    line-height: 1.25;
    background: transparent;
    padding: 0.5rem 0.45rem;
    border-radius: 0;
    font-size: 1.05rem;
}
.plan-reminder__cap { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; line-height: 1.25; }
.plan-reminders .plan-reminder__title {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.25;
    white-space: normal;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plan-reminders .plan-reminder__when { font-size: 0.95rem; opacity: 0.85; }
.plan-reminder--empty { opacity: 0.6; }
.plan-reminders .plan-reminder:not(.plan-reminder--empty) { cursor: pointer; }

/* List sub-tabs reuse .cp-tabs / .cp-tab classes (see control-panel tabs). */
.plan-lists-body { flex: 1; min-height: 0; display: flex; }
.plan-listview { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }
.plan-listview[hidden] { display: none !important; }

/* Travel panel */
.plan-travel .plan-travel-note { text-align: center; color: rgba(var(--cwt-59-16-16), 0.6); font-size: 0.85rem; margin-top: auto; }

/* Weather emoji in the corner of a calendar day cell */
.gcal__cell { position: relative; }
/* Weather icon as a large faded background filling the calendar day cell. */
.gcal__wx {
    position: absolute; inset: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.4rem, 3.4vw, 2.6rem); line-height: 1;
    opacity: 0.4; z-index: 0; pointer-events: none;
}

/* Cycle markers (little flowers) in the corner of a calendar day cell. */
.gcal__cyc {
    position: absolute; bottom: 1px; right: 2px; z-index: 1; line-height: 1;
    font-size: clamp(0.6rem, 1.6vw, 0.9rem); pointer-events: none;
}
.gcal__cell.has-cyc.gcal__cyc--period { }
.gcal__cell.has-cyc::after { content: none; }

/* ── Cycle tab (Planner → Calendar → Cycle) ─────────────────────────── */
.plan-cycle { display: flex; flex-direction: column; min-height: 0; }
.plan-cycle__status { text-align: left; font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.6); }
.plan-cycle__body { display: flex; flex-direction: column; gap: 0.7rem; flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.2rem; }
.plan-cycle__foot { flex: 0 0 auto; display: flex; justify-content: flex-start; padding: 0.3rem 0.2rem 0; min-height: 1em; }
.plan-cycle__intro {
    font-family: var(--font-serif, Georgia, serif); font-size: 0.86rem; line-height: 1.4;
    color: rgba(var(--cwt-59-16-16), 0.8); margin: 0;
}
.plan-cycle__cards { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plan-cycle__card {
    flex: 1 1 130px; min-width: 120px; display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.55rem 0.6rem; border-radius: 12px;
    background: rgba(var(--c-accent-rgb), 0.06); border: 1px solid rgba(var(--c-accent-rgb), 0.14);
}
.plan-cycle__card-glyph { font-size: 1.25rem; line-height: 1; }
.plan-cycle__card-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(var(--cwt-59-16-16), 0.55); }
.plan-cycle__card-val { font-weight: 700; font-size: 0.92rem; color: var(--color-accent, var(--c-accent)); }
.plan-cycle__log { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.45rem; }
.plan-cycle__field { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.74rem; color: rgba(var(--cwt-59-16-16), 0.7); }
.plan-cycle__date, .plan-cycle__num {
    border: 1px solid rgba(var(--c-accent-rgb), 0.2); border-radius: 6px; padding: 0.28rem 0.45rem;
    font: inherit; font-size: 0.85rem; color: var(--color-text, var(--c-text)); background: rgba(255, 255, 255, 0.6);
}
.plan-cycle__num { width: 5.5rem; }
.plan-cycle__btn {
    border: none; border-radius: 20px; padding: 0.4rem 0.9rem; font: inherit; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; background: var(--color-accent, var(--c-accent)); color: #fff;
}
.plan-cycle__btn--ghost { background: transparent; color: var(--color-accent, var(--c-accent)); border: 1px solid rgba(var(--c-accent-rgb), 0.35); }
.plan-cycle__btn:hover { filter: brightness(1.05); }
.plan-cycle__legend { display: flex; flex-wrap: wrap; gap: 0.7rem; font-size: 0.74rem; color: rgba(var(--cwt-59-16-16), 0.7); }
.plan-cycle__subhead { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(var(--cwt-59-16-16), 0.55); margin-bottom: 0.25rem; }
.plan-cycle__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.plan-cycle__hitem {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.2rem 0.2rem 0.55rem;
    border-radius: 16px; background: rgba(var(--c-accent-rgb), 0.08); font-size: 0.8rem;
}
.plan-cycle__del {
    border: none; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1;
    color: rgba(var(--cwt-59-16-16), 0.5); padding: 0 0.25rem; border-radius: 50%;
}
.plan-cycle__del:hover { color: var(--color-accent, var(--c-accent)); }
.plan-cycle__empty { font-size: 0.8rem; color: rgba(var(--cwt-59-16-16), 0.5); list-style: none; }
.plan-cycle__settings summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--color-accent, var(--c-accent)); }
.plan-cycle__setgrid { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.plan-cycle__check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: rgba(var(--cwt-59-16-16), 0.8); }
.plan-cycle__note { font-size: 0.72rem; font-style: italic; color: rgba(var(--cwt-59-16-16), 0.5); margin: 0.2rem 0 0; }
.gcal__connect {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    padding: 1rem;
}
.gcal__glyph { font-size: 3rem; line-height: 1; }
.gcal__text {
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 0.95rem;
    max-width: 26ch;
    margin: 0;
}
.gcal__connectbtn { white-space: nowrap; }
.gcal__hint { font-size: 0.8rem; min-height: 1em; margin: 0; opacity: 0.85; }

.gcal__view { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow-y: auto; }
.gcal__bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}
.gcal__title {
    flex: 1;
    text-align: center;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-weight: 600;
    font-size: 0.95rem;
}
.gcal__navbtn {
    border: 0;
    background: rgba(255, 255, 255, 0.55);
    color: var(--c-accent);
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.gcal__navbtn:hover { background: rgba(255, 255, 255, 0.85); }
.gcal__refresh { font-size: 0.9rem; }

.gcal__weekdays,
.gcal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.gcal__weekdays { flex: 0 0 auto; }
.gcal__grid { grid-auto-rows: 1fr; flex: 1 1 auto; min-height: 0; }
.gcal__weekday {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
    padding-bottom: 2px;
}
.gcal__cell {
    position: relative;
    border: 0;
    background: rgba(255, 255, 255, 0.4);
    color: var(--c-accent);
    min-height: 2.9rem;
    border-radius: 6px;
    font-size: 0.72rem;
    cursor: pointer;
    padding: 1px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    overflow: hidden;
    text-align: left;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.gcal__cell:hover { background: rgba(255, 255, 255, 0.7); }
.gcal__cell--empty { background: transparent; cursor: default; }
.gcal__daynum { padding: 1px 2px 0; line-height: 1.1; font-size: 0.62rem; opacity: 0.85; position: relative; z-index: 1; }
.gcal__cell.is-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--cw-a3563f); }
.gcal__cell.is-selected { box-shadow: inset 0 0 0 2px var(--cw-7a2f1d); background: rgba(var(--cwt-163-86-63), 0.16); }
.gcal__cell.has-events .gcal__dot {
    position: absolute;
    right: 3px;
    bottom: 2px;
    z-index: 1;
    min-width: 0.7rem;
    height: 0.7rem;
    padding: 0 0.15rem;
    border-radius: 0.7rem;
    background: var(--cw-7a2f1d);
    color: #fff;
    font-size: 0.55rem;
    line-height: 0.7rem;
    text-align: center;
}
.gcal__cell.is-selected.has-events .gcal__dot { background: #fff; color: var(--cw-7a2f1d); }

.gcal__chip {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--cw-a3563f);
    color: #fff;
    border-radius: 3px;
    padding: 0 3px;
    font-size: 0.55rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.gcal__chip--allday { background: var(--cw-7a2f1d); }
.gcal__chip:hover { filter: brightness(1.12); }
.gcal__more { font-size: 0.5rem; color: var(--cw-7a2f1d); cursor: pointer; padding-left: 2px; position: relative; z-index: 1; }

/* Event details pop-up (read-only summary with Edit / Delete). */
dialog.gcal__details {
    border: 0;
    border-radius: 14px;
    padding: 1.1rem;
    width: min(360px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    color: var(--c-accent);
    background: var(--c-card);
    box-shadow: 0 16px 48px rgba(20, 10, 10, 0.4);
    font-family: var(--font-sans, system-ui, "Segoe UI", sans-serif);
}
dialog.gcal__details[open] { display: flex; flex-direction: column; gap: 0.5rem; }
dialog.gcal__details::backdrop { background: rgba(20, 10, 10, 0.5); backdrop-filter: blur(2px); }
.gcal__details-title { margin: 0; font-family: var(--font-serif, Georgia, "Times New Roman", serif); font-size: 1.1rem; font-weight: 600; }
.gcal__details-line { margin: 0; font-size: 0.85rem; }
.gcal__details-desc { margin: 0.2rem 0 0; font-size: 0.82rem; white-space: pre-wrap; opacity: 0.9; }

.gcal__events {
    flex: 0 0 auto;
    max-height: 2rem;
    overflow-y: auto;
    margin-top: 0.3rem;
    padding-right: 2px;
    font-size: 0.72rem;
    text-align: center;
}
.gcal__events-head {
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    position: sticky;
    top: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.5));
    padding: 2px 0;
}
.gcal__event {
    display: flex;
    gap: 0.4rem;
    font-size: 0.72rem;
    padding: 0.2rem 0.1rem;
    border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.12);
}
.gcal__event--none { opacity: 0.7; border-bottom: 0; }
.gcal__event-time { flex: 0 0 3.6rem; font-variant-numeric: tabular-nums; opacity: 0.85; }
.gcal__event-title { flex: 1; }
.gcal__event--clickable { cursor: pointer; border-radius: 4px; }
.gcal__event--clickable:hover { background: rgba(255, 255, 255, 0.55); }
.gcal__add { font-weight: 700; }

/* Event editor — a centered modal pop-up (native <dialog>), not affected by the
   calendar's small size or the book-page transforms. */
dialog.gcal__editor {
    border: 0;
    border-radius: 14px;
    padding: 1.1rem 1.1rem 1rem;
    width: min(360px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    color: var(--c-accent);
    background: var(--c-card);
    box-shadow: 0 16px 48px rgba(20, 10, 10, 0.4);
    font-family: var(--font-sans, system-ui, "Segoe UI", sans-serif);
}
dialog.gcal__editor[open] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
dialog.gcal__editor::backdrop {
    background: rgba(20, 10, 10, 0.5);
    backdrop-filter: blur(2px);
}
.gcal__editor-title {
    margin: 0 0 0.2rem;
    font-family: var(--font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.05rem;
    font-weight: 600;
}
.gcal__input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(var(--c-accent-rgb), 0.25);
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    color: var(--c-accent);
    background: #fff;
    font-family: inherit;
}
.gcal__check { font-size: 0.75rem; display: flex; align-items: center; gap: 0.35rem; }
.gcal__times { display: flex; align-items: center; gap: 0.4rem; }
.gcal__times .gcal__input { flex: 1; }
.gcal__dash { opacity: 0.6; }
.gcal__editor-actions { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.15rem; flex-wrap: wrap; }
.gcal__editor-actions .btn { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.gcal__textbtn {
    border: 1px solid rgba(var(--c-accent-rgb), 0.25);
    background: rgba(255, 255, 255, 0.7);
    color: var(--c-accent);
    border-radius: 6px;
    padding: 0.38rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
}
.gcal__textbtn:hover { background: #fff; }
.gcal__textbtn--danger { color: var(--cw-b3261e); border-color: rgba(var(--cwt-179-38-30), 0.4); }
.gcal__editor-msg { font-size: 0.72rem; min-height: 1em; margin: 0; color: var(--cw-7a2f1d); }

/* Calendar access toggle (profile page). */
.gcal-access__row { display: flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0; }
.gcal-toggle { position: relative; display: inline-flex; cursor: pointer; }
.gcal-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.gcal-toggle__track {
    width: 42px; height: 24px; border-radius: 12px; display: inline-block; position: relative;
    background: rgba(var(--c-accent-rgb), 0.25); transition: background 0.2s ease;
}
.gcal-toggle__thumb {
    position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease;
}
.gcal-toggle input:checked + .gcal-toggle__track { background: var(--cw-a3563f); }
.gcal-toggle input:checked + .gcal-toggle__track .gcal-toggle__thumb { transform: translateX(18px); }
.gcal-toggle input:focus-visible + .gcal-toggle__track { outline: 2px solid var(--cw-a3563f); outline-offset: 2px; }
.gcal-access__status { font-size: 0.85rem; opacity: 0.85; }
/* Tile styles for placeholder pages are shared via .look-page--rework
   .look-item-tile / .look-item-tile--nolink above. No per-page overrides. */

/* Layout (grid, item-row, tile, photo-wrap, photo, caption) is shared
   with saved-look pages via the .look-page--rework selectors above. */


/* ===================== Control Panel page ===================== */
#controlPanelPage {
    padding: 0;
    /* Same parchment gradient as the <body>, but painted across the full
       viewport (100vw x 100vh, centred) instead of the page's own narrower,
       aspect-locked box. Because the page is centred in the viewport, this
       makes its colour stops line up exactly with the fixed body gradient, so
       the page reads as a seamless continuation of the background instead of a
       detached panel with a visible seam at its edges. */
    background: linear-gradient(135deg, var(--cw-e8cfc4) 0%, var(--cw-dfc4be) 25%, var(--cw-d4b0a8) 50%, var(--cw-e5cfc5) 75%, var(--cw-f2e6dc) 100%);
    background-size: 100vw 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.control-panel {
    display: grid;
    /* 5-row grid matching .look-page--rework: top spacer / top tiles /
       central panel / bottom tiles / bottom spacer (for unified nav+badge). */
    grid-template-rows: 6cqh 14cqh 1fr 14cqh 6cqh;
    gap: 1.5cqh;
    height: 100%;
    padding: 1cqh 2cqmin 1cqh;
    box-sizing: border-box;
    overflow: hidden;
}
.control-panel__header {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.7rem;
    align-items: center;
    margin: 0;
}
.control-panel__back { padding: 0.3rem 0.65rem; font-size: 0.82rem; }
.control-panel__titles { min-width: 0; }
.control-panel__title { margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.4rem); }
.control-panel__subtitle { margin: 0; font-size: 0.74rem; color: var(--cw-7a5b5b); }

.control-panel__tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2cqw;
    align-items: stretch;
    justify-items: stretch;
    min-height: 0;
}
/* Inside the Control Panel, reuse profile-image-card visuals but stretch
   to fill the grid cell so widths/heights match the look-page tile rows. */
#controlPanelPage .profile-image-card {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    box-sizing: border-box;
}
#controlPanelPage .profile-image-card > img {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    object-fit: cover;
    display: block;
}
#controlPanelPage .profile-image-card--disabled {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.2);
}

.control-panel__chat {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(var(--c-shadow-rgb),0.18);
    border-radius: 0 0 16px 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(var(--c-shadow-rgb),0.12);
    overflow: hidden;
}

/* ---- Central panel tabs (Help / Chat / Profile) ---- */
.control-panel__central {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overflow: hidden;
}
.cp-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 0;
    align-items: stretch;
    padding: 0;
}
.cp-tab {
    flex: 1 1 0;
    appearance: none;
    border: 1px solid rgba(var(--c-shadow-rgb),0.18);
    background: rgba(255,255,255,0.55);
    color: var(--cw-5a2020);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 0.7rem;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.cp-tab:hover { background: rgba(255,255,255,0.85); }
.cp-tab:focus-visible { outline: 2px solid var(--cw-ffb84d); outline-offset: 2px; }
.cp-tab--active {
    background: rgba(255,255,255,0.92);
    color: var(--cw-3d1010);
    box-shadow: 0 -2px 0 var(--cw-5a2020) inset;
}
.cp-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    display: none;
}
.cp-tab-panel--active { display: flex; flex-direction: column; }
.cp-tab-panel[hidden] { display: none !important; }
.cp-tab[hidden] { display: none !important; }
/* Tab panels connect flush to the tab strip above (cancel the flex gap). */
.cp-tab-panel { margin-top: calc(-0.55rem - 1px); }

/* ---- Help tab: video + topic list ---- */
.cp-help {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 0.6rem;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(var(--c-shadow-rgb),0.18);
    border-radius: 0 0 16px 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(var(--c-shadow-rgb),0.12);
    overflow: hidden;
}
.cp-help__video { display: flex; flex-direction: column; min-width: 0; gap: 0.4rem; }
.cp-help__video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    z-index: 1;
}
.cp-help__video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* Promote the iframe to its own compositing layer. Without this, the
       3D-transformed ancestor (.book-page uses preserve-3d +
       backface-visibility:hidden) makes the iframe non-interactive in
       Chromium, so YouTube controls don't receive clicks. */
    transform: translateZ(0);
    pointer-events: auto;
}

/* Click-to-play facade (avoids embedding an iframe inside the 3D book-page,
   which renders black/unclickable in Chromium). */
.cp-help__video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s ease;
}
.cp-help__video-facade:hover { filter: brightness(1.08); }
.cp-help__video-facade:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.cp-help__play {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.cp-help__video-facade:hover .cp-help__play {
    background: var(--cw-ff0000);
    transform: scale(1.06);
}
.cp-help__play::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: 5px;
    border-style: solid;
    border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent #fff;
}

/* Fullscreen video lightbox, appended to <body> (outside any 3D transform). */
.cp-video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.cp-video-lightbox__inner {
    position: relative;
    width: min(960px, 100%);
}
.cp-video-lightbox__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
.cp-video-lightbox__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.cp-video-lightbox__close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-video-lightbox__close:hover { background: rgba(255,255,255,0.3); }
.cp-help__caption {
    margin: 0;
    font-size: 0.82rem;
    color: var(--cw-5a2020);
}
.cp-help__topics {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.cp-help__topic {
    appearance: none;
    width: 100%;
    text-align: left;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(var(--c-shadow-rgb),0.18);
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
    font-family: inherit;
    font-size: 0.84rem;
    color: var(--cw-3d1010);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.cp-help__topic:hover { background: rgba(255,255,255,0.95); transform: translateX(2px); }
.cp-help__topic--active {
    background: rgba(var(--cwt-255-220-180), 0.9);
    border-color: rgba(var(--c-shadow-rgb),0.4);
}
@media (max-width: 720px) {
    .cp-help { grid-template-columns: 1fr; }
}

/* ---- Profile tab ---- */
.cp-profile {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(var(--c-shadow-rgb),0.18);
    border-radius: 0 0 16px 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(var(--c-shadow-rgb),0.12);
    container-type: inline-size;
    container-name: cpprofile;
}
.cp-profile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.cp-profile__title { font-weight: 600; color: var(--cw-3d1010); font-size: 1rem; }
.cp-profile__list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.8rem;
}
.cp-profile__list > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.55rem;
    background: rgba(var(--c-cream-rgb), 0.7);
    border: 1px solid rgba(var(--c-shadow-rgb),0.12);
    border-radius: 8px;
}
.cp-profile__list dt { font-size: 0.72rem; color: var(--cw-7a5b5b); text-transform: uppercase; letter-spacing: 0.04em; }
.cp-profile__list dd { margin: 0; font-size: 0.92rem; color: var(--cw-3d1010); font-weight: 600; }
.cp-profile__hint { margin: 0; font-size: 0.78rem; color: var(--cw-7a5b5b); }

/* Profile-edit grid: each parameter shown as a fluid square tile. The base
   uses clamp() so tiles smoothly shrink with the panel width, and container
   queries (below) further tune density/padding for very narrow panels. */
.cp-profile__fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: clamp(0.35rem, 1.5cqw, 0.75rem);
}
.cp-profile__fieldset > .form-row--wide[data-profile-tile="description"] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.cp-profile__fieldset > .form-row--wide[data-profile-tile="description"] > .profile-description {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    margin: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Keep the fieldset inside .cp-profile.cp-profile--full: outer panel never
   scrolls; fieldset itself takes the remaining vertical space and scrolls
   internally if content overflows, so it stays flush with the panel bottom. */
.cp-profile.cp-profile--full {
    overflow: hidden;
}
.cp-profile.cp-profile--full > .cp-profile__fieldset {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    padding-right: 0.25rem;
    scrollbar-gutter: stable;
}
.cp-profile__fieldset > .form-row.credits-row,
.cp-profile__fieldset > .form-row--wide,
.cp-profile__fieldset > .cp-profile__actions,
.cp-profile__fieldset > .form-hint,
.cp-profile__fieldset > .text-muted {
    grid-column: 1 / -1;
}

.cp-profile__fieldset > .form-row[data-profile-tile] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.3rem, 1cqw, 0.5rem);
    padding: clamp(0.45rem, 1.5cqw, 0.7rem) clamp(0.5rem, 1.6cqw, 0.75rem);
    background: rgba(var(--c-cream-rgb), 0.85);
    border: 1px solid rgba(var(--c-shadow-rgb), 0.18);
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    min-height: clamp(110px, 26cqw, 170px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(var(--c-shadow-rgb), 0.08);
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    /* Each tile is its own sizing context so the picker inside scales with
       the tile itself, not with the outer profile panel. */
    container-type: inline-size;
    container-name: profiletile;
}
.cp-profile__fieldset > .form-row[data-profile-tile]:hover,
.cp-profile__fieldset > .form-row[data-profile-tile]:focus-within {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 14px rgba(var(--c-shadow-rgb), 0.15);
}
.cp-profile__fieldset > .form-row[data-profile-tile] > label {
    margin: 0;
    font-size: clamp(0.7rem, 1.8cqw, 0.82rem);
    font-weight: 700;
    color: var(--c-shadow);
    text-align: center;
    line-height: 1.2;
}
.cp-profile__fieldset > .form-row[data-profile-tile] > br { display: none; }
.cp-profile__fieldset > .form-row[data-profile-tile] .profile-tile__body {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    width: 100%;
}
.cp-profile__fieldset > .form-row[data-profile-tile] .swatch-picker,
.cp-profile__fieldset > .form-row[data-profile-tile] .bubble-picker,
.cp-profile__fieldset > .form-row[data-profile-tile] .body-shape-picker {
    width: 100%;
    margin-top: 0;
    min-height: 0;
    gap: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Fluid picker surfaces — sized off the tile's own width via the
   `profiletile` container so they stay proportional at every breakpoint. */
.cp-profile__fieldset > .form-row[data-profile-tile] .swatch-picker__preview,
.cp-profile__fieldset > .form-row[data-profile-tile] .bubble-picker__preview,
.cp-profile__fieldset > .form-row[data-profile-tile] .body-shape-picker__preview {
    width: clamp(40px, 60cqw, 96px);
    height: clamp(40px, 60cqw, 96px);
    min-height: 0;
}
.cp-profile__fieldset > .form-row[data-profile-tile] .swatch-picker__chip {
    width: clamp(22px, 38cqw, 50px);
    height: clamp(22px, 38cqw, 50px);
}
.cp-profile__fieldset > .form-row[data-profile-tile] .swatch-picker__hint,
.cp-profile__fieldset > .form-row[data-profile-tile] .bubble-picker__hint,
.cp-profile__fieldset > .form-row[data-profile-tile] .body-shape-picker__label {
    font-size: clamp(0.55rem, 7cqw, 0.72rem);
    max-width: clamp(40px, 78cqw, 96px);
}
.cp-profile__fieldset > .form-row[data-profile-tile] .bubble-picker__glyph,
.cp-profile__fieldset > .form-row[data-profile-tile] .sex-picker__glyph {
    font-size: clamp(16px, 28cqw, 34px);
}
.cp-profile__fieldset > .form-row[data-profile-tile] .body-shape-picker__icon {
    width: clamp(16px, 24cqw, 32px);
    height: clamp(22px, 36cqw, 46px);
}
.cp-profile__fieldset > .form-row[data-profile-tile] .sex-option {
    width: clamp(40px, 46cqw, 64px);
    height: clamp(48px, 56cqw, 72px);
}
.cp-profile__fieldset > .form-row[data-profile-tile] .sex-option__glyph {
    font-size: clamp(18px, 26cqw, 30px);
}
.cp-profile__fieldset > .form-row[data-profile-tile] .sex-option__label {
    font-size: clamp(0.5rem, 6cqw, 0.66rem);
}
.cp-profile__fieldset > .form-row[data-profile-tile] .skin-tone-label {
    font-size: clamp(0.55rem, 6cqw, 0.76rem);
    text-align: center;
    color: var(--c-shadow);
}
.cp-profile__fieldset > .form-row[data-profile-tile] .bubble-picker__panel input[type="date"],
.cp-profile__fieldset > .form-row[data-profile-tile] .bubble-picker__panel input[type="text"],
.cp-profile__fieldset > .form-row[data-profile-tile] .bubble-picker__panel input[type="number"] {
    font-size: clamp(0.7rem, 7cqw, 0.92rem);
    padding: clamp(2px, 1.5cqw, 6px) clamp(4px, 2cqw, 8px);
    max-width: 100%;
    min-width: 0;
}

/* Description tile: full-width, textarea fills the tile */
.cp-profile__fieldset > .form-row--wide {
    aspect-ratio: auto;
    min-height: 0;
    padding: 0.7rem 0.8rem;
    background: rgba(var(--c-cream-rgb), 0.85);
    border: 1px solid rgba(var(--c-shadow-rgb), 0.18);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.cp-profile__fieldset > .form-row--wide > label {
    margin: 0;
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c-shadow);
}
.cp-profile__fieldset > .form-row--wide .profile-tile__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
.cp-profile__fieldset > .form-row--wide textarea {
    width: 100%;
    flex: 1 1 auto;
    min-height: 90px;
    height: 100%;
    resize: vertical;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    font-size: 0.92rem;
    line-height: 1.4;
    border: 1px solid rgba(var(--c-shadow-rgb), 0.25);
    border-radius: 8px;
    background: #fffdf8;
    display: block;
}

/* Read-only description rendered as a <p> directly inside .form-row--wide. */
.cp-profile__fieldset > .form-row--wide[data-profile-tile="description"] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
.cp-profile__fieldset > .form-row--wide .profile-description {
    margin: 0;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--cw-3d1010);
    border: 1px solid rgba(var(--c-shadow-rgb), 0.18);
    border-radius: 8px;
    background: #fffdf8;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.cp-profile__fieldset > .form-row--wide .profile-description:empty::before {
    content: "No description yet.";
    color: var(--cw-9a7b7b);
    font-style: italic;
}

/* Save / Delete actions: pin to opposite corners so Delete isn't accidentally clicked */
.cp-profile__fieldset > .cp-profile__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.cp-profile__fieldset > .cp-profile__actions > #saveProfileBtn { margin-right: auto; }
.cp-profile__fieldset > .cp-profile__actions > #deleteProfileBtn { margin-left: auto; }

/* Description tile: ensure it spans full width and is NOT square. Need
   matching specificity to beat the generic `[data-profile-tile]` tile rule. */
.cp-profile__fieldset > .form-row.form-row--wide[data-profile-tile="description"] {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    align-self: stretch;
}

/* ── Responsive: profile tiles shrink + relax aspect-ratio on small panels.
   Use container queries so the layout reacts to the panel width, not the
   viewport — the control panel can be narrow while the viewport is wide. ── */
@container cpprofile (max-width: 640px) {
    .cp-profile__fieldset {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 0.5rem;
    }
    .cp-profile__fieldset > .form-row[data-profile-tile] {
        aspect-ratio: auto;
        min-height: 0;
        padding: 0.55rem 0.6rem;
        gap: 0.35rem;
    }
    .cp-profile__fieldset > .form-row[data-profile-tile] > label {
        font-size: 0.75rem;
    }
    .cp-profile__fieldset > .form-row[data-profile-tile] .swatch-picker__preview,
    .cp-profile__fieldset > .form-row[data-profile-tile] .bubble-picker__preview,
    .cp-profile__fieldset > .form-row[data-profile-tile] .body-shape-picker__preview {
        min-height: 48px;
    }
    .cp-profile__fieldset > .form-row--wide textarea {
        min-height: 70px;
    }
}
@container cpprofile (max-width: 480px) {
    .cp-profile__fieldset {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.4rem;
    }
    .cp-profile__fieldset > .form-row[data-profile-tile] {
        padding: 0.5rem 0.55rem;
    }
    .cp-profile__fieldset > .form-row[data-profile-tile] > label {
        font-size: 0.72rem;
    }
}
@container cpprofile (max-width: 360px) {
    .cp-profile__fieldset {
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
    }
    .cp-profile__fieldset > .form-row[data-profile-tile] {
        padding: 0.4rem 0.45rem;
    }
    .cp-profile__fieldset > .form-row[data-profile-tile] > label {
        font-size: 0.68rem;
    }
}
/* Keep viewport-based fallback for legacy browsers without container queries. */
@media (max-width: 640px) {
    .cp-profile__fieldset {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 0.5rem;
    }
    .cp-profile__fieldset > .form-row[data-profile-tile] {
        aspect-ratio: auto;
        min-height: 0;
        padding: 0.55rem 0.6rem;
        gap: 0.35rem;
    }
    .cp-profile__fieldset > .form-row[data-profile-tile] > label {
        font-size: 0.75rem;
    }
    .cp-profile__fieldset > .form-row--wide textarea {
        min-height: 70px;
    }
}
@media (max-width: 420px) {
    .cp-profile__fieldset {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.4rem;
    }
}

/* ── Control Panel: Support tab ────────────────────────────────── */
.cp-tab__badge {
    display: inline-block;
    margin-left: 0.35rem;
    color: var(--cw-c0392b);
    font-size: 0.7rem;
    line-height: 1;
    transform: translateY(-1px);
}
.cp-tab.cp-tab--has-badge { font-weight: 700; }

.cp-support {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem 0.7rem;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(var(--c-shadow-rgb),0.18);
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}
.cp-support__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.cp-support__title { font-weight: 700; color: var(--cw-3d1010); }
.cp-support__head-actions { display: flex; gap: 0.4rem; }
.cp-support__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cp-support__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cp-support__empty { color: var(--cw-7a5b5b); font-size: 0.85rem; margin: 0.6rem 0; }
.cp-support__tickets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.cp-support__ticket-btn {
    width: 100%;
    text-align: left;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(var(--c-shadow-rgb),0.12);
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    color: var(--cw-3d1010);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.cp-support__ticket-btn:hover { background: rgba(var(--cwt-255-235-210),0.85); }
.cp-support__ticket--unread .cp-support__ticket-btn { background: rgba(var(--cwt-255-232-210),0.95); border-color: rgba(var(--cwt-192-57-43),0.35); }
.cp-support__ticket--closed .cp-support__ticket-btn { opacity: 0.72; }
.cp-support__ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.cp-support__ticket-subject { font-weight: 600; }
.cp-support__ticket-dot { color: var(--cw-c0392b); font-size: 0.7rem; }
.cp-support__ticket-preview { font-size: 0.8rem; color: var(--cw-5a2020); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-support__ticket-meta { display: flex; gap: 0.6rem; font-size: 0.72rem; color: var(--cw-7a5b5b); }
.cp-support__ticket-status { color: #777; font-style: italic; }

.cp-support__form { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 0.2rem; }
.cp-support__form[hidden], .cp-support__thread[hidden], .cp-support__list[hidden] { display: none; }
.cp-support__back[hidden] { display: none; }
.cp-support__label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; color: var(--cw-5a2020); }
.cp-support__form-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.cp-support__error { color: var(--cw-c0392b); font-size: 0.82rem; margin: 0; min-height: 1em; }

.cp-support__thread { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.cp-support__thread-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid rgba(var(--c-shadow-rgb),0.10); }
.cp-support__thread-subject { font-weight: 600; color: var(--cw-3d1010); }
.cp-support__thread-status { font-size: 0.75rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(46,160,67,0.18); color: #1d6b2a; }
.cp-support__thread-status--closed { background: rgba(120,120,120,0.18); color: #555; }

.cp-support__messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.3rem 0.1rem; }
.cp-support__msg { display: flex; flex-direction: column; max-width: 85%; }
.cp-support__msg--user { align-self: flex-end; align-items: flex-end; }
.cp-support__msg--admin { align-self: flex-start; align-items: flex-start; }
.cp-support__bubble { padding: 0.5rem 0.7rem; border-radius: 14px; font-size: 0.88rem; line-height: 1.35; word-wrap: break-word; }
.cp-support__msg--user .cp-support__bubble { background: var(--cw-5a2020); color: var(--cw-fdf6ee); border-bottom-right-radius: 4px; }
.cp-support__msg--admin .cp-support__bubble { background: rgba(var(--cwt-255-236-210),0.95); color: var(--cw-3d1010); border: 1px solid rgba(var(--c-shadow-rgb),0.15); border-bottom-left-radius: 4px; }
.cp-support__msg-meta { font-size: 0.7rem; color: var(--cw-7a5b5b); margin-top: 0.15rem; }

.cp-support__reply { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; align-items: end; }
.cp-support__reply textarea { resize: vertical; }
.cp-chat__head {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid rgba(var(--c-shadow-rgb),0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.25));
}
.cp-chat__avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cw-c98c8c), var(--cw-5a2020));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.cp-chat__title { font-weight: 600; color: var(--cw-3d1010); font-size: 0.92rem; line-height: 1.1; }
.cp-chat__subtitle { font-size: 0.72rem; color: var(--cw-7a5b5b); }
.cp-chat__clear { padding: 0.25rem 0.55rem; font-size: 0.72rem; }
.cp-chat__mute { padding: 0.25rem 0.5rem; font-size: 0.85rem; line-height: 1; }
.cp-chat__log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    scrollbar-width: thin;
    background:
        radial-gradient(circle at 0% 0%, rgba(var(--c-shadow-rgb),0.05), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(var(--c-shadow-rgb),0.05), transparent 40%);
}
.cp-chat__msg { display: flex; }
.cp-chat__msg--user { justify-content: flex-end; }
.cp-chat__msg--bot { justify-content: flex-start; }
.cp-chat__bubble {
    max-width: 80%;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-shadow: 0 2px 6px rgba(var(--c-shadow-rgb),0.10);
}
.cp-chat__msg--user .cp-chat__bubble {
    background: var(--cw-5a2020);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.cp-chat__msg--bot .cp-chat__bubble {
    background: #fff;
    color: var(--cw-2b1010);
    border: 1px solid rgba(var(--c-shadow-rgb),0.12);
    border-bottom-left-radius: 4px;
}
.cp-chat__dots { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.cp-chat__dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cw-5a2020);
    opacity: 0.4;
    animation: cpDot 1s infinite ease-in-out;
}
.cp-chat__dots span:nth-child(2) { animation-delay: 0.15s; }
.cp-chat__dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cpDot {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.cp-chat__form {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    border-top: 1px solid rgba(var(--c-shadow-rgb),0.10);
    background: rgba(255,255,255,0.55);
}
.cp-chat__input {
    resize: none;
    border: 1px solid rgba(var(--c-shadow-rgb),0.18);
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.35;
    min-height: 2.4rem;
    background: #fff;
    color: var(--cw-2b1010);
}
.cp-chat__input:focus { outline: 2px solid rgba(var(--cwt-90-32-32),0.35); outline-offset: 1px; }
.cp-chat__send { align-self: stretch; padding: 0.4rem 0.95rem; font-size: 0.88rem; }
.cp-chat__mic { align-self: stretch; padding: 0.4rem 0.7rem; font-size: 1rem; line-height: 1; }
.cp-chat__mic--active {
    background: var(--cw-c0392b);
    color: #fff;
    animation: cpMicPulse 1.2s infinite ease-in-out;
}
@keyframes cpMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cwt-192-57-43),0.5); }
    50% { box-shadow: 0 0 0 6px rgba(var(--cwt-192-57-43),0); }
}
.cp-chat__disclaimer {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.3rem 0.7rem 0.45rem;
    font-size: 0.68rem;
    color: var(--cw-7a5b5b);
    background: rgba(255,255,255,0.4);
    border-top: 1px dashed rgba(var(--c-shadow-rgb),0.10);
    text-align: center;
}

@media (max-width: 600px) {
    .control-panel { padding: 0.5rem 0.55rem 0.65rem; gap: 0.45rem; }
    .control-panel__tiles { gap: 0.4rem; }
    .cp-chat__bubble { max-width: 88%; font-size: 0.85rem; }
}
@media (max-width: 420px) {
    .control-panel__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Admin: Support tickets page ────────────────────────────────── */
.admin-support { padding: clamp(0.5rem, 2vw, 1rem) clamp(0.6rem, 3vw, 1.25rem) 2rem; max-width: 1400px; margin: 0 auto; }
.admin-support__header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.admin-support__header h1 { margin: 0; font-size: clamp(1.1rem, 3.5vw, 1.5rem); color: var(--cw-3d1010); }
.admin-support__filter { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--cw-5a2020); }
.admin-support__header #adminComposeToggle { margin-left: auto; }
.admin-compose { background: var(--cw-fff7f3); border: 1px solid var(--cw-f0d4c8); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.admin-compose__title { margin: 0 0 0.75rem; font-size: 1.05rem; color: var(--cw-3d1010); }
.admin-compose__form { display: flex; flex-direction: column; gap: 0.7rem; }
.admin-compose__row { display: flex; flex-direction: column; gap: 0.3rem; }
.admin-compose__row label { font-size: 0.85rem; font-weight: 600; color: var(--cw-5a2020); }
.admin-compose__actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.admin-compose__actions #adminComposeSend { margin-left: auto; }
.admin-compose__status { margin: 0; font-size: 0.85rem; color: #1d6b2f; }
.admin-support__split { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 1rem; min-height: 70vh; }
@media (max-width: 900px) { .admin-support__split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; } }
@media (max-width: 640px) {
    .admin-support__list-pane { max-height: 50vh; }
    .admin-support__item-btn { padding: 0.5rem 0.6rem; }
}

.admin-support__list-pane { background: var(--cw-fdf6ee); border: 1px solid rgba(var(--c-shadow-rgb),0.15); border-radius: 12px; padding: 0.6rem; overflow-y: auto; max-height: 80vh; }
.admin-support__empty { color: var(--cw-7a5b5b); font-size: 0.9rem; margin: 0.5rem 0; }
.admin-support__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.admin-support__item-btn { width: 100%; text-align: left; background: #fff; border: 1px solid rgba(var(--c-shadow-rgb),0.12); border-radius: 10px; padding: 0.55rem 0.7rem; cursor: pointer; color: var(--cw-3d1010); display: flex; flex-direction: column; gap: 0.2rem; }
.admin-support__item-btn:hover { background: rgba(var(--cwt-255-235-210),0.85); }
.admin-support__item--unread .admin-support__item-btn { background: rgba(var(--cwt-255-232-210),0.95); border-color: rgba(var(--cwt-192-57-43),0.4); }
.admin-support__item--active .admin-support__item-btn { outline: 2px solid var(--cw-5a2020); }
.admin-support__item--closed .admin-support__item-btn { opacity: 0.7; }
.admin-support__item-top { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
.admin-support__item-subject { font-weight: 600; }
.admin-support__item-dot { color: var(--cw-c0392b); }
.admin-support__item-user { font-size: 0.78rem; color: var(--cw-5a2020); }
.admin-support__item-preview { font-size: 0.8rem; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-support__item-meta { display: flex; gap: 0.6rem; font-size: 0.72rem; color: var(--cw-7a5b5b); }
.admin-support__item-status { font-style: italic; color: #777; }

.admin-support__thread-pane { background: #fff; border: 1px solid rgba(var(--c-shadow-rgb),0.15); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; min-height: 0; max-height: 80vh; }
.admin-support__placeholder { color: var(--cw-7a5b5b); padding: 2rem; text-align: center; }
.admin-support__thread { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 0.6rem; }
.admin-support__thread-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(var(--c-shadow-rgb),0.1); }
.admin-support__thread-subject { font-size: 1.1rem; font-weight: 700; color: var(--cw-3d1010); }
.admin-support__thread-user { font-size: 0.85rem; color: var(--cw-5a2020); }
.admin-support__thread-actions { display: flex; align-items: center; gap: 0.5rem; }
.admin-support__thread-status { font-size: 0.78rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(46,160,67,0.18); color: #1d6b2a; }
.admin-support__thread-status--closed { background: rgba(120,120,120,0.2); color: #555; }

.admin-support__messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.5rem 0.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.admin-support__msg { display: flex; flex-direction: column; max-width: 80%; }
.admin-support__msg--admin { align-self: flex-end; align-items: flex-end; }
.admin-support__msg--user { align-self: flex-start; align-items: flex-start; }
.admin-support__bubble { padding: 0.55rem 0.75rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.4; word-wrap: break-word; }
.admin-support__msg--admin .admin-support__bubble { background: var(--cw-5a2020); color: var(--cw-fdf6ee); border-bottom-right-radius: 4px; }
.admin-support__msg--user .admin-support__bubble { background: var(--cw-f3eadb); color: var(--cw-3d1010); border: 1px solid rgba(var(--c-shadow-rgb),0.15); border-bottom-left-radius: 4px; }
.admin-support__msg-meta { font-size: 0.72rem; color: var(--cw-7a5b5b); margin-top: 0.15rem; }

.admin-support__bubble { position: relative; }
.admin-support__msg-del { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: var(--cw-b23b3b); color: #fff; font-size: 0.85rem; line-height: 18px; text-align: center; cursor: pointer; opacity: 0; transition: opacity 0.15s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.admin-support__msg:hover .admin-support__msg-del,
.admin-support__msg-del:focus { opacity: 1; }
.admin-support__msg-del:hover { background: var(--cw-8f2a2a); }
.admin-support__delete-ticket { color: var(--cw-b23b3b); border-color: rgba(var(--cwt-178-59-59),0.4); }
.admin-support__delete-ticket:hover { background: var(--cw-b23b3b); color: #fff; border-color: var(--cw-b23b3b); }

.admin-support__reply { display: flex; flex-direction: column; gap: 0.4rem; border-top: 1px solid rgba(var(--c-shadow-rgb),0.1); padding-top: 0.6rem; }
.admin-support__reply-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.admin-support__error { color: var(--cw-c0392b); font-size: 0.82rem; margin: 0; min-height: 1em; }

/* =========================================================
   Profile fieldset — flatten all pickers so every option is
   visible at once (no hover/click-to-expand). The hidden
   <input> still holds the chosen value; the option buttons
   wired by the existing JS just toggle the .selected /
   active state inline.
   ========================================================= */
.cp-profile__fieldset .swatch-picker__preview,
.cp-profile__fieldset .bubble-picker__preview,
.cp-profile__fieldset .body-shape-picker__preview { display: none !important; }

.cp-profile__fieldset .swatch-picker,
.cp-profile__fieldset .bubble-picker,
.cp-profile__fieldset .body-shape-picker {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 8px;
    min-height: 0 !important;
}

/* Force option panels visible regardless of data-state. */
.cp-profile__fieldset .swatch-picker .skin-tone-chart,
.cp-profile__fieldset .swatch-picker[data-state="collapsed"] .skin-tone-chart,
.cp-profile__fieldset .swatch-picker[data-state="expanded"] .skin-tone-chart,
.cp-profile__fieldset .sex-options,
.cp-profile__fieldset .swatch-picker.sex-picker[data-state="expanded"] .sex-options,
.cp-profile__fieldset .bubble-picker__panel,
.cp-profile__fieldset .bubble-picker[data-state="expanded"] .bubble-picker__panel,
.cp-profile__fieldset .body-shape-picker__options,
.cp-profile__fieldset .body-shape-picker[data-state="collapsed"] .body-shape-picker__options,
.cp-profile__fieldset .body-shape-picker[data-state="expanded"] .body-shape-picker__options {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.6);
    border-radius: 10px;
}

/* Visually mark the currently-selected option. */
.cp-profile__fieldset .skin-tone-swatch.selected,
.cp-profile__fieldset .sex-option.is-selected,
.cp-profile__fieldset .body-shape-option.is-selected {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}


/* ── Single-row profile settings ───────────────────────────────────
   Eight trait tiles render as compact icon-only chips in one wrapping
   row. Hover or keyboard-focus on a tile reveals that tile's option
   panel popped open absolutely beneath it. CSS `order` puts bodyshape
   between height and eyes without moving the Razor markup. */
.cp-profile__fieldset > .cp-profile__row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(0.25rem, 1cqw, 0.6rem);
    align-items: flex-start;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
}

/* Keep the preview icon visible even when the picker is in the expanded
   state (the popover lives outside the tile, so the icon must remain). */
.cp-profile__row .swatch-picker[data-state="expanded"] .swatch-picker__preview,
.cp-profile__row .bubble-picker[data-state="expanded"] .bubble-picker__preview,
.cp-profile__row .swatch-picker.sex-picker[data-state="expanded"] .swatch-picker__preview,
.cp-profile__row .body-shape-picker[data-state="expanded"] .body-shape-picker__preview {
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

.cp-profile__row > .form-row[data-profile-tile="sex"]       { order: 1; }
.cp-profile__row > .form-row[data-profile-tile="dob"]       { order: 2; }
.cp-profile__row > .form-row[data-profile-tile="location"]  { order: 3; }
.cp-profile__row > .form-row[data-profile-tile="height"]    { order: 4; }
.cp-profile__row > .form-row[data-profile-tile="bodyshape"] { order: 5; }
.cp-profile__row > .form-row[data-profile-tile="eyes"]      { order: 6; }
.cp-profile__row > .form-row[data-profile-tile="skin"]      { order: 7; }
.cp-profile__row > .form-row[data-profile-tile="hair"]      { order: 8; }

.cp-profile__row > .form-row[data-profile-tile] {
    position: relative;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    aspect-ratio: auto;
    margin: 0;
    padding: clamp(0.2rem, 0.6cqw, 0.4rem) clamp(0.15rem, 0.5cqw, 0.3rem) clamp(0.25rem, 0.6cqw, 0.35rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    background: rgba(var(--c-cream-rgb),0.85);
    border: 1px solid rgba(var(--c-shadow-rgb),0.18);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 6px rgba(var(--c-shadow-rgb),0.08);
    overflow: visible;
    z-index: 1;
}
/* Invisible bridge below the tile so the cursor can travel down to the
   popover without leaving the hover region. Sized to overlap the small
   gap between the tile and the popover. */
.cp-profile__row > .form-row[data-profile-tile]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    pointer-events: none;
}
.cp-profile__row > .form-row[data-profile-tile]:hover::after,
.cp-profile__row > .form-row[data-profile-tile]:focus-within::after {
    pointer-events: auto;
}
.cp-profile__row > .form-row[data-profile-tile]:hover,
.cp-profile__row > .form-row[data-profile-tile]:focus-within {
    z-index: 50;
    border-color: rgba(var(--c-shadow-rgb),0.40);
}
.cp-profile__row > .form-row[data-profile-tile] > label {
    margin: 0;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--c-shadow);
    text-align: center;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.cp-profile__row > .form-row[data-profile-tile] > br { display: none; }

.cp-profile__row .profile-tile__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: static;
}

/* Always show the small preview chip/button (override earlier flatten
   rules that set display:none on .swatch-picker__preview etc.). */
.cp-profile__row .swatch-picker__preview,
.cp-profile__row .bubble-picker__preview,
.cp-profile__row .body-shape-picker__preview {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 5.5cqw, 52px);
    height: clamp(36px, 5.5cqw, 52px);
    padding: 4px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(var(--c-shadow-rgb),0.22);
    border-radius: 50%;
    cursor: pointer;
    color: var(--cw-3d1010);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 4px rgba(var(--c-shadow-rgb),0.10);
    gap: 0;
}
.cp-profile__row .swatch-picker__preview:hover,
.cp-profile__row .bubble-picker__preview:hover,
.cp-profile__row .body-shape-picker__preview:hover {
    border-color: var(--c-shadow);
}
.cp-profile__row .swatch-picker__chip {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(var(--c-shadow-rgb),0.25);
    display: inline-block;
}
.cp-profile__row .swatch-picker__chip--empty { background: var(--cw-f3eadb); }
.cp-profile__row .swatch-picker__hint,
.cp-profile__row .bubble-picker__hint,
.cp-profile__row .body-shape-picker__label { display: none; }
.cp-profile__row .bubble-picker__glyph,
.cp-profile__row .sex-picker__glyph { font-size: 1.5rem; line-height: 1; }
.cp-profile__row .body-shape-picker__icon { width: 28px; height: 38px; }

/* Container — static, ignore JS data-state for layout. */
.cp-profile__row .swatch-picker,
.cp-profile__row .bubble-picker,
.cp-profile__row .body-shape-picker {
    position: static !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    min-height: 0 !important;
    width: auto !important;
    gap: 0 !important;
}

/* Default-hidden popover panels. Override the earlier flatten rules. */
.cp-profile__row .swatch-picker .skin-tone-chart,
.cp-profile__row .swatch-picker[data-state="collapsed"] .skin-tone-chart,
.cp-profile__row .swatch-picker[data-state="expanded"] .skin-tone-chart,
.cp-profile__row .sex-options,
.cp-profile__row .swatch-picker.sex-picker[data-state="collapsed"] .sex-options,
.cp-profile__row .swatch-picker.sex-picker[data-state="expanded"] .sex-options,
.cp-profile__row .bubble-picker__panel,
.cp-profile__row .bubble-picker[data-state="collapsed"] .bubble-picker__panel,
.cp-profile__row .bubble-picker[data-state="expanded"] .bubble-picker__panel,
.cp-profile__row .body-shape-picker__options,
.cp-profile__row .body-shape-picker[data-state="collapsed"] .body-shape-picker__options,
.cp-profile__row .body-shape-picker[data-state="expanded"] .body-shape-picker__options {
    position: absolute !important;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 12px !important;
    min-width: 200px;
    max-width: 320px;
    width: max-content;
    padding: 8px 10px !important;
    background: var(--c-card2) !important;
    border: 1px solid rgba(var(--c-shadow-rgb),0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(var(--c-shadow-rgb),0.18) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center;
    justify-content: center;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 120ms ease 250ms, visibility 0s linear 370ms;
    z-index: 50;
}

.cp-profile__row > .form-row[data-profile-tile]:hover .skin-tone-chart,
.cp-profile__row > .form-row[data-profile-tile]:focus-within .skin-tone-chart,
.cp-profile__row > .form-row[data-profile-tile]:hover .sex-options,
.cp-profile__row > .form-row[data-profile-tile]:focus-within .sex-options,
.cp-profile__row > .form-row[data-profile-tile]:hover .bubble-picker__panel,
.cp-profile__row > .form-row[data-profile-tile]:focus-within .bubble-picker__panel,
.cp-profile__row > .form-row[data-profile-tile]:hover .body-shape-picker__options,
.cp-profile__row > .form-row[data-profile-tile]:focus-within .body-shape-picker__options {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transition: opacity 120ms ease 0s, visibility 0s linear 0s;
}

/* Body shape measurements popover sits in same popover layer. */
.cp-profile__row #bodyShapeMeasurements {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 51;
}

/* Option sub-styles. */
.cp-profile__row .skin-tone-swatch {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(var(--c-shadow-rgb),0.25);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease, border-color 0.1s ease;
}
.cp-profile__row .skin-tone-swatch:hover,
.cp-profile__row .skin-tone-swatch.selected,
.cp-profile__row .skin-tone-swatch.is-selected {
    border-color: var(--c-shadow);
    transform: scale(1.08);
}
.cp-profile__row .body-shape-option {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: transparent;
    border: 1px solid rgba(var(--c-shadow-rgb),0.2);
    border-radius: 8px;
    cursor: pointer;
    color: var(--cw-3d1010);
    transition: transform 0.1s ease, border-color 0.1s ease, background 0.1s ease;
}
.cp-profile__row .body-shape-option:hover,
.cp-profile__row .body-shape-option.is-selected {
    border-color: var(--c-shadow);
    background: rgba(var(--c-shadow-rgb),0.08);
}
.cp-profile__row .body-shape-option__icon { width: 22px; height: 32px; }
.cp-profile__row .body-shape-option__label { font-size: 0.65rem; line-height: 1; }
.cp-profile__row .sex-option {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid rgba(var(--c-shadow-rgb),0.2);
    border-radius: 8px;
    cursor: pointer;
    color: var(--cw-3d1010);
}
.cp-profile__row .sex-option:hover,
.cp-profile__row .sex-option.is-selected {
    border-color: var(--c-shadow);
    background: rgba(var(--c-shadow-rgb),0.08);
}
.cp-profile__row .sex-option__glyph { font-size: 1.3rem; }
.cp-profile__row .sex-option__label { font-size: 0.7rem; }
.cp-profile__row .bubble-picker__panel input[type="text"],
.cp-profile__row .bubble-picker__panel input[type="date"],
.cp-profile__row .bubble-picker__panel input[type="number"] {
    width: 170px;
    max-width: 100%;
    font: inherit;
    padding: 4px 6px;
    border: 1px solid rgba(var(--c-shadow-rgb),0.25);
    border-radius: 8px;
    background: #fff;
}

@media (max-width: 640px) {
    .cp-profile__fieldset > .cp-profile__row {
        gap: 0.2rem;
    }
    .cp-profile__row > .form-row[data-profile-tile] {
        padding: 0.2rem 0.1rem 0.25rem;
    }
    .cp-profile__row .swatch-picker__preview,
    .cp-profile__row .bubble-picker__preview,
    .cp-profile__row .body-shape-picker__preview {
        width: 34px;
        height: 34px;
    }
    .cp-profile__row .swatch-picker__chip { width: 20px; height: 20px; }
    .cp-profile__row .bubble-picker__glyph,
    .cp-profile__row .sex-picker__glyph { font-size: 1.05rem; }
    .cp-profile__row .body-shape-picker__icon { width: 20px; height: 28px; }
    .cp-profile__row > .form-row[data-profile-tile] > label { font-size: 0.55rem; }
    .cp-profile__row .skin-tone-label { font-size: 0.6rem; }
}

/* Per-tile selection label shown under the icon (mirrors color labels). */
.cp-profile__row .skin-tone-label {
    margin: 0;
    padding: 0 2px;
    font-size: clamp(0.6rem, 0.95cqw, 0.72rem);
    font-weight: 600;
    color: var(--cw-3d1010);
    text-align: center;
    line-height: 1.15;
    width: 100%;
    max-width: 100%;
    min-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tile field labels (the bold caption above the icon) — keep them centered,
   small, and contained so long labels never expand the tile width. */
.cp-profile__row > .form-row[data-profile-tile] > label {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 2px;
    font-size: clamp(0.6rem, 0.95cqw, 0.74rem);
    font-weight: 600;
    color: var(--cw-3d1010);
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right-anchor popovers for tiles in the right half of the strip so they
   don't get clipped by the container's overflow:hidden. */
.cp-profile__row > .form-row[data-profile-tile]:nth-child(n+5) .skin-tone-chart,
.cp-profile__row > .form-row[data-profile-tile]:nth-child(n+5) .sex-options,
.cp-profile__row > .form-row[data-profile-tile]:nth-child(n+5) .bubble-picker__panel,
.cp-profile__row > .form-row[data-profile-tile]:nth-child(n+5) .body-shape-picker__options,
.cp-profile__row > .form-row[data-profile-tile]:nth-child(n+5) #bodyShapeMeasurements {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

/* Left-anchor popovers for the first tile so they don't clip on the left. */
.cp-profile__row > .form-row[data-profile-tile]:nth-child(1) .skin-tone-chart,
.cp-profile__row > .form-row[data-profile-tile]:nth-child(1) .sex-options,
.cp-profile__row > .form-row[data-profile-tile]:nth-child(1) .bubble-picker__panel,
.cp-profile__row > .form-row[data-profile-tile]:nth-child(1) .body-shape-picker__options,
.cp-profile__row > .form-row[data-profile-tile]:nth-child(1) #bodyShapeMeasurements {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

/* Body-shape popover: keep all options on a single row. */
.cp-profile__row .body-shape-picker__options {
    flex-wrap: nowrap !important;
    max-width: none !important;
    width: max-content !important;
}
.cp-profile__row .body-shape-option {
    flex: 0 0 auto;
}

/* Retailer multi-search picker (under palette actions) */
#createLookPage .retailer-picker { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--c-cream-rgb),0.65); border: 1px solid rgba(var(--c-shadow-rgb),0.18); display: flex; flex-direction: column; gap: 8px; }
#createLookPage .retailer-picker__header { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#createLookPage .retailer-picker__title { font-size: 0.85rem; font-weight: 700; color: var(--cw-3d1010); letter-spacing: 0.02em; }
#createLookPage .retailer-picker__actions { display: flex; gap: 6px; }
#createLookPage .retailer-picker__btn { padding: 2px 9px; border: 1px solid rgba(var(--c-shadow-rgb),0.28); border-radius: 999px; background: #fff; font-size: 0.72rem; font-weight: 600; color: var(--c-shadow); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
#createLookPage .retailer-picker__btn:hover { background: rgba(var(--c-shadow-rgb),0.10); border-color: var(--c-shadow); }
#createLookPage .retailer-picker__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#createLookPage .retailer-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid rgba(var(--c-shadow-rgb),0.28); border-radius: 999px; background: #fff; font-size: 0.78rem; color: var(--cw-3d1010); cursor: pointer; user-select: none; transition: background 0.12s ease, border-color 0.12s ease; }
#createLookPage .retailer-chip:hover { border-color: var(--c-shadow); }
#createLookPage .retailer-chip input { accent-color: var(--c-shadow); margin: 0; }
#createLookPage .retailer-chip:has(input:checked) { background: rgba(var(--c-shadow-rgb),0.10); border-color: var(--c-shadow); font-weight: 600; }


/* ---------- Language switcher (shared layout) ---------- */
.lang-switcher {
    position: fixed; top: 8px; right: 10px; z-index: 10000;
    display: flex; align-items: center; gap: 4px;
    background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(var(--c-shadow-rgb), 0.2);
    border-radius: 999px; padding: 2px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    font-size: 13px; backdrop-filter: blur(4px);
}
.lang-switcher__glyph { line-height: 1; font-size: 14px; }
.lang-switcher select {
    border: none; background: transparent; font: inherit; color: var(--c-text);
    cursor: pointer; max-width: 130px; padding: 2px;
}
.lang-switcher select:focus { outline: none; }
/* Right-to-left languages (e.g. Arabic): mirror the page and move the switcher to the left. */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .lang-switcher { right: auto; left: 10px; }

/* ===== Cookbook (Body & Spirit -> Food) ===================================== */
.cookbook { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; gap: 0.4rem; padding: 0.5rem 0.6rem; box-sizing: border-box; color: var(--c-text); overflow: hidden; }
.cookbook[hidden] { display: none !important; }
.perfume-placeholder[hidden] { display: none !important; }
.cookbook__head { display: flex; flex-direction: column; gap: 0.4rem; flex: 0 0 auto; }
.cookbook__headtop { display: flex; align-items: center; gap: 0.5rem; }
.cookbook__close { border: 1px solid rgba(var(--c-accent-rgb),0.25); background: rgba(var(--c-cream-rgb),0.8); color: var(--c-accent); border-radius: 8px; width: 2rem; height: 2rem; font-size: 1.1rem; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.cookbook__close:hover { background: #fff; }
.cookbook__title { font-family: 'Georgia','Times New Roman',serif; font-size: 1.3rem; font-weight: 700; }
.cookbook__tabs { margin-bottom: 0.2rem; }
.cookbook__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Fitness + Cookbook: tabbed-window layout matching the Calendar section — a FLUSH tab strip (no gaps,
   no background showing between tabs) sitting on the page with a connected central panel below, no
   title header. The tab strip uses gap:0 like the Calendar sub-tabs (.plan-* > .plan-subtabs). */
.cookbook--tabwin { padding: 0; gap: 0; background: transparent; }
.cookbook--tabwin > .cookbook__tabs { margin-bottom: 0; gap: 0; }
.cookbook--tabwin > .cookbook__tabs .cp-tab + .cp-tab { border-left: none; }
.cookbook--tabwin > .cookbook__body {
    padding: 0.5rem 0.6rem 0.6rem;
    background: rgba(var(--c-cream-rgb), 0.72);
    border: 1px solid rgba(var(--c-shadow-rgb), 0.18);
    border-top: none;
    border-radius: 0 0 12px 12px;
}
.cookbook__panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; overflow: hidden; }
.cookbook__panel[hidden] { display: none; }

/* --- Fitness reference (Yoga poses / Gym exercises) ------------------------- */
.fitref { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 0.5rem; }
.fitref__bar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.fitref__search { flex: 1 1 200px; min-width: 0; border: 1px solid rgba(var(--c-accent-rgb),0.28); border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.95rem; background: var(--c-card); color: var(--c-text); font-family: inherit; }
.fitref__equip { flex: 0 0 auto; border: 1px solid rgba(var(--c-accent-rgb),0.28); border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.95rem; background: var(--c-card); color: var(--c-text); font-family: inherit; }
.fitref__genders { display: inline-flex; border: 1px solid rgba(var(--c-accent-rgb),0.28); border-radius: 8px; overflow: hidden; }
.fitref__gender { border: none; background: var(--c-card); color: var(--c-text); padding: 0.5rem 0.8rem; font-size: 0.9rem; cursor: pointer; font-family: inherit; }
.fitref__gender + .fitref__gender { border-left: 1px solid rgba(var(--c-accent-rgb),0.28); }
.fitref__gender--active { background: var(--c-primary-dark); color: #fff; font-weight: 700; }
.fitref__cats { flex-wrap: wrap; max-height: 5.2rem; overflow-y: auto; }
.fitref__cats .cp-tab { font-size: 0.82rem; padding: 0.3rem 0.6rem; }
.fitref__grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.5rem; align-content: start; padding-right: 0.2rem; }
.fitref__blurb { grid-column: 1 / -1; margin: 0 0 0.2rem; font-style: italic; color: var(--c-text-soft, var(--c-text)); opacity: 0.85; font-size: 0.9rem; }
.fitref__count { grid-column: 1 / -1; margin: 0; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; }
.fitref__empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 2rem 1rem; opacity: 0.7; text-align: center; }
.fitcard { background: var(--c-card); border: 1px solid rgba(var(--c-shadow-rgb),0.14); border-radius: 10px; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.fitcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.fitcard__title { margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--c-text); }
.fitcard__sub { font-style: italic; font-size: 0.82rem; opacity: 0.7; }
.fitcard__desc { margin: 0; font-size: 0.88rem; line-height: 1.35; color: var(--c-text); }
.fitcard__benefits { margin: 0.1rem 0 0; font-size: 0.82rem; line-height: 1.3; opacity: 0.82; }
.fitcard__muscles { margin: 0.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.fitcard__chip { font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(var(--c-accent-rgb),0.14); color: var(--c-text); }
.fitcard__chip--syn { background: rgba(var(--c-accent-rgb),0.07); opacity: 0.85; }
.fitcard__badge { flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.12rem 0.45rem; border-radius: 999px; color: #fff; background: #888; }
.fitcard__badge--beginner { background: #4a9a5e; }
.fitcard__badge--intermediate { background: #c9913a; }
.fitcard__badge--advanced { background: #c1574b; }
.cookbook__filters { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.cookbook__input, .cookbook__select, .cookbook__textarea { border: 1px solid rgba(var(--c-accent-rgb),0.28); border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.95rem; background: var(--c-card); color: var(--c-text); font-family: inherit; }
.cookbook__input { flex: 1 1 200px; min-width: 0; }
.cookbook__textarea { width: 100%; resize: vertical; box-sizing: border-box; }
.cookbook__select { flex: 0 0 auto; }
.cookbook__go { border: none; background: var(--c-primary-dark); color: #fff; border-radius: 8px; padding: 0.55rem 1rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.cookbook__go:hover { background: var(--c-primary-hover); }
.cookbook__go:disabled { opacity: 0.6; cursor: default; }
.cookbook__go--sm { padding: 0.45rem 0.7rem; font-size: 0.85rem; }
.cookbook__go.is-danger { background: var(--cw-9b3b3b); }
.cookbook__hint { font-size: 0.9rem; opacity: 0.85; margin: 0; }
.cookbook__minehead { display: flex; justify-content: flex-end; }
.cookbook__msg { padding: 1rem 0.5rem; opacity: 0.75; font-size: 0.95rem; }
.cookbook__results { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; align-content: start; padding-right: 0.2rem; }

.recipe-card { text-align: left; border: 1px solid rgba(var(--c-accent-rgb),0.18); background: rgba(var(--c-cream-rgb),0.85); border-radius: 12px; padding: 0.7rem 0.8rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.3rem; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.recipe-card:hover { box-shadow: 0 4px 14px rgba(var(--c-shadow-rgb),0.16); transform: translateY(-2px); }
.recipe-card__title { font-weight: 700; font-size: 1.02rem; color: var(--c-accent); }
.recipe-card__meta { font-size: 0.82rem; opacity: 0.8; }
.recipe-card__desc { font-size: 0.88rem; line-height: 1.35; }
.recipe-card__missing { font-size: 0.8rem; color: var(--cw-9b3b3b); }

.recipe-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.recipe-tag { font-size: 0.72rem; font-weight: 600; background: rgba(var(--c-primary-dark-rgb),0.18); color: var(--c-primary-text); border-radius: 999px; padding: 0.1rem 0.5rem; }

.cookbook__detail { position: absolute; inset: 0; background: var(--c-card); border-radius: 10px; overflow-y: auto; padding: 0.6rem 0.8rem 1.2rem; box-shadow: 0 6px 24px rgba(var(--c-shadow-rgb),0.18); }
.cookbook__detail[hidden] { display: none; }
.recipe-detail__bar { position: sticky; top: 0; background: var(--c-card); padding: 0.2rem 0 0.4rem; }
.recipe-detail__back { border: none; background: none; color: var(--c-primary-dark); font-weight: 700; font-size: 0.95rem; cursor: pointer; padding: 0.2rem 0; }
.recipe-detail__loading { padding: 1.5rem 0.5rem; opacity: 0.8; }
.recipe-detail__title { font-family: 'Georgia',serif; font-size: 1.35rem; margin: 0.2rem 0; color: var(--c-accent); }
.recipe-detail__meta { font-size: 0.86rem; opacity: 0.82; margin-bottom: 0.3rem; }
.recipe-detail__desc { font-size: 0.95rem; line-height: 1.4; }
.recipe-detail__section { font-weight: 700; color: var(--c-accent); margin: 0.8rem 0 0.3rem; border-bottom: 1px solid rgba(var(--c-accent-rgb),0.12); padding-bottom: 0.2rem; }
.recipe-detail__ings { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.recipe-detail__steps { margin: 0; padding-left: 1.3rem; line-height: 1.5; display: flex; flex-direction: column; gap: 0.35rem; }
.recipe-detail__benefits { font-size: 0.93rem; line-height: 1.45; }
.recipe-detail__subs { margin: 0; padding-left: 1.2rem; line-height: 1.5; }
.recipe-detail__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

.recipe-sub { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed rgba(var(--c-accent-rgb),0.18); }
.recipe-sub .cookbook__input { flex: 1 1 160px; }
.recipe-sub__out { flex-basis: 100%; font-size: 0.88rem; color: var(--c-primary-text); }

.recipe-form { display: flex; flex-direction: column; gap: 0.6rem; }
.recipe-form__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.recipe-form__field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 600; color: var(--c-accent); flex: 1 1 100%; }
.recipe-form__field--narrow { flex: 1 1 110px; }
.recipe-form__field .cookbook__input, .recipe-form__field .cookbook__textarea { font-weight: 400; }
.recipe-form__error { color: var(--cw-9b3b3b); font-size: 0.85rem; }

/* ===== Male users: blue palette (cool mirror of the pink scheme) ===== */
html[data-sex-theme="male"] {
    --c-accent: #1c1c4a;
    --c-text: #10103b;
    --c-shadow: #20205b;
    --c-primary-dark: #6b7ab8;
    --c-primary: #9aa8d4;
    --c-primary-hover: #5b6aa8;
    --c-primary-text: #2b3b7a;
    --c-cream: #eef3fa;
    --c-bg-soft: #e5ecf5;
    --c-card: #f9fdff;
    --c-card2: #f4fbff;
    --c-accent-rgb: 28, 28, 74;
    --c-shadow-rgb: 32, 32, 91;
    --c-primary-rgb: 154, 168, 212;
    --c-primary-dark-rgb: 107, 122, 184;
    --c-cream-rgb: 244, 251, 255;
}

/* ===== To-do list headers + item editor popup ===== */
.plan-todo-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.5rem 0.3rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(var(--c-accent-rgb), 0.6); border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.12); }
.plan-todo-head__title { flex: 1 1 auto; }
.plan-todo-head__priority { flex: 0 0 auto; width: 4.5rem; text-align: center; }
.plan-todo-head__due { flex: 0 0 auto; width: 9.5rem; text-align: center; }
/* Only show the to-do headers on the to-do list view (it is the only one rendered with them). */
.plan-listview[data-plan-listview="todo"] .plan-todo-head { display: flex; }

.plan-item__text[role="button"] { cursor: pointer; }
.plan-item__text[role="button"]:hover { text-decoration: underline; }

.plan-item-modal .modal-panel { max-width: 520px; width: 92%; display: flex; flex-direction: column; gap: 0.6rem; }
.plan-item-modal__lbl { font-size: 0.8rem; font-weight: 700; color: var(--c-accent); }
.plan-item-modal__text { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid rgba(var(--c-accent-rgb), 0.28); border-radius: 8px; padding: 0.55rem 0.65rem; font: inherit; color: var(--c-text); background: var(--c-card); }
.plan-item-modal__row { display: flex; align-items: center; gap: 0.6rem; }
.plan-item-modal__row .plan-item__stars { display: inline-flex; gap: 0.15rem; }

/* ===== Extended brand palette -> variables (so the male theme can recolour EVERYTHING) ===== */
:root {
    --cw-2b1010: #2b1010;
    --cw-3a2a1a: #3a2a1a;
    --cw-3d1010: #3d1010;
    --cw-4a3f36: #4a3f36;
    --cw-5a2020: #5a2020;
    --cw-5b4604: #5b4604;
    --cw-6b3030: #6b3030;
    --cw-6f625c: #6f625c;
    --cw-7a2e2e: #7a2e2e;
    --cw-7a2f1d: #7a2f1d;
    --cw-7a4e00: #7a4e00;
    --cw-7a5b5b: #7a5b5b;
    --cw-7a6a5e: #7a6a5e;
    --cw-8a7d7d: #8a7d7d;
    --cw-8f2a2a: #8f2a2a;
    --cw-922015: #922015;
    --cw-9a6a6a: #9a6a6a;
    --cw-9a7b7b: #9a7b7b;
    --cw-9b3b3b: #9b3b3b;
    --cw-a02020: #a02020;
    --cw-a12222: #a12222;
    --cw-a3563f: #a3563f;
    --cw-b23b3b: #b23b3b;
    --cw-b3261e: #b3261e;
    --cw-b42318: #b42318;
    --cw-b8a99a: #b8a99a;
    --cw-b91c1c: #b91c1c;
    --cw-c0392b: #c0392b;
    --cw-c4a898: #c4a898;
    --cw-c98a7a: #c98a7a;
    --cw-c98b7e: #c98b7e;
    --cw-c98c8c: #c98c8c;
    --cw-d23b40: #d23b40;
    --cw-d2492f: #d2492f;
    --cw-d4af37: #d4af37;
    --cw-d4b0a8: #d4b0a8;
    --cw-d4c0b4: #d4c0b4;
    --cw-dfc4be: #dfc4be;
    --cw-e0a93b: #e0a93b;
    --cw-e2d6cc: #e2d6cc;
    --cw-e5cfc5: #e5cfc5;
    --cw-e63946: #e63946;
    --cw-e6cfc2: #e6cfc2;
    --cw-e74c3c: #e74c3c;
    --cw-e8cfc4: #e8cfc4;
    --cw-e91e63: #e91e63;
    --cw-ede4dc: #ede4dc;
    --cw-efe2e2: #efe2e2;
    --cw-f0c36d: #f0c36d;
    --cw-f0d4c8: #f0d4c8;
    --cw-f1c40f: #f1c40f;
    --cw-f2e6dc: #f2e6dc;
    --cw-f39c12: #f39c12;
    --cw-f3eadb: #f3eadb;
    --cw-f5ede5: #f5ede5;
    --cw-fdf6ee: #fdf6ee;
    --cw-ff0000: #ff0000;
    --cw-ffb4b4: #ffb4b4;
    --cw-ffb84d: #ffb84d;
    --cw-fff7ec: #fff7ec;
    --cw-fff7f3: #fff7f3;
    --cw-fff8e1: #fff8e1;
    --cw-fff8e5: #fff8e5;
    --cwt-40-16-16: 40, 16, 16;
    --cwt-59-16-16: 59, 16, 16;
    --cwt-90-32-32: 90, 32, 32;
    --cwt-163-86-63: 163, 86, 63;
    --cwt-178-59-59: 178, 59, 59;
    --cwt-179-38-30: 179, 38, 30;
    --cwt-180-30-30: 180, 30, 30;
    --cwt-180-130-110: 180, 130, 110;
    --cwt-192-57-43: 192, 57, 43;
    --cwt-201-138-122: 201, 138, 122;
    --cwt-201-139-126: 201, 139, 126;
    --cwt-240-225-212: 240, 225, 212;
    --cwt-245-235-225: 245, 235, 225;
    --cwt-247-110-96: 247, 110, 96;
    --cwt-255-90-95: 255, 90, 95;
    --cwt-255-215-0: 255, 215, 0;
    --cwt-255-220-180: 255, 220, 180;
    --cwt-255-232-210: 255, 232, 210;
    --cwt-255-235-210: 255, 235, 210;
    --cwt-255-236-210: 255, 236, 210;
    --cwt-255-247-236: 255, 247, 236;
}

html[data-sex-theme="male"] {
    --cw-2b1010: #10102b;
    --cw-3a2a1a: #1a2a3a;
    --cw-3d1010: #10103d;
    --cw-4a3f36: #363f4a;
    --cw-5a2020: #20205a;
    --cw-5b4604: #04465b;
    --cw-6b3030: #30306b;
    --cw-6f625c: #5c626f;
    --cw-7a2e2e: #2e2e7a;
    --cw-7a2f1d: #1d2f7a;
    --cw-7a4e00: #004e7a;
    --cw-7a5b5b: #5b5b7a;
    --cw-7a6a5e: #5e6a7a;
    --cw-8a7d7d: #7d7d8a;
    --cw-8f2a2a: #2a2a8f;
    --cw-922015: #152092;
    --cw-9a6a6a: #6a6a9a;
    --cw-9a7b7b: #7b7b9a;
    --cw-9b3b3b: #3b3b9b;
    --cw-a02020: #2020a0;
    --cw-a12222: #2222a1;
    --cw-a3563f: #3f56a3;
    --cw-b23b3b: #3b3bb2;
    --cw-b3261e: #1e26b3;
    --cw-b42318: #1823b4;
    --cw-b8a99a: #9aa9b8;
    --cw-b91c1c: #1c1cb9;
    --cw-c0392b: #2b39c0;
    --cw-c4a898: #98a8c4;
    --cw-c98a7a: #7a8ac9;
    --cw-c98b7e: #7e8bc9;
    --cw-c98c8c: #8c8cc9;
    --cw-d23b40: #403bd2;
    --cw-d2492f: #2f49d2;
    --cw-d4af37: #37afd4;
    --cw-d4b0a8: #a8b0d4;
    --cw-d4c0b4: #b4c0d4;
    --cw-dfc4be: #bec4df;
    --cw-e0a93b: #3ba9e0;
    --cw-e2d6cc: #ccd6e2;
    --cw-e5cfc5: #c5cfe5;
    --cw-e63946: #4639e6;
    --cw-e6cfc2: #c2cfe6;
    --cw-e74c3c: #3c4ce7;
    --cw-e8cfc4: #c4cfe8;
    --cw-e91e63: #631ee9;
    --cw-ede4dc: #dce4ed;
    --cw-efe2e2: #e2e2ef;
    --cw-f0c36d: #6dc3f0;
    --cw-f0d4c8: #c8d4f0;
    --cw-f1c40f: #0fc4f1;
    --cw-f2e6dc: #dce6f2;
    --cw-f39c12: #129cf3;
    --cw-f3eadb: #dbeaf3;
    --cw-f5ede5: #e5edf5;
    --cw-fdf6ee: #eef6fd;
    --cw-ff0000: #0000ff;
    --cw-ffb4b4: #b4b4ff;
    --cw-ffb84d: #4db8ff;
    --cw-fff7ec: #ecf7ff;
    --cw-fff7f3: #f3f7ff;
    --cw-fff8e1: #e1f8ff;
    --cw-fff8e5: #e5f8ff;
    --cwt-40-16-16: 16, 16, 40;
    --cwt-59-16-16: 16, 16, 59;
    --cwt-90-32-32: 32, 32, 90;
    --cwt-163-86-63: 63, 86, 163;
    --cwt-178-59-59: 59, 59, 178;
    --cwt-179-38-30: 30, 38, 179;
    --cwt-180-30-30: 30, 30, 180;
    --cwt-180-130-110: 110, 130, 180;
    --cwt-192-57-43: 43, 57, 192;
    --cwt-201-138-122: 122, 138, 201;
    --cwt-201-139-126: 126, 139, 201;
    --cwt-240-225-212: 212, 225, 240;
    --cwt-245-235-225: 225, 235, 245;
    --cwt-247-110-96: 96, 110, 247;
    --cwt-255-90-95: 95, 90, 255;
    --cwt-255-215-0: 0, 215, 255;
    --cwt-255-220-180: 180, 220, 255;
    --cwt-255-232-210: 210, 232, 255;
    --cwt-255-235-210: 210, 235, 255;
    --cwt-255-236-210: 210, 236, 255;
    --cwt-255-247-236: 236, 247, 255;
}

/* Online Shop Page Styling */
.shop-page { display: flex; flex-direction: column; height: 100%; padding: 1rem; box-sizing: border-box; overflow-y: auto; gap: 0.8rem; }
.shop-page__header { display: flex; flex-direction: column; gap: 0.6rem; border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.15); padding-bottom: 0.8rem; }
.shop-page__head-top { display: flex; align-items: center; gap: 0.8rem; }
.shop-page__title { font-size: 1.3rem; font-weight: 800; margin: 0; color: var(--color-accent, var(--c-accent)); }
.shop-page__subtitle { font-size: 0.84rem; color: rgba(var(--cwt-59-16-16), 0.7); margin: 0; }
.shop-search-bar { display: flex; gap: 0.4rem; width: 100%; margin-top: 0.2rem; }
.shop-search-input { flex: 1; border: 1.5px solid rgba(var(--c-accent-rgb), 0.2); border-radius: 10px; padding: 0.55rem 0.8rem; font: inherit; font-size: 0.88rem; background: rgba(255,255,255,0.9); box-sizing: border-box; }
.shop-search-input:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.shop-search-btn { padding: 0.55rem 1.2rem; border-radius: 10px; font-weight: 700; }
.shop-categories { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.2rem; margin-top: 0.2rem; }
.shop-cat-chip { border: 1px solid rgba(var(--c-accent-rgb), 0.2); border-radius: 20px; background: rgba(255,255,255,0.75); padding: 0.35rem 0.75rem; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--color-text, var(--c-text)); transition: all 0.2s ease; }
.shop-cat-chip:hover, .shop-cat-chip.is-active { background: var(--color-accent, var(--c-accent)); color: #ffffff; border-color: var(--color-accent, var(--c-accent)); }
.shop-status { font-size: 0.84rem; color: var(--color-accent, var(--c-accent)); text-align: center; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; padding-bottom: 2rem; }
.shop-card { border: 1px solid rgba(var(--c-accent-rgb), 0.15); border-radius: 12px; background: #ffffff; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 3px 10px rgba(0,0,0,0.03); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.shop-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.shop-card__img-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1.1; overflow: hidden; background: rgba(var(--c-cream-rgb), 0.5); }
.shop-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.shop-card__badge { position: absolute; top: 0.4rem; left: 0.4rem; background: rgba(0,0,0,0.65); color: #fff; font-size: 0.62rem; font-weight: 700; padding: 0.2rem 0.45rem; border-radius: 6px; backdrop-filter: blur(4px); }
.shop-card__body { padding: 0.6rem; display: flex; flex-direction: column; flex: 1; justify-content: space-between; gap: 0.4rem; }
.shop-card__title { font-size: 0.82rem; font-weight: 600; color: var(--color-accent, var(--c-accent)); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.shop-card__meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.76rem; }
.shop-card__price { font-weight: 800; color: #e74c3c; font-size: 0.88rem; }
.shop-card__rating { font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.7); }
.shop-card__actions { display: flex; gap: 0.3rem; margin-top: 0.2rem; }
.shop-btn { flex: 1; border: none; border-radius: 8px; padding: 0.4rem 0.3rem; font: inherit; font-size: 0.76rem; font-weight: 700; text-align: center; cursor: pointer; text-decoration: none; box-sizing: border-box; display: inline-block; }
.shop-btn--primary { background: var(--color-accent, var(--c-accent)); color: #ffffff; }
.shop-btn--primary:hover { background: var(--color-primary-dark, var(--c-primary-dark)); color: #ffffff; }
.shop-loading, .shop-empty { grid-column: 1 / -1; text-align: center; padding: 2rem; font-size: 0.9rem; color: rgba(var(--cwt-59-16-16), 0.65); }

/* --- Etiquette, Dance & Music, SPA & Self-care Styles --- */
.etiq__list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.5rem 0.2rem;
    overflow-y: auto;
    max-height: 52vh;
}
.etiq__card {
    border: 1px solid rgba(var(--c-accent-rgb, 212, 175, 55), 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    padding: 0.8rem 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}
.etiq__card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--c-accent-rgb, 212, 175, 55), 0.08);
    border-color: rgba(var(--c-accent-rgb, 212, 175, 55), 0.3);
}
.etiq__card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary-dark, #5a4020);
    margin-bottom: 0.3rem;
}
.etiq__card-desc {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text, #444);
}

/* Music Player Simulation */
.music-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--color-primary-dark, #5a4020), #2c1a0a);
    color: #fff;
    padding: 1rem 1.2rem;
    border-radius: 14px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.music-player__now-playing {
    font-size: 0.9rem;
    font-weight: 600;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 1rem;
}
.music-player__equalizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    width: 24px;
    height: 18px;
}
.eq-bar {
    width: 3px;
    height: 3px;
    background-color: var(--color-accent, #d4af37);
    border-radius: 1px;
    transition: height 0.25s ease;
}
@keyframes eqFlow {
    0% { height: 3px; }
    50% { height: 18px; }
    100% { height: 3px; }
}
.music-player--playing .eq-bar:nth-child(1) { animation: eqFlow 0.8s ease-in-out infinite alternate; }
.music-player--playing .eq-bar:nth-child(2) { animation: eqFlow 0.5s ease-in-out infinite alternate 0.1s; }
.music-player--playing .eq-bar:nth-child(3) { animation: eqFlow 0.9s ease-in-out infinite alternate 0.2s; }
.music-player--playing .eq-bar:nth-child(4) { animation: eqFlow 0.6s ease-in-out infinite alternate 0.05s; }
.music-player--playing .eq-bar:nth-child(5) { animation: eqFlow 0.7s ease-in-out infinite alternate 0.15s; }

.track-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow-y: auto;
    max-height: 36vh;
}
.track-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(var(--c-accent-rgb, 212, 175, 55), 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}
.track-row:hover {
    background: rgba(var(--c-primary-rgb, 180, 140, 90), 0.08);
}
.track-row--active {
    background: rgba(var(--c-accent-rgb, 212, 175, 55), 0.12);
    border-color: var(--color-accent, #d4af37);
}
.track-row__details {
    flex: 1;
}
.track-row__title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-primary-dark, #5a4020);
}
.track-row__desc {
    font-size: 0.74rem;
    color: var(--color-text, #666);
    margin-top: 0.1rem;
}
.track-row__duration {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(var(--cwt-59-16-16), 0.6);
}

/* Breathing Timer */
.breathe-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    gap: 1rem;
}
.breathe-circle-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.breathe-circle {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--c-primary-rgb, 180, 140, 90), 0.25) 0%, rgba(var(--c-accent-rgb, 212, 175, 55), 0.45) 100%);
    box-shadow: 0 0 20px rgba(var(--c-accent-rgb, 212, 175, 55), 0.25);
    transition: all 4s ease-in-out;
}
.breathe-circle--breathe-in {
    transform: scale(1.4);
    background: radial-gradient(circle, rgba(var(--c-accent-rgb, 212, 175, 55), 0.3) 0%, rgba(var(--c-primary-rgb, 180, 140, 90), 0.55) 100%);
    box-shadow: 0 0 35px rgba(var(--c-primary-rgb, 180, 140, 90), 0.4);
}
.breathe-circle--breathe-out {
    transform: scale(0.9);
}
.breathe-circle--hold {
    transform: scale(1.4);
    box-shadow: 0 0 45px rgba(var(--c-accent-rgb, 212, 175, 55), 0.65);
}
.breathe-circle--paused {
    transition: none;
    background: radial-gradient(circle, rgba(120, 120, 120, 0.2) 0%, rgba(150, 150, 150, 0.35) 100%);
    box-shadow: none;
}
.breathe-text {
    position: relative;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary-dark, #5a4020);
    z-index: 2;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
.breathe-countdown {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-accent, #d4af37);
}
.breathe-controls {
    display: flex;
    justify-content: center;
}

/* Self-care Checklist */
.checklist-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.4rem 0.2rem;
    overflow-y: auto;
    max-height: 48vh;
}
.checklist-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(var(--c-accent-rgb, 212, 175, 55), 0.15);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}
.checklist-row:hover {
    background: #fff;
    border-color: rgba(var(--c-accent-rgb, 212, 175, 55), 0.35);
}
.checklist-cb {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-accent, #d4af37);
    cursor: pointer;
}
.checklist-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text, #333);
}
.checklist-cb:checked + .checklist-label {
    text-decoration: line-through;
    color: #888;
}


/* === Organizer -> Statistics tab ========================================= */
.plan-stats { display: flex; flex-direction: column; min-height: 0; gap: 0.6rem; overflow-y: auto; padding: 0.2rem 0.1rem 0.6rem; }
.plan-stats__bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.plan-stats__title { font-weight: 700; color: var(--color-accent, var(--c-accent)); font-size: 0.95rem; }
.plan-stats__ranges { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; }
.plan-stats__range { border: 1px solid rgba(var(--c-accent-rgb), 0.18); background: var(--c-card); color: var(--c-text);
    border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.plan-stats__range--active { background: var(--color-primary, var(--c-primary)); color: #fff; border-color: transparent; }
.plan-stats__refresh { border: none; background: rgba(var(--c-accent-rgb), 0.08); color: var(--color-accent, var(--c-accent));
    border-radius: 999px; width: 26px; height: 26px; font-size: 0.95rem; cursor: pointer; line-height: 1; }
.plan-stats__refresh:hover { background: rgba(var(--c-accent-rgb), 0.16); }
.plan-stats__custom { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.plan-stats__date { border: 1px solid rgba(var(--c-accent-rgb), 0.18); background: var(--c-card); color: var(--c-text);
    border-radius: 8px; padding: 0.16rem 0.4rem; font-size: 0.74rem; font-family: inherit; max-width: 8.8rem; }
.plan-stats__dash { color: var(--c-text); opacity: 0.6; font-size: 0.8rem; }
.plan-stats__apply { border: none; background: rgba(var(--c-accent-rgb), 0.12); color: var(--color-accent, var(--c-accent));
    border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.plan-stats__apply:hover { background: rgba(var(--c-accent-rgb), 0.2); }

.plan-stats__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0.45rem; }
.plan-stats__card { background: rgba(var(--c-cream-rgb), 0.85); border: 1px solid rgba(var(--c-accent-rgb), 0.12);
    border-radius: 12px; padding: 0.55rem 0.5rem; text-align: center; }
.plan-stats__cardicon { font-size: 1.05rem; line-height: 1; }
.plan-stats__cardbig { font-size: 1.35rem; font-weight: 800; color: var(--color-accent, var(--c-accent)); line-height: 1.1; margin-top: 0.15rem; }
.plan-stats__cardlabel { font-size: 0.7rem; font-weight: 600; color: rgba(var(--c-shadow-rgb), 0.8); margin-top: 0.1rem; }
.plan-stats__cardsub { font-size: 0.64rem; color: rgba(var(--c-shadow-rgb), 0.55); margin-top: 0.05rem; }

.plan-stats__chartwrap { background: rgba(var(--c-cream-rgb), 0.85); border: 1px solid rgba(var(--c-accent-rgb), 0.12);
    border-radius: 12px; padding: 0.55rem 0.6rem; position: relative; }
.plan-stats__charthead { font-size: 0.78rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); margin-bottom: 0.3rem; }
.plan-stats__legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.55rem; margin-bottom: 0.35rem; }
.plan-stats__legitem { display: inline-flex; align-items: center; gap: 0.28rem; border: none; background: none;
    font-size: 0.68rem; color: rgba(var(--c-shadow-rgb), 0.85); cursor: pointer; padding: 0.1rem 0.15rem; }
.plan-stats__legitem.is-off { opacity: 0.35; text-decoration: line-through; }
.plan-stats__legdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.plan-stats__chart { position: relative; width: 100%; }
.plan-stats__svg { width: 100%; height: auto; display: block; }
.plan-stats__grid { stroke: rgba(var(--c-accent-rgb), 0.12); stroke-width: 1; }
.plan-stats__ytxt, .plan-stats__xtxt { fill: rgba(var(--c-shadow-rgb), 0.55); font-size: 9px; font-family: inherit; }
.plan-stats__hover { stroke: rgba(var(--c-accent-rgb), 0.4); stroke-width: 1; stroke-dasharray: 3 3; }
.plan-stats__empty { text-align: center; color: rgba(var(--c-shadow-rgb), 0.5); font-size: 0.82rem; padding: 1.4rem 0.5rem; }
.plan-stats__tip { position: absolute; top: 6px; pointer-events: none; background: var(--c-card);
    border: 1px solid rgba(var(--c-accent-rgb), 0.18); border-radius: 8px; padding: 0.35rem 0.5rem; font-size: 0.68rem;
    box-shadow: var(--shadow-soft); z-index: 3; min-width: 96px; }
.plan-stats__tipday { font-weight: 700; color: var(--color-accent, var(--c-accent)); margin-bottom: 0.15rem; }
.plan-stats__tiprow { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }

.plan-stats__lists { display: flex; flex-direction: column; gap: 0.35rem; }
.plan-stats__listshead { font-size: 0.78rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); margin-top: 0.1rem; }
.plan-stats__listrow { display: flex; align-items: center; gap: 0.45rem; }
.plan-stats__listicon { flex: 0 0 auto; width: 1.2rem; text-align: center; }
.plan-stats__listname { flex: 0 0 82px; font-size: 0.76rem; font-weight: 600; color: rgba(var(--c-shadow-rgb), 0.85); }
.plan-stats__listbar { flex: 1; height: 7px; background: rgba(var(--c-accent-rgb), 0.1); border-radius: 999px; overflow: hidden; }
.plan-stats__listfill { height: 100%; background: linear-gradient(90deg, #7bbf86, #4a9d63); border-radius: 999px; transition: width 0.3s ease; }
.plan-stats__listnums { flex: 0 0 auto; font-size: 0.68rem; color: rgba(var(--c-shadow-rgb), 0.6); white-space: nowrap; }
.plan-stats__note { font-size: 0.68rem; color: rgba(var(--c-shadow-rgb), 0.5); text-align: center; margin: 0.2rem 0 0; }

/* ── Trackers (Health / Diet / Horoscope) — reusable widget (trackers.js) ── */
.trk { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.4rem 0.2rem 0.8rem; overflow-y: auto; min-height: 0; }
.trk__head { display: flex; align-items: center; gap: 0.4rem; }
.trk__icon { font-size: 1.1rem; line-height: 1; }
.trk__title { font-weight: 800; color: var(--color-accent, var(--c-accent)); font-size: 0.98rem; }
.trk__hint { margin: 0; font-size: 0.72rem; color: rgba(var(--c-shadow-rgb), 0.6); }
.trk__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.trk__chip { display: inline-flex; align-items: center; gap: 0.15rem; border: 1px solid rgba(var(--c-accent-rgb), 0.18);
    background: var(--c-card); color: var(--c-text); border-radius: 999px; padding: 0.28rem 0.7rem; font-size: 0.76rem;
    font-weight: 600; cursor: pointer; transition: all 0.15s ease; }
.trk__chip:hover { border-color: rgba(var(--c-accent-rgb), 0.4); }
.trk__chip--on { background: rgba(var(--c-cream-rgb), 0.9); }
.trk__chip--active { background: var(--color-primary, var(--c-primary)); color: #fff; border-color: transparent; }
.trk__chipval { font-weight: 700; opacity: 0.85; }
.trk__chip--active .trk__chipval { opacity: 0.95; }

.trk__panel { display: flex; flex-direction: column; gap: 0.5rem; background: rgba(var(--c-cream-rgb), 0.6);
    border: 1px solid rgba(var(--c-accent-rgb), 0.12); border-radius: 14px; padding: 0.6rem 0.65rem; }
.trk__log { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.trk__logtitle { font-size: 0.78rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); flex: 1 1 100%; }
.trk__num { width: 6.5rem; border: 1px solid rgba(var(--c-accent-rgb), 0.25); border-radius: 8px; padding: 0.35rem 0.5rem;
    font-size: 0.85rem; background: var(--c-card); color: var(--c-text); }
.trk__unit { font-size: 0.74rem; color: rgba(var(--c-shadow-rgb), 0.7); }
.trk__save { border: none; background: var(--color-primary, var(--c-primary)); color: #fff; border-radius: 8px;
    padding: 0.35rem 0.85rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.trk__save:hover { filter: brightness(1.05); }
.trk__yesno { display: inline-flex; gap: 0.35rem; }
.trk__yn { border: 1px solid rgba(var(--c-accent-rgb), 0.25); background: var(--c-card); color: var(--c-text);
    border-radius: 8px; padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.trk__yn:hover { background: rgba(var(--c-cream-rgb), 0.9); }

.trk__ranges { display: inline-flex; gap: 0.25rem; align-self: flex-end; flex-wrap: wrap; align-items: center; }
.trk__range { border: 1px solid rgba(var(--c-accent-rgb), 0.18); background: var(--c-card); color: var(--c-text);
    border-radius: 999px; padding: 0.18rem 0.6rem; font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.trk__range--active { background: var(--color-primary, var(--c-primary)); color: #fff; border-color: transparent; }
.trk__custom { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.trk__date { border: 1px solid rgba(var(--c-accent-rgb), 0.18); background: var(--c-card); color: var(--c-text);
    border-radius: 8px; padding: 0.14rem 0.35rem; font-size: 0.7rem; font-family: inherit; max-width: 8.4rem; }
.trk__dash { color: var(--c-text); opacity: 0.6; font-size: 0.75rem; }
.trk__apply { border: none; background: rgba(var(--c-accent-rgb), 0.12); color: var(--color-accent, var(--c-accent));
    border-radius: 999px; padding: 0.16rem 0.6rem; font-size: 0.7rem; font-weight: 600; cursor: pointer; }
.trk__apply:hover { background: rgba(var(--c-accent-rgb), 0.2); }

.trk__chart { position: relative; width: 100%; background: rgba(var(--c-card-rgb, 255,255,255), 0.4); border-radius: 10px; }
.trk__svg { width: 100%; height: auto; display: block; }
.trk__grid { stroke: rgba(var(--c-accent-rgb), 0.12); stroke-width: 1; }
.trk__goalline { stroke: #e08a3c; stroke-width: 1.2; stroke-dasharray: 4 3; }
.trk__goaltxt { fill: #e08a3c; font-size: 9px; font-weight: 700; font-family: inherit; }
.trk__ytxt, .trk__xtxt { fill: rgba(var(--c-shadow-rgb), 0.55); font-size: 9px; font-family: inherit; }
.trk__polyline { stroke: var(--color-primary, var(--c-primary)); }
.trk__dot { fill: var(--color-primary, var(--c-primary)); }
.trk__bar--yes { fill: #4a9d63; }
.trk__bar--no { fill: rgba(var(--c-shadow-rgb), 0.25); }
.trk__empty { text-align: center; color: rgba(var(--c-shadow-rgb), 0.5); font-size: 0.82rem; padding: 1.4rem 0.5rem; }

/* Blindfolded Lady Justice scales — horoscope right/wrong tally */
.trk__justice { width: 100%; }
.trkj { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.4rem 0.2rem 0.2rem; }
.trkj__svg { width: 100%; max-width: 320px; height: auto; display: block; }
.trkj__base, .trkj__post { fill: rgba(var(--c-shadow-rgb), 0.55); }
.trkj__robe { fill: rgba(var(--c-accent-rgb), 0.5); }
.trkj__head { fill: rgba(var(--c-accent-rgb), 0.65); }
.trkj__blindfold { fill: rgba(var(--c-shadow-rgb), 0.85); }
.trkj__blindfold-tie { stroke: rgba(var(--c-shadow-rgb), 0.85); stroke-width: 2; fill: none; stroke-linecap: round; }
.trkj__rod { stroke: rgba(var(--c-shadow-rgb), 0.55); stroke-width: 3; stroke-linecap: round; }
.trkj__beam { stroke: rgba(var(--c-shadow-rgb), 0.75); stroke-width: 4; stroke-linecap: round; transition: all 0.5s ease; }
.trkj__pivot { fill: rgba(var(--c-shadow-rgb), 0.75); }
.trkj__chain { stroke: rgba(var(--c-shadow-rgb), 0.45); stroke-width: 1.5; }
.trkj__pan { stroke: rgba(var(--c-shadow-rgb), 0.5); stroke-width: 1.5; }
.trkj__pan--right { fill: rgba(74, 157, 99, 0.32); }
.trkj__pan--wrong { fill: rgba(209, 89, 106, 0.3); }
.trkj__count { fill: var(--c-text); font-size: 15px; font-weight: 800; font-family: inherit; }
.trkj__panlabel { fill: rgba(var(--c-shadow-rgb), 0.7); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; font-family: inherit; }
.trkj__verdict { font-size: 0.82rem; color: rgba(var(--c-shadow-rgb), 0.9); text-align: center; }
.trkj__verdict b { color: var(--c-text); }

.trk__summary { font-size: 0.8rem; color: rgba(var(--c-shadow-rgb), 0.85); display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: center; }
.trk__sumempty { color: rgba(var(--c-shadow-rgb), 0.5); font-size: 0.78rem; }
.trk--up { color: #4a9d63; font-weight: 800; }
.trk--down { color: #d1596a; font-weight: 800; }
.trk--flat { color: rgba(var(--c-shadow-rgb), 0.6); font-weight: 700; }
.trk--goal { background: rgba(224, 138, 60, 0.14); color: #c56f28; border-radius: 999px; padding: 0.05rem 0.5rem; font-weight: 700; }

.trk__settings { border-top: 1px dashed rgba(var(--c-accent-rgb), 0.18); padding-top: 0.35rem; }
.trk__settings > summary { cursor: pointer; font-size: 0.76rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); list-style: none; }
.trk__settings > summary::-webkit-details-marker { display: none; }
.trk__setbody { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.4rem 0.1rem 0.1rem; }
.trk__setrow { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: rgba(var(--c-shadow-rgb), 0.85); }
.trk__setrow--check { gap: 0.5rem; }
.trk__setrow input[type="number"], .trk__setrow input[type="time"] { width: 5.5rem; border: 1px solid rgba(var(--c-accent-rgb), 0.25);
    border-radius: 8px; padding: 0.25rem 0.45rem; font-size: 0.8rem; background: var(--c-card); color: var(--c-text); }

.trk__status { font-size: 0.72rem; color: rgba(var(--c-shadow-rgb), 0.6); min-height: 1em; }

/* Custom ("track anything") trackers */
.trk__chip--custom { border-style: dashed; }
.trk__chipdot { color: var(--color-primary, var(--c-primary)); font-size: 0.7rem; }
.trk__chip--active .trk__chipdot { color: #fff; }
.trk__chip--new { border-style: dashed; border-color: rgba(var(--c-accent-rgb), 0.4);
    color: var(--color-accent, var(--c-accent)); background: transparent; font-weight: 700; }
.trk__chip--new:hover { background: rgba(var(--c-cream-rgb), 0.7); }
.trk__customform { display: flex; flex-direction: column; gap: 0.4rem; background: rgba(var(--c-cream-rgb), 0.7);
    border: 1px dashed rgba(var(--c-accent-rgb), 0.3); border-radius: 14px; padding: 0.65rem 0.7rem; margin-top: 0.15rem; }
.trk__cfhead { font-size: 0.78rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); }
.trk__customform .trk__setrow { flex-wrap: wrap; }
.trk__customform input[type="text"], .trk__customform select { flex: 1 1 12rem; min-width: 8rem;
    border: 1px solid rgba(var(--c-accent-rgb), 0.25); border-radius: 8px; padding: 0.3rem 0.5rem;
    font-size: 0.8rem; background: var(--c-card); color: var(--c-text); }
.trk__cfactions { display: flex; gap: 0.5rem; align-items: center; }
.trk__cfcancel { border: 1px solid rgba(var(--c-accent-rgb), 0.25); background: var(--c-card); color: var(--c-text);
    border-radius: 8px; padding: 0.35rem 0.85rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.trk__cfcancel:hover { background: rgba(var(--c-cream-rgb), 0.9); }
.trk__logdesc { flex: 1 1 100%; font-size: 0.73rem; color: rgba(var(--c-shadow-rgb), 0.7); font-style: italic; }
.trk__delcustom { align-self: flex-start; margin-top: 0.2rem; border: 1px solid rgba(209, 89, 106, 0.5);
    background: transparent; color: #d1596a; border-radius: 8px; padding: 0.3rem 0.75rem; font-size: 0.74rem;
    font-weight: 700; cursor: pointer; }
.trk__delcustom:hover { background: rgba(209, 89, 106, 0.12); }

/* Diet meal planner */
.trk__meal { background: rgba(var(--c-cream-rgb), 0.6); border: 1px solid rgba(var(--c-accent-rgb), 0.12);
    border-radius: 14px; padding: 0.55rem 0.65rem; display: flex; flex-direction: column; gap: 0.4rem; }
.trk__mealhead { font-size: 0.82rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); }
.trk__mealcal { font-weight: 800; color: #c56f28; }
.trk__meallist { display: flex; flex-direction: column; gap: 0.3rem; }
.trk__mealrow { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; }
.trk__mealrow--cooked .trk__mealname { text-decoration: line-through; opacity: 0.7; }
.trk__mealname { flex: 1; color: var(--c-text); }
.trk__mealrowcal { font-size: 0.72rem; color: rgba(var(--c-shadow-rgb), 0.7); white-space: nowrap; }
.trk__mealcook, .trk__mealdel { border: none; background: none; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0.1rem; }
.trk__mealdel { color: #d1596a; }
.trk__mealadd { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.trk__mealtitle { flex: 1 1 8rem; border: 1px solid rgba(var(--c-accent-rgb), 0.25); border-radius: 8px; padding: 0.35rem 0.5rem;
    font-size: 0.82rem; background: var(--c-card); color: var(--c-text); }
.trk__mealkcal { width: 4.5rem; border: 1px solid rgba(var(--c-accent-rgb), 0.25); border-radius: 8px; padding: 0.35rem 0.5rem;
    font-size: 0.82rem; background: var(--c-card); color: var(--c-text); }

/* ---------- Esoteric: Dream diary ---------- */
.dream { display: flex; gap: 0.7rem; height: 100%; min-height: 0; overflow: hidden; }
.dream__side { flex: 0 0 34%; max-width: 15rem; display: flex; flex-direction: column; gap: 0.4rem;
    min-height: 0; border-right: 1px solid rgba(var(--c-accent-rgb), 0.12); padding-right: 0.5rem; }
.dream__sidebar { display: flex; flex-direction: column; gap: 0.35rem; flex: 0 0 auto; }
.dream__newbtn { border: none; border-radius: 8px; background: var(--color-primary, var(--cw-c98b7e)); color: #fff;
    font: inherit; font-weight: 600; font-size: 0.82rem; padding: 0.35rem 0.6rem; cursor: pointer; }
.dream__newbtn:hover { background: var(--color-primary-dark, var(--c-primary-dark)); }
.dream__search { border: 1px solid rgba(var(--c-accent-rgb), 0.14); border-radius: 6px; background: rgba(255,255,255,0.6);
    font: inherit; font-size: 0.82rem; padding: 0.3rem 0.4rem; color: var(--color-text, var(--c-text)); }
.dream__search:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.dream__list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dream__entry { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0.3rem; border-radius: 6px;
    border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.08); cursor: pointer; }
.dream__entry:hover { background: rgba(var(--c-primary-rgb), 0.18); }
.dream__entry.is-active { background: rgba(var(--cwt-201-139-126), 0.22); }
.dream__entry-date { font-size: 0.72rem; font-weight: 700; color: var(--color-accent, var(--c-accent)); }
.dream__entry-title { min-width: 0; font-size: 0.74rem; color: rgba(var(--cwt-59-16-16), 0.7);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dream__empty { text-align: center; color: rgba(var(--cwt-59-16-16), 0.5); font-size: 0.78rem; padding: 0.6rem; }

.dream__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; min-height: 0; overflow-y: auto; }
.dream__bar { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.dream__date { border: 1px solid rgba(var(--c-accent-rgb), 0.14); border-radius: 6px; background: rgba(255,255,255,0.6);
    font: inherit; font-size: 0.82rem; padding: 0.25rem 0.4rem; color: var(--color-text, var(--c-text)); }
.dream__status { flex: 1; text-align: right; font-size: 0.72rem; color: rgba(var(--cwt-59-16-16), 0.6); }
.dream__title { border: none; border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.14); background: transparent;
    font: inherit; font-weight: 700; font-size: 0.95rem; color: var(--color-accent, var(--c-accent)); padding: 0.2rem 0.15rem; }
.dream__title::placeholder { color: rgba(var(--cwt-59-16-16), 0.35); font-weight: 400; font-style: italic; }
.dream__title:focus { outline: none; border-bottom-color: var(--color-primary, var(--c-primary)); }
.dream__text { min-height: 6.5rem; resize: vertical; border: 1px solid rgba(var(--c-accent-rgb), 0.14); border-radius: 8px;
    background: rgba(var(--c-cream-rgb), 0.7); padding: 0.5rem; font: inherit; font-size: 0.9rem; line-height: 1.5;
    color: var(--color-text, var(--c-text)); box-sizing: border-box; }
.dream__text:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.dream__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.4rem; }
.dream__field { display: flex; flex-direction: column; gap: 0.12rem; }
.dream__field > span { font-size: 0.68rem; font-weight: 600; color: rgba(var(--cwt-59-16-16), 0.7); }
.dream__field input { border: 1px solid rgba(var(--c-accent-rgb), 0.18); border-radius: 6px; background: rgba(255,255,255,0.6);
    font: inherit; font-size: 0.8rem; padding: 0.28rem 0.4rem; color: var(--color-text, var(--c-text)); }
.dream__field input:focus { outline: none; border-color: var(--color-primary, var(--c-primary)); }
.dream__field--num { max-width: 8rem; }
.dream__checks { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.dream__check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: rgba(var(--cwt-59-16-16), 0.8); }
.dream__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; flex: 0 0 auto; }
.dream__save { border: none; border-radius: 6px; background: var(--color-primary, var(--cw-c98b7e)); color: #fff;
    font: inherit; font-weight: 600; font-size: 0.8rem; padding: 0.35rem 1rem; cursor: pointer; }
.dream__save:hover { background: var(--color-primary-dark, var(--c-primary-dark)); }
.dream__delete { border: 1px solid rgba(var(--c-accent-rgb), 0.25); border-radius: 6px; background: transparent;
    font: inherit; font-size: 0.78rem; padding: 0.3rem 0.8rem; cursor: pointer; color: rgba(var(--cwt-59-16-16), 0.8); }
.dream__delete:hover { background: rgba(var(--cwt-201-139-126), 0.18); }
.dream__meaningbtn { align-self: flex-start; border: 1px solid rgba(var(--c-accent-rgb), 0.3); border-radius: 999px;
    background: rgba(var(--cwt-201-139-126), 0.12); font: inherit; font-weight: 600; font-size: 0.8rem;
    padding: 0.35rem 0.9rem; cursor: pointer; color: var(--color-accent, var(--c-accent)); }
.dream__meaningbtn:hover { background: rgba(var(--cwt-201-139-126), 0.24); }
.dream__meaningbtn:disabled { opacity: 0.6; cursor: default; }
.dream__interp { border: 1px solid rgba(var(--c-accent-rgb), 0.2); border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--cwt-201-139-126), 0.10), rgba(var(--c-cream-rgb), 0.5)); padding: 0.6rem 0.7rem; }
.dream__interp-head { font-weight: 700; font-size: 0.85rem; color: var(--color-accent, var(--c-accent)); margin-bottom: 0.3rem; }
.dream__interp-body { font-size: 0.85rem; line-height: 1.55; color: var(--color-text, var(--c-text)); white-space: pre-wrap; }
.dream__interp-note { margin: 0.4rem 0 0; font-size: 0.68rem; font-style: italic; color: rgba(var(--cwt-59-16-16), 0.55); }

@media (max-width: 640px) {
    .dream { flex-direction: column; overflow-y: auto; }
    .dream__side { flex: 0 0 auto; max-width: none; width: 100%; border-right: none; padding-right: 0;
        border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.12); padding-bottom: 0.45rem; }
    .dream__list { max-height: 26vh; }
}

/* --- Esoteric: Birth Chart Calculator --- */
.eso__subnav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.1);
    padding-bottom: 0.75rem;
}
.eso__subnav-btn {
    padding: 0.45rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(var(--c-shadow-rgb), 0.75);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.eso__subnav-btn:hover {
    color: var(--color-accent);
    background: rgba(var(--c-accent-rgb), 0.05);
}
.eso__subnav-btn.is-active {
    color: #fff;
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.eso__form {
    background: rgba(var(--c-cream-rgb), 0.5);
    border: 1px solid rgba(var(--c-accent-rgb), 0.12);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.eso__form-row {
    display: flex;
    gap: 1rem;
}
@media (max-width: 576px) {
    .eso__form-row {
        flex-direction: column;
        gap: 0.75rem;
    }
}
.eso__form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
}
.eso__form-field input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(var(--c-accent-rgb), 0.25);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 0.85rem;
    box-sizing: border-box;
}
.eso__form-field input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(var(--c-accent-rgb), 0.1);
}
.eso__form-submit {
    align-self: center;
    margin-top: 0.4rem;
    padding: 0.55rem 1.7rem;
    font-size: 0.85rem;
    font-weight: bold;
}
.eso__bc-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
@media (max-width: 768px) {
    .eso__bc-layout {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
}
.eso__bc-left {
    flex: 0 0 320px;
    background: #fff;
    border: 1px solid rgba(var(--c-accent-rgb), 0.12);
    border-radius: 16px;
    padding: 1rem;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(var(--c-shadow-rgb), 0.04);
}
.eso__bc-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}
.eso__bc-card {
    background: rgba(var(--c-cream-rgb), 0.35);
    border: 1px solid rgba(var(--c-accent-rgb), 0.1);
    border-radius: 12px;
    padding: 1.1rem;
}
.eso__bc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.eso__bc-card-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.05rem;
    font-weight: bold;
    color: var(--color-accent);
}
.eso__bc-card-sign {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text);
}
.eso__bc-card-subtitle {
    font-size: 0.72rem;
    color: rgba(var(--c-shadow-rgb), 0.6);
    margin-bottom: 0.6rem;
    font-style: italic;
}
.eso__bc-card-text {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-text);
}
.eso__bc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.eso__bc-table th, .eso__bc-table td {
    padding: 0.45rem 0.5rem;
    text-align: left;
}
.eso__bc-table th {
    font-weight: 700;
    color: var(--color-accent);
    border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.15);
}
.eso__bc-table td {
    border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.06);
    color: var(--color-text);
}
.eso__bc-table tbody tr:last-child td {
    border-bottom: none;
}