*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:#f6f8fb;color:#111}
.app-header{position:sticky;top:0;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#0b61fd;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:10}
.logo{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0}
.logo img{width:100%;height:auto;display:block}
.titles h1{font-size:1.1rem;margin:.1rem 0}
.subtitle{opacity:.9;margin:0;font-size:.9rem}
.container{max-width:800px;margin:1rem auto;padding:0 1rem}
.card{background:#fff;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.08);padding:1rem 1rem;margin-bottom:1rem}
h2{font-size:1.1rem;margin:0 0 .5rem}
.field{margin:.75rem 0}
.field label{display:block;font-weight:600;margin-bottom:.25rem}
.field input{width:100%;padding:.8rem;border:1px solid #d6d9e0;border-radius:12px;font-size:1rem}
.two-col{display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:600px){.two-col{grid-template-columns:1fr 1fr}}
.checkbox{display:flex;gap:.5rem;align-items:center;font-weight:500}
.checkbox input{flex-shrink:0}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.actions-row{display:flex;justify-content:flex-end;margin:.3rem 0}
.btn{appearance:none;border:none;background:#0b61fd;color:#fff;padding:.75rem 1rem;border-radius:12px;font-weight:700}
.btn:hover{opacity:.95;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn-outline{background:#fff;color:#0b61fd;border:1.5px solid #0b61fd}
.btn-secondary{background:#111;color:#fff}
.footer{text-align:center;color:#667;font-size:.85rem;padding:1.5rem 1rem}
.bullet{margin:.25rem 0 .5rem 1.25rem}
.codewrap{max-height:220px;overflow:auto;background:#0b0b0b;color:#d7ffd7;border-radius:12px;padding:.75rem}
hr{border:none;border-top:1px solid #eee;margin:1rem 0}
@media(max-width:480px){.app-header{padding:.6rem .85rem;gap:.5rem}
.logo{width:2.1rem;height:2.1rem}
.titles h1{font-size:1rem}
.subtitle{font-size:.8rem}
.container{margin:.75rem auto;padding:0 .75rem}
.card{padding:.85rem .75rem;border-radius:14px}
.field{margin:.6rem 0}
.field label{font-size:.9rem}
.field input{padding:.65rem;font-size:.95rem}
.actions{flex-direction:column;align-items:stretch;gap:.5rem}
.actions .btn,.actions .btn-outline{width:100%}
.actions-row{margin:.5rem 0}
.actions-row .btn{width:100%}
.checkbox{align-items:flex-start;font-size:.9rem;line-height:1.3}
.checkbox input{margin-top:.15rem}
.bullet{margin:.25rem 0 .5rem 1rem}}