.jtc-native-brush-panel { box-sizing: border-box; position: fixed; z-index: 1150; min-width: 0; max-width: calc(100vw - 16px); container-type: inline-size; container-name: jtc-native-brush; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--painting-line,var(--color-border)); border-radius: var(--radius-lg,12px); color: var(--painting-text-body,var(--color-text-primary)); background: var(--painting-surface-raised,var(--color-surface)); box-shadow: 0 12px 36px #0003; padding: 12px; font: inherit; animation: jtc-brush-enter 140ms cubic-bezier(.2,0,0,1); }
.jtc-native-brush-panel [hidden] { display: none !important; }
.jtc-native-brush-panel * { box-sizing: border-box; min-width: 0; }
.jtc-native-brush-panel header,.jtc-native-brush-panel footer,.jtc-native-brush-toolbar,.jtc-native-brush-roles,.jtc-native-brush-test-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jtc-native-brush-panel header { justify-content: space-between; }
.jtc-native-brush-panel header strong { overflow-wrap: anywhere; }
.jtc-native-brush-panel footer { margin-top: 10px; justify-content: flex-end; }
.jtc-native-brush-panel :is(button,input,select) { min-height: 32px; font: inherit; color: inherit; border: 1px solid var(--painting-line,var(--color-border)); border-radius: var(--radius-sm,6px); background: var(--painting-surface,var(--color-background)); }
.jtc-native-brush-panel button { cursor: pointer; padding: 5px 9px; text-align: center; }
.jtc-native-brush-panel :is(input,select) { padding: 5px 7px; max-width: 100%; }
.jtc-native-brush-panel :is(input,select,button,canvas,summary):focus-visible { outline: 2px solid var(--painting-focus,var(--color-accent)); outline-offset: 2px; }
.jtc-native-brush-panel button[aria-pressed='true'],.jtc-native-brush-panel [data-native-brush-action='save'] { color: var(--painting-accent,var(--color-accent)); background: var(--painting-accent-soft,var(--color-accent-soft)); }
.jtc-native-brush-panel :disabled { opacity: .55; cursor: not-allowed; }
.jtc-native-brush-panel [aria-invalid='true'] { border-color: var(--color-danger,#a53737); }
.jtc-native-brush-status { min-height: 18px; margin: 8px 0; color: var(--painting-text-muted); font-size: var(--painting-font-support,11px); overflow-wrap: anywhere; }
.jtc-native-brush-toolbar { margin: 8px 0; }
.jtc-native-brush-toolbar input { flex: 1 1 140px; width: 100%; }
.jtc-native-brush-toolbar select { flex: 1 1 100px; }
.jtc-native-brush-list { display: grid; gap: 5px; }
.jtc-native-brush-row { border: 1px solid var(--painting-line); border-radius: var(--radius-sm,6px); overflow: hidden; }
.jtc-native-brush-row > button { display: flex; gap: 8px; width: 100%; align-items: center; text-align: left; border: 0; }
.jtc-native-brush-row canvas { width: 104px; height: 39px; flex: 0 0 104px; border-radius: 3px; }
.jtc-native-brush-row-label { flex: 1 1 auto; display: grid; gap: 4px; overflow-wrap: anywhere; }
.jtc-native-brush-row-label strong { font-size: var(--painting-font-body,12px); }
.jtc-native-brush-row-label small,.jtc-native-brush-note { font-size: var(--painting-font-support,11px); color: var(--painting-text-muted); overflow-wrap: anywhere; line-height: 1.5; }
.jtc-native-brush-row-actions { display: flex; gap: 4px; padding: 0 6px 6px; justify-content: flex-end; }
.jtc-native-brush-studio-body { display: grid; grid-template-columns: 148px minmax(150px,1fr) minmax(240px,1fr); gap: 12px; align-items: start; }
.jtc-native-brush-tabs { display: grid; gap: 5px; }
.jtc-native-brush-tabs button { text-align: left; }
.jtc-native-brush-control { display: grid; gap: 5px; margin: 0 0 12px; font-size: var(--painting-font-body,12px); }
.jtc-native-brush-control input:not([type='checkbox']),.jtc-native-brush-control select { width: 100%; }
.jtc-native-brush-control small { color: var(--painting-text-muted); font-size: var(--painting-font-support,11px); overflow-wrap: anywhere; }
.jtc-native-brush-number { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jtc-native-brush-number input[type='number'] { flex: 0 1 96px; }
.jtc-native-brush-number input[type='range'] { flex: 1 1 100px; padding: 0; }
.jtc-native-brush-fields > button { margin: 0 4px 8px 0; }
.jtc-native-brush-test summary { padding: 8px 0; min-height: 32px; cursor: pointer; font-size: var(--painting-font-body,12px); }
.jtc-native-brush-test canvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; touch-action: none; background: repeating-conic-gradient(#ededed 0% 25%,#fff 0% 50%) 0 0 / 12px 12px; border: 1px solid var(--painting-line); border-radius: var(--radius-sm,6px); }
.jtc-native-brush-test-tools { padding-top: 6px; }
.jtc-native-brush-check { display: flex; align-items: center; gap: 5px; font-size: var(--painting-font-support,11px); }
.jtc-native-brush-check input { min-height: 0; }
.jtc-native-brush-confirm { padding: 10px; margin-top: 12px; border: 1px solid var(--painting-line); border-radius: var(--radius-sm,6px); background: var(--painting-accent-soft); }
.jtc-native-brush-confirm p { margin-top: 0; overflow-wrap: anywhere; }
.jtc-native-brush-confirm button { margin: 2px; }
@media (max-width: 1000px) { .jtc-native-brush-studio-body { grid-template-columns: minmax(0,1fr) minmax(240px,1fr); } .jtc-native-brush-tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; } }
@media (max-width: 600px) { .jtc-native-brush-studio-body { display: flex; flex-direction: column; gap: 10px; } .jtc-native-brush-tabs { width: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; } .jtc-native-brush-tabs button { white-space: nowrap; flex: 0 0 auto; } .jtc-native-brush-fields,.jtc-native-brush-test { width: 100%; } .jtc-native-brush-panel :is(button,input,select,summary) { min-height: 44px; } .jtc-native-brush-check input { min-height: 24px; width: 24px; } .jtc-native-brush-panel footer { justify-content: flex-start; } }
@container jtc-native-brush (max-width: 700px) { .jtc-native-brush-studio-body { grid-template-columns: minmax(0,1fr) minmax(240px,1fr); } .jtc-native-brush-tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; } }
@container jtc-native-brush (max-width: 520px) { .jtc-native-brush-studio-body { display: flex; flex-direction: column; gap: 10px; } .jtc-native-brush-tabs { width: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; } .jtc-native-brush-tabs button { white-space: nowrap; flex: 0 0 auto; } .jtc-native-brush-fields,.jtc-native-brush-test { width: 100%; } .jtc-native-brush-panel footer { justify-content: flex-start; } }
@media (pointer: coarse) { .jtc-native-brush-panel :is(button,input,select,summary) { min-height: 44px; } .jtc-native-brush-check input { min-height: 24px; width: 24px; } }
@keyframes jtc-brush-enter { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .jtc-native-brush-panel { animation-duration: 80ms; } }