/* ═══════════════════════════════════════════════════════════
   「房东的冰箱便签」· 内置CSS (builtInCss)
   视觉主题：温馨别墅 · 奶油墙与原木 · 暖光 · 彩色便签条
   母题：冰箱门上的便签就是规则，暖融融的房子养着一屋子活人
   道具：冰箱磁贴 / 便签条 / 原木搁板 / 亚麻桌布 / 记号笔 / 透明胶带
   色板：奶油白 #FFF8EE · 暖木 #B9804F · 蜜橘 #E07A3F · 抹茶 #7FAE6B
         便签彩 黄#FFE08A 粉#FFC4D6 蓝#C8DFFF 绿#D2E8C0 橙#FFD8A8
   组件：状态栏 / 当前便签条 / 房东档案14行 / 在场人物 / 记忆卡 / 行动选项 / 思维链
   纯CSS：details/summary · 零JS 零事件绑定
   ═══════════════════════════════════════════════════════════ */

/* ── 0. 设计令牌（温馨别墅色板） ── */
.dl-self,.dl-cast,.dl-memory,.dl-actions,.dl-chain,.status-bar,.dl-notes{
  --cream:#FFF8EE;        /* 奶油白墙·纸面 */
  --cream-2:#F7EEDD;      /* 旧亚麻·草稿 */
  --milk:#FDF3E3;         /* 牛奶底·卡面 */
  --wood:#B9804F;         /* 暖木·主 */
  --wood-2:#8F6846;       /* 深木 */
  --wood-3:#C9A57B;       /* 浅木 */
  --ink:#4A3B32;          /* 暖墨字 */
  --ink-2:#7C6A5D;        /* 次级字 */
  --ink-3:#8A7468;        /* 弱化字 */
  --orange:#E07A3F;       /* 蜜橘·主强调 */
  --orange-2:#C4642B;     /* 深橘 */
  --tea:#7FAE6B;          /* 抹茶绿 */
  --tea-2:#5E8A4E;        /* 深抹茶 */
  --red:#D95D5D;          /* 暖红·警示 */
  --gold:#C99A3C;         /* 暖金 */
  --note-y:#FFE08A;       /* 便签黄 */
  --note-p:#FFC4D6;       /* 便签粉 */
  --note-b:#C8DFFF;       /* 便签蓝 */
  --note-g:#D2E8C0;       /* 便签绿 */
  --note-o:#FFD8A8;       /* 便签橙 */
  --tape:#F5E6C8;         /* 透明胶带 */
  --line:#E8D9C4;         /* 暖格线 */
  --line-soft:rgba(196,168,138,.4);
  --hi:rgba(255,224,138,.45); /* 荧光便签高亮 */
  --font:-apple-system,'PingFang SC','Microsoft YaHei','SimSun','Hiragino Sans GB',sans-serif;
  box-sizing:border-box;position:relative;
}

/* ── 1. 通用卡壳（亚麻桌布底 + 暖木描边 + 左上角胶带 + 圆润折角） ── */
.dl-self,.dl-cast,.dl-memory,.dl-actions{
  width:100%;max-width:none;margin:12px auto 0;
  background:
    radial-gradient(ellipse 60% 36% at 8% -4%, rgba(224,122,63,.06), transparent 62%),
    var(--milk);
  border:1.5px solid var(--line);
  border-radius:8px;              /* 圆润温馨 */
  color:var(--ink);
  font-family:var(--font);font-size:13px;line-height:1.5;
  box-shadow:0 1px 4px rgba(143,104,70,.12),0 0 0 1px #fff inset;
  overflow:hidden;
}
/* 左上角透明胶带 */
.dl-self::before,.dl-cast::before,.dl-memory::before,.dl-actions::before{
  content:'';position:absolute;top:-6px;left:20px;width:52px;height:16px;
  background:var(--tape);opacity:.8;
  transform:rotate(-3deg);
  border-left:1px dashed rgba(180,150,80,.4);border-right:1px dashed rgba(180,150,80,.4);
  z-index:2;pointer-events:none;
}
/* 亚麻织纹底 */
.dl-self,.dl-cast,.dl-memory{
  background-image:
    radial-gradient(rgba(196,168,138,.09) 1px, transparent 1px),
    radial-gradient(ellipse 60% 36% at 8% -4%, rgba(224,122,63,.06), transparent 62%);
  background-color:var(--milk);
  background-size:9px 9px,auto;
}
.dl-actions{background-image:radial-gradient(rgba(196,168,138,.09) 1px, transparent 1px);background-size:9px 9px;}

/* ── 2. 卡头 summary（暖木渐变条 · 白字） ── */
.dl-self>summary,.dl-cast>summary,.dl-memory>summary,.dl-actions>summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;
  font-size:12.5px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(180deg,var(--wood),var(--wood-2));
  color:#FFFDF8;
}
.dl-self>summary::-webkit-details-marker,
.dl-cast>summary::-webkit-details-marker,
.dl-memory>summary::-webkit-details-marker,
.dl-actions>summary::-webkit-details-marker{display:none;}
.dl-self>summary em,.dl-cast>summary em{
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.5px;
  color:var(--wood-2);background:#FFF6E8;border-radius:10px;padding:0 8px;
}
/* 卡头图标（summary 内·宽固定居中，防止 emoji 错位） */
.dl-self-ic,.dl-cast-ic,.dl-mem-ic,.dl-act-ic{
  width:22px;height:22px;flex:0 0 22px;display:inline-flex;
  align-items:center;justify-content:center;font-size:13px;line-height:1;
}
/* 箭头 */
.dl-self-arrow,.dl-cast-arrow,.dl-mem-arrow,.dl-act-arrow{
  margin-left:auto;font-size:10px;color:rgba(255,253,248,.85);
  transition:transform .2s;
}
.dl-self[open]>summary .dl-self-arrow,
.dl-cast[open]>summary .dl-cast-arrow,
.dl-memory[open]>summary .dl-mem-arrow,
.dl-actions[open]>summary .dl-act-arrow{transform:rotate(180deg);}

/* ── 3. 行（暖格线 · 左缘木条） ── */
.dl-self-row{
  display:flex;align-items:center;gap:10px;
  padding:7px 14px 7px 12px;
  border-bottom:1px dashed var(--line-soft);
  font-size:12.5px;line-height:1.45;
}
.dl-self-row:last-child{border-bottom:none;}
.dl-self-row::before{
  content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:0 2px 2px 0;
  background:var(--wood);opacity:.85;
}
.dl-s-ic{
  width:24px;height:24px;flex-shrink:0;border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  background:#FFF2DF;color:var(--wood-2);
}
.dl-s-l{
  color:var(--ink-2);flex-shrink:0;min-width:36px;
  font-size:10.5px;font-weight:700;letter-spacing:1px;
}
.dl-s-v{
  flex:1;min-width:0;text-align:right;
  font-size:12.5px;color:var(--ink);line-height:1.45;word-break:break-word;
}
.dl-s-v em{font-style:normal;color:var(--wood-2);font-weight:800;}
.dl-s-v strong{font-style:normal;color:var(--red);font-weight:800;}

/* ── 4. 变更行 = 便签黄高亮 ── */
.dl-self-row.changed{
  background:linear-gradient(90deg,var(--hi),transparent 70%);
  box-shadow:inset 3px 0 0 var(--note-y);
  animation:dl-flag .9s ease;
}
.dl-self-row.changed .dl-s-v{font-weight:800;}
@keyframes dl-flag{0%{background-color:var(--note-y)}100%{background-color:transparent}}

/* ── 5. 状态标签：法务/风评/负面/评级 ── */
.law-clean{color:var(--tea-2);font-weight:800;}
.law-record{color:var(--orange-2);font-weight:800;}
.law-warning{color:var(--red);font-weight:800;animation:dl-blink 1.2s infinite;}
@keyframes dl-blink{0%,100%{opacity:1}50%{opacity:.4}}

.rep-tag{
  display:inline-block;padding:1px 8px;border-radius:10px;
  font-size:10.5px;font-weight:700;letter-spacing:.5px;
  border:1px solid;margin-right:4px;
}
.rep-tag.rp-new{color:var(--wood-2);border-color:var(--wood);background:#FFF6E8;}
.rep-tag.rp-known{color:var(--tea-2);border-color:var(--tea);background:#F1F7EC;}
.rep-tag.rp-backed{color:#8A6A9E;border-color:#A98AC0;background:#F6F0FA;}
.rep-tag.rp-suspect{color:var(--orange-2);border-color:var(--orange);background:#FFF3E8;}
.rep-tag.rp-banned{color:#fff;border-color:var(--red);background:var(--red);}

.neg-clean{color:var(--tea-2);font-weight:800;}
.neg-minor{color:var(--orange-2);font-weight:800;}
.neg-major{color:var(--red);font-weight:800;animation:dl-blink 1.2s infinite;}

.dl-self-rank{
  display:inline-block;min-width:18px;text-align:center;padding:0 5px;
  border-radius:4px;color:#fff;font-size:11px;font-weight:900;margin-right:4px;
}
.dl-self-rank.rk-s{background:#A78BD6;}
.dl-self-rank.rk-a{background:var(--wood);}
.dl-self-rank.rk-b{background:var(--tea);}
.dl-self-rank.rk-c{background:var(--orange);}
.dl-self-rank.rk-d{background:var(--red);}

/* ── 6. 在场人物卡 .dl-cast（同房东行样式） ── */
.dl-cast{margin-top:8px;}

/* ── 7. 记忆卡 .dl-memory（原木搁板 · 分区记事板 · 默认展开） ── */
.dl-memory>summary{background:linear-gradient(180deg,var(--tea),var(--tea-2));}
.dl-mem-body{padding:8px;display:flex;flex-direction:column;gap:7px;}
.dl-mem-sec{
  padding:8px 11px;
  background:var(--cream);
  border:1px solid var(--line);border-radius:6px;
}
.dl-mem-tag{
  display:inline-block;font-size:10px;font-weight:900;letter-spacing:1px;
  margin-bottom:3px;padding:1px 8px;border-radius:9px;color:#fff;
}
/* 四段配色：大总结=暖金 / 长记=暖木 / 小总结=蜜橘 / 下步=抹茶 */
.dl-mem-sec:nth-child(1) .dl-mem-tag{background:linear-gradient(180deg,#D8A94A,var(--gold));}
.dl-mem-sec:nth-child(1){border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(201,154,60,.08),var(--cream));}
.dl-mem-sec:nth-child(2) .dl-mem-tag{background:var(--wood);}
.dl-mem-sec:nth-child(2){border-left:3px solid var(--wood);}
.dl-mem-sec:nth-child(3) .dl-mem-tag{background:var(--orange);}
.dl-mem-sec:nth-child(3){border-left:3px solid var(--orange);}
.dl-mem-sec:nth-child(4) .dl-mem-tag{background:var(--tea);}
.dl-mem-sec:nth-child(4){border-left:3px solid var(--tea);}
.dl-mem-txt{font-size:12.5px;line-height:1.6;color:var(--ink);word-break:break-word;}
.dl-mem-txt em{font-style:normal;color:var(--gold);font-weight:800;}
.dl-mem-txt strong{font-style:normal;color:var(--red);font-weight:800;}

/* ── 8. 行动选项 .dl-actions（暖木圆点序号） ── */
.dl-act-list{padding:6px 0;}
.dl-act-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;
  border-bottom:1px dashed var(--line-soft);
  font-size:12.5px;line-height:1.5;
}
.dl-act-item:last-child{border-bottom:none;}
.dl-act-n{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--wood),var(--wood-2));color:#FFFDF8;font-size:11px;font-weight:900;
  box-shadow:0 1px 2px rgba(143,104,70,.3);
}
.dl-act-t{flex:1;color:var(--ink);}

/* ── 9. 思维链 .dl-chain（草稿便签纸 · 马克笔演算感） ── */
.dl-chain{
  width:100%;max-width:none;margin:4px auto 0;
  background:
    repeating-linear-gradient(0deg, rgba(196,168,138,.10) 0 1px, transparent 1px 26px),
    var(--note-o);
  border:1.5px dashed var(--orange);
  border-radius:6px;
  color:var(--ink-2);
  font-family:var(--font);font-size:11.5px;line-height:1.55;
  overflow:hidden;
}
.dl-chain>summary{
  list-style:none;cursor:default;user-select:none;
  padding:5px 12px;color:var(--orange-2);font-weight:800;letter-spacing:.5px;font-size:11.5px;
}
.dl-chain>summary::-webkit-details-marker{display:none;}
.dl-chain[open]>summary{padding-bottom:4px;border-bottom:1px dashed rgba(196,120,43,.4);}
.dl-chain-body{padding:4px 12px 10px;white-space:pre-line;word-break:break-word;}

/* ── 10. 四格状态栏 .status-bar（2×2 · 木框四格） ── */
.status-bar{
  width:100%;max-width:none;margin:10px auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  font-family:var(--font);
}
.st-item{
  background:var(--milk);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:7px 10px 8px;
  display:flex;flex-wrap:wrap;align-items:center;gap:3px 9px;
  box-shadow:0 1px 3px rgba(143,104,70,.12);
  position:relative;overflow:hidden;
}
.st-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:0 2px 2px 0;
  background:var(--wood);
}
.st-ico{font-size:15px;flex-shrink:0;line-height:1;}
.st-ct{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;}
.st-value{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.st-sub{font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;}
.st-tag{
  flex-shrink:0;align-self:flex-start;font-size:10px;font-weight:900;
  padding:1px 7px;border-radius:8px;color:#fff;
}
.st-item.is-day .st-tag{background:var(--orange);}
.st-item.is-night .st-tag{background:var(--wood-2);}
.st-item.is-late .st-tag{background:#4A3B32;}
.st-bar{width:100%;flex-basis:100%;height:4px;background:#EADBC4;border-radius:2px;overflow:hidden;margin-top:2px;}
.st-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--note-y));border-radius:2px;}
.st-hp .st-bar i{background:linear-gradient(90deg,var(--tea),var(--note-g));}
.st-up .st-value{color:var(--tea-2);}
.st-down .st-value{color:var(--red);}
.status-bar .st-item.st-hp::before{background:var(--tea);}
.status-bar .st-item.st-mood::before{background:var(--orange);}

/* ── 11. 当前便签条 .dl-notes（冰箱门 · 彩色便签 · 每轮必出） ── */
.dl-notes{
  width:100%;max-width:none;margin:10px auto 0;
  background:linear-gradient(172deg,#FDF6E6,#F3E7CE);
  border:1.5px solid var(--line);
  border-radius:10px;
  color:var(--ink);font-family:var(--font);font-size:13px;line-height:1.5;
  box-shadow:0 2px 6px rgba(143,104,70,.14),inset 0 0 26px rgba(255,255,255,.45);
  overflow:hidden;
}
.notes-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:linear-gradient(180deg,var(--wood-3),var(--wood));
  color:#FFFDF8;
  font-size:12.5px;font-weight:800;letter-spacing:1px;
}
.notes-ic{font-size:14px;}
.notes-t{flex:1;}
.notes-n{
  font-size:10.5px;font-weight:800;color:var(--wood-2);background:#FFF6E8;
  border-radius:10px;padding:1px 9px;
}
.notes-body{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:12px 14px;
  background:
    radial-gradient(ellipse 46% 40% at 96% 0%, rgba(224,122,63,.07), transparent 60%),
    radial-gradient(ellipse 40% 40% at 0% 100%, rgba(127,174,107,.08), transparent 60%);
}
/* 单张便签：彩色纸 + 记号笔字 + 上缘压图钉/磁贴 */
.note{
  position:relative;
  padding:10px 12px 8px;
  border-radius:3px;
  box-shadow:0 2px 5px rgba(143,104,70,.18);
  min-height:64px;
  display:flex;flex-direction:column;justify-content:center;
}
.note-pin{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  font-size:13px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.note-txt{font-size:13px;font-weight:800;line-height:1.5;word-break:break-word;}
.note-meta{font-size:10px;margin-top:5px;opacity:.75;font-weight:600;}
/* 便签五色 */
.note.n-y{background:var(--note-y);color:#5D4A17;}
.note.n-y .note-meta{color:#8A7433;}
.note.n-p{background:var(--note-p);color:#7A3A4E;}
.note.n-p .note-meta{color:#9A5A6E;}
.note.n-b{background:var(--note-b);color:#2E4A78;}
.note.n-b .note-meta{color:#5A7AA8;}
.note.n-g{background:var(--note-g);color:#3A5A2E;}
.note.n-g .note-meta{color:#6A8A5E;}
.note.n-o{background:var(--note-o);color:#6E4317;}
.note.n-o .note-meta{color:#9A6A3A;}
/* 空状态 */
.note.empty{
  grid-column:1/-1;min-height:0;padding:12px;
  background:transparent;border:2px dashed var(--line);color:var(--ink-3);
  box-shadow:none;font-weight:600;text-align:center;
}

/* ── 响应式 ── */
@media (max-width:480px){
  .dl-self,.dl-cast,.dl-memory,.dl-actions,.dl-notes{margin:8px auto 0;font-size:12px;}
  .dl-self>summary,.dl-cast>summary,.dl-memory>summary,.dl-actions>summary,.notes-head{padding:8px 11px;font-size:11.5px;}
  .dl-self-row{padding:6px 11px 6px 10px;gap:7px;font-size:11.5px;}
  .dl-s-ic{width:21px;height:21px;font-size:12px;}
  .dl-s-l{font-size:9.5px;min-width:30px;}
  .status-bar{gap:6px;}
  .st-item{padding:7px 8px;gap:7px;}
  .st-value{font-size:12px;}
  .st-sub{font-size:9px;}
  .notes-body{grid-template-columns:1fr;gap:8px;padding:10px;}
  .dl-mem-sec{padding:7px 9px;}
  .dl-act-item{padding:7px 11px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}