:root{
  --bg:#071827; --surface:#0B2841; --surface-2:#0F3049; --surface-3:#14395A;
  --border:#1E4A6E; --border-soft:#12324A;
  --teal:#32C6E6; --teal-dim:#1E93AD; --aqua:#38D6C7; --aqua-dim:#219488;
  --amber:#D9A441; --coral:#DD6357; --violet:#4E7FB5;
  --text:#EAF8FF; --text-mid:#93B4C7; --text-dim:#5E7C90; --radius:14px;
}
[data-theme="light"]{
  --bg:#EAF8FF; --surface:#FFFFFF; --surface-2:#F3FBFF; --surface-3:#E4F3F9;
  --border:#D3E6EF; --border-soft:#E1F0F6;
  --teal:#0E7FA0; --teal-dim:#0B6883; --aqua:#0E9E8F; --aqua-dim:#0C8175;
  --amber:#B8721A; --coral:#C34A38; --violet:#3F5F8A;
  --text:#0B2841; --text-mid:#4C6579; --text-dim:#87A0AF; --radius:14px;
}
[data-theme="light"] .brand-mark, [data-theme="light"] .btn-primary{color:#FFFFFF;}
[data-theme="light"] .panel,
[data-theme="light"] .kpi-card,
[data-theme="light"] .mod-card,
[data-theme="light"] .kcard,
[data-theme="light"] .portfolio-card,
[data-theme="light"] .automation-card,
[data-theme="light"] .pcard{
  box-shadow:0 1px 2px rgba(16,24,32,0.04), 0 2px 8px rgba(16,24,32,0.05);
}
[data-theme="light"] aside{box-shadow:1px 0 0 rgba(16,24,32,0.04);}
[data-theme="light"] .ring-inner{box-shadow:none;}
[data-theme="light"] .tag-today{background:rgba(184,114,26,0.12);}
[data-theme="light"] .tag-overdue{background:rgba(195,74,56,0.12);}
[data-theme="light"] .tag-ok{background:rgba(14,143,127,0.12);}
[data-theme="light"] .source-tag{color:var(--text-mid); background:var(--surface-3);}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; min-height:100vh; display:flex; -webkit-font-smoothing:antialiased;}
.mono{font-family:'JetBrains Mono',monospace;}
.display{font-family:'Space Grotesk',sans-serif;}
a{text-decoration:none; color:inherit;}

aside{width:258px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border-soft); padding:22px 16px; display:flex; flex-direction:column; height:100vh; position:sticky; top:0;}
.brand{display:flex; align-items:center; gap:10px; padding:0 6px 22px 6px; border-bottom:1px solid var(--border-soft); margin-bottom:18px;}
.brand-mark{width:36px; height:36px; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.brand-text{line-height:1.15;}
.brand-text .n1{font-family:'Space Grotesk'; font-weight:700; font-size:14px; letter-spacing:0.3px;}
.brand-text .n2{font-size:10px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase;}
.layer-pills{display:flex; flex-direction:column; gap:6px; margin-bottom:22px; position:relative; z-index:1;}
.layer-pill{font-size:10.5px; padding:8px 10px; border-radius:9px; color:var(--text-dim); display:flex; align-items:center; gap:8px; border:1px solid transparent;}
.layer-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--text-dim); flex-shrink:0;}
.layer-pill.active{background:rgba(50,198,230,0.10); border-color:rgba(50,198,230,0.35); color:var(--teal);}
.layer-pill.active .dot{background:var(--teal); box-shadow:0 0 6px var(--teal);}
nav{display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:transparent transparent; transition:scrollbar-color .2s;}
nav:hover{scrollbar-color:var(--border-soft) transparent;}
nav::-webkit-scrollbar{width:5px;}
nav::-webkit-scrollbar-track{background:transparent;}
nav::-webkit-scrollbar-thumb{background:transparent; border-radius:99px;}
nav:hover::-webkit-scrollbar-thumb{background:var(--border-soft);}
nav::-webkit-scrollbar-thumb:hover{background:var(--text-dim);}
.nav-label{font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-dim); padding:14px 10px 6px 10px;}
.nav-item{display:flex; align-items:center; justify-content:space-between; padding:9px 10px; border-radius:9px; font-size:13.5px; color:var(--text-mid); cursor:pointer; transition:background .15s;}
.nav-item .left{display:flex; align-items:center; gap:10px;}
.nav-item .ic{width:16px; height:16px; flex-shrink:0; opacity:0.85; stroke-width:1.75;}
.nav-item:hover{background:var(--surface-2); color:var(--text);}
.nav-item.active{background:var(--surface-3); color:var(--text); font-weight:600;}
.nav-item.active .left{color:var(--teal);}
.nav-badge{font-size:10px; color:var(--text-dim); font-family:'JetBrains Mono';}
.theme-toggle-row{display:flex; align-items:center; justify-content:space-between; padding:10px 10px; margin-top:10px; font-size:12px; color:var(--text-dim);}
.theme-toggle-btn{width:46px; height:24px; border-radius:99px; background:var(--surface-3); position:relative; cursor:pointer; border:1px solid var(--border-soft);}
.theme-toggle-btn::before{content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--teal); transition:transform .2s ease;}
[data-theme="light"] .theme-toggle-btn::before{transform:translateX(22px);}
.theme-toggle-btn .tt-icon{position:absolute; top:3px; width:12px; height:12px; stroke-width:2;}
.theme-toggle-btn .tt-dark{left:5px; color:#FFFFFF;}
.theme-toggle-btn .tt-light{right:5px; color:var(--amber);}

.sidebar-user{margin-top:auto; padding-top:14px; border-top:1px solid var(--border-soft); display:flex; align-items:center; gap:10px;}
.avatar{width:32px; height:32px; border-radius:9px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:var(--teal); font-family:'Space Grotesk';}
.sidebar-user .u-name{font-size:12.5px; font-weight:600;}
.sidebar-user .u-role{font-size:10.5px; color:var(--text-dim);}

.ws-tabs-row{scrollbar-width:none; -ms-overflow-style:none;}
.ws-tabs-row::-webkit-scrollbar{display:none;}

main{flex:1; min-width:0; padding:28px 44px 60px 44px; width:100%;}
.topbar{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px;}
.greet-eyebrow{font-size:11px; color:var(--teal); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; font-weight:600;}
h1{font-family:'Space Grotesk'; font-size:26px; font-weight:600; letter-spacing:-0.3px;}
.topbar .date{font-size:12.5px; color:var(--text-dim); text-align:right;}
.topbar .date .d1{color:var(--text-mid); font-weight:500;}
.topbar-actions{display:flex; gap:10px; align-items:center;}
.btn{font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:9px; cursor:pointer; border:1px solid var(--border);}
.btn-primary{background:var(--teal); color:#04211D; border:none;}
.btn-ghost{background:var(--surface-2); color:var(--text-mid);}

.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
.kpi-row-5{grid-template-columns:repeat(5,1fr);}
.kpi-row-6{grid-template-columns:repeat(6,1fr);}
.kpi-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:18px 18px 16px 18px;}
.kpi-label{font-size:11.5px; color:var(--text-dim); font-weight:500; margin-bottom:12px; display:block;}
.kpi-value{font-family:'Space Grotesk'; font-size:28px; font-weight:600; letter-spacing:-0.5px;}
.kpi-delta{font-size:11px; margin-top:6px;}
.kpi-delta.up{color:var(--aqua);}
.kpi-delta.down{color:var(--coral);}

.grid-2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-bottom:16px; align-items:start;}
.panel{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:20px; margin-bottom:16px;}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.panel-title{font-family:'Space Grotesk'; font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px;}
.panel-sub{font-size:11px; color:var(--text-dim); font-weight:400; margin-top:2px;}
.panel-link{font-size:11.5px; color:var(--teal); font-weight:500; cursor:pointer;}
.source-tag{font-size:9.5px; color:var(--text-dim); background:var(--surface-3); padding:2px 7px; border-radius:6px; font-family:'JetBrains Mono';}

.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap;}
.tab{font-size:12px; padding:7px 14px; border-radius:99px; background:var(--surface-2); color:var(--text-mid); cursor:pointer; border:1px solid var(--border-soft);}
.tab.active{background:var(--teal); color:#04211D; font-weight:600; border-color:var(--teal);}

.task-row{display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--border-soft);}
.task-row:last-child{border-bottom:none;}
.checkbox{width:16px; height:16px; border-radius:5px; border:1.5px solid var(--text-dim); flex-shrink:0;}
.checkbox.done{background:var(--aqua); border-color:var(--aqua);}
.task-name{font-size:14px; flex:1;}
.task-meta{font-size:11.5px; color:var(--text-dim); font-family:'JetBrains Mono';}

.cred-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 28px; align-items:start;}
.cred-card{padding:11px 0; border-bottom:1px solid var(--border-soft);}
.cred-card .task-name{font-size:14px; margin-bottom:3px; line-height:1.4;}
.cred-card .cred-meta{font-size:11.5px; color:var(--text-dim); line-height:1.5;}
.cred-card-foot{display:flex; justify-content:space-between; align-items:center; margin-top:6px;}
@media (max-width: 900px){ .cred-grid{grid-template-columns:1fr;} }
.task-tag{font-size:9.5px; padding:2px 7px; border-radius:6px; font-weight:600;}
.tag-overdue{background:rgba(232,115,95,0.15); color:var(--coral);}
.tag-today{background:rgba(240,168,87,0.15); color:var(--amber);}
.tag-ok{background:rgba(56,214,199,0.14); color:var(--aqua);}
.tag-planning{background:rgba(139,143,232,0.15); color:var(--violet);}

.progress-track{height:6px; background:var(--surface-3); border-radius:99px; overflow:hidden; margin-top:8px;}
.progress-fill{height:100%; background:linear-gradient(90deg, var(--aqua-dim), var(--aqua)); border-radius:99px;}

.ring{width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ring-inner{width:74px; height:74px; border-radius:50%; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ring-inner .pct{font-family:'Space Grotesk'; font-size:19px; font-weight:700;}
.ring-inner .lbl{font-size:8.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px;}

.mod-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:16px; cursor:pointer; transition:border-color .15s, transform .15s;}
.mod-card:hover{border-color:var(--teal-dim); transform:translateY(-2px);}
.mod-card .mic{width:30px; height:30px; border-radius:8px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.mod-card .mic svg{width:16px; height:16px; color:var(--teal);}
.mod-card .mt{font-size:13px; font-weight:600; margin-bottom:3px;}
.mod-card .ms{font-size:10.5px; color:var(--text-dim); line-height:1.4;}
.mod-card .mstat{margin-top:10px; font-size:11px; color:var(--teal); font-family:'JetBrains Mono';}
.launcher-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}

table{width:100%; border-collapse:collapse;}
th{font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-dim); text-align:left; padding:8px 10px; border-bottom:1px solid var(--border-soft); font-weight:500;}
td{font-size:12.5px; padding:11px 10px; border-bottom:1px solid var(--border-soft);}
tr:last-child td{border-bottom:none;}
.pill{font-size:10px; padding:3px 9px; border-radius:99px; font-weight:600; display:inline-block;}
.apu-asset-tab-btn{padding:7px 12px; font-size:11.5px; color:var(--text-dim); cursor:pointer; border-radius:8px; border:1px solid transparent;}
.apu-asset-tab-btn.apu-asset-tab-active{color:var(--teal); background:rgba(50,198,230,0.1); border-color:var(--teal-dim);}
.apu-component-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px; background:var(--surface-2); border-radius:8px;}
.pill-idea{background:rgba(139,143,232,0.15); color:var(--violet);}
.pill-writing{background:rgba(240,168,87,0.15); color:var(--amber);}
.pill-review{background:rgba(139,143,232,0.15); color:var(--violet);}
.pill-published{background:rgba(56,214,199,0.16); color:var(--aqua);}
.pill-scheduled{background:rgba(50,198,230,0.15); color:var(--teal);}

.cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px;}
.cal-weekday{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; text-align:center; padding-bottom:6px; font-weight:600;}
.cal-day{background:var(--surface-2); border:1px solid var(--border-soft); border-radius:8px; min-height:90px; padding:6px; overflow:hidden;}
.cal-day-empty{background:transparent; border:none;}
.cal-day-num{font-size:11px; color:var(--text-dim); font-family:'JetBrains Mono'; margin-bottom:4px;}
.cal-event{display:block; font-size:10px; padding:3px 6px; border-radius:5px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text);}
@media (max-width: 640px){
  .cal-grid{grid-template-columns:repeat(7, minmax(0,1fr)); gap:3px;}
  .cal-day{min-height:56px; padding:4px;}
  .cal-weekday{font-size:9px;}
  .cal-event{font-size:8.5px; padding:2px 4px;}
}
.pill-active{background:rgba(56,214,199,0.16); color:var(--aqua);}
.pill-planning{background:rgba(139,143,232,0.15); color:var(--violet);}
.pill-onhold{background:rgba(240,168,87,0.15); color:var(--amber);}
.pill-completed{background:var(--surface-3); color:var(--text-mid);}
.pill-danger{background:rgba(221,99,87,0.16); color:var(--coral);}

.kanban{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.kcol-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:12.5px; font-weight:600;}
.kcol-head .kcount{font-size:10.5px; color:var(--text-dim); font-family:'JetBrains Mono'; font-weight:400;}
.kcard{background:var(--surface-2); border:1px solid var(--border-soft); border-radius:10px; padding:12px; margin-bottom:10px; font-size:12px; cursor:grab;}
.kcard.dragging{opacity:0.4;}
.kanban-dropzone{min-height:40px; border-radius:10px; transition:background .15s;}
.kanban-dropzone.drag-over{background:rgba(50,198,230,0.08); outline:2px dashed var(--teal-dim); outline-offset:4px;}
.kcard .ktitle{font-weight:600; margin-bottom:6px; line-height:1.4;}
.kcard .kmeta{font-size:10px; color:var(--text-dim); display:flex; justify-content:space-between; align-items:center;}

.note-row{padding:11px 4px; border-bottom:1px solid var(--border-soft); font-size:12.5px;}
.note-row:last-child{border-bottom:none;}
.note-row .ntitle{margin-bottom:4px;}
.note-row .ntag{font-size:10px; color:var(--teal); font-weight:500;}
.note-row .ndate{font-size:10px; color:var(--text-dim); float:right;}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}

.skill-row{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.skill-row .sname{font-size:12px; width:110px; flex-shrink:0; color:var(--text-mid);}
.skill-row .sval{font-size:11px; width:32px; text-align:right; font-family:'JetBrains Mono'; color:var(--text-dim);}

.portfolio-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden;}
.portfolio-thumb{height:110px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--text-dim);}
.portfolio-body{padding:14px;}
.portfolio-body .pt{font-size:12.5px; font-weight:600; margin-bottom:4px;}
.portfolio-body .ps{font-size:10.5px; color:var(--text-dim);}

.review-box{background:var(--surface-2); border-radius:10px; padding:14px; font-size:12.5px; line-height:1.7; color:var(--text-mid);}
.review-box .rtitle{font-size:11px; color:var(--teal); font-weight:600; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;}

.textfield{width:100%; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:9px; padding:10px 12px; color:var(--text); font-size:12.5px; font-family:'Inter'; resize:vertical;}
.field-label{font-size:11px; color:var(--text-dim); margin-bottom:6px; display:block; font-weight:500;}

.settings-row{display:flex; justify-content:space-between; align-items:center; padding:12px 4px; border-bottom:1px solid var(--border-soft); font-size:12.5px;}
.settings-row:last-child{border-bottom:none;}
.settings-row .slabel{color:var(--text-mid);}
.settings-row .sval{color:var(--text);}

.automation-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:16px; text-align:center;}
.automation-card .aic{width:38px; height:38px; border-radius:10px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; margin:0 auto 10px auto;}
.automation-card .aic svg{width:18px; height:18px; color:var(--teal);}
.automation-card .at{font-size:12px; font-weight:600; margin-bottom:3px;}
.automation-card .as{font-size:10px; color:var(--text-dim);}

.form-panel{display:none;}
.form-panel.modal-style.show{display:flex; position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:90; align-items:center; justify-content:center; padding:20px;}
.form-panel.modal-style .modal-box{width:100%; max-width:960px; max-height:90vh; overflow:auto; background:var(--surface); border:1px solid var(--border-soft); border-radius:14px;}
.form-panel.modal-style .modal-head{position:sticky; top:0; z-index:2; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; background:var(--surface-2); border-bottom:1px solid var(--border-soft); border-radius:14px 14px 0 0;}
.form-panel.modal-style .modal-head h2{margin:0; font-size:15px;}
.form-panel.modal-style .modal-close{border:none; background:none; color:var(--text-dim); font-size:22px; cursor:pointer; line-height:1;}
.form-panel.modal-style .modal-body{padding:20px 22px;}
.form-panel.modal-style .modal-actions{position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:8px; padding:14px 22px; border-top:1px solid var(--border-soft); background:var(--surface-2); border-radius:0 0 14px 14px;}
@media (max-width:640px){
  .form-panel.modal-style.show{padding:0; align-items:flex-end;}
  .form-panel.modal-style .modal-box{max-width:100%; max-height:94vh; border-radius:14px 14px 0 0;}
}
.form-panel.show{display:block;}
.edit-item{cursor:pointer; color:var(--text-dim); margin-left:8px;}
.edit-item:hover{color:var(--teal);}

/* ============================================================
   MOBILE TOP BAR (ẩn trên desktop, hiện trên tablet/điện thoại)
   ============================================================ */
.mobile-topbar{
  display:none;
  position:fixed; top:0; left:0; right:0; height:56px; z-index:60;
  background:var(--surface); border-bottom:1px solid var(--border-soft);
  align-items:center; padding:0 14px; gap:12px;
}
.mobile-menu-btn{
  width:36px; height:36px; border-radius:9px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);
}
.mobile-brand{display:flex; align-items:center; gap:8px; font-family:'Space Grotesk'; font-weight:700; font-size:14px;}
.mobile-menu-btn svg{width:20px; height:20px;}
.mobile-brand .brand-mark{width:28px; height:28px; font-size:11px; border-radius:8px;}
.mobile-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:55;
}
.mobile-overlay.show{display:block;}

/* ============================================================
   TABLET (≤1024px): sidebar biến thành overlay trượt ra
   ============================================================ */
@media (max-width: 1024px){
  .mobile-topbar{display:flex;}
  body{padding-top:56px; flex-direction:column;}
  aside{
    position:fixed; top:0; left:0; height:100vh; z-index:56;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:4px 0 24px rgba(0,0,0,0.4);
  }
  aside.mobile-open{transform:translateX(0);}
  main{max-width:100%; padding:20px 20px 60px 20px;}

  .kpi-row{grid-template-columns:repeat(2, 1fr);}
  .grid-2{grid-template-columns:minmax(0,1fr);}
  .grid-3{grid-template-columns:repeat(2, minmax(0,1fr));}
  .grid-4{grid-template-columns:repeat(2, minmax(0,1fr));}
  .launcher-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .kanban{grid-template-columns:repeat(2, 1fr); gap:12px;}
}

/* ============================================================
   ĐIỆN THOẠI (≤640px): 1 cột cho hầu hết mọi thứ
   ============================================================ */
@media (max-width: 640px){
  main{padding:16px 14px 50px 14px;}
  aside{width:82vw; max-width:300px;}

  h1{font-size:20px;}
  .topbar{flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:20px;}
  .topbar-actions{width:100%;}
  .topbar-actions .btn{width:100%; text-align:center;}

  .kpi-row{grid-template-columns:repeat(2, 1fr); gap:10px;}
  .kpi-card{padding:14px;}
  .kpi-value{font-size:22px;}

  .grid-2, .grid-3, .grid-4{grid-template-columns:minmax(0,1fr);}
  .launcher-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .mod-card{padding:12px;}
  .mod-card .mt{font-size:12px;}
  .mod-card .ms{font-size:9.5px;}
  .kanban{grid-template-columns:1fr;}

  .panel{padding:16px;}

  .tabs{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;}
  .tab{flex-shrink:0;}

  table{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;}

  .quick-add-form{flex-direction:column; align-items:stretch !important;}
  .quick-add-form > div{width:100% !important; min-width:0 !important;}

  .task-row{flex-wrap:wrap;}
  .skill-row .sname{width:90px; font-size:11px;}
  .hide-mobile{display:none !important;}
}

.zt-wrap{position:relative; padding:22px 12px 28px 12px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.zt-line{position:absolute; left:24px; right:24px; top:50%; height:1px; background:var(--border);}
.zt-track{display:flex; gap:6px; position:relative; min-width:max-content; width:100%; justify-content:space-between;}
.zt-item{display:flex; flex-direction:column; align-items:center; width:170px; flex-shrink:0;}
.zt-slot{height:100px; display:flex; justify-content:center; width:100%;}
.zt-slot.align-bottom{align-items:flex-end; padding-bottom:10px;}
.zt-slot.align-top{align-items:flex-start; padding-top:10px;}
.zt-connector{width:1px; height:12px; background:var(--border);}
.zt-dot{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1;}
.zt-dot svg{width:15px; height:15px; color:#04211D;}
.zt-year{font-family:'Space Grotesk'; font-weight:700; font-size:14px; margin-bottom:3px; color:var(--text);}
.zt-desc{font-size:11.5px; color:var(--text-mid); line-height:1.5; text-align:center; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; cursor:default;}
.zt-list{display:flex; flex-direction:column; gap:3px; align-items:center;}
.zt-list-item{font-size:11px; color:var(--text-mid); line-height:1.4; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

::-webkit-scrollbar{width:8px;} ::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:99px;}