/* 沧蓝工坊社区站 (l.cyancodex.cn) 共用样式 —— 论坛 / 工单
   复用 style.css 里的 CSS 变量（--bg / --card / --accent …），保持与官网一致的深色玻璃风格 */
/* 社区站主色: 青色（主站是绿色 #4ADE80）—— 让三个页面一眼区别于产品官网 */
:root { --ok:#4ADE80; --warn:#FBBF24; --danger:#F87171; --info:#38BDF8;
        --accent:#38BDF8; --accent2:#0EA5E9; --accent3:#22D3EE; }

.cc-wrap{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 18px 80px}
.cc-head{padding:28px 0 6px}
.cc-head h1{margin:0 0 6px;font-size:clamp(22px,3.6vw,32px);letter-spacing:.5px}
.cc-head p{margin:0;color:var(--dim);font-size:14px}
.cc-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cc-between{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cc-mt{margin-top:18px}
.cc-muted{color:var(--dim);font-size:13px}

/* 顶部导航（社区站自己的，比官网精简） */
.cc-nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
.cc-nav-in{max-width:1080px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:14px}
.cc-brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--txt)}
.cc-brand img{width:28px;height:28px;border-radius:8px}
.cc-brand i{font-style:normal;font-size:12px;color:var(--dim);font-weight:400}
.cc-nav-links{display:flex;gap:4px;margin-left:8px;flex-wrap:wrap}
.cc-nav-links a{padding:7px 12px;border-radius:9px;font-size:14px;color:var(--dim);border:1px solid transparent}
.cc-nav-links a:hover{color:var(--txt);background:var(--card2)}
.cc-nav-links a.on{color:var(--txt);background:var(--card2);border-color:var(--line)}
.cc-nav-act{margin-left:auto;display:flex;align-items:center;gap:8px}
.cc-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--card2);border:1px solid var(--line)}
.cc-avatar-fb{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));display:grid;place-items:center;color:#04140C;font-weight:700;font-size:13px}
.cc-badge{display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;text-align:center;margin-left:5px;font-weight:700}

/* 卡片 / 列表 */
.cc-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:12px;backdrop-filter:blur(8px)}
.cc-list{margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.cc-item{display:flex;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:.16s}
.cc-item:last-child{border-bottom:none}
.cc-item:hover{background:var(--card2)}
.cc-item-main{min-width:0;flex:1}
.cc-item-title{font-size:15px;font-weight:600;color:var(--txt);margin:0 0 4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cc-item-title .pin{color:var(--warn);font-size:12px}
.cc-item-ex{color:var(--dim);font-size:13px;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cc-item-meta{color:var(--dim);font-size:12px;margin-top:6px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cc-stat{min-width:96px;text-align:right;color:var(--dim);font-size:12px;flex:none}
.cc-stat b{display:block;font-size:15px;color:var(--txt)}
.cc-board-icon{width:42px;height:42px;border-radius:11px;background:var(--card2);display:grid;place-items:center;font-size:20px;flex:none}

/* 标签 */
.cc-tag{display:inline-block;padding:2px 8px;border-radius:7px;font-size:11px;border:1px solid var(--line);color:var(--dim);background:var(--card2)}
.cc-tag.open,.cc-tag.high{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.cc-tag.pending{color:var(--info);border-color:color-mix(in srgb,var(--info) 40%,transparent)}
.cc-tag.urgent{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.cc-tag.resolved{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.cc-tag.closed{opacity:.65}
.cc-tag.staff{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}

/* 表单 */
.cc-field{margin-top:14px}
.cc-field label{display:block;font-size:13px;color:var(--dim);margin-bottom:6px}
.cc-input,.cc-textarea,.cc-select{width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  background:var(--card2);color:var(--txt);font-size:14px;font-family:inherit;outline:none;transition:.16s}
.cc-input:focus,.cc-textarea:focus,.cc-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.cc-textarea{min-height:150px;resize:vertical;line-height:1.7}
.cc-textarea.sm{min-height:96px}
.cc-select option{background:var(--bg2);color:var(--txt)}
.cc-hint{font-size:12px;color:var(--dim);margin-top:6px}
.cc-err{font-size:13px;color:var(--danger);margin-top:10px;min-height:18px}
.cc-actions{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
.cc-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:11px;border:1px solid var(--line);
  background:var(--card2);color:var(--txt);font-size:14px;cursor:pointer;font-weight:500;transition:.18s;font-family:inherit}
.cc-btn:hover{transform:translateY(-1px)}
.cc-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.cc-btn.primary{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#04140C;font-weight:700;border-color:transparent}
.cc-btn.sm{padding:6px 12px;font-size:12.5px;border-radius:9px}
.cc-btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.cc-btn.link{background:none;border:none;padding:4px 6px;color:var(--dim);font-size:12.5px}
.cc-btn.link:hover{color:var(--accent);transform:none}

/* 帖子正文 / 回复 */
.cc-body{white-space:pre-wrap;word-break:break-word;line-height:1.85;font-size:15px;margin-top:10px}
.cc-post{border:1px solid var(--line);border-radius:13px;background:var(--card);padding:14px 16px;margin-top:12px}
.cc-post.s1{border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.cc-post-head{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12.5px}
.cc-post-head b{color:var(--txt);font-size:13.5px;font-weight:600}
.cc-post-act{margin-left:auto;display:flex;gap:2px;align-items:center}
.cc-floor{color:var(--dim);font-size:12px}

/* 工单对话: 左右气泡 */
.cc-thread{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.cc-msg{max-width:78%;padding:12px 15px;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.cc-msg .who{font-size:12px;color:var(--dim);margin-bottom:5px;display:flex;gap:8px;align-items:center}
.cc-msg .txt{white-space:pre-wrap;word-break:break-word;font-size:14.5px;line-height:1.75}
.cc-msg.mine{align-self:flex-end;background:color-mix(in srgb,var(--accent) 13%,var(--card));border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.cc-msg.staff{border-color:color-mix(in srgb,var(--ok) 34%,transparent)}
.cc-empty{text-align:center;color:var(--dim);padding:56px 18px;font-size:14px}
.cc-loading{text-align:center;color:var(--dim);padding:34px;font-size:13.5px}

/* 分页 */
.cc-pager{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.cc-pager button{min-width:38px;padding:7px 11px;border-radius:9px;border:1px solid var(--line);background:var(--card2);color:var(--dim);cursor:pointer;font-size:13px}
.cc-pager button.on{color:#04140C;background:var(--accent);border-color:transparent;font-weight:700}

/* 登录弹窗 */
.cc-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);padding:18px}
.cc-modal-box{width:min(420px,100%);background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.cc-modal-box h3{margin:0 0 4px;font-size:18px}
.cc-modal-box .sub{color:var(--dim);font-size:12.5px;margin-bottom:6px}
.cc-modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--dim);font-size:22px;cursor:pointer;line-height:1}

/* 提示 */
.cc-toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:200;padding:11px 20px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt);font-size:14px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.24s}
.cc-toast.on{opacity:1;bottom:44px}
.cc-toast.bad{border-color:color-mix(in srgb,var(--danger) 50%,transparent)}

/* 侧边小统计 */
.cc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:14px}
.cc-stat-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:center}
.cc-stat-card b{display:block;font-size:20px;color:var(--accent)}
.cc-stat-card span{font-size:12px;color:var(--dim)}

/* 管理员工具条 */
.cc-staff-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:11px 14px;
  border:1px dashed color-mix(in srgb,var(--ok) 40%,transparent);border-radius:12px;background:color-mix(in srgb,var(--ok) 7%,transparent);font-size:13px}

@media (max-width:640px){
  .cc-nav-links{display:none}
  .cc-item{flex-direction:column;gap:8px}
  .cc-stat{text-align:left;display:flex;gap:14px}
  .cc-stat b{display:inline;font-size:13px}
  .cc-msg{max-width:92%}
}


/* 官网首页的「社区入口」区块 */
.l-community{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:8px}
.l-cc-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:.2s;position:relative;overflow:hidden}
.l-cc-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.l-cc-card .ico{font-size:26px;line-height:1}
.l-cc-card h3{margin:10px 0 6px;font-size:17px;color:var(--txt)}
.l-cc-card p{margin:0;color:var(--dim);font-size:13.5px;line-height:1.7}
.l-cc-card .go{margin-top:12px;display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:13.5px;font-weight:600}