/* ============================================================
   KPOP.WANG · 共创 / 设计师模块 浅色基础样式（.cc- 命名空间）
   ------------------------------------------------------------
   2026-09-15 修复：/designer/ 与 /cocreate/ 全套 .cc-* 类名此前
   没有任何 CSS 定义（旧 skin/css/cocreate.css 为暗黑金皮肤且未被
   任何页面引入），导致图库列表页排版完全裸奔（大图无约束、信息
   卡错位、标签飘散）。本文件按全站品牌色重建浅色版。

   · 仅新增文件，不改动任何现有全局 CSS
   · 由 DesignerHubController / CocreateHubController 注入
   · 作品详情页 .kdd-page 内的 .cc-* 覆写优先级更高，不受影响
   品牌色板：#FFFFFF #F7F8FA #E5E6EB #F2F3F5
             #1D2129 #4E5969 #86909C #C9CDD4
             #1677FF #0958D9 #E8F3FF
   ============================================================ */

.cc-container{max-width:1200px;margin:0 auto;padding:0 16px}
.cc-main{padding-bottom:56px}

/* ---------- Hero ---------- */
.cc-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#EAF2FF 0%,#F7FAFF 52%,#EAF2FF 100%);border-bottom:1px solid #E5E6EB}
.cc-hero-bg{display:none}
.cc-hero .cc-container{position:relative;padding-top:38px;padding-bottom:32px}
.cc-crumb{font-size:13px;color:#86909C;margin-bottom:14px;line-height:1.6}
.cc-crumb a{color:#4E5969;text-decoration:none}
.cc-crumb a:hover{color:#1677FF}
.cc-crumb i{font-style:normal;margin:0 8px;color:#C9CDD4}
.cc-crumb span{color:#86909C}
.cc-hero-title{margin:0 0 12px;font-size:34px;line-height:1.28;color:#1D2129;font-weight:800;letter-spacing:.3px}
.cc-hero-sub{margin:0;color:#4E5969;font-size:15px;line-height:1.8;max-width:860px}

/* ---------- 子导航 ---------- */
.cc-subnav{position:sticky;top:0;z-index:40;background:#FFFFFF;border-bottom:1px solid #E5E6EB}
.cc-subnav .cc-container{display:flex;gap:4px;overflow-x:auto}
.cc-subnav a{position:relative;padding:15px 16px;color:#4E5969;font-size:15px;text-decoration:none;white-space:nowrap;transition:.2s}
.cc-subnav a:hover{color:#1677FF}
.cc-subnav a.on{color:#1677FF;font-weight:700}
.cc-subnav a.on::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;background:linear-gradient(90deg,#1677FF,#0958D9);border-radius:2px}

/* ---------- 入口卡片 ---------- */
.cc-entry{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:32px 0 34px}
.cc-entry-card{display:block;padding:26px 22px;border-radius:16px;text-decoration:none;color:inherit;
  background:#FFFFFF;border:1px solid #E5E6EB;transition:.25s;position:relative;overflow:hidden}
.cc-entry-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#1677FF,transparent);opacity:0;transition:.25s}
.cc-entry-card:hover{transform:translateY(-4px);border-color:#BCD4FF;box-shadow:0 18px 40px -22px rgba(22,119,255,.35)}
.cc-entry-card:hover::before{opacity:1}
.cc-entry-card .cc-ico{font-size:30px;display:block;margin-bottom:12px}
.cc-entry-card h3{margin:0 0 10px;color:#1D2129;font-size:19px;font-weight:700}
.cc-entry-card p{margin:0 0 14px;color:#86909C;font-size:13.5px;line-height:1.85}
.cc-entry-more{color:#1677FF;font-size:13.5px;font-weight:600}

/* ---------- 区块 ---------- */
.cc-card-block{margin:34px 0;padding:26px 24px;border-radius:16px;background:#FFFFFF;border:1px solid #E5E6EB}
.cc-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.cc-block-head h3{margin:0;color:#1D2129;font-size:20px;font-weight:700}
.cc-more{color:#1677FF;font-size:14px;text-decoration:none}
.cc-block-desc{margin:6px 0 18px;color:#86909C;font-size:13.5px;line-height:1.85}

/* ---------- 投票迷你区 ---------- */
.cc-vote-mini{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.cc-rank{list-style:none;margin:0;padding:0}
.cc-rank li{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px dashed #E5E6EB}
.cc-rank li:last-child{border-bottom:0}
.cc-rank em{width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:#E8F3FF;color:#1677FF;font-style:normal;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cc-rank img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:0 0 52px}
.cc-rank b{display:block;color:#1D2129;font-size:14.5px;font-weight:600}
.cc-rank span{color:#86909C;font-size:12.5px}
.cc-vote-cta p{margin:0 0 14px;color:#4E5969;font-size:14px}
.cc-vote-cta b{color:#1677FF}

/* ---------- 数据条 ---------- */
.cc-chips{display:flex;flex-wrap:wrap;gap:14px 26px;padding:20px 22px;border-radius:14px;background:#F7FAFF;border:1px solid #E8F3FF}
.cc-chips span{color:#4E5969;font-size:14px}
.cc-chips i{color:#1677FF;font-style:normal;margin-right:6px}
.cc-chips b{color:#1677FF;margin-left:6px}

/* ---------- 筛选 ---------- */
.cc-filter{margin:28px 0 18px;padding:18px;border-radius:14px;background:#FFFFFF;border:1px solid #E5E6EB}
.cc-search{display:flex;gap:10px;margin-bottom:14px}
.cc-search input{flex:1;background:#FFFFFF;border:1px solid #E5E6EB;border-radius:9px;padding:11px 14px;color:#1D2129;outline:none;font-size:14px}
.cc-search input::placeholder{color:#86909C}
.cc-search input:focus{border-color:#1677FF;box-shadow:0 0 0 3px rgba(22,119,255,.10)}
.cc-search button{background:linear-gradient(135deg,#1677FF,#0958D9);border:0;color:#FFFFFF;font-weight:700;border-radius:9px;padding:0 22px;cursor:pointer}
.cc-search button:hover{filter:brightness(1.06)}
.cc-cats,.cc-sorts{display:flex;flex-wrap:wrap;gap:8px}
.cc-cats{margin-bottom:10px}
.cc-cats a,.cc-sorts a{padding:6px 13px;border-radius:999px;border:1px solid #E5E6EB;background:#FFFFFF;color:#4E5969;font-size:13.5px;text-decoration:none;transition:.2s}
.cc-cats a:hover,.cc-sorts a:hover{color:#1677FF;border-color:#BCD4FF;background:#F7FAFF}
.cc-cats a.on,.cc-sorts a.on{background:#E8F3FF;border-color:#1677FF;color:#1677FF;font-weight:600}
.cc-cats a i{font-style:normal;opacity:.7;font-size:12px;margin-left:4px}
.cc-count{color:#86909C;font-size:14px;margin:0 0 16px}
.cc-count b{color:#1677FF}

/* ---------- 作品网格 ---------- */
.cc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cc-card{display:block;border-radius:14px;overflow:hidden;text-decoration:none;background:#FFFFFF;border:1px solid #E5E6EB;transition:.25s}
.cc-card:hover{transform:translateY(-4px);border-color:#BCD4FF;box-shadow:0 18px 36px -22px rgba(22,119,255,.35)}
.cc-card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#F2F3F5}
.cc-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s}
.cc-card:hover .cc-card-img img{transform:scale(1.05)}
.cc-cat{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.94);border:1px solid #E8F3FF;color:#1677FF;font-size:12px;padding:3px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.cc-flag{position:absolute;right:10px;top:10px;background:linear-gradient(135deg,#1677FF,#0958D9);color:#FFFFFF;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.cc-card-body{padding:15px 16px 17px}
.cc-card-body h3{margin:0 0 8px;color:#1D2129;font-size:16px;font-weight:700;line-height:1.5}
.cc-card-body p{margin:0 0 12px;color:#86909C;font-size:13px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:#86909C;font-size:12.5px}

/* ---------- 分页 ---------- */
.cc-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:26px 0 8px}
.cc-pager a{min-width:38px;height:38px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;border:1px solid #E5E6EB;background:#FFFFFF;color:#4E5969;text-decoration:none;font-size:14px}
.cc-pager a:hover{color:#1677FF;border-color:#BCD4FF}
.cc-pager a.on{background:linear-gradient(135deg,#1677FF,#0958D9);color:#FFFFFF;font-weight:700;border-color:transparent}
.cc-pg-info{margin-left:auto;color:#86909C;font-size:13px}

/* ---------- 空态 / 提示 ---------- */
.cc-empty{padding:48px 20px;text-align:center;color:#86909C;font-size:14px;border:1px dashed #E5E6EB;border-radius:14px;background:#FFFFFF}
.cc-empty a{color:#1677FF}
.cc-dim{color:#86909C}
.cc-gold{color:#1677FF!important}
.cc-alert{margin:18px 0;padding:13px 16px;border-radius:10px;background:#F7FAFF;border:1px solid #E8F3FF;color:#4E5969;font-size:14px}
.cc-alert a{color:#1677FF;font-weight:600}
.cc-alert-ok{background:#F0FBF6;border-color:#CDEEDE;color:#2C7A56}
.cc-note{margin:32px 0 8px;padding:24px;border-radius:14px;background:#F7FAFF;border:1px solid #E8F3FF}
.cc-note h3{margin:0 0 12px;color:#1D2129;font-size:17px}
.cc-note ul{margin:0 0 16px;padding-left:20px;color:#4E5969;font-size:13.5px;line-height:2}
.cc-note b{color:#1677FF}
.cc-note-light{background:#FFFFFF;border-color:#E5E6EB}
.cc-note-light h3{color:#1D2129}
.cc-link{color:#1677FF;text-decoration:none;font-size:14px}

/* ---------- 按钮 ---------- */
.cc-btn{display:inline-block;padding:11px 24px;border-radius:9px;border:0;cursor:pointer;font-weight:700;font-size:14px;
  background:linear-gradient(135deg,#1677FF,#0958D9);color:#FFFFFF;text-decoration:none;transition:.2s;text-align:center}
.cc-btn:hover{filter:brightness(1.06);color:#FFFFFF}
.cc-btn-sm{padding:7px 16px;font-size:13px}
.cc-btn-block{display:block;width:100%;margin-top:12px}
.cc-btn-ghost{display:block;width:100%;margin-top:10px;padding:10px 20px;border-radius:9px;cursor:pointer;font-size:14px;
  background:#FFFFFF;border:1px solid #BCD4FF;color:#1677FF}
.cc-btn-ghost:hover{background:#F7FAFF}

/* ---------- 作品详情（旧结构兼容） ---------- */
.cc-detail{display:grid;grid-template-columns:1fr 350px;gap:26px;margin-top:28px}
.cc-detail-img{border-radius:14px;overflow:hidden;background:#F2F3F5;border:1px solid #E5E6EB}
.cc-detail-img img{width:100%;display:block}
.cc-detail-body{margin-top:22px;background:#FFFFFF;border:1px solid #E5E6EB;border-radius:14px;padding:24px}
.cc-detail-body h3{color:#1677FF;font-size:17px;margin:20px 0 10px}
.cc-detail-body h3:first-child{margin-top:0}
.cc-detail-body p,.cc-detail-body li{color:#4E5969;font-size:14px;line-height:1.95}
.cc-detail-body b{color:#1677FF}
.cc-invote{margin-top:16px;padding:16px 18px;border-radius:12px;background:#F7FAFF;border:1px solid #E8F3FF;color:#4E5969;font-size:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cc-invote b{color:#1677FF;font-size:17px}
.cc-panel{background:#FFFFFF;border:1px solid #E5E6EB;border-radius:14px;padding:20px;margin-bottom:18px}
.cc-panel-plain{background:#F7FAFF}
.cc-panel h3{margin:0 0 16px;color:#1D2129;font-size:17px;line-height:1.6}
.cc-panel h4{margin:0 0 14px;color:#1D2129;font-size:15px}
.cc-h3{margin:0 0 16px!important;color:#1D2129;font-size:18px!important}
.cc-meta-list div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #E5E6EB;font-size:14px}
.cc-meta-list div:last-child{border-bottom:0}
.cc-meta-list span{color:#86909C}
.cc-meta-list b{color:#1D2129;font-weight:600;text-align:right}
.cc-tags{margin:14px 0 4px;display:flex;flex-wrap:wrap;gap:8px}
.cc-tags a{color:#1677FF;font-size:13px;text-decoration:none;background:#E8F3FF;border-radius:999px;padding:3px 11px}
.cc-designer{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cc-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:linear-gradient(135deg,#1677FF,#0958D9);color:#FFFFFF;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
.cc-designer b{display:block;color:#1D2129;font-size:15px}
.cc-designer span{color:#86909C;font-size:12.5px}
.cc-dstat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.cc-dstat div{text-align:center;padding:10px 6px;border-radius:10px;background:#F7F8FA}
.cc-dstat b{display:block;color:#1677FF;font-size:17px}
.cc-dstat span{color:#86909C;font-size:12px}
.cc-mini-list{display:grid;gap:10px}
.cc-mini{display:flex;align-items:center;gap:10px;text-decoration:none;color:#4E5969;font-size:13px}
.cc-mini img{width:46px;height:46px;border-radius:9px;object-fit:cover;flex:0 0 46px}
.cc-mini:hover{color:#1677FF}
.cc-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;vertical-align:middle}
.cc-badge-ok{background:#F0FBF6;color:#2C7A56}
.cc-badge-warn{background:#E8F3FF;color:#1677FF}
.cc-badge-no{background:#FFF1F0;color:#CF1322}

/* ---------- 表单 ---------- */
.cc-form-wrap{max-width:820px;margin:28px auto 0}
.cc-form{padding:26px;border-radius:16px;background:#FFFFFF;border:1px solid #E5E6EB}
.cc-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cc-field{margin-bottom:18px}
.cc-field label{display:block;color:#1D2129;font-size:14px;margin-bottom:8px;font-weight:600}
.cc-field label i{color:#CF1322;font-style:normal}
.cc-field input,.cc-field select,.cc-field textarea{width:100%;background:#FFFFFF;border:1px solid #E5E6EB;
  border-radius:9px;padding:11px 14px;color:#1D2129;outline:none;font-size:14px;font-family:inherit}
.cc-field input::placeholder,.cc-field textarea::placeholder{color:#86909C}
.cc-field input:focus,.cc-field select:focus,.cc-field textarea:focus{border-color:#1677FF;box-shadow:0 0 0 3px rgba(22,119,255,.10)}
.cc-field small{display:block;color:#86909C;font-size:12px;margin-top:6px}
.cc-field input[type=file]{padding:9px 12px;background:#FFFFFF}
.cc-form-foot{display:flex;align-items:center;gap:16px;margin-top:6px}

/* ---------- 统计卡 / Tab ---------- */
.cc-stat{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:28px 0 22px}
.cc-stat div{padding:18px 14px;border-radius:13px;background:#FFFFFF;border:1px solid #E5E6EB;text-align:center}
.cc-stat b{display:block;color:#1D2129;font-size:22px;margin-bottom:6px}
.cc-stat span{color:#86909C;font-size:12.5px}
.cc-tabs{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.cc-tabs a{padding:9px 18px;border-radius:9px;border:1px solid #E5E6EB;background:#FFFFFF;color:#4E5969;text-decoration:none;font-size:14px}
.cc-tabs a.on{background:#E8F3FF;border-color:#1677FF;color:#1677FF;font-weight:600}
.cc-tabs-add{margin-left:auto;border-color:#BCD4FF!important;color:#1677FF!important}
.cc-hello{margin-top:18px;font-size:13.5px}
.cc-hello a{color:#1677FF}

/* ---------- 表格 ---------- */
.cc-table{width:100%;border-collapse:collapse;font-size:14px}
.cc-table th{text-align:left;padding:13px 12px;color:#86909C;font-weight:600;font-size:13px;border-bottom:1px solid #E5E6EB;white-space:nowrap}
.cc-table td{padding:13px 12px;border-bottom:1px solid #F2F3F5;color:#4E5969;vertical-align:middle}
.cc-table tr:last-child td{border-bottom:0}
.cc-table tr:hover td{background:#F7F8FA}
.cc-tlink{display:inline-flex;align-items:center;gap:10px;color:#1D2129;text-decoration:none}
.cc-tlink:hover{color:#1677FF}
.cc-tlink img{width:46px;height:46px;border-radius:9px;object-fit:cover}
.cc-thumb{width:46px;height:46px;border-radius:9px;object-fit:cover;vertical-align:middle;margin-right:10px}
.cc-note-txt{display:block;color:#CF1322;font-size:12px;font-style:normal;margin-top:4px}
.cc-td-no{color:#86909C;width:52px}
.cc-td-bar{width:180px}
.cc-td-votes{width:80px}
.cc-td-votes b{color:#1677FF;font-size:16px}

/* ---------- 投票列表 ---------- */
.cc-vote-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap;margin:28px 0 22px;padding-bottom:18px;border-bottom:1px solid #E5E6EB}
.cc-vote-head h2{margin:0 0 10px;color:#1D2129;font-size:23px}
.cc-vote-head p{margin:0;color:#86909C;font-size:14px;line-height:1.85;max-width:660px}
.cc-vote-facts{display:flex;gap:18px;flex-wrap:wrap;color:#4E5969;font-size:13.5px}
.cc-vote-facts b{color:#1677FF}
.cc-votelist{display:grid;gap:16px}
.cc-vitem{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:18px;border-radius:14px;background:#FFFFFF;border:1px solid #E5E6EB;transition:.25s}
.cc-vitem:hover{border-color:#BCD4FF}
.cc-vitem-img{position:relative;border-radius:11px;overflow:hidden;background:#F2F3F5}
.cc-vitem-img img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1}
.cc-rank-no{position:absolute;left:8px;top:8px;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.92);color:#4E5969;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cc-rank-no.r1{background:linear-gradient(135deg,#1677FF,#0958D9);color:#FFFFFF}
.cc-rank-no.r2{background:linear-gradient(135deg,#7CA9F0,#4E86E0);color:#FFFFFF}
.cc-rank-no.r3{background:linear-gradient(135deg,#A8C4F5,#7CA9F0);color:#FFFFFF}
.cc-vitem-body h3{margin:0 0 8px;color:#1D2129;font-size:17px}
.cc-vitem-body p{margin:0 0 14px;color:#86909C;font-size:13.5px;line-height:1.8}
.cc-progress{height:8px;border-radius:999px;background:#F2F3F5;overflow:hidden;margin-bottom:12px}
.cc-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1677FF,#7CA9F0);transition:width .5s}
.cc-progress-sm{height:6px;margin:0}
.cc-vitem-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cc-votes{color:#4E5969;font-size:13.5px}
.cc-votes b{color:#1677FF;font-size:18px;margin-right:2px}
.cc-vote-btn{margin-left:auto;padding:9px 20px;border-radius:9px;border:0;cursor:pointer;font-weight:700;font-size:13.5px;
  background:linear-gradient(135deg,#1677FF,#0958D9);color:#FFFFFF;text-decoration:none}
.cc-vote-btn:hover{filter:brightness(1.06)}
.cc-vote-btn.done{background:#F0FBF6;color:#2C7A56;cursor:default}

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .cc-hero-title{font-size:26px}
  .cc-entry{grid-template-columns:1fr}
  .cc-grid{grid-template-columns:repeat(2,1fr)}
  .cc-detail{grid-template-columns:1fr}
  .cc-vote-mini{grid-template-columns:1fr}
  .cc-stat{grid-template-columns:repeat(2,1fr)}
  .cc-vitem{grid-template-columns:1fr}
  .cc-vitem-img img{aspect-ratio:16/9}
}
@media (max-width:640px){
  .cc-hero .cc-container{padding-top:26px;padding-bottom:22px}
  .cc-hero-title{font-size:22px}
  .cc-grid{grid-template-columns:1fr}
  .cc-row{grid-template-columns:1fr}
  .cc-entry{padding-top:0}
  .cc-card-block{padding:20px 16px}
  .cc-pg-info{width:100%;margin:6px 0 0;text-align:center}
  .cc-tabs-add{margin-left:0}
  .cc-table{font-size:13px}
  .cc-table th,.cc-table td{padding:10px 8px}
  .cc-vote-head{align-items:flex-start}
}