/* ===== 民德小学教务系统 · 设计系统 ===== */
:root{
  --brand:#4f46e5;
  --brand-2:#7c3aed;
  --brand-soft:#eef2ff;
  --ink:#1e293b;
  --muted:#8b93a7;
  --bg:#f4f6fb;
  --ok:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
  --pink:#ec4899;
  --radius:18px;
  --shadow:0 6px 24px rgba(30,41,59,.07);
  --shadow-lg:0 12px 40px rgba(79,70,229,.16);
}
*{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Segoe UI',sans-serif;
  font-size:15px; line-height:1.6;
  padding-bottom:env(safe-area-inset-bottom);
}
a{ text-decoration:none; }

/* ---------- 顶栏 ---------- */
.app-navbar{
  background:linear-gradient(100deg,#4f46e5 0%,#6366f1 55%,#7c3aed 100%);
  box-shadow:0 2px 14px rgba(79,70,229,.25);
  padding:.55rem 0;
}
.app-navbar .navbar-brand{ display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.08rem; }
.brand-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,.2); backdrop-filter:blur(4px);
  font-size:1.05rem;
}
.app-navbar .nav-link{
  color:rgba(255,255,255,.86)!important; font-weight:500;
  padding:.45rem .85rem!important; border-radius:10px;
  transition:all .18s ease;
}
.app-navbar .nav-link:hover{ color:#fff!important; background:rgba(255,255,255,.14); }
.app-navbar .nav-pill{ background:rgba(255,255,255,.18); margin-left:.35rem; }
.app-navbar .nav-pill:hover{ background:rgba(255,255,255,.28); }

/* ---------- 页脚 ---------- */
.app-footer{
  text-align:center; color:var(--muted); font-size:.82rem;
  padding:1.4rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
}
.app-footer a{ color:inherit; }

/* ---------- 卡片 ---------- */
.card{
  border:none; border-radius:var(--radius); box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card-body{ padding:1.35rem 1.4rem; }
h4{ font-weight:700; letter-spacing:.2px; }
h5,h6{ font-weight:700; }

/* ---------- 欢迎横幅 ---------- */
.welcome-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,#4f46e5 0%,#7c3aed 100%);
  border-radius:var(--radius); color:#fff; padding:1.6rem 1.7rem;
  box-shadow:var(--shadow-lg);
}
.welcome-hero::after{
  content:""; position:absolute; right:-40px; top:-40px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.12);
}
.welcome-hero::before{
  content:""; position:absolute; right:60px; bottom:-70px;
  width:130px; height:130px; border-radius:50%;
  background:rgba(255,255,255,.08);
}
.welcome-hero .wh-title{ font-size:1.5rem; font-weight:700; margin:0 0 .25rem; }
.welcome-hero .wh-sub{ opacity:.85; font-size:.92rem; position:relative; z-index:1; }
.welcome-hero .wh-chip{
  display:inline-block; background:rgba(255,255,255,.2);
  padding:.2rem .7rem; border-radius:999px; font-size:.8rem; margin-top:.6rem;
}

/* ---------- 功能磁贴 ---------- */
.tile{
  display:block; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.35rem 1.2rem; height:100%;
  transition:transform .2s ease, box-shadow .2s ease; position:relative; overflow:hidden;
}
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.tile .tile-icon{
  width:54px; height:54px; border-radius:15px; display:flex;
  align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:.85rem;
}
.tile .tile-title{ font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:.15rem; }
.tile .tile-desc{ color:var(--muted); font-size:.85rem; }
.tile .tile-arrow{
  position:absolute; right:1rem; top:1.1rem; color:#cbd2e0; font-size:1.1rem;
  transition:transform .2s ease;
}
.tile:hover .tile-arrow{ transform:translateX(4px); color:var(--brand); }
.ic-indigo{ background:var(--brand-soft); color:var(--brand); }
.ic-green{ background:#d1fae5; color:#059669; }
.ic-amber{ background:#fef3c7; color:#d97706; }
.ic-pink{ background:#fce7f3; color:#db2777; }
.ic-blue{ background:#dbeafe; color:#2563eb; }

/* ---------- 统计数字卡 ---------- */
.stat-card{ text-align:center; padding:1.25rem .7rem; height:100%; }
.stat-card .num{ font-size:1.7rem; font-weight:800; color:var(--brand); line-height:1.15; }
.stat-card .lbl{ color:var(--muted); font-size:.82rem; }
.stat-card .sub{ color:#aab2c4; font-size:.72rem; }

/* ---------- 总得分条 ---------- */
.total-bar{
  background:linear-gradient(120deg,#4f46e5,#7c3aed); color:#fff;
  border-radius:var(--radius); padding:1.15rem; text-align:center;
  box-shadow:var(--shadow-lg);
}
.total-bar .tb-num{ font-size:2.1rem; font-weight:800; line-height:1.1; }
.total-bar .tb-lbl{ opacity:.85; font-size:.88rem; }

/* ---------- 明细小卡 ---------- */
.detail-tile{
  border:1px solid #edf0f7; border-radius:14px; padding:.95rem .6rem;
  text-align:center; background:#fbfcff; height:100%;
}
.detail-tile .dt-lbl{ color:var(--muted); font-size:.8rem; margin-bottom:.2rem; }
.detail-tile .dt-val{ font-size:1.35rem; font-weight:800; color:var(--ink); }
.detail-tile .dt-full{ color:#aab2c4; font-size:.72rem; }

/* ---------- 班级磁贴 ---------- */
.class-tile{
  display:block; background:#fff; border-radius:15px; padding:1rem .8rem;
  text-align:center; box-shadow:var(--shadow); transition:all .2s ease;
  border:1px solid #f0f2f8;
}
.class-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#dfe3f5; }
.class-tile .ct-name{ font-weight:700; font-size:1.02rem; color:var(--ink); }
.class-tile .ct-sub{ color:var(--muted); font-size:.76rem; }

/* ---------- 表头 / 表格 ---------- */
.table thead th{
  background:var(--brand-soft); color:#4338ca; font-weight:600;
  border-color:#e3e8fb; white-space:nowrap;
}
.table td{ vertical-align:middle; white-space:nowrap; }
.table-hover tbody tr:hover{ background:#fafbff; }
.section-title{ display:flex; align-items:center; gap:.5rem; font-weight:700; margin-bottom:1rem; }
.section-title i{ color:var(--brand); }

/* ---------- 徽章 ---------- */
.badge{ font-weight:600; padding:.42em .7em; border-radius:8px; }

/* ---------- 上传页 ---------- */
.upload-box{
  border:2px dashed #c7ccf0; border-radius:14px; padding:1.5rem;
  text-align:center; background:#fafbff; transition:all .2s ease;
}
.upload-box:hover{ border-color:var(--brand); background:var(--brand-soft); }

/* ---------- 表单 ---------- */
.form-control,.form-select{ border-radius:11px; padding:.6rem .85rem; border-color:#e2e6f0; }
.form-control:focus,.form-select:focus{
  border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(79,70,229,.12);
}
.btn{ border-radius:11px; font-weight:600; }
.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-primary:hover{ background:#4338ca; border-color:#4338ca; }
.input-group-text{ border-radius:11px 0 0 11px; border-color:#e2e6f0; }
.input-group .form-control{ border-radius:0 11px 11px 0; }

/* ---------- 底部 Tab（手机） ---------- */
.mobile-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  background:#fff; border-top:1px solid #eef0f6;
  display:flex; padding:0 .3rem env(safe-area-inset-bottom);
  box-shadow:0 -3px 16px rgba(30,41,59,.06);
}
.mobile-nav a{
  flex:1; text-align:center; padding:.5rem 0 .42rem; color:var(--muted);
  font-size:.7rem; line-height:1.15; transition:color .15s ease; position:relative;
}
.mobile-nav a i{ display:block; font-size:1.4rem; margin-bottom:2px; }
.mobile-nav a.active{ color:var(--brand); font-weight:600; }
.mobile-nav a.active::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 4px 4px; background:var(--brand);
}

/* ---------- 手机顶栏 ---------- */
.mobile-topbar{
  position:sticky; top:0; z-index:1025;
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1rem; color:#fff;
  background:linear-gradient(100deg,#4f46e5,#7c3aed);
  box-shadow:0 2px 12px rgba(79,70,229,.22);
}
.mobile-topbar .mt-brand{ display:flex; align-items:center; gap:.5rem; color:#fff; font-weight:700; font-size:1.02rem; }
.mobile-topbar .mt-menu-btn{
  background:rgba(255,255,255,.18); border:none; color:#fff;
  width:40px; height:40px; border-radius:11px; font-size:1.35rem; line-height:1;
}
.drawer-item{
  display:flex; align-items:center; gap:.75rem; padding:.85rem .9rem;
  border-radius:12px; color:var(--ink); font-weight:500;
}
.drawer-item i{ font-size:1.25rem; color:var(--brand); width:24px; text-align:center; }
.drawer-item:active{ background:var(--brand-soft); }

/* ---------- 显示控制 ---------- */
.mobile-only{ display:none!important; }
.w-md-auto{ width:100%; }
@media (min-width:768px){ .w-md-auto{ width:auto!important; } }
@media (max-width:991.98px){
  .mobile-only{ display:flex!important; }
  .pc-only{ display:none!important; }
  body.has-bottom-nav{ padding-bottom:66px; }
  .card-body{ padding:1.1rem 1.05rem; }
  .welcome-hero{ padding:1.2rem 1.15rem; }
  .welcome-hero .wh-title{ font-size:1.25rem; }
  h4{ font-size:1.2rem; }
  .app-footer{ padding-bottom:calc(1.2rem + 66px + env(safe-area-inset-bottom)); }
}
@media (min-width:992px){
  .mobile-only{ display:none!important; }
  .pc-only{ display:flex!important; }
}