.toolroll-app.toolroll-character-type-extractor { box-sizing: border-box; width: 100%; max-width: 100%; padding: clamp(16px, 3vw, 28px); color: #172033; background: #f8fafc; border: 1px solid #d8e0eb; border-radius: 12px; box-shadow: 0 4px 18px rgba(23, 32, 51, .06); }
.toolroll-app.toolroll-character-type-extractor, .toolroll-app.toolroll-character-type-extractor * { box-sizing: border-box; }
.toolroll-app.toolroll-character-type-extractor label, .toolroll-app.toolroll-character-type-extractor legend { font-weight: 700; line-height: 1.5; }
.toolroll-app.toolroll-character-type-extractor textarea { display: block; width: 100%; max-width: 100%; min-height: 200px; margin-top: 8px; padding: 12px 14px; color: #172033; background: #fff; border: 1px solid #9aa9bc; border-radius: 8px; font: inherit; font-size: 16px; line-height: 1.7; resize: vertical; }
.toolroll-app.toolroll-character-type-extractor textarea::placeholder { color: #67758a; opacity: 1; }
.toolroll-app.toolroll-character-type-extractor .toolroll-character-type-extractor__options { min-width: 0; margin: 18px 0 0; padding: 14px; border: 1px solid #c8d2df; border-radius: 8px; }
.toolroll-app.toolroll-character-type-extractor .toolroll-character-type-extractor__option-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin-top: 5px; }
.toolroll-app.toolroll-character-type-extractor .toolroll-character-type-extractor__option-list label, .toolroll-app.toolroll-character-type-extractor .toolroll-character-type-extractor__newline { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.toolroll-app.toolroll-character-type-extractor .toolroll-character-type-extractor__newline { width: fit-content; margin-top: 14px; }
.toolroll-app.toolroll-character-type-extractor input { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; }
.toolroll-app.toolroll-character-type-extractor .toolroll-character-type-extractor__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.toolroll-app.toolroll-character-type-extractor button { min-height: 44px; margin: 0; padding: 10px 18px; color: #263248; background: #fff; border: 1px solid #9aa9bc; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; }
.toolroll-app.toolroll-character-type-extractor [data-action="process"] { color: #fff; background: #1769aa; border-color: #1769aa; }
.toolroll-app.toolroll-character-type-extractor button:hover:not(:disabled) { filter: brightness(.94); }
.toolroll-app.toolroll-character-type-extractor button:disabled { cursor: not-allowed; opacity: .55; }
.toolroll-app.toolroll-character-type-extractor textarea:focus-visible, .toolroll-app.toolroll-character-type-extractor button:focus-visible, .toolroll-app.toolroll-character-type-extractor input:focus-visible { outline: 3px solid #f4b740; outline-offset: 2px; }
.toolroll-app.toolroll-character-type-extractor .toolroll-character-type-extractor__result { margin-top: 20px; }
.toolroll-app.toolroll-character-type-extractor .toolroll-character-type-extractor__copy { margin-top: 12px; }
.toolroll-app.toolroll-character-type-extractor [data-role="summary"], .toolroll-app.toolroll-character-type-extractor [data-role="status"] { margin: 14px 0 0; font-size: .9rem; line-height: 1.6; }
.toolroll-app.toolroll-character-type-extractor [data-role="summary"] { font-weight: 700; }
.toolroll-app.toolroll-character-type-extractor [data-role="status"] { padding: 10px 12px; color: #3b4658; background: #eef1f5; border-radius: 7px; }
.toolroll-app.toolroll-character-type-extractor [data-role="status"][data-state="success"] { color: #0b5135; background: #e2f4eb; border-left: 4px solid #137a52; }
.toolroll-app.toolroll-character-type-extractor [data-role="status"][data-state="error"] { color: #7a1f1f; background: #fde8e8; border-left: 4px solid #b83232; }
@media (max-width: 600px) { .toolroll-app.toolroll-character-type-extractor .toolroll-character-type-extractor__option-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toolroll-app.toolroll-character-type-extractor .toolroll-character-type-extractor__actions button, .toolroll-app.toolroll-character-type-extractor .toolroll-character-type-extractor__copy button { width: 100%; } }