:root{font-family:Inter,system-ui,Arial,sans-serif;background:#f7f8fb;color:#182033}body{margin:0}.app{max-width:1180px;margin:auto;padding:24px}header{background:#101828;color:#fff;padding:28px;border-radius:18px}nav{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}nav a,.routes a{background:#fff;border:1px solid #dde3ee;border-radius:999px;padding:8px 12px;text-decoration:none;color:#1f3a5f}.card{background:#fff;border:1px solid #dde3ee;border-radius:18px;padding:20px;margin:18px 0;box-shadow:0 8px 20px #1018280d}label{display:block;margin:10px 0;font-weight:600}input{display:block;width:100%;max-width:680px;padding:10px;border:1px solid #cbd5e1;border-radius:10px;margin-top:6px}button{margin:6px 8px 6px 0;padding:10px 14px;border:0;border-radius:10px;background:#101828;color:#fff;cursor:pointer}pre{background:#0b1020;color:#d9e7ff;padding:14px;border-radius:12px;overflow:auto}.preview{width:100%;height:140px;border:1px solid #cbd5e1;border-radius:12px}.group{border-top:1px solid #edf2f7;margin-top:18px}.toggle{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #edf2f7}.toggle span,.toggle small{display:block;color:#516070;margin-top:4px}.switch{min-width:110px}.routes{display:flex;flex-wrap:wrap;gap:8px}.routes a{border-radius:8px}h1,h2,h3{margin-top:0}