/* okай — карандаш по крафт-бумаге. Мобильный-first (база 360px). */

:root {
  --paper: #f8f2df;
  --pencil: #3a2a1a;
  --pencil-soft: #8a7a5c;
  --accent: #c96f4a;
  --card: #fdf9ec;
  --dot: #a89870;
  --field: #fffdf5;
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;
  /* цветной карандаш для метрик и статусов */
  --c-terracotta: #c96f4a;
  --c-sage: #7a9b76;
  --c-blue: #6b8cae;
  --c-mustard: #d4a94e;
}

/* --- палитры публичной страницы мастера (светлые) --- */
[data-palette="kraft"]      { --paper:#f8f2df; --pencil:#3a2a1a; --pencil-soft:#8a7a5c; --accent:#c96f4a; --card:#fdf9ec; --dot:#a89870; --field:#fffdf5; }
[data-palette="sage"]       { --paper:#f4f2e8; --pencil:#2f3a2c; --pencil-soft:#6f7f66; --accent:#7a9b76; --card:#faf8ee; --dot:#9aa585; --field:#fdfcf4; }
[data-palette="ink"]        { --paper:#eef0f4; --pencil:#23283b; --pencil-soft:#5d6478; --accent:#6b8cae; --card:#f7f8fb; --dot:#98a0b4; --field:#ffffff; }
[data-palette="terracotta"] { --paper:#faf0e6; --pencil:#43302a; --pencil-soft:#8d7166; --accent:#c96f4a; --card:#fdf5ec; --dot:#b09484; --field:#fffaf3; }
[data-palette="lavender"]   { --paper:#f3f0f8; --pencil:#332f3d; --pencil-soft:#6e6884; --accent:#8f7fb8; --card:#faf8fd; --dot:#a79ec2; --field:#fbfaff; }
[data-palette="sea"]        { --paper:#eef4f3; --pencil:#243330; --pencil-soft:#5c716c; --accent:#5e8f86; --card:#f6faf9; --dot:#93aca4; --field:#fbfdfd; }
[data-palette="peach"]      { --paper:#fdf1e7; --pencil:#3d2f26; --pencil-soft:#8a7263; --accent:#e09a6b; --card:#fef6ef; --dot:#c0a48e; --field:#fffaf5; }
[data-palette="graphite"]   { --paper:#f2f2ef; --pencil:#2b2b28; --pencil-soft:#6b6b63; --accent:#7a7a72; --card:#f8f8f5; --dot:#a3a39b; --field:#fcfcfa; }
[data-palette="cherry"]     { --paper:#faf0f0; --pencil:#3d2626; --pencil-soft:#8a5f5f; --accent:#b45a5a; --card:#fdf5f5; --dot:#b98f8f; --field:#fffafa; }
[data-palette="olive"]      { --paper:#f4f4e8; --pencil:#33331f; --pencil-soft:#6e6e4c; --accent:#8a8a4d; --card:#fafaf0; --dot:#a5a57e; --field:#fcfcf5; }

/* --- тёмные варианты палитр --- */
[data-theme="dark"][data-palette="kraft"]      { --paper:#26221c; --pencil:#e8ddc8; --pencil-soft:#9a8d77; --accent:#d9825f; --card:#2e2921; --dot:#5c5344; --field:#383126; }
[data-theme="dark"][data-palette="sage"]       { --paper:#1e241f; --pencil:#dfe6d8; --pencil-soft:#7e8d76; --accent:#8fb08a; --card:#262c25; --dot:#4c5847; --field:#2e362e; }
[data-theme="dark"][data-palette="ink"]        { --paper:#1c1f2b; --pencil:#dde2ee; --pencil-soft:#78809a; --accent:#8aa6c8; --card:#232737; --dot:#454c63; --field:#2a2f42; }
[data-theme="dark"][data-palette="terracotta"] { --paper:#2a2320; --pencil:#ead9cd; --pencil-soft:#9c8478; --accent:#d9825f; --card:#322a26; --dot:#5f4f45; --field:#3b312b; }
[data-theme="dark"][data-palette="lavender"]   { --paper:#221f2b; --pencil:#e3ddef; --pencil-soft:#857c9c; --accent:#a493cc; --card:#2a2635; --dot:#4d4663; --field:#322d40; }
[data-theme="dark"][data-palette="sea"]        { --paper:#1b2423; --pencil:#dbe8e5; --pencil-soft:#72867f; --accent:#76a89e; --card:#222c2b; --dot:#41514c; --field:#2a3533; }
[data-theme="dark"][data-palette="peach"]      { --paper:#2b221c; --pencil:#eddbcb; --pencil-soft:#a08b7b; --accent:#e5a678; --card:#332922; --dot:#5c4d42; --field:#3b3028; }
[data-theme="dark"][data-palette="graphite"]   { --paper:#1e1e1c; --pencil:#e2e2da; --pencil-soft:#83837a; --accent:#96968c; --card:#262624; --dot:#45453f; --field:#2e2e2b; }
[data-theme="dark"][data-palette="cherry"]     { --paper:#261d1d; --pencil:#eedada; --pencil-soft:#9c7c7c; --accent:#c97575; --card:#2e2323; --dot:#523d3d; --field:#372a2a; }
[data-theme="dark"][data-palette="olive"]      { --paper:#212117; --pencil:#e4e4cf; --pencil-soft:#8d8d6a; --accent:#a3a35e; --card:#29291d; --dot:#4a4a34; --field:#313123; }

/* --- шрифты заголовков публичной страницы --- */
[data-font="neucha"] { --font-hand: 'Neucha', cursive; }
[data-font="marck"]  { --font-hand: 'Marck Script', cursive; }
[data-font="system"] { --font-hand: 'Segoe UI', system-ui, sans-serif; }
[data-font="manrope"] { --font-hand: 'Manrope', 'Segoe UI', system-ui, sans-serif; }
[data-font="oswald"] { --font-hand: 'Oswald', 'Segoe UI', system-ui, sans-serif; }
[data-font="playfair"] { --font-hand: 'Playfair Display', Georgia, serif; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 0.6px, transparent 0.6px);
  background-size: 6px 6px;
  color: var(--pencil);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, .hand {
  font-family: var(--font-hand);
  font-weight: 700;
  line-height: 1.15;
  margin: 0.4em 0;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.5rem; }

a { color: var(--pencil); text-decoration-color: var(--accent); }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

/* --- шапка --- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.site-header .logo {
  font-family: 'Caveat', cursive;
  font-size: 2rem;
  font-weight: 700;
  text-decoration: none;
}
.site-header nav a { margin-left: 14px; }
/* Шапка: один ряд — колокольчик → тема → вход/выход, без наложений */
.site-header nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-header nav .notify-bell { margin-right: 2px; }
.site-header nav .theme-toggle { position: static; }
.site-header nav .theme-toggle { margin: 0; }

/* --- карандашные карточки и кнопки --- */
.pencil-card {
  background: var(--card);
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 18px;
  margin: 14px 0;
  box-shadow: 3px 4px 0 rgba(58, 42, 26, 0.15);
}

.btn {
  display: inline-block;
  background: var(--paper);
  color: var(--pencil);
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 10px 22px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 2px 3px 0 rgba(58, 42, 26, 0.25);
  transition: transform 0.08s ease;
}
.btn:hover { transform: rotate(-0.6deg) translateY(-1px); }
.btn:active { transform: translate(1px, 2px); box-shadow: none; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-small { padding: 5px 12px; font-size: 0.9rem; }
.btn-danger { border-color: #a33; color: #a33; }

/* --- формы --- */
label { display: block; margin-top: 12px; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="tel"], input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"],
select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--pencil);
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
  background: var(--field);
  font: inherit;
  color: var(--pencil);
}
input:focus, select:focus, textarea:focus { outline: 2px dashed var(--accent); outline-offset: 2px; }
input[type="checkbox"] { width: auto; transform: scale(1.4); margin-right: 6px; }
.errorlist { color: #a33; margin: 4px 0; padding-left: 18px; }
.helptext { color: var(--pencil-soft); font-size: 0.85rem; }

/* --- сообщения --- */
.messages { list-style: none; padding: 0; }
.messages li {
  border: 2px dashed var(--pencil-soft);
  border-radius: 12px;
  padding: 8px 14px;
  margin: 8px 0;
  background: var(--card);
}

/* --- лендинг --- */
.hero { text-align: center; padding: 28px 0 8px; }
.hero img { width: min(280px, 70vw); height: auto; }
.hero .cta { margin-top: 18px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid .pencil-card { margin: 0; text-align: center; }
.grid img { width: 64px; height: 64px; }
.steps { counter-reset: step; }
.steps .pencil-card::before {
  counter-increment: step;
  content: counter(step);
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-size: 2rem;
  color: var(--accent);
  margin-right: 8px;
}

/* --- кабинет --- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--card);
  border-top: 2px solid var(--pencil);
  z-index: 10;
}
.bottom-nav a {
  flex: 1;
  text-align: center;
  padding: 10px 2px;
  text-decoration: none;
  font-size: 0.78rem;
  border-right: 1px dashed var(--pencil-soft);
}
.bottom-nav a:last-child { border-right: none; }
.bottom-nav a.active { background: var(--paper); font-weight: 700; }
.cabinet-body { padding-bottom: 70px; }

.appointment-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap;
  border-bottom: 1px dashed var(--pencil-soft);
  padding: 10px 0;
}
.status-new { color: var(--accent); font-weight: 700; }
.status-confirmed { color: #4a7c3a; }
.status-cancelled, .status-no_show { color: var(--pencil-soft); }
.status-done { color: var(--pencil-soft); }

/* --- публичная страница --- */
.master-head { text-align: center; }
.master-head img.avatar {
  width: 96px; height: 96px; object-fit: cover;
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.service-pick { cursor: pointer; }
.service-pick.selected { outline: 3px dashed var(--accent); outline-offset: 2px; }
.days-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px;
}
.day-btn {
  flex: 0 0 auto;
  min-width: 56px;
  text-align: center;
  padding: 8px 6px;
  border: 2px solid var(--pencil);
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
  background: var(--card);
  cursor: pointer;
  font: inherit;
}
.day-btn.selected { background: var(--accent); color: #fff; }
.day-btn:disabled { opacity: 0.4; cursor: default; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.slot-btn {
  padding: 8px 14px;
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: var(--card);
  cursor: pointer;
  font: inherit;
}
.slot-btn.selected { background: var(--accent); color: #fff; }

/* --- карандашные скроллбары: грифель на линии бумаги --- */
.days-scroll, .slots, .gallery-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--pencil) transparent;
}
.days-scroll::-webkit-scrollbar, .slots::-webkit-scrollbar, .gallery-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.days-scroll::-webkit-scrollbar-track, .slots::-webkit-scrollbar-track, .gallery-scroll::-webkit-scrollbar-track {
  background: var(--paper);
  border-bottom: 2px solid #d8cbb0;
  border-radius: 4px;
}
.days-scroll::-webkit-scrollbar-thumb, .slots::-webkit-scrollbar-thumb, .gallery-scroll::-webkit-scrollbar-thumb {
  background: var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  border: 1px solid var(--paper);
}
.days-scroll::-webkit-scrollbar-thumb:hover, .slots::-webkit-scrollbar-thumb:hover, .gallery-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
.days-scroll::-webkit-scrollbar-button, .slots::-webkit-scrollbar-button, .gallery-scroll::-webkit-scrollbar-button { display: none; }

/* --- карандашный скроллбар всей страницы --- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--pencil) var(--paper);
}
body::-webkit-scrollbar, html::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: var(--paper);
  border-left: 2px solid #d8cbb0;
}
::-webkit-scrollbar-track:horizontal {
  border-left: none;
  border-top: 2px solid #d8cbb0;
}
::-webkit-scrollbar-thumb {
  background: var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  border: 1px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-corner { background: var(--paper); }

/* --- отзывы и звёзды --- */
.stars { color: var(--accent); letter-spacing: 2px; }
.stars.big { font-size: 2rem; }
.review-card p { margin: 6px 0 0; }

/* --- рваный край бумаги на скролле дат ---
   Зубчатые области обрыва (16px, строго по краям) ВЫЧИТАЮТСЯ из сплошной
   маски: mask-composite exclude (webkit: xor). Середина полностью непрозрачна
   — «рвётся» только крайний .day-btn, частично уходящий за границу.
   Если mask-composite не поддержан — слои складываются (add) и блок просто
   остаётся видимым без рваного края (graceful degradation).
   Псевдоэлементы — карандашный штрих по линии разрыва. */
.torn-x { position: relative; }
.torn-x .days-scroll, .torn-x .gallery-scroll {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2740%27%20viewBox%3D%270%200%2016%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%20-2%20L9%20-2%20L6%201%20L9%204%20L6%207%20L11%2010%20L6%2013%20L9%2016%20L6%2019%20L11%2022%20L6%2025%20L9%2028%20L6%2031%20L11%2034%20L6%2037%20L9%2042%20L0%2042%20Z%27%20fill%3D%27white%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2740%27%20viewBox%3D%270%200%2016%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M16%20-2%20L7%20-2%20L10%201%20L7%204%20L10%207%20L5%2010%20L10%2013%20L7%2016%20L10%2019%20L5%2022%20L10%2025%20L7%2028%20L10%2031%20L5%2034%20L10%2037%20L7%2042%20L16%2042%20Z%27%20fill%3D%27white%27/%3E%3C/svg%3E"), linear-gradient(black, black);
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2740%27%20viewBox%3D%270%200%2016%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%20-2%20L9%20-2%20L6%201%20L9%204%20L6%207%20L11%2010%20L6%2013%20L9%2016%20L6%2019%20L11%2022%20L6%2025%20L9%2028%20L6%2031%20L11%2034%20L6%2037%20L9%2042%20L0%2042%20Z%27%20fill%3D%27white%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2740%27%20viewBox%3D%270%200%2016%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M16%20-2%20L7%20-2%20L10%201%20L7%204%20L10%207%20L5%2010%20L10%2013%20L7%2016%20L10%2019%20L5%2022%20L10%2025%20L7%2028%20L10%2031%20L5%2034%20L10%2037%20L7%2042%20L16%2042%20Z%27%20fill%3D%27white%27/%3E%3C/svg%3E"), linear-gradient(black, black);
  -webkit-mask-size: 16px 100%, 16px 100%, 100% 100%;
  mask-size: 16px 100%, 16px 100%, 100% 100%;
  -webkit-mask-position: left top, right top, 0 0;
  mask-position: left top, right top, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: xor, xor, source-over;
  mask-composite: exclude, exclude, add;
}
.torn-x::before, .torn-x::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 16px;
  pointer-events: none;
  z-index: 2;
  color: var(--pencil);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.torn-x::before {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolyline%20points%3D%279%2C-2%206%2C1%209%2C4%206%2C7%2011%2C10%206%2C13%209%2C16%206%2C19%2011%2C22%206%2C25%209%2C28%206%2C31%2011%2C34%206%2C37%209%2C42%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%20opacity%3D%270.55%27/%3E%3C/svg%3E");
}
.torn-x::after {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolyline%20points%3D%277%2C-2%2010%2C1%207%2C4%2010%2C7%205%2C10%2010%2C13%207%2C16%2010%2C19%205%2C22%2010%2C25%207%2C28%2010%2C31%205%2C34%2010%2C37%207%2C42%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%20opacity%3D%270.55%27/%3E%3C/svg%3E");
}

/* --- группы услуг --- */
.category-title {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  border-bottom: 2px dashed var(--pencil-soft);
  padding-bottom: 4px;
  margin: 20px 0 4px;
}
.service-img {
  width: 72px; height: 72px; object-fit: cover;
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  margin-right: 12px;
  flex: 0 0 auto;
}

/* --- согласия --- */
.agree-group {
  border: 2px dashed var(--pencil-soft);
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
  padding: 10px 14px;
  margin-top: 14px;
}
.agree-group-title { margin: 0 0 6px; font-weight: 700; font-size: 0.9rem; }
.agree {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 8px 0; font-weight: 400; font-size: 0.9rem;
}
.agree input { margin-top: 3px; }
.agree.invalid { color: #a33; }
.agree-optional { border-top: 1px dashed var(--pencil-soft); padding-top: 8px; }

.muted { color: var(--pencil-soft); }
.center { text-align: center; }
.mt { margin-top: 16px; }
.hidden { display: none; }

@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .wrap { padding: 24px; }
}

/* --- метрики dashboard (цветной карандаш) --- */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.metric { margin: 0; text-align: center; padding: 12px 10px; }
.metric-value {
  display: block;
  font-family: var(--font-hand);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}
.metric-label { font-size: 0.8rem; color: var(--pencil-soft); }
.metric-terracotta { border-color: var(--c-terracotta); }
.metric-terracotta .metric-value { color: var(--c-terracotta); }
.metric-sage { border-color: var(--c-sage); }
.metric-sage .metric-value { color: var(--c-sage); }
.metric-blue { border-color: var(--c-blue); }
.metric-blue .metric-value { color: var(--c-blue); }
.metric-mustard { border-color: var(--c-mustard); }
.metric-mustard .metric-value { color: var(--c-mustard); }

/* --- канбан: колонки как листы бумаги --- */
.kanban {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 14px 0;
}
.kanban-col {
  background: var(--card);
  border: 2px solid var(--pencil);
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
  padding: 10px 12px;
}
.kanban-col h3 { margin: 0 0 8px; border-bottom: 2px dashed var(--pencil-soft); padding-bottom: 4px; }
.kanban-new h3 { color: var(--c-terracotta); }
.kanban-confirmed h3 { color: var(--c-blue); }
.kanban-done h3 { color: var(--c-sage); }
.kanban-cancelled summary {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--pencil-soft);
}
.kanban-cards { min-height: 40px; }
.kanban-dragover { outline: 3px dashed var(--accent); outline-offset: 2px; }
.kanban-card {
  background: var(--paper);
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 8px 12px;
  margin: 8px 0;
  cursor: grab;
  box-shadow: 2px 2px 0 rgba(58, 42, 26, 0.12);
}
.kanban-card:active { cursor: grabbing; }
.kanban-moved { outline: 3px dashed var(--c-sage); }
.kanban-actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.kanban-actions .btn { padding: 2px 10px; font-size: 0.78rem; }
.kanban-view-toggle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 0 0 10px;
  font-size: 0.9rem;
}

/* --- выбор палитры --- */
.palette-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.palette-option {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px dashed var(--pencil-soft);
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
  padding: 8px 12px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
.palette-option.selected { border: 2px solid var(--accent); }
.palette-option input { position: absolute; opacity: 0; }
.palette-dots { display: flex; gap: 4px; }
.palette-dots i {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--pencil);
  display: inline-block;
}

@media (min-width: 720px) {
  .metrics { grid-template-columns: repeat(5, 1fr); }
  .kanban { grid-template-columns: repeat(3, 1fr); }
}

/* --- сворачиваемые группы услуг (публичная страница) --- */
.service-group {
  margin: 10px 0;
}
.service-group summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 6px 2px;
  border-bottom: 2px dashed var(--pencil-soft);
}
.service-group summary::-webkit-details-marker { display: none; }
.service-group-title {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 700;
}
.service-group-arrow {
  display: inline-block;
  color: var(--accent);
  font-size: 1.2rem;
  transform: rotate(0deg);
  transition: transform 0.25s ease;
}
.service-group[open] .service-group-arrow { transform: rotate(90deg); }
.service-group-body { padding-top: 6px; }
.service-group[open] .service-group-body { animation: group-open 0.25s ease; }
@keyframes group-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* --- звёзды-инпут отзыва клиента --- */
.star-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  margin: 6px 0;
}
.star-input input { position: absolute; opacity: 0; }
.star-input label {
  font-size: 2rem;
  color: var(--pencil-soft);
  cursor: pointer;
  margin: 0;
  transition: transform 0.1s ease;
}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label {
  color: var(--accent);
}
.star-input label:hover { transform: rotate(-8deg) scale(1.15); }

/* --- дата + источник отзыва --- */
.review-meta { font-size: 0.8rem; color: var(--pencil-soft); }
.source-badge {
  display: inline-block;
  border: 1.5px solid var(--pencil-soft);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 0 8px;
  font-size: 0.75rem;
}
.source-site { border-color: var(--c-sage); color: var(--c-sage); }
.source-avito { border-color: var(--c-blue); color: var(--c-blue); }
.source-gis2 { border-color: var(--c-mustard); color: var(--c-mustard); }
.source-yandex { border-color: var(--c-terracotta); color: var(--c-terracotta); }

/* --- поле импорта ссылки (кабинет отзывов) --- */
.import-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: var(--field);
  padding: 4px 6px 4px 12px;
  box-shadow: 3px 4px 0 rgba(58, 42, 26, 0.15);
}
.import-url-icon { color: var(--pencil-soft); display: flex; }
.import-url-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1;
  padding: 8px 4px;
}
.import-url-input:focus { outline: none; }
.import-url-row:focus-within { outline: 2px dashed var(--accent); outline-offset: 2px; }
.import-url-btn { flex: 0 0 auto; }
.import-btn-pencil { display: none; }
.import-url-form.loading .import-btn-text { display: none; }
.import-url-form.loading .import-btn-pencil {
  display: inline-block;
  animation: pencil-write 0.7s ease-in-out infinite alternate;
}
@keyframes pencil-write {
  from { transform: rotate(-12deg) translateX(-2px); }
  to { transform: rotate(8deg) translateX(3px); }
}
@media (max-width: 480px) {
  .import-url-row { flex-wrap: wrap; }
  .import-url-btn { width: 100%; }
}

/* --- канбан: цвета новых статусов --- */
.kanban-confirmed_client h3 { color: var(--c-mustard); }
.kanban-in_progress h3 { color: #8a6fae; }
.kanban-no_show summary, .kanban-no_show h3 { color: var(--pencil-soft); }

@media (min-width: 720px) {
  .kanban { grid-template-columns: repeat(3, 1fr); }
}

/* --- картинки профессий (лендинг «Для кого») --- */
.profession-img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border: 2px solid var(--pencil);
  border-radius: 52% 47% 53% 46% / 47% 53% 46% 52%;
  padding: 3px;
  background: var(--card);
  box-shadow: 2px 3px 0 rgba(58, 42, 26, 0.15);
}

/* --- мультивыбор услуг --- */
.service-pick { position: relative; }
.service-check {
  position: absolute;
  top: -10px; right: -6px;
  width: 30px; height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--pencil);
  border-radius: 52% 47% 53% 46% / 47% 53% 46% 52%;
  font-weight: 700;
  transform: rotate(-8deg);
}
.service-pick.selected .service-check { display: flex; }
#services-total { color: var(--accent); margin: 4px 2px; }

/* --- канбан: все колонки доступны при ручном drag --- */
.kanban-drag-target {
  outline: 2px dashed var(--pencil-soft);
  outline-offset: 3px;
}
.kanban-dragover {
  outline: 3px dashed var(--accent) !important;
  outline-offset: 3px;
}

/* --- канбан: деструктивные кнопки приглушены --- */
.btn-muted {
  border-color: var(--pencil-soft);
  color: var(--pencil-soft);
  box-shadow: none;
}

/* --- палитра/тема/шрифт в настройках: видимый выбор --- */
.palette-option:has(input:checked),
.palette-option.selected {
  border: 2px solid var(--accent);
  background: var(--card);
  box-shadow: 2px 3px 0 rgba(58, 42, 26, 0.2);
}
.palette-option:has(input:checked)::after {
  content: '✎';
  color: var(--accent);
  font-size: 1.1rem;
}

/* radio-списки темы/шрифта как карандашные пилюли */
#settings-form ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#settings-form ul li label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px dashed var(--pencil-soft);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 6px 14px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
#settings-form ul li:has(input:checked) label {
  border: 2px solid var(--accent);
  background: var(--card);
}

/* --- переключатель темы --- */
.theme-toggle {
  /* в шапке — обычный элемент flex-ряда; абсолют только на странице мастера */
  width: 40px; height: 40px;
  font-size: 1.3rem;
  background: var(--card);
  color: var(--pencil);
  border: 2px solid var(--pencil);
  border-radius: 52% 47% 53% 46% / 47% 53% 46% 52%;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(58, 42, 26, 0.2);
}
.master-head { position: relative; }
.master-head .theme-toggle {
  position: absolute;
  top: 8px; right: 8px;
}

/* --- портфолио: галерея с горизонтальным скроллом --- */
.gallery-scroll { align-items: stretch; }
.portfolio-photo {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
}
.portfolio-photo img {
  width: 150px; height: 150px;
  object-fit: cover;
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 2px 3px 0 rgba(58, 42, 26, 0.15);
}
.portfolio-photo figcaption { font-size: 1.1rem; }

/* --- портфолио в кабинете --- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.portfolio-item img { width: 100%; border-radius: 8px; }

/* --- поля с иконками соцсетей (профиль мастера) --- */
.icon-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--pencil);
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
  background: var(--field);
  padding: 2px 12px;
  margin-top: 4px;
}
.icon-input svg { color: var(--pencil-soft); flex: 0 0 auto; }
.icon-input input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1;
}
.icon-input input:focus { outline: none; }
.icon-input:focus-within { outline: 2px dashed var(--accent); outline-offset: 2px; }
.icon-input input::placeholder {
  font-family: var(--font-hand);
  color: var(--pencil-soft);
}

/* --- кнопка выбора файла в pencil-стиле --- */
input[type="file"]::file-selector-button {
  background: var(--paper);
  color: var(--pencil);
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 6px 14px;
  font: inherit;
  cursor: pointer;
  margin-right: 8px;
}

/* --- статистика: загруженность (матрёшка) --- */
.load-toolbar { display: flex; align-items: center; gap: 10px; }
.load-vbars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  padding-top: 20px;
}
.load-vbar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  cursor: pointer;
}
.load-vbar-fill {
  width: 70%;
  min-height: 3px;
  border: 2px solid var(--pencil);
  border-radius: 8px 12px 6px 10px / 10px 8px 12px 6px;
  background: repeating-linear-gradient(
    -45deg, var(--pencil) 0 1.5px, transparent 1.5px 5px);
}
.load-vbar-fill.load-max {
  background: repeating-linear-gradient(
    -45deg, var(--c-terracotta) 0 2px, transparent 2px 5px);
  border-color: var(--c-terracotta);
}
.load-vbar-value { font-size: 0.85rem; font-weight: 700; }
.load-vbar-label { font-size: 0.8rem; color: var(--pencil-soft); margin-top: 4px; }
.load-hrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.load-hlabel { flex: 0 0 96px; font-size: 0.85rem; }
.load-hbar {
  flex: 1;
  height: 20px;
  border: 2px solid var(--pencil);
  border-radius: 10px 14px 8px 12px / 12px 8px 14px 10px;
  overflow: hidden;
}
.load-hbar-fill {
  height: 100%;
  background: repeating-linear-gradient(
    45deg, var(--c-blue) 0 1.5px, transparent 1.5px 5px);
}
.load-hvalue { flex: 0 0 80px; text-align: right; font-size: 0.85rem; }

/* тепловая карта месяца */
.heat-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.heat-head { text-align: center; font-size: 0.75rem; color: var(--pencil-soft); }
.heat-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  border: 1.5px dashed var(--pencil-soft);
  border-radius: 8px;
}
.heat-cell i { font-style: normal; font-size: 0.7rem; font-weight: 700; }
.heat-empty { border: none; }
.heat-1 { background: repeating-linear-gradient(-45deg, rgba(58,42,26,.18) 0 1px, transparent 1px 7px); }
.heat-2 { background: repeating-linear-gradient(-45deg, rgba(58,42,26,.28) 0 1.5px, transparent 1.5px 5px); }
.heat-3 { background: repeating-linear-gradient(-45deg, rgba(58,42,26,.4) 0 2px, transparent 2px 4px); }
.heat-4 { background: repeating-linear-gradient(-45deg, rgba(201,111,74,.55) 0 2px, transparent 2px 3px); }

/* финансы: donut */
.finance-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut { flex: 0 0 auto; }
.legend-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1.5px solid var(--pencil);
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  vertical-align: -2px;
}

/* --- календарь расписания --- */
.sched-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sched-day {
  background: var(--card);
  color: var(--pencil);
  cursor: pointer;
  font: inherit;
  position: relative;
}
.sched-day:hover { border-color: var(--pencil); }
.sched-off {
  background: repeating-linear-gradient(-45deg, rgba(138,122,92,.25) 0 2px, transparent 2px 6px);
  color: var(--pencil-soft);
}
.sched-today {
  border: 2.5px solid var(--c-terracotta);
  border-radius: 52% 47% 53% 46% / 47% 53% 46% 52%;
  font-weight: 700;
}
.sched-count {
  display: inline-block;
  min-width: 18px;
  background: var(--c-blue);
  color: #fff;
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  font-size: 0.7rem;
  line-height: 18px;
}
.sched-break { color: var(--c-mustard); font-style: normal; }
.mb-service.selected { background: var(--accent); color: #fff; }
#mb-services { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- лендинг: тёмная тема (тёмная бумага, светлый карандаш) --- */
body[data-theme="dark"]:not([data-palette]) {
  --paper: #26221c;
  --pencil: #e8ddc8;
  --pencil-soft: #9a8d77;
  --accent: #d9825f;
  --card: #2e2921;
  --dot: #5c5344;
  --field: #383126;
}

/* --- лендинг: слайдер «Для кого» --- */
.prof-slider {
  position: relative;
  margin: 10px 0;
}
.prof-viewport {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  padding: 12px 2px;
}
.prof-viewport:active { cursor: grabbing; }
.prof-track {
  display: flex;
  gap: 12px;
  width: max-content;
  will-change: transform;
}
.prof-card {
  flex: 0 0 auto;
  width: 140px;
  margin: 0;
  text-align: center;
  user-select: none;
}
.prof-card img { pointer-events: none; }
.prof-arrow { display: none; }
@media (min-width: 720px) {
  .prof-arrow {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }
  .prof-prev { left: -8px; }
  .prof-next { right: -8px; }
}


/* --- лендинг: каждая карточка — отдельный кусочек бумаги --- */
.prof-card { transition: transform 0.15s ease; box-shadow: 2px 4px 0 rgba(58, 42, 26, 0.18); }
.prof-card:nth-child(8n+1) { transform: rotate(-1.2deg) translateY(1px); background: #fdf8ec; }
.prof-card:nth-child(8n+2) { transform: rotate(0.8deg) translateY(-2px); background: #f4ecd8;
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; }
.prof-card:nth-child(8n+3) { transform: rotate(-0.5deg); background: #efe9dc; }
.prof-card:nth-child(8n+4) { transform: rotate(1.6deg) translateY(2px); background: #fdf8ec;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
.prof-card:nth-child(8n+5) { transform: rotate(-2deg) translateY(-1px); background: #f4ecd8; }
.prof-card:nth-child(8n+6) { transform: rotate(0.6deg); background: #efe9dc;
  border-radius: 20px 240px 12px 250px / 250px 12px 240px 20px; }
.prof-card:nth-child(8n+7) { transform: rotate(-0.9deg) translateY(2px); background: #fdf8ec; }
.prof-card:nth-child(8n+8) { transform: rotate(2.2deg); background: #f4ecd8;
  border-radius: 250px 12px 235px 18px / 18px 235px 12px 250px; }
.prof-card:hover { transform: rotate(0deg) translateY(-3px); }

/* тёмная тема: тёмные оттенки бумаги */
body[data-theme="dark"]:not([data-palette]) .prof-card { box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.4); }
body[data-theme="dark"]:not([data-palette]) .prof-card:nth-child(8n+1),
body[data-theme="dark"]:not([data-palette]) .prof-card:nth-child(8n+4),
body[data-theme="dark"]:not([data-palette]) .prof-card:nth-child(8n+7) { background: #322b22; }
body[data-theme="dark"]:not([data-palette]) .prof-card:nth-child(8n+2),
body[data-theme="dark"]:not([data-palette]) .prof-card:nth-child(8n+5),
body[data-theme="dark"]:not([data-palette]) .prof-card:nth-child(8n+8) { background: #2b251d; }
body[data-theme="dark"]:not([data-palette]) .prof-card:nth-child(8n+3),
body[data-theme="dark"]:not([data-palette]) .prof-card:nth-child(8n+6) { background: #383127; }

/* --- тёмная тема: дни и слоты читаемы --- */
[data-theme="dark"] .day-btn,
[data-theme="dark"] .slot-btn {
  background: var(--field);
  color: var(--pencil);
  border-color: var(--pencil);
}
[data-theme="dark"] .day-btn .muted,
[data-theme="dark"] .slot-btn .muted {
  color: var(--pencil-soft);
}
[data-theme="dark"] .day-btn.selected,
[data-theme="dark"] .slot-btn.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--pencil);
}
[data-theme="dark"] .day-btn.selected .muted { color: #fff; }

/* --- карандашный toast «Сохранено ✓» --- */
.toast-pencil {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 14px;
  background: var(--card);
  color: var(--c-sage);
  border: 2px solid var(--c-sage);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  font-family: var(--font-hand);
  font-size: 1.2rem;
  box-shadow: 2px 3px 0 rgba(58, 42, 26, 0.2);
  animation: toast-fade 2.2s ease forwards;
}
@keyframes toast-fade {
  0% { opacity: 0; transform: rotate(-2deg) translateY(4px); }
  15% { opacity: 1; transform: rotate(0.5deg) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* --- колокольчик уведомлений --- */
.notify-bell { position: relative; display: inline-block; }
.notify-bell-btn {
  position: relative;
  background: var(--card);
  color: var(--pencil);
  border: 2px solid var(--pencil);
  border-radius: 52% 47% 53% 46% / 47% 53% 46% 52%;
  width: 40px; height: 40px;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(58, 42, 26, 0.2);
}
.notify-count {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 18px; height: 18px;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--pencil);
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  font-size: 0.7rem;
  line-height: 15px;
  text-align: center;
  font-weight: 700;
}
.notify-panel {
  position: absolute;
  right: 0; top: 48px;
  width: min(320px, 86vw);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--card);
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 3px 4px 0 rgba(58, 42, 26, 0.2);
  padding: 10px 12px;
  z-index: 20;
}
.notify-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px dashed var(--pencil-soft);
  padding-bottom: 6px; margin-bottom: 6px;
}
.notify-item {
  padding: 6px 4px;
  border-bottom: 1px dashed var(--pencil-soft);
  cursor: pointer;
}
.notify-item:hover { background: var(--paper); }
.notify-item.notify-read { opacity: 0.6; }
.notify-kind {
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 700;
}

/* --- ответ мастера на отзыв --- */
.master-reply {
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--c-sage);
  background: var(--paper);
  border-radius: 0 12px 12px 0;
  font-size: 0.92rem;
}

/* --- режим «по календарю»: мультивыбор дат --- */
.sched-picked {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--pencil) !important;
}
.sched-picked::after {
  content: '✓';
  position: absolute;
  top: -6px; right: -4px;
  font-size: 0.75rem;
  color: var(--accent);
  text-shadow: 0 0 2px var(--paper);
}
#cal-bulk { border-color: var(--accent); }

/* комбинированный режим: день рабочий по недельному шаблону (база) */
.sched-base {
  border-style: dashed;
  border-color: var(--pencil-soft);
}
.sched-base::after {
  content: '≈';
  position: absolute;
  top: -9px; right: -1px;
  font-size: 0.85rem;
  color: var(--pencil-soft);
}
/* явно убранный поверх шаблона день — перечёркнут карандашом */
.sched-removed {
  background: repeating-linear-gradient(-45deg, rgba(138,122,92,.25) 0 2px, transparent 2px 6px);
  color: var(--pencil-soft);
}
.sched-removed::after {
  content: '✕';
  position: absolute;
  top: -7px; right: -3px;
  font-size: 0.75rem;
  color: var(--c-terracotta);
}

/* --- отменённые записи и no_show: два волнистых штриха красным карандашом --- */
.appointment-row:has(.status-cancelled),
.appointment-row:has(.status-no_show) {
  position: relative;
}
.appointment-row:has(.status-cancelled)::before,
.appointment-row:has(.status-cancelled)::after,
.appointment-row:has(.status-no_show)::before,
.appointment-row:has(.status-no_show)::after {
  content: '';
  position: absolute;
  left: -2%;
  top: 0;
  width: 104%;
  height: 100%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0.55;
}
/* первая волна — наклон вниз */
.appointment-row:has(.status-cancelled)::before,
.appointment-row:has(.status-no_show)::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27400%27%20height%3D%2740%27%20viewBox%3D%270%200%20400%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2020%20Q%2025%2012%2050%2020%20T%20100%2020%20T%20150%2020%20T%20200%2020%20T%20250%2020%20T%20300%2020%20T%20350%2020%20T%20400%2020%27%20fill%3D%27none%27%20stroke%3D%27%23c0392b%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");
  transform: rotate(-2.6deg) translateY(-6%);
}
/* вторая волна — наклон вверх, другая амплитуда */
.appointment-row:has(.status-cancelled)::after,
.appointment-row:has(.status-no_show)::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27400%27%20height%3D%2740%27%20viewBox%3D%270%200%20400%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2020%20Q%2025%2020%2050%2020%20T%20100%2020%20T%20150%2020%20T%20200%2020%20T%20250%2020%20T%20300%2020%20T%20350%2020%20T%20400%2020%27%20fill%3D%27none%27%20stroke%3D%27%23c0392b%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");
  transform: rotate(2.2deg) translateY(6%);
}
/* подпись статуса («Запись отменена») — над штрихами, не зачёркивается */
.appointment-row .status-cancelled,
.appointment-row .status-no_show {
  position: relative;
  z-index: 1;
  background: var(--card);
  border-radius: 8px 6px 9px 5px / 6px 9px 5px 8px;
  padding: 0 5px;
}

/* зачёркнутый «волнистым карандашом» текст (заголовок «Вы записаны!» при отмене) */
.pencil-strike {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27400%27%20height%3D%2740%27%20viewBox%3D%270%200%20400%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2020%20Q%2025%2012%2050%2020%20T%20100%2020%20T%20150%2020%20T%20200%2020%20T%20250%2020%20T%20300%2020%20T%20350%2020%20T%20400%2020%27%20fill%3D%27none%27%20stroke%3D%27%23c0392b%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.75%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 70%;
}

/* --- выбранный radio/checkbox: неровная обводка «рукой» вокруг label --- */
label:has(input[type="radio"]:checked),
label:has(input[type="checkbox"]:checked) {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  transform: rotate(-1deg);
}
label:has(input[type="radio"]:checked) input,
label:has(input[type="checkbox"]:checked) input {
  accent-color: var(--accent);
}

/* --- галерея: drag-скролл + лайтбокс --- */
.gallery-scroll { cursor: grab; }
.gallery-scroll:active { cursor: grabbing; }
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(38, 34, 28, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#lightbox figure { margin: 0; text-align: center; max-width: 92vw; }
#lightbox img {
  max-width: 92vw;
  max-height: 78vh;
  border: 3px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: var(--paper);
  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.35);
}
#lightbox figcaption { color: var(--paper); font-size: 1.5rem; margin-top: 10px; }
#lightbox .lb-close, #lightbox .lb-prev, #lightbox .lb-next {
  position: absolute;
  background: var(--paper);
  color: var(--pencil);
  border: 2px solid var(--pencil);
  border-radius: 52% 47% 53% 46% / 47% 53% 46% 52%;
  width: 44px; height: 44px;
  font-size: 1.2rem;
  cursor: pointer;
}
#lightbox .lb-close { top: 14px; right: 14px; }
#lightbox .lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
#lightbox .lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
/* ВАЖНО: #lightbox (id-селектор) сильнее .hidden — без этого правила
   лайтбокс виден всегда и не закрывается. */
#lightbox.hidden { display: none !important; }

/* --- модалка отзыва согласия --- */
.consent-modal {
  position: fixed;
  inset: 0;
  background: rgba(38, 34, 28, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 16px;
}
.consent-modal-card {
  max-width: 420px;
  background: var(--card);
  box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.3);
  position: relative;
}
.consent-modal-close {
  position: absolute;
  top: 8px; right: 10px;
  border: none;
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--pencil-soft);
}
/* ВАЖНО: .hidden объявлен раньше по файлу с той же специфичностью —
   без этого правила .consent-modal (display:flex) перекрывает .hidden,
   и модалка видна всегда. */
.consent-modal.hidden { display: none !important; }

/* --- hero: рука без бумажного квадрата + карандашная рамка --- */
.hero-art {
  position: relative;
  display: inline-block;
  padding: 18px;
  color: var(--pencil);           /* currentColor штрихов nobg-svg */
}
.hero-art img { width: min(280px, 70vw); height: auto; display: block; }
/* двойная проходка «от руки»: рамка + смещённый пунктир */
.hero-art::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2.5px solid var(--pencil);
  border-radius: 255px 25px 235px 20px / 20px 235px 25px 255px;
  transform: rotate(-1.4deg);
  pointer-events: none;
}
.hero-art::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1.5px dashed var(--pencil-soft);
  border-radius: 25px 235px 20px 255px / 235px 20px 255px 25px;
  transform: rotate(0.9deg);
  pointer-events: none;
}

/* --- тёмная тема: SVG-рисунки показываются как есть (бумажный фон читается
   на любой теме; штрихи #3a2a1a остаются карандашными — без инверсии). --- */

/* --- inline-иллюстрации лендинга: цвет штрихов = цвет текста темы --- */
.hero-art svg { width: min(280px, 70vw); height: auto; display: block; }
.hero-art svg [stroke] { stroke: currentColor; }
.wreath-art { color: var(--pencil); }
.wreath-art svg { width: 120px; height: auto; }
.wreath-art svg [stroke] { stroke: currentColor; }

/* --- кнопка «наверх» --- */
#back-to-top {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 48px; height: 48px;
  padding: 6px;
  background: var(--card);
  color: var(--pencil);          /* штрихи иконки — карандаш темы/палитры */
  border: 2px solid var(--accent);  /* рамка — акцент палитры */
  border-radius: 52% 47% 53% 46% / 47% 53% 46% 52%;
  box-shadow: 2px 3px 0 rgba(58, 42, 26, 0.25);
  cursor: pointer;
  z-index: 40;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#back-to-top.hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
#back-to-top svg { width: 100%; height: 100%; display: block; }
/* над bottom-nav кабинета */
.cabinet-body ~ #back-to-top, body:has(.bottom-nav) #back-to-top { bottom: 72px; }

/* --- панель уведомлений на мобильном: fixed под шапкой, у правого края --- */
@media (max-width: 480px) {
  .notify-panel {
    position: fixed;
    top: 60px;
    right: 8px;
    left: auto;
    width: min(320px, calc(100vw - 16px));
    max-height: 70vh;
    z-index: 60;  /* выше шапки и bottom-nav */
  }
}

/* --- нативный кружок radio скрыт: только карандашная обводка выбранного label --- */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
}
/* чекбоксы согласий и форм — видимые галочки (не скрываем) */

/* --- тарифы: плашка-акция и сетка карточек --- */
.tariff-banner {
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 12px 18px;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 1.3rem;
  box-shadow: 3px 4px 0 rgba(58, 42, 26, 0.25);
  transform: rotate(-0.5deg);
  margin-bottom: 14px;
}
.tariff-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 520px) { .tariff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .tariff-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- бренд MAX: светлая тема — цветной логотип, тёмная — белая версия --- */
.max-brand { vertical-align: middle; }
body[data-theme="dark"] .max-brand { display: none; }
body[data-theme="dark"] .max-brand-white { display: inline !important; }
.max-brand-white { display: none; }

/* --- превью шрифта в настройках --- */
.font-preview {
  font-size: 1.6rem;
  border: 2px dashed var(--pencil-soft);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 10px 14px;
  margin-top: 8px;
  background: var(--card);
}

/* --- пульт администратора: карточки-цифры и таблицы --- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.admin-stats .pencil-card { margin: 0; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px dashed var(--pencil-soft);
  vertical-align: top;
}
.admin-table th { font-family: var(--font-hand); font-size: 1.05rem; }

/* --- тарифы: плашка на карточке и список пунктов --- */
.tariff-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 2px 12px;
  font-size: 0.8rem;
  transform: rotate(-1deg);
}
.tariff-list { text-align: left; padding-left: 20px; }

/* --- редактор тарифов в пульте суперадмина --- */
.tariff-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px 18px;
  margin-bottom: 12px;
}
.tariff-edit-grid label { margin-top: 10px; }
.tariff-field-wide { grid-column: 1 / -1; }
.tariff-field-wide textarea { width: 100%; }
.tariff-check {
  align-self: end;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

/* --- салоны: горизонтальная прокрутка широких таблиц пульта --- */
.admin-scroll { overflow-x: auto; }

/* --- списки инструкций в карточках настроек оплаты --- */
.help-list { margin: 8px 0 0; padding-left: 22px; }
.help-list li { margin: 6px 0; }

/* --- футер с документами на публичной странице мастера --- */
.master-footer {
  margin: 36px 0 12px;
  padding-top: 16px;
  border-top: 2px dashed var(--pencil-soft);
  font-size: 0.9rem;
}

/* --- промокоды: чекбокс-список услуг в форме создания --- */
#id_services { list-style: none; margin: 4px 0; padding: 0; }
#id_services li { margin: 2px 0; }
#id_services label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }

/* --- блок «Документы и согласия» в форме профиля --- */
.agree-group {
  margin: 14px 0 6px;
  padding: 12px 14px;
  border: 2px dashed var(--pencil-soft);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.agree-group-title {
  margin: 0 0 8px;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  font-weight: 700;
}
.agree-group-sub {
  margin: 10px 0 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted, #6b6255);
}
.agree-group .agree { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; }
.agree-group .agree input[type="checkbox"] { margin-top: 3px; flex: none; }
.agree-group .agree span { font-weight: 400; }

/* --- регистрация: карточки ролей (signup и лендинг) --- */
.role-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 6px 0 12px;
}
@media (max-width: 520px) { .role-cards { grid-template-columns: 1fr; } }
.role-card {
  display: block;
  border: 2px dashed var(--pencil-soft);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: center;
}
.role-card:has(input:checked) {
  border: 2px solid var(--pencil);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.role-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.role-card-title { display: block; font-family: var(--font-hand); font-size: 1.2rem; font-weight: 700; }
.role-card-hint { display: block; font-size: 0.8rem; color: var(--muted, #6b6255); margin-top: 2px; }

/* --- лендинг: карточки ролей в блоке «Регистрация» --- */
a.role-landing-card { text-decoration: none; color: inherit; display: block; }
a.role-landing-card:hover { border-color: var(--pencil); }
a.role-landing-card b { font-family: var(--font-hand); font-size: 1.3rem; }
a.role-landing-card p { margin: 6px 0 0; }

/* --- оплата записи: значки статуса --- */
.pay-badge {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0 8px;
  border: 1.5px dashed var(--pencil-soft);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  white-space: nowrap;
}
.pay-paid {
  color: #4a7a46;
  border-color: #7a9b76;
  background: color-mix(in srgb, #7a9b76 14%, transparent);
  font-weight: 600;
}
.pay-prepaid { color: var(--muted, #6b6255); }

/* --- предоплата по СБП: блок для клиента --- */
.prepay-box {
  margin: 8px 0;
  padding: 10px 14px;
  border: 2px dashed var(--pencil-soft);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.prepay-box .agree-group-title { margin: 0 0 6px; font-size: 1.05rem; }
.prepay-box p { margin: 6px 0; }

/* Код привязки чата бота (кабинет → «Мои записи в боте») */
.link-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.link-code {
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
  display: inline-block;
  padding: 10px 12px;
  font-size: 1.05rem;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  background: var(--pencil-soft-bg, rgba(0, 0, 0, 0.04));
  border: 2px dashed var(--pencil-soft);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.bot-platform-row { margin: 10px 0; padding-top: 8px; border-top: 1px dashed var(--pencil-soft); }
.bot-platform-row p { margin: 6px 0; line-height: 1.5; }
.bot-platform-row .btn { margin-top: 6px; }

/* --- Демо-вход (/demo/) ------------------------------------------------ */
.demo-entry { margin: 24px 0 40px; }
.demo-entry > h1 { font-family: var(--font-hand); font-size: 2.2rem; margin: 0 0 8px; }
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.demo-card { display: flex; flex-direction: column; }
.demo-card h2 { margin: 0 0 6px; font-size: 1.15rem; }
.demo-card p { margin: 6px 0; }
.demo-card form { margin-top: auto; padding-top: 12px; }
.demo-missing { color: var(--accent); font-size: .95rem; }
.demo-login-error {
  background: var(--card);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
}
@media (max-width: 560px) {
  .demo-grid { grid-template-columns: 1fr; }
}

/* --- действия над участниками салона ------------------------------------ */
.salon-member-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.salon-member-actions .btn { white-space: normal; }

/* --- поля даты/времени: единый вид и тёмная тема ------------------------ */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  color-scheme: light;
}
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
  color-scheme: dark;
}

/* --- виджет записи /widget/<token>/ (iframe для сторонних сайтов) --- */
.widget-embed .widget-wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 10px 12px 16px;
}
.widget-embed h1 { font-size: 1.9rem; }
.widget-embed h2 { font-size: 1.4rem; }
.widget-embed .widget-head { text-align: center; margin: 4px 0 8px; }
.widget-embed .widget-head p { margin: 0; }
.widget-embed .widget-powered {
  font-size: 0.78rem;
  margin: 10px 0 0;
}
/* тема/палитра/шрифт виджета = настройки мастера (data-theme на body).
   Кнопки дней и слотов — нативные <button>: явный цвет, иначе в тёмной теме
   текст остаётся чёрным на тёмном фоне. */
.widget-embed .day-btn,
.widget-embed .slot-btn { color: var(--pencil); }
.widget-embed .day-btn .muted { color: var(--pencil-soft); }
.widget-embed .day-btn.selected,
.widget-embed .slot-btn.selected,
.widget-embed .day-btn.selected .muted { color: #fff; }

/* --- салон: таблица участников на десктопе без горизонтального скрола --- */
@media (min-width: 1024px) {
  .salon-members-card {
    width: calc(100vw - 48px);
    max-width: 1120px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .salon-members-card .admin-table th:first-child,
  .salon-members-card .admin-table td:first-child {
    max-width: 190px;
    overflow-wrap: break-word;
  }
}

/* --- виджет: тумблер темы в углу и служебная плашка владельца --- */
.widget-embed .widget-theme-toggle {
  position: fixed;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  font-size: 1.05rem;
  z-index: 10;
}
.widget-embed .widget-own-note {
  margin: 0 0 10px;
  font-size: 0.85rem;
}

/* ============================================================
   Визуальные стили публичной страницы (премиум) — body[data-style]
   У каждого стиля своя «ДНК»: форма кнопок, карточек, выбора услуг,
   заголовков, слотов и дней. Цвета идут от переменных палитры
   (--paper/--pencil/--pencil-soft/--accent/--card), поэтому светлая
   и тёмная темы сохраняются в любом стиле.
   'pencil' — стиль по умолчанию (см. выше), пакет не нужен.
   ============================================================ */

/* --- Обычный: нейтральный системный UI, серые линии, без украшений --- */
body[data-style="plain"] .btn,
body[data-style="plain"] .pencil-card,
body[data-style="plain"] .day-btn,
body[data-style="plain"] .slot-btn,
body[data-style="plain"] input[type="text"], body[data-style="plain"] input[type="tel"],
body[data-style="plain"] textarea, body[data-style="plain"] select {
  border-radius: 6px;
  box-shadow: none;
  border-width: 1px;
  border-color: var(--pencil-soft);
}
body[data-style="plain"] .btn { padding: 9px 20px; }
body[data-style="plain"] .btn:hover { transform: none; border-color: var(--pencil); }
body[data-style="plain"] .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
body[data-style="plain"] .day-btn.selected,
body[data-style="plain"] .slot-btn.selected {
  background: color-mix(in srgb, var(--pencil) 10%, transparent);
  color: var(--pencil);
  border-color: var(--accent);
}
body[data-style="plain"] .service-pick.selected {
  outline: none;
  background: color-mix(in srgb, var(--pencil) 8%, transparent);
  border: 1px solid var(--accent);
}
body[data-style="plain"] .service-pick.selected .service-check {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: none;
}

/* --- Модерн: градиентные кнопки, стеклянные карточки, мягкое свечение --- */
body[data-style="modern"] .btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent),
              color-mix(in srgb, var(--accent) 65%, var(--pencil)));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
body[data-style="modern"] .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 50%, transparent); }
body[data-style="modern"] .btn-accent { filter: saturate(1.15); }
body[data-style="modern"] .pencil-card {
  border: 0;
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
body[data-style="modern"] .day-btn,
body[data-style="modern"] .slot-btn {
  border-radius: 14px;
  border-width: 1px;
  box-shadow: none;
}
body[data-style="modern"] .day-btn.selected,
body[data-style="modern"] .slot-btn.selected {
  background: linear-gradient(135deg, var(--accent),
              color-mix(in srgb, var(--accent) 65%, var(--pencil)));
  color: #fff;
  border-color: transparent;
}
body[data-style="modern"] .service-pick.selected {
  outline: none;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent),
              color-mix(in srgb, var(--accent) 65%, var(--pencil)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent),
              0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
body[data-style="modern"] input[type="text"], body[data-style="modern"] input[type="tel"],
body[data-style="modern"] textarea, body[data-style="modern"] select {
  border-radius: 14px;
  border-width: 1px;
}
body[data-style="modern"] h1, body[data-style="modern"] h2 { font-weight: 800; letter-spacing: 0.01em; }

/* --- Брутализм: толстые бордеры, жёсткие сдвиги, капс, моно-цифры --- */
body[data-style="brutalism"] .btn,
body[data-style="brutalism"] .pencil-card,
body[data-style="brutalism"] input[type="text"], body[data-style="brutalism"] input[type="tel"],
body[data-style="brutalism"] textarea, body[data-style="brutalism"] select {
  border-radius: 0;
  border: 3px solid var(--pencil);
  box-shadow: 4px 4px 0 var(--pencil);
}
body[data-style="brutalism"] .pencil-card { background: var(--card); }
body[data-style="brutalism"] .btn {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body[data-style="brutalism"] .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--pencil); }
body[data-style="brutalism"] .btn:active { transform: translate(4px, 4px); box-shadow: none; }
body[data-style="brutalism"] .day-btn,
body[data-style="brutalism"] .slot-btn {
  border-radius: 0;
  border-width: 2px;
  box-shadow: 3px 3px 0 var(--pencil);
}
body[data-style="brutalism"] .day-btn.selected,
body[data-style="brutalism"] .slot-btn.selected {
  background: var(--pencil);
  color: var(--paper);
  box-shadow: none;
  transform: translate(3px, 3px);
}
body[data-style="brutalism"] .service-pick.selected {
  outline: none;
  background: var(--pencil);
  color: var(--paper);
  border: 3px solid var(--pencil);
  box-shadow: 6px 6px 0 var(--accent);
}
body[data-style="brutalism"] .service-pick.selected .service-check {
  background: var(--accent);
  color: var(--pencil);
  border-color: var(--pencil);
  border-radius: 0;
  transform: none;
}
body[data-style="brutalism"] h1, body[data-style="brutalism"] h2 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 900;
}
body[data-style="brutalism"] body, body[data-style="brutalism"] .widget-wrap,
body[data-style="brutalism"] .pencil-card, body[data-style="brutalism"] .btn,
body[data-style="brutalism"] .day-btn, body[data-style="brutalism"] .slot-btn {
  font-variant-numeric: tabular-nums;
}

/* --- Flat: плоско, без теней и градиентов вообще; сплошные заливки --- */
body[data-style="flat"] .btn,
body[data-style="flat"] .pencil-card,
body[data-style="flat"] .day-btn,
body[data-style="flat"] .slot-btn,
body[data-style="flat"] .service-pick,
body[data-style="flat"] input[type="text"], body[data-style="flat"] input[type="tel"],
body[data-style="flat"] textarea, body[data-style="flat"] select {
  border-radius: 4px;
  box-shadow: none !important;
}
body[data-style="flat"] .btn {
  border: 0;
  background: var(--pencil);
  color: var(--paper);
}
body[data-style="flat"] .btn-accent { background: var(--accent); color: #fff; }
body[data-style="flat"] .btn:hover { transform: none; filter: brightness(1.1); }
body[data-style="flat"] .pencil-card { background: var(--card); border: 0; }
body[data-style="flat"] .day-btn,
body[data-style="flat"] .slot-btn { background: var(--card); border: 0; color: var(--pencil); }
body[data-style="flat"] .day-btn.selected,
body[data-style="flat"] .slot-btn.selected {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}
body[data-style="flat"] .service-pick.selected {
  outline: none;
  background: var(--accent);
  color: #fff;
  border: 0;
}
body[data-style="flat"] .service-pick.selected .service-check {
  background: #fff;
  color: var(--accent);
  border: 0;
  border-radius: 4px;
  transform: none;
}

/* --- Минимализм: воздух, хайрлайны, ghost-кнопки, полоска вместо заливки --- */
body[data-style="minimal"] .pencil-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--pencil-soft) 40%, transparent);
  padding: 22px 4px;
}
body[data-style="minimal"] .btn,
body[data-style="minimal"] input[type="text"], body[data-style="minimal"] input[type="tel"],
body[data-style="minimal"] textarea, body[data-style="minimal"] select {
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--pencil-soft) 40%, transparent);
  box-shadow: none;
  background: transparent;
}
body[data-style="minimal"] .btn { padding: 8px 18px; font-weight: 400; font-size: 0.95rem; }
body[data-style="minimal"] .btn:hover { transform: none; border-color: var(--accent); color: var(--accent); }
body[data-style="minimal"] .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
body[data-style="minimal"] .btn-accent:hover { color: #fff; filter: brightness(1.08); }
body[data-style="minimal"] .day-btn,
body[data-style="minimal"] .slot-btn {
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--pencil-soft) 40%, transparent);
  background: transparent;
  box-shadow: none;
}
body[data-style="minimal"] .day-btn.selected,
body[data-style="minimal"] .slot-btn.selected {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
body[data-style="minimal"] .service-pick {
  border: 1px solid transparent;
}
body[data-style="minimal"] .service-pick.selected {
  outline: none;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: inset 3px 0 0 var(--accent); /* тонкая левая полоска — без заливок */
}
body[data-style="minimal"] .service-pick.selected .service-check { display: none; }
body[data-style="minimal"] h1, body[data-style="minimal"] h2 {
  font-weight: 400;
  letter-spacing: 0.03em;
}
body[data-style="minimal"] body { font-size: 15px; }

/* --- Конструктивизм: диагонали, геометрия, штриховка --- */
body[data-style="constructivism"] .btn {
  border-radius: 0;
  transform: skewX(-6deg);
  border-width: 0;
  background: var(--pencil);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body[data-style="constructivism"] .btn-accent { background: var(--accent); color: #fff; box-shadow: 4px 4px 0 var(--pencil); }
body[data-style="constructivism"] .btn:hover { transform: skewX(-6deg) translate(2px, 2px); box-shadow: 2px 2px 0 var(--accent); }
body[data-style="constructivism"] .pencil-card {
  border-radius: 0;
  border-width: 0;
  border-left: 10px solid var(--accent);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
}
body[data-style="constructivism"] .day-btn,
body[data-style="constructivism"] .slot-btn { border-radius: 0; transform: skewX(-4deg); }
body[data-style="constructivism"] .day-btn.selected,
body[data-style="constructivism"] .slot-btn.selected {
  background: var(--accent);
  color: #fff;
  background-image: repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.22) 0 5px, transparent 5px 11px);
  border-color: var(--accent);
}
body[data-style="constructivism"] .service-pick.selected {
  outline: none;
  border-radius: 0;
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.22) 0 6px, transparent 6px 13px);
  color: #fff;
}
body[data-style="constructivism"] .service-pick.selected .service-check {
  background: var(--pencil);
  border-radius: 0;
  transform: skewX(-6deg);
}
body[data-style="constructivism"] h1, body[data-style="constructivism"] h2 {
  transform: skewX(-2deg);
  text-transform: uppercase;
  font-weight: 800;
}

/* --- Швейцарский стиль: строгая сетка, капс, хайрлайны, рамки без заливки --- */
body[data-style="swiss"] .btn {
  border-radius: 0;
  border: 2px solid var(--pencil);
  box-shadow: none;
  background: transparent;
  color: var(--pencil);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding: 10px 24px;
}
body[data-style="swiss"] .btn:hover { transform: none; background: var(--pencil); color: var(--paper); }
body[data-style="swiss"] .btn-accent { border-color: var(--accent); color: var(--accent); background: transparent; }
body[data-style="swiss"] .btn-accent:hover { background: var(--accent); color: #fff; }
body[data-style="swiss"] .pencil-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--pencil-soft) 55%, transparent);
  padding: 20px 0;
}
body[data-style="swiss"] .day-btn,
body[data-style="swiss"] .slot-btn {
  border-radius: 0;
  border: 1px solid var(--pencil-soft);
  box-shadow: none;
  background: transparent;
}
body[data-style="swiss"] .day-btn.selected,
body[data-style="swiss"] .slot-btn.selected {
  background: transparent;
  color: var(--pencil);
  border: 2px solid var(--pencil);
}
body[data-style="swiss"] .service-pick { border-radius: 0; }
body[data-style="swiss"] .service-pick.selected {
  outline: 2px solid var(--pencil);
  outline-offset: 2px;
  background: transparent;
  border-radius: 0;
}
body[data-style="swiss"] .service-pick.selected .service-check { display: none; }
body[data-style="swiss"] h1, body[data-style="swiss"] h2 {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

/* --- Журнальный стиль: serif, полоса над секциями, курсивная пометка --- */
body[data-style="magazine"] .pencil-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--pencil-soft);
  padding: 22px 4px;
}
body[data-style="magazine"] h1 { font-style: italic; font-weight: 600; }
body[data-style="magazine"] h2 {
  border-top: 1px solid var(--pencil-soft);
  padding-top: 10px;
  font-weight: 600;
}
body[data-style="magazine"] .btn {
  border-radius: 0;
  border-width: 1px;
  box-shadow: none;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  padding: 12px 28px;
}
body[data-style="magazine"] .btn:hover { transform: none; letter-spacing: 0.18em; }
body[data-style="magazine"] .btn-accent { background: var(--pencil); color: var(--paper); border-color: var(--pencil); }
body[data-style="magazine"] .day-btn,
body[data-style="magazine"] .slot-btn {
  border-radius: 50%;
  border-width: 1px;
  box-shadow: none;
  background: transparent;
}
body[data-style="magazine"] .day-btn.selected,
body[data-style="magazine"] .slot-btn.selected {
  background: var(--pencil);
  color: var(--paper);
  border-color: var(--pencil);
}
body[data-style="magazine"] .service-pick { border-radius: 0; }
body[data-style="magazine"] .service-pick.selected {
  outline: none;
  background: transparent;
  border-bottom: 2px solid var(--accent);
  position: relative;
}
body[data-style="magazine"] .service-pick.selected .service-check { display: none; }
body[data-style="magazine"] .service-pick.selected::after {
  content: 'выбрано ✦';
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-family: var(--font-hand);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--accent);
}

/* --- Рисованный: рваные пунктирные рамки, лёгкие повороты --- */
body[data-style="drawn"] .btn,
body[data-style="drawn"] .pencil-card,
body[data-style="drawn"] input[type="text"], body[data-style="drawn"] input[type="tel"],
body[data-style="drawn"] textarea {
  border-style: dashed;
  border-radius: 14px 4px 14px 4px / 4px 14px 4px 14px;
  box-shadow: none;
}
body[data-style="drawn"] .pencil-card { transform: rotate(-0.4deg); }
body[data-style="drawn"] .pencil-card:nth-of-type(even) { transform: rotate(0.35deg); }
body[data-style="drawn"] .btn { box-shadow: none; }
body[data-style="drawn"] .btn:hover { transform: rotate(0.6deg); }
body[data-style="drawn"] .day-btn,
body[data-style="drawn"] .slot-btn { border-style: dashed; box-shadow: none; }
body[data-style="drawn"] .day-btn.selected,
body[data-style="drawn"] .slot-btn.selected {
  border-style: dashed;
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  transform: rotate(-1deg);
}
body[data-style="drawn"] .service-pick.selected {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  background: transparent;
  transform: rotate(-1deg);
}
body[data-style="drawn"] .service-pick.selected .service-check {
  border-style: dashed;
  transform: rotate(-14deg);
}
/* --- кабинет: выбор стиля страницы и шрифта — сетки --- */
.style-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 719px) {
  .style-picker { grid-template-columns: repeat(2, 1fr); }
}
.style-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 2px solid var(--pencil);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  background: var(--card);
}
.style-option.selected { border-color: var(--accent); box-shadow: 2px 2px 0 rgba(58, 42, 26, 0.25); }
.style-option input { margin: 0; }
.style-option .style-marker { font-size: 1.05rem; }
.style-picker.locked .style-option { opacity: 0.55; cursor: not-allowed; }
.style-picker.locked .style-option input { pointer-events: none; }
.style-locked-note { font-size: 0.9rem; }

/* --- кабинет: выбор шрифта — две колонки на десктопе, одна на мобильном --- */
.font-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 719px) {
  .font-picker { grid-template-columns: 1fr; }
}
.font-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border: 2px solid var(--pencil);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  background: var(--card);
}
.font-option.selected { border-color: var(--accent); box-shadow: 2px 2px 0 rgba(58, 42, 26, 0.25); }
.font-option input { margin: 0; }
.font-option-name { font-weight: 600; }
.font-option-sample { font-size: 1.15rem; color: var(--pencil-soft); }

/* --- доп. шрифты заголовков публичной страницы --- */
[data-font="marmelad"] { --font-hand: 'Marmelad', 'Segoe UI', serif; }
[data-font="amatic"] { --font-hand: 'Amatic SC', 'Segoe UI', sans-serif; }
[data-font="rubikmono"] { --font-hand: 'Rubik Mono One', 'Courier New', monospace; }
/* Amatic SC — крупный узкий капс: заголовки чуть больше и с разрядкой */
body[data-font="amatic"] h1 { font-size: 3.2rem; letter-spacing: 0.03em; }
body[data-font="amatic"] h2 { font-size: 2rem; letter-spacing: 0.04em; }
body[data-font="rubikmono"] h1 { font-size: 1.5rem; line-height: 1.35; }
body[data-font="rubikmono"] h2 { font-size: 1.05rem; }

/* --- Ретро / винтаж: приглушённые тона, двойные рамки, печать-завиток --- */
body[data-style="retro"] .pencil-card,
body[data-style="retro"] input[type="text"], body[data-style="retro"] input[type="tel"],
body[data-style="retro"] textarea, body[data-style="retro"] select {
  border-radius: 14px;
  border: 1px solid var(--pencil-soft);
  outline: 1px dashed color-mix(in srgb, var(--pencil-soft) 60%, transparent);
  outline-offset: 4px;
  box-shadow: none;
  filter: sepia(0.18) saturate(0.85); /* лёгкий винтажный туман от переменных */
}
body[data-style="retro"] .btn {
  border-radius: 999px;
  border: 1px solid var(--pencil);
  box-shadow: none;
  padding: 10px 26px;
  background: color-mix(in srgb, var(--card) 70%, var(--paper));
}
body[data-style="retro"] .btn:hover { transform: none; background: var(--card); }
body[data-style="retro"] .btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
body[data-style="retro"] h1, body[data-style="retro"] h2 {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  font-weight: 600;
}
body[data-style="retro"] .day-btn,
body[data-style="retro"] .slot-btn {
  border-radius: 10px;
  border-width: 1px;
  box-shadow: none;
  filter: sepia(0.18) saturate(0.85);
}
body[data-style="retro"] .day-btn.selected,
body[data-style="retro"] .slot-btn.selected {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}
/* выбор услуги — винтажная «печать»: повёрнутый круглый бордер-бейдж */
body[data-style="retro"] .service-pick.selected {
  outline: none;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--pencil-soft);
}
body[data-style="retro"] .service-pick.selected .service-check {
  display: flex;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  border: 2px double var(--accent);
  transform: rotate(-12deg);
  font-size: 1.2rem;
}

/* --- Неон / киберпанк: свечение, тёмные подложки, моно-цифры --- */
body[data-style="neon"] .pencil-card {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--pencil) 92%, transparent);
  color: color-mix(in srgb, var(--paper) 92%, var(--pencil));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent),
              inset 0 0 24px rgba(0, 0, 0, 0.25);
}
body[data-style="neon"] .btn {
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
}
body[data-style="neon"] .btn:hover { transform: none; background: color-mix(in srgb, var(--accent) 15%, transparent); }
body[data-style="neon"] .btn-accent { background: var(--accent); color: #fff; }
body[data-style="neon"] .day-btn,
body[data-style="neon"] .slot-btn {
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--pencil) 88%, transparent);
  color: color-mix(in srgb, var(--paper) 90%, var(--pencil));
  box-shadow: none;
}
body[data-style="neon"] .day-btn.selected,
body[data-style="neon"] .slot-btn.selected {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 12px var(--accent);
  border-color: var(--accent);
}
body[data-style="neon"] .service-pick {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--pencil) 90%, transparent);
  color: color-mix(in srgb, var(--paper) 90%, var(--pencil));
}
body[data-style="neon"] .service-pick.selected {
  outline: none;
  border: 1px solid var(--accent);
  box-shadow: 0 0 12px var(--accent), inset 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
  color: color-mix(in srgb, var(--paper) 94%, var(--pencil));
}
body[data-style="neon"] .service-pick.selected .service-check {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 10px var(--accent);
}
body[data-style="neon"] .pencil-card, body[data-style="neon"] .btn,
body[data-style="neon"] .day-btn, body[data-style="neon"] .slot-btn,
body[data-style="neon"] .widget-wrap {
  font-variant-numeric: tabular-nums;
}
body[data-style="neon"] h1, body[data-style="neon"] h2 { letter-spacing: 0.06em; }

/* --- Бумажный крафт: отрывные края, слои, текстуры градиентами --- */
body[data-style="paper"] .pencil-card {
  border-radius: 18px 6px 20px 8px / 8px 20px 6px 18px;
  border: 1px solid color-mix(in srgb, var(--pencil-soft) 55%, transparent);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--pencil-soft) 35%, transparent),
              6px 8px 0 color-mix(in srgb, var(--pencil-soft) 18%, transparent);
  background:
    repeating-linear-gradient(0deg,
      transparent 0 26px,
      color-mix(in srgb, var(--pencil-soft) 14%, transparent) 26px 27px),
    var(--card);
}
body[data-style="paper"] .btn {
  border-radius: 14px 5px 15px 6px / 6px 15px 5px 14px;
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--pencil-soft) 45%, transparent);
  background: var(--card);
}
body[data-style="paper"] .btn:hover { transform: rotate(-0.5deg); }
body[data-style="paper"] .btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
body[data-style="paper"] .day-btn,
body[data-style="paper"] .slot-btn {
  border-radius: 12px 4px 13px 5px / 5px 13px 4px 12px;
  box-shadow: none;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--pencil-soft) 65%, transparent);
}
body[data-style="paper"] .day-btn.selected,
body[data-style="paper"] .slot-btn.selected {
  background: var(--accent);
  color: #fff;
}
/* выбор услуги — «надломанный» прямоугольник с рваными краями */
body[data-style="paper"] .service-pick.selected {
  outline: none;
  color: #fff;
  border: 0;
  background: var(--accent);
  clip-path: polygon(2% 4%, 12% 0, 32% 3%, 55% 0, 78% 4%, 97% 1%,
                     100% 22%, 98% 45%, 100% 70%, 97% 96%,
                     75% 100%, 52% 96%, 30% 100%, 10% 97%, 0 99%,
                     2% 72%, 0 48%, 3% 24%);
}
body[data-style="paper"] .service-pick.selected .service-check {
  background: #fff;
  color: var(--accent);
  border-color: transparent;
}

/* --- Мемфис: разноцветные двойные рамки, декор, смещённые тени --- */
body[data-style="memphis"] .pencil-card {
  position: relative;
  border-radius: 18px;
  border: 3px solid var(--pencil);
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--pencil-soft) 55%, transparent);
  background: var(--card);
}
/* декоративные кружок и плюсик на карточках */
body[data-style="memphis"] .pencil-card::before {
  content: '';
  position: absolute;
  top: -12px; right: 18px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--pencil);
}
body[data-style="memphis"] .pencil-card::after {
  content: '✚';
  position: absolute;
  bottom: -14px; left: 16px;
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 700;
  transform: rotate(10deg);
}
body[data-style="memphis"] .btn {
  border-radius: 999px;
  border: 3px solid var(--pencil);
  background: var(--card);
  color: var(--pencil);
  box-shadow: 4px 4px 0 var(--accent);
  font-weight: 700;
}
body[data-style="memphis"] .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--accent); }
body[data-style="memphis"] .btn-accent { background: var(--accent); color: #fff; border-color: var(--pencil); box-shadow: 4px 4px 0 var(--pencil); }
body[data-style="memphis"] .day-btn,
body[data-style="memphis"] .slot-btn {
  border-radius: 999px;
  border: 3px solid var(--pencil);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 70%, transparent);
}
body[data-style="memphis"] .day-btn.selected,
body[data-style="memphis"] .slot-btn.selected {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
  transform: translate(3px, 3px);
}
/* выбор услуги — заливка + жирная рамка + тень другого цвета */
body[data-style="memphis"] .service-pick.selected {
  outline: none;
  background: var(--accent);
  color: #fff;
  border: 3px solid var(--pencil);
  border-radius: 16px;
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--pencil-soft) 70%, transparent);
  transform: rotate(-0.6deg);
}
body[data-style="memphis"] .service-pick.selected .service-check {
  background: var(--pencil);
  color: var(--paper);
  border-color: var(--pencil);
  transform: rotate(8deg);
}
body[data-style="memphis"] h1, body[data-style="memphis"] h2 { font-weight: 700; }

/* --- Y2K: металлик-градиенты, хром, пузырьковые радиусы --- */
body[data-style="y2k"] .btn {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pencil-soft) 70%, transparent);
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--paper) 90%, var(--pencil-soft)) 0%,
      color-mix(in srgb, var(--pencil-soft) 55%, var(--paper)) 45%,
      color-mix(in srgb, var(--paper) 85%, var(--accent)) 100%);
  color: var(--pencil);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -2px 4px rgba(0, 0, 0, 0.12),
              0 4px 10px rgba(0, 0, 0, 0.12);
}
body[data-style="y2k"] .btn:hover { transform: scale(1.03); filter: brightness(1.06); }
body[data-style="y2k"] .btn-accent {
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 75%, #ffffff) 0%,
      var(--accent) 50%,
      color-mix(in srgb, var(--accent) 70%, var(--pencil)) 100%);
  color: #fff;
}
body[data-style="y2k"] .pencil-card {
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--pencil-soft) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
              0 10px 26px rgba(0, 0, 0, 0.10);
  background: linear-gradient(170deg,
      color-mix(in srgb, var(--card) 85%, #ffffff) 0%,
      var(--card) 60%);
}
body[data-style="y2k"] .day-btn,
body[data-style="y2k"] .slot-btn {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pencil-soft) 65%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
body[data-style="y2k"] .day-btn.selected,
body[data-style="y2k"] .slot-btn.selected {
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 75%, #ffffff),
      color-mix(in srgb, var(--accent) 80%, var(--pencil)));
  color: #fff;
  border-color: transparent;
}
/* выбор услуги — металлик-градиент акцента */
body[data-style="y2k"] .service-pick.selected {
  outline: none;
  border-radius: 22px;
  border: 0;
  color: #fff;
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 72%, #ffffff) 0%,
      var(--accent) 55%,
      color-mix(in srgb, var(--accent) 68%, var(--pencil)) 100%);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
body[data-style="y2k"] .service-pick.selected .service-check {
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent);
  border-color: transparent;
}
body[data-style="y2k"] h1, body[data-style="y2k"] h2 { letter-spacing: 0.02em; }

/* --- кабинет: выбор языка страницы --- */
.language-picker ul { display: flex; gap: 8px; list-style: none; padding: 0; margin: 8px 0 0; flex-wrap: wrap; }
.language-picker li label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 2px solid var(--pencil); border-radius: 12px;
  cursor: pointer; font-size: 0.95rem; background: var(--card); margin-top: 0; font-weight: 400;
}
.language-picker li label:has(input:checked) { border-color: var(--accent); box-shadow: 2px 2px 0 rgba(58, 42, 26, 0.25); }
.language-picker input { margin: 0; }

/* --- .torn-x под стиль: свой край скроллера вместо карандашного надрыва ---
   У части стилей рваная маска убирается совсем, у части остаётся, но штрих
   по краю перекрашивается/усиливается. Псевдоэлементы переопределены
   полностью (content/position/size/background), чтобы pencil-надрыв не
   просвечивал. */

/* маска надрыва не нужна: вместо неё полоса/линейка внизу скроллера */
body[data-style="plain"] .torn-x .days-scroll,
body[data-style="plain"] .torn-x .gallery-scroll,
body[data-style="modern"] .torn-x .days-scroll,
body[data-style="modern"] .torn-x .gallery-scroll,
body[data-style="brutalism"] .torn-x .days-scroll,
body[data-style="brutalism"] .torn-x .gallery-scroll,
body[data-style="flat"] .torn-x .days-scroll,
body[data-style="flat"] .torn-x .gallery-scroll,
body[data-style="minimal"] .torn-x .days-scroll,
body[data-style="minimal"] .torn-x .gallery-scroll,
body[data-style="constructivism"] .torn-x .days-scroll,
body[data-style="constructivism"] .torn-x .gallery-scroll,
body[data-style="swiss"] .torn-x .days-scroll,
body[data-style="swiss"] .torn-x .gallery-scroll,
body[data-style="magazine"] .torn-x .days-scroll,
body[data-style="magazine"] .torn-x .gallery-scroll,
body[data-style="neon"] .torn-x .days-scroll,
body[data-style="neon"] .torn-x .gallery-scroll,
body[data-style="y2k"] .torn-x .days-scroll,
body[data-style="y2k"] .torn-x .gallery-scroll {
  -webkit-mask-image: none;
  mask-image: none;
}

/* plain: обычная серая линия */
body[data-style="plain"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -8px;
  width: auto; height: 2px; pointer-events: none; z-index: 2; clip-path: none;
  background: var(--pencil-soft);
}
body[data-style="plain"] .torn-x::after { content: none; }

/* modern: градиентная пилюля */
body[data-style="modern"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -9px;
  width: auto; height: 6px; pointer-events: none; z-index: 2; clip-path: none;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 55%, var(--paper)), var(--accent));
}
body[data-style="modern"] .torn-x::after { content: none; }

/* brutalism: сплошная толстая полоса */
body[data-style="brutalism"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -11px;
  width: auto; height: 8px; pointer-events: none; z-index: 2; clip-path: none;
  background: var(--pencil);
}
body[data-style="brutalism"] .torn-x::after {
  content: ''; position: absolute; left: 0; top: auto; right: auto; bottom: -11px;
  width: 8px; height: 8px; pointer-events: none; z-index: 3; clip-path: none;
  background: var(--accent);
}

/* flat: сплошная цветная полоса */
body[data-style="flat"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -8px;
  width: auto; height: 4px; pointer-events: none; z-index: 2; clip-path: none;
  background: var(--accent);
}
body[data-style="flat"] .torn-x::after { content: none; }

/* minimal: тонкая линия с точкой слева */
body[data-style="minimal"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -7px;
  width: auto; height: 1px; pointer-events: none; z-index: 2; clip-path: none;
  background: var(--pencil-soft);
}
body[data-style="minimal"] .torn-x::after {
  content: ''; position: absolute; left: 0; right: auto; top: auto; bottom: -10px;
  width: 6px; height: 6px; pointer-events: none; z-index: 3; clip-path: none;
  border-radius: 50%;
  background: var(--accent);
}

/* constructivism: диагональная штриховая полоса */
body[data-style="constructivism"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -10px;
  width: auto; height: 8px; pointer-events: none; z-index: 2; clip-path: none;
  background: repeating-linear-gradient(45deg,
    var(--accent) 0 5px, transparent 5px 10px);
}
body[data-style="constructivism"] .torn-x::after { content: none; }

/* swiss: тонкая сеточная линия с засечкой слева */
body[data-style="swiss"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -8px;
  width: auto; height: 5px; pointer-events: none; z-index: 2; clip-path: none;
  background: repeating-linear-gradient(90deg,
    var(--pencil-soft) 0 1px, transparent 1px 9px);
  background-position: bottom; background-size: 9px 1px; background-repeat: repeat-x;
}
body[data-style="swiss"] .torn-x::after {
  content: ''; position: absolute; left: 0; right: auto; top: auto; bottom: -12px;
  width: 12px; height: 12px; pointer-events: none; z-index: 3; clip-path: none;
  border-left: 2px solid var(--pencil);
  border-bottom: 2px solid var(--pencil);
}

/* magazine: двойная линейка с ромбом */
body[data-style="magazine"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -14px;
  width: auto; height: 13px; pointer-events: none; z-index: 2; clip-path: none;
  background:
    linear-gradient(var(--pencil), var(--pencil)) left bottom / 100% 1px no-repeat,
    linear-gradient(45deg, transparent 43%, var(--accent) 43% 57%, transparent 57%) 14px 1px / 11px 11px no-repeat;
}
body[data-style="magazine"] .torn-x::after {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -18px;
  width: auto; height: 1px; pointer-events: none; z-index: 2; clip-path: none;
  background: var(--pencil-soft);
}

/* drawn: риованый штрих-надрыв акцентным цветом, линия «карандашнее» */
body[data-style="drawn"] .torn-x::before,
body[data-style="drawn"] .torn-x::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 16px;
  pointer-events: none; z-index: 2; clip-path: none;
  color: var(--accent); opacity: 0.85;
  background-repeat: no-repeat; background-size: 100% 100%;
}
body[data-style="drawn"] .torn-x::before {
  left: 0; right: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40' preserveAspectRatio='none'%3E%3Cpolyline points='9,-2 5,1 10,4 5,7 11,10 5,13 10,16 5,19 11,22 5,25 10,28 5,31 11,34 5,37 9,42' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
body[data-style="drawn"] .torn-x::after {
  right: 0; left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40' preserveAspectRatio='none'%3E%3Cpolyline points='7,-2 11,1 6,4 11,7 5,10 11,13 6,16 11,19 5,22 11,25 6,28 11,31 5,34 11,37 7,42' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* retro: волнистая линия по нижнему краю (надрыв маски остаётся) */
body[data-style="retro"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -9px;
  width: auto; height: 9px; pointer-events: none; z-index: 2; clip-path: none;
  color: var(--accent); opacity: 0.85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='9' viewBox='0 0 28 9'%3E%3Cpath d='M0 4.5 Q7 0 14 4.5 T28 4.5' fill='none' stroke='currentColor' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x bottom / 28px 9px;
}
body[data-style="retro"] .torn-x::after { content: none; }

/* neon: светящаяся линия */
body[data-style="neon"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -8px;
  width: auto; height: 3px; pointer-events: none; z-index: 2; clip-path: none;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);
}
body[data-style="neon"] .torn-x::after { content: none; }

/* paper: усиленный «отрыв» — двойной тёмный штрих по надрыву */
body[data-style="paper"] .torn-x::before,
body[data-style="paper"] .torn-x::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 16px;
  pointer-events: none; z-index: 2; clip-path: none;
  color: var(--pencil); opacity: 0.9;
  background-repeat: no-repeat; background-size: 100% 100%;
}
body[data-style="paper"] .torn-x::before {
  left: 0; right: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40' preserveAspectRatio='none'%3E%3Cpolyline points='9,-2 6,1 9,4 6,7 11,10 6,13 9,16 6,19 11,22 6,25 9,28 6,31 11,34 6,37 9,42' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpolyline points='8,-2 5,1 8,4 5,7 10,10 5,13 8,16 5,19 10,22 5,25 8,28 5,31 10,34 5,37 8,42' fill='none' stroke='currentColor' stroke-width='0.8' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");
}
body[data-style="paper"] .torn-x::after {
  right: 0; left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40' preserveAspectRatio='none'%3E%3Cpolyline points='7,-2 10,1 7,4 10,7 5,10 10,13 7,16 10,19 5,22 10,25 7,28 10,31 5,34 10,37 7,42' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpolyline points='8,-2 11,1 8,4 11,7 6,10 11,13 8,16 11,19 6,22 11,25 8,28 11,31 6,34 11,37 8,42' fill='none' stroke='currentColor' stroke-width='0.8' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");
}

/* memphis: зигзаг из двух цветов */
body[data-style="memphis"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -10px;
  width: auto; height: 9px; pointer-events: none; z-index: 2; clip-path: none;
  color: var(--accent);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='9' viewBox='0 0 20 9'%3E%3Cpath d='M0 9 L5 1 L10 9 L15 1 L20 9' fill='none' stroke='currentColor' stroke-width='2.2'/%3E%3C/svg%3E") repeat-x bottom / 20px 9px;
}
body[data-style="memphis"] .torn-x::after {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -15px;
  width: auto; height: 9px; pointer-events: none; z-index: 1; clip-path: none;
  color: var(--pencil); opacity: 0.9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='9' viewBox='0 0 20 9'%3E%3Cpath d='M0 9 L5 1 L10 9 L15 1 L20 9' fill='none' stroke='currentColor' stroke-width='2.2'/%3E%3C/svg%3E") repeat-x bottom / 20px 9px;
}

/* y2k: хромированная градиентная полоса-пилюля */
body[data-style="y2k"] .torn-x::before {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: -9px;
  width: auto; height: 7px; pointer-events: none; z-index: 2; clip-path: none;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 65%, #ffffff),
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 65%, var(--pencil-soft)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 2px 6px rgba(0, 0, 0, 0.15);
}
body[data-style="y2k"] .torn-x::after { content: none; }

/* --- анимация смены темы под стиль ---
   Бумажный комок (theme_toggle.js) — только для pencil и страниц без
   data-style. Для остальных стилей theme_toggle.js/widget_theme.js вызывают
   window.okayThemeAnim.run(style, midpoint, origin): лёгкий оверлей с
   css-анимацией, на середине меняется data-theme. */
.theme-anim {
  position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  opacity: 0; background: var(--paper);
}

@keyframes themeFade {
  0% { opacity: 0; }
  45% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}
/* plain: простой fade 300ms */
.theme-anim-plain { animation: themeFade 0.3s ease both; }
/* minimal: медленный плавный fade 500ms */
.theme-anim-minimal { animation: themeFade 0.5s ease both; }
/* flat: почти мгновенная смена, короткий cross-fade */
.theme-anim-flat { animation: themeFade 0.15s linear both; }

@keyframes themeRipple {
  0% { clip-path: circle(0 at var(--tx, 50%) var(--ty, 50%)); opacity: 1; }
  45% { clip-path: circle(150% at var(--tx, 50%) var(--ty, 50%)); opacity: 1; }
  65% { opacity: 1; }
  100% { clip-path: circle(150% at var(--tx, 50%) var(--ty, 50%)); opacity: 0; }
}
/* modern: ripple-круг от кнопки тумблера */
.theme-anim-modern { animation: themeRipple 0.5s ease-out both; }

@keyframes themeBandTop {
  0% { transform: translateY(-102%); }
  40% { transform: translateY(0); }
  60% { transform: translateY(0); }
  100% { transform: translateY(102%); }
}
@keyframes themeBandBottom {
  0% { transform: translateY(102%); }
  40% { transform: translateY(0); }
  60% { transform: translateY(0); }
  100% { transform: translateY(-102%); }
}
/* brutalism: две шторки схлопываются и раскрываются другого цвета;
   на самом элементе — stub-анимация, чтобы animationend сработал и JS
   получил реальную длительность */
@keyframes themeStub { from { opacity: 0; } to { opacity: 0; } }
.theme-anim-brutalism { animation: themeStub 0.5s linear both; background: transparent; }
.theme-anim-brutalism::before,
.theme-anim-brutalism::after {
  content: ''; position: absolute; left: 0; right: 0; height: 50.5%;
  background: var(--pencil);
}
.theme-anim-brutalism::before { top: 0; animation: themeBandTop 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; }
.theme-anim-brutalism::after { bottom: 0; animation: themeBandBottom 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; }

@keyframes themeDiagonal {
  0% { clip-path: polygon(0 0, 0 0, 0 0); opacity: 1; }
  40% { clip-path: polygon(0 0, 220% 0, 0 220%); opacity: 1; }
  60% { clip-path: polygon(0 0, 220% 0, 0 220%); opacity: 1; }
  100% { clip-path: polygon(0 0, 220% 0, 0 220%); opacity: 0; }
}
/* constructivism: диагональная шторка (sweep из угла) */
.theme-anim-constructivism {
  animation: themeDiagonal 0.5s ease-in both;
  background: var(--pencil);
}

@keyframes themeSwissWipe {
  0% { clip-path: inset(0 0 100% 0); opacity: 1; }
  40% { clip-path: inset(0 0 0 0); opacity: 1; }
  60% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
/* swiss: смена «по сетке» — горизонтальная линия проходит сверху вниз */
.theme-anim-swiss { animation: themeSwissWipe 0.5s linear both; }

@keyframes themeFlip {
  0% { transform: perspective(1400px) rotateX(0deg); opacity: 1; }
  42% { transform: perspective(1400px) rotateX(-86deg); opacity: 1; }
  58% { transform: perspective(1400px) rotateX(-86deg); opacity: 1; }
  100% { transform: perspective(1400px) rotateX(-86deg); opacity: 0; }
}
/* magazine: переворот страницы от верхнего края */
.theme-anim-magazine {
  animation: themeFlip 0.55s ease-in both;
  transform-origin: top center;
}

@keyframes themeDrawnStroke {
  0% { opacity: 1; transform: scaleX(0) rotate(0.5deg); }
  38% { transform: scaleX(1.04) rotate(-0.4deg); }
  45% { transform: scaleX(1) rotate(0.2deg); }
  55% { opacity: 1; transform: scaleX(1) rotate(-0.2deg); }
  100% { opacity: 0; transform: scaleX(1) rotate(0deg); }
}
@keyframes themeDrawnPass {
  0% { opacity: 1; transform: scaleX(0) rotate(-0.6deg); }
  42% { transform: scaleX(1.03) rotate(0.5deg); }
  55% { opacity: 1; transform: scaleX(1) rotate(-0.3deg); }
  100% { opacity: 0; transform: scaleX(1) rotate(0deg); }
}
/* drawn: «рука перекрашивает фон» — три прохода наклонных штрих-полос
   (~-8deg) слева направо (scaleX, origin слева), stagger 70/150мс, лёгкий
   wobble, затем fade out. Цвет штрихов — --anim-bg (бумага НОВОЙ темы,
   её кладёт theme_anim.js; фолбэк — текущий var(--paper)). Общая ~0.9s;
   анимация на самом элементе — иначе animationend не сработает (как stub
   у brutalism). */
.theme-anim-drawn {
  animation: themeDrawnStroke 0.9s ease both;
  transform-origin: left center;
  background: repeating-linear-gradient(-8deg,
    var(--anim-bg, var(--paper)) 0 44px, transparent 44px 62px);
}
.theme-anim-drawn::before,
.theme-anim-drawn::after {
  content: ''; position: absolute; inset: 0;
  transform-origin: left center;
}
/* второй проход — тоньше, сдвинут, stagger 70мс */
.theme-anim-drawn::before {
  background: repeating-linear-gradient(-8deg,
    var(--anim-bg, var(--paper)) 0 30px, transparent 30px 52px);
  background-position: 12px 8px;
  animation: themeDrawnPass 0.78s ease 0.07s both;
}
/* третий проход — жирнее, stagger 150мс */
.theme-anim-drawn::after {
  background: repeating-linear-gradient(-8deg,
    var(--anim-bg, var(--paper)) 0 58px, transparent 58px 76px);
  background-position: -18px -10px;
  animation: themeDrawnPass 0.72s ease 0.15s both;
}

@keyframes themeSepia {
  0% { opacity: 0; filter: sepia(0); }
  45% { opacity: 1; filter: sepia(0.85) saturate(1.3); }
  60% { opacity: 1; filter: sepia(0.85) saturate(1.3); }
  100% { opacity: 0; filter: sepia(0); }
}
/* retro: fade через sepia-вспышку */
.theme-anim-retro { animation: themeSepia 0.55s ease both; }

@keyframes themeNeonDip {
  0% { opacity: 0; }
  30% { opacity: 0.9; }
  45% { opacity: 0.9; }
  58% { opacity: 0; }
  70% { opacity: 0.5; }
  82% { opacity: 0.12; }
  100% { opacity: 0; }
}
/* neon: выключение света — гашение и вспышка в новой теме */
.theme-anim-neon { animation: themeNeonDip 0.45s linear both; background: #000; }

@keyframes themePaperTilt {
  0% { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
  45% { transform: perspective(1200px) rotateY(-8deg) translateX(-1.5%); opacity: 1; }
  65% { transform: perspective(1200px) rotateY(-8deg) translateX(-1.5%); opacity: 1; }
  100% { transform: perspective(1200px) rotateY(0deg); opacity: 0; }
}
/* paper: краткий «переворот листа» — лёгкий наклон rotateY + fade */
.theme-anim-paper {
  animation: themePaperTilt 0.5s ease both;
  transform-origin: left center;
  box-shadow: 14px 0 34px rgba(0, 0, 0, 0.25);
}

@keyframes themeZigzagRun {
  0% { opacity: 0; background-position: 0 0; }
  35% { opacity: 1; }
  70% { opacity: 1; background-position: 56px 56px; }
  100% { opacity: 0; background-position: 80px 80px; }
}
/* memphis: зигзаг-полоса пробегает по экрану */
.theme-anim-memphis {
  animation: themeZigzagRun 0.5s linear both;
  background: repeating-linear-gradient(45deg,
    var(--accent) 0 14px, var(--pencil) 14px 28px);
}

@keyframes themeChrome {
  0% { opacity: 0; background-position: 120% 0; }
  35% { opacity: 1; }
  70% { opacity: 1; background-position: -20% 0; }
  100% { opacity: 0; background-position: -20% 0; }
}
/* y2k: chrome-blink — блик-градиент проходит слева направо */
.theme-anim-y2k {
  animation: themeChrome 0.5s ease both;
  background: linear-gradient(100deg,
    transparent 25%, rgba(255, 255, 255, 0.95) 50%, transparent 75%);
  background-size: 220% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .theme-anim, .theme-anim::before, .theme-anim::after { animation: none !important; }
}

/* --- neon: читаемость ссылок и приглушённого текста на инвертированных
   подложках (фон карточек/кнопок от --pencil, текст paper-цвета).
   Глобальный a { color: var(--pencil) } и .muted { color: var(--pencil-soft) }
   на таком фоне не читаются. Кнопки-ссылки (.btn) не трогаем. */
body[data-style="neon"] .pencil-card a:not(.btn),
body[data-style="neon"] .agree-group a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
body[data-style="neon"] .pencil-card a:not(.btn):hover,
body[data-style="neon"] .agree-group a:hover {
  color: var(--accent);
}
/* .muted внутри инвертированных карточек — светлее, чтобы читался на тёмном */
body[data-style="neon"] .pencil-card .muted,
body[data-style="neon"] .service-pick .muted {
  color: color-mix(in srgb, var(--paper) 62%, var(--pencil));
}


/* --- тумблер темы на странице мастера/виджете — в духе стиля --- */
/* pencil — как есть (органичная клякса выше), остальные — свой вид */

/* Обычный: нейтральный квадратик */
body[data-style="plain"] .theme-toggle {
  border-radius: 6px; border: 1px solid var(--pencil-soft); box-shadow: none;
  background: var(--card);
}
/* Модерн: градиентная пилюля со свечением */
body[data-style="modern"] .theme-toggle {
  border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--pencil)));
  color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* Брутализм: жёсткий квадрат со сдвигом */
body[data-style="brutalism"] .theme-toggle {
  border-radius: 0; border: 3px solid var(--pencil);
  background: var(--card); color: var(--pencil);
  box-shadow: 3px 3px 0 var(--pencil); font-weight: 900;
}
/* Flat: плоский акцентный круг */
body[data-style="flat"] .theme-toggle {
  border-radius: 8px; border: 0; box-shadow: none;
  background: var(--accent); color: #fff;
}
/* Минимализм: ghost с тонкой линией */
body[data-style="minimal"] .theme-toggle {
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--pencil-soft) 40%, transparent);
  background: transparent; box-shadow: none; font-size: 1.05rem;
}
/* Конструктивизм: скошенный, контрастная тень */
body[data-style="constructivism"] .theme-toggle {
  border-radius: 0; border: 2px solid var(--pencil);
  background: var(--accent); color: #fff;
  transform: skewX(-8deg); box-shadow: 3px 3px 0 var(--pencil);
}
/* Швейцарский: строгий квадрат, хаирлайн */
body[data-style="swiss"] .theme-toggle {
  border-radius: 0; border: 1px solid var(--pencil);
  background: var(--card); box-shadow: none; font-size: 1.1rem;
}
/* Журнальный: круг с тонким ободом */
body[data-style="magazine"] .theme-toggle {
  border-radius: 50%; border: 1px solid var(--pencil);
  outline: 1px solid color-mix(in srgb, var(--pencil) 35%, transparent);
  outline-offset: 2px; background: var(--card); box-shadow: none;
}
/* Рисованный: пунктир, чуть повёрнут */
body[data-style="drawn"] .theme-toggle {
  border: 2px dashed var(--accent); border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  background: var(--card); color: var(--accent);
  transform: rotate(-4deg); box-shadow: none;
}
/* Ретро: двойная рамка */
body[data-style="retro"] .theme-toggle {
  border-radius: 50%; border: 1px solid var(--pencil);
  outline: 1px solid var(--pencil); outline-offset: 3px;
  background: var(--card); box-shadow: none;
}
/* Неон: свечение, прозрачная подложка */
body[data-style="neon"] .theme-toggle {
  border-radius: 10px; border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--pencil) 88%, transparent);
  color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Бумажный крафт: неровные края */
body[data-style="paper"] .theme-toggle {
  border-radius: 14px 4px 16px 5px / 5px 16px 4px 14px;
  border: 2px solid var(--pencil); background: var(--card);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--pencil) 25%, transparent);
  transform: rotate(1deg);
}
/* Мемфис: двухцветная двойная рамка */
body[data-style="memphis"] .theme-toggle {
  border-radius: 12px; border: 3px solid var(--pencil);
  outline: 2px solid var(--accent); outline-offset: 2px;
  background: var(--accent); color: #fff; box-shadow: 3px 3px 0 var(--pencil);
}
/* Y2K: металлик-градиент, хром-бордер */
body[data-style="y2k"] .theme-toggle {
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pencil) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 60%, #fff), var(--card) 45%, color-mix(in srgb, var(--card) 80%, var(--pencil)));
  color: var(--pencil);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 8px color-mix(in srgb, var(--pencil) 25%, transparent);
}

/* виджет: тумблер тот же, фиксированное позиционирование не трогаем */

/* --- новые палитры (терракота-роза, океан, лесная, слива, закат, сланец) ---
   Полный набор переменных, как у базовых десяти; селекторы уникальны,
   порядок в файле на каскад не влияет. */
[data-palette="terracotta-rose"] { --paper:#faeee8; --pencil:#40282a; --pencil-soft:#87696a; --accent:#c67b6d; --card:#fdf3ee; --dot:#b98f88; --field:#fffaf7; }
[data-palette="ocean"]      { --paper:#e9f1f7; --pencil:#1f2c3a; --pencil-soft:#5c6b7a; --accent:#4a7fa5; --card:#f3f8fb; --dot:#8ba0b0; --field:#fbfdfe; }
[data-palette="forest"]     { --paper:#edf2e6; --pencil:#26301f; --pencil-soft:#5f6e55; --accent:#5f7d4a; --card:#f4f8ef; --dot:#93a483; --field:#fafcf6; }
[data-palette="plum"]       { --paper:#f5edf3; --pencil:#33202f; --pencil-soft:#6e5a6a; --accent:#965d86; --card:#faf4f8; --dot:#a98ba1; --field:#fdfafc; }
[data-palette="sunset"]     { --paper:#fdf0e4; --pencil:#3c2a20; --pencil-soft:#82695b; --accent:#dd8352; --card:#fef6ee; --dot:#c09a80; --field:#fffaf5; }
[data-palette="slate"]      { --paper:#efe9e1; --pencil:#2e2a26; --pencil-soft:#6e6259; --accent:#b06a3c; --card:#f7f1e9; --dot:#a2937f; --field:#fbf7f0; }

[data-theme="dark"][data-palette="terracotta-rose"] { --paper:#2a1f21; --pencil:#ecd7d2; --pencil-soft:#9c7f7c; --accent:#d08d7e; --card:#33272a; --dot:#5c464a; --field:#3c2e31; }
[data-theme="dark"][data-palette="ocean"]      { --paper:#18222d; --pencil:#d7e2ec; --pencil-soft:#7e8fa0; --accent:#6d9cc2; --card:#202b37; --dot:#45566a; --field:#27333f; }
[data-theme="dark"][data-palette="forest"]     { --paper:#1d2518; --pencil:#d8e2cc; --pencil-soft:#7f8f72; --accent:#77995f; --card:#252e1f; --dot:#47543c; --field:#2d3726; }
[data-theme="dark"][data-palette="plum"]       { --paper:#251a23; --pencil:#e6d4e0; --pencil-soft:#8d7688; --accent:#ac7a9b; --card:#2d212b; --dot:#4e3c49; --field:#352834; }
[data-theme="dark"][data-palette="sunset"]     { --paper:#28201b; --pencil:#f0ddd0; --pencil-soft:#9a8271; --accent:#e79a6b; --card:#302720; --dot:#574639; --field:#382e26; }
[data-theme="dark"][data-palette="slate"]      { --paper:#27211b; --pencil:#e6dccf; --pencil-soft:#97887a; --accent:#c9824f; --card:#2f2922; --dot:#5a5044; --field:#383026; }

/* --- переключатель языка на странице регистрации --- */
.signup-lang { display: flex; justify-content: center; align-items: center; gap: 10px;
  margin: 0 0 14px; font-size: 0.95rem; }
.signup-lang a { color: var(--pencil-soft); text-decoration: none; padding: 2px 6px;
  border-bottom: 2px dashed transparent; }
.signup-lang a:hover { color: var(--accent); }
.signup-lang a.current { color: var(--pencil); font-weight: 700;
  border-bottom-color: var(--accent); }
.signup-lang .sep { color: var(--dot); }

/* подсказки под полями форм (напр. требования к паролю на регистрации) */
ul.helptext { font-size: 0.85rem; margin: 4px 0 12px; padding-left: 18px; }
ul.helptext li { margin: 2px 0; }

/* --- палитры: мятная, песочная, ягодная, лазурная --- */
[data-palette="mint"]       { --paper:#eaf5ef; --pencil:#243830; --pencil-soft:#587062; --accent:#2fa88c; --card:#f2faf5; --dot:#8fb3a4; --field:#f6fcf8; }
[data-palette="sand"]       { --paper:#f7efdd; --pencil:#3d2f1e; --pencil-soft:#7d6c50; --accent:#c79a3d; --card:#fbf6ea; --dot:#b3a077; --field:#fdfaf2; }
[data-palette="berry"]      { --paper:#fbeff2; --pencil:#40202a; --pencil-soft:#7d5560; --accent:#d84f7d; --card:#fdf4f6; --dot:#bb8d9b; --field:#fef9fa; }
[data-palette="azure"]      { --paper:#eaf3fc; --pencil:#1f2a44; --pencil-soft:#56648a; --accent:#2f8fe0; --card:#f2f8fd; --dot:#8aa8cc; --field:#f7fbfe; }

[data-theme="dark"][data-palette="mint"]       { --paper:#1b2723; --pencil:#d9ebe2; --pencil-soft:#7fa392; --accent:#3cc0a2; --card:#233230; --dot:#47605a; --field:#2b3c38; }
[data-theme="dark"][data-palette="sand"]       { --paper:#282219; --pencil:#ecdfc4; --pencil-soft:#a08b66; --accent:#d3a952; --card:#302a1f; --dot:#5c5140; --field:#383124; }
[data-theme="dark"][data-palette="berry"]      { --paper:#28191e; --pencil:#f0d9e0; --pencil-soft:#a17584; --accent:#e56d94; --card:#302027; --dot:#5a3f48; --field:#392830; }
[data-theme="dark"][data-palette="azure"]      { --paper:#182233; --pencil:#d5e2f5; --pencil-soft:#8093b8; --accent:#54a3ea; --card:#212c42; --dot:#45577d; --field:#293450; }

/* --- SVG-заглушки по палитре мастера (инлайн-art с var(--...)) --- */
.master-head svg.avatar-art,
.widget-head svg.avatar-art {
  width: 96px;
  height: 96px;
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: var(--paper);
}
.widget-head svg.avatar-art {
  display: block;
  margin: 0 auto 6px;
}
@media (max-width: 480px) {
  .master-head svg.avatar-art,
  .widget-head svg.avatar-art { width: 80px; height: 80px; }
}

/* --- удаление уведомлений: крестик, свайп, collapse --- */
.notify-item {
  position: relative;
  overflow: hidden;
  transition: opacity .25s, transform .25s, max-height .3s .05s,
              padding .3s, border-width .3s;
}
.notify-item.notify-swiping { transition: none; }
.notify-item.notify-gone {
  opacity: 0;
  max-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}
.notify-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  line-height: 19px;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  color: var(--pencil);
  background: var(--card);
  border: 1.5px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  z-index: 1;
}
.notify-item:hover .notify-x,
.notify-item.notify-swiping .notify-x { opacity: 1; }
.notify-x:hover { color: var(--accent); border-color: var(--accent); }
@media (hover: none) {
  /* на тач-экранах без hover крестик приглушённо виден всегда */
  .notify-x { opacity: 0.55; }
}