*{box-sizing:border-box}body{margin:0;background:#101522;color:#f1f4fb;font:16px system-ui,sans-serif}main{max-width:1200px;margin:auto;padding:24px}header,nav,footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}header{margin-bottom:30px}h1{margin:0}small,p{color:#b7c3d6}button,input{font:inherit;border-radius:9px;padding:12px;border:1px solid #3b485c}button{background:#27364d;color:#fff;cursor:pointer}button.active,form button{background:#187c69}button:disabled{opacity:.4;cursor:default}nav{justify-content:flex-start;margin-bottom:20px}section,.login{background:#1a2333;border:1px solid #354158;border-radius:15px;padding:20px}input{background:#0e1521;color:#fff;max-width:100%;width:340px}form{display:grid;gap:12px;max-width:340px}form.search{display:flex;flex-wrap:wrap;max-width:none;align-items:center}form.search input{flex:1;min-width:210px}form.search button{white-space:nowrap}.scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;margin-top:20px}td,th{text-align:left;padding:12px;border-bottom:1px solid #354158}td:nth-child(2){min-width:230px}.out{color:#ff9a9a}.in{color:#7be2c5}footer{margin-top:18px;justify-content:flex-end}[role=alert]{color:#ffadad}@media(max-width:600px){main{padding:12px}section{padding:12px}h1{font-size:1.5rem}form.search button{flex:1}}