/* ============================================================
   华语之路 · 登录后页面共享样式（dashboard / overview / ai / calendar / course）
   抽取自各页内联 <style>，五页 <link> 引入。
   各页仅保留页面特有的规则与差异覆盖。
   注意：不得改变现有 UI —— 本文件值与五页原内联一致。
   ============================================================ */

/* ============ 配色变量 ============ */
:root,[data-theme="a"]{
  --bg:#F8FAFC; --card:#FFFFFF; --line:#E2E8F0; --ink:#0F172A; --muted:#64748B;
  --teal:#2563EB; --teal-deep:#1E3A8A; --teal-soft:#DBEAFE;
  --orange:#F97316; --orange-d:#EA580C;
  --gold:#FBBF24; --gold-soft:#FEF9C3;
  --red:#E11D48; --red-soft:#FFE4E6;
  --green:#16A34A; --green-d:#15803D; --green-soft:#DCFCE7;
  --shadow:0 20px 50px rgba(2,8,23,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
/* 兜底：带 hidden 属性的元素必须隐藏，否则会被 .rvmask / .*-dropdown 上的 display 覆盖 */
[hidden]{display:none !important}
body{
  font-family:'Noto Sans SC','PingFang SC',sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;
  transition:background .4s;
  display:flex;flex-direction:column;min-height:100vh;
}
h1,h2,h3,.serif{font-family:'Noto Serif SC','Songti SC',serif}
svg{display:block}
a{text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--teal-soft);outline-offset:2px;border-radius:6px}

html[lang="en"] body{line-height:1.6}
html[lang="bn"] body{font-family:'Noto Sans Bengali','Noto Sans SC',sans-serif;line-height:1.95}
html[lang="bn"] h1,html[lang="bn"] h2,html[lang="bn"] h3{font-family:'Noto Serif Bengali','Noto Sans Bengali',serif}

/* jamdani 彩条 */
.jamdani{height:8px;background:repeating-linear-gradient(90deg,var(--gold) 0 14px,var(--teal-deep) 14px 18px,var(--red) 18px 30px,var(--teal-deep) 30px 34px,var(--teal) 34px 48px,var(--teal-deep) 48px 52px);opacity:.95}

/* ============ 顶栏（吸顶・深蓝主题） ============ */
.top-wrap{position:sticky;top:0;z-index:50;box-shadow:0 4px 20px rgba(2,8,23,.08)}
.topbar2{background:#F0F4F8;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px max(28px, calc((100vw - 1120px)/2));border-bottom:1px solid var(--line);transition:background .4s}
.logo-light{font-family:'Noto Serif SC',serif;font-weight:800;font-size:20px;color:#fff;white-space:nowrap}
.logo-light span{color:var(--gold)}
.logo-img{height:36px;width:auto;display:block}
.nav-links{display:flex;gap:24px}
.nav-links a{color:var(--teal-deep);font-size:13.5px;font-weight:700;transition:.2s;padding:6px 2px;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--teal)}
.nav-links a.active{color:var(--teal);border-bottom-color:var(--teal)}
.top-right{display:flex;align-items:center;gap:20px}
.lib-chip{display:flex;align-items:center;gap:8px;background:#fff;color:var(--teal-deep);border-radius:10px;padding:7px 14px;font-size:13px;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.lib-chip svg{width:15px;height:15px}
.lang-btn{border:1px solid var(--line);background:var(--card);color:var(--teal-deep);padding:6px 14px;border-radius:99px;font-size:12.5px;font-weight:700;transition:.2s}
.lang-btn:hover{background:var(--teal-soft)}
.lang-btn.active{background:var(--teal);border-color:var(--teal);color:#fff}
/* 语言切换：汉堡选单 */
.lang-menu{position:relative;display:inline-block}
.lang-hamb{
  border:1px solid var(--line);background:var(--card);color:var(--teal-deep);
  padding:7px 14px;border-radius:99px;font-size:12.5px;font-weight:700;
  transition:.2s;cursor:pointer;white-space:nowrap;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;
}
.lang-hamb:hover{background:var(--teal-soft)}
.lang-hamb .caret{font-size:10px;opacity:.7}
.lang-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);z-index:80;
  min-width:150px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;
  display:flex;flex-direction:column;gap:2px;
}
.lang-dropdown button{
  border:none;background:transparent;color:var(--ink);
  text-align:left;padding:10px 14px;border-radius:8px;
  font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit;
}
.lang-dropdown button:hover{background:var(--teal-soft);color:var(--teal-deep)}
.lang-dropdown button.active{background:var(--teal);color:#fff}
.lang-dropdown[hidden]{display:none}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--orange));display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Noto Serif SC',serif;font-weight:800;font-size:15px;border:2px solid var(--line);flex-shrink:0}

/* ============ 头像下拉菜单 ============ */
.avatar-menu{position:relative;display:inline-block}
.avatar-btn{
  width:64px;height:64px;border-radius:50%;padding:0;border:2px solid var(--line);
  background:var(--card);cursor:pointer;overflow:hidden;transition:.2s;display:inline-flex;
}
.avatar-btn:hover{border-color:var(--teal)}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);z-index:90;
  min-width:160px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px;
}
.avatar-dropdown[hidden]{display:none}
.avatar-item{
  display:block;padding:10px 14px;border-radius:8px;font-size:13.5px;font-weight:700;
  color:var(--ink);text-decoration:none;transition:.15s;white-space:nowrap;
}
.avatar-item:hover{background:var(--teal-soft);color:var(--teal-deep)}
.avatar-logout{color:var(--red)}
.avatar-logout:hover{background:var(--red-soft);color:var(--red)}

/* ============ 消息通知 ============ */
.notif-menu{position:relative;display:inline-block}
.notif-btn{
  position:relative;border:1px solid var(--line);background:var(--card);color:var(--teal-deep);
  width:40px;height:40px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.2s;padding:0;
}
.notif-btn:hover{background:var(--teal-soft)}
.notif-btn svg{width:20px;height:20px}
.notif-dot{
  position:absolute;top:-4px;right:-4px;width:18px;height:18px;
  background:var(--red);border-radius:50%;
  border:3px solid #F0F4F8;
}
.notif-dot[hidden]{display:none}
.notif-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);z-index:90;
  width:340px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;
}
.notif-dropdown[hidden]{display:none}
.notif-tabs{display:flex;gap:4px;padding:10px;background:var(--bg);border-bottom:1px solid var(--line)}
.notif-tab{
  flex:1;border:none;background:transparent;color:var(--muted);padding:8px;border-radius:8px;
  font-size:13px;font-weight:700;cursor:pointer;transition:.2s;font-family:inherit;
}
.notif-tab:hover{color:var(--teal-deep);background:var(--teal-soft)}
.notif-tab.on{background:var(--teal);color:#fff}
.notif-list{max-height:320px;overflow-y:auto;padding:6px}
.notif-list[hidden]{display:none}
.notif-item{
  display:flex;align-items:flex-start;gap:10px;padding:12px 12px;border-radius:10px;cursor:pointer;transition:.15s;
}
.notif-item:hover{background:var(--bg)}
.notif-item.read{opacity:.55}
.notif-unread{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;margin-left:auto;margin-top:13px}
.notif-item.read .notif-unread{display:none}
.notif-ico{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.notif-ico svg{width:17px;height:17px}
.notif-ico.live{background:var(--orange)}
.notif-ico.hw{background:var(--teal)}
.notif-ico.msg{background:var(--teal-deep)}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:13px;color:var(--ink);font-weight:700;line-height:1.4}
.notif-time{font-size:11px;color:var(--muted);margin-top:2px}
.notif-empty{padding:24px;text-align:center;color:var(--muted);font-size:13px}

/* ============ 页面主体（通用） ============ */
.page{position:relative;z-index:1;flex:1;width:100%;max-width:1100px;margin:0 auto;padding:36px 24px 64px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.f-kicker{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--teal)}
.f-kicker::before{content:'';width:26px;height:3px;background:var(--gold)}
.page-head h1{font-size:34px;color:var(--teal-deep);margin-top:8px;font-weight:800}
.psub{font-size:13.5px;color:var(--muted);margin-top:4px}

/* 功能入口 chips —— 5 个及以上时的防破坏规则 */
.tools{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.chip{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--teal-deep);font-size:13px;font-weight:700;box-shadow:0 2px 8px rgba(2,8,23,.06);transition:.2s}
.chip:hover{background:var(--teal);border-color:var(--teal);color:#fff;transform:translateY(-1px)}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.chip svg{width:15px;height:15px;flex-shrink:0}
/* ① chips 不被压缩 ② 标签不在词内断行（否则会出现参差的高 chip） ③ 由 page-head 整行换行，而非挤压 */
.tools .chip{flex-shrink:0}
.tools .chip>span{white-space:nowrap;line-height:1.2}
/* 孟语字宽最大，降一档 + 收窄 padding，保证 5 个 chip 在 ≥1024px 单行排下 */
html[lang="bn"] .tools .chip{font-size:12px;padding:9px 10px;gap:6px;letter-spacing:0}
html[lang="bn"] .tools .chip svg{width:14px;height:14px}

/* ============ Footer（深蓝主题） ============ */
.site-footer{position:relative;z-index:2;background:var(--teal-deep);color:rgba(255,255,255,.85);padding:36px 20px 20px;transition:background .4s}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr;gap:30px}
.footer-brand .logo-light{font-size:20px;margin-bottom:8px}
.footer-desc{font-size:12.5px;line-height:1.6;max-width:320px;color:rgba(255,255,255,.6)}
.footer-links{display:flex;gap:36px;justify-content:flex-end}
.footer-col{display:flex;flex-direction:column;gap:6px}
.footer-col h4{font-size:12px;font-weight:700;color:#fff;margin-bottom:4px;letter-spacing:1px}
.footer-col a{font-size:12.5px;color:rgba(255,255,255,.7);transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{max-width:1100px;margin:24px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:rgba(255,255,255,.5);flex-wrap:wrap;gap:12px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border-radius:50%;color:rgba(255,255,255,.8);transition:.2s}
.footer-social a:hover{background:var(--gold);color:var(--teal-deep)}
.footer-social svg{width:14px;height:14px}

/* ============ 通用媒体查询 ============ */
@media(max-width:900px){
  .nav-links{display:none}
  .topbar2{padding:12px 16px}
  .page-head{flex-direction:column;align-items:flex-start}
  .page-head h1{font-size:27px}
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .footer-desc{max-width:100%;margin:0 auto}
  .footer-links{justify-content:center}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}