.s224-tool{margin-bottom:2rem;background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,0.05);overflow:hidden;}
.s224-mode-tabs{display:flex;padding:0.5rem;gap:0.25rem;background:var(--surface-muted,#f3f4f6);border-bottom:1px solid var(--border,#e5e7eb);}
.s224-tab{flex:1;padding:0.75rem 1rem;font-size:0.9375rem;font-weight:600;color:var(--text-muted,#6b7280);background:transparent;border:none;border-radius:12px;cursor:pointer;transition:color 0.2s,background 0.2s;}
.s224-tab:hover{color:var(--text-main,#111827);background:rgba(255,255,255,0.7);}
.s224-tab.s224-tab-active{color:var(--primary,#2563eb);background:var(--surface,#fff);box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.s224-panels{display:flex;flex-direction:column;}
@media (min-width:768px){.s224-panels{flex-direction:row;min-height:280px;}}
.s224-panel{flex:1;min-width:0;display:flex;flex-direction:column;}
.s224-panel-input{border-bottom:1px solid var(--border,#e5e7eb);}
@media (min-width:768px){.s224-panel-input{border-bottom:none;border-right:1px solid var(--border,#e5e7eb);}}
.s224-panel-text,.s224-panel-file{padding:1.25rem;flex:1;display:flex;flex-direction:column;}
.s224-panel-file-hidden{display:none;}
.s224-panel-file.s224-panel-file-visible{display:flex;}
.s224-label{display:block;font-size:0.8125rem;font-weight:600;color:var(--text-muted,#6b7280);letter-spacing:0.02em;margin-bottom:0.5rem;}
.s224-input{width:100%;min-height:140px;padding:1rem 1.25rem;font-size:1rem;line-height:1.5;color:var(--text-main,#111827);background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:14px;resize:vertical;transition:border-color 0.2s,box-shadow 0.2s;}
.s224-input::placeholder{color:var(--text-muted,#9ca3af);}
.s224-input:focus{outline:none;border-color:var(--primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,0.12);}
.s224-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;min-height:180px;padding:1.5rem;border:2px dashed var(--border,#e5e7eb);border-radius:14px;background:var(--surface-muted,#f9fafb);cursor:pointer;transition:border-color 0.2s,background 0.2s;}
.s224-drop:hover,.s224-drop:focus{border-color:var(--primary,#2563eb);background:rgba(37,99,235,0.04);}
.s224-drop.s224-dragover{border-color:var(--primary,#2563eb);background:rgba(37,99,235,0.08);}
.s224-drop-icon{color:var(--text-muted,#9ca3af);transition:color 0.2s;}
.s224-drop:hover .s224-drop-icon,.s224-drop:focus .s224-drop-icon{color:var(--primary,#2563eb);}
.s224-drop-label{font-size:0.9375rem;font-weight:500;color:var(--text-muted,#6b7280);}
.s224-file-input{position:absolute;width:0.1px;height:0.1px;opacity:0;overflow:hidden;z-index:-1;}
.s224-panel-output{padding:1.25rem;background:var(--surface-muted,#f8fafc);display:flex;flex-direction:column;}
.s224-output-wrap{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0.75rem;flex:1;min-height:0;}
.s224-output{flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:0.875rem;line-height:1.6;color:var(--text-main,#111827);word-break:break-all;}
.s224-output .s224-output-empty{color:var(--text-muted,#9ca3af);}
.s224-output.s224-has-hash .s224-output-empty{display:none;}
.s224-output.s224-has-hash{color:var(--primary-dark,#1d4ed8);font-weight:500;}
.s224-copy{padding:0.5rem 1rem;font-size:0.875rem;font-weight:600;color:#fff;background:var(--primary,#2563eb);border:none;border-radius:10px;cursor:pointer;transition:background 0.2s,opacity 0.2s;flex-shrink:0;}
.s224-copy:hover:not(:disabled){background:var(--primary-dark,#1d4ed8);}
.s224-copy:disabled{opacity:0.5;cursor:not-allowed;}
.s224-copy.copied{background:#059669;}
.s224-copy .s224-copy-label{pointer-events:none;}
@media (min-width:640px){.s224-panel-text,.s224-panel-file{padding:1.5rem;}.s224-input{min-height:160px;padding:1.25rem 1.5rem;font-size:1.0625rem;}.s224-drop{min-height:200px;padding:2rem;}.s224-panel-output{padding:1.5rem;}.s224-output{font-size:0.9375rem;}}