/* ── Code Formatter ── */
.cf-wrap { display: flex; flex-direction: column; gap: 1rem; }
.cf-panels { display: flex; gap: 1rem; }
.cf-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cf-panel-header { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: .375rem; }
.cf-textarea { font-family: 'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular, monospace; font-size: .8125rem; resize: vertical; min-height: 220px; background: var(--color-surface); border-color: var(--color-border); }
.cf-action-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 576px) { .cf-panels { flex-direction: column; } }

/* ── JWT Decoder ── */
.jwt-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: .5rem; padding: 1rem; margin-bottom: .75rem; }
.jwt-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .375rem; }
.jwt-label--header { color: #e06c75; }
.jwt-label--payload { color: #d19a66; }
.jwt-label--sig { color: #61afef; }
.jwt-code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .8125rem; white-space: pre-wrap; word-break: break-all; background: transparent; border: none; padding: 0; }
.jwt-invalid { color: #e06c75; font-size: .875rem; }
.jwt-valid-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; padding: .2rem .5rem; border-radius: .25rem; }
.jwt-valid-badge--valid { background: #d1fae5; color: #065f46; }
.jwt-valid-badge--error { background: #fee2e2; color: #991b1b; }

/* ── Code to Image ── */
.ci-preview-wrap { border: 1px solid var(--color-border); border-radius: .5rem; overflow: hidden; }
.ci-window-bar { display: flex; align-items: center; gap: .375rem; padding: .5rem .75rem; background: #2d2d2d; }
.ci-dot { width: .75rem; height: .75rem; border-radius: 50%; }
.ci-dot--red { background: #ff5f57; }
.ci-dot--yellow { background: #ffbd2e; }
.ci-dot--green { background: #28c940; }
.ci-code-wrap { overflow-x: auto; }
.ci-action-bar { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }

/* ── Text to Handwriting ── */
.th-canvas-wrap { border: 1px solid var(--color-border); border-radius: .5rem; overflow: hidden; background: #fff; }
.th-canvas-wrap canvas { display: block; max-width: 100%; }
.th-action-bar { display: flex; gap: .5rem; margin-top: .75rem; }

/* ── Color Tools ── */
.ct-swatch-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: .25rem; margin-top: .75rem; }
.ct-swatch-item { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.ct-swatch { aspect-ratio: 1; border-radius: .375rem; border: 1px solid var(--color-border); cursor: pointer; }
.ct-swatch-label { font-size: .625rem; color: var(--color-text-muted); text-align: center; word-break: break-all; }
.ct-mixer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .375rem; margin-top: .75rem; }
.ct-mixer-swatch { aspect-ratio: 1; border-radius: .375rem; border: 1px solid var(--color-border); cursor: pointer; }
@media (max-width: 576px) { .ct-swatch-grid { grid-template-columns: repeat(5, 1fr); } }
.ct-hex-input { max-width: 110px; }
.ct-steps-range { min-width: 140px; }