/* ================================================
   Java 面试题可视化解析平台 — 主样式
   App shell only. Slide styling is in _shared/base.css
   ================================================ */

/* ===== 基础重置 ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family: var(--font-sans, 'Inter','Noto Sans SC','PingFang SC',sans-serif);
  background:var(--bg);
  color:var(--text-1);
  transition:background .4s,color .4s;
}

/* ===== 布局 ===== */
#app{display:flex;height:100vh}

/* ===== 侧边栏 ===== */
.sidebar{
  width:260px;min-width:260px;
  background:var(--bg-soft);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  padding:20px 0;
  transition:background .4s,width .25s ease,min-width .25s ease,padding .25s ease;
}
.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 16px 24px 20px;
  border-bottom:1px solid var(--border);
}
.logo{
  display:flex;align-items:center;gap:12px;
  min-width:0;
}
.logo-icon{font-size:28px}
.logo-text{
  font-size:18px;font-weight:800;
  background:var(--grad,linear-gradient(135deg,var(--accent),var(--accent-2)));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.sidebar-toggle{
  width:34px;height:34px;flex:0 0 34px;
  border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-1);
  cursor:pointer;font-size:18px;line-height:1;
  transition:all .2s;
}
.sidebar-toggle:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--surface-2);
}
.nav-menu{flex:1;overflow-y:auto;padding:16px 12px}

.nav-group{margin-bottom:8px}
.nav-group-title{
  font-size:10px;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.1em;
  padding:10px 12px 6px;
  opacity:.7;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius-sm,10px);
  cursor:pointer;transition:all .2s;
  font-size:14px;color:var(--text-2);
  margin-bottom:2px;
}
.nav-item:hover{background:var(--surface);color:var(--text-1)}
.nav-item.active{
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  color:var(--accent);
  font-weight:600;
}
.nav-item .count{
  margin-left:auto;font-size:11px;
  background:var(--surface-2);color:var(--text-3);
  padding:2px 9px;border-radius:999px;
}
.nav-item.active .count{background:color-mix(in srgb,var(--accent) 25%,transparent);color:var(--accent)}

.sidebar-footer{padding:16px;border-top:1px solid var(--border)}
.theme-actions{display:flex;flex-direction:column;gap:8px}
.theme-toggle{
  width:100%;padding:10px 14px;border-radius:var(--radius-sm,10px);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-1);cursor:pointer;font-size:13px;
  transition:all .2s;
}
.theme-toggle:hover{background:var(--surface-2);border-color:var(--accent)}
.theme-hint{font-size:10px;color:var(--text-3);text-align:center;opacity:.6}

#app.sidebar-collapsed .sidebar{
  width:88px;
  min-width:88px;
  padding:20px 0;
}
#app.sidebar-collapsed .sidebar-header{
  padding:0 12px 24px;
  justify-content:center;
}
#app.sidebar-collapsed .logo{
  justify-content:center;
  gap:0;
}
#app.sidebar-collapsed .logo-text,
#app.sidebar-collapsed .nav-group-title,
#app.sidebar-collapsed .nav-item .label,
#app.sidebar-collapsed .nav-item .count,
#app.sidebar-collapsed .sidebar-footer .theme-hint,
#app.sidebar-collapsed .sidebar-footer .theme-toggle{
  display:none;
}
#app.sidebar-collapsed .nav-menu{
  padding:16px 10px;
}
#app.sidebar-collapsed .nav-item{
  justify-content:center;
  padding:12px 10px;
}
#app.sidebar-collapsed .sidebar-footer{
  padding:12px 10px;
}
#app.sidebar-collapsed .theme-actions{
  align-items:center;
}
#app.sidebar-collapsed .sidebar-toggle{
  transform:rotate(180deg);
}

/* ===== 主内容区 ===== */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}

.top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--border);
  background:var(--bg-soft);
  transition:background .4s;
}
.search-box{display:flex;gap:8px}
.search-box input{
  width:320px;padding:10px 16px;border-radius:var(--radius-sm,10px);
  border:1px solid var(--border);background:var(--bg);
  color:var(--text-1);font-size:14px;
  transition:border-color .2s;
}
.search-box input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.search-box button{
  padding:10px 18px;border-radius:var(--radius-sm,10px);
  border:none;background:var(--accent);color:var(--bg);
  cursor:pointer;font-size:14px;font-weight:600;
  transition:all .2s;
}
.search-box button:hover{opacity:.85;transform:scale(1.03)}
.stats{font-size:13px;color:var(--text-3)}

.content-area{flex:1;overflow-y:auto;padding:24px 24px 28px;scroll-behavior:smooth}

/* ===== 首页分类卡片 ===== */
.page-title{font-size:34px;font-weight:900;margin-bottom:8px;letter-spacing:-.01em}
.page-desc{color:var(--text-2);font-size:16px;margin-bottom:32px}

.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:20px;
}
.category-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius,14px);
  padding:28px;
  cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.35));
  position:relative;
  overflow:hidden;
}
.category-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;
  background:var(--grad,linear-gradient(90deg,var(--accent),var(--accent-2)));
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.category-card:hover::before{transform:scaleX(1)}
.category-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
  box-shadow:var(--shadow-lg,0 24px 60px rgba(0,0,0,.5));
}
.category-card .icon{font-size:44px;margin-bottom:14px;display:block}
.category-card h3{font-size:19px;margin-bottom:6px;font-weight:700}
.category-card p{font-size:13px;color:var(--text-2);line-height:1.5}
.category-card .meta{
  display:flex;gap:14px;margin-top:16px;
  font-size:12px;color:var(--text-3);
  padding-top:14px;border-top:1px solid var(--border);
}

/* ===== 题目列表 ===== */
.hidden{display:none!important}
.breadcrumb{
  font-size:13px;color:var(--text-3);margin-bottom:18px;
  display:flex;gap:6px;align-items:center;
}
.breadcrumb span{cursor:pointer;transition:color .2s}
.breadcrumb span:hover{color:var(--accent)}
.breadcrumb .sep{opacity:.4}
.section-title{font-size:26px;font-weight:800;margin-bottom:22px}

.topic-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:18px;
}
.topic-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius,14px);
  padding:22px;
  cursor:pointer;
  transition:all .3s;
  box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.35));
  position:relative;
}
.topic-delete-btn{
  position:absolute;
  top:14px;
  right:14px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2);
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  transition:all .2s;
}
.topic-delete-btn:hover{
  border-color:var(--warn);
  background:color-mix(in srgb,var(--warn) 15%,transparent);
  color:var(--warn);
}
.topic-card:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-lg,0 24px 60px rgba(0,0,0,.5));
  transform:translateY(-3px);
}
.topic-card .tag{
  display:inline-block;font-size:11px;font-weight:600;
  padding:4px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  color:var(--accent);
  margin-bottom:12px;
}
.topic-card h4{font-size:17px;margin-bottom:8px;font-weight:700}
.topic-card p{font-size:13px;color:var(--text-2);line-height:1.5}
.topic-card .meta{
  display:flex;gap:18px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--border);
  font-size:12px;color:var(--text-3);
}

/* ===== 演示播放器 Chrome ===== */
.deck-player{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  grid-template-rows:auto minmax(0,1fr);
  gap:18px 20px;
  height:calc(100vh - 96px);
  min-height:720px;
}
.deck-player.notes-collapsed{
  grid-template-columns:minmax(0,1fr) 0;
}
.player-header{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--border);
  margin-bottom:0;
}
.btn-back{
  padding:9px 18px;border-radius:var(--radius-sm,10px);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-1);cursor:pointer;font-size:13px;font-weight:600;
  transition:all .2s;
}
.btn-back:hover{background:var(--surface-2);border-color:var(--accent)}
.player-header h3{font-size:17px;font-weight:700}
.player-controls{display:flex;align-items:center;gap:12px}
.player-controls button{
  padding:9px 16px;border-radius:var(--radius-sm,10px);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-1);cursor:pointer;font-size:14px;font-weight:600;
  transition:all .2s;
}
.player-controls button:hover{background:var(--surface-2);border-color:var(--accent)}
#slide-counter{font-size:13px;color:var(--text-3);min-width:60px;text-align:center;font-weight:600}
#btn-fullscreen{font-size:18px;padding:9px 12px}

/* ===== 幻灯片容器（嵌入模式 override） ===== */
.deck-container{
  flex:1;background:var(--bg-soft);
  border-radius:var(--radius-lg,22px);
  border:1px solid var(--border);
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg,0 24px 60px rgba(0,0,0,.5));
  min-width:0;
  min-height:0;
}

/* override base.css .deck for embedded mode */
.deck-container .deck{
  width:100%;height:100%;
  position:absolute;inset:0;
  background:var(--bg);
}

/* slightly reduce slide padding for embedded view */
.deck-container .slide{
  padding:44px 56px;
  transform-origin:top left;
}

/* override deck-header/footer for embedded mode */
.deck-container .deck-header{
  top:20px;left:36px;right:36px;
}
.deck-container .deck-footer{
  bottom:20px;left:36px;right:36px;
}

/* override progress-bar for embedded mode (base.css uses position:fixed) */
.deck-container .progress-bar{
  position:absolute;
  bottom:0;
}

/* ===== 演讲者备注 ===== */
.speaker-notes{
  margin-top:0;padding:18px 22px;
  background:var(--surface);border-radius:var(--radius,14px);
  border-left:4px solid var(--accent);
  box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.35));
  overflow:auto;
}
.speaker-notes-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:8px;
}
.speaker-notes h4{font-size:13px;margin-bottom:8px;color:var(--accent);font-weight:700}
.speaker-notes p{font-size:13px;color:var(--text-2);line-height:1.6}
.notes-collapse-btn{
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-2);cursor:pointer;font-size:12px;font-weight:600;
  transition:all .2s;
}
.notes-collapse-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--bg)}
.deck-player.notes-collapsed .speaker-notes{
  width:0;min-width:0;padding:0;border:0;opacity:0;overflow:hidden;
  box-shadow:none;pointer-events:none;
}
.deck-player.notes-collapsed #btn-toggle-notes,
.deck-player.notes-collapsed #btn-collapse-notes{
  color:var(--accent);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
}

/* ===== 顶部操作栏 ===== */
.top-actions{display:flex;align-items:center;gap:10px}
.btn-create,.btn-import{
  padding:9px 18px;border-radius:var(--radius-sm,10px);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-1);cursor:pointer;font-size:13px;font-weight:600;
  transition:all .2s;
}
.btn-create:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn-import:hover{background:var(--surface-2);border-color:var(--accent)}
.stats{margin-left:8px;font-size:13px;color:var(--text-3)}

/* ===== 新建题目 ===== */
.create-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;margin-top:20px}
.create-input{display:flex;flex-direction:column;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:13px;font-weight:700;color:var(--text-2)}
.form-group input,.form-group select,.form-group textarea{
  padding:10px 14px;border-radius:var(--radius-sm,10px);
  border:1px solid var(--border);background:var(--bg);
  color:var(--text-1);font-size:14px;font-family:inherit;
  transition:border-color .2s;
}
.category-select-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.btn-inline{
  padding:10px 14px;
  white-space:nowrap;
}
.custom-category-grid{
  display:grid;
  grid-template-columns:80px minmax(0,1fr) minmax(0,1.5fr);
  gap:10px;
}
.custom-category-actions{
  display:flex;
  gap:10px;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);
}
.form-group textarea{
  resize:vertical;font-family:"JetBrains Mono","Fira Code",monospace;
  font-size:13px;line-height:1.7;min-height:320px;
}
.create-actions{display:flex;gap:10px}
.btn-primary{
  padding:10px 24px;border-radius:var(--radius-sm,10px);
  border:none;background:var(--accent);color:var(--bg);
  cursor:pointer;font-size:14px;font-weight:700;
  transition:all .2s;
}
.btn-primary:hover{opacity:.85;transform:scale(1.03)}
.btn-secondary{
  padding:10px 20px;border-radius:var(--radius-sm,10px);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-1);cursor:pointer;font-size:13px;font-weight:600;
  transition:all .2s;
}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--accent)}

.create-help{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius,14px);padding:20px;
  box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.35));
  height:fit-content;
  position:sticky;top:20px;
}
.create-help h4{margin-bottom:14px;font-size:15px}
.syntax-list{display:flex;flex-direction:column;gap:6px}
.syntax-item{
  font-size:12px;color:var(--text-2);padding:6px 10px;
  border-radius:6px;background:var(--surface-2);
  transition:background .2s;
}
.syntax-item:hover{background:var(--bg)}
.syntax-item code{
  font-size:11px;padding:2px 6px;border-radius:4px;
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  color:var(--accent);
}
.syntax-tip{
  margin-top:14px;padding:12px;border-radius:var(--radius-sm,10px);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  font-size:12px;color:var(--text-2);line-height:1.6;
}

/* 预览区域 */
.preview-area{
  margin-top:24px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:16px 20px;
  align-items:start;
}
.preview-header{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--border);
  margin-bottom:16px;
}
.preview-header h3{font-size:16px}
.preview-actions{display:flex;gap:10px}
.preview-area .deck-container{height:min(72vh,820px)}
.preview-area .speaker-notes{margin-top:0;max-height:min(72vh,820px)}

/* ===== 自定义关键字高亮（不在 base.css 中） ===== */
.key-term{color:var(--accent);font-weight:700}
.key-warn{color:var(--warn);font-weight:700}
.key-good{color:var(--good);font-weight:700}
.key-bad{color:var(--bad);font-weight:700}

/* 自定义 tag（base.css 有 .pill，但 .tag 是旧版兼容） */
.tag{
  display:inline-block;font-size:11px;font-weight:600;
  padding:4px 12px;border-radius:999px;
  background:var(--surface-2);color:var(--text-3);
}

/* 自定义概念卡片（base.css 有 .card，但 .concept-card 有额外样式） */
.concept-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius,14px);padding:22px;
  box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.35));
  transition:all .3s;
}
.concept-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.concept-card .icon{font-size:32px;margin-bottom:10px;display:block}
.concept-card h4{font-size:17px;font-weight:700;margin-bottom:8px}
.concept-card p,.concept-card ul,.concept-card ol{font-size:13px;color:var(--text-2);line-height:1.7}

/* 4 张及以上卡片：紧凑模式，缩小内距与字号以适配更多内容 */
.cards-compact{gap:16px}
.cards-compact .concept-card{padding:14px}
.cards-compact .concept-card .icon{font-size:24px;margin-bottom:6px}
.cards-compact .concept-card h4{font-size:14px;margin-bottom:5px}
.cards-compact .concept-card p{font-size:11.5px;line-height:1.55}

/* 内存条目（项目特有） */
.mem-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 10px;margin:4px 0;
  border-radius:var(--radius-sm,10px);background:var(--surface-2);
  font-size:12px;
}
.mem-item .val{color:var(--accent);font-weight:600}
.mem-item .ref{color:var(--warn);font-weight:600}
.mem-item .good{color:var(--good);font-weight:600}

/* 代码块覆盖（base.css 没有 card 式代码块） */
pre.card{
  background:#11111b;padding:18px;border-radius:var(--radius-sm,10px);
  overflow:auto;font-size:12px;line-height:1.75;
  font-family:"JetBrains Mono","Fira Code","Cascadia Code",monospace;
  border:1px solid var(--border);
}

/* 自定义时间线（base.css 用 .tl，这里用 .timeline 兼容） */
.deck-container .timeline{display:flex;align-items:flex-start;gap:18px;margin-top:28px;position:relative}
.deck-container .timeline::before{content:'';position:absolute;top:24px;left:55px;right:55px;height:3px;background:var(--border-strong)}
.deck-container .tl-item{flex:1;text-align:center;position:relative;z-index:1}
.deck-container .tl-dot{width:48px;height:48px;border-radius:50%;background:var(--surface);border:3px solid var(--border-strong);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.deck-container .tl-dot.hl{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 16px color-mix(in srgb,var(--accent) 40%,transparent)}
.deck-container .tl-item h4{font-size:14px;margin:0 0 4px}
.deck-container .tl-item p{font-size:11px;color:var(--text-3);margin:0}

.auth-panel{
  margin-bottom:14px;padding:14px 12px;border-radius:14px;
  border:1px solid var(--border);background:var(--surface-2);
}
.auth-name{
  font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:4px;
}
.auth-meta{
  font-size:11px;line-height:1.5;color:var(--text-3);
}
.top-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.auth-tabs{display:flex;gap:8px;margin-bottom:8px}
.auth-tab{
  flex:1;padding:10px 16px;border-radius:var(--radius-sm,10px);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);cursor:pointer;font-size:13px;font-weight:600;
  transition:all .2s;
}
.auth-tab:hover{background:var(--surface-2)}
.auth-tab.active{
  background:var(--accent);color:var(--bg);border-color:var(--accent);
}

/* ===== 移动端汉堡按钮与遮罩（桌面端隐藏） ===== */
.btn-mobile-menu{
  display:none;
  width:38px;height:38px;flex:0 0 38px;
  border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-1);
  cursor:pointer;font-size:20px;line-height:1;
  align-items:center;justify-content:center;
  transition:all .2s;
}
.btn-mobile-menu:hover{border-color:var(--accent);color:var(--accent)}
.nav-backdrop{display:none}

/* ===== 响应式 ===== */
@media(max-width:900px){
  /* 侧边栏改为抽屉 */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:1000;
    width:260px;min-width:260px;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  #app.sidebar-collapsed .sidebar{width:260px;min-width:260px}
  #app.mobile-nav-open .sidebar{transform:translateX(0)}
  .sidebar-toggle{display:none}
  .btn-mobile-menu{display:flex}
  .nav-backdrop{
    display:block;position:fixed;inset:0;z-index:900;
    background:rgba(0,0,0,.5);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  #app.mobile-nav-open .nav-backdrop{opacity:1;pointer-events:auto}

  /* 顶栏紧凑 */
  .top-bar{padding:10px 14px;gap:10px}
  .search-box input{width:180px}
  .top-actions{gap:6px}
  .btn-create,.btn-import,.btn-secondary{padding:8px 12px;font-size:12px}

  /* 播放器：单列纵向布局，幻灯片按 16:9 定高 */
  .deck-player{
    display:flex;flex-direction:column;gap:10px;
    height:auto;min-height:0;
  }
  .deck-container{
    width:100%;flex:0 0 auto;
    aspect-ratio:16/9;max-height:70vh;
  }
  .deck-container .slide{padding:24px 28px}
  .player-header{flex-wrap:wrap;gap:8px;padding:8px 0}
  .player-header h3{
    font-size:14px;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .player-controls{gap:8px}
  .player-controls button{padding:8px 12px;font-size:13px}
  #btn-fullscreen{padding:8px 10px}
  /* 折叠备注时直接隐藏（flex 列布局下） */
  .deck-player.notes-collapsed .speaker-notes{display:none}
  .deck-player .speaker-notes{max-height:26vh}

  .create-layout{grid-template-columns:1fr}
  .preview-area{grid-template-columns:1fr}
  .preview-area .deck-container{height:auto;aspect-ratio:16/9;max-height:60vh}
  .category-select-row,
  .custom-category-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
  /* 允许页面纵向滚动（移动端地址栏等） */
  html,body{height:auto;overflow:auto}
  .top-bar{padding:8px 10px}
  .search-box{display:none}
  .content-area{padding:14px}
  .page-title{font-size:24px}
  .page-desc{font-size:14px;margin-bottom:18px}
  .section-title{font-size:20px;margin-bottom:14px}
  .category-grid{grid-template-columns:1fr;gap:14px}
  .topic-cards{grid-template-columns:1fr;gap:12px}
  .category-card{padding:20px}
  .category-card .icon{font-size:36px}
  .top-actions .stats{display:none}
  .top-actions{gap:6px}
  .btn-create,.btn-import,.btn-secondary{padding:7px 10px;font-size:11px}

  /* 幻灯片：进一步收窄内边距，提升缩放后可读性 */
  .deck-container{border-radius:14px;max-height:calc(100vh - 180px)}
  .deck-container .slide{padding:16px 18px}
  .deck-player .speaker-notes{max-height:22vh;padding:14px 16px}
  .player-controls button{padding:7px 10px}

  .modal{width:94vw}
  .modal-body{padding:16px}
  .create-help{position:static}
}

/* ===== API 设置弹窗 ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.modal{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg,22px);
  box-shadow:var(--shadow-lg,0 24px 60px rgba(0,0,0,.5));
  width:480px;max-width:90vw;
  overflow:hidden;
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--border);
}
.modal-header h3{font-size:17px;font-weight:700}
.modal-close{
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-1);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.modal-close:hover{background:var(--warn);color:#fff;border-color:var(--warn)}
.modal-body{padding:20px 24px}
.modal-body .form-group{margin-bottom:16px}
.modal-body .form-group label{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.modal-body .form-group input,
.modal-body .form-group select{
  width:100%;padding:10px 14px;border-radius:var(--radius-sm,10px);
  border:1px solid var(--border);background:var(--bg);
  color:var(--text-1);font-size:14px;
  transition:border-color .2s;
}
.modal-body .form-group input:focus,
.modal-body .form-group select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);
}
.form-hint{
  display:block;font-size:11px;color:var(--text-3);margin-top:4px;
}
.api-status{
  margin-top:12px;padding:10px 14px;border-radius:var(--radius-sm,10px);
  font-size:13px;
}
.api-status.success{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good);border:1px solid var(--good)}
.api-status.error{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn);border:1px solid var(--warn)}

/* ===== AI 加载层 ===== */
.ai-loading{
  position:absolute;inset:0;z-index:500;
  background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  border-radius:var(--radius-lg,22px);
}
.ai-loading-card{
  text-align:center;padding:40px;
}
.ai-loading-card h3{
  font-size:24px;margin:20px 0 10px;
  font-weight:800;
}
.ai-loading-card p{
  font-size:14px;color:var(--text-2);
}
.ai-loading-hint{
  margin-top:16px;font-size:12px!important;color:var(--text-3)!important;
  opacity:.7;
}
.spinner{
  width:56px;height:56px;margin:0 auto;
  border:4px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 内容来源切换标签 ===== */
.source-tabs{
  display:flex;gap:8px;
}
.source-tab,
.output-tab{
  flex:1;padding:10px 16px;border-radius:var(--radius-sm,10px);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);cursor:pointer;font-size:13px;font-weight:600;
  transition:all .2s;
}
.source-tab:hover,
.output-tab:hover{background:var(--surface-2)}
.source-tab.active,
.output-tab.active{
  background:var(--accent);color:var(--bg);border-color:var(--accent);
}

/* ===== 备案号悬挂 ===== */
.site-beian{
  position:fixed;bottom:0;left:0;right:0;
  text-align:center;padding:4px 0;
  font-size:12px;color:var(--text-3);
  background:var(--bg);
  border-top:1px solid var(--border);
  z-index:100;pointer-events:auto;
}
.site-beian a{color:var(--text-3);text-decoration:none;transition:color .2s}
.site-beian a:hover{color:var(--accent)}