/* cc-theme.css —— 「丹霞」统一主题层（2026-10-03）
   用途：把 app.css 之外的独立页面（社区作品 / 笔记 / 笔记分享 / 作品分享页）
        统一到平台当前设计语言。
   规则：
     · 令牌与 public/app.css 的 :root 保持一致 → 换主题时两处一起改。
     · 本文件必须在该页自己的 <style> 之后引入，才能覆盖页面里的写死色。
     · 只改「颜色 / 圆角 / 描边 / 阴影 / 字色」，不动尺寸与布局，避免破坏原有排版。 */

:root{
  /* ===== 丹霞令牌（与 app.css 同步） ===== */
  --bg:#fbe8d9; --panel:#ffffff; --panel2:#ffe0c9; --line:#e9bda3;
  --text:#33180f; --muted:#7d5544;
  --accent:#d94a22; --accent2:#178a55; --warn:#b3671a; --danger:#c03030;
  --brand1:#f2622c; --brand2:#cf2f63; --brand3:#7a4ddb;
  --radius:12px; --radius-s:12px;
  --shadow:0 8px 22px rgba(150,70,30,.14);
  --shadow-s:0 2px 10px rgba(150,70,30,.10);
  --mono:ui-monospace,Consolas,"Cascadia Mono","Courier New",monospace;
  --grad:linear-gradient(135deg,var(--brand1),var(--brand2) 55%,var(--brand3));
  --tint:rgba(217,74,34,.10);
}

/* ========== A. 通用底座 ========== */
html{background:var(--bg)}
body{background:var(--bg);color:var(--text)}
a{color:var(--accent)}

input,select,textarea{border-color:var(--line);background:var(--panel);color:var(--text);border-radius:var(--radius-s)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
input:focus,select:focus,textarea:focus{outline:2px solid var(--tint);outline-offset:1px}

button{border-color:var(--line);background:var(--panel);color:var(--text);border-radius:var(--radius-s)}
button:hover{border-color:var(--accent);color:var(--accent)}
button.primary,button.on,
#mask button:not(.gray),#coverMask .cfoot .copen,
.meta .open,.tv .acts a:not(.ghost),.tv .acts button:not(.ghost){
  background:var(--grad);border-color:transparent;color:#fff}
button.primary:hover,button.on:hover,.meta .open:hover{filter:brightness(1.05)}

/* 页头：白底 + 顶部品牌渐变条（与平台顶栏同一元素） */
header{background:var(--panel);color:var(--text);border-bottom:1px solid var(--line);position:relative}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
header .note,header .count,header .who{color:var(--muted)}
header input,header select,header button{background:var(--panel2);border-color:var(--line);color:var(--text)}
header button.primary,header a.btn{background:var(--grad);border-color:transparent;color:#fff}
header a.btn.ghost{background:var(--panel2);color:var(--accent);border-color:var(--line)}

/* 顶栏右端的页面工具（笔记 / 社区作品）——与 header 同款配色 */
.cct-extra .note,.cct-extra .count,.cct-extra .who{color:var(--muted)}
.cct-extra input,.cct-extra select,.cct-extra button{background:var(--panel2);border-color:var(--line);color:var(--text)}
.cct-extra button.primary,.cct-extra a.btn{background:var(--grad);border-color:transparent;color:#fff}

.muted,.note,.small,.meta .a,.meta .mini,.count,.tip,footer{color:var(--muted)}
.ok{color:var(--accent2)}.bad{color:var(--danger)}

/* 弹层统一暖色遮罩 */
#mask,#coverMask,.ov{background:rgba(51,24,15,.45)}
#mask .box,#coverMask .cbox,.ov .box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.toast{background:var(--text);color:#fff}

/* ========== B. 社区作品（community.html） ========== */
.tabs{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow-s)}
.tabs button{color:var(--muted)}
.tabs button.on{background:var(--grad);color:#fff;box-shadow:0 3px 10px var(--tint)}
.tabs button .n{color:inherit}

.card{background:var(--panel);box-shadow:var(--shadow-s)}
.card:hover{box-shadow:var(--shadow)}
.thumb{background:var(--panel2)}
.thumb .ph,.thumb .ext,#coverMask .cimg .ph{color:var(--muted)}
.meta .t{color:var(--text)}
.meta .edit,.empty a{color:var(--accent)}
.meta .dl{border-color:var(--line);color:var(--muted)}
.meta .wx{background:var(--accent2);color:#fff}
.meta .wx:hover{background:#126e44}
.lock{background:rgba(51,24,15,.86)}
.empty{background:var(--panel);color:var(--muted)}
#mask .link{color:var(--accent);background:var(--panel2)}
#mask .qr{border-color:var(--line)}
#mask button.gray,#coverMask .chead .cx{background:var(--panel2);color:var(--text)}
#coverMask .chead{border-bottom-color:var(--line)}
#coverMask .chead .ct{color:var(--text)}
#coverMask .cimg{background:var(--panel2)}
#coverMask .cfoot .cinfo{color:var(--muted)}
#coverMask .cfoot .cdl{border-color:var(--line);color:var(--muted)}
#layout #cats{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow-s)}
#cats h3{color:var(--muted)}
#cats button{color:var(--text)}
#cats button:hover{background:var(--panel2)}
#cats button.on{background:var(--grad);color:#fff}
#cats button .n{color:var(--muted)}
#cats button.on .n{color:rgba(255,255,255,.85)}
#cats .sub{border-top-color:var(--line)}
#search{border-color:var(--line);background:var(--panel)}
#tip{color:var(--muted)}

/* ========== C. 笔记（note.html / note-view.html） ========== */
#col1,#col3,#rich,.colfoot{background:var(--panel)}
#col2{background:var(--panel2)}
#col1,#col2,#col3,
.colhead,.tabs,.filters,.colfoot,#nav,#doc{border-color:var(--line)}
.colhead{color:var(--text)}
.item:hover{background:var(--panel2)}
.item.on{background:var(--tint);border-color:var(--accent)}
.item .sub{color:var(--muted)}
.filters .cnt{color:var(--muted)}
#sectitle,#editor,#rich,#mindbox{border-color:var(--line)}
#editor,#mindbox{background:var(--panel)}
#doc{border-color:var(--line);box-shadow:var(--shadow-s)}
#doc h2{border-bottom-color:var(--line)}
#doc blockquote{border-left-color:var(--line);background:var(--panel2);color:var(--text)}
#doc a{color:var(--accent)}
#doc img{border-color:var(--line)}
#doc code{background:var(--panel2);color:var(--text)}
#doc .sec{border-top-color:var(--line)}
#nav a:hover{background:var(--panel2)}
#nav h4{color:var(--muted)}
#nav a{color:var(--text)}
.ccnp-text h1,.ccnp-text h2{border-bottom-color:var(--line)}
.ccnp-text blockquote{border-left-color:var(--line);background:var(--panel2);color:var(--text)}
.ccnp-text code{background:var(--panel2);color:var(--text)}
.ccnp-blk-img img,.ccnp-blk-mind img{border-color:var(--line)}
.ccnp-blk-code{border-color:var(--line)}
.ccnp-code-h{background:var(--panel2);color:var(--muted)}
.ccnp-blk-mind:hover img{border-color:var(--accent)}

/* ========== D. 作品分享页（p.html） ========== */
#bar{background:var(--grad)}
#info{background:var(--panel);border-bottom-color:var(--line)}
#info .stu{color:var(--text)}
#info .work{color:var(--muted)}
#info .time{color:var(--muted)}
#pad{background:var(--panel);border-top-color:var(--line)}
#pad button{background:var(--panel2);color:var(--text);box-shadow:var(--shadow-s)}
#pad button:active,#pad button.on{background:var(--accent);color:#fff}
#pad button.go{background:var(--accent2);color:#fff}
#pad button.stop{background:var(--danger);color:#fff}
#pad .sep{background:var(--line)}
#pad .lbl{color:var(--muted)}
#boot{color:var(--muted)}
#boot .big{color:var(--text)}
.tv .cover,.tv table{background:var(--panel);border-color:var(--line)}
.tv .cover .noph{color:var(--muted)}
.tv h3{color:var(--text)}
.tv td{border-bottom-color:var(--line);color:var(--muted)}
.tv td:first-child{color:var(--muted)}
.tv td b{color:var(--text)}
.tv .note{color:var(--muted)}
.tv .acts a.ghost{background:var(--panel2);color:var(--text)}

/* ========== E. id 级兜底（页面里用 id 写死的元素，优先级比类高） ========== */
header input#ntitle{background:var(--panel2);color:var(--text);border-color:var(--line)}
#pencustom{background:var(--panel2)!important;border-color:var(--line)!important}