:root{
    --lavender:#efe9ff;   /* 背景浅紫 */
    --mint:#e7fff3;       /* 背景浅绿 */
    --brand:#6a4cff;      /* 科技紫 */
    --brand2:#16c47f;     /* 科技绿 */
    --text:#222;
    --muted:#666;
    --panel:#ffffff;
    --blue:#2a8cff;
    --green:#23b06e;      /* 弹窗环主色 */
    --red:#ff4d4f;        /* 弹窗旋转段 */
  }

  html,body{height:100%;}
  body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", "Helvetica Neue", Arial, "Noto Sans CJK SC", sans-serif;
    color:var(--text);
    background: linear-gradient(to right, #FFDAB9, #EED2EE);
  }

  /* 容器（≤900px 居中） */
  .wrap{ max-width:800px; margin: clamp(16px,4vh,36px) auto; padding: clamp(12px,1.8vw,20px); }

  /* 内容面板 */
  .panel{
    background: var(--panel);
    padding: clamp(16px,2.2vw,28px);
    position: relative;
  }

  /* 标题条：单独背景区分 */
  .titleBar{
    background: linear-gradient(90deg, rgba(106,76,255,0.10), rgba(22,196,127,0.10));
    border: 1px solid rgba(106,76,255,0.15);
    padding: 12px 16px;
    border-radius: 0px;
    margin-bottom: 10px;
  }
  .title{
    text-align:center;
    font-weight: 800;
    font-size: clamp(22px, 3.8vw, 34px);
    letter-spacing: .5px;
    background: linear-gradient(90deg, var(--brand), #8a6bff);
    -webkit-background-clip:text; background-clip:text;
    color: transparent;
    margin: 0;
  }

  /* 进度条区域（百分比归到实时处理内） */
  .progress-area{ display:grid;  gap:12px; align-items:center; }
  .progress-left{ display:flex; align-items:center; gap:10px; min-width:0; }
  .bar{ position:relative; flex:1; height:12px; border-radius:999px; overflow:hidden;
        background: linear-gradient(180deg, #f4f1ff, #f7faff);
        box-shadow: inset 0 0 0 1px rgba(106,76,255,0.12); }
  .bar .fill{ position:absolute; left:0; top:0; bottom:0; width:0%;
              background: linear-gradient(90deg, #7a5cff, #4be3b5); transition: width .35s ease; }
  .processing{ display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #0d7f55;
    background: #eafff4;
    border: 1px solid #bff3db;
    padding: 10px 30px 10px 30px;
    white-space: nowrap;
    width: min-content;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 10px;}
  .dot{ width:10px; height:10px; border-radius:50%; background:#16c47f; box-shadow: 0 0 0 0 rgba(22,196,127,.5);    margin-top: 4px;        animation: dotPulse 1.2s ease-in-out infinite; }
  @keyframes dotPulse{ 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(22,196,127,.5);} 70%{transform:scale(1.15);box-shadow:0 0 0 8px rgba(22,196,127,0);} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(22,196,127,0);} }
  .percent-inline{ font-variant-numeric: tabular-nums; font-weight:900; color:#0a6a48; }
  .tip{ grid-column:1 / -1; text-align:center; color:#666; font-size: 17px; margin-top:10px; }

  /* 题号板块 */
  .qstats{ display: table;
    margin: auto;
    margin-top: 30px; }
  .leftStat, .rightStat{ display:flex; align-items:center; gap:10px; }
  .icon-badge{
    width: 120px;
    height: 40px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    color: #FF6A6A;
    font-weight: 700;
    font-size: 35px;
  }
  @keyframes slowSpin{ to { transform: rotate(360deg); } }
  .leftStat .label, .rightStat .label{ font-size:14px; color:var(--muted); }
  .leftStat .value, .rightStat .value{ font-weight:700; font-size:30px; }

  .bulb{
    width:38px; height:38px; border-radius:50%;
    position:relative;
    background: radial-gradient(circle at 50% 40%, #ffe6a6 0%, #ffbf3d 40%, #ff9b00 60%, #ff7b00 100%);
    animation: bulbGlow 1.8s ease-in-out infinite;
  }
  .bulb::after{ content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
    width:16px; height:10px; border-radius:4px;
    background: linear-gradient(180deg, #999, #666); }
  @keyframes bulbGlow{ 0%,100%{ filter:saturate(1);} 50%{ filter:saturate(1.2);} }

  /* 选项块（上下各一个，点击闪光；hover 仅换边框色） */
  .options{ display:grid; grid-template-columns: 1fr; gap:20px; margin-top: 10px; }
  .opt{
    position:relative; overflow:hidden;
    border-radius: 0px;
    padding: clamp(14px,2.2vw,18px) clamp(14px,2.6vw,20px);
    border:1px solid rgba(106,76,255,.12);
  }
  .opt:hover{  border-color: #0000CD;  }
.opt.selected {
  border-color: rgba(255, 69, 58, 0.9); /* 红色选中边框 */
}

/* 红色扫光动画 */
.opt.flash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 69, 58, 0) 0%,
    rgba(255, 69, 58, 0.10) 35%,
    rgba(255, 69, 58, 0.22) 50%,
    rgba(255, 69, 58, 0.10) 65%,
    rgba(255, 69, 58, 0) 100%
  );
  transform: translateX(-120%);
  animation: sweep .45s ease forwards;
}
  @keyframes sweep{ to { transform: translateX(120%); } }
  .opt .t{ font-weight: 500; font-size: 20px; }
  .opt .s{ color: var(--muted); font-size: 13px; margin-top: 6px; }

  /* 操作按钮 */
  .actions{ display:flex; justify-content:center; margin: 16px 0 4px; }
  .btn{
    border: none;
    border-radius: 5px;
    padding: 10px 30px;
    font-weight: 600;
    font-size: 18px;
    background: linear-gradient(to right, #9B30FF, #4876FF);
    color: white;
    margin-top: 10px;letter-spacing: 3px;
  }
  .btn.submit-btn {border: none;    border-radius: 5px;    padding: 10px 30px;    font-weight: 600;   font-size: 25px;
    background: linear-gradient(to right, #CD3278, #9932CC);    color: white;    margin-top: 10px;    letter-spacing: 3px;}
  .btn:disabled{  cursor:not-allowed; filter: grayscale(.2); }
  .btn.secondary{ background: linear-gradient(90deg, #0dbb84, var(--brand2)); box-shadow: 0 8px 20px rgba(22,196,127,.25); }
  .btn:hover{ transform: translateY(-1px); }

  /* ===== 弹窗（精致 3px 细线版本） ===== */
  .modal{ position: fixed; inset:0; display:none; place-items:center;
          background: rgba(20,16,40,0.45); backdrop-filter: blur(2px); z-index: 999; }
  .modal.show{ display:grid; }
  .dialog{ width:min(92vw,360px); background:#ffffff; border-radius:16px; padding:24px 20px 20px; text-align:center;
           box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.biaoti {font-weight: 700;  text-align: center;  font-size: 22px;    margin-bottom: 30px;    margin-top: 30px;}
  .ring{ width:120px; height:120px; margin:4px auto 12px; position:relative; border-radius:50%; }
  /* 绿色完整细线圈（3px，纯色，无阴影） */
  .circle{
    position:absolute; inset:0; border-radius:50%; border:3px solid var(--green);
    box-sizing: border-box;
  }
  /* 红色细弧段（3px，36°，慢速旋转） */
  .arc{
    position:absolute; inset:0; border-radius:50%;
    background: conic-gradient(var(--red) 0deg 36deg, transparent 36deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: spin 3s linear infinite;
  }
  @keyframes spin{ to { transform: rotate(360deg);} }

  /* 中央倒计时数字 */
  .countNum{
    position:absolute; inset:0; display:grid; place-items:center;
    font-size: 32px; font-weight: 900; color:#2b8a3e;
    font-variant-numeric: tabular-nums;
  }

  .mtitle{ font-weight: 900; font-size: 18px; margin-top: 6px; color:#222; }
  .msub{ color:#e25555; font-size:14px; margin:6px 0 2px; }

  /* 移动端优化 */
  @media (max-width:640px){
    .progress-area{ grid-template-columns: 1fr; }
    .processing{ justify-content:flex-start; }
    .title{ letter-spacing: 0; }
	.biaoti {        font-weight: 600;        text-align: justify;        font-size: 1.1rem;        margin-bottom: 25px;        margin-top: 15px;        line-height: 28px;}
	.icon-badge{    width: 120px;    height: 40px;    border-radius: 5px;    display: grid;    place-items: center;    color: #FF6A6A;    font-weight: 700;    font-size: 30px;  }
	  .qstats{ display: table;    margin: auto;    margin-top: 20px; }
	  .wrap{ max-width:800px; margin: auto; padding: clamp(12px,1.8vw,20px); }
  }