:root{--bg: #0c0e14;--surface: #141820;--surface-2: #1a1f2b;--border: #2a3142;--border-hover: #3d4660;--text: #e8ecf4;--text-muted: #8b95a8;--accent: #5b8def;--accent-hover: #7aa3f5;--accent-glow: rgba(91, 141, 239, .25);--success: #3ecf8e;--warn: #f0b429;--error: #f06565;--radius: 12px;--radius-lg: 16px;--font: "DM Sans", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, monospace;--shadow: 0 4px 24px rgba(0, 0, 0, .4)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;position:relative}.bg-grid{position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(91,141,239,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(91,141,239,.03) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black,transparent);mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black,transparent)}.header{text-align:center;padding:2.5rem 1.5rem 1rem;position:relative}.logo{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.4rem}.logo-icon{width:2.25rem;height:2.25rem;border-radius:8px;object-fit:cover;flex-shrink:0}.logo-text{font-size:1.35rem;font-weight:700;letter-spacing:-.02em}.tagline{color:var(--text-muted);font-size:.875rem}.tabs{display:flex;justify-content:center;gap:.5rem;padding:0 1.5rem 1.5rem;position:relative}.tab{font-family:var(--font);font-size:.875rem;font-weight:500;padding:.55rem 1.25rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all .2s ease}.tab:hover{border-color:var(--border-hover);color:var(--text)}.tab.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 20px var(--accent-glow)}.main{max-width:720px;margin:0 auto;padding:0 1.5rem 3rem;position:relative}.panel{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.panel-head{margin-bottom:1.5rem}.panel-head h1{font-size:1.375rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.5rem}.panel-head p{color:var(--text-muted);font-size:.9rem}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;padding:2rem;border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;transition:all .25s ease;outline:none}.drop-zone:hover,.drop-zone:focus-visible{border-color:var(--accent);background:var(--surface-2)}.drop-zone.dragover{border-color:var(--accent);background:#5b8def14;box-shadow:0 0 0 4px var(--accent-glow)}.drop-zone.loading{opacity:.6;pointer-events:none}.drop-icon{color:var(--text-muted);margin-bottom:.75rem;transition:color .2s}.drop-zone:hover .drop-icon,.drop-zone.dragover .drop-icon{color:var(--accent)}.drop-title{font-weight:500;margin-bottom:.25rem}.drop-hint{font-size:.8125rem;color:var(--text-muted)}.actions{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.25rem}.btn{font-family:var(--font);font-size:.875rem;font-weight:500;padding:.625rem 1.125rem;border-radius:var(--radius);border:none;cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-sm{font-size:.8125rem;padding:.4rem .75rem}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 4px 16px var(--accent-glow)}.btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--border-hover);background:var(--border)}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-ghost:hover{color:var(--text);border-color:var(--border-hover)}.output-area{margin-top:1.5rem}.output-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.625rem;flex-wrap:wrap}.file-meta{font-size:.8125rem;color:var(--text-muted);font-family:var(--mono)}.output-actions{display:flex;gap:.5rem}.file-list{list-style:none;display:flex;flex-direction:column;gap:.875rem}.file-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.875rem}.file-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.625rem;flex-wrap:wrap}.file-item-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}.file-item-name{font-size:.875rem;font-weight:500;word-break:break-all}.file-item-meta{font-size:.75rem;color:var(--text-muted);font-family:var(--mono)}.file-item-actions{display:flex;gap:.375rem;flex-shrink:0}.file-item-code{min-height:72px;max-height:160px;font-size:.75rem}.code-area{width:100%;min-height:160px;max-height:360px;padding:1rem 1.125rem;font-family:var(--mono);font-size:.8125rem;line-height:1.65;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);resize:vertical;outline:none;transition:border-color .2s}.code-area:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.code-area--large{min-height:280px;max-height:480px}.code-area::placeholder{color:var(--text-muted);opacity:.6}.footer{text-align:center;padding:1.5rem;color:var(--text-muted);font-size:.8125rem;position:relative}.toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%) translateY(80px);padding:.625rem 1.25rem;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;font-size:.875rem;box-shadow:var(--shadow);opacity:0;transition:all .3s ease;pointer-events:none;z-index:100}.toast.visible{opacity:1;transform:translate(-50%) translateY(0)}.toast.success{border-color:var(--success);color:var(--success)}.toast.warn{border-color:var(--warn);color:var(--warn)}.toast.error{border-color:var(--error);color:var(--error)}@media(max-width:520px){.header{padding-top:1.5rem}.tabs{flex-direction:column;align-items:stretch}.tab{text-align:center}.actions{flex-direction:column}.btn{width:100%}}