:root{
  --inn-bg:#f9fafb;--inn-card:#fff;--inn-text:#2C2A29;--inn-muted:#8A8782;
  --inn-accent:#C5A880;--inn-border:#E8E3DB;--inn-border-02:#9da1a9;--accent2:#6b5fd4;
  --ink:#1a1916;--ink2:#5c5a54;--ink3:#9a9890;--bg2:#f6f7f8;
  --sans:'Noto Sans TC',sans-serif;--serif:'Noto Serif TC',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/*body{font-family:var(--sans);background:var(--inn-bg);color:var(--inn-text);padding:24px 16px;min-height:400px}*/

.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;background:var(--inn-card);border:1px solid var(--inn-border);border-radius:14px;padding:12px 16px}
.filter-label{font-size:12px;color:var(--ink3);font-weight:500;white-space:nowrap}
.inn-select{font-size:13px;color:var(--ink);background:var(--bg2);border:1px solid var(--inn-border);border-radius:8px;padding:6px 10px;cursor:pointer;outline:none}
.inn-select:focus{border-color:var(--inn-accent)}
.btn-reset{font-size:12px;color:var(--ink3);background:none;border:1px solid var(--inn-border);border-radius:8px;padding:6px 12px;cursor:pointer}
.btn-reset:hover{background:var(--bg2)}

.nav-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.nav-info{font-size:13px;color:var(--ink3)}
.nav-btns{display:flex;gap:8px}
.nav-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--inn-border);background:var(--inn-card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink2);transition:all .15s}
.nav-btn:hover:not(:disabled){background:var(--inn-accent);color:#fff;border-color:var(--inn-accent)}
.nav-btn:disabled{opacity:.3;cursor:default}

.loading-bar{display:none;align-items:center;gap:8px;font-size:12px;color:var(--ink3);margin-bottom:8px}
.loading-bar.on{display:flex}
.spinner{width:14px;height:14px;border:2px solid var(--inn-border);border-top-color:var(--inn-accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.timeline-wrap{background:var(--inn-card);border:1px solid var(--inn-border);border-radius:20px;overflow:hidden;position:relative}

.desktop-tl{display:block}
.desktop-tl .scroll-inner{overflow-x:auto;padding:200px 0px;position:relative; overflow: hidden;}
.desktop-tl .axis{display:flex;position:relative;height:2px;background:var(--inn-border);align-items:center;min-width:max-content}
.desktop-tl .tl-node{width:300px;display:flex;flex-direction:column;align-items:center;position:relative}
.desktop-tl .node-dot{width:10px;height:10px;background:var(--inn-accent);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px var(--inn-accent);z-index:10}
.desktop-tl .node-date{position:absolute;top:14px;color:var(--ink3);font-size:11px;white-space:nowrap}
.my-lane,.others-lane{position:absolute;width:88%;left:50%;transform:translateX(-50%);display:flex;justify-content:center}
.my-lane{bottom:20px}
.others-lane{top:35px}
.guide-line{position:absolute;width:1px;border-left:1px dashed var(--inn-border-02)}
.my-lane .guide-line{height:28px;top:100%;left:50%}
.others-lane .guide-line{height:28px;bottom:100%;left:50%}

.summary-card{background:#fff;border:1px solid var(--inn-border);border-radius:14px;padding:12px;width:100%;cursor:pointer;transition:transform .2s;text-decoration:none;display:block}
.summary-card:hover{transform:translateY(-3px)}
.my-lane .summary-card{border-top:3px solid var(--inn-accent)}
.others-lane .summary-card{border-top:3px solid var(--accent2)}
.card-user{display:flex;align-items:center;margin-bottom:6px}
.u-av{width:20px;height:20px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-right:6px;flex-shrink:0}
.bg-mine{background:var(--inn-accent)}.bg-pub{background:var(--accent2)}
.card-title{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.card-text{font-size:12px;color:var(--ink2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-media{display:flex;gap:5px;margin-top:7px}
.round-thumb{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--inn-border)}

.cluster-bubble{display:flex;align-items:center;background:#fff;padding:5px 12px;border-radius:999px;border:1px solid var(--inn-border);cursor:pointer;white-space:nowrap;transition:all .2s}
.my-lane .cluster-bubble:hover{border-color:var(--inn-accent)}
.others-lane .cluster-bubble:hover{border-color:var(--accent2)}
.av-group{display:flex;margin-right:8px}
.st-av{width:18px;height:18px;border-radius:50%;border:2px solid #fff;margin-left:-5px;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;font-weight:700}
.st-av:first-child{margin-left:0}
.cl-text{font-size:12px;color:var(--ink3)}

.mobile-tl{display:none}
.mobile-tl .m-node{background:#fff;border:1px solid var(--inn-border);border-radius:16px;padding:16px}
.mobile-tl .m-node-date{font-size:11px;color:var(--ink3);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.mobile-tl .m-node-date::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--inn-accent)}
.m-section-label{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--inn-muted);margin-bottom:6px;text-transform:uppercase}
.m-section+.m-section{margin-top:12px;padding-top:12px;border-top:1px dashed var(--inn-border)}
.page-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.page-dot{width:6px;height:6px;border-radius:50%;background:var(--inn-border);transition:background .2s;cursor:pointer}
.page-dot.active{background:var(--inn-accent);width:18px;border-radius:3px}
.empty-msg{color:var(--ink3);font-size:13px;text-align:center;padding:40px 0}

.modal-bg{position:fixed;inset:0;background:rgba(26,25,22,.4);backdrop-filter:blur(4px);z-index:1000;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-bg.on{opacity:1;pointer-events:auto}
.modal-box{background:#fff;width:100%;max-width:480px;border-radius:20px;padding:22px;max-height:75vh;display:flex;flex-direction:column;transform:scale(.95);transition:transform .25s}
.modal-bg.on .modal-box{transform:scale(1)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--bg2)}
.modal-title{font-family:var(--serif);font-size:15px;font-weight:700}
.close-btn{background:none;border:none;font-size:22px;color:var(--ink3);cursor:pointer;line-height:1}
.drawer-list{overflow-y:auto;flex:1}
.d-item{padding:12px 0;border-bottom:1px solid var(--bg2)}
.d-item:last-child{border:none}
.d-item a{text-decoration:none;color:inherit;display:block}
.d-item a:hover .d-subject{color:var(--inn-accent)}
.d-subject{font-size:13px;font-weight:600;color:var(--ink);margin-top:5px;margin-bottom:3px}
.d-content{font-size:13px;color:var(--ink2);line-height:1.6}

@media(max-width:640px){
  .desktop-tl{display:none}
  .mobile-tl{display:block}
  .filter-bar{gap:6px}
}