/* ==========================================================================
   家庭教育频道 · 独立后台（/family/admin）
   复用 /admin/admin.css 的公共样式（变量、登录、布局、表格、弹层、介绍页），
   本文件只做「频道专属」的少量覆盖，作用域一律加 .fa- 前缀。
   ========================================================================== */

/* 侧栏品牌区：加一行作用域说明，让项目组一眼知道自己在哪个后台 */
.side__brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.side__scope{
  display:inline-block;padding:2px 10px;border-radius:20px;
  font-size:11.5px;font-weight:700;letter-spacing:.6px;
  background:rgba(23,140,122,.18);color:#5FD3BE;white-space:nowrap;
}

/* 登录页背景：本后台用青绿主色，与总后台的红色区分开 */
.login{
  background:
    radial-gradient(900px 420px at 12% -6%,rgba(14,122,105,.12),transparent 60%),
    radial-gradient(760px 380px at 92% 108%,rgba(200,162,74,.18),transparent 62%),
    linear-gradient(160deg,#F2FAF8 0%,#F4F5F7 55%,#EEF0F4 100%);
}
.login__card{border-top-color:#0E7A69;}

/* 介绍页：本后台用青绿主色，与总后台的红色区分开 */
.fa-lp{
  --lp-red:#0E7A69;
  --lp-red-d:#0A5F52;
}
.fa-lp .adm-lp__eyebrow{color:#0E7A69;}
.fa-lp .adm-lp__role .adm-lp__tag--red{background:#E6F4F1;color:#0E7A69;}
.fa-lp .adm-lp__mods-list b{color:#0E7A69;}
.fa-lp .adm-lp__mgh{border-bottom-color:#0E7A69;}
/* 实心主按钮背景是青绿渐变，确保深底上的白字不被覆盖 */
.fa-lp .adm-lp__btn--primary{background:#0E7A69;color:#fff !important;box-shadow:0 4px 14px rgba(14,122,105,.22);}
.fa-lp .adm-lp__btn--primary:hover{background:#0A5F52;box-shadow:0 8px 22px rgba(14,122,105,.28);}
.fa-lp .adm-lp__btn--ghost{color:#0E7A69 !important;border-color:#BFE0D9;}
.fa-lp .adm-lp__btn--ghost:hover{background:#F2FAF8;border-color:#0E7A69;}

/* 后台主体：把 admin.css 的红色主色整体换成青绿，让两个后台一眼可辨。
   注意 —— 这些变量在 admin.css 里声明在 :root，本文件在其后加载，
   因此对同优先级选择器后者胜出；但 :root 与 #appView 不同优先级，
   作用域收在 #appView / .login 内可避免影响介绍页已定制的样式。 */
#appView, .login {
  --red: #0E7A69;
  --red-2: #12907C;
  --red-dark: #0A5F52;
}
/* 侧栏激活项：原为红色渐变 + 金色图标，这里改成青绿渐变 */
#appView .side__item.is-active {
  background: linear-gradient(90deg, rgba(14,122,105,.9), rgba(14,122,105,.52));
  color: #fff;
}
#appView .side__item.is-active i { background: #C9A45C; color: #3A2A05; }

/* 窄屏：侧栏作用域标签不换行挤压 */
@media (max-width:900px){
  .side__scope{display:none;}
}