/* ============================================================
   高中·结构化学可视化教学 —— 新版首页（左侧导航 + 右侧卡片）
   浅色柔和粉色系，保留原背景图
   ============================================================ */
:root{
    --rose:#e0607e;
    --rose-deep:#cf4a6b;
    --rose-soft:#fceef2;
    --rose-softer:#fdf6f8;
    --rose-border:#f2d2dc;
    --rose-border-strong:#eab3c2;
    --ink:#1e2a44;
    --ink-soft:#5b6b86;
    --ink-faint:#93a0b5;
    --shadow-card:0 10px 28px rgba(208,120,148,.14);
    --shadow-hover:0 18px 40px rgba(208,120,148,.22);
}

/* ---------- 顶部标题栏 ---------- */
.chem-topbar{
    position:sticky; top:0; z-index:60;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(242,210,220,.55);
}
.chem-topbar-inner{
    max-width:1440px; margin:0 auto; padding:16px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand h1{
    font-size:clamp(22px,2.4vw,32px); font-weight:900; color:var(--ink);
    letter-spacing:.5px; line-height:1.2;
}
.brand p{
    margin-top:4px; font-size:clamp(13px,1.2vw,15px); font-weight:600; color:var(--ink-soft);
}
.topic-hint{ text-align:right; flex-shrink:0; }
.eyebrow{
    display:inline-block; font-size:11px; font-weight:800; letter-spacing:2.5px;
    color:var(--rose); text-transform:uppercase;
}
.topic-hint .hint-title{
    margin-top:6px; font-size:clamp(15px,1.5vw,18px); font-weight:800; color:var(--ink);
}
.topic-hint .hint-title em{ color:var(--rose); font-style:normal; font-weight:900; }
.topic-hint .hint-desc{ margin-top:3px; font-size:12.5px; color:var(--ink-soft); font-weight:500; }

/* ---------- 主区：左右布局 ---------- */
.chem-dashboard{
    max-width:1440px; margin:0 auto; padding:26px 28px 60px;
    display:flex; gap:24px; align-items:flex-start;
}

/* ---------- 左侧主题导航 ---------- */
.chem-sidenav{
    width:248px; flex:0 0 248px; display:flex; flex-direction:column; gap:12px;
    position:sticky; top:96px;
}
.nav-item{
    position:relative; display:flex; align-items:center; gap:12px;
    width:100%; text-align:left; cursor:pointer;
    padding:14px 16px; border-radius:16px;
    background:rgba(255,255,255,.86);
    border:1px solid var(--rose-border);
    color:var(--ink); transition:all .25s ease;
    overflow:hidden;
}
.nav-item::before{
    content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px;
    border-radius:0 4px 4px 0; background:transparent; transition:background .25s ease;
}
.nav-item .num{
    font-size:12px; font-weight:800; color:var(--rose); width:20px; flex-shrink:0;
}
.nav-item .ic{
    width:38px; height:38px; border-radius:11px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--rose-soft); color:var(--rose);
}
.nav-item .ic svg{ width:20px; height:20px; }
.nav-item .meta{ flex:1; min-width:0; }
.nav-item .meta b{ display:block; font-size:15px; font-weight:800; color:var(--ink); }
.nav-item .meta small{
    display:block; margin-top:2px; font-size:10.5px; font-weight:700; letter-spacing:1.2px;
    color:var(--ink-faint); text-transform:uppercase;
}
.nav-item .go{
    color:var(--ink-faint); flex-shrink:0; transition:all .25s ease;
}
.nav-item:hover{
    border-color:var(--rose-border-strong); transform:translateY(-2px);
    box-shadow:var(--shadow-card);
}
.nav-item:hover .go{ color:var(--rose); }
.nav-item.active{
    background:var(--rose-soft); border-color:var(--rose-border-strong);
    box-shadow:var(--shadow-card);
}
.nav-item.active::before{ background:var(--rose); }
.nav-item.active .meta b{ color:var(--rose-deep); }
.nav-item:focus-visible{ outline:3px solid rgba(224,96,126,.4); outline-offset:2px; }

/* ---------- 右侧内容 ---------- */
.chem-content{ flex:1; min-width:0; }
.content-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.content-head .eyebrow{ margin-bottom:6px; }
.content-head h2{
    font-size:clamp(20px,2vw,26px); font-weight:900; color:var(--ink); display:flex; align-items:center; gap:10px;
}
.content-count{
    font-size:14px; font-weight:900; color:var(--rose);
    background:var(--rose-soft); border:1px solid var(--rose-border);
    padding:3px 10px; border-radius:999px;
}
.search-box{ position:relative; flex:0 1 280px; min-width:200px; }
.search-box svg{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color:var(--ink-faint); pointer-events:none;
}
.search-box input{
    width:100%; padding:11px 14px 11px 38px; border-radius:12px;
    border:1px solid var(--rose-border); background:rgba(255,255,255,.9);
    font-size:14px; font-weight:600; color:var(--ink); transition:all .2s ease;
}
.search-box input::placeholder{ color:var(--ink-faint); font-weight:500; }
.search-box input:focus{
    outline:none; border-color:var(--rose); box-shadow:0 0 0 3px rgba(224,96,126,.12); background:#fff;
}

/* ---------- 分类按钮 ---------- */
.filter-row{
    display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 22px;
}
.filter-btn{
    padding:8px 16px; border-radius:999px; cursor:pointer;
    border:1px solid var(--rose-border); background:rgba(255,255,255,.9);
    font-size:13.5px; font-weight:700; color:var(--ink-soft); transition:all .22s ease;
}
.filter-btn:hover{ border-color:var(--rose-border-strong); color:var(--rose-deep); }
.filter-btn.active{
    background:var(--rose); border-color:var(--rose); color:#fff;
    box-shadow:0 6px 16px rgba(224,96,126,.3);
}
.filter-btn:focus-visible{ outline:3px solid rgba(224,96,126,.35); outline-offset:2px; }

/* ---------- 主题面板与卡片网格 ---------- */
.theme-panel{ display:none; }
.theme-panel.show{ display:block; animation:panelSlide .35s ease both; }
/* 仅做位移，不做 opacity 动画：即使页面渲染被节流，内容也始终可见 */
@keyframes panelSlide{ from{transform:translateY(10px);} to{transform:translateY(0);} }
.card-grid{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}

/* 卡片：在保留原内容/链接的前提下统一为粉色系风格 */
.card-grid .card-link{
    position:relative; background:rgba(255,255,255,.94);
    border:1px solid var(--rose-border); border-radius:14px;
    padding:10px; display:flex; flex-direction:column; align-items:center; text-align:center;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow:hidden;
}
.card-grid .card-link::after{
    content:"↗"; position:absolute; top:10px; right:12px;
    font-size:14px; font-weight:800; color:var(--rose); opacity:.55;
    transition:opacity .25s ease, transform .25s ease;
}
.card-grid .card-link:hover{
    transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:var(--rose-border-strong);
}
.card-grid .card-link:hover::after{ opacity:1; transform:translate(2px,-2px); }
.card-grid .card-link:focus-visible{
    outline:3px solid rgba(224,96,126,.45); outline-offset:2px;
}
/* 预览区：保留各自浅色底色，仅统一圆角与尺寸 */
.card-grid .card-link > div:first-child{
    width:100%; aspect-ratio:auto; height:128px; border-radius:10px; margin-bottom:8px;
    display:flex; align-items:center; justify-content:center;
}
.card-grid .card-link > div:first-child svg{ width:64px; height:64px; }
.card-grid .card-link h3{ font-size:14.5px; font-weight:800; color:var(--ink); }
.card-grid .card-link p{ font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-top:2px; }
.card-grid .card-link .preview-emoji{ font-size:34px; }

/* 空状态 */
.empty-state{
    display:none; text-align:center; padding:70px 20px;
    background:rgba(255,255,255,.85); border:1px dashed var(--rose-border-strong);
    border-radius:18px; color:var(--ink-soft); font-size:15px; font-weight:600;
}
.empty-state.show{ display:block; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1180px){
    .card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
    .chem-topbar-inner{ padding:14px 18px; }
    .chem-dashboard{ flex-direction:column; padding:18px 16px 50px; gap:16px; }
    .chem-sidenav{
        width:100%; flex:none; position:static;
        flex-direction:row; overflow-x:auto; padding-bottom:6px;
        -webkit-overflow-scrolling:touch; scrollbar-width:thin;
    }
    .nav-item{ flex:0 0 auto; min-width:188px; }
    .nav-item::before{ display:none; }
    .nav-item.active{ border-color:var(--rose); }
}
@media (max-width:600px){
    .chem-topbar-inner{ flex-direction:column; align-items:flex-start; gap:10px; }
    .topic-hint{ text-align:left; }
    .card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .card-grid .card-link{ padding:8px; border-radius:12px; }
    .card-grid .card-link > div:first-child{ height:100px; margin-bottom:6px; }
    .card-grid .card-link > div:first-child svg{ width:46px; height:46px; }
    .card-grid .card-link h3{ font-size:13px; }
    .card-grid .card-link p{ font-size:10.5px; }
    .content-head{ flex-direction:column; align-items:stretch; }
    .search-box{ flex:1 1 auto; }
}
@media (max-width:400px){
    .card-grid{ grid-template-columns:1fr; }
}