.xp-notepad {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.xp-notepad-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--accent-soft);
  background: var(--surface-soft);
  padding: 5px;
}

.xp-note-btn {
  border-top: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: linear-gradient(var(--surface-panel-top), var(--surface-panel-bottom));
  color: var(--text-primary);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}

.xp-note-file {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}

.xp-note-editor {
  width: 100%;
  min-height: 360px;
  height: 100%;
  resize: none;
  border: 1px solid var(--accent-mid);
  background: var(--color-white);
  color: var(--editor-text);
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
  padding: 10px;
}

.xp-paint {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.xp-paint-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--accent-soft);
  background: var(--surface-soft);
  padding: 5px;
  font-size: 11px;
  color: var(--text-muted);
}

.xp-paint-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.xp-paint-tool,
.xp-paint-size,
.xp-paint-color {
  font-size: 11px;
}

input[type="range"] {
  accent-color: var(--control-accent);
}

.xp-paint-btn {
  border-top: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: linear-gradient(var(--surface-panel-top), var(--surface-panel-bottom));
  color: var(--text-primary);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}

.xp-paint-stage {
  border: 1px solid var(--accent-mid);
  background: var(--color-white);
  overflow: auto;
  flex: 1;
  min-height: 160px;
}

.xp-paint-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  cursor: crosshair;
}