:root{--bg:#080b14;--panel:rgba(17,24,39,.92);--primary:#8b5cf6;--primary-dark:#6d43d8;--text:#fff;--muted:#a1a1aa;--line:rgba(255,255,255,.09);--input:#070b14;--success:#34d399;--radius:24px;--shadow:0 24px 80px rgba(0,0,0,.38)}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top left,rgba(139,92,246,.3),transparent 35%),radial-gradient(circle at top right,rgba(34,211,238,.16),transparent 30%),var(--bg);color:var(--text)}.app{width:min(1500px,100%);margin:auto;padding:32px}.hero{padding:34px 0 28px}.badge{display:inline-flex;padding:9px 14px;border-radius:999px;background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.35);color:#ddd6fe;margin-bottom:18px;font-size:14px}.hero h1{margin:0 0 14px;font-size:clamp(34px,5vw,64px);line-height:1}.hero p{margin:0;max-width:820px;color:var(--muted);font-size:18px;line-height:1.7}.layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:24px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}.panel h2{margin:0 0 8px;font-size:26px}.muted{color:var(--muted);margin:0 0 22px;line-height:1.5}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.field{display:grid;gap:8px}.field.full{grid-column:1/-1}label{font-size:14px;font-weight:800;color:#e5e7eb}input,select,textarea{width:100%;border:1px solid var(--line);background:var(--input);color:var(--text);border-radius:16px;padding:15px 16px;font-size:15px;outline:none}textarea{min-height:90px;resize:vertical;line-height:1.6}input:focus,select:focus,textarea:focus{border-color:rgba(139,92,246,.8);box-shadow:0 0 0 4px rgba(139,92,246,.12)}.actions{display:flex;gap:12px;margin-top:20px}button{border:none;border-radius:16px;padding:14px 18px;cursor:pointer;color:white;font-weight:900;transition:.2s ease}button:hover{transform:translateY(-2px);opacity:.95}.primary{flex:1;background:linear-gradient(135deg,var(--primary),var(--primary-dark))}.secondary{background:rgba(255,255,255,.08);border:1px solid var(--line)}.result-panel{position:sticky;top:20px}.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.tab{background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--muted);padding:10px 14px;border-radius:999px}.tab.active{background:var(--primary);color:#fff}.code-box{display:none;width:100%;min-height:590px;background:#050812;border:1px solid var(--line);border-radius:18px;color:#e5e7eb;font-family:Consolas,Monaco,monospace;font-size:13px;line-height:1.6}.code-box.active{display:block}.preview{display:none;width:100%;min-height:590px;background:#fff;border:1px solid var(--line);border-radius:18px}.preview.active{display:block}.msg{min-height:22px;margin-top:12px;color:var(--success);font-weight:800}@media(max-width:1150px){.layout{grid-template-columns:1fr}.result-panel{position:relative;top:auto}}@media(max-width:700px){.app{padding:20px}.grid{grid-template-columns:1fr}.panel{padding:20px}.actions{flex-direction:column}}