/* 净因全站原型 · 底子（第 3 版）：从星系长出来的设计语言。主题：克制与高级。
   - 天：只在星系和工作台的“窗”里；深空的底，内容是光。
   - 纸：要读、要写的东西；衬线，宽行距，没有描线方框。
   - 台：要操作的东西（顶栏、面板、聊天、表单）；无衬线，紧凑清楚；浮在天上的用半透明的玻璃。
   字：六档 13 · 14 · 16 · 18 · 22 · 30；界面最小 13px；衬线只给内容和名字；中文不拉字距（只有字标“净因”和天上的区名例外）。
   色：底色、三层灰、一个强调色。琥珀只代表“你”；蓝白和金只表示内容的新和旧；状态用小圆点加字。
   形：圆角两档（8px 给按钮、输入框、标签；14px 给卡片、面板）加圆形（头像）；分组靠留白和很浅的底色；胶囊只给主按钮；阴影只给浮层。
   动：进出 180ms 的淡入；减少动画时全部直接到位。 */
:root{
  --serif:"Noto Serif SC","Source Han Serif SC","Source Han Serif CN","Songti SC","STSong",serif;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --f1:13px;--f2:14px;--f3:16px;--f4:18px;--f5:22px;--f6:30px;
  --r-s:8px;--r-l:14px;--r-card:14px;--r-pill:999px;--top:60px;
  --ease:cubic-bezier(.22,.7,.2,1);--dur:.18s;
}
:root,[data-look="night"]{
  --bg:#07080c;--bg2:#0c0e14;
  --ink:rgba(234,237,243,.94);--ink2:rgba(234,237,243,.72);--ink3:rgba(234,237,243,.55);--ink4:rgba(234,237,243,.18);
  --line:rgba(234,237,243,.075);--line2:rgba(234,237,243,.14);
  --fill:rgba(234,237,243,.06);--fill2:rgba(234,237,243,.1);--hover:rgba(234,237,243,.055);
  --panel:rgba(12,14,20,.8);--panel2:rgba(17,19,26,.97);--glass:rgba(12,14,20,.56);
  --paper:#0e1017;--paper2:#131620;--paper-ink:rgba(234,237,243,.92);
  --acc:#e8b36a;--acc-soft:rgba(232,179,106,.14);--acc-ink:#f0c68a;
  --new:#bcd3ff;--old:#f1b37c;
  --fol:#aab8d2;--warn:#e7a07f;--ok:#93cfae;--q:#b4c3d8;
  --shadow:0 18px 50px rgba(0,0,0,.45);color-scheme:dark;
}
[data-look="day"]{
  --bg:#f6f5f1;--bg2:#efede7;
  --ink:rgba(24,26,31,.92);--ink2:rgba(24,26,31,.74);--ink3:rgba(24,26,31,.66);--ink4:rgba(24,26,31,.18);
  --line:rgba(24,26,31,.085);--line2:rgba(24,26,31,.16);
  --fill:rgba(24,26,31,.05);--fill2:rgba(24,26,31,.085);--hover:rgba(24,26,31,.045);
  --panel:rgba(252,251,248,.86);--panel2:rgba(255,255,253,.98);--glass:rgba(252,251,248,.68);
  --paper:#fcfbf8;--paper2:#f3f1ec;--paper-ink:rgba(22,24,29,.92);
  --acc:#a8671c;--acc-soft:rgba(168,103,28,.12);--acc-ink:#8a5210;
  --new:#3d63b5;--old:#b3641f;
  --fol:#4d5f86;--warn:#a44d26;--ok:#2f6f4d;--q:#45617f;
  --shadow:0 1px 2px rgba(20,20,20,.05),0 14px 38px rgba(20,20,20,.1);color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:400 var(--f3)/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;font-feature-settings:"palt" 0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink4)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--acc-soft)}
::placeholder{color:var(--ink3);opacity:1}
/* 焦点：键盘走到哪里，一眼看得见 */
:focus{outline:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r-s)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:var(--r-s);font-size:var(--f2)}
.skip:focus{top:10px}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
.muted{color:var(--ink2)}.faint{color:var(--ink3)}
/* 图标：一套线性图标，跟着字的颜色走 */
.i{display:inline-block;width:18px;height:18px;flex:0 0 auto;vertical-align:-3px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.i.sm{width:15px;height:15px;vertical-align:-2px}
.i.lg{width:22px;height:22px}
/* 示例：安静地标一下，不抢内容 */
.sample{font-size:var(--f1);color:var(--ink3);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-family:var(--sans);font-weight:400;line-height:1.4;vertical-align:1px}
.sample::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink4)}
.mine{font-size:var(--f1);color:var(--acc-ink);white-space:nowrap}
.warn{color:var(--warn)}.ok{color:var(--ok)}
.hair{height:1px;background:var(--line);border:0;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.off{display:none!important}
/* 按钮：主按钮是胶囊（一屏一个）；次按钮是浅底的圆角块；文字按钮只是字；图标按钮是圆的 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 20px;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);font-size:var(--f2);font-weight:500;transition:opacity var(--dur),background var(--dur);white-space:nowrap;border:0}
.btn:hover{opacity:.88;text-decoration:none}
.btn.ghost{border-radius:var(--r-s);background:var(--fill);color:var(--ink);font-weight:400}
.btn.ghost:hover{background:var(--fill2);opacity:1}
.btn.sm{height:32px;padding:0 14px;font-size:var(--f1)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn .i{margin-left:-2px}
.lk{color:var(--ink2);font-size:var(--f1);text-decoration:none}
.lk:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink4)}
/* 切换：一排里选一个（不再是描边的胶囊） */
.pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:var(--r-s);color:var(--ink2);font-size:var(--f2);transition:background var(--dur),color var(--dur);white-space:nowrap;border:0;background:none}
.pill:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.pill.on{color:var(--ink);background:var(--fill2)}
.pill.sm{height:28px;font-size:var(--f1);padding:0 10px}
/* 标签：词、行业、一个小类 */
.chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:var(--r-s);background:var(--fill);color:var(--ink2);font-size:var(--f1);white-space:nowrap;transition:color var(--dur),background var(--dur);border:0}
.chip:hover{color:var(--ink);text-decoration:none;background:var(--fill2)}
.chip.me{color:var(--acc-ink);background:var(--acc-soft)}
.chip button{margin-left:2px;color:var(--ink3);font-size:var(--f2);line-height:1}
.kbd{font:var(--f1) var(--mono);border:1px solid var(--line2);border-radius:5px;padding:0 5px;color:var(--ink3)}
.scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.scroll::-webkit-scrollbar{width:6px;height:6px}.scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
/* 返回：每一页左上角同一个 ← */
.back{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 8px;border-radius:var(--r-s);color:var(--ink2);font-size:var(--f2);background:none;margin-bottom:12px;margin-left:-8px;transition:background var(--dur),color var(--dur)}
.back .ar{font-size:0;line-height:0;width:18px;height:18px;display:inline-block;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.back:hover{color:var(--ink);background:var(--hover);text-decoration:none}
/* 表达 / 讨论：一个字的记号，不用彩色描边的框 */
.kd{display:inline-flex;align-items:center;gap:5px;font-size:var(--f1);line-height:1.4;margin-right:10px;vertical-align:2px;white-space:nowrap;font-family:var(--sans);font-weight:400;color:var(--ink3)}
.kd::before{content:"";width:6px;height:6px;border-radius:50%;border:1.3px solid currentColor}
.kd.say::before{background:currentColor}
.kd.talk{color:var(--q)}
/* 状态：小圆点加字 */
.st-open,.st-done{display:inline-flex;align-items:center;gap:5px;font-size:var(--f1);white-space:nowrap}
.st-open{color:var(--warn)}.st-done{color:var(--ok)}
.st-open::before,.st-done::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-open.big,.st-done.big{font-size:var(--f3)}
/* 头像：每个人的星座缩略图（由他做过的事长出来）；你是琥珀色 */
.av{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--paper2);overflow:hidden;vertical-align:middle}
.av svg{width:100%;height:100%;display:block}
.av.sm{width:28px;height:28px}.av.lg{width:56px;height:56px}.av.xl{width:88px;height:88px}
/* 未读：一种小圆点，数多时加数字 */
.unread{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;background:var(--acc);color:#16120b;font:500 11px/18px var(--sans);padding:0 5px}
[data-look="day"] .unread{background:var(--acc-ink);color:#fff}
.udot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc)}
@keyframes jyfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}