/* Shared appearance system: four palettes, each with light and dark surfaces. */
:root { color-scheme: light; --surface: #f8f4f7; --on-accent: #fff; --focus: var(--plum); }
:root[data-accent="rose"] { --plum: #a14464; --plum-dark: #7e304c; --plum-soft: #f6e5ec; --rose: #ddacb5; --cream: #fff8f8; --line: #eddae2; }
:root[data-accent="ocean"] { --plum: #276e96; --plum-dark: #205678; --plum-soft: #e0eff6; --rose: #95bfce; --cream: #f6fbfd; --line: #d6e5ed; }
:root[data-accent="sage"] { --plum: #456e54; --plum-dark: #32543f; --plum-soft: #e3eee4; --rose: #b0c7a4; --cream: #f8fbf5; --line: #dce6d9; }
:root[data-theme="dark"] { color-scheme: dark; --ink: #f1edf3; --muted: #beb3c4; --paper: #242129; --surface: #2d2833; --cream: #17151b; --line: #443b4c; --plum: #d1acdb; --plum-dark: #e1c4e8; --plum-soft: #3a2e43; --rose: #b287a7; --on-accent: #201823; --success: #8ac8a1; --danger: #ffabb2; --warning: #e3bc7e; --shadow-sm: 0 10px 30px #0003; --shadow-lg: 0 24px 70px #0005; }
:root[data-theme="dark"][data-accent="rose"] { --plum: #efa6bc; --plum-dark: #ffd0df; --plum-soft: #412a36; --rose: #ce8e9f; }
:root[data-theme="dark"][data-accent="ocean"] { --plum: #92cdee; --plum-dark: #bce3f9; --plum-soft: #243c4b; --rose: #739dbb; }
:root[data-theme="dark"][data-accent="sage"] { --plum: #abcfb3; --plum-dark: #cee6cb; --plum-soft: #2d3d32; --rose: #89a792; }
body, .admin-page { background: radial-gradient(ellipse at 8% 4%, color-mix(in srgb, var(--rose) 14%, transparent), transparent 44rem), var(--cream); }
.hero { background: linear-gradient(125deg, var(--paper), var(--plum-soft)); border-color: var(--line); }
.hero-points span { color: var(--ink); }
.hero-points i { background: color-mix(in srgb, var(--success) 14%, var(--paper)); }
.art-card { background: linear-gradient(145deg, var(--plum), var(--plum-dark)); color: var(--on-accent); }
.booking-shell, .language-switcher, .admin-header, .login-card, .stat-card, .admin-panel, .icon-button, .slot-button, .empty-state, input, textarea, select, .secondary-button, .ghost-button, .calendar-day, .progress li span { background: var(--paper); }
.service-card, .calendar-card, .slots-card, .booking-row, .blocked-row, .admin-empty, .time-fields, .progress li, .timezone { background: var(--surface); }
.service-card.selected, .summary-card { background: linear-gradient(145deg, var(--paper), var(--plum-soft)); }
input, textarea, select, .empty-state, .admin-empty { border-color: var(--line); }
.language-switcher button.active, .primary-button, .brand-mark, .slot-button.selected, .slot-button:hover, .calendar-day.selected, .progress li.active span, .skip-link { color: var(--on-accent); background: var(--plum); }
.calendar-day:disabled { background: transparent; color: var(--muted); opacity: .6; }
.calendar-day.selected:disabled { background: var(--plum); color: var(--on-accent); }
.danger-button, .status { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--paper)); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.status.success { color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--paper)); border-color: var(--line); }
.success-icon { color: var(--paper); border-color: var(--surface); }
.toast { color: var(--paper); background: var(--ink); }
.toast.error, .toast.success { color: var(--paper); }
.skeleton { background: var(--surface); }
.skeleton::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--muted) 12%, transparent), transparent); }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
select { width: 100%; min-height: 50px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font: inherit; }
textarea { resize: vertical; }
img { max-width: 100%; }
.header-tools, .admin-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand { min-width: 0; }
.brand > span:last-child { min-width: 0; }
.brand strong, [data-salon-name] { overflow-wrap: anywhere; }
.brand-mark { font-size: 17px; }
.language-switcher button { min-height: 44px; }
.appearance { position: relative; font-size: 13px; }
.appearance summary { display: flex; min-height: 52px; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 26px; font-weight: 750; }
.appearance summary::-webkit-details-marker { display: none; }
.appearance summary > span:first-child { font-size: 22px; }
.appearance-panel { position: absolute; z-index: 50; top: calc(100% + 10px); right: 0; width: min(290px, calc(100vw - 24px)); padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); }
.appearance fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.appearance fieldset + fieldset { margin-top: 18px; }
.appearance legend { padding: 0 0 10px; font-weight: 750; color: var(--muted); }
.appearance-theme, .appearance-accent { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.appearance button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; cursor: pointer; }
.appearance button[aria-pressed="true"] { border-color: var(--plum); background: var(--plum-soft); box-shadow: inset 0 0 0 1px var(--plum); }
.swatch { width: 17px; height: 17px; border-radius: 50%; flex: 0 0 17px; }
.swatch.plum { background: #926396; } .swatch.rose { background: #ca6d8b; } .swatch.ocean { background: #4897c0; } .swatch.sage { background: #6f9b75; }
.journal-section { margin: 50px auto; width: min(var(--content), calc(100% - 40px)); }
.journal-section > .section-heading { padding: 0; }
.journal-section .section-heading p:not(.eyebrow) { color: var(--muted); }
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.journal-card { overflow: hidden; min-width: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); box-shadow: var(--shadow-sm); }
.journal-card > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.journal-card img, .journal-placeholder { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; background: var(--plum-soft); }
.journal-placeholder { display: grid; place-items: center; font-size: 65px; color: var(--plum); }
.journal-copy { padding: 22px; display: flex; flex-direction: column; flex: 1; gap: 10px; overflow-wrap: anywhere; }
.journal-copy h3 { font: 500 25px/1.2 Georgia, serif; margin: 0; }
.journal-copy p, .journal-copy small { margin: 0; color: var(--muted); }
.journal-copy p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.read-link { margin-top: auto; padding-top: 10px; font-weight: 750; color: var(--plum); }
.article-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.article-nav a { color: var(--plum); }
.article-reader { max-width: 800px; margin: 0 auto; padding: clamp(18px, 5vw, 46px); background: var(--paper); border: 1px solid var(--line); border-radius: 24px; overflow-wrap: anywhere; }
.article-reader h1 { font-size: clamp(30px, 6vw, 52px); line-height: 1.13; margin: 14px 0 28px; }
.article-reader img { display: block; width: 100%; height: auto; border-radius: 14px; }
.article-body { font-size: 17px; line-height: 1.8; }
.article-body p { white-space: pre-wrap; }
.article-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }

.gallery-detail h1 { font: 500 32px/1.2 Georgia, serif; margin: 0 0 20px; }
.gallery-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gallery-photo-thumb { padding: 0; border: none; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--plum-soft); }
.gallery-photo-thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gallery-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.82); padding: 20px; }
.gallery-lightbox img { max-width: min(90vw, 1100px); max-height: 86vh; object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.gallery-lightbox-close, .gallery-lightbox-nav { position: absolute; border: none; border-radius: 50%; background: var(--paper); color: var(--ink); line-height: 1; cursor: pointer; }
.gallery-lightbox-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 22px; }
.gallery-lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 26px; }
.gallery-lightbox-nav.prev { left: 18px; }
.gallery-lightbox-nav.next { right: 18px; }
.translation-hint, .editor-hint { color: var(--muted); font-size: 13px; line-height: 1.6; }
.refresh-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.booking-filters { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 12px; align-items: end; margin-bottom: 20px; }
.booking-filters label { display: grid; gap: 6px; font-size: 13px; min-width: 0; }
.booking-info { min-width: 0; overflow-wrap: anywhere; }
.booking-info strong, .booking-info span { white-space: normal; overflow: visible; text-overflow: clip; }
.checkbox-label { background: var(--surface); }
.calendar-day.loading-day { color: transparent; background: var(--surface); }
.booking-state { display: inline-flex; align-items: center; align-self: flex-start; padding: 4px 8px; font-size: 11px; border-radius: 8px; background: var(--plum-soft); color: var(--plum); }
.booking-state.cancelled { color: var(--muted); background: var(--surface); }
.booking-row.is-cancelled { border-style: dashed; }
.booking-row .small-danger { white-space: normal; min-height: 44px; text-align: center; max-width: 130px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.pagination span { color: var(--muted); font-size: 13px; text-align: center; }
.settings-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.settings-form .primary-button { grid-column: auto; }
.admin-grid > *, .admin-panel, .panel-heading > div { min-width: 0; }
.admin-grid + .admin-panel { margin-top: 22px; }
.admin-article-list { display: grid; gap: 12px; }
.admin-article-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.admin-article-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.admin-article-row strong, .admin-article-row small { display: block; }
.admin-article-row small { margin-top: 4px; color: var(--muted); }
.article-actions { display: flex; gap: 8px; flex-shrink: 0; }
.article-editor { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; scroll-margin-top: 160px; }
.article-editor h3 { margin: 0; }
.article-translation { display: grid; gap: 16px; }
.translation-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.translation-tabs button { min-height: 48px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.translation-tabs button[aria-selected="true"] { color: var(--on-accent); background: var(--plum); }
.photo-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.photo-preview { display: grid; align-content: start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.photo-preview img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.photo-preview .photo-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-preview button { padding: 8px; min-height: 44px; flex: 1; font-size: 12px; }
@media (max-width: 900px) {
  .site-header, .admin-header { flex-wrap: wrap; }
  .site-header { padding: 14px 0; }
  .header-tools, .admin-header-actions { width: 100%; justify-content: space-between; }
  .admin-header { position: relative; }
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-form { grid-template-columns: 1fr; }
  .booking-filters { grid-template-columns: 1fr 1fr; }
  .booking-filters button { grid-column: 1 / -1; }
  .photo-previews { grid-template-columns: 1fr; }
  .photo-preview img { max-height: 250px; }
}
@media (max-width: 560px) {
  .site-header, .journal-section { width: calc(100% - 24px); }
  .journal-section { margin: 30px auto; }
  .journal-grid, .article-gallery { grid-template-columns: 1fr; }
  .gallery-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-lightbox-nav { width: 40px; height: 40px; font-size: 20px; }
  .gallery-lightbox-close { width: 38px; height: 38px; font-size: 18px; }
  .admin-header { padding: 14px 12px; }
  .appearance summary { padding: 8px 10px; font-size: 12px; }
  .admin-header-actions .appearance-panel { left: 0; right: auto; }
  .admin-header-actions { gap: 6px; }
  .admin-header-actions .ghost-button { padding: 8px 10px; min-height: 44px; }
  .admin-article-row { align-items: stretch; flex-direction: column; }
  .article-actions { flex-wrap: wrap; }
  .article-actions button { flex: 1; min-width: 84px; }
  .panel-heading { flex-wrap: wrap; }
  .article-nav { align-items: flex-start; flex-direction: column; }
  .article-body { font-size: 16px; }
  .translation-tabs button { font-size: 12px; }
  input, textarea, select { font-size: 16px; }
  .calendar-grid { gap: 3px; }
  .calendar-card { padding: 12px; }
  .calendar-day { min-height: 44px; }
  .booking-row { grid-template-columns: 56px minmax(0, 1fr); }
  .booking-row .booking-actions { grid-column: 1 / -1; flex-direction: row; }
  .booking-row .booking-actions > button { flex: 1; max-width: none; width: auto; }
  .reschedule-form { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }