.cp-drawer {
  position: fixed; top: 0; right: 0; z-index: 60;
  width: 300px; max-width: 86vw; height: 100vh;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -16px 0 40px -24px rgba(0, 0, 0, 0.4);
  transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto; padding: 16px;
}
.cp-drawer.open { transform: translateX(0); }
.cp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cp-head h4 { font-size: 14px; }
.cp-kbd { font-size: 10px; background: var(--line-soft); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; color: var(--ink-mute); }
.cp-sec { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); font-weight: 700; margin: 14px 0 6px; }
.cp-field { display: block; margin-bottom: 8px; }
.cp-lab { display: block; font-size: 11px; color: var(--ink-soft); margin-bottom: 3px; }
.cp-inp { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.cp-color { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.cp-tog { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.cp-actions { display: flex; gap: 6px; margin-top: 16px; }
.cp-btn { flex: 1; font: inherit; font-size: 12px; font-weight: 700; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); cursor: pointer; }
.cp-btn:hover { border-color: var(--accent); }