/* ============================================================
   奇乐 /console 控制台页样式（F4 v1.2 M1）——只做页面布局，
   标准件（en-btn/en-input）与语义 token 复用 assets/qile.css，
   此处禁止重复定义标准件类。
   ============================================================ */

body { background: var(--background); color: var(--foreground);
       font: var(--fw-normal) var(--text-base)/var(--lh-normal) var(--font-sans);
       margin: 0; }

/* 顶栏（与首页 .top 同构，增加导航） */
.ctop { background: var(--card); border-bottom: 1px solid var(--border);
        position: sticky; top: 0; z-index: 20; }
.ctop-in { max-width: 960px; margin: 0 auto; padding: 10px 16px;
           display: flex; align-items: center; gap: 18px; }
.ctop-in .brand { display: inline-flex; align-items: center; }
.cnav { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.cnav a { padding: 6px 12px; border-radius: var(--radius-sm);
          font-size: var(--text-sm); color: var(--muted-foreground);
          white-space: nowrap; }
.cnav a:hover { background: var(--accent); color: var(--foreground);
                text-decoration: none; }
.cnav a.on { background: var(--brand-50); color: var(--brand-800);
             font-weight: var(--fw-semibold); }

.cwrap { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; }
.cwrap h1 { font-size: var(--text-2xl); margin: 0 0 4px; }
.cwrap .sub { color: var(--muted-foreground); font-size: var(--text-sm);
              margin: 0 0 20px; }

.cgrid { display: grid; gap: 14px; }
.cgrid.cols2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.ccard { background: var(--card); border: 1px solid var(--border);
         border-radius: var(--radius-lg); padding: 18px; }
.ccard h3 { margin: 0 0 10px; font-size: var(--text-md); }
.ccard .empty { color: var(--muted-foreground); font-size: var(--text-sm); }

/* 键值行 */
.kv { display: flex; justify-content: space-between; gap: 12px;
      padding: 8px 0; border-bottom: 1px dashed var(--border);
      font-size: var(--text-base); }
.kv:last-child { border-bottom: none; }
.kv b { font-weight: var(--fw-medium); }
.kv .k { color: var(--muted-foreground); }
.mono { font-family: var(--font-mono); }

/* 徽标态 */
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px;
        font-size: var(--text-xs); font-weight: var(--fw-medium); }
.chip.ok { background: color-mix(in srgb, var(--success) 14%, transparent);
           color: var(--success-fg); }
.chip.warn { background: color-mix(in srgb, var(--warning) 16%, transparent);
             color: var(--warning-fg); }
.chip.bad { background: color-mix(in srgb, var(--destructive) 12%, transparent);
            color: var(--danger-fg); }
.chip.info { background: var(--brand-50); color: var(--brand-800); }

/* 安装页提示词块 */
.prompt { background: var(--muted); border: 1px solid var(--border);
          border-radius: var(--radius-md); padding: 14px;
          font-family: var(--font-mono); font-size: var(--text-sm);
          white-space: pre-wrap; word-break: break-all; margin: 12px 0; }

/* 环境矩阵三栏（F4 v1.3：买前可见） */
.envmat { display: grid; gap: 10px;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.envmat .cell { background: var(--muted); border-radius: var(--radius-md);
                padding: 12px; font-size: var(--text-sm); }
.envmat .cell b { display: block; margin-bottom: 4px; }
.envmat .ok { color: var(--success-fg); }
.envmat .warn { color: var(--warning-fg); }

table.ctab { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ctab th, .ctab td { text-align: left; padding: 8px 10px;
                     border-bottom: 1px solid var(--border); }
.ctab th { color: var(--muted-foreground); font-weight: var(--fw-medium); }

.notice { background: var(--brand-50); border-radius: var(--radius-md);
          padding: 10px 14px; font-size: var(--text-sm);
          color: var(--brand-800); margin-bottom: 14px; }
.notice.plain { background: var(--muted); color: var(--muted-foreground); }

/* 帮助中心折叠项 */
details.cqa { background: var(--card); border: 1px solid var(--border);
              border-radius: var(--radius-md); padding: 12px 16px; }
details.cqa + details.cqa { margin-top: 8px; }
details.cqa summary { cursor: pointer; font-weight: var(--fw-medium);
                      font-size: var(--text-base); }
details.cqa .a { padding-top: 8px; color: var(--muted-foreground);
                 font-size: var(--text-sm); white-space: pre-line; }

.acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.step { color: var(--muted-foreground); font-size: var(--text-sm);
        margin-top: 8px; }