@charset "utf-8";

.tool-container { display: flex; flex-direction: column; height: calc(-80px + 100vh); padding: 1.25rem 1.5rem 1rem; gap: 1rem; box-sizing: border-box; }

.tool-header { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

.tool-header h2 { margin: 0px; font-size: 1.4rem; display: flex; align-items: center; gap: 0.4rem; color: var(--color-primary-4, #1c1c1c); }

.tool-back-link { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--color-accent-0, #3c82a4); text-decoration: none; white-space: nowrap; }

.tool-back-link:hover { text-decoration: underline; }

.tool-panels { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 0.5rem; flex: 1 1 0%; min-height: 0px; }

.tool-panel { display: flex; flex-direction: column; border: 1px solid var(--color-primary-1, #ececec); border-radius: 8px; background: var(--color-primary-0, #fafaf8); overflow: hidden; }

.tool-panel-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary-2, #a0a0a0); }

.tool-panel-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem 0.4rem; min-height: 3.1rem; box-sizing: border-box; flex-shrink: 0; gap: 0.5rem; flex-wrap: nowrap; border-bottom: 1px solid var(--color-primary-1, #ececec); }

.tool-toolbar-controls { display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }

.tool-summary-options { display: flex; align-items: flex-end; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }

.tool-summary-options .tool-option-label { flex-direction: column; align-items: stretch; gap: 0.15rem; font-size: 0.65rem; }

.tool-btn-action { font-size: 0.875rem; padding: 0.3rem 0.85rem; display: flex; align-items: center; gap: 0.3rem; }

.tool-btn-copy, .tool-btn-clear { font-size: 0.875rem; padding: 0.3rem 0.6rem; display: flex; align-items: center; gap: 0.25rem; }

.tool-textarea { flex: 1 1 0%; width: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; resize: none; background: transparent; padding: 0.5rem 0.85rem 0.85rem; font-size: 0.95rem; color: var(--color-primary-4, #1c1c1c); font-family: inherit; line-height: 1.6; box-sizing: border-box; }

.tool-textarea::placeholder { color: var(--color-primary-2, #a0a0a0); }

.tool-textarea:disabled { opacity: 0.6; cursor: not-allowed; }

.tool-output { flex: 1 1 0%; overflow-y: auto; padding: 0.75rem 0.85rem; font-size: 0.95rem; line-height: 1.6; color: var(--color-primary-4, #1c1c1c); white-space: pre-wrap; word-break: break-word; }

.tool-output-placeholder { color: var(--color-primary-2, #a0a0a0); font-style: italic; }

.tool-error { display: flex; align-items: center; gap: 0.4rem; color: rgb(192, 57, 43); font-size: 0.9rem; }

@keyframes tool-spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.tool-spin { display: inline-block; animation: 0.8s linear 0s infinite normal none running tool-spin; }

.tool-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; }

.tool-options { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.tool-option-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary-2, #a0a0a0); }

.tool-option-select { font-size: 0.875rem; padding: 0.3rem 0.5rem; border: 1px solid var(--color-primary-1, #ececec); border-radius: 5px; background: rgb(255, 255, 255); color: var(--color-primary-4, #1c1c1c); cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: normal; }

.tool-option-select:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 720px) {
  .tool-panels { grid-template-columns: 1fr; }
  .tool-container { height: auto; }
  .tool-panel { min-height: 220px; }
  .tool-panel-toolbar, .tool-toolbar-controls, .tool-summary-options { flex-wrap: wrap; }
}