.tool-ui{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0;margin:0 0 var(--space-xs);width:100%;max-width:100%;box-shadow:0 6px 20px #00000024;overflow:hidden;height:auto;min-height:var(--tool-ui-min-height, clamp(480px, calc(100vh - 320px) , 1200px));max-height:none}[data-theme=light] .tool-ui{box-shadow:0 1px 3px #0000001a}.tool-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(11rem,2fr) minmax(0,4fr);grid-template-rows:1fr;gap:0;min-height:var(--tool-grid-target-height, 100%);height:var(--tool-grid-target-height, auto);align-items:stretch}.tool-grid>*{display:flex;flex-direction:column;min-height:0;min-width:0}.tool-ui--io .tool-grid,.tool-ui--balanced-402040 .tool-grid{grid-template-columns:minmax(0,4fr) minmax(11rem,2fr) minmax(0,4fr)}.tool-ui--io .tool-grid>.tool-controls:first-of-type,.tool-ui--balanced-402040 .tool-grid>.tool-controls:first-of-type{grid-column:1}.tool-ui--io .tool-grid>.tool-controls:last-of-type,.tool-ui--balanced-402040 .tool-grid>.tool-controls:last-of-type{grid-column:3}.tool-ui--io .tool-grid>.tool-actions,.tool-ui--io .tool-grid>.tool-action-container,.tool-ui--balanced-402040 .tool-grid>.tool-actions,.tool-ui--balanced-402040 .tool-grid>.tool-action-container{grid-column:2}.tool-ui--io .tool-grid>.tool-action-container,.tool-ui--balanced-402040 .tool-grid>.tool-action-container{border-right:1px solid var(--color-border)}.tool-ui--io .tool-options-inline,.tool-ui--balanced-402040 .tool-options-inline{display:flex;flex-direction:column;gap:.75rem;padding:1rem;border-bottom:1px solid var(--color-border);background:var(--color-background)}.tool-ui--io .tool-options-inline .checkbox-inline,.tool-ui--balanced-402040 .tool-options-inline .checkbox-inline{display:flex;align-items:center;gap:.5rem;font-size:13px}.tool-ui--io .tool-options-inline input[type=text],.tool-ui--balanced-402040 .tool-options-inline input[type=text]{width:100%;min-height:40px}.tool-ui--generator .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}.tool-ui--generator .tool-grid>.tool-actions,.tool-ui--generator .tool-grid>.tool-controls.full-width,.tool-ui--generator .tool-grid>.strength-indicator{grid-column:1 / -1}.tool-ui--complex .tool-grid{grid-template-columns:minmax(0,4fr) minmax(11rem,2fr) minmax(0,4fr)}@media(max-width:768px){.tool-grid,.tool-ui--io .tool-grid,.tool-ui--balanced-402040 .tool-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto}.tool-ui--generator .tool-grid,.tool-ui--complex .tool-grid{grid-template-columns:1fr;grid-template-rows:auto}.tool-textarea-shell{grid-template-columns:1fr}.tool-line-numbers{display:none}.tool-grid>.tool-controls{border-right:none;border-bottom:1px solid var(--color-border)}.tool-grid>.tool-controls:last-child{border-bottom:none}.tool-action-container{border-right:none;border-bottom:1px solid var(--color-border)}.tool-action-container .tool-actions{border-bottom:none}.tool-ui--io .tool-grid>.tool-controls:first-of-type,.tool-ui--io .tool-grid>.tool-controls:last-of-type,.tool-ui--io .tool-grid>.tool-actions,.tool-ui--io .tool-grid>.tool-action-container,.tool-ui--balanced-402040 .tool-grid>.tool-controls:first-of-type,.tool-ui--balanced-402040 .tool-grid>.tool-controls:last-of-type,.tool-ui--balanced-402040 .tool-grid>.tool-actions,.tool-ui--balanced-402040 .tool-grid>.tool-action-container{grid-column:auto}}.tool-controls{margin-bottom:0;display:flex;flex-direction:column;height:100%;min-height:0;background:var(--color-surface);min-width:0}.tool-grid>.tool-controls{border-right:1px solid var(--color-border)}.tool-grid>.tool-controls:last-child{border-right:none}.tool-controls label{display:block;margin-bottom:0;font-weight:600;color:var(--color-text);padding:.75rem 1rem;background:var(--color-background);border-bottom:1px solid var(--color-border);font-size:13px;text-transform:uppercase;letter-spacing:.5px}.tool-controls textarea,.tool-controls input,.tool-controls select{width:100%;font-family:var(--font-mono);font-size:14px;line-height:1.6;border:none;border-radius:0;padding:.9rem 1rem;background:var(--color-surface);color:var(--color-text);transition:background-color var(--transition-fast);flex:1;resize:none;margin:0;min-width:0;box-sizing:border-box}.tool-textarea-shell{display:grid;grid-template-columns:3.2rem minmax(0,1fr);align-items:stretch;flex:1;min-height:0;background:var(--color-surface)}.tool-line-numbers{display:flex;flex-direction:column;align-items:flex-end;gap:0;padding:.9rem .65rem .9rem .4rem;border-right:1px solid var(--color-border);background:var(--color-background);color:var(--color-text-light);font-family:var(--font-mono);font-size:12px;line-height:1.6;overflow:hidden;user-select:none}.tool-line-numbers span{height:1.6em}.tool-controls textarea.tool-textarea--numbered{border-left:none}.tool-controls select{appearance:none;cursor:pointer}.tool-controls textarea{min-height:100%;height:100%;max-height:none}.tool-ui--io{--tool-mobile-sticky-actions-height: 4.5rem}.tool-controls textarea:focus,.tool-controls input:focus{outline:2px solid var(--color-focus);outline-offset:-2px;background:var(--color-background)}.help-text{font-size:11px;color:var(--color-text-light);margin-top:0;margin-bottom:0;padding:var(--space-xs) var(--space-md);background:var(--color-background);border-top:1px solid var(--color-border)}.tool-actions{display:flex;flex-direction:column;gap:var(--space-sm);padding:1.5rem 1rem;background:linear-gradient(180deg,var(--color-background) 0%,var(--color-surface) 100%);align-self:stretch;justify-content:flex-start;align-items:stretch;min-width:0;min-height:0}.tool-actions button{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-lg);background:var(--color-primary);color:var(--color-primary-contrast);border:1px solid transparent;border-radius:var(--radius-md);font-weight:700;font-size:13px;cursor:pointer;transition:all var(--transition-fast);white-space:normal;min-width:0;min-height:42px;text-transform:none;letter-spacing:.02em;box-shadow:0 4px 10px #0000001f;width:100%;line-height:1.3;text-align:center}.tool-actions button:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 2px 4px #2563eb33}.tool-actions button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.tool-actions button:active{transform:translateY(0)}.tool-actions button:disabled{background:var(--color-border);color:var(--color-text-light);border:1px solid var(--color-border);cursor:not-allowed;transform:none}.tool-actions button.secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);box-shadow:none}.tool-actions button.secondary:hover{background:var(--color-background);box-shadow:0 2px 4px #0000001a}.tool-actions button.secondary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.tool-controls button.secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);min-height:44px;padding:var(--space-sm) var(--space-md);font-weight:600}.tool-controls button.secondary:hover{background:var(--color-background)}.tool-ui button.secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);font-weight:600;padding:.6rem .9rem}.tool-ui button.secondary:hover{background:var(--color-background);border-color:var(--color-primary)}@media(min-width:769px){.tool-grid>.tool-actions,.tool-grid>.tool-action-container{position:sticky;top:0;align-self:start}}.error-message,.success-message{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);margin-bottom:var(--space-md);display:none;font-size:13px;font-weight:500;max-width:1400px;margin-left:auto;margin-right:auto}.error-message{background:#ef44441a;border-left:3px solid var(--color-error);color:var(--color-error)}.success-message{background:#10b9811a;border-left:3px solid var(--color-success);color:var(--color-success)}[data-theme=light] .error-message{background:#fee;color:#c00}[data-theme=light] .success-message{background:#efe;color:#060}.error-message:not(:empty),.success-message:not(:empty){display:block}.security-warning,.info-notice{background-color:#fff3cd;border:2px solid #ffc107;border-radius:var(--radius-sm);padding:var(--space-md);margin:var(--space-lg) auto;color:#856404;max-width:1400px}.security-warning strong,.info-notice strong{color:#856404}[data-theme=light] .security-warning,[data-theme=light] .info-notice{background-color:#fff3cd;color:#856404}.tool-options{display:flex;gap:var(--space-lg);flex-wrap:wrap;margin-bottom:var(--space-lg);padding:var(--space-md);background:var(--color-background);border-radius:var(--radius-sm)}.choice-group{display:grid;gap:.5rem}.choice-group__label{font-size:13px;font-weight:700;color:var(--color-text)}.choice-item{display:flex;align-items:center;gap:.65rem;min-height:44px;padding:.5rem .625rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);font-size:13px;cursor:pointer;transition:border-color var(--transition-fast),background-color var(--transition-fast)}.choice-item:hover{border-color:var(--color-primary);background:var(--color-background)}.choice-item:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}.choice-input{width:1.05rem;height:1.05rem;margin:0;accent-color:var(--color-primary);flex-shrink:0}.choice-label{flex:1 1 auto;font-weight:500;color:var(--color-text);line-height:1.35}.tool-option{display:flex;align-items:center;gap:var(--space-sm)}.tool-option input[type=checkbox],.tool-option input[type=radio]{width:auto;margin:0}.tool-option label{margin:0;font-weight:400;cursor:pointer}.output-readonly{background:var(--color-background);cursor:default}.copy-btn{position:relative}.copy-btn.copied:after{content:"Copied!";position:absolute;top:-30px;left:50%;transform:translate(-50%);background:var(--color-text);color:var(--color-background);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:.75rem;white-space:nowrap;pointer-events:none;animation:fadeOut 2s forwards}@keyframes fadeOut{0%,50%{opacity:1}to{opacity:0}}@media(max-width:768px){.tool-ui{padding:var(--space-md)}.tool-actions{flex-direction:column}.tool-actions button{width:100%;min-height:44px;padding:var(--space-md) var(--space-lg)}.tool-controls textarea{min-height:220px}.tool-ui--io .tool-grid{padding-bottom:var(--tool-mobile-sticky-actions-height)}.tool-ui--io .tool-grid>.tool-actions,.tool-ui--io .tool-grid>.tool-action-container{position:sticky;bottom:0;z-index:15;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -6px 18px #0000001f}.tool-ui--io .tool-grid>.tool-actions{order:3;margin-top:var(--space-sm)}.tool-ui--io .tool-actions{position:sticky;bottom:0;z-index:15;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -6px 18px #0000001f}.tool-ui--io .tool-grid>.tool-controls:first-of-type{order:1}.tool-ui--io .tool-grid>.tool-controls:last-of-type{order:2}}.tool-ui>#error-container{padding:var(--space-md) var(--space-lg) 0}.tool-ui .tool-section{margin-bottom:0;display:flex;flex-direction:column;gap:var(--space-md);padding:clamp(1rem,1.25vw + .75rem,1.5rem);border-bottom:1px solid var(--color-border)}.tool-ui .tool-section:last-of-type{border-bottom:none}.tool-ui .tool-section h3{margin-top:0;margin-bottom:var(--space-md);font-size:20px}.tool-ui .tool-section>.tool-controls{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.tool-ui .tool-section>.tool-actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-self:flex-start;padding:0;background:transparent}.tool-ui .tool-section>.tool-actions button{width:auto;min-width:10.5rem}.current-time{display:flex;flex-direction:column;gap:var(--space-md)}.time-display{display:flex;align-items:center;gap:var(--space-md)}.time-display label{min-width:120px;font-weight:600}.time-display input{flex:1;padding:var(--space-sm);font-family:var(--font-mono);font-size:14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-background)}.time-display button{padding:var(--space-sm) var(--space-md);font-size:14px;font-weight:500;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast)}.time-display button:hover{background:var(--color-background)}.bulk-controls{margin-bottom:var(--space-md)}.bulk-controls label{display:block;margin-bottom:var(--space-sm);font-weight:500}.bulk-controls input[type=number]{width:150px;padding:var(--space-sm);font-size:14px;border:1px solid var(--color-border);border-radius:var(--radius-sm)}.success-message:not(:empty){display:block;padding:var(--space-md);margin-bottom:var(--space-lg);background:#10b9811a;border:1px solid var(--color-success);border-radius:var(--radius-sm);color:var(--color-success);font-weight:500}[data-theme=light] .success-message:not(:empty){background:#f0fdf4;color:#15803d}@media(max-width:768px){.time-display{flex-direction:column;align-items:stretch}.time-display label{min-width:auto}.bulk-controls input[type=number]{width:100%}}.tool-action-container{display:flex;flex-direction:column;gap:var(--space-md);min-width:0;min-height:0;background:linear-gradient(180deg,var(--color-background) 0%,var(--color-surface) 100%);border-right:1px solid var(--color-border)}.tool-action-container .tool-actions{width:100%;border-right:none;border-bottom:1px solid var(--color-border);justify-content:flex-start}.tool-action-container>.ad-slot{flex:1 1 auto;min-height:0;border:none;border-top:1px solid var(--color-border)}.tool-actions button.secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.tool-actions button.secondary:hover{background:var(--color-background)}@media(prefers-reduced-motion:reduce){.tool-actions button,.tool-controls textarea,.tool-controls input,.copy-btn:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.tool-actions button:hover{transform:none}}.tool-page[data-astro-cid-2snbj4jw]{width:100%}.tool-header-container[data-astro-cid-2snbj4jw]{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--space-md);margin:0 auto var(--space-xs)}.tool-header[data-astro-cid-2snbj4jw]{margin:0;flex:1 1 680px;width:auto;max-width:900px;min-height:auto;padding:0 var(--space-sm) 0 0;display:flex;flex-direction:column;justify-content:flex-start;align-content:start}.tool-header[data-astro-cid-2snbj4jw] h1[data-astro-cid-2snbj4jw]{margin:0;font-size:24px;line-height:1.2}.intro[data-astro-cid-2snbj4jw]{font-size:15px;color:var(--color-text-light);margin:var(--space-xs) 0 0 0;line-height:1.5;max-width:80ch}.tool-content[data-astro-cid-2snbj4jw],.tool-faq[data-astro-cid-2snbj4jw],.related-tools[data-astro-cid-2snbj4jw]{margin:var(--space-md) auto}.tools-grid[data-astro-cid-2snbj4jw]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-lg);margin-top:var(--space-lg)}.tool-action-container[data-astro-cid-2snbj4jw]{display:flex;flex-direction:column;gap:var(--space-md)}.tool-action-container[data-astro-cid-2snbj4jw] .tool-actions[data-astro-cid-2snbj4jw]{width:100%}@media(min-width:769px){.tool-header-container[data-astro-cid-2snbj4jw] .ad-slot{flex:0 1 min(100%,320px);margin-left:auto}}@media(max-width:768px){.tools-grid[data-astro-cid-2snbj4jw]{grid-template-columns:1fr}}
