*,:before,:after{box-sizing:border-box}:root{--color-primary:#6366f1;--color-accent:#8b5cf6;--color-bg:#fff;--color-surface:#f8fafc;--color-border:#e2e8f0;--color-text:#0f172a;--color-text-secondary:#64748b;--color-hover:#4f46e5;--spacing-xs:.5rem;--spacing-sm:.75rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem}body{-webkit-font-smoothing:antialiased;background-color:var(--color-bg);color:var(--color-text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.screen{min-height:100vh;padding:var(--spacing-xl);max-width:800px;margin:0 auto}.header{text-align:center;margin-bottom:var(--spacing-2xl)}.header h1{color:var(--color-primary);margin:0 0 var(--spacing-sm) 0;font-size:2.5rem;font-weight:700}.header p{color:var(--color-text-secondary);margin:0;font-size:1.125rem}.converter-container{gap:var(--spacing-xl);flex-direction:column;display:flex}.input-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg)}.input-label{margin-bottom:var(--spacing-sm);color:var(--color-text);font-weight:600;display:block}.input-textarea{width:100%;min-height:150px;padding:var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);resize:vertical;font-family:inherit;font-size:1rem;transition:border-color .2s}.input-textarea:focus{border-color:var(--color-primary);outline:none}.input-textarea::placeholder{color:var(--color-text-secondary)}.input-hint{margin-top:var(--spacing-sm);color:var(--color-text-secondary);font-size:.875rem}.button-group{gap:var(--spacing-md);margin-top:var(--spacing-md);display:flex}.button{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);cursor:pointer;border:none;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s}.button-primary{background-color:var(--color-primary);color:#fff}.button-primary:hover{background-color:var(--color-hover);transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.button-primary:active{transform:translateY(0)}.button-secondary{color:var(--color-text-secondary);border:2px solid var(--color-border);background-color:#0000}.button-secondary:hover{border-color:var(--color-text-secondary);color:var(--color-text)}.button:disabled{opacity:.5;cursor:not-allowed}.button:disabled:hover{box-shadow:none;transform:none}.grid-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg)}.grid-header{margin-bottom:var(--spacing-lg);justify-content:space-between;align-items:center;display:flex}.grid-header h2{color:var(--color-text);margin:0;font-size:1.5rem;font-weight:600}.grid-info{color:var(--color-text-secondary);font-size:.875rem}.grid-container{gap:var(--spacing-md);margin-bottom:var(--spacing-md);grid-template-columns:repeat(4,1fr);display:grid}.grid-cell{aspect-ratio:1;background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-sm);color:var(--color-text);text-align:center;word-break:break-word;overflow-wrap:break-word;justify-content:center;align-items:center;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.grid-cell:not(.grid-cell-empty){border-color:var(--color-primary);background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);color:#fff}.grid-cell-empty{color:var(--color-text-secondary);opacity:.5;font-style:italic}.empty-state{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary)}.empty-state-icon{margin-bottom:var(--spacing-md);font-size:3rem}.empty-state-text{font-size:1.125rem;font-weight:500}@media (width<=640px){.screen{padding:var(--spacing-lg)}.header h1{font-size:2rem}.header p{font-size:1rem}.button-group{flex-direction:column}.button{width:100%}.grid-container{gap:var(--spacing-sm)}.grid-cell{padding:var(--spacing-xs);font-size:.75rem}}