*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--text-primary: #c9d1d9;--text-secondary: #8b949e;--text-muted: #6e7681;--accent-green: #238636;--accent-blue: #1f6feb;--accent-purple: #8957e5;--accent-amber: #d29922;--border-color: #30363d;--hover-bg: #262c36;--success: #28a745;--warning: #ffc107;--error: #dc3545;--font-mono: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-12: 3rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-glow: 0 0 20px rgba(35, 134, 54, .3);--radius-sm: .125rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem}body{font-family:var(--font-mono);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;font-size:var(--font-size-base)}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-4)}.app-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:var(--spacing-4) 0;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.app-header .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-4)}.logo{display:flex;flex-direction:column;gap:var(--spacing-1)}.logo-ascii{font-size:var(--font-size-xs);color:var(--accent-green);line-height:1;font-weight:400;display:block}.logo-text{font-size:var(--font-size-lg);color:var(--text-primary);font-weight:700;margin-top:var(--spacing-2)}.main-nav{display:flex;gap:var(--spacing-2)}.nav-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--font-size-sm);cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-block}.nav-btn:hover{background:var(--hover-bg);color:var(--text-primary);border-color:var(--accent-green)}.nav-btn.active{background:var(--accent-green);color:#fff;border-color:var(--accent-green);box-shadow:var(--shadow-glow)}.app-main{padding:var(--spacing-8) 0;min-height:calc(100vh - 120px)}.mode-selection{margin-bottom:var(--spacing-12)}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-6);margin-top:var(--spacing-6)}.mode-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-6);cursor:pointer;transition:all .3s ease;text-align:center}.mode-card:hover{border-color:var(--accent-green);box-shadow:var(--shadow-glow);transform:translateY(-2px)}.mode-icon{margin-bottom:var(--spacing-4)}.ascii-demo{font-size:var(--font-size-lg);color:var(--accent-green);line-height:1;margin:0}.mode-card h3{color:var(--text-primary);font-size:var(--font-size-xl);margin-bottom:var(--spacing-2);font-weight:600}.mode-card p{color:var(--text-secondary);margin-bottom:var(--spacing-4);line-height:1.5}.mode-features{display:flex;gap:var(--spacing-2);justify-content:center;flex-wrap:wrap}.mode-features span{background:var(--bg-tertiary);color:var(--accent-green);padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:500}.conversion-panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-6);margin-bottom:var(--spacing-8)}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-8)}.input-section h3,.preview-section h3{color:var(--text-primary);font-size:var(--font-size-lg);margin-bottom:var(--spacing-4);font-weight:600}#textInput{width:100%;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-3);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-size-sm);resize:vertical;min-height:120px}#textInput:focus{outline:none;border-color:var(--accent-green);box-shadow:0 0 0 3px #2386361a}.input-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-4);margin-top:var(--spacing-4)}.input-controls label{display:flex;flex-direction:column;gap:var(--spacing-2);color:var(--text-secondary);font-size:var(--font-size-sm)}.input-controls select,.input-controls input[type=range]{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-2);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-size-sm)}.input-controls select:focus{outline:none;border-color:var(--accent-green)}.upload-area{border:2px dashed var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-8);text-align:center;cursor:pointer;transition:all .3s ease;background:var(--bg-tertiary)}.upload-area:hover{border-color:var(--accent-green);background:var(--bg-secondary)}.upload-area.dragover{border-color:var(--accent-green);background:rgba(35,134,54,.1)}.upload-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-2)}.upload-icon{font-size:var(--font-size-3xl);opacity:.7}.upload-hint{color:var(--text-muted);font-size:var(--font-size-sm)}.image-controls{display:grid;grid-template-columns:1fr;gap:var(--spacing-3);margin-top:var(--spacing-4)}.image-controls label{display:flex;flex-direction:column;gap:var(--spacing-2);color:var(--text-secondary);font-size:var(--font-size-sm)}.preview-container{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-4);min-height:200px;overflow:auto}.ascii-output{font-family:var(--font-mono);font-size:var(--font-size-xs);line-height:1;color:var(--text-primary);white-space:pre;overflow-x:auto;margin:0;background:transparent}.image-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-4)}.original-preview,.ascii-preview{text-align:center}.original-preview h4,.ascii-preview h4{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-2);font-weight:500}#originalCanvas{max-width:100%;height:auto;border:1px solid var(--border-color);border-radius:var(--radius-md)}.preview-controls{display:flex;gap:var(--spacing-3);margin-top:var(--spacing-4)}.btn-primary,.btn-secondary{padding:var(--spacing-3) var(--spacing-5);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-block;text-align:center;border:none}.btn-primary{background:var(--accent-green);color:#fff}.btn-primary:hover{background:#2ea043;box-shadow:var(--shadow-md)}.btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--hover-bg);color:var(--text-primary);border-color:var(--accent-green)}.gallery-panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-6)}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-4);margin-top:var(--spacing-4)}.gallery-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-4);transition:all .3s ease}.gallery-item:hover{border-color:var(--accent-green);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-3)}.gallery-header h4{margin:0;color:var(--text-primary);font-size:var(--font-size-md)}.gallery-type{background:var(--accent-green);color:#fff;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:500}.gallery-preview{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--spacing-3);margin-bottom:var(--spacing-3);overflow:hidden}.gallery-ascii{font-family:var(--font-mono);font-size:10px;line-height:1.2;color:var(--text-primary);margin:0;white-space:pre;overflow:hidden;max-height:120px}.gallery-footer{display:flex;justify-content:space-between;align-items:center}.gallery-tags{display:flex;gap:var(--spacing-1);flex-wrap:wrap;flex:1}.gallery-tags .tag{background:var(--bg-primary);color:var(--text-secondary);padding:2px 6px;border-radius:var(--radius-sm);font-size:var(--font-size-xs);border:1px solid var(--border-color)}.gallery-actions{display:flex;gap:var(--spacing-2)}.btn-small{padding:4px 8px;font-size:var(--font-size-xs);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:all .2s ease}.btn-small:hover{background:var(--accent-green);color:#fff;border-color:var(--accent-green)}.gallery-empty{text-align:center;color:var(--text-muted);padding:var(--spacing-8);font-size:var(--font-size-md)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:0;max-width:500px;width:90%;max-height:90vh;overflow:hidden}.modal-header{padding:var(--spacing-5);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.modal-header h3{color:var(--text-primary);font-size:var(--font-size-lg);font-weight:600;margin:0}.modal-close{background:none;border:none;color:var(--text-secondary);font-size:var(--font-size-xl);cursor:pointer;padding:var(--spacing-2);border-radius:var(--radius-md);transition:all .2s ease}.modal-close:hover{background:var(--hover-bg);color:var(--text-primary)}.modal-body{padding:var(--spacing-5)}.export-options{display:flex;flex-direction:column;gap:var(--spacing-3);margin-bottom:var(--spacing-5)}.export-options label{display:flex;align-items:center;gap:var(--spacing-3);color:var(--text-primary);cursor:pointer;padding:var(--spacing-2);border-radius:var(--radius-md);transition:background .2s ease}.export-options label:hover{background:var(--hover-bg)}.export-options input[type=radio]{accent-color:var(--accent-green)}.export-settings label{display:flex;flex-direction:column;gap:var(--spacing-2);color:var(--text-secondary)}.export-settings input{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-3);color:var(--text-primary);font-family:var(--font-mono)}.modal-footer{padding:var(--spacing-5);border-top:1px solid var(--border-color);display:flex;gap:var(--spacing-3);justify-content:flex-end}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(13,17,23,.9);display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.loading-content{text-align:center;color:var(--text-primary)}.loading-spinner{border:3px solid var(--border-color);border-top:3px solid var(--accent-green);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto var(--spacing-4)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:var(--bg-tertiary);outline:none;border:1px solid var(--border-color)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent-green);cursor:pointer;border:2px solid var(--bg-secondary);box-shadow:var(--shadow-sm)}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent-green);cursor:pointer;border:2px solid var(--bg-secondary);box-shadow:var(--shadow-sm)}@media (max-width: 768px){.container{padding:0 var(--spacing-3)}.app-header .container{flex-direction:column;text-align:center}.panel-grid{grid-template-columns:1fr;gap:var(--spacing-6)}.input-controls,.image-preview-grid,.mode-grid{grid-template-columns:1fr}.logo-ascii,.ascii-output{font-size:.5rem}}@media (max-width: 480px){.app-main{padding:var(--spacing-4) 0}.conversion-panel{padding:var(--spacing-4)}.main-nav{flex-direction:column;width:100%}.nav-btn{text-align:center}}.hidden{display:none!important}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.mb-4{margin-bottom:var(--spacing-4)}.mt-4{margin-top:var(--spacing-4)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-tertiary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}button:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-green);outline-offset:2px}@media (prefers-contrast: high){:root{--bg-primary: #000000;--bg-secondary: #1a1a1a;--text-primary: #ffffff;--border-color: #666666}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.loading-spinner{animation:none}}