* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  :root{
    --brand:#0B5FA5; --brand2:#12836e; --bg:#f4f6fa; --card:#ffffff;
    --text:#1f2d3d; --sub:#7a8a99; --gold:#f5b301; --line:#e6ebf1;
  }
  body{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
        background:var(--bg); color:var(--text); min-height:100vh; }
  .wrap{ max-width:480px; margin:0 auto; padding:0 14px 60px; }

  /* ---------- header ---------- */
  header{
    background:linear-gradient(135deg,#0B5FA5 0%,#12836e 100%);
    color:#fff; padding:26px 18px 46px; border-radius:0 0 24px 24px;
    box-shadow:0 6px 20px rgba(11,95,165,.25);
  }
  .logo{ font-size:30px; font-weight:800; letter-spacing:.5px; }
  .logo span{ color:#ffd54d; }
  .slogan{ font-size:13px; opacity:.9; margin-top:4px; }
  .title{ font-size:20px; font-weight:700; margin-top:16px; }
  .subtitle{ font-size:12px; opacity:.85; margin-top:4px; }

  /* ---------- level cards ---------- */
  .section{ margin-top:-26px; }
  .level-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  .level-card{
    background:var(--card); border:2px solid var(--line); border-radius:16px;
    padding:16px 14px; cursor:pointer; transition:all .15s;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
  }
  .level-card .en{ font-size:17px; font-weight:700; }
  .level-card .cn{ font-size:12px; color:var(--sub); margin-top:3px; }
  .level-card.active{ border-color:var(--brand); background:#eef6ff;
    box-shadow:0 4px 14px rgba(11,95,165,.15); }
  .level-card.active .en{ color:var(--brand); }
  .level-card.full{ grid-column:1 / -1; }

  /* ---------- form ---------- */
  .panel{ background:var(--card); border-radius:16px; padding:18px 16px;
          margin-top:14px; box-shadow:0 2px 8px rgba(0,0,0,.04); display:none; }
  .panel.show{ display:block; }
  .panel h3{ font-size:15px; margin-bottom:12px; color:var(--brand); }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
  .field label small{ color:var(--sub); font-weight:400; margin-left:4px; }
  .field input[type=number]{
    width:100%; padding:12px 14px; font-size:17px; border:1.5px solid var(--line);
    border-radius:10px; outline:none; background:#fbfcfe;
  }
  .field input[type=number]:focus{ border-color:var(--brand); background:#fff; }
  .shield-picker{ display:flex; gap:8px; }
  .shield-picker button{
    flex:1; padding:10px 0; font-size:16px; font-weight:700; border-radius:10px;
    border:1.5px solid var(--line); background:#fbfcfe; color:var(--sub); cursor:pointer;
  }
  .shield-picker button.active{ border-color:var(--gold); background:#fff7e0; color:#b98300; }
  .calc-btn{
    width:100%; padding:15px; font-size:17px; font-weight:700; color:#fff; border:none;
    border-radius:12px; cursor:pointer; margin-top:6px;
    background:linear-gradient(135deg,#0B5FA5,#12836e);
    box-shadow:0 4px 14px rgba(11,95,165,.3);
  }
  .calc-btn:active{ transform:scale(.98); }
  .hint{ font-size:11px; color:var(--sub); margin-top:10px; line-height:1.6; }
  .err{ color:#d64545; font-size:13px; margin-top:8px; display:none; }

  /* ---------- result ---------- */
  .result{ background:var(--card); border-radius:16px; padding:18px 16px;
           margin-top:14px; box-shadow:0 2px 10px rgba(0,0,0,.06); display:none; }
  .result.show{ display:block; }
  .result h3{ font-size:15px; color:var(--brand); margin-bottom:12px; }
  .skill-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 0; border-bottom:1px dashed var(--line);
  }
  .skill-row:last-of-type{ border-bottom:none; }
  .skill-name{ font-size:14px; font-weight:600; }
  .skill-name small{ display:block; color:var(--sub); font-weight:400; font-size:11px; margin-top:2px; }
  .shields{ display:flex; gap:4px; }
  .shield svg{ width:26px; height:30px; display:block; }
  .score-big{ text-align:center; padding:16px 0 6px; }
  .score-big .num{ font-size:46px; font-weight:800; color:var(--brand); line-height:1; }
  .score-big .lbl{ font-size:12px; color:var(--sub); margin-top:6px; }
  .grade-tag{
    display:inline-block; margin-top:10px; padding:6px 18px; border-radius:999px;
    font-size:14px; font-weight:700; color:#fff; background:var(--brand2);
  }
  .grade-tag.gray{ background:#9aa7b4; }
  .grade-tag.gold{ background:var(--gold); color:#5c4300; }
  .detail-table{ width:100%; border-collapse:collapse; margin-top:14px; font-size:13px; }
  .detail-table th,.detail-table td{ padding:8px 6px; text-align:center; border-bottom:1px solid var(--line); }
  .detail-table th{ color:var(--sub); font-weight:600; font-size:12px; background:#f8fafc; }
  .note{ font-size:11px; color:var(--sub); margin-top:12px; line-height:1.7; }
  .note.warn{ color:#b3261e; background:#fdf0ef; border:1px solid #f3c6c2;
              border-radius:8px; padding:8px 10px; font-size:12px; }

  /* ---------- reference table ---------- */
  details{ background:var(--card); border-radius:16px; padding:14px 16px; margin-top:14px;
           box-shadow:0 2px 8px rgba(0,0,0,.04); }
  summary{ font-size:14px; font-weight:700; color:var(--brand); cursor:pointer; }
  .ref-block{ margin-top:12px; }
  .ref-block h4{ font-size:13px; margin-bottom:6px; }
  .ref-table{ width:100%; border-collapse:collapse; font-size:12px; }
  .ref-table th,.ref-table td{ border:1px solid var(--line); padding:5px 4px; text-align:center; }
  .ref-table th{ background:#f8fafc; color:var(--sub); }

  footer{ text-align:center; margin-top:28px; color:var(--sub); font-size:11px; line-height:1.9; }
  footer b{ color:var(--brand); font-size:13px; }