/* =========================================================
   pingduan.com - Locked UI v1.0.0 (AdminLTE 3.2 base)
   Author: DeGao + Assistant
   Notes:
   - 12-color palette (light/dark) kept consistent
   - Search bar + Submit pill share equal height
   - Card grid with custom 5th column on ≥1200px
   - Mobile: hide "提交" pill, keep search full-width
   - Icon container is 48×48 to match icon API
   ========================================================= */

/* === 统一色板：12色（每个主题复用同一组变量名） ===
   1  --c-bg            页面背景
   2  --c-surface       顶栏/卡片/面板背景
   3  --c-border        描边/分隔线
   4  --c-text          标题/主要文字
   5  --c-muted         次要文字
   6  --c-chip-bg       轻标签背景
   7  --c-chip-text     轻标签文字
   8  --c-accent-bg     App 图标块背景
   9  --c-badge-bg      软徽章背景（保留变量以备扩展）
   10 --c-badge-text    软徽章文字（保留变量以备扩展）
   11 --c-shadow-rgb    阴影/描边 RGB（alpha 外控）
   12 --c-success-rgb   成功态主色（RGB，用 alpha 混合）
*/
:root{
  --c-bg: #f6f7fb;
  --c-surface: #ffffff;
  --c-border: #e5e7eb;
  --c-text: #202123;
  --c-muted: #6b7280;
  --c-chip-bg: #f3f4f6;
  --c-chip-text: #4b5563;
  --c-accent-bg: #eef2ff;
  --c-badge-bg: #f8fafc;
  --c-badge-text: #475569;
  --c-shadow-rgb: 0, 0, 0;
  --c-success-rgb: 6, 95, 70;

  --radius: 14px;
  --space: 18px;

  /* 控件高度：保证搜索与提交一致 */
  --control-h: 36px;

  /* Logo 尺寸（圆形） */
  --logo-size: 36px;

  /* 卡片高度（仅标题+图标场景） */
  --card-h: 120px;
}
@media (min-width:576px){
  :root{ --control-h: 38px; }
}
@media (max-width:575.98px){
  :root{ --card-h: 110px; }
}

/* 夜间主题：变量替换 */
.dark-mode{
  --c-bg: #0b1220;
  --c-surface: #202123;
  --c-border: #1f2937;
  --c-text: #e5e7eb;
  --c-muted: #94a3b8;
  --c-chip-bg: #111827;
  --c-chip-text: #cbd5e1;
  --c-accent-bg: #0b1b31;
  --c-badge-bg: #0b1b31;
  --c-badge-text: #cbd5e1;
  --c-shadow-rgb: 0, 0, 0;
  --c-success-rgb: 74, 222, 128;
}

/* 基础排版与容器 */
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial,
               'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei', sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
}
.content-wrapper{ background: var(--c-bg); }
.main-header.navbar{
  border: 0;
  background: var(--c-surface);
  box-shadow: 0 1px 0 rgba(var(--c-shadow-rgb), .06);
}
.brand-link{ user-select: none; }

/* 顶部搜索条（极简） */
.searchbar{
  position:relative;
  display:flex;
  align-items:center;
  min-width:300px;
  height: var(--control-h);
  background:var(--c-surface);
  border:1px solid rgba(var(--c-shadow-rgb), .08);
  border-radius:12px;
  padding:0 10px;
  gap:6px;
  box-shadow:none;
}
.searchbar .ti{ font-size:1.05rem; opacity:.55; line-height:1; }
/* 顶栏图标微调 */
.navbar .nav-link .ti{ font-size:1.05rem; line-height:1; margin-right:4px; opacity:.85; }

/* 搜索输入 */
.search-input{
  border:0; outline:0; flex:1; background:transparent;
  height: calc(var(--control-h) - 2px);
  font-size:.95rem; color:var(--c-text);
}
.search-input::placeholder{ color:var(--c-muted); }
.shortcut-hint{ font-size:.78rem; opacity:.5; user-select:none; }
.searchbar.has-text .shortcut-hint{ display:none; }
.clear-btn{
  border:0; background:transparent; font-size:1.2rem; line-height:1;
  color:var(--c-muted); display:none;
}
.searchbar.has-text .clear-btn{ display:inline-flex; }

/* 提交按钮 - 与搜索框协调的边框与高度 */
.submit-pill{
  display:inline-flex; align-items:center; gap:6px;
  height: var(--control-h);
  padding:0 10px;
  border:1px solid rgba(var(--c-shadow-rgb), .08);
  border-radius:12px;
  background:var(--c-surface);
  line-height:1;
}
.submit-pill .ti{ margin-right:2px; }
.submit-pill:hover{ box-shadow:0 1px 0 rgba(var(--c-shadow-rgb), .06); }

/* 让右侧 nav-link 的内联块垂直居中 */
.navbar .nav-item > .nav-link{
  display:flex; align-items:center;
  padding-top:0; padding-bottom:0;
}

/* 工具条（筛选/排序） */
.toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.filter{ display:flex; gap:10px; }
.chip-select,
.chip-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px;
  border:1px solid var(--c-border);
  background:var(--c-surface); color:var(--c-text);
  font-size:.9rem;
}
.chip-ghost{ background:transparent; }

/* 卡片（仅图标 + 标题） */
.app-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:14px;
  height:var(--card-h);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .15s ease, transform .06s ease;
  text-decoration:none; color:inherit;
}
.app-card:hover{ box-shadow:0 6px 20px rgba(var(--c-shadow-rgb), .06); transform:translateY(-1px); }
.app-body{ display:flex; flex-direction:column; align-items:center; gap:10px; }

/* 图标容器：48×48（配合 icon API 的 data:URI） */
.app-icon{
  width:48px; height:48px;
  border-radius:12px;
  background:var(--c-accent-bg);
  display:grid; place-items:center;
  border:1px solid var(--c-border);
  overflow:hidden;
}
.app-icon img{ width:22px; height:22px; }        /* 兼容旧占位 */
.app-icon-img{ width:100%; height:100%; object-fit:contain; display:block; } /* 新图标 */

.app-title{
  font-weight:600; color:var(--c-text); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* 栅格间距 */
.grid-gap{ margin-left:-10px; margin-right:-10px; }
.grid-gap>[class*='col-']{ padding-left:10px; padding-right:10px; margin-bottom:20px; }

/* 页脚 */
.footer-clean{ background:var(--c-surface); border-top:1px solid rgba(var(--c-shadow-rgb), .06); }

/* 自定义 5 列布局（≥1200px） */
@media (min-width:1200px){
  .col-xl-5th{ flex: 0 0 20%; max-width: 20%; }
}

/* Logo 圆形化（50% 圆角，保证宽高相等） */
.brand-link .brand-image{
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius:50%;
  object-fit:cover;
}

/* 响应式修复：小屏隐藏“提交”，搜索自适应 */
.navbar .form-inline{ flex:1 1 auto; min-width:0; } /* 允许搜索占据剩余空间 */
@media (max-width:575.98px){
  .searchbar{ min-width:0; width:100%; }
  .shortcut-hint{ display:none; } /* 手机上省空间 */
  .submit-nav{ display:none !important; } /* 手机隐藏提交 */
}

/* 中部大搜索（置于标题上方，居中） */
.hero-wrap{ display:flex; justify-content:center; margin:16px 0 12px; }
.hero-search{
  display:flex; align-items:center; gap:10px;
  width:100%; max-width:820px;
  background:var(--c-surface);
  border:1px solid rgba(var(--c-shadow-rgb), .08);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 1px 0 rgba(var(--c-shadow-rgb), .04);
}
.hero-search .ti{ font-size:1.1rem; opacity:.55; line-height:1; }
.hero-input{
  flex:1; border:0; outline:0; background:transparent;
  font-size:1rem; color:var(--c-text);
}
.hero-input::placeholder{ color:var(--c-muted); }
.hero-action{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:999px;
  background:rgba(var(--c-shadow-rgb), .04);
}
.dark-mode .hero-action{ background:rgba(var(--c-shadow-rgb), .18); }