:root{--color-primary: #6366f1;--color-primary-hover: #4f46e5;--color-bg: #0c0c0c;--color-surface: #0a0a0a;--color-surface-2: #141414;--color-text: #e5e7eb;--color-text-muted: #6b7280;--color-border: #1f2937;--color-success: #22c55e;--color-error: #ef4444;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius: 6px;--sidebar-w: 280px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.875rem;font-weight:500;line-height:1;border-radius:var(--radius);cursor:pointer;transition:all .2s;border:1px solid transparent}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.btn-secondary:hover{border-color:var(--color-text)}.btn-sm{padding:.5rem 1rem;font-size:.8125rem;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted)}.btn-sm:hover{color:var(--color-text)}.input{width:100%;padding:.75rem 1rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);font-family:var(--font-mono);font-size:.875rem}.input:focus{outline:none;border-color:var(--color-primary)}code{font-family:var(--font-mono);background:var(--color-surface);padding:.125rem .375rem;border-radius:4px;font-size:.875em}select.input{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;cursor:pointer}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#1f2937;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#374151}.sidebar-nav{display:flex;flex-direction:column;gap:.125rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;margin-top:15px}.sidebar-nav::-webkit-scrollbar{width:2px}.sidebar-nav::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}.nav-group{margin-bottom:.5rem}.nav-group-title{font-size:.75rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;padding:.375rem .5rem .125rem}.nav-sub{padding-left:1.25rem;font-size:.875rem}.nav-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .625rem;background:none;border:none;border-radius:6px;color:#b0b0b0;font-size:.9125rem;cursor:pointer;text-align:left;text-decoration:none;transition:all .1s}.nav-item:hover{background:var(--color-surface-2);color:var(--color-text);text-decoration:none}.nav-item.active{background:#6366f11f;color:var(--color-primary)}.nav-item.muted{color:#555;font-style:italic;font-size:.8rem;cursor:default}.search-box .input{font-size:.8125rem;padding:.5rem .75rem}#app{min-height:100vh;display:flex;flex-direction:column}.tool-panel{margin:auto;width:100%;flex:1;display:flex;flex-direction:column;justify-content:center}.content-body{display:flex;flex-direction:column}.tool-header{margin-bottom:1.5rem;text-align:center}.back-btn{margin-bottom:.75rem;display:inline-flex;text-decoration:none}.tool-header h1{font-size:1.375rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.5rem}.tool-desc{color:var(--color-text-muted);font-size:.8125rem;margin-top:.25rem}.tool-card-input,.tool-card-result{margin-bottom:1.5rem}.input-row{display:flex;flex-wrap:wrap;gap:.75rem}.input-row .input{flex:1;min-width:0}.btn-block{width:100%;margin-top:1rem}.extra-fields{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem}.field label{font-size:.8125rem;color:var(--color-text-muted);margin-bottom:.25rem;display:block}.textarea{font-family:var(--font-mono);font-size:.875rem;line-height:1.6;resize:vertical;min-height:200px}.source-tabs{display:flex;margin-bottom:1rem;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.source-tab{flex:1;padding:.5rem;font-size:.8125rem;background:var(--color-bg);border:none;color:var(--color-text-muted);cursor:pointer}.source-tab.on{background:var(--color-primary);color:#fff}.file-label{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--color-bg);border:1px dashed var(--color-border);border-radius:var(--radius);cursor:pointer;margin-bottom:.75rem}.file-label input{display:none}.file-placeholder{font-size:.875rem;color:var(--color-text-muted)}.preview-thumb{max-width:100%;max-height:200px;margin-top:.75rem;border-radius:var(--radius);object-fit:contain;background:var(--color-bg);display:block;transition:transform .3s ease}.flip-bar{display:flex;gap:.5rem;margin-top:.75rem}.flip-bar .btn.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.rotate-bar{display:flex;gap:.5rem;margin-top:.75rem;align-items:center}.rotate-bar .btn.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.rotate-input{width:70px}.crop-area{position:relative;display:inline-block;max-width:100%;margin-top:.75rem;cursor:crosshair}.crop-img{display:block;max-width:100%;border-radius:var(--radius)}.crop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;user-select:none}.crop-box{position:absolute;border:2px dashed var(--color-primary);background:#6366f126;pointer-events:none}.crop-info{font-size:.75rem;color:var(--color-text-muted);margin-top:.5rem;font-family:var(--font-mono)}.browser-auto-msg{font-size:.875rem;color:var(--color-text-muted);padding:.5rem 0}.pw-slider{display:flex;align-items:center;gap:1rem;margin-top:.75rem}.pw-slider label{font-size:.8125rem;color:var(--color-text);min-width:80px}.slider{flex:1;accent-color:var(--color-primary);height:4px}.error-box{background:#ef44441a;border:1px solid var(--color-error);color:var(--color-error);margin-bottom:1rem;padding:1rem;border-radius:var(--radius)}.error-card{background:#ef44441a;border-color:var(--color-error);color:var(--color-error);margin-bottom:1rem}.result-card{margin-bottom:1rem;position:relative}.result-card pre{background:var(--color-bg);padding:1rem;border-radius:var(--radius);overflow-x:auto;font-family:var(--font-mono);font-size:.8125rem;max-height:400px;overflow-y:auto;margin-top:.5rem}.preview-frame{width:100%;height:600px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);margin-top:.75rem}.part-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);margin-top:.75rem;font-size:.875rem}.result-pre{background:var(--color-bg);padding:1rem;border-radius:var(--radius);overflow-x:auto;font-family:var(--font-mono);font-size:.8125rem}.raw-result{white-space:pre-wrap;word-break:break-all}.copy-btn{position:absolute;top:.75rem;right:.75rem}.result-line-count{font-size:.75rem;color:var(--color-text-muted);font-family:var(--font-mono)}.sd-section-title{font-size:.8125rem;font-weight:700;color:var(--color-primary);margin:1rem 0 .25rem;text-transform:uppercase;letter-spacing:.04em}.warn-card{background:#eab3081a;border-color:#eab308;color:#eab308;margin-bottom:1rem}.warning-box{background:#eab3081a;border:1px solid #eab308;color:#eab308;margin-bottom:1rem;padding:1rem;border-radius:var(--radius)}.warning-item{font-size:.8125rem;line-height:1.5}.warn-title{font-size:.8125rem;font-weight:600;margin-bottom:.375rem}.warn-list{margin:0;padding-left:1.1rem;font-size:.8125rem;line-height:1.5}.result-cmd-title{font-size:.75rem;font-weight:600;color:var(--color-text-muted);margin-bottom:.375rem}.result-img-wrap{text-align:center}.result-img{max-width:100%;max-height:400px;border-radius:var(--radius);margin-bottom:.75rem;object-fit:contain;background:var(--color-bg);display:block}.chmod-grid{display:flex;gap:1.5rem;justify-content:space-between;margin-top:.75rem}.chmod-col{flex:1}.chmod-title{font-size:.8125rem;font-weight:600;color:var(--color-text);margin-bottom:.5rem;padding-bottom:.375rem;border-bottom:1px solid var(--color-border)}.chmod-label{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--color-text-muted);margin-bottom:.375rem;cursor:pointer}.chmod-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer}.chmod-octal-label{font-size:.75rem;color:var(--color-text-muted);display:flex;align-items:center;padding:0 .5rem;white-space:nowrap}.related-section{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--color-border)}.related-title{font-size:.8125rem;font-weight:600;color:var(--color-text-muted);margin-bottom:.75rem}.related-grid{display:flex;flex-wrap:wrap;gap:.5rem}.related-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.75rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text-muted);cursor:pointer;text-decoration:none}.related-chip:hover{border-color:var(--color-primary);color:var(--color-text)}@media (max-width:900px){.tool-panel{padding:1rem}.card{overflow-x:hidden}.chmod-grid{flex-direction:column;gap:.75rem}.input-row .input,.input-row select,.input-row .btn{flex:1 1 100%}}