/* ============================================================
   化学炼金师 —— 公共主题样式 (国风魔幻炼金 + 轻量科技)
   主色: 深紫 #2A1B47 / 鎏金 #D4AF37 / 青蓝 #2896C7
   ============================================================ */
:root{
  --c-purple:#2A1B47;
  --c-purple-deep:#1a0f2e;
  --c-purple-light:#3d2a63;
  --c-gold:#D4AF37;
  --c-gold-light:#f0d770;
  --c-blue:#2896C7;
  --c-blue-light:#5fbce0;
  --c-text:#ece4ff;
  --c-text-dim:#a99bd0;
  --c-danger:#e25563;
  --c-success:#46c98a;
  --c-card:rgba(61,42,99,.55);
  --c-card-border:rgba(212,175,55,.35);
  --shadow-gold:0 0 18px rgba(212,175,55,.35);
  --shadow-purple:0 8px 30px rgba(0,0,0,.45);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  color:var(--c-text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(40,150,199,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(212,175,55,.16), transparent 55%),
    linear-gradient(160deg,#1a0f2e 0%,#2A1B47 55%,#231640 100%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.6;
}

a{color:var(--c-blue-light);text-decoration:none}
a:hover{color:var(--c-gold-light)}

/* ---------- 顶部导航 ---------- */
.alch-nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(26,15,46,.92),rgba(42,27,71,.78));
  border-bottom:1px solid var(--c-card-border);
  box-shadow:0 2px 20px rgba(0,0,0,.4);
}
.alch-nav .brand{
  font-weight:800;letter-spacing:2px;
  background:linear-gradient(90deg,var(--c-gold-light),var(--c-gold),#fff7d6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:1.25rem;
}
.alch-nav .brand .seal{
  display:inline-block;width:30px;height:30px;margin-right:8px;vertical-align:middle;
  border-radius:50%;
  background:conic-gradient(from 0deg,var(--c-gold),var(--c-blue),var(--c-gold));
  box-shadow:var(--shadow-gold);
  animation:spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.alch-nav .nav-link{
  color:var(--c-text-dim)!important;font-weight:500;padding:.5rem .9rem!important;
  border-radius:8px;transition:.2s;white-space:nowrap;
}
.alch-nav .nav-link:hover{color:var(--c-gold-light)!important;background:rgba(212,175,55,.12)}
.alch-nav .nav-link.active{color:var(--c-gold)!important;background:rgba(212,175,55,.15)}
.alch-nav .nav-link.super-active{color:var(--c-blue-light)!important;background:rgba(40,150,199,.15)}

/* ---------- 卡片 ---------- */
.alch-card{
  background:var(--c-card);
  border:1px solid var(--c-card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-purple);
  padding:1.4rem;
  position:relative;
  overflow:hidden;
}
.alch-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(212,175,55,.06) 50%,transparent 70%);
}
.alch-card-title{
  font-weight:700;color:var(--c-gold-light);
  border-left:4px solid var(--c-gold);padding-left:10px;margin-bottom:1rem;
  display:flex;align-items:center;gap:8px;
}

/* ---------- 按钮 ---------- */
.btn-alch{
  background:linear-gradient(135deg,var(--c-gold),#b8902a);
  color:#231640;font-weight:700;border:none;border-radius:10px;
  padding:.5rem 1.2rem;transition:.25s;box-shadow:0 3px 12px rgba(212,175,55,.3);
}
.btn-alch:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(212,175,55,.5);color:#1a0f2e}
.btn-alch:active{transform:translateY(0)}
.btn-blue{
  background:linear-gradient(135deg,var(--c-blue),#1a6f9c);color:#fff;
  box-shadow:0 3px 12px rgba(40,150,199,.35);
}
.btn-blue:hover{color:#fff;box-shadow:0 6px 20px rgba(40,150,199,.55)}
.btn-ghost{
  background:rgba(255,255,255,.06);color:var(--c-text);
  border:1px solid var(--c-card-border);
}
.btn-ghost:hover{background:rgba(212,175,55,.15);color:var(--c-gold-light)}
.btn-danger-alch{
  background:linear-gradient(135deg,#c0454f,#7a2530);color:#fff;border:none;
}
.btn-danger-alch:hover{color:#fff;box-shadow:0 6px 18px rgba(226,85,99,.4)}

/* ---------- 表单 ---------- */
.form-control,.form-select{
  background:rgba(26,15,46,.6)!important;border:1px solid var(--c-card-border)!important;
  color:var(--c-text)!important;border-radius:10px;
}
.form-control:focus,.form-select:focus{
  background:rgba(26,15,46,.8)!important;border-color:var(--c-gold)!important;
  box-shadow:0 0 0 .2rem rgba(212,175,55,.2)!important;color:var(--c-text)!important;
}
.form-control::placeholder{color:var(--c-text-dim)}
.form-label{color:var(--c-text-dim);font-weight:500;margin-bottom:.35rem}

/* ---------- 表格 ---------- */
.alch-table{color:var(--c-text);width:100%}
.alch-table thead th{
  color:var(--c-gold-light);border-bottom:2px solid var(--c-card-border)!important;
  font-weight:700;letter-spacing:1px;white-space:nowrap;
}
.alch-table tbody td{border-color:rgba(212,175,55,.15)!important;vertical-align:middle}
.alch-table tbody tr:hover{background:rgba(212,175,55,.08)}

/* ---------- 段位徽章 ---------- */
.tier-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:.25rem .7rem;border-radius:20px;font-weight:700;font-size:.85rem;
  position:relative;overflow:hidden;border:1px solid transparent;
}
.tier-badge::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  background-size:200% 100%;animation:tier-shine 2.4s linear infinite;pointer-events:none;
}
@keyframes tier-shine{0%{background-position:200% 0}100%{background-position:-200% 0}}

.tier-bronze{background:linear-gradient(135deg,#7a4a23,#cd7f32);color:#fff;border-color:#e0935a}
.tier-silver{background:linear-gradient(135deg,#5a6470,#c0c0c0);color:#1a1a1a;border-color:#dfe6ee}
.tier-gold{background:linear-gradient(135deg,#b8860b,#ffd700);color:#3a2a00;border-color:#ffe88a}
.tier-apprentice-junior{background:linear-gradient(135deg,#2e6f8e,#5fbce0);color:#fff;border-color:#86d2ee}
.tier-apprentice-mid{background:linear-gradient(135deg,#1f7a5e,#46c98a);color:#fff;border-color:#7fe0b0}
.tier-apprentice-senior{background:linear-gradient(135deg,#5a2b7a,#a45fde);color:#fff;border-color:#c691ee}
.tier-alchemist-1{background:linear-gradient(135deg,#7a5a1a,#d4af37);color:#231640;border-color:#f0d770}
.tier-alchemist-2{background:linear-gradient(135deg,#5a3a8a,#8a6fd4);color:#fff;border-color:#b3a0ee}
.tier-alchemist-3{background:linear-gradient(135deg,#7a1a3a,#d4377a);color:#fff;border-color:#f07aaa}
.tier-master{background:linear-gradient(135deg,#3a1a5a,#7a3ad4);color:#fff;border-color:#a07aee}
.tier-grand-master{background:linear-gradient(135deg,#5a0f2e,#d40f5a);color:#fff;box-shadow:0 0 12px rgba(212,15,90,.6);border-color:#f07aaa}
.tier-sage{background:linear-gradient(135deg,#0f3a5a,#1f9ad4);color:#fff;box-shadow:0 0 12px rgba(31,154,212,.6);border-color:#7fd2ee}
.tier-quasi-grandmaster{background:linear-gradient(135deg,#3a0f5a,#9a1ad4);color:#fff;box-shadow:0 0 14px rgba(154,26,212,.6);border-color:#c87aee}
.tier-supreme{
  background:linear-gradient(135deg,#5a0f0f,#d4af37,#5a0f0f);
  background-size:200% 100%;animation:supreme-flow 3s linear infinite;
  color:#fff;box-shadow:0 0 20px rgba(212,175,55,.8);border-color:#ffd700;
}
@keyframes supreme-flow{0%{background-position:0 0}100%{background-position:200% 0}}

/* ---------- 段位大阶段发光卡片 ---------- */
.stage-pill{
  display:inline-block;padding:.15rem .6rem;border-radius:6px;font-size:.75rem;
  background:rgba(212,175,55,.12);color:var(--c-gold-light);border:1px solid var(--c-card-border);
}

/* ---------- 学生卡片(课中) ---------- */
.stu-card{
  background:linear-gradient(160deg,rgba(61,42,99,.7),rgba(42,27,71,.85));
  border:1px solid var(--c-card-border);border-radius:12px;
  padding:.9rem 1rem;margin-bottom:.7rem;transition:.25s;
  position:relative;overflow:hidden;
}
.stu-card:hover{transform:translateY(-3px);border-color:var(--c-gold);box-shadow:var(--shadow-gold)}
.stu-card .stu-name{font-weight:700;color:#fff;font-size:1.05rem}
.stu-card .stu-score{color:var(--c-gold-light);font-weight:800;font-size:1.2rem}

/* ---------- 小组分栏(课中) ---------- */
.group-col{
  background:linear-gradient(180deg,rgba(212,175,55,.06),rgba(42,27,71,.4));
  border:1.5px solid var(--c-gold);border-radius:16px;padding:1rem;
  box-shadow:inset 0 0 30px rgba(212,175,55,.08);
  position:relative;
}
.group-col .group-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px dashed var(--c-card-border);
}
.group-col .group-head h5{margin:0;color:var(--c-gold-light);font-weight:800;letter-spacing:1px}

/* ---------- Toast ---------- */
.alch-toast-wrap{
  position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;
}
.alch-toast{
  min-width:240px;max-width:360px;padding:.8rem 1.1rem;border-radius:10px;
  background:rgba(26,15,46,.95);border:1px solid var(--c-card-border);color:var(--c-text);
  box-shadow:var(--shadow-purple);animation:toast-in .3s ease;
}
.alch-toast.success{border-left:4px solid var(--c-success)}
.alch-toast.error{border-left:4px solid var(--c-danger)}
.alch-toast.info{border-left:4px solid var(--c-blue)}
@keyframes toast-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}

/* ---------- 法阵边框装饰 ---------- */
.alch-frame{
  position:relative;border-radius:18px;
  border:2px solid transparent;
  background:
    linear-gradient(var(--c-purple-deep),var(--c-purple-deep)) padding-box,
    conic-gradient(from 45deg,var(--c-gold),var(--c-blue),var(--c-gold)) border-box;
}

/* ---------- 分页 ---------- */
.alch-pagination .page-link{
  background:rgba(26,15,46,.6);border-color:var(--c-card-border);color:var(--c-text);
}
.alch-pagination .page-link:hover{background:rgba(212,175,55,.2);color:var(--c-gold-light)}
.alch-pagination .active .page-link{
  background:linear-gradient(135deg,var(--c-gold),#b8902a);color:#231640;border-color:var(--c-gold);
}

/* ---------- 缩略图网格 ---------- */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.img-thumb{
  position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--c-card-border);background:rgba(0,0,0,.3);
  aspect-ratio:1/1;
}
.img-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.img-thumb .del-btn{
  position:absolute;top:6px;right:6px;opacity:0;transition:.2s;
  background:rgba(192,69,79,.92);color:#fff;border:none;border-radius:50%;
  width:30px;height:30px;font-size:14px;
}
.img-thumb:hover .del-btn{opacity:1}
.img-thumb .del-btn:hover{background:#e25563;transform:scale(1.1)}

/* ---------- 空状态 ---------- */
.alch-empty{
  text-align:center;padding:3rem 1rem;color:var(--c-text-dim);
}
.alch-empty .ico{font-size:3rem;opacity:.6;margin-bottom:.5rem}

/* ---------- 模态框适配 ---------- */
.modal-content{
  background:linear-gradient(160deg,#231640,#2A1B47);border:1px solid var(--c-card-border);
  color:var(--c-text);border-radius:14px;
}
.modal-header{border-bottom:1px solid var(--c-card-border)}
.modal-footer{border-top:1px solid var(--c-card-border)}
.modal-title{color:var(--c-gold-light);font-weight:700}

/* ---------- 随机点名弹窗特效 ---------- */
.random-pick-box{
  text-align:center;padding:2rem 1rem;
}
.random-pick-box .pick-name{
  font-size:2.4rem;font-weight:900;letter-spacing:4px;
  background:linear-gradient(90deg,#fff,var(--c-gold-light),var(--c-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pick-glow 1.2s ease-in-out infinite alternate;
}
@keyframes pick-glow{
  from{text-shadow:0 0 10px rgba(212,175,55,.3)}
  to{text-shadow:0 0 28px rgba(212,175,55,.8)}
}

/* ---------- 试题展示(课后) ---------- */
.question-stage{
  display:flex;justify-content:center;align-items:center;
  min-height:60vh;padding:1rem;
}
.question-stage img{
  max-width:100%;max-height:75vh;border-radius:14px;
  border:2px solid var(--c-gold);box-shadow:0 0 40px rgba(212,175,55,.3);
  object-fit:contain;background:rgba(0,0,0,.3);
}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .alch-nav .brand{font-size:1rem}
  .alch-nav .nav-link{padding:.4rem .5rem!important;font-size:.9rem}
  .stu-card .stu-score{font-size:1.05rem}
  .question-stage img{max-height:65vh}
  .group-col{padding:.7rem}
}

/* ---------- 工具类 ---------- */
.text-gold{color:var(--c-gold-light)!important}
.text-blue{color:var(--c-blue-light)!important}
.text-dim{color:var(--c-text-dim)!important}
.cursor-pointer{cursor:pointer}