/* =========================================================================
   DFUIUX 统一设计系统（以「智能PPT工具」的 slides.css 为对齐标准）
   深色玻璃态 + 紫蓝渐变 + 黑色/高级灰/高级白三主题 + Inter 字体
   供门户首页及后续子应用复用。子应用（PPT / 思维导图 / 智能课表）已内联等价的 token 与组件类。
   ========================================================================= */
:root{
  --bg-primary:#0b0b12;
  --bg-secondary:#12121e;
  --gradient-main:linear-gradient(135deg,#7c3aed 0%,#3b82f6 100%);
  --bg-card:rgba(255,255,255,0.04);
  --border-glass:rgba(255,255,255,0.08);
  --text-primary:#f1f3f9;
  --text-secondary:#b6bcd9;
  --accent-1:#7c3aed;
  --accent-2:#3b82f6;
  --accent-1-rgb:124,58,237;
  --accent-2-rgb:59,130,246;
  --accent-soft:#a78bfa;
  --code-text:#d6dbf5;
  --input-bg:rgba(0,0,0,0.3);
  --bg-panel:rgba(18,18,30,0.96);
  --bg-overlay:rgba(5,5,10,0.96);
  --bg-tooltip:#161624;
  --header-bg:linear-gradient(180deg,rgba(18,26,41,.72),rgba(18,26,41,.44));
  --header-glow:inset 0 1px 0 rgba(255,255,255,.08);
  --scrollbar-track:rgba(255,255,255,0.06);
  --dot-inactive:rgba(255,255,255,0.22);
  --subtle:rgba(255,255,255,0.3);
  --glow-opacity:0.32;
  --radius-lg:28px;
  --radius-sm:16px;
  --radius-pill:100px;
  --font:'Inter',system-ui,"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
}
[data-theme="gray"]{
  --bg-primary:#e9ebee;
  --bg-secondary:#f5f6f8;
  --gradient-main:linear-gradient(135deg,#5b6672 0%,#9aa4af 100%);
  --bg-card:rgba(255,255,255,0.6);
  --border-glass:rgba(15,23,32,0.10);
  --text-primary:#1f242e;
  --text-secondary:#5a6472;
  --accent-1:#4b5563;
  --accent-2:#9aa4af;
  --accent-1-rgb:75,85,99;
  --accent-2-rgb:154,164,175;
  --accent-soft:#6b7280;
  --code-text:#2a2f3a;
  --input-bg:rgba(0,0,0,0.05);
  --bg-panel:rgba(245,246,248,0.97);
  --bg-overlay:rgba(18,22,28,0.72);
  --bg-tooltip:#ffffff;
  --header-bg:linear-gradient(180deg,rgba(245,246,248,.92),rgba(233,235,238,.62));
  --header-glow:inset 0 1px 0 rgba(255,255,255,.6);
  --scrollbar-track:rgba(0,0,0,0.08);
  --dot-inactive:rgba(0,0,0,0.18);
  --subtle:rgba(0,0,0,0.28);
  --glow-opacity:0.16;
}
[data-theme="white"]{
  --bg-primary:#fbfbfd;
  --bg-secondary:#ffffff;
  --gradient-main:linear-gradient(135deg,#7c3aed 0%,#3b82f6 100%);
  --bg-card:rgba(15,23,42,0.021);
  --border-glass:rgba(15,23,42,0.08);
  --text-primary:#171a26;
  --text-secondary:#5c6372;
  --accent-1:#7c3aed;
  --accent-2:#3b82f6;
  --accent-1-rgb:124,58,237;
  --accent-2-rgb:59,130,246;
  --accent-soft:#7c3aed;
  --code-text:#1f2430;
  --input-bg:rgba(0,0,0,0.04);
  --bg-panel:rgba(255,255,255,0.97);
  --bg-overlay:rgba(10,12,20,0.6);
  --bg-tooltip:#ffffff;
  --header-bg:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  --header-glow:inset 0 1px 0 rgba(255,255,255,.6);
  --scrollbar-track:rgba(0,0,0,0.08);
  --dot-inactive:rgba(0,0,0,0.18);
  --subtle:rgba(0,0,0,0.28);
  --glow-opacity:0.18;
}
*{margin:0;padding:0;box-sizing:border-box;}
*{scrollbar-width:none;-ms-overflow-style:none;}
*::-webkit-scrollbar{width:0;height:0;display:none;}
html,body{height:100%;}
body{
  font-family:var(--font);
  background:var(--bg-primary);
  color:var(--text-primary);
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(130px);opacity:var(--glow-opacity);z-index:-1;pointer-events:none;}
body::before{width:560px;height:560px;background:var(--accent-1);top:-220px;left:-160px;}
body::after{width:560px;height:560px;background:var(--accent-2);bottom:-220px;right:-160px;}
button{font-family:var(--font);cursor:pointer;}
input,textarea,select{font-family:var(--font);}
.hidden{display:none!important;}

/* 图标（Feather 内联 SVG，stroke=currentColor 跟随主题配色） */
.ic{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0;}
.ic svg{display:block;}

/* ===== 顶部应用栏（系列统一顶栏） ===== */
.app-header{
  position:fixed;top:0;left:0;right:0;z-index:30;
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 28px;border-bottom:1px solid var(--border-glass);
  background:var(--header-bg);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--header-glow);
}
[data-theme="gray"] .app-header,[data-theme="white"] .app-header{border-bottom-color:rgba(15,23,42,.1);}
.app-header-actions{display:flex;align-items:center;gap:8px;}
.app-brand{display:flex;align-items:center;gap:14px;min-width:0;}
.app-logo{flex:none;width:42px;height:42px;border-radius:12px;background:var(--gradient-main);display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;}
.app-brand-text{min-width:0;}
.app-name{font-size:17px;font-weight:800;letter-spacing:.01em;}
.app-tagline{font-size:12px;color:var(--text-secondary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ===== 胶囊按钮（系列统一） ===== */
.toolbar-btn{
  height:40px;padding:0 16px;border-radius:var(--radius-pill);
  border:1px solid var(--border-glass);background:var(--bg-card);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--text-primary);cursor:pointer;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;transition:all .3s ease;font-family:inherit;
  text-decoration:none;
}
.toolbar-btn:hover{background:var(--gradient-main);border-color:transparent;color:#fff;}
.toolbar-btn.primary{border-color:rgba(var(--accent-1-rgb),.6);}
.toolbar-btn.active{background:var(--gradient-main);border-color:transparent;color:#fff;}
.toolbar-btn.danger:hover{background:linear-gradient(135deg,#ef4444 0%,#f97316 100%);color:#fff;}
.toolbar-btn.danger-solid{background:linear-gradient(135deg,#ef4444 0%,#f97316 100%);color:#fff;border-color:transparent;}
.toolbar-btn.danger-solid:hover{background:linear-gradient(135deg,#dc2626 0%,#ea580c 100%);color:#fff;border-color:transparent;}
.toolbar-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ===== 主题切换按钮（深色显示太阳、浅色显示月亮，点击循环切换） ===== */
.theme-btn .ic-sun{display:inline-flex;}
.theme-btn .ic-moon{display:none;}
[data-theme="white"] .theme-btn .ic-sun,[data-theme="gray"] .theme-btn .ic-sun{display:none;}
[data-theme="white"] .theme-btn .ic-moon,[data-theme="gray"] .theme-btn .ic-moon{display:inline-flex;}

/* ===== 圆形图标按钮（系列统一） ===== */
.icon-btn{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border-glass);background:var(--bg-card);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s ease;font-size:15px;font-weight:700;
}
.icon-btn:hover{background:var(--gradient-main);border-color:transparent;color:#fff;}

/* ===== 首页（工作台）布局 ===== */
.home-view{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;}
.app-main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:32px 28px 48px;}
.app-page-head{margin-bottom:22px;}
.app-title{font-size:26px;font-weight:800;margin-bottom:6px;}
.app-sub{color:var(--text-secondary);font-size:15px;}

/* ===== 文件/项目表格（Figma 式最近文件列表） ===== */
.project-table{position:relative;border:1px solid var(--border-glass);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card);}
/* 玻璃模糊放到独立伪元素层：避免「backdrop-filter + overflow:hidden + 动态插入的行」在部分 GPU 下首次布局/新增内容不重绘，
   导致最近文件前几行被“隐藏”，需 hover/滚动触发重绘才出现（内容不再位于 backdrop-filter 合成层内）。 */
.project-table::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none;}
.project-table>*{position:relative;z-index:1;}
.project-table-head{display:grid;grid-template-columns:minmax(0,1fr) 110px 180px 200px;gap:16px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--border-glass);color:var(--text-secondary);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.project-list{display:flex;flex-direction:column;}
.project-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 180px 200px;gap:16px;align-items:center;padding:15px 20px;border-bottom:1px solid var(--border-glass);transition:background .2s ease;cursor:pointer;outline:none;}
.project-row:last-child{border-bottom:none;}
.project-row:hover{background:rgba(var(--accent-1-rgb),.07);}
[data-theme="white"] .project-row:hover{background:rgba(var(--accent-1-rgb),.035);}
.project-row.kb-active{background:rgba(var(--accent-1-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--accent-1-rgb),.55);}
.project-name-cell{display:flex;align-items:center;gap:14px;min-width:0;}
.project-icon{flex:none;width:42px;height:42px;border-radius:12px;background:var(--gradient-main);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;}
.project-info{min-width:0;}
.project-name{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.project-meta{font-size:13px;color:var(--text-secondary);}
.project-type{font-size:12px;font-weight:600;color:var(--text-secondary);}
.project-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.project-actions .toolbar-btn{padding:0 14px;height:36px;font-size:13px;}
.project-empty{color:var(--text-secondary);font-size:14px;text-align:center;padding:36px 20px;}
.project-section-title{display:flex;align-items:center;gap:8px;padding:11px 20px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--text-secondary);border-bottom:1px solid var(--border-glass);background:rgba(var(--accent-1-rgb),.05);}
.fav-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-glass);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease;}
.fav-btn:hover{border-color:rgba(var(--accent-1-rgb),.6);color:var(--accent-soft);}
.fav-btn.on{color:#fbbf24;border-color:rgba(251,191,36,.6);}
.fav-btn.on svg{fill:#fbbf24;}

/* ===== 主题切换选项 ===== */
.theme-options{display:flex;gap:12px;margin-top:6px;}
.theme-option{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-glass);background:var(--bg-card);color:var(--text-primary);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;transition:all .2s ease;}
.theme-option:hover{border-color:rgba(var(--accent-1-rgb),.5);transform:translateY(-2px);}
.theme-option.active{border-color:rgba(var(--accent-1-rgb),.8);box-shadow:0 0 0 2px rgba(var(--accent-1-rgb),.25);}
.theme-swatch{width:100%;height:46px;border-radius:10px;border:1px solid var(--border-glass);}
.theme-swatch--dark{background:linear-gradient(135deg,#0b0b12 0%,#12121e 100%);}
.theme-swatch--gray{background:linear-gradient(135deg,#e9ebee 0%,#cbd0d6 100%);}
.theme-swatch--white{background:linear-gradient(135deg,#ffffff 0%,#eef0f6 100%);}

/* ===== 弹窗 ===== */
.modal-overlay{position:fixed;inset:0;z-index:80;background:var(--bg-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;}
.modal-overlay.show{display:flex;}
.modal{width:min(440px,calc(100vw - 40px));background:var(--bg-secondary);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:0 24px 70px rgba(0,0,0,.55);overflow:hidden;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-glass);}
.modal-title{font-size:17px;font-weight:700;}
.modal-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-glass);background:var(--bg-card);color:var(--text-primary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;}
.modal-close:hover{background:var(--gradient-main);border-color:transparent;color:#fff;}
.modal-body{padding:20px;}
.modal-desc{color:var(--text-secondary);font-size:14px;line-height:1.6;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid var(--border-glass);}

/* Toast */
.toast{position:fixed;left:50%;bottom:36px;transform:translate(-50%,20px);z-index:200;padding:12px 22px;border-radius:var(--radius-pill);background:var(--bg-tooltip);border:1px solid var(--border-glass);box-shadow:0 12px 40px rgba(0,0,0,.5);color:var(--text-primary);font-size:14px;opacity:0;visibility:hidden;transition:all .3s ease;pointer-events:none;}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}
.toast.error{border-color:rgba(239,68,68,.5);}

/* ===== 键盘可达性：focus-visible 四态（hover/focus/active/disabled） ===== */
.toolbar-btn:focus-visible,.icon-btn:focus-visible,.fav-btn:focus-visible,.modal-close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--accent-1-rgb),.35);}
.toolbar-btn:active,.icon-btn:active{transform:translateY(1px);}
.project-row:focus-visible{outline:none;background:rgba(var(--accent-1-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--accent-1-rgb),.55);}

/* ===== 帮助面板（右下角缩放展开，快捷键列表） ===== */
.help-overlay{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .22s ease;}
.help-overlay.show{opacity:1;visibility:visible;}
.help-panel{
  position:fixed;right:20px;bottom:20px;z-index:80;width:min(360px,calc(100vw - 40px));
  background:var(--bg-secondary);border:1px solid var(--border-glass);border-radius:var(--radius-sm);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  transform:translateY(12px) scale(.96);transform-origin:100% 100%;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
}
.help-panel.show{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition:opacity .22s ease,transform .22s ease,visibility 0s;}
.help-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--border-glass);}
.help-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;}
.help-title .ic{color:var(--accent-soft);}
.help-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:14px;}
.help-group-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-secondary);margin-bottom:8px;letter-spacing:.04em;}
.help-tag{font-size:11px;font-weight:700;padding:2px 9px;border-radius:var(--radius-pill);background:var(--bg-card);border:1px solid var(--border-glass);color:var(--text-secondary);letter-spacing:.06em;}
.help-row{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px;color:var(--text-secondary);line-height:1.5;}
.help-row .kbd-group{flex:none;display:flex;align-items:center;gap:4px;}
kbd{display:inline-block;padding:2px 7px;border-radius:6px;background:var(--bg-card);border:1px solid var(--border-glass);font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;color:var(--text-primary);white-space:nowrap;}

/* ===== 空状态（大图标 + 说明 + CTA） ===== */
.empty-state{text-align:center;padding:56px 20px;color:var(--text-secondary);}
.empty-state .big{font-size:46px;opacity:.45;margin-bottom:14px;color:var(--accent-soft);}
.empty-state .big .ic{display:inline-flex;}
.empty-state .title{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:6px;}
.empty-state .desc{font-size:14px;line-height:1.6;margin-bottom:20px;}

/* ===== 小屏（平板 / 手机）顶栏与内容自适应 ===== */
@media (max-width:768px){
  .app-header{padding:11px 16px;gap:10px;}
  .app-logo{width:38px;height:38px;border-radius:11px;font-size:17px;}
  .app-logo .ic svg{width:18px;height:18px;}
  .app-brand{gap:10px;}
  .app-name{font-size:15px;}
  .app-tagline{display:none;}
  .toolbar-btn{height:38px;padding:0 13px;font-size:12.5px;}
  .app-main{padding:22px 16px 40px;}
  .app-page-head{margin-bottom:16px;}
  .app-title{font-size:22px;}
  .app-sub{font-size:14px;}
  .project-table-head,.project-row{grid-template-columns:minmax(0,1fr) 120px auto;gap:10px;}
  .project-table-head .col-type,.project-row .project-type{display:none;}
  .project-section-title,.project-empty{padding-left:14px;padding-right:14px;}
  .modal{width:calc(100vw - 28px);}
}

/* 手机（<=640px）：顶栏按钮转「图标态」（隐藏文字、方形），操作区可横向滑动 */
@media (max-width:640px){
  .app-header{padding:10px 12px;gap:8px;}
  .app-brand{gap:9px;flex:1 1 auto;overflow:hidden;}
  .app-brand-text{flex:1 1 auto;min-width:0;}
  .app-name{font-size:14.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .app-logo{width:34px;height:34px;border-radius:10px;}
  .app-logo .ic svg{width:17px;height:17px;}
  .app-header-actions{flex:0 0 auto;gap:6px;}
  .app-header-actions .toolbar-btn{width:38px;height:38px;padding:0;justify-content:center;gap:0;font-size:0;}
  .app-header-actions .toolbar-btn .ic svg{width:16px;height:16px;}
  .app-header-actions .theme-btn{width:38px;padding:0;}
  /* 用户按钮保留头像与箭头，仅隐藏用户名 */
  .app-header-actions .user-btn{width:auto;padding:0 7px 0 4px;gap:3px;font-size:0;}
  .app-header-actions .user-btn .user-name{display:none;}
  .app-header-actions .user-btn .user-avatar{width:26px;height:26px;}
  .app-brand .app-name{max-width:100%;}
}

/* 公开页（登录/定价等）页脚：备案号 / 版权 / 联系方式（内容由 /api/site 注入） */
.site-legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px;padding:22px 20px 30px;font-size:12px;color:var(--text-secondary);text-align:center;}
.site-legal a{color:var(--text-secondary);text-decoration:none;}
.site-legal a:hover{color:var(--text-primary);}
.site-legal:empty{display:none;}