/* cc-topbar.css —— 独立页面的「平台顶栏」（2026-10-03 金老师定）
   用途：笔记（note.html）/ 社区作品（community.html）等非 SPA 页面，打开后顶部保持
         与平台完全一致的横向栏（品牌 + 问候 + 6 项菜单 + 账号卡 + 退出登录），
         按钮不随页面变化，颜色随「丹霞」主题（令牌来自 cc-theme.css）。
   规则：本文件只负责这一条栏，前缀 .cct；不影响页面自身样式。
   注意：改平台顶栏（app.css 的 .side）时，这边要跟着改，保持一条栏两处一致。 */

.cct{
  background:#fff3e8;border-bottom:2px solid var(--line);
  padding:8px 14px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:5px;
  position:sticky;top:0;z-index:60;
  font:14px/1.6 system-ui,"Microsoft YaHei",sans-serif;color:var(--text);
}
.cct a{text-decoration:none}

/* 品牌（可点：回主界面/工作台） */
.cct .brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;margin:0 8px 0 0;line-height:1.15;color:var(--text)}
.cct .brand:hover{filter:brightness(.96)}
.cct .brand .logo{width:34px;height:34px;display:block;border-radius:var(--radius-s,12px);flex:none}
.cct .brand .bw{display:flex;flex-direction:column}
.cct .brand .bw i{font-style:normal;background:linear-gradient(90deg,var(--brand2),var(--brand3));-webkit-background-clip:text;background-clip:text;color:transparent}
.cct .brand small{font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.4px;display:block}

.cct .hi{color:var(--muted);font-size:13px;margin:0 10px 0 2px;white-space:nowrap}

/* 菜单项（与平台 .side .nav 同款） */
.cct .nav{padding:7px 12px;border-radius:var(--radius-s);font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap}
.cct .nav:hover{background:var(--panel2)}
.cct .nav.on{background:linear-gradient(135deg,var(--brand1),var(--brand2));color:#fff;box-shadow:0 3px 10px rgba(207,47,99,.28)}
.cct .nav.mini{font-size:12.5px;font-weight:500;color:var(--muted);padding:5px 9px}
.cct .nav.mini:hover{color:var(--text)}
.cct .nav.off{opacity:.5;cursor:not-allowed}

.cct .cct-extra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 6px;min-width:0}

/* 笔记页的「🎨 样式」小弹层（背景/笔色/粗细）——不是导航下拉 */
.cct .cc-tools{position:relative}
.cct .cc-tools>summary{cursor:pointer;list-style:none;padding:6px 11px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:var(--radius-s);font-weight:600;font-size:13px}
.cct .cc-tools>summary::-webkit-details-marker{display:none}
.cct .cc-tools>summary:hover{border-color:var(--accent);color:var(--accent)}
.cct .cc-tools[open]>summary{background:var(--grad);border-color:transparent;color:#fff}
.cct .cc-tools:not([open]) .cc-toolsbox{display:none}
.cct .cc-toolsbox{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 12px;display:flex;flex-direction:column;gap:8px;z-index:80}
.cct .cc-toolsbox .row{display:flex;align-items:center;gap:8px;justify-content:space-between}

.cct .spacer{flex:1;min-width:0}

/* 账号卡 + 退出登录 */
.cct .card{margin:0;padding:6px 10px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-s);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cct .card .muted,.cct .card .small{font-size:12px;color:var(--muted)}
.cct button.ghost{background:transparent;border:1px solid var(--line);color:var(--text);padding:6px 12px;border-radius:var(--radius-s);cursor:pointer;font:inherit}
.cct button.ghost:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:1100px){
  .cct{padding:6px 10px;gap:4px}
  .cct .brand small{display:none}
  .cct .nav{padding:5px 9px;font-size:13px}
  .cct .hi{display:none}
}