:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0f0f0f;color:#e5e5e5}.app{min-height:100vh;padding:2rem 1rem}.container{max-width:48rem;margin:0 auto}.header{text-align:center;margin-bottom:2.5rem}.header h1{font-size:2.5rem;font-weight:800;background:linear-gradient(to right,#8b5cf6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{margin-top:.75rem;color:#737373;font-size:1rem}.card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:.75rem;padding:1.25rem;margin-bottom:1.25rem}.card h2{font-size:.75rem;font-weight:600;color:#737373;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.input{flex:1;background:#0f0f0f;border:1px solid #2a2a2a;border-radius:.5rem;padding:.625rem 1rem;font-size:.875rem;color:#e5e5e5;outline:none;transition:border-color .2s}.input:focus{border-color:#8b5cf6}.input::placeholder{color:#525252}.input-row{display:flex;gap:.5rem}.btn{padding:.625rem 1.25rem;border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary{background:#8b5cf6;color:#fff}.btn-primary:hover{background:#7c3aed}.btn-ghost{background:transparent;border:1px solid #2a2a2a;color:#a3a3a3}.btn-ghost:hover{background:#0f0f0f;color:#e5e5e5}.btn:disabled{opacity:.4;cursor:not-allowed}.textarea{width:100%;background:#0f0f0f;border:1px solid #2a2a2a;border-radius:.5rem;padding:.75rem 1rem;font-size:.875rem;color:#e5e5e5;outline:none;resize:none;font-family:inherit;transition:border-color .2s}.textarea:focus{border-color:#8b5cf6}.textarea::placeholder{color:#525252}.textarea-wrap{position:relative}.char-count{position:absolute;bottom:.75rem;right:.75rem;font-size:.75rem;color:#525252}.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.toggle-card{padding:1rem;border-radius:.75rem;border:2px solid #2a2a2a;background:#0f0f0f;text-align:center;cursor:pointer;transition:all .2s}.toggle-card:hover{border-color:#3a3a3a}.toggle-card.active{border-color:#8b5cf6;background:#8b5cf61a;box-shadow:0 0 15px #8b5cf64d}.toggle-card .icon{font-size:1.5rem;display:block;margin-bottom:.25rem}.toggle-card .label{font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.model-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.model-card{padding:1rem;border-radius:.75rem;border:2px solid #2a2a2a;background:#0f0f0f;text-align:left;cursor:pointer;transition:all .2s}.model-card:hover{border-color:#3a3a3a}.model-card.active{border-color:#8b5cf6;background:#8b5cf61a;box-shadow:0 0 15px #8b5cf64d}.model-card .name{font-weight:600;font-size:.875rem;margin-bottom:.25rem}.model-card .desc{font-size:.75rem;color:#525252}.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.chip{font-size:.75rem;padding:.375rem .75rem;border-radius:9999px;border:1px solid #2a2a2a;background:transparent;color:#525252;cursor:pointer;transition:all .2s}.chip:hover{color:#d4d4d4;border-color:#3a3a3a}.generate-btn{width:100%;padding:.875rem;border-radius:.75rem;font-weight:600;font-size:.875rem;background:linear-gradient(to right,#8b5cf6,#3b82f6);color:#fff;border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1.25rem}.generate-btn:hover:not(:disabled){background:linear-gradient(to right,#7c3aed,#2563eb)}.generate-btn:disabled{opacity:.4;cursor:not-allowed}.spinner{width:1.25rem;height:1.25rem;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tabs{display:flex;gap:.25rem;background:#0f0f0f;border-radius:.5rem;padding:.25rem;margin-bottom:1rem}.tab{flex:1;padding:.5rem;font-size:.875rem;font-weight:500;border:none;border-radius:.375rem;background:transparent;color:#525252;cursor:pointer;transition:all .2s}.tab:hover{color:#d4d4d4}.tab.active{background:#1a1a1a;color:#fff}.result-box{background:#0f0f0f;border:1px solid #2a2a2a;border-radius:.5rem;padding:1rem;margin-bottom:1rem}.result-text{white-space:pre-wrap;font-size:.875rem;color:#d4d4d4;line-height:1.625}.result-meta{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid #2a2a2a}.badge{font-size:.75rem;padding:.125rem .5rem;border-radius:9999px;background:#2a2a2a;color:#a3a3a3}.badge.error{background:#ef444433;color:#ef4444}.warning{font-size:.75rem;color:#ef4444;font-weight:500}.result-actions{display:flex;gap:.75rem}.result-actions .btn{flex:1;padding:.625rem;font-size:.875rem}.toast{position:fixed;top:1rem;right:1rem;z-index:50;padding:.75rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:#fff;transition:all .3s}.toast.error{background:#ef4444e6}.toast.success{background:#10b981e6}.saved-key{display:flex;align-items:center;gap:.75rem}.check{color:#10b981;font-size:1.125rem}.saved-text{color:#d4d4d4;font-size:.875rem}.remove-btn{margin-left:auto;font-size:.75rem;color:#525252;background:none;border:none;cursor:pointer;transition:color .2s}.remove-btn:hover{color:#ef4444}.hint{margin-top:.5rem;font-size:.75rem;color:#525252}.explanation-box{background:#0f0f0f;border:1px solid #2a2a2a;border-radius:.5rem;padding:1rem}.explanation-box p{font-size:.875rem;color:#d4d4d4;line-height:1.625;white-space:pre-wrap}@media(max-width:640px){.header h1{font-size:1.75rem}.toggle-grid,.model-grid{grid-template-columns:1fr}}