html,
body {
  background: #fffaf3;
}

body {
  color: var(--studio-ink);
  font-family: var(--studio-font);
}

.paper {
  background:
    linear-gradient(90deg, rgba(115, 87, 246, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(27, 168, 219, 0.05) 1px, transparent 1px),
    #ffffff;
  background-size: 32px 32px;
}

.drawer-toggle {
  width: 62px;
  height: 62px;
  border: 1px solid rgba(32, 23, 45, 0.16);
  background: linear-gradient(135deg, var(--studio-pink), var(--studio-violet), var(--studio-blue));
  box-shadow: 0 16px 40px rgba(32, 23, 45, 0.2);
}

.tool-drawer {
  padding: 0;
  background:
    linear-gradient(90deg, rgba(245, 95, 159, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 211, 90, 0.08) 1px, transparent 1px),
    rgba(255, 250, 253, 0.98);
  background-size: 28px 28px;
}

.tool-drawer[aria-hidden="true"],
.tool-drawer[aria-hidden="true"] * {
  visibility: hidden;
}

body.drawer-open .tool-drawer,
body.drawer-open .tool-drawer * {
  visibility: visible;
}

.drawer-header {
  min-height: 60px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(32, 23, 45, 0.1);
  background: rgba(255, 255, 255, 0.9);
}

.drawer-header::before {
  display: none;
}

.drawer-header strong {
  color: var(--studio-ink);
  font-size: 1rem;
  letter-spacing: 0;
}

.icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(32, 23, 45, 0.12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--studio-shadow-sm);
}

.drawer-content {
  height: calc(100% - 60px);
  align-content: start;
  gap: 10px;
  padding: 12px;
}

.panel {
  padding: 12px;
  border: 1px solid rgba(32, 23, 45, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--studio-shadow-sm);
}

.panel h2 {
  margin-bottom: 9px;
  color: var(--studio-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tool-button,
.action-grid button,
.action-label,
.palette-tabs button,
.emoji-grid button,
.drawing-menu,
.rgb-row label,
#colorInput,
.swatch {
  border: 1px solid rgba(32, 23, 45, 0.12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.tool-button,
.action-grid button,
.action-label {
  min-height: 50px;
  gap: 5px;
  color: var(--studio-ink);
  font-size: 0.72rem;
}

.tool-button::after,
.action-grid button::after,
.action-label::after {
  display: none;
}

.tool-button.is-active,
.palette-tabs button.is-active,
.emoji-grid button.is-active {
  color: #7a2854;
  border-color: var(--studio-pink);
  background: #fff0f7;
  box-shadow: inset 0 0 0 1px rgba(245, 95, 159, 0.18);
}

.palette-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.palette-tabs button {
  min-height: 36px;
  color: var(--studio-ink-2);
  font-size: 0.72rem;
}

.color-row {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
}

#colorInput {
  width: 52px;
  height: 52px;
}

.swatches {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.swatch {
  min-height: 38px;
}

.swatch.is-active {
  border-color: var(--studio-pink);
  box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 5px var(--studio-pink);
  transform: none;
}

.range-row {
  grid-template-columns: 70px minmax(0, 1fr) 44px;
  color: var(--studio-ink-2);
  font-weight: 750;
}

.range-row input {
  accent-color: var(--studio-violet);
}

.emoji-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.toast {
  border-radius: 8px;
  background: var(--studio-ink);
}

@media (min-width: 760px) {
  .tool-drawer {
    left: auto;
    right: 0;
    width: 430px;
    height: 100dvh;
    border-left: 1px solid rgba(32, 23, 45, 0.12);
    box-shadow: -18px 0 54px rgba(32, 23, 45, 0.14);
    transform: translateX(106%);
  }

  body.drawer-open .tool-drawer {
    transform: translateX(0);
  }
}

@media (max-width: 759px) {
  .tool-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .palette-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .swatches {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .drawer-content {
    padding: 10px;
  }

  .panel {
    padding: 10px;
  }

  .tool-button,
  .action-grid button,
  .action-label {
    font-size: 0.66rem;
  }
}