/* ====== CSS变量体系 - Linear Aesthetic 深色精密主题 ====== */
:root{
  /* 深色基底 - 更纯净的近黑色 */
  --bg:#0a0b10;--bg2:#10111a;--surface:#14151f;--surface-h:#1a1b28;
  /* 微边框 - Linear Aesthetic 核心特征 */
  --border:rgba(255,255,255,.07);--border-l:rgba(255,255,255,.04);
  /* 文字层次 - 更高对比度 */
  --text:#ededf0;--text2:#a1a1aa;--text3:#63637a;
  /* 品牌色 - 琥珀橙 + 微光晕 */
  --brand:#f0963a;--brand-l:rgba(240,150,58,.10);--brand-d:#d47e28;
  /* 强调色 - 靛蓝偏移 */
  --accent:#38bdf8;--accent-l:rgba(56,189,248,.07);--accent-d:#0ea5e9;
  /* 紫色 - 薰衣草 */
  --purple:#a78bfa;--purple-l:rgba(167,139,250,.07);
  /* 语义色 */
  --success:#34d399;--success-l:rgba(52,211,153,.07);
  --warning:#fbbf24;--warning-l:rgba(251,191,36,.07);
  --danger:#f87171;--danger-l:rgba(248,113,113,.07);
  /* 辅助色 */
  --info:#60a5fa;--info-l:rgba(96,165,250,.07);
  --frost:#67e8f9;--frost-l:rgba(103,232,249,.07);
  --sand:#f59e0b;--sand-l:rgba(245,158,11,.07);
  --graybrown:#94a3b8;
  /* 磨砂底 */
  --frost-warm:rgba(14,15,22,.85);--frost-cool:rgba(10,11,16,.90);
  /* 圆角 - 更精致的微圆角 */
  --r:3px;--rm:4px;--rl:6px;
  /* 阴影 - 更有层次的深度 */
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 4px 16px rgba(0,0,0,.5);
  --shadow-l:0 16px 48px rgba(0,0,0,.6);
  --glow:0 0 32px rgba(240,150,58,.12);
  /* 过渡 - 更干脆的expo-out */
  --tf:.12s cubic-bezier(.22,1,.36,1);--tn:.2s cubic-bezier(.22,1,.36,1);--ts:.3s cubic-bezier(.22,1,.36,1);
}
/* ====== 浅色模式 - 米系配色 + 磨砂毛玻璃 ====== */
:root[data-theme="light"]{
  --bg:#f5f0e8;--bg2:#ede7db;--surface:rgba(255,252,245,.72);--surface-h:rgba(255,248,235,.82);
  --border:rgba(0,0,0,.08);--border-l:rgba(0,0,0,.04);
  --text:#2c2416;--text2:#6b5d4a;--text3:#a0917e;
  --brand:#d47e28;--brand-l:rgba(212,126,40,.08);--brand-d:#b86a1a;
  --accent:#1a8fd4;--accent-l:rgba(26,143,212,.06);--accent-d:#1578b5;
  --purple:#7c5cbf;--purple-l:rgba(124,92,191,.06);
  --success:#1a9e6e;--success-l:rgba(26,158,110,.06);
  --warning:#c99510;--warning-l:rgba(201,149,16,.06);
  --danger:#d44040;--danger-l:rgba(212,64,64,.06);
  --info:#3b7dd8;--info-l:rgba(59,125,216,.06);
  --frost:#1a9e9e;--frost-l:rgba(26,158,158,.06);
  --sand:#c99510;--sand-l:rgba(201,149,16,.06);
  --graybrown:#8a7b68;
  --frost-warm:rgba(245,240,232,.78);--frost-cool:rgba(237,231,219,.85);
  --shadow:0 1px 3px rgba(44,36,22,.08);
  --shadow-m:0 4px 16px rgba(44,36,22,.10);
  --shadow-l:0 16px 48px rgba(44,36,22,.14);
  --glow:0 0 24px rgba(212,126,40,.08);
}
:root[data-theme="light"] .titlebar{background:rgba(245,240,232,.82);border-bottom-color:rgba(0,0,0,.06)}
:root[data-theme="light"] .sidebar{background:rgba(245,240,232,.78)}
:root[data-theme="light"] .statusbar{background:rgba(245,240,232,.82);border-top-color:rgba(0,0,0,.04)}
:root[data-theme="light"] .mol-list{background:rgba(255,252,245,.65)}
:root[data-theme="light"] .mol-center{background:radial-gradient(ellipse at 40% 40%,#f8f4ec 0%,#f2ede3 50%,#f5f0e8 100%)}
:root[data-theme="light"] .mol-info{background:rgba(255,252,245,.65)}
:root[data-theme="light"] .mol-btn{background:rgba(255,252,245,.75)}
:root[data-theme="light"] .mol-view-tabs{background:rgba(255,252,245,.82)}
:root[data-theme="light"] .mol-3d-row{background:rgba(255,252,245,.82)}
:root[data-theme="light"] .ec-panel{background:rgba(255,252,245,.85)}
:root[data-theme="light"] .fg-card{background:rgba(255,252,245,.65)}
:root[data-theme="light"] .rx-eq,:root[data-theme="light"] .rx-note{background:rgba(255,252,245,.65)}
:root[data-theme="light"] .kf-branch-head{background:rgba(255,252,245,.65)}
:root[data-theme="light"] .kf-branch-body{background:rgba(255,252,245,.55)}
:root[data-theme="light"] .modal{background:rgba(255,252,245,.88)}
:root[data-theme="light"] .modal-overlay{background:rgba(245,240,232,.55)}
:root[data-theme="light"] .loading-overlay{background:rgba(245,240,232,.78)}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12)}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:var(--brand)}
:root[data-theme="light"] .sb-item:hover{background:rgba(0,0,0,.03)}
:root[data-theme="light"] .mol-item:hover{background:rgba(0,0,0,.03)}
:root[data-theme="light"] .mol-cat-head:hover{background:rgba(0,0,0,.03)}
:root[data-theme="light"] .rx-item:hover{background:rgba(0,0,0,.03)}
:root[data-theme="light"] .note-entry:hover{background:rgba(0,0,0,.03)}
:root[data-theme="light"] .kf-leaf:hover{background:rgba(0,0,0,.02)}
:root[data-theme="light"] .tb:hover{background:rgba(0,0,0,.05)}
:root[data-theme="light"] .mol-view-tab:hover{background:rgba(0,0,0,.03)}
:root[data-theme="light"] .fg-card::after{background:linear-gradient(105deg,transparent 40%,rgba(0,0,0,.01) 45%,rgba(0,0,0,.02) 50%,rgba(0,0,0,.01) 55%,transparent 60%);background-size:200% 100%}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100vh;-webkit-user-select:none;user-select:none;letter-spacing:-.01em}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px;transition:background .2s}::-webkit-scrollbar-thumb:hover{background:var(--brand)}

/* ====== 全局基础样式 ====== */
/* 标题栏 - 更紧凑精密 */
.titlebar{height:40px;background:rgba(10,11,16,.94);backdrop-filter:blur(20px);display:flex;align-items:center;padding:0 6px 0 16px;border-bottom:1px solid var(--border);position:relative;z-index:100;box-shadow:0 1px 0 rgba(255,255,255,.02)}
.titlebar-icon{width:18px;height:18px;margin-right:10px;flex-shrink:0}
.titlebar-icon svg{width:100%;height:100%}
.titlebar-text{font-size:12px;font-weight:500;color:var(--text2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.titlebar-controls{display:flex}
.tb{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:11px;transition:all var(--tf);border-radius:var(--r)}
.tb:hover{background:rgba(255,255,255,.05);color:var(--text)}.tb.close:hover{background:var(--danger);color:#fff}

/* ====== 主布局 ====== */
.main{display:flex;height:calc(100vh - 40px - 26px)}

/* ====== 侧边栏 - Linear Aesthetic 精密导航 ====== */
.sidebar{width:200px;min-width:200px;background:rgba(10,11,16,.96);backdrop-filter:blur(16px);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
.sb-section{padding:12px 6px 4px}
.sb-title{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);padding:0 10px;margin-bottom:4px}
.sb-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--rm);cursor:pointer;font-size:12px;font-weight:400;color:var(--text2);transition:all var(--tf);position:relative}
.sb-item:hover{background:rgba(255,255,255,.03);color:var(--text)}
.sb-item.active{background:linear-gradient(90deg,var(--brand-l),rgba(240,150,58,.03));color:var(--brand);font-weight:600}
.sb-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:16px;background:var(--brand);border-radius:0 2px 2px 0;box-shadow:0 0 8px rgba(240,150,58,.3)}
.sb-icon{width:15px;height:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sb-icon svg{width:13px;height:13px}
.sb-badge{margin-left:auto;font-size:9px;font-weight:600;background:linear-gradient(135deg,var(--brand-d),var(--brand));color:#fff;padding:1px 6px;border-radius:8px;line-height:1.4}

/* 内容区 */
.content{flex:1;overflow:hidden;background:var(--bg);position:relative}
.module{width:100%;height:100%;display:none;flex-direction:column;opacity:0;transition:opacity .3s ease,transform .3s ease}.module.active{display:flex;opacity:1}

/* ====== 状态栏 - 更精密 ====== */
.statusbar{height:26px;background:rgba(10,11,16,.92);border-top:1px solid var(--border-l);display:flex;align-items:center;padding:0 14px;font-size:10px;color:var(--text3);gap:14px}
.st-dot{width:5px;height:5px;border-radius:50%;background:var(--success);flex-shrink:0;box-shadow:0 0 4px rgba(52,211,153,.3)}
.st-item{display:flex;align-items:center;gap:4px}

/* ====== 分子结构模块样式 ====== */
.mol-layout{display:flex;height:100%}
.mol-list{width:200px;min-width:200px;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface)}
.mol-list-head{padding:10px;border-bottom:1px solid var(--border-l)}
.mol-search{width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:var(--rm);background:var(--bg2);font-family:inherit;font-size:11px;color:var(--text);outline:none;transition:all var(--tf)}
.mol-search:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-l)}
.mol-list-body{flex:1;overflow-y:auto;padding:3px}
.mol-cat{font-size:9px;font-weight:600;color:var(--text3);padding:8px 8px 3px;text-transform:uppercase;letter-spacing:.08em}
.mol-item-formula{font-size:10px;color:var(--text3);font-weight:400}
.mol-item.active .mol-item-formula{color:var(--brand)}
.mol-cat-group{margin-bottom:0}
.mol-cat-head{font-size:10px;font-weight:600;color:var(--text2);padding:7px 10px;cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none;border-radius:var(--rm);transition:all var(--tf);background:transparent;position:relative;overflow:hidden}
.mol-cat-head::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(240,150,58,.04),transparent 60%);opacity:0;transition:opacity var(--tf);pointer-events:none}
.mol-cat-head:hover{background:rgba(255,255,255,.03);color:var(--text)}
.mol-cat-head:hover::after{opacity:1}
.mol-cat-group.expanded .mol-cat-head{color:var(--brand);background:linear-gradient(90deg,rgba(240,150,58,.06),transparent 80%)}
.mol-cat-toggle{font-size:6px;transition:transform .25s cubic-bezier(.22,1,.36,1);display:inline-block;width:12px;text-align:center;opacity:.6}
.mol-cat-group.expanded .mol-cat-toggle{transform:rotate(90deg);opacity:1;color:var(--brand)}
.mol-cat-count{font-size:8px;background:linear-gradient(135deg,rgba(240,150,58,.12),rgba(167,139,250,.08));padding:1px 7px;border-radius:10px;color:var(--text3);margin-left:auto;font-weight:600;letter-spacing:.02em;border:1px solid rgba(255,255,255,.04)}
/* 折叠组内容区：用max-height + opacity实现缓动展开 */
.mol-cat-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s cubic-bezier(.22,1,.36,1),opacity .25s cubic-bezier(.22,1,.36,1);padding-left:4px;border-left:1px solid transparent;margin-left:10px}
.mol-cat-group.expanded .mol-cat-body{max-height:600px;opacity:1;border-left-color:var(--border-l)}
.mol-subcat-group{margin-left:4px;padding-left:0;position:relative}
.mol-subcat-group::before{content:'';position:absolute;left:-4px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--brand),transparent);opacity:0;transition:opacity var(--tf)}
.mol-subcat-group.expanded::before{opacity:.3}
.mol-subcat-head{font-size:9.5px;font-weight:500;color:var(--text3);padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:5px;user-select:none;transition:all var(--tf);border-radius:0 var(--r) var(--r) 0;position:relative}
.mol-subcat-head:hover{color:var(--accent);background:rgba(167,139,250,.06)}
.mol-subcat-group.expanded .mol-subcat-head{color:var(--accent)}
/* 子分类内容区 */
.mol-subcat-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.22,1,.36,1),opacity .2s cubic-bezier(.22,1,.36,1)}
.mol-subcat-group.expanded .mol-subcat-body{max-height:400px;opacity:1}
/* 分子项增强 */
.mol-item{padding:5px 10px 5px 14px;border-radius:var(--r);cursor:pointer;font-size:11px;color:var(--text2);transition:all var(--tf);display:flex;justify-content:space-between;align-items:center;position:relative}
.mol-item::before{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:var(--text3);opacity:.3;transition:all var(--tf)}
.mol-item:hover{background:rgba(255,255,255,.03);color:var(--text);transform:translateX(2px)}
.mol-item:hover::before{background:var(--brand);opacity:.6;box-shadow:0 0 4px rgba(240,150,58,.3)}
.mol-item.active{background:linear-gradient(90deg,var(--brand-l),rgba(240,150,58,.02));color:var(--brand);font-weight:600}
.mol-item.active::before{background:var(--brand);opacity:1;width:4px;height:4px;box-shadow:0 0 6px rgba(240,150,58,.4)}

.mol-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 40% 40%,#14151f 0%,#0d0e16 50%,#0a0b10 100%)}
.mol-canvas-wrap{position:relative}
.mol-canvas-wrap canvas{display:block}
.mol-label{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:10.5px;color:var(--text3);background:var(--surface);padding:4px 12px;border-radius:var(--rl);border:1px solid var(--border);box-shadow:var(--shadow-m);backdrop-filter:blur(10px)}
.mol-ctrls{position:absolute;bottom:14px;right:14px;display:flex;gap:3px}
.mol-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:var(--rm);background:rgba(14,15,22,.85);backdrop-filter:blur(10px);color:var(--text2);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all var(--tf);font-family:inherit;box-shadow:var(--shadow)}
.mol-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-l)}

/* 视图模式切换器 - 左下角合并底栏 */
.mol-bottom-bar{position:absolute;bottom:14px;left:14px;display:flex;flex-direction:column;gap:6px;z-index:10}
.mol-bottom-row{display:flex;align-items:center;gap:6px}
.mol-view-tabs{display:flex;gap:1px;background:rgba(14,15,22,.88);backdrop-filter:blur(16px);padding:2px;border-radius:var(--rm);border:1px solid var(--border);box-shadow:var(--shadow-m)}
:root[data-theme="light"] .mol-view-tabs{background:rgba(255,252,245,.82)}
.mol-view-tab{padding:5px 10px;border:none;border-radius:var(--r);background:transparent;color:var(--text3);cursor:pointer;font-size:10px;font-weight:500;font-family:inherit;transition:all var(--tf);white-space:nowrap;letter-spacing:.01em}
.mol-view-tab:hover{color:var(--text);background:rgba(255,255,255,.03)}
.mol-view-tab.active{background:linear-gradient(135deg,var(--brand-d),var(--accent-d));color:#fff;box-shadow:0 1px 6px rgba(240,150,58,.25)}
.mol-ctrls{display:flex;gap:3px}
.mol-3d-panel-inline{display:flex;gap:3px;background:rgba(14,15,22,.88);backdrop-filter:blur(16px);padding:3px 5px;border-radius:var(--rm);border:1px solid var(--border);box-shadow:var(--shadow-m)}
:root[data-theme="light"] .mol-3d-panel-inline{background:rgba(255,252,245,.82)}

/* 导览自动隐藏 - 只隐藏主导览sidebar */
.sidebar{transition:width .35s cubic-bezier(.22,1,.36,1),min-width .35s cubic-bezier(.22,1,.36,1),opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.sidebar.nav-hidden{width:0!important;min-width:0!important;opacity:0;transform:translateX(-10px);overflow:hidden;border-right-width:0}
/* 主内容区自动跟随flex布局 */
/* 导览唤回触发区 - 左侧边缘 */
.nav-trigger{position:fixed;left:0;top:0;width:16px;height:100%;z-index:90;cursor:e-resize}
.nav-trigger::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(240,150,58,.08),transparent);opacity:0;transition:opacity .2s}
.nav-trigger:hover::after{opacity:1}

/* 3D容器 */
.mol-3d-wrap{position:absolute;inset:0;display:none}
.mol-3d-wrap.active{display:block}
.mol-canvas-wrap-2d{position:relative}
.mol-canvas-wrap-2d.hidden{display:none}

/* 3D控制面板 - 已合并到底栏，保留按钮样式 */
.mol-3d-label{font-size:9.5px;color:var(--text3);font-weight:500;min-width:44px}
.mol-3d-btn{padding:3px 8px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text2);cursor:pointer;font-size:10px;font-family:inherit;transition:all var(--tf);box-shadow:var(--shadow)}
.mol-3d-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-l)}
.mol-3d-btn.active{background:linear-gradient(135deg,var(--brand-d),var(--accent-d));color:#fff;border-color:transparent;box-shadow:0 1px 6px rgba(240,150,58,.2)}
input[type="range"]{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--border),var(--border-l));border-radius:3px;outline:none;cursor:pointer;transition:all var(--tf)}
input[type="range"]:hover{background:linear-gradient(90deg,var(--brand-l),var(--border))}
input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:3px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent-d));cursor:pointer;box-shadow:0 1px 6px rgba(240,150,58,.25),0 0 0 2px var(--brand-l);margin-top:-5px;transition:all var(--tf)}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 10px rgba(240,150,58,.35),0 0 0 3px var(--brand-l)}
input[type="range"]::-moz-range-track{height:4px;background:linear-gradient(90deg,var(--border),var(--border-l));border-radius:3px}
input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent-d));cursor:pointer;border:none;box-shadow:0 1px 6px rgba(240,150,58,.25)}
input[type="range"]::-moz-range-thumb:hover{transform:scale(1.15)}
.mol-3d-slider{width:72px;height:4px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--border),var(--border-l));border-radius:3px;outline:none;cursor:pointer;transition:all var(--tf)}
.mol-3d-slider:hover{background:linear-gradient(90deg,var(--brand-l),var(--border))}
.mol-3d-slider::-webkit-slider-runnable-track{height:4px;border-radius:3px}
.mol-3d-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent-d));cursor:pointer;box-shadow:0 1px 6px rgba(240,150,58,.25),0 0 0 2px var(--brand-l);margin-top:-5px;transition:all var(--tf)}
.mol-3d-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 10px rgba(240,150,58,.35),0 0 0 3px var(--brand-l)}
.mol-3d-slider::-moz-range-track{height:4px;background:linear-gradient(90deg,var(--border),var(--border-l));border-radius:3px}
.mol-3d-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent-d));cursor:pointer;border:none;box-shadow:0 1px 6px rgba(240,150,58,.25)}
.mol-3d-slider::-moz-range-thumb:hover{transform:scale(1.15)}

/* 电子轨道面板 - 更精致 */
.ec-panel{position:absolute;top:12px;right:12px;background:rgba(14,15,22,.90);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--rm);padding:10px;box-shadow:var(--shadow-l);z-index:10;display:none;min-width:150px}
.ec-panel.active{display:block}
.ec-panel-title{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.ec-orbital-btns{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:6px}
.ec-orbital-btn{padding:2px 7px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text2);cursor:pointer;font-size:9.5px;font-family:inherit;transition:all var(--tf)}
.ec-orbital-btn:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-l)}
.ec-orbital-btn.active{background:linear-gradient(135deg,var(--purple),var(--accent-d));color:#fff;border-color:transparent;box-shadow:0 1px 5px rgba(167,139,250,.2)}
.ec-slider-row{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.ec-slider-label{font-size:9.5px;color:var(--text3);min-width:36px}

.mol-info{width:270px;min-width:270px;border-left:1px solid var(--border);overflow-y:auto;padding:0;background:var(--surface)}
.mol-info-head{padding:16px;border-bottom:1px solid var(--border-l);background:linear-gradient(180deg,var(--surface-h),transparent)}
.mol-info-name{font-size:16px;font-weight:700;color:var(--text);margin-bottom:2px;letter-spacing:-.01em}
.mol-info-formula{font-size:12px;color:var(--text2);margin-bottom:6px}
.mol-info-struct{font-size:11px;color:var(--brand);font-weight:500;background:linear-gradient(135deg,var(--brand-l),var(--purple-l));padding:3px 8px;border-radius:var(--r);display:inline-block;font-family:'Space Grotesk',monospace;border:1px solid rgba(240,150,58,.12)}
.mol-info-section{padding:12px 16px;border-bottom:1px solid var(--border-l)}
.mol-info-section:last-child{border-bottom:none}
.mol-info-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:6px}
.mol-info-row{display:flex;justify-content:space-between;padding:3px 0;font-size:11.5px}
.mol-info-row .k{color:var(--text2)}.mol-info-row .v{color:var(--text);font-weight:500}
.mol-info-list{list-style:none;padding:0}
.mol-info-list li{font-size:11.5px;color:var(--text2);padding:3px 0;padding-left:12px;position:relative;line-height:1.5}
.mol-info-list li::before{content:'';position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--brand));box-shadow:0 0 3px rgba(56,189,248,.2)}
.mol-info-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:11px;color:var(--text3)}

/* ====== 官能团模块样式 - Bento Grid ====== */
.fg-layout{padding:24px;overflow-y:auto;height:100%}
.fg-title{font-size:20px;font-weight:700;margin-bottom:3px;letter-spacing:-.02em}
.fg-subtitle{font-size:12px;color:var(--text2);margin-bottom:20px}
.fg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.fg-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:16px;cursor:pointer;transition:all var(--tn);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.fg-card:hover{border-color:rgba(240,150,58,.25);box-shadow:var(--shadow-m),0 0 20px rgba(240,150,58,.04);transform:translateY(-1px)}
.fg-card-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.fg-card-badge{font-size:8.5px;font-weight:600;padding:1px 7px;border-radius:var(--r);text-transform:uppercase;letter-spacing:.04em}
.fg-card-badge.org{background:rgba(52,211,153,.10);color:#34d399}
.fg-card-badge.hal{background:rgba(251,191,36,.10);color:#fbbf24}
.fg-card-badge.nit{background:rgba(96,165,250,.10);color:#60a5fa}
.fg-card-badge.oxy{background:rgba(248,113,113,.10);color:#f87171}
.fg-card-name{font-size:13px;font-weight:600}
.fg-card-id{font-size:10.5px;color:var(--text3);font-weight:500}
.fg-card-struct{font-size:16px;font-weight:700;color:var(--brand);margin-bottom:10px;padding:8px;background:linear-gradient(135deg,var(--brand-l),var(--purple-l));border-radius:var(--rm);text-align:center;font-family:'Space Grotesk',monospace;border:1px solid rgba(240,150,58,.08)}
.fg-card-desc{font-size:11px;color:var(--text2);line-height:1.6}
.fg-card-reactions{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-l)}
.fg-card-reactions span{display:inline-block;font-size:9.5px;color:var(--brand);background:var(--brand-l);padding:1px 6px;border-radius:var(--r);margin:1px 3px 1px 0;border:1px solid rgba(240,150,58,.10)}

/* ====== 反应模块样式 ====== */
.rx-layout{display:flex;height:100%}
.rx-list{width:200px;min-width:200px;border-right:1px solid var(--border);overflow-y:auto;padding:8px}
.rx-cat{font-size:9px;font-weight:600;color:var(--text3);padding:10px 8px 4px;text-transform:uppercase;letter-spacing:.08em}
.rx-item{padding:6px 10px;border-radius:var(--rm);cursor:pointer;font-size:11.5px;color:var(--text2);transition:all var(--tf)}
.rx-item:hover{background:rgba(255,255,255,.03);color:var(--text)}
.rx-item.active{background:linear-gradient(90deg,var(--brand-l),rgba(240,150,58,.02));color:var(--brand);font-weight:600}
.rx-detail{flex:1;overflow-y:auto;padding:28px 32px}
.rx-detail-title{font-size:18px;font-weight:700;margin-bottom:3px;letter-spacing:-.01em}
.rx-detail-en{font-size:11px;color:var(--text3);margin-bottom:16px;font-weight:400}
.rx-eq{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:14px 18px;margin-bottom:16px;font-size:14px;font-weight:500;line-height:2;letter-spacing:.02em;box-shadow:var(--shadow-m)}
.rx-eq .arrow{color:var(--brand);margin:0 6px;font-weight:700;text-shadow:0 0 6px rgba(240,150,58,.2)}
.rx-eq .cond{font-size:10.5px;color:var(--text3);font-weight:400;display:block;text-align:center;margin:-3px 0}
.rx-note{font-size:12px;color:var(--text2);line-height:1.8;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rm);border-left:2px solid var(--brand);box-shadow:var(--shadow-m)}
.rx-note strong{color:var(--text);font-weight:600}
.rx-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:11px;color:var(--text3)}

/* ====== 知识框架模块样式 ====== */
.kf-layout{padding:28px 32px;overflow-y:auto;height:100%}
.kf-title{font-size:20px;font-weight:700;margin-bottom:3px;letter-spacing:-.02em}
.kf-subtitle{font-size:12px;color:var(--text2);margin-bottom:22px}
.kf-tree{padding-left:0}
.kf-branch{margin-bottom:6px}
.kf-branch-head{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rm);cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text);transition:all var(--tf);box-shadow:var(--shadow)}
.kf-branch-head:hover{border-color:rgba(240,150,58,.25);background:var(--surface-h)}
.kf-branch-head.open{border-color:var(--brand);border-radius:var(--rm) var(--rm) 0 0;background:var(--brand-l);color:var(--brand)}
.kf-branch-arrow{font-size:9px;color:var(--text3);transition:transform var(--tn);margin-left:auto}
.kf-branch-head.open .kf-branch-arrow{transform:rotate(90deg)}
.kf-branch-body{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--rm) var(--rm);background:var(--surface);overflow:hidden;max-height:0;transition:max-height var(--ts)}
.kf-branch-body.open{max-height:800px}
.kf-leaf{padding:7px 12px 7px 32px;font-size:11.5px;color:var(--text2);display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--border-l);transition:background var(--tf)}
.kf-leaf:last-child{border-bottom:none}
.kf-leaf:hover{background:rgba(255,255,255,.02)}
.kf-leaf-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 3px rgba(56,189,248,.2)}
.kf-leaf-tag{margin-left:auto;font-size:8.5px;font-weight:500;padding:1px 6px;border-radius:var(--r);color:var(--text3);background:var(--bg2)}

/* ====== 笔记模块样式 ====== */
.note-layout{display:flex;height:100%}
.note-list{width:200px;min-width:200px;border-right:1px solid var(--border);display:flex;flex-direction:column}
.note-list-head{padding:10px;border-bottom:1px solid var(--border-l);display:flex;justify-content:space-between;align-items:center}
.note-list-head span{font-size:11px;font-weight:600;color:var(--text2)}
.note-add{width:26px;height:26px;border:1px solid var(--border);border-radius:var(--rm);background:var(--surface);color:var(--text2);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all var(--tf);font-family:inherit}
.note-add:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-l)}
.note-items{flex:1;overflow-y:auto;padding:3px}
.note-entry{padding:7px;border-radius:var(--rm);cursor:pointer;margin-bottom:1px;transition:all var(--tf)}
.note-entry:hover{background:rgba(255,255,255,.03)}
.note-entry.active{background:linear-gradient(90deg,var(--brand-l),rgba(240,150,58,.02))}
.note-entry-title{font-size:11px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-entry-date{font-size:9.5px;color:var(--text3);margin-top:1px}
.note-entry-del{float:right;width:16px;height:16px;border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:10px;border-radius:3px;display:none;align-items:center;justify-content:center}
.note-entry:hover .note-entry-del{display:flex}
.note-entry-del:hover{background:var(--danger);color:#fff}
.note-editor{flex:1;display:flex;flex-direction:column}
.note-editor-head{padding:12px 16px;border-bottom:1px solid var(--border-l)}
.note-editor-head input{width:100%;border:none;background:transparent;font-family:inherit;font-size:15px;font-weight:600;color:var(--text);outline:none}
.note-editor-body{flex:1;padding:0}
.note-editor-body textarea{width:100%;height:100%;border:none;background:transparent;font-family:inherit;font-size:12px;color:var(--text2);line-height:1.8;padding:16px;outline:none;resize:none}
.note-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:11px;color:var(--text3)}

/* ====== 弹窗和按钮样式 ====== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--tn);backdrop-filter:blur(10px)}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 32px rgba(240,150,58,.03);width:380px;max-width:90vw;overflow:hidden;transform:translateY(8px) scale(.98);transition:transform var(--tn)}
.modal-overlay.show .modal{transform:translateY(0) scale(1)}
.modal-head{padding:14px 18px;border-bottom:1px solid var(--border-l);display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-size:14px;font-weight:600}
.modal-close{width:24px;height:24px;border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:13px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;transition:all var(--tf)}
.modal-close:hover{background:rgba(255,255,255,.05)}
.modal-body{padding:18px}
.modal-foot{padding:12px 18px;border-top:1px solid var(--border-l);display:flex;justify-content:flex-end;gap:6px}
.btn{padding:6px 14px;border-radius:var(--rm);font-family:inherit;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:all var(--tf)}
.btn:hover{background:var(--surface-h)}
.btn-primary{background:linear-gradient(135deg,var(--brand-d),var(--accent-d));color:#fff;border-color:transparent;box-shadow:0 1px 6px rgba(240,150,58,.2)}
.btn-primary:hover{box-shadow:0 2px 10px rgba(240,150,58,.3);transform:translateY(-1px)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}

/* ====== 交互反馈增强 ====== */
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn var(--tn) cubic-bezier(.22,1,.36,1) both}

/* 模块切换动效 - 更干脆 */
@keyframes moduleIn{from{opacity:0;transform:translateX(8px) scale(.99)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes moduleOut{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(-8px) scale(.99)}}
.module{transition:opacity .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1)}
.module.entering{animation:moduleIn .3s cubic-bezier(.22,1,.36,1) both}
.module.leaving{animation:moduleOut .15s cubic-bezier(.22,1,.36,1) both}

/* 侧边栏切换动效 */
@keyframes sbItemIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}
.sb-item{transition:all var(--tf),transform .2s cubic-bezier(.22,1,.36,1)}
.sb-item.switching{animation:sbItemIn .25s cubic-bezier(.22,1,.36,1) both}

/* 视图模式切换动效 */
@keyframes viewFadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes viewFadeOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}
.mol-canvas-wrap-2d,.mol-3d-wrap{transition:opacity .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1)}
.view-entering{animation:viewFadeIn .3s cubic-bezier(.22,1,.36,1) both}
.view-leaving{animation:viewFadeOut .15s ease both}

/* 分子列表选择动效 */
@keyframes molSelect{0%{background:var(--brand-l);transform:scale(1.01)}100%{transform:scale(1)}}
.mol-item.selecting{animation:molSelect .25s cubic-bezier(.22,1,.36,1) both}

/* 信息面板切换动效 */
@keyframes infoSlideIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.mol-info{transition:opacity .25s cubic-bezier(.22,1,.36,1)}
.mol-info.updating{animation:infoSlideIn .3s cubic-bezier(.22,1,.36,1) both}

/* 加载动效 */
@keyframes loadPulse{0%,100%{opacity:.4;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes loadSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes loadDots{0%,20%{opacity:.2}40%{opacity:1}60%,100%{opacity:.2}}
.loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--frost-warm);backdrop-filter:blur(8px);z-index:50;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.22,1,.36,1)}
.loading-overlay.active{opacity:1;pointer-events:auto}
.loading-spinner{width:32px;height:32px;border:2px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:loadSpin .7s linear infinite}
.loading-text{margin-top:10px;font-size:11px;color:var(--text2);letter-spacing:.04em}
.loading-dots{display:inline-block}
.loading-dots span{animation:loadDots 1.4s ease infinite;display:inline-block}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}

/* 卡片悬浮动效 - Linear Aesthetic: 微位移 + shimmer */
.fg-card{transition:all var(--tn),transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease}
.fg-card:hover{transform:translateY(-2px) scale(1.005)}
.fg-card::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.02) 45%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.02) 55%,transparent 60%);background-size:200% 100%;opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}
.fg-card:hover::after{opacity:1;animation:shimmer 1.5s ease infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 知识框架展开动效 */
.kf-branch-body{transition:max-height .35s cubic-bezier(.22,1,.36,1),opacity .25s ease}
.kf-branch-head{transition:all var(--tf),transform .15s ease}

/* 笔记切换动效 */
@keyframes noteIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.note-editor{transition:opacity .2s cubic-bezier(.22,1,.36,1)}
.note-editor.updating{animation:noteIn .25s cubic-bezier(.22,1,.36,1) both}

/* 反应详情切换动效 */
@keyframes rxIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
.rx-detail{transition:opacity .2s cubic-bezier(.22,1,.36,1)}
.rx-detail.updating{animation:rxIn .25s cubic-bezier(.22,1,.36,1) both}

/* 侧边栏活跃指示器呼吸动效 */
@keyframes breathe{0%,100%{box-shadow:0 0 6px rgba(240,150,58,.2)}50%{box-shadow:0 0 10px rgba(240,150,58,.35)}}
.sb-item.active::before{animation:breathe 2.5s ease-in-out infinite}

/* ====== 响应式适配 ====== */
@media(max-width:900px){
  .sidebar{width:170px;min-width:170px}
  .mol-list,.rx-list,.note-list{width:170px;min-width:170px}
  .mol-info{width:220px;min-width:220px}
  .fg-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media(max-width:680px){
  .sidebar{width:0;min-width:0;overflow:hidden;border:none}
  .mol-list,.rx-list,.note-list{width:0;min-width:0;overflow:hidden;border:none}
  .mol-info{width:180px;min-width:180px}
  .fg-layout{padding:16px}
  .fg-grid{grid-template-columns:1fr}
  .rx-detail{padding:16px}
  .kf-layout{padding:16px}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}