*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;margin:0;background:#f7f7fb;color:#222}
header{background:#fff;border-bottom:1px solid #e8e8ef;padding:24px 16px}
h1{margin:0;font-size:22px} header p{margin:6px 0 0 0;color:#555}
main{max-width:920px;margin:0 auto;padding:20px 16px}
.ask{background:#fff;border:1px solid #e8e8ef;border-radius:12px;padding:16px;margin-bottom:16px}
#ask-form{display:flex;gap:8px}
#question{flex:1;padding:12px 14px;border:1px solid #d7d7e0;border-radius:10px;font-size:15px}
#ask-btn{padding:12px 16px;border:1px solid #2f62ff;background:#2f62ff;color:#fff;border-radius:10px;font-weight:600;cursor:pointer}
#ask-btn:disabled{opacity:.6;cursor:not-allowed}
#hint{margin-top:8px;color:#777;font-size:12px}
.card{background:#fff;border:1px solid #e8e8ef;border-radius:12px;padding:14px;margin:10px 0}
.rule-title{display:flex;align-items:center;gap:10px}
.rule-pill{background:#eef1ff;color:#2f62ff;border:1px solid #d8dfff;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700}
.rule-name{font-weight:700}
.rule-field{margin:6px 0}
.rule-field .label{color:#555;font-weight:600}
.hidden{display:none}
#error{background:#fff3f3;border:1px solid #ffd3d3;color:#b00020;padding:12px;border-radius:10px}
footer{padding:16px;text-align:center;color:#777}