:root {
  color-scheme: light;
  --pink: #ff77b7;
  --purple: #9b72ff;
  --blue: #56c8ff;
  --yellow: #ffd95c;
  --green: #63dfac;
  --ink: #2b2550;
  --surface: rgba(255,255,255,.94);
  --shadow: 0 12px 34px rgba(60,43,103,.18);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 10% 5%, rgba(255,219,239,.95), transparent 28%),
    radial-gradient(circle at 95% 18%, rgba(207,239,255,.95), transparent 30%),
    linear-gradient(180deg, #fff7fc 0%, #f8f7ff 55%, #effbff 100%);
  color: var(--ink);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
button:focus-visible { outline: 4px solid rgba(86,200,255,.42); outline-offset: 2px; }

.app-shell {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 8px;
  padding: calc(var(--safe-top) + 8px) 10px calc(var(--safe-bottom) + 8px);
}

.topbar {
  min-height: 58px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 48px;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 23px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(1.2);
}

.round-button,
.action-button,
.size-button,
.tool-button,
.confirm-button,
.sheet-back {
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 6px 16px rgba(56,40,98,.13), inset 0 0 0 1px rgba(73,57,114,.06);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.round-button:active,
.action-button:active,
.size-button:active,
.tool-button:active,
.confirm-button:active,
.sheet-back:active { transform: scale(.9); }

.round-button { width: 46px; height: 46px; border-radius: 16px; }
.round-button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.palette-button { color: #fff; background: linear-gradient(145deg,#ff77b7,#9b72ff); }
.rainbow-button { font-size: 24px; background: linear-gradient(145deg,#fff7a9,#ffe5f4 45%,#dff6ff); }

.swatches {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 3px 2px;
  scrollbar-width: none;
}
.swatches::-webkit-scrollbar,
.tool-dock::-webkit-scrollbar { display: none; }
.swatch {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.9);
  box-shadow: 0 4px 11px rgba(35,24,62,.18), inset 0 0 0 1px rgba(0,0,0,.08);
  transition: transform .18s ease;
}
.swatch.is-selected { transform: scale(1.18); box-shadow: 0 6px 16px rgba(35,24,62,.23),0 0 0 3px #fff,0 0 0 6px rgba(155,114,255,.35); }

.workspace { position: relative; min-height: 0; }
.canvas-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(48,36,84,.2), inset 0 0 0 1px rgba(46,32,78,.07);
}
.canvas-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.75);
}
#drawingCanvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

.empty-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.empty-hint::before {
  content: "";
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: linear-gradient(145deg,rgba(255,224,240,.9),rgba(222,243,255,.9));
  box-shadow: 0 12px 30px rgba(78,55,118,.12);
}
.empty-hint.is-hidden { opacity: 0; transform: scale(.8); }
.hint-hand { position: absolute; font-size: 52px; animation: doodle 1.7s ease-in-out infinite; }
.hint-spark { position: absolute; font-size: 25px; transform: translate(42px,-42px); animation: twinkle 1.1s ease-in-out infinite alternate; }
@keyframes doodle { 0%,100% { transform: translate(-12px,10px) rotate(-8deg); } 50% { transform: translate(16px,-12px) rotate(10deg); } }
@keyframes twinkle { from { transform: translate(38px,-38px) scale(.8) rotate(-8deg); } to { transform: translate(46px,-48px) scale(1.2) rotate(8deg); } }

.side-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  gap: 8px;
  z-index: 5;
}
.action-button { width: 44px; height: 44px; border-radius: 15px; color: #756998; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.action-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.action-button:disabled { opacity: .3; }
.mirror-action { font-size: 22px; background: linear-gradient(145deg,#fff,#edf9ff); }
.mirror-action.is-active {
  transform: scale(1.05);
  background: linear-gradient(145deg,#ffe9f5,#e9e3ff 55%,#dff7ff);
  box-shadow: 0 8px 20px rgba(74,51,117,.18), 0 0 0 4px rgba(155,114,255,.25);
}
.clear-action { color: #ff6b86; }
.save-action { color: #fff; background: linear-gradient(145deg,#56c8ff,#9b72ff); }

.brush-bubble {
  position: fixed;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-50%);
  z-index: 40;
}
.brush-bubble.is-visible { opacity: .92; }

.size-strip {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 8px 24px rgba(63,48,97,.12);
  backdrop-filter: blur(18px);
}
.size-button { width: 39px; height: 39px; border-radius: 14px; }
.size-button span { width: var(--dot); height: var(--dot); max-width: 28px; max-height: 28px; border-radius: 50%; background: var(--current-color,#ff77b7); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.size-button.is-selected { background: linear-gradient(145deg,#fff4fa,#eef8ff); box-shadow: 0 5px 14px rgba(56,40,98,.12),0 0 0 3px rgba(155,114,255,.25); }

.tool-dock {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 7px 8px;
  border-radius: 25px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(1.2);
}
.tool-button {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 19px;
  scroll-snap-align: center;
  background: linear-gradient(145deg,#fff,#f8f6ff);
}
.tool-button:nth-child(3n+1) { background: linear-gradient(145deg,#fff4fa,#ffe5f2); }
.tool-button:nth-child(3n+2) { background: linear-gradient(145deg,#f3f1ff,#e7e0ff); }
.tool-button:nth-child(3n) { background: linear-gradient(145deg,#effbff,#dcf5ff); }
.rainbow-tool { background: linear-gradient(145deg,#fff0f5,#fff7c8 34%,#e3fff0 66%,#e8e5ff) !important; }
.neon-tool { background: radial-gradient(circle,#fff9b8 0 25%,#edf9ff 65%,#e6e0ff) !important; }
.tool-button.is-selected { transform: translateY(-4px) scale(1.06); box-shadow: 0 12px 24px rgba(59,43,98,.2),0 0 0 4px rgba(255,255,255,.95),0 0 0 7px var(--current-color,#ff77b7); }
.rainbow-tool.is-selected { box-shadow: 0 12px 24px rgba(59,43,98,.2),0 0 0 4px rgba(255,255,255,.95),0 0 0 7px #ff77b7,0 0 20px rgba(86,200,255,.55); }
.tool-icon { font-size: 29px; filter: drop-shadow(0 2px 2px rgba(42,28,73,.12)); }

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(41,29,72,.25);
  backdrop-filter: blur(3px);
}
.bottom-sheet {
  position: fixed;
  z-index: 100;
  left: 10px;
  right: 10px;
  bottom: calc(var(--safe-bottom) + 10px);
  max-height: min(68dvh,560px);
  overflow-y: auto;
  padding: 10px 14px 18px;
  border-radius: 30px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 70px rgba(39,28,70,.3);
  transform: translateY(calc(100% + 40px));
  transition: transform .25s cubic-bezier(.22,.8,.23,1);
  pointer-events: none;
}
.bottom-sheet.is-open { transform: translateY(0); pointer-events: auto; }
.sheet-handle { width: 54px; height: 6px; margin: 0 auto 9px; border-radius: 999px; background: #ded8ef; }
.sheet-topbar {
  position: sticky;
  top: -10px;
  z-index: 3;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  min-height: 62px;
  margin: 0 -4px 12px;
  padding: 8px 4px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
}
.sheet-back {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: #fff;
  font-size: 44px;
  line-height: 1;
  padding: 0 0 5px;
  background: linear-gradient(145deg,#ff77b7,#9b72ff);
  box-shadow: 0 8px 20px rgba(85,61,134,.22);
}
.sheet-title-icon {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 20px;
  font-size: 30px;
  background: linear-gradient(145deg,#fff8fc,#edf8ff);
  box-shadow: inset 0 0 0 1px rgba(73,57,114,.06),0 6px 16px rgba(56,40,98,.1);
}
.sheet-spacer { width: 52px; }

.palette-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.palette-card {
  min-height: 86px;
  border-radius: 22px;
  padding: 13px;
  background: #f8f7ff;
  box-shadow: inset 0 0 0 1px rgba(60,45,95,.06);
}
.palette-card.is-selected { box-shadow: 0 0 0 4px rgba(155,114,255,.25),inset 0 0 0 1px rgba(60,45,95,.06); }
.palette-emoji { display: block; font-size: 25px; margin-bottom: 9px; }
.palette-preview { display: flex; gap: 5px; }
.palette-preview span { flex: 1; height: 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

.color-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 11px; }
.color-choice { aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 6px 16px rgba(45,32,76,.16),inset 0 0 0 1px rgba(0,0,0,.08); }
.color-choice.is-selected { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(155,114,255,.28),0 7px 18px rgba(45,32,76,.18); }

.stamp-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.stamp-choice { aspect-ratio: 1; border-radius: 20px; font-size: clamp(28px,9vw,44px); background: linear-gradient(145deg,#fff8fc,#f1f8ff); box-shadow: inset 0 0 0 1px rgba(63,47,98,.06),0 5px 14px rgba(58,42,93,.1); }
.stamp-choice.is-selected { box-shadow: 0 0 0 4px rgba(255,119,183,.28),0 8px 18px rgba(58,42,93,.15); transform: scale(1.04); }

.confirm-sheet { text-align: center; }
.confirm-art { font-size: 58px; margin: 0 0 18px; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.confirm-button { height: 74px; border-radius: 24px; font-size: 36px; }
.cancel-confirm { background: linear-gradient(145deg,#f2fffb,#ddfaef); }
.clear-confirm { background: linear-gradient(145deg,#fff1f5,#ffdce5); }

.toast {
  position: fixed;
  z-index: 150;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 110px);
  min-width: 110px;
  max-width: 78vw;
  padding: 12px 18px;
  border-radius: 999px;
  text-align: center;
  color: #fff;
  background: rgba(43,37,80,.9);
  box-shadow: 0 10px 28px rgba(33,24,60,.25);
  opacity: 0;
  transform: translate(-50%,15px) scale(.9);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  font-size: 21px;
}
.toast.is-visible { opacity: 1; transform: translate(-50%,0) scale(1); }

@media (max-height: 700px) {
  .app-shell { gap: 6px; padding-top: calc(var(--safe-top) + 5px); }
  .topbar { min-height: 52px; grid-template-columns: 44px minmax(0,1fr) 44px; }
  .round-button { width: 42px; height: 42px; }
  .swatch { width: 32px; height: 32px; flex-basis: 32px; }
  .tool-dock { min-height: 62px; }
  .tool-button { width: 49px; height: 49px; flex-basis: 49px; border-radius: 17px; }
  .tool-icon { font-size: 26px; }
  .size-strip { padding-block: 4px; }
  .size-button { width: 35px; height: 35px; }
  .action-button { width: 40px; height: 40px; }
  .side-actions { gap: 6px; }
}

@media (min-width: 700px) {
  .app-shell { max-width: 780px; margin: 0 auto; }
  .palette-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .stamp-grid { grid-template-columns: repeat(8,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}