/* =========================
   通用页面区（保持你现有结构）
   ========================= */

.left-content-title{
  background:#fff;
  font-size:24px;
  color:#333;
  margin-bottom:20px;
  padding:20px;
  font-weight:700;
  border-radius:6px;
  height:91px;
}

.left-content-main{
  font-size:14px;
  background:#fff;
  color:#666;
  margin-bottom:20px;
  padding:20px;
  border-radius:6px;
}

.left-content-operate{
  background:#fff;
  padding:20px 0;
  border-radius:6px;
}

.left-content-button{
  width:170px;
  height:46px;
  line-height:46px;
  text-align:center;
  background:#f17f19;
  color:#fff;
  font-size:15px;
  cursor:pointer;
  border-radius:8px;
}
.left-content-button:hover{ background: rgba(209,102,18,.85); }

.left-content{ flex:1 1 auto; min-width:0; }

.right-aside{
  flex:0 0 320px;
  width:320px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.right-card{
  height:auto;
  background:#fff;
  padding:13px 0;
  border-radius:6px;
}

.right-card-title{
  font-size:14px;
  color:#036;
  padding:10px;
}

.right-card-split{
  width:calc(100% - 28px);
  height:1px;
  margin:0 14px;
  background:#e5e5e5;
}

.question-content{
  width:1200px;
  max-width:100%;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:20px 0;
  box-sizing:border-box;
}

.side-body{ padding:12px 14px; font-size:14px; color:#333; }
.side-sec{ margin-bottom:14px; }
.side-sec-title{ font-weight:800; margin-bottom:8px; color:#111; }

.meta .meta-row{ display:flex; justify-content:space-between; padding:4px 0; }
.meta .meta-row span{ color:#666; }
.meta .meta-row b{ color:#222; font-weight:700; }

.side-list{ margin:0; padding-left:18px; color:#444; line-height:1.55; }
.side-list li{ margin:6px 0; }

.tool-links{ display:flex; flex-wrap:wrap; gap:10px; }
.tool-links a, .tool-links .locked{
  font-weight:700;
  color:#ff7a00;
  text-decoration:none;
  font-size:13px;
}
.tool-links a:hover{ text-decoration:underline; }
.tool-links .locked{ color:#999; cursor:not-allowed; }

.hotkeys{ margin-top:10px; border-top:1px solid rgba(0,0,0,.06); padding-top:10px; }
.hk{ display:flex; justify-content:space-between; padding:3px 0; }
.hk span{ color:#666; }
.hk b{ color:#222; font-weight:700; }

.wechat-info{
  width:195px;
  height:280px;
  padding:15px;
  border:1px solid rgba(241,193,157,1);
  text-align:center;
  color:#2b2a2a;
  line-height:25px;
  font-size:14px;
  margin-left:auto;
  margin-right:auto;
}

/* 你原 drag/no-select 保留（不改业务） */
#drag{ position:relative; background:#e8e8e8; width:526px; height:34px; line-height:34px; text-align:center; }
#drag .drag_text{ position:absolute; top:0; width:526px; color:#9c9c9c; user-select:none; font-size:12px; }
#drag .drag_bg{ background:#7ac23c; height:34px; width:0; }
#drag .handler{ position:absolute; left:0; width:40px; height:34px; cursor:move; z-index:2; }
.handler_bg{ position:absolute; top:0; left:0; width:40px; height:34px; border:1px solid #ccc; cursor:move; }
.no-select{ user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }
.no-select img{ -webkit-user-drag:none; user-drag:none; }

.footer-text{ color:#000; font-size:14px; text-align:center; width:100%; }
.footer-text a{ color:#000; }

.error-msg{ color:red; font-size:14px; margin-left:5px; }
.valid{ border-color:#4caf50; }
.invalid{ border-color:#f44336; }

.logout{ color:#f60; font-size:14px; cursor:pointer; }
.logout:hover{ color:#b34700; }


/* =========================
   通关结算弹层（yrx-*）最终合并版
   ========================= */

:root{
  --yrx-orange:#ff7a00;
  --yrx-orange-2:#f17f19;
  --yrx-ink:#111;
  --yrx-text:#333;
  --yrx-sub:#666;
  --yrx-border: rgba(255,122,0,.18);
  --yrx-bg:#fff;
  --yrx-warm: rgba(255,247,230,1);
}

/* 遮罩 */
.yrx-mask{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(10,10,10,.48);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  animation:yrxFadeIn .18s ease-out both;
}
@keyframes yrxFadeIn{ from{opacity:0} to{opacity:1} }

/* 弹窗 */
.yrx-modal{
  width:440px;
  max-width:96vw;
  background:var(--yrx-bg);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.22);
  overflow:hidden;
  transform:translateY(8px) scale(.98);
  animation:yrxPopIn .22s cubic-bezier(.2,.9,.2,1) both;
  position:relative;
}
@keyframes yrxPopIn{ to{ transform:translateY(0) scale(1) } }

/* ===== 顶部栏：左logo / 中标题 / 右关闭（统一！） ===== */
.yrx-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:linear-gradient(90deg, rgba(255,122,0,.12), rgba(255,177,0,.10));
  border-bottom:1px solid rgba(0,0,0,.06);
}

.yrx-top-left,
.yrx-top-right{
  align-items:center;
  min-width:80px; /* 保证标题居中 */
}
.yrx-top-center{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
}

.yrx-top-title{
  font-size:14px;
  font-weight:900;
  color:var(--yrx-ink);
  letter-spacing:.4px;
}

/* logo */
.yrx-brand-logo{
  width:80px;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));
}
@media (max-width:420px){ .yrx-brand-logo{ height:18px; } }

/* 关闭按钮（统一！） */
.yrx-x{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:28px;
  color:#444;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
    float: right;
}
.yrx-x:hover{
  transform:scale(1.04);
  background:rgba(241,127,25,0.08);
  border-color:rgba(241,127,25,0.25);
}

/* 内容 */
.yrx-body{ padding:16px; }

.yrx-msg{
  color:var(--yrx-text);
  font-weight:900;
  font-size:16px;
  margin-bottom:10px;
}
.yrx-submsg{
  color:var(--yrx-sub);
  font-size:13px;
  line-height:1.6;
  margin-bottom:14px;
}

/* 卡片 */
.yrx-reward{
  background:var(--yrx-warm);
  border:1px solid var(--yrx-border);
  border-radius:14px;
  padding:12px;
}

/* 顶部一行：左段位，右本次经验 */
.yrx-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

/* 段位展示：badge + Lv */
.yrx-realm{
  display:flex;
  align-items:center;
  gap:6px;
}

.yrx-tier-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:900;
  background: rgba(241,127,25,.12);
  border: 1px solid rgba(241,127,25,.35);
  color: rgba(241,127,25,1);
}

.yrx-lvnum{
  font-size:12px;
  color:#777;
  font-weight:900;
}

/* 段位变化动效 */
.yrx-tier-badge.up{ animation:yrxTierPop .45s ease-out 1; }
@keyframes yrxTierPop{ 0%{transform:scale(.92);opacity:.7} 100%{transform:scale(1);opacity:1} }

/* 右上经验区：永不换行 + 右对齐（统一！） */
.yrx-xpadd{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  font-weight:900;
  font-size:12px;
  color:#6b3b00;
}
.yrx-xpline{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  white-space:nowrap;
}
.yrx-overflowline{
  display:none;
  font-size:11px;
  font-weight:900;
  color:#7a5a2a;
  opacity:.95;
}

/* 进度条 */
.yrx-bar{
  height:12px;
  background: rgba(255,255,255,.85);
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  overflow:hidden;
  position:relative;
}

.yrx-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--yrx-orange), #ffb100);
  box-shadow:0 6px 16px rgba(255,122,0,.25);
  transition: width 900ms cubic-bezier(.2,.9,.2,1);
  position:relative;
}

/* 流光 */
.yrx-bar-fill::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-40%;
  width:40%;
  height:200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  animation: yrxShine 1.1s ease-in-out infinite;
  opacity:.75;
}
@keyframes yrxShine{ 0%{left:-45%} 100%{left:115%} }

/* 条内文字 */
.yrx-bar-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color: rgba(17,17,17,.78);
  text-shadow:0 1px 0 rgba(255,255,255,.65);
  pointer-events:none;
}
.yrx-bar-label .em{ color: var(--yrx-orange); }
.yrx-bar-label.pop{ animation: yrxLabelPop .35s ease-out 1; }
@keyframes yrxLabelPop{ 0%{transform:scale(.96);opacity:.7} 100%{transform:scale(1);opacity:1} }

/* 底部标尺 */
.yrx-bar-meta{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-size:12px;
  color:#7a5a2a;
  font-weight:800;
}

/* 提示框 */
.yrx-hint{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background: var(--yrx-warm);
  border:1px solid rgba(255,122,0,.22);
  color:#6b3b00;
  font-size:12px;
  font-weight:900;
  line-height:1.55;
  display:none;
}
.yrx-hint b{ color: var(--yrx-orange); }

/* 按钮区 */
.yrx-actions{
  padding:14px 16px 16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.yrx-btn{
  height:38px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  color:#222;
  cursor:pointer;
  font-weight:900;
  transition: transform .15s ease, border-color .15s ease;
}
.yrx-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,122,0,.35);
}

.yrx-btn.primary{
  background: var(--yrx-orange-2);
  border-color: transparent;
  color:#fff;
}
.yrx-btn.primary:hover{ filter: brightness(.98); }

/* ===== 突破特效：脉冲环 + 火花粒子 ===== */
.yrx-modal.levelup{
  box-shadow:0 20px 60px rgba(255,122,0,.22), 0 18px 50px rgba(0,0,0,.25);
}
.yrx-modal.levelup::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:18px;
  border:2px solid rgba(255,122,0,0);
  animation: yrxRing 1.2s ease-out 1;
  pointer-events:none;
}
@keyframes yrxRing{
  0%{opacity:0;transform:scale(.98);border-color:rgba(255,122,0,0)}
  15%{opacity:1;border-color:rgba(255,122,0,.55)}
  100%{opacity:0;transform:scale(1.06);border-color:rgba(255,122,0,0)}
}

.yrx-sparks{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.yrx-sparks i{
  position:absolute;
  left:50%;
  top:52%;
  width:6px;
  height:6px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, #ffb100);
  box-shadow:0 0 10px rgba(255,122,0,.45);
  opacity:0;
  transform: translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(1);
  animation: yrxSpark 900ms ease-out var(--d) 1;
}
@keyframes yrxSpark{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(1)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--r)) scale(.6)}
}