.tool-page{padding-block:var(--space-6)}.tool-page__eyebrow{color:var(--color-accent);text-transform:uppercase;letter-spacing:.04em;margin:0 0 var(--space-2);font-size:.8125rem;font-weight:600}.tool-page__title{margin:0 0 var(--space-2);font-size:1.75rem;font-weight:700}.tool-page__subtitle{color:var(--color-muted);margin:0 0 var(--space-5);font-size:1rem}.tool-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);gap:var(--space-4);flex-direction:column;display:flex}.field-grid{gap:var(--space-4);grid-template-columns:1fr;display:grid}@media (width>=720px){.field-grid{grid-template-columns:1fr 1fr}}.field-col{gap:var(--space-4);flex-direction:column;min-width:0;display:flex}.tool-controls{align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.segmented{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);gap:3px;width:fit-content;padding:3px;display:inline-flex}.segmented__btn{color:var(--color-muted);font-family:var(--font-sans);border-radius:calc(var(--radius-sm) - 2px);cursor:pointer;background:0 0;border:none;padding:6px 14px;font-size:.8125rem;font-weight:600}.segmented__btn.is-active{background:var(--color-accent);color:var(--color-accent-contrast)}.field{gap:var(--space-2);flex-direction:column;flex:1;display:flex}.field--static{flex:none}.field__label-row{justify-content:space-between;align-items:center;display:flex}.field__label{color:var(--color-muted);font-size:.8125rem;font-weight:600}.field__textarea{resize:vertical;background:var(--color-bg);width:100%;min-height:320px;color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-mono);flex:1;font-size:.84375rem;line-height:1.5}pre.field__textarea{white-space:pre-wrap;overflow-wrap:break-word;max-height:60vh;overflow-y:auto}@media (width>=720px){.field__textarea{min-height:520px}}.field__textarea:focus{outline:2px solid var(--color-accent);outline-offset:1px}.field__textarea--compact{min-height:140px}@media (width>=720px){.field__textarea--compact{min-height:180px}}[data-panel]{display:contents}.field__input{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-mono);padding:9px 12px;font-size:.84375rem}.field__input:focus{outline:2px solid var(--color-accent);outline-offset:1px}.field__hint{margin:var(--space-2) 0 0;color:var(--color-muted);font-size:.8125rem}.oversized-placeholder{justify-content:center;align-items:center;gap:var(--space-3);border:1px dashed var(--color-border);border-radius:var(--radius-md);min-height:320px;padding:var(--space-6);text-align:center;color:var(--color-muted);flex-direction:column;display:flex}@media (width>=720px){.oversized-placeholder{min-height:520px}}.oversized-placeholder__icon{width:3rem;height:3rem;color:var(--color-accent);animation:2.4s ease-in-out infinite oversized-pulse}@keyframes oversized-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@media (prefers-reduced-motion:reduce){.oversized-placeholder__icon{animation:none}}.oversized-placeholder__title{color:var(--color-text);margin:0;font-size:1rem;font-weight:600}.oversized-placeholder__hint{max-width:34ch;margin:0;font-size:.875rem}.file-drop{border:1px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);min-height:96px;color:var(--color-muted);cursor:pointer;text-align:center;padding:var(--space-4);flex:1;justify-content:center;align-items:center;font-size:.875rem;display:flex}.file-drop:hover{border-color:var(--color-accent)}.file-drop__input{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.field__actions{align-items:center;gap:var(--space-4);display:flex}.btn-ghost{color:var(--color-accent);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:0;font-size:.8125rem;font-weight:600;display:inline-flex}.btn-ghost:disabled{color:var(--color-muted);opacity:.6;cursor:not-allowed}.btn-ghost.is-copied{color:var(--color-success);animation:.3s copy-pop}.btn-ghost.is-error{color:var(--color-error);animation:.3s copy-pop}.btn-ghost__icon{line-height:1;display:inline-block}@keyframes copy-pop{0%{transform:scale(1)}35%{transform:scale(1.18)}to{transform:scale(1)}}.status-message{color:var(--color-success);margin:0;font-size:.875rem;font-weight:600}.status-message[data-type=error]{color:var(--color-error)}.status-message[data-type=info]{color:var(--color-muted)}.json-highlight{white-space:pre-wrap;word-break:break-word;margin:0;overflow:auto}[data-output]:empty:before{content:attr(data-placeholder);color:var(--color-muted)}.json-highlight--empty code{color:var(--color-muted)}.json-key{color:var(--color-text)}.json-string{color:var(--color-success)}.json-number{color:var(--color-syntax-number)}.json-boolean{color:var(--color-syntax-boolean)}.json-null{color:var(--color-muted)}.line-results{white-space:pre-wrap;word-break:break-word;margin:0;overflow:auto}.line-results--empty{color:var(--color-muted)}.line{display:block}.line--error{color:var(--color-error)}.line--success{color:var(--color-success)}.checkbox-row{justify-content:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.checkbox-field{color:var(--color-text);cursor:pointer;align-items:center;gap:6px;font-size:.8125rem;display:inline-flex}.checkbox-field input[type=checkbox]{accent-color:var(--color-accent);cursor:pointer;width:16px;height:16px}.compact-field{align-items:center;gap:var(--space-2);flex-direction:column;display:flex}.compact-field__input{text-align:center;width:5.5rem}.compact-field-row{gap:var(--space-4);flex-wrap:wrap;display:flex}.dynamic-row-list{gap:var(--space-2);flex-direction:column;display:flex}.dynamic-row{align-items:center;gap:var(--space-2);display:flex}.dynamic-row .field__input{flex:1}.dynamic-row__remove{border:1px solid var(--color-border);border-radius:var(--radius-sm);width:2.25rem;height:2.25rem;color:var(--color-muted);cursor:pointer;background:0 0;flex:none;justify-content:center;align-items:center;font-size:1.1rem;line-height:1;display:flex}.dynamic-row__remove:hover{color:var(--color-error);border-color:var(--color-error)}.sign-toggle{border:1px solid var(--color-border);border-radius:var(--radius-sm);width:2.5rem;height:2.5rem;color:var(--color-text);cursor:pointer;background:0 0;flex:none;justify-content:center;align-items:center;font-size:1.1rem;font-weight:600;display:flex}.sign-toggle[data-sign="-1"]{color:var(--color-error);border-color:var(--color-error)}.field-output{max-height:60vh;font-family:var(--font-sans);overflow-y:auto}.field-block{margin-bottom:var(--space-4)}.field-block:last-child{margin-bottom:0}.field-block__heading{text-transform:uppercase;letter-spacing:.04em;color:var(--color-muted);margin-bottom:var(--space-2);font-size:.75rem;font-weight:700}.field-badge-line{align-items:center;gap:var(--space-2);font-family:var(--font-mono);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);flex-wrap:wrap;font-size:.9rem;display:flex}.field-badge{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.03em;border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-accent-contrast);padding:2px 8px;font-size:.6875rem;font-weight:700}.field-badge--ok{background:var(--color-success)}.field-badge--bad{background:var(--color-error)}.field-badge-line__note{font-family:var(--font-sans);color:var(--color-muted);font-size:.75rem}.field-row{column-gap:var(--space-2);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border);flex-wrap:wrap;display:flex}.field-row:last-child{border-bottom:none}.field-row__name{font-family:var(--font-mono);color:var(--color-text);white-space:nowrap;font-weight:700}.field-row__value{font-family:var(--font-mono);color:var(--color-text);word-break:break-all;flex:auto}.field-row--accent .field-row__name{color:var(--color-accent)}.field-row__desc{color:var(--color-muted);flex-basis:100%;font-size:.8125rem}.check-list{gap:var(--space-2);flex-direction:column;display:flex}.check-item{align-items:baseline;column-gap:var(--space-2);flex-wrap:wrap;font-size:.84375rem;display:flex}.check-item__icon{flex:none;width:1.1em;font-weight:700}.check-item__name{font-family:var(--font-mono)}.check-item__desc{min-width:0;color:var(--color-muted);overflow-wrap:break-word;flex-basis:100%;font-size:.78125rem}.check-item--ok .check-item__icon{color:var(--color-success)}.check-item--bad .check-item__icon{color:var(--color-error)}.check-item--warn .check-item__icon{color:var(--color-accent)}.media-preview{border:1px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);min-height:200px;padding:var(--space-4);justify-content:center;align-items:center;display:flex}.media-preview canvas{max-width:100%;height:auto}.media-preview__empty{color:var(--color-muted);text-align:center;font-size:.875rem}.section-title{margin:0 0 var(--space-5);font-size:1.75rem;font-weight:700}.tools{padding-block:var(--space-6)}.tools-category+.tools-category{margin-top:var(--space-6)}.tools-grid{gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}.tool-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);color:inherit;text-decoration:none;display:block}.tool-card:hover{border-color:var(--color-accent)}.tool-card__title{margin:0 0 var(--space-1);font-size:1.0625rem;font-weight:600}.tool-card__desc{color:var(--color-muted);margin:0;font-size:.875rem}.related-tools{border-top:1px solid var(--color-border)}.faq{padding-block:var(--space-6)}.faq-list{gap:var(--space-3);flex-direction:column;max-width:46rem;display:flex}.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);background:var(--color-surface)}.faq-item__question{cursor:pointer;font-weight:600;list-style:none}.faq-item__question::-webkit-details-marker{display:none}.faq-item[open] .faq-item__question{margin-bottom:var(--space-3)}.faq-item__answer{color:var(--color-muted);margin:0;line-height:1.6}
