/* ===== PAINT PAGE ===== */
body.paint-page {
  --page-bg: #EBE6D8;
  --page-fg: #1F1208;
  --page-muted: #4D3624;
  --toolbar-bg: #F5EFDC;
  --toolbar-border: #B8AA82;
  --toolbar-fg: #1F1208;
  background-color: var(--page-bg);
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  font-family: var(--font-body);
  color: var(--page-fg);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

body.paint-page[data-bg="cream"] {
  --page-bg: #EBE6D8; --page-fg: #1F1208; --page-muted: #4D3624;
  --toolbar-bg: #F5EFDC; --toolbar-border: #B8AA82; --toolbar-fg: #1F1208;
}
body.paint-page[data-bg="olive"] {
  --page-bg: #8B9856; --page-fg: #F5EFDC; --page-muted: #E0D6BC;
  --toolbar-bg: #4A5A2C; --toolbar-border: #8B9856; --toolbar-fg: #F5EFDC;
}
body.paint-page[data-bg="forest"] {
  --page-bg: #4A5A2C; --page-fg: #EBE6D8; --page-muted: #B8AA82;
  --toolbar-bg: #2C3A1A; --toolbar-border: #4A5A2C; --toolbar-fg: #EBE6D8;
}
body.paint-page[data-bg="twilight"] {
  --page-bg: #4D3624; --page-fg: #EBE6D8; --page-muted: #B8AA82;
  --toolbar-bg: #1F1208; --toolbar-border: #4D3624; --toolbar-fg: #EBE6D8;
}

/* ===== Background picker (в правом верхнем углу) ===== */
.paint-bg-picker {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background-color: var(--toolbar-bg);
  border: 1.5px solid var(--toolbar-border);
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 var(--radius);
  z-index: 10;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.paint-bg-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--toolbar-fg);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.75;
}

.paint-bg-swatches {
  display: flex;
  gap: 6px;
}

.paint-bg-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(31, 18, 8, 0.25);
  cursor: pointer;
  padding: 0;
  background: var(--sw);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

.paint-bg-swatch:hover {
  transform: scale(1.12);
}

.paint-bg-swatch.is-active {
  box-shadow: 0 0 0 2px var(--toolbar-bg), 0 0 0 4px var(--toolbar-fg);
  transform: scale(1.05);
}

.paint-topbar {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.paint-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  color: var(--green);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, filter 0.3s ease;
  white-space: nowrap;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  width: auto;
  align-self: flex-start;
}

.paint-back::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--cream);
  z-index: 0;
  filter: url(#btn-distort-low);
  transition: filter 0.3s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  pointer-events: none;
}

.paint-back:hover::before {
  background-color: var(--green);
  filter: url(#btn-distort-active);
}

.paint-back-label {
  position: relative;
  z-index: 2;
  pointer-events: none;
  color: var(--green);
  transition: color 0.2s ease;
}

.paint-back:hover .paint-back-label {
  color: var(--cream);
}

.paint-back:active::before {
  background-color: var(--green);
  filter: url(#btn-distort-active) brightness(0.95);
}

.paint-back:active .paint-back-label {
  color: var(--cream);
}

.paint-back:active {
  transform: scale(0.97);
}

.paint-app {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.paint-header {
  text-align: center;
  margin-bottom: 8px;
}

.paint-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--page-fg);
  line-height: 1.15;
  text-transform: lowercase;
  transition: color 0.4s ease;
}

.paint-sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--page-muted);
  margin: 0 auto;
  max-width: 60ch;
  line-height: 1.5;
  text-align: center;
  transition: color 0.4s ease;
}

/* ===== Toolbar ===== */
.paint-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background-color: var(--toolbar-bg);
  border-radius: var(--radius);
  border: 1.5px solid var(--toolbar-border);
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
  color: var(--toolbar-fg);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
  z-index: 2;
}

.paint-tools {
  display: flex;
  gap: 4px;
  align-items: center;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background-color: transparent;
  color: var(--toolbar-fg);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.tool-btn:hover {
  background-color: color-mix(in srgb, var(--toolbar-fg) 12%, transparent);
}

.tool-btn.is-active {
  background-color: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
}

.tool-btn:active {
  transform: scale(0.95);
}

.tool-btn img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  filter: brightness(0.92) saturate(0.95);
  transition: filter 0.18s ease, transform 0.18s ease;
}

.tool-btn.is-active img {
  filter: brightness(0) invert(1);
}

/* На оливковом фоне активная кнопка с коричневой иконкой — оставляем натуральный цвет */
body.paint-page[data-bg="olive"] .tool-btn.is-active img {
  filter: none;
}

@media (hover: none), (pointer: coarse) {
  .tool-btn:hover { background-color: transparent; }
  .tool-btn:active { background-color: color-mix(in srgb, var(--toolbar-fg) 18%, transparent); }
}

.paint-colors {
  display: flex;
  gap: 6px;
  align-items: center;
}

.color-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, border-color 0.15s;
}

.color-btn:hover {
  transform: scale(1.1);
}

.color-btn.is-active {
  border-color: var(--fg);
  transform: scale(1.1);
}

.paint-size {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--toolbar-fg);
  opacity: 0.85;
  position: relative;
}

.paint-size-input {
  width: 100px;
  accent-color: var(--accent);
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: color-mix(in srgb, var(--toolbar-fg) 30%, transparent);
  border-radius: 2px;
  outline: none;
  cursor: ew-resize;
  transition: filter 0.2s ease;
}

.paint-size-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--cream);
  box-shadow: 0 2px 6px rgba(31, 18, 8, 0.3);
  cursor: ew-resize;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.paint-size-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--cream);
  box-shadow: 0 2px 6px rgba(31, 18, 8, 0.3);
  cursor: ew-resize;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.paint-size-input:hover::-webkit-slider-thumb,
.paint-size-input:active::-webkit-slider-thumb {
  transform: scale(1.25);
  background: var(--green);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 20%, transparent), 0 2px 8px rgba(31, 18, 8, 0.3);
}

.paint-size-input:hover::-moz-range-thumb,
.paint-size-input:active::-moz-range-thumb {
  transform: scale(1.25);
  background: var(--green);
}

.paint-size-input.is-dragging {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 40%, transparent));
}

.paint-size-preview {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paint-size-preview::after {
  content: '';
  display: block;
  width: var(--size-px, 6px);
  height: var(--size-px, 6px);
  border-radius: 50%;
  background: var(--fg, #1F1208);
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
}

.paint-size-label {
  text-transform: lowercase;
  letter-spacing: 0.04em;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 30px;
  margin-right: -6px;
}

#sizeValue {
  display: inline-block;
  min-width: 2.5ch;
  text-align: left;
}

.paint-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--toolbar-fg);
  border: 1.5px solid color-mix(in srgb, var(--toolbar-fg) 35%, transparent);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.15s, border-color 0.2s;
  text-transform: lowercase;
}

.action-btn:hover {
  background-color: var(--toolbar-fg);
  color: var(--toolbar-bg);
  border-color: var(--toolbar-fg);
}

.action-btn:active {
  transform: scale(0.95);
}

.action-btn--accent {
  background-color: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
  transition: background-color 0.25s, color 0.25s, transform 0.15s, border-color 0.25s, box-shadow 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .action-btn--accent:hover {
    background-color: var(--green);
    color: var(--cream);
    border-color: var(--green);
  }
}

.action-btn--accent:active,
.action-btn--accent:focus-visible {
  background-color: var(--green);
  color: var(--cream);
  border-color: var(--green);
  transform: scale(0.95);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent);
}

/* ===== Canvas — оборванный лист бумаги в стиле обложки ===== */
.paint-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 60vh;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paint-paper {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 1200 / 700;
  margin: 0 auto;
  background-color: #E5DCC0;
  border-radius: 1px;
  box-shadow:
    0 2px 4px rgba(31, 18, 8, 0.10),
    0 8px 22px rgba(61, 42, 30, 0.16),
    0 24px 60px rgba(31, 18, 8, 0.30);
  /* Маска: рваные края по всему периметру (как на референсе) */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='none'><path d='M5,14 37,16 85,5 115,21 146,15 192,5 236,10 265,6 306,17 336,11 366,21 407,5 453,7 488,24 536,22 565,22 611,16 640,11 669,21 701,13 742,8 787,7 833,13 878,9 909,22 955,24 989,15 1020,21 1070,6 1116,5 1163,10 1197,10 1190,47 1198,85 1191,123 1187,156 1187,185 1198,211 1196,244 1190,283 1189,321 1182,364 1196,391 1185,428 1184,462 1193,501 1182,526 1198,567 1190,601 1195,636 1194,678 1194,682 1158,695 1108,682 1079,689 1031,698 982,694 945,692 896,691 868,694 829,685 782,683 739,681 705,689 673,687 633,692 590,682 557,694 517,697 481,684 440,697 404,693 365,692 330,684 300,685 268,687 219,687 191,695 145,685 109,689 81,684 40,697 19,697 10,655 16,627 20,584 14,559 12,518 12,482 3,446 20,407 1,371 2,341 14,311 3,282 19,248 3,223 18,199 17,171 11,144 0,101 6,75 12,32 5,14Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='none'><path d='M5,14 37,16 85,5 115,21 146,15 192,5 236,10 265,6 306,17 336,11 366,21 407,5 453,7 488,24 536,22 565,22 611,16 640,11 669,21 701,13 742,8 787,7 833,13 878,9 909,22 955,24 989,15 1020,21 1070,6 1116,5 1163,10 1197,10 1190,47 1198,85 1191,123 1187,156 1187,185 1198,211 1196,244 1190,283 1189,321 1182,364 1196,391 1185,428 1184,462 1193,501 1182,526 1198,567 1190,601 1195,636 1194,678 1194,682 1158,695 1108,682 1079,689 1031,698 982,694 945,692 896,691 868,694 829,685 782,683 739,681 705,689 673,687 633,692 590,682 557,694 517,697 481,684 440,697 404,693 365,692 330,684 300,685 268,687 219,687 191,695 145,685 109,689 81,684 40,697 19,697 10,655 16,627 20,584 14,559 12,518 12,482 3,446 20,407 1,371 2,341 14,311 3,282 19,248 3,223 18,199 17,171 11,144 0,101 6,75 12,32 5,14Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  transition: background-color 0.4s ease;
}

/* В кремовом варианте — холст настоящий кремовый, не серый */
body.paint-page[data-bg="cream"] .paint-paper {
  background-color: #EBE6D8;
}

body.paint-page[data-bg="cream"] .paint-paper::before {
  background-color: #EBE6D8;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.30  0 0 0 0 0.16  0 0 0 0.06 0'/></filter><rect width='400' height='400' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.18  0 0 0 0 0.08  0 0 0 0.06 0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>"),
    linear-gradient(135deg, #f3ecd8 0%, #EBE6D8 50%, #d9cfb6 100%);
  background-blend-mode: multiply, multiply, normal;
}

.paint-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #E5DCC0;
  background-image:
    /* Крупная зернистость (приглушена) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.30  0 0 0 0 0.16  0 0 0 0.10 0'/></filter><rect width='400' height='400' filter='url(%23f)'/></svg>"),
    /* Мелкие вкрапления (приглушены) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.18  0 0 0 0 0.08  0 0 0 0.10 0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>"),
    /* Светлые блики */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='h'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' seed='12'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.90  0 0 0 0 0.78  0 0 0 0.06 0'/></filter><rect width='280' height='280' filter='url(%23h)'/></svg>"),
    /* Базовый градиент — бежевый */
    linear-gradient(135deg, #ebe2c5 0%, #E5DCC0 50%, #d6c9a8 100%);
  background-blend-mode: multiply, multiply, screen, normal;
  z-index: 0;
  filter: url(#paper-shadow);
}

.paint-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 25%, rgba(199, 84, 50, 0.07) 0, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(74, 90, 44, 0.08) 0, transparent 45%),
    /* Лёгкие "пятна" по всей площади для эффекта состаренности */
    radial-gradient(ellipse at 50% 50%, rgba(31, 18, 8, 0.05) 0, transparent 60%);
  z-index: 1;
}

.paint-paper canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  position: relative;
  z-index: 2;
  background-color: transparent;
}

.paint-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.6vw, 16px);
  font-style: italic;
  color: var(--muted);
  opacity: 0.5;
  z-index: 3;
  text-align: center;
  padding: 0 24px;
  transition: opacity 0.3s ease;
}

.paint-hint.is-hidden {
  opacity: 0;
}

@media (max-width: 760px) {
  .paint-canvas-wrap {
    padding: 8px;
    min-height: 70vh;
  }
  .paint-paper {
    aspect-ratio: 3 / 4;
    max-width: 100%;
  }
  .paint-toolbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
  }
  .paint-actions {
    margin-left: 0;
    width: 100%;
  }
  .action-btn {
    flex: 1;
  }
  .paint-size {
    width: 100%;
  }
  .paint-size input[type="range"] {
    flex: 1;
    width: auto;
  }
}