body { color: var(--oo-color-base); }
.tool-panel { margin-bottom: 16px; padding: 24px; background: var(--oo-color-surface); border: 1px solid var(--oo-color-border-light); border-radius: var(--oo-radius); box-shadow: var(--oo-shadow-card); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-heading > div { display: flex; align-items: center; gap: 10px; }
.panel-heading h2 { font-size: 1.1rem; }
.step-number { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: var(--oo-color-progressive); border-radius: 50%; font-weight: 700; }
.checkbox-label { display: flex; align-items: center; gap: 8px; color: var(--oo-color-subtle); font-size: .9rem; }
.checkbox-label input { accent-color: var(--oo-color-progressive); }
.full-input { width: 100%; padding: 9px 10px; color: var(--oo-color-base); background: var(--oo-color-surface); border: 1px solid var(--oo-color-border); border-radius: var(--oo-radius); font: inherit; }
.full-input:focus { border-color: var(--oo-color-progressive); box-shadow: 0 0 0 1px var(--oo-color-progressive); outline: 0; }
.input-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1.6; resize: vertical; }
.tool-panel > .btn { margin-top: 16px; }
.header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.header-grid label { display: grid; gap: 6px; color: var(--oo-color-subtle); font-size: .85rem; font-weight: 700; }
.table-wrap { overflow-x: auto; border: 1px solid var(--oo-color-border-light); }
.staff-grid { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(180px, 1.3fr) minmax(180px, 1.3fr) 42px; gap: 12px; align-items: center; padding: 12px; min-width: 680px; }
.staff-grid--header { color: var(--oo-color-subtle); background: var(--oo-color-surface-alt); font-size: .78rem; font-weight: 700; }
.staff-row { border-top: 1px solid var(--oo-color-border-light); }
.staff-row input { min-width: 0; }
.copy-row { min-width: 34px; padding: 6px; color: var(--oo-color-link); background: transparent; border: 0; cursor: pointer; font-size: 1rem; }
.copy-row:hover { background: var(--oo-color-surface-hover); }
@media (max-width: 680px) { .panel-heading { align-items: flex-start; flex-direction: column; } .header-grid { grid-template-columns: 1fr; } }