:root[data-theme="dark"]{
  --bg:#0b0d11; --panel:#12151b; --panel2:#171b23; --line:#232833; --txt:#e6e9f0; --dim:#8a91a3;
  --accent:#5b9dff; --accent-soft:rgba(91,157,255,.12); --ok:#3ddc97; --warn:#ffb454; --bad:#ff6b6b;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
:root[data-theme="light"]{
  --bg:#f6f7f9; --panel:#ffffff; --panel2:#f2f4f7; --line:#e3e6ec; --txt:#151922; --dim:#6b7280;
  --accent:#2563eb; --accent-soft:rgba(37,99,235,.09); --ok:#0e9f6e; --warn:#b45309; --bad:#dc2626;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}
.app{display:flex;height:100vh;overflow:hidden}
.rail{width:212px;flex:0 0 212px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 18px}
.logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#5b9dff,#a77bff);font-size:18px}
.brand b{display:block;font-size:14px}
.brand small{color:var(--dim);font-size:11px;font-family:var(--mono)}
nav{display:flex;flex-direction:column;gap:2px}
nav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--dim);font-size:13px;cursor:pointer;user-select:none}
nav a i{font-style:normal;width:16px;text-align:center;opacity:.85}
nav a:hover{background:var(--panel2);color:var(--txt)}
nav a.active{background:var(--accent-soft);color:var(--accent)}
.rail-foot{margin-top:auto;padding:10px 6px 0;border-top:1px solid var(--line)}
.status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);font-family:var(--mono)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.dot.bad{background:var(--bad)}
main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:58px;flex:0 0 58px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:var(--panel)}
.crumbs{font-family:var(--mono);font-size:12.5px;color:var(--dim);letter-spacing:.04em}
.tools{display:flex;gap:8px;align-items:center}
input,textarea,select{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:7px 10px;font:inherit;outline:none}
input:focus,textarea:focus{border-color:var(--accent)}
#search{width:240px;font-size:13px}
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:7px 12px;font-size:13px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.ghost{background:transparent}
.view{padding:22px;overflow:auto;flex:1}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.card .k{color:var(--dim);font-size:11.5px;font-family:var(--mono);letter-spacing:.03em;text-transform:uppercase}
.card .v{font-size:22px;font-weight:650;margin-top:6px;font-family:var(--mono)}
.card .v.sm{font-size:14px;font-weight:500}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;margin-top:12px}
@media(max-width:1000px){.split{grid-template-columns:1fr}.rail{display:none}#search{width:150px}}
h2{font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin:26px 0 10px;font-family:var(--mono)}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
th{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);text-align:left;padding:9px 12px;background:var(--panel2);border-bottom:1px solid var(--line)}
td{padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--panel2)}
.mono{font-family:var(--mono);font-size:12px;color:var(--dim)}
.tag{font:500 11px var(--mono);padding:2px 8px;border-radius:20px;border:1px solid var(--line)}
.t-said{color:#7fb0ff;border-color:rgba(91,157,255,.35);background:rgba(91,157,255,.08)}
.t-fact{color:#4fd6a5;border-color:rgba(61,220,151,.3);background:rgba(61,220,151,.08)}
.t-feeling{color:#ffc06b;border-color:rgba(255,180,84,.3);background:rgba(255,180,84,.08)}
.t-person{color:#bda1ff;border-color:rgba(167,123,255,.3);background:rgba(167,123,255,.08)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 12px}
.chip{font:12px var(--mono);padding:3px 10px;border:1px solid var(--line);border-radius:20px;color:var(--dim);cursor:pointer;background:var(--panel)}
.chip.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px 15px;font:12px/1.65 var(--mono);overflow:auto;white-space:pre-wrap;color:#c9d1e0;margin:0}
:root[data-theme="light"] pre{color:#2b3444}
.diary-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel);cursor:pointer;font-family:var(--mono);font-size:13px}
.diary-row:hover{border-color:var(--accent)}
.bars{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:8px}
.bars .b{flex:1;background:linear-gradient(180deg,var(--accent),transparent);border-radius:4px 4px 0 0;min-height:2px;opacity:.9}
.bars-lab{display:flex;gap:6px;margin-top:6px}
.bars-lab div{flex:1;text-align:center;font:10px var(--mono);color:var(--dim)}
.legend{display:flex;flex-direction:column;gap:7px;font:12px var(--mono);color:var(--dim);margin-top:10px}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px}
.feed{display:flex;flex-direction:column;gap:7px}
.feed .it{border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:var(--panel);font-size:13px}
.feed .it .t{font:11px var(--mono);color:var(--dim);margin-bottom:3px}
.toast{position:fixed;right:22px;bottom:22px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:10px 14px;font-size:13px;opacity:0;transform:translateY(8px);transition:.18s;pointer-events:none}
.toast.show{opacity:1;transform:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:20}
.modal.hidden{display:none}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;width:min(620px,92vw);display:flex;flex-direction:column;gap:12px}
.modal-box h3{margin:0;font-size:15px}
.empty{color:var(--dim);font:13px var(--mono);padding:16px 0}
.acts{display:flex;gap:6px}
.acts button{font:11px var(--mono);padding:3px 8px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer}
.acts button:hover{color:var(--txt);border-color:var(--accent)}
.acts .del:hover{color:var(--bad);border-color:var(--bad)}

/* 手机端导航 */
.mnav{display:none}
.mnav div{display:flex;gap:6px;padding:8px 12px;width:max-content}
@media(max-width:1000px){
  .mnav{display:flex;gap:6px;overflow-x:auto;padding:0 12px 8px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
  .mnav a{flex:0 0 auto;font-size:13px;padding:6px 12px;border:1px solid var(--line);border-radius:20px;color:var(--dim);white-space:nowrap}
  .mnav a.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
  .topbar{height:auto;flex-wrap:wrap;padding:10px 14px;gap:8px}
  #search{width:100%}
  .view{padding:14px}
  .grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}

/* 手机端：整体不横向溢出 */
@media(max-width:1000px){
  body{overflow-x:hidden}
  html,body{max-width:100%}
  .app{height:auto;min-height:100vh}
  main{min-width:0}
  .topbar{height:auto;flex:0 0 auto;padding:10px 12px;gap:8px;flex-wrap:wrap}
  .tools{width:100%}
  #search{width:100%;flex:1}
  .mnav{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line);background:var(--panel)}
  .mnav div{display:flex;gap:6px;padding:8px 12px;width:max-content}
  .mnav a{flex:0 0 auto;font-size:13px;padding:6px 12px;border:1px solid var(--line);border-radius:20px;color:var(--dim);white-space:nowrap;text-decoration:none}
  .mnav a.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
  .view{padding:12px;overflow:visible}
  h2{margin:18px 0 8px}
  table{display:block;overflow-x:auto;white-space:nowrap;font-size:12px}
  pre{max-width:100%;overflow-x:auto}
  img,canvas{max-width:100%}
  .split{grid-template-columns:1fr!important}
  .grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .modal-box{width:94vw;padding:14px}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr!important}
  .card .v{font-size:20px}
}

/* 窄屏兜底：一律单列，避免卡片被裁 */
@media(max-width:700px){
  .grid{grid-template-columns:1fr!important}
  .split{grid-template-columns:1fr!important}
  .view{padding:12px}
  table{font-size:12px}
}

/* 手机端：指标卡压成一行，省空间 */
@media(max-width:700px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .card.stat{padding:10px 12px}
  .card.stat .k{font-size:11px;letter-spacing:0;white-space:normal}
  .card.stat .v{font-size:19px;margin-top:6px;overflow-wrap:anywhere}
  .card{padding:12px 14px}
}

/* 手机上记忆表：去掉"重要"列，内容换行 */
@media(max-width:700px){
  .mtable{display:table;width:100%;white-space:normal}
  .mtable th:nth-child(3), .mtable td:nth-child(3){display:none}
  .mtable th, .mtable td{white-space:normal;padding:8px 8px;font-size:12px}
  .mtable td:nth-child(1){width:74px}
  .mtable td:nth-child(2){width:64px}
}