:root{
  --bg:#f5f6f8; --card:#ffffff; --border:#e3e6ea; --text:#1f2329; --muted:#6b7280;
  --primary:#534AB7; --primary-d:#3C3489; --danger:#a32d2d; --radius:12px; --link:#2563eb;
}
[hidden]{display:none !important;}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--card);border-bottom:1px solid var(--border);}
.brand{font-weight:600;font-size:18px;}
.user{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;}

.layout{display:grid;grid-template-columns:2fr 1fr;gap:16px;padding:16px;align-items:start;}
.col{display:flex;flex-direction:column;gap:16px;min-width:0;}
.col-right{position:sticky;top:16px;}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
.card h2{margin:0 0 12px;font-size:15px;}
.list-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;}
.list-head h2{margin:0;}
.list-counter{font-size:13px;color:var(--muted);}
.card-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;margin:0 0 12px;}
.card-head h2{margin:0;}
.collapse-toggle{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;transition:transform .2s ease;padding:4px 6px;}
.collapse-toggle:hover{color:var(--text);}
.entry.collapsed .collapse-toggle{transform:rotate(-90deg);}
.entry.collapsed .card-head{margin-bottom:0;}
.entry-body{overflow:hidden;}
.entry.collapsed .entry-body{display:none;}

label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px;}
input[type=text],input[type=date],input[type=password],textarea,select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--text);}
textarea{min-height:120px;resize:vertical;}
.preview{border:1px dashed var(--border);border-radius:8px;padding:10px 12px;font-size:14px;overflow:auto;min-height:80px;background:#fafbfc;margin-top:8px;}
.preview a{color:var(--link);}

.entry-toolbar{display:flex;gap:6px;margin-bottom:8px;}
.tb{width:32px;height:32px;border:1px solid var(--border);background:#fff;border-radius:6px;cursor:pointer;color:var(--muted);font-size:14px;}
.tb:hover{border-color:var(--primary);color:var(--primary);}
.entry-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.entry-foot-right{display:flex;gap:8px;}
.vis-pill{width:auto;border-radius:999px;padding:6px 12px;font-size:13px;}

.row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.row input[type=text]{flex:1;min-width:140px;}
.btn{border:1px solid var(--border);background:#fff;color:var(--text);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:14px;}
.btn:hover{border-color:var(--primary);}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn.primary:hover{background:var(--primary-d);}
.btn.ghost{background:transparent;border:none;color:var(--primary);padding:4px 8px;}
.btn.ghost.danger{color:var(--danger);}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.tag{background:#eef0fb;color:var(--primary-d);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;border:none;}
.tag .x{color:var(--muted);font-weight:600;}

.memo-list{display:flex;flex-direction:column;gap:10px;}
.memo-item{border:1px solid var(--border);border-radius:8px;padding:12px;background:#fff;}
.mi-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;position:relative;}
.mi-time{font-size:12px;color:var(--muted);}
.mi-head-left{display:flex;align-items:center;gap:8px;}
.mi-badge{font-size:11px;padding:1px 8px;border-radius:999px;background:#eafaf0;color:#1f8a4c;border:0.5px solid #c8e6d0;}
.mi-owner{font-size:11px;color:var(--muted);}
.about-line{font-size:14px;color:var(--text);margin:10px 0;}
.about-version{margin-top:16px;font-weight:500;color:var(--primary);font-size:14px;}
.more-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;padding:0 6px;line-height:1;}
.more-btn:hover{color:var(--text);}
.menu{position:absolute;right:0;top:26px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.08);display:none;min-width:96px;z-index:5;}
.menu.open{display:block;}
.menu button{display:block;width:100%;text-align:left;background:none;border:none;padding:8px 12px;cursor:pointer;font-size:14px;color:var(--text);}
.menu button:hover{background:#f5f6f8;}
.menu .del{color:var(--danger);}
.mi-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.mi-tag{background:#f0f2f7;color:var(--muted);border-radius:4px;padding:2px 8px;font-size:11px;}
.mi-body{font-size:14px;line-height:1.6;}
.mi-body a{color:var(--link);}
.mi-body h1,.mi-body h2,.mi-body h3,.mi-body h4{margin:10px 0 6px;font-size:1.1em;line-height:1.4;}
.mi-body h1{font-size:1.25em;}
.mi-body ul,.mi-body ol{margin:6px 0;padding-left:20px;}
.mi-body li{margin:2px 0;}
.mi-body pre{background:#f5f6f8;padding:10px;border-radius:6px;overflow:auto;border:1px solid var(--border);}
.mi-body code{font-family:monospace;font-size:12px;background:#f0f2f7;padding:1px 4px;border-radius:3px;}
.mi-body pre code{background:transparent;padding:0;}
.mi-body blockquote{border-left:3px solid var(--border);margin:6px 0;padding-left:10px;color:var(--muted);}
.mi-body p{margin:6px 0;}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:20;}
.modal-box{background:#fff;border-radius:var(--radius);padding:20px;width:340px;}
.modal-box.wide{width:440px;}
.modal-head{display:flex;justify-content:space-between;align-items:center;}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1;}
.modal-box label{margin-bottom:10px;}
.hint{font-size:12px;color:var(--muted);}
.modal-box code{background:#f0f2f7;padding:1px 5px;border-radius:4px;}

/* Token management */
.new-token{margin:12px 0;padding:10px;background:#f7f8ff;border:1px solid var(--border);border-radius:8px;}
.copy-row{display:flex;gap:8px;margin-top:4px;}
.copy-row input[readonly]{font-family:monospace;font-size:12px;background:#fff;}
.token-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:260px;overflow:auto;}
.token-item{display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--border);border-radius:8px;}
.ti-name{font-weight:500;font-size:14px;}
.ti-meta{font-size:12px;color:var(--muted);}
.token-item .btn{margin-top:6px;align-self:flex-start;}

/* Heatmap */
.heatmap-body{display:flex;gap:6px;align-items:flex-start;min-width:0;}
.heatmap-grid{display:flex;gap:3px;overflow-x:auto;padding-bottom:4px;align-content:start;}
.hm-week{display:flex;flex-direction:column;gap:3px;}
.hm-cell{width:12px;height:12px;border-radius:2px;background:#ebedf0;cursor:pointer;}
.hm-cell:hover{outline:1px solid var(--primary);}
.hm-cell.hm-l1{background:#9be9a8;}
.hm-cell.hm-l2{background:#40c463;}
.hm-cell.hm-l3{background:#30a14e;}
.hm-cell.hm-future{background:transparent;cursor:default;pointer-events:none;}
.hm-cell.hm-today{outline:1px solid var(--primary);}
.hm-labels{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--muted);}
.hm-labels span{height:12px;display:flex;align-items:center;}
.hm-stats{font-size:12px;color:var(--muted);margin:8px 0 0;}

/* Tags sidebar */
.tags-head,.tags-foot{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;margin:6px 0;}
.shortcuts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.sc{border:1px solid var(--border);background:#fff;border-radius:999px;padding:4px 12px;font-size:12px;color:var(--text);cursor:pointer;}
.sc:hover{border-color:var(--primary);}
.sc.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.tag-list{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;}
.tag-list .tl{background:none;border:none;text-align:left;padding:6px 8px;border-radius:6px;cursor:pointer;color:var(--text);font-size:14px;display:flex;justify-content:space-between;}
.tag-list .tl:hover{background:#f5f6f8;}
.tag-list .tl.active{background:#eef0fb;color:var(--primary-d);font-weight:500;}

/* Responsive */
@media(max-width:900px){
  .layout{grid-template-columns:1fr;}
  .col-left > .entry{order:1;}
  .col-right > .heatmap{order:2;}
  .col-left > .list{order:3;}
  .col-right > .search{order:4;}
  .col-right > .tags-card{order:5;}

  /* 窄屏：右侧栏变为右侧滑出抽屉 + 右下浮标 */
  .col-right{
    position:fixed;top:0;right:0;height:100%;width:86%;max-width:340px;
    transform:translateX(100%);transition:transform .25s ease;z-index:50;
    background:var(--bg);box-shadow:-6px 0 18px rgba(0,0,0,.18);
    padding:16px;gap:16px;
  }
  body.drawer-open .col-right{transform:translateX(0);}
  .drawer-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:45;}
  body.drawer-open .drawer-mask{display:block;}
  .right-fab{
    position:fixed;right:14px;bottom:24px;z-index:60;width:48px;height:48px;border-radius:50%;
    border:none;background:var(--primary);color:#fff;font-size:20px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer;
  }
}
@media(min-width:901px){
  #rightFab{display:none !important;}
  .drawer-mask{display:none !important;}
}