/* Mist blue / rock gray. Appearance only: never changes saved layouts or photos. */
:root {
  color-scheme: light dark;
  --page: #ffffff;
  --ink: #252d32;
  --muted: #626d76;
  --surface: #f1f3f5;
  --surface-strong: #ffffff;
  --line: #dce2e6;
  --accent: #3f6588;
  --accent-soft: #e8eff6;
  --on-accent: #ffffff;
  --amber: var(--accent);
  --shadow: 0 12px 36px #18232d08;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #171b1d;
    --ink: #f0f3f5;
    --muted: #b1bcc2;
    --surface: #2c3437;
    --surface-strong: #22292c;
    --line: #465157;
    --accent: #a9c4e4;
    --accent-soft: #303f50;
    --on-accent: #171b1d;
    --shadow: 0 12px 36px #00000018;
  }
  .icon-button .ui-icon, .card-control .ui-icon,
  .card-interest:not([style*="--text-ink"]) .interest-icon-image { filter: invert(1); }
}
html, body { background: var(--page); }
.ambient { display: none; }
.profile-shell { background: var(--page); border-color: transparent; box-shadow: none; }
.prototype-bar { background: var(--page); border-color: var(--line); }
.profile-shell, .prototype-bar, .card, .dialog-panel, .save-status,
.card-control, .size-badge, .save-banner { backdrop-filter: none; -webkit-backdrop-filter: none; }
.prototype-brand, .eyebrow, .field, .profile-footer, .edit-hint { color: var(--muted); }
.avatar { background: var(--surface); color: var(--accent); border-color: var(--line); box-shadow: none; }
.view-switch, .view-toggle, .button-ghost, .icon-button, .dialog-mobile-close,
.type-option, .album-tab, .upload-preview, .crop-workspace, .album-photo,
#albumThumbnails button { background: var(--surface); color: var(--ink); border-color: var(--line); }
.view-button.is-active, .type-icon,
.field input, .field textarea, .field select, .photo-fields select,
input[type="file"]::file-selector-button, .dialog-panel, .save-banner,
.card-control, .size-badge { background: var(--surface-strong); color: var(--ink); border-color: var(--line); }
.button-primary, .album-tab.is-active { background: var(--accent); color: var(--on-accent); }
.edit-hint, .type-option.is-selected { background: var(--accent-soft); border-color: var(--accent); }
.card-social[data-platform], .card-social, .card-spotify, .card-interest { background: var(--surface); border-color: var(--line); box-shadow: none; }
.card-social::after, .card-spotify::after, .card-interest::after { background: none; }
.card-social .card-kicker, .card-social p, .card-interest .card-kicker,
.card-interest p { color: var(--muted); }
.spotify-caption .spotify-link { color: #d5e5f2; }
.add-card, .add-card:hover { background: var(--surface); color: var(--accent); border-color: var(--line); }
.card-social .card-icon, .card-social.card-half .card-icon {
  flex: 0 0 32px; width: 32px; height: 32px; background: none;
}
.brand-icon {
  display: block; width: 32px; height: 32px; background: var(--brand, var(--ink));
  mask: var(--brand-image) center / contain no-repeat;
  -webkit-mask: var(--brand-image) center / contain no-repeat;
}
.brand-instagram { --brand: #e4405f; --brand-image: url('./assets/icons/simple-instagram.svg'); }
.brand-facebook { --brand: #0866ff; --brand-image: url('./assets/icons/simple-facebook.svg'); }
.brand-youtube { --brand: #ff0033; --brand-image: url('./assets/icons/simple-youtube.svg'); }
.brand-spotify { --brand: #1db954; --brand-image: url('./assets/icons/simple-spotify.svg'); }
.brand-plurk { --brand: #ff574d; --brand-image: url('./assets/icons/simple-plurk.svg'); }
.brand-x { --brand-image: url('./assets/icons/simple-x.svg'); mask-size:26px 26px; -webkit-mask-size:26px 26px; }
.brand-flickr { --brand-image: url('./assets/icons/simple-flickr.svg'); background:linear-gradient(to right,#0063dc 50%,#ff0084 50%); }
.brand-threads { --brand-image: url('./assets/icons/simple-threads.svg'); }
.brand-github { --brand-image: url('./assets/icons/simple-github.svg'); }

/* Transparent media exposes the actual page, not a hard-coded light/dark fill. */
.card.card-photo.photo-blend,
.card.card-photo.photo-blend:hover {
  background:transparent; border-color:transparent; box-shadow:none; border-radius:0;
}
.card.card-photo.photo-blend.is-editing { outline:1px dashed var(--accent); outline-offset:-1px; }
.card.card-photo.photo-blend.is-selected { outline:2px solid var(--accent); outline-offset:-2px; }
.stage .card.card-photo.photo-blend .card-content { color:var(--ink); text-shadow:none; }
.card-photo.photo-blend .card-content p { color:var(--ink); }
.card-photo.photo-blend .card-content::before { display:none; }
.photo-blend-option { display:flex; align-items:center; gap:8px; margin-top:14px; color:var(--ink); }
.photo-blend-option input { width:18px; height:18px; flex:none; }