:root{font-family:system-ui,sans-serif;color:#132340;background:#eff3fa;--blue:#235ce8}*{box-sizing:border-box}body{margin:0}main{max-width:680px;margin:auto;padding:24px 20px 100px}header{display:flex;gap:12px;align-items:center;margin-bottom:32px}.logo{background:var(--blue);color:white;font-size:25px;font-weight:800;padding:9px 17px;border-radius:15px}small{display:block;color:#78879c;margin-top:4px;font-size:12px}.badge{margin-left:auto;font-size:11px;color:#456089;background:#e4eaf6;padding:7px;border-radius:8px}h1{font-size:28px;letter-spacing:-.8px;margin:10px 0}h2{font-size:19px}p{color:#61718a;line-height:1.6}.hero{background:linear-gradient(120deg,#1749c8,#587bf0);border-radius:23px;padding:24px;color:white;margin:24px 0}.hero p{color:#dbe7ff}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}button{font:inherit;cursor:pointer;border:0;background:white;border-radius:14px;padding:16px;color:#132340;text-align:left;box-shadow:0 3px 14px #11234006}button:disabled{opacity:.5;cursor:wait}.card{background:white;border:1px solid #e1e8f3;border-radius:18px;padding:20px;margin:14px 0}.primary{background:var(--blue);color:white;text-align:center;width:100%;font-weight:650}.category{min-height:100px;border:1px solid #dfe6f2}.category span{display:block;font-size:24px;margin-bottom:10px}.metric{font-size:27px;font-weight:750;display:block;margin:8px 0}.label{color:#74839a;font-size:13px}.question{white-space:pre-wrap;line-height:1.7;font-size:17px}.option{display:block;width:100%;margin:10px 0;border:1px solid #dce5f3}.option b{color:var(--blue);margin-right:12px}input{width:100%;padding:15px;border:1px solid #c7d2e7;border-radius:12px;font:inherit;margin:10px 0}.good{background:#e8f8ef;color:#167744;padding:16px;border-radius:12px}.bad{background:#fff0ef;color:#a53838;padding:16px;border-radius:12px}.progress{height:6px;background:#e1e8f5;border-radius:10px;margin:16px 0}.progress div{height:100%;background:var(--blue);border-radius:10px}nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(680px,100%);display:flex;background:#ffffffed;border-top:1px solid #dfe7f3;padding:10px;backdrop-filter:blur(10px)}nav button{flex:1;font-size:12px;padding:14px 4px;text-align:center;background:none;box-shadow:none;color:#50678e}.error{padding:16px;background:#fff0ef;color:#a53838;border-radius:12px}.timer{color:#235ce8;font-weight:700;float:right}.demo{font-size:12px;color:#93631c;background:#fff4db;border-radius:8px;padding:8px}a{color:var(--blue)}@media(max-width:380px){main{padding:18px 12px 90px}h1{font-size:24px}.badge{display:none}}
.band{background:white;border:1px solid #dfe6f2;border-radius:16px;overflow:hidden}.band .category{border:0;width:100%;border-radius:0}.small-btn{font-size:12px;width:100%;padding:12px;border-top:1px solid #edf0f7;border-radius:0;color:#235ce8}.field{display:block;margin:16px 0;font-size:13px;font-weight:600}.field input,.field textarea,.field select{display:block;width:100%;padding:13px;margin-top:8px;font:inherit;background:white;border:1px solid #ccd7eb;border-radius:10px;color:#132340}.field textarea{resize:vertical}
.mine{background:#eaf1ff!important;outline:1px solid #a7c0fa}.ranking-table{width:100%;margin-top:18px;border-collapse:collapse;background:white;border-radius:14px;overflow:hidden;font-size:14px}.ranking-table th{background:#173f83;color:white;text-align:left;padding:14px 10px}.ranking-table td{padding:15px 10px;border-bottom:1px solid #e7edf7;overflow-wrap:anywhere}.ranking-table th:first-child,.ranking-table td:first-child{width:75px}.ranking-table th:last-child,.ranking-table td:last-child{text-align:right;white-space:nowrap}.ranking-table .mine{outline:0;font-weight:650}