/* ============================================================
   AGENTIC AI RESEARCH & LEARNING PORTAL — STYLESHEET
   Theme: corporate research-lab, olive/white, calm & documentation-like
   ============================================================ */

:root{
  --bg-primary:#FFFFFF;
  --bg-secondary:#F4F6F9;
  --bg-tertiary:#E9ECF1;
  --accent:#0066FF; /* HCL Bright Blue */
  --accent-dark:#5B20E2; /* HCL Deep Purple */
  --accent-soft:#EBF0FA;
  --border:#E1E5EA;
  --border-strong:#C9CFD6;
  --text:#1A1D20;
  --text-muted:#6B7280;
  --text-faint:#9CA3AF;
  --danger:#DC2626;
  --shadow-sm:0 1px 2px rgba(26,29,32,0.05), 0 1px 1px rgba(26,29,32,0.03);
  --shadow-md:0 4px 16px rgba(26,29,32,0.07), 0 1px 3px rgba(26,29,32,0.04);
  --shadow-lg:0 12px 32px rgba(26,29,32,0.12), 0 2px 8px rgba(26,29,32,0.06);
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --header-h:76px;
  --sidebar-w:264px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: 'Inter', sans-serif;
  background:var(--bg-secondary);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.mono{font-family: 'Inter', sans-serif;}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-0.01em; font-family: 'Inter', sans-serif;}
p{margin:0;}
button{font-family: 'Inter', sans-serif;}
input, select, textarea{font-family: 'Inter', sans-serif;}
::selection{background:var(--accent-soft); color:var(--accent-dark);}

/* ================= HEADER ================= */
.app-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  background:var(--bg-primary);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  z-index:100;
}
.header-left{display:flex; align-items:center; gap:16px;}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:36px; height:36px; background:none; border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.nav-toggle span{width:16px; height:2px; background:var(--text); margin:0 auto; border-radius:2px;}
.header-titles h1{font-size:19px; color:var(--text);}
.header-titles .subtitle{
  font-size:12.5px; color:var(--text-muted); margin-top:3px; letter-spacing:0.01em;
}
.header-right{display:flex; align-items:center; gap:20px;}
.search-wrap{
  position:relative; display:flex; align-items:center;
  background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:999px; padding:9px 14px 9px 38px; width:280px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-wrap:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.search-icon{position:absolute; left:12px; width:16px; height:16px; color:var(--text-faint);}
.search-wrap input{
  border:none; background:none; outline:none; font-size:13.5px; width:100%; color:var(--text);
  font-family: 'Inter', sans-serif;
}
.header-status{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--text-muted); letter-spacing:0.04em;}
.status-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); animation:pulse 2.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* ================= SHELL / SIDEBAR ================= */
.app-shell{display:flex; padding-top:var(--header-h); min-height:100vh;}
.sidebar{
  position:fixed; top:var(--header-h); left:0; bottom:0; width:var(--sidebar-w);
  background:var(--bg-primary); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 14px;
  transition:transform .32s var(--ease);
  z-index:90;
}
.sidebar-brand{display:flex; align-items:center; gap:11px; padding:6px 10px 22px;}
.brand-mark{
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family: 'Inter', sans-serif; font-weight:700; font-size:13px;
  box-shadow:var(--shadow-sm);
}
.brand-text{display:flex; flex-direction:column; line-height:1.25;}
.brand-name{font-weight:700; font-size:14.5px;}
.brand-tag{font-size:10px; color:var(--text-faint); letter-spacing:.05em;}

.side-nav{display:flex; flex-direction:column; gap:4px; flex:1;}
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border:none; background:none; border-radius:var(--radius-sm);
  color:var(--text-muted); font-size:13.5px; font-weight:500; text-align:left;
  position:relative; transition:background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.nav-item svg{width:18px; height:18px; flex-shrink:0; transition:transform .25s var(--ease);}
.nav-item:hover{background:var(--bg-secondary); color:var(--text); padding-left:18px;}
.nav-item.active{background:var(--accent-soft); color:var(--accent-dark); font-weight:600;}
.nav-item.active svg{color:var(--accent-dark);}
.nav-item.active::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background:var(--accent); border-radius:0 3px 3px 0;
}
.badge-soon{
  margin-left:auto; font-size:8.5px; background:var(--bg-tertiary); color:var(--text-faint);
  padding:2px 6px; border-radius:5px; letter-spacing:.05em;
}

.sidebar-footer{border-top:1px solid var(--border); padding-top:16px; margin-top:10px;}
.mini-progress{display:flex; flex-direction:column; gap:6px; padding:0 10px;}
.mini-progress .label{font-size:9.5px; color:var(--text-faint); letter-spacing:.06em;}
.mini-bar{height:6px; background:var(--bg-tertiary); border-radius:4px; overflow:hidden;}
.mini-bar-fill{height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius:4px; transition:width .8s var(--ease);}
.mini-progress .value{font-size:11px; color:var(--accent-dark); font-weight:600;}

.sidebar-scrim{
  display:none; position:fixed; inset:0; top:var(--header-h);
  background:rgba(43,43,38,.25); z-index:80;
}

/* ================= CONTENT ================= */
.content{margin-left:var(--sidebar-w); flex:1; padding:32px 36px 64px; min-width:0;}
.view{display:none; animation:fadeIn .35s var(--ease);}
.view.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.view-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:14px;}
.eyebrow{font-size:10.5px; color:var(--accent-dark); letter-spacing:.09em; font-weight:600;}
.view-head h2{font-size:25px; margin-top:4px;}
.view-actions{display:flex; gap:10px;}

.btn-primary{
  background:var(--accent-dark); color:#fff; border:none; padding:10px 18px;
  border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  box-shadow:var(--shadow-sm); transition:background .2s var(--ease), transform .15s var(--ease);
}
.btn-primary:hover{background:var(--accent); transform:translateY(-1px);}
.btn-secondary{
  background:var(--bg-secondary); color:var(--text); border:1px solid var(--border);
  padding:10px 18px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  transition:background .2s var(--ease);
}
.btn-secondary:hover{background:var(--bg-tertiary);}

/* ================= CARDS (dashboard) ================= */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:26px;}
.stat-card{
  background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px 20px; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.stat-card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.stat-icon{
  width:34px; height:34px; border-radius:9px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; color:var(--accent-dark);
}
.stat-icon svg{width:17px; height:17px;}
.stat-value{font-size:26px; font-weight:800; font-family: 'Inter', sans-serif;}
.stat-label{font-size:12px; color:var(--text-muted); margin-top:4px;}

/* ================= PANELS ================= */
.panel{
  background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px; box-shadow:var(--shadow-sm); margin-bottom:20px;
}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.panel-head h3{font-size:14.5px;}
.muted{color:var(--text-faint); font-size:11px;}

.dash-lower{display:grid; grid-template-columns:1.15fr .85fr; gap:20px;}
@media(max-width:980px){.dash-lower{grid-template-columns:1fr;}}

.completion-row{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.ring-wrap{position:relative; width:140px; height:140px; flex-shrink:0;}
.ring-svg{transform:rotate(-90deg); width:140px; height:140px;}
.ring-track{fill:none; stroke:var(--bg-tertiary); stroke-width:11;}
.ring-fill{fill:none; stroke:var(--accent); stroke-width:11; stroke-linecap:round; stroke-dasharray:377; stroke-dashoffset:377; transition:stroke-dashoffset 1s var(--ease);}
.ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ring-number{font-size:24px; font-weight:700; color:var(--accent-dark);}
.ring-label{font-size:11px; color:var(--text-muted); margin-top:2px;}

.completion-bars{flex:1; min-width:200px; display:flex; flex-direction:column; gap:12px;}
.cbar-row{display:flex; align-items:center; gap:10px; font-size:12px;}
.cbar-name{width:110px; flex-shrink:0; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cbar-track{flex:1; height:8px; background:var(--bg-tertiary); border-radius:4px; overflow:hidden;}
.cbar-fill{height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius:4px; width:0%; transition:width 1s var(--ease);}
.cbar-pct{width:36px; text-align:right; font-family: 'Inter', sans-serif; color:var(--text);}

.activity-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0;}
.activity-list li{
  display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border);
  font-size:12.5px;
}
.activity-list li:last-child{border-bottom:none;}
.activity-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0;}
.activity-main{flex:1; min-width:0;}
.activity-title{font-weight:600; color:var(--text);}
.activity-sub{color:var(--text-faint); font-size:11px; margin-top:2px;}
.activity-time{color:var(--text-faint); font-size:10.5px; font-family: 'Inter', sans-serif; flex-shrink:0;}

/* ================= FILTER CHIPS ================= */
.filter-chip-group{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:var(--bg-primary);
  font-size:12px; color:var(--text-muted); transition:all .2s var(--ease);
}
.chip:hover{border-color:var(--accent);}
.chip.active{background:var(--accent-dark); color:#fff; border-color:var(--accent-dark);}

/* ================= SYLLABUS ACCORDION (Coursera-style) ================= */
.syllabus-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; flex-wrap:wrap; gap:10px;
}
.syllabus-stats{font-size:12px; color:var(--text-muted);}

.accordion-list{display:flex; flex-direction:column; gap:12px;}
.accordion-item{
  background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .2s var(--ease);
}
.accordion-item:hover{box-shadow:var(--shadow-md);}

.accordion-header{
  display:flex; align-items:center; gap:16px; padding:18px 20px; cursor:pointer;
  transition:background .15s var(--ease);
}
.accordion-header:hover{background:var(--bg-secondary);}
.accordion-badge{
  width:34px; height:34px; border-radius:50%; background:var(--accent-dark); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
  flex-shrink:0; font-family: 'Inter', sans-serif;
}
.accordion-item.portfolio .accordion-badge{background:var(--accent);}
.accordion-title-wrap{flex:1; min-width:0;}
.accordion-title{font-size:15px; font-weight:700; color:var(--text); line-height:1.35;}
.accordion-meta{font-size:11.5px; color:var(--text-muted); margin-top:4px;}
.accordion-progress-mini{width:130px; display:flex; align-items:center; gap:8px; flex-shrink:0;}
.accordion-progress-mini .mini-bar{flex:1; height:6px; background:var(--bg-tertiary); border-radius:4px; overflow:hidden;}
.accordion-progress-mini .mini-bar-fill{height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius:4px; width:0%; transition:width .8s var(--ease);}
.accordion-progress-mini .mini-pct{font-size:11px; color:var(--text-muted); width:32px; text-align:right; flex-shrink:0;}
.accordion-caret{color:var(--text-faint); flex-shrink:0; transition:transform .3s var(--ease);}
.accordion-item.open .accordion-caret{transform:rotate(180deg); color:var(--accent-dark);}

.accordion-body{max-height:0; overflow:hidden; transition:max-height .45s var(--ease);}
.accordion-item.open .accordion-body{max-height:4000px;}

.accordion-row{
  display:flex; align-items:center; gap:12px; padding:12px 20px 12px 66px;
  border-top:1px solid var(--border); cursor:pointer; transition:background .15s var(--ease);
}
.accordion-row:hover{background:var(--bg-secondary);}
.row-icon{
  width:26px; height:26px; border-radius:7px; background:var(--accent-soft); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;
}
.row-title{flex:1; min-width:0; font-size:13px; color:var(--text);}
.row-type{width:130px; flex-shrink:0; font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em; display:none;}
@media(min-width:960px){.row-type{display:block;}}
.row-progress-cell{display:flex; align-items:center; gap:8px; width:110px; flex-shrink:0;}
.row-progress-cell .track{flex:1; height:6px; background:var(--bg-tertiary); border-radius:4px; overflow:hidden;}
.row-progress-cell .fill{height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius:4px; width:0%; transition:width .8s var(--ease);}
.row-progress-cell .pct{font-size:10.5px; color:var(--text-muted); width:30px; text-align:right;}
.accordion-empty{padding:30px; text-align:center; color:var(--text-faint); font-size:13px;}

/* ================= TABLES ================= */
.table-scroll{overflow-x:auto;}
.data-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.data-table thead th{
  text-align:left; padding:10px 12px; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-faint); border-bottom:1px solid var(--border-strong); font-family: 'Inter', sans-serif; font-weight:600;
  white-space:nowrap;
}
.data-table tbody td{padding:12px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text);}
.data-table tbody tr{transition:background .15s var(--ease);}
.data-table tbody tr:hover{background:var(--bg-secondary);}

.tag{display:inline-block; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:600; letter-spacing:.02em;}
.tag-Beginner{background:#EBF0FA; color:var(--accent-dark);}
.tag-Intermediate{background:#FEF3C7; color:#92400E;}
.tag-Advanced{background:#FEE2E2; color:var(--danger);}
.tag-Completed{background:var(--accent-soft); color:var(--accent-dark);}
.tag-Pending{background:var(--bg-tertiary); color:var(--text-faint);}
.tag-InProgress{background:#FEF3C7; color:#92400E;}

.row-progress{display:flex; align-items:center; gap:8px; min-width:110px;}
.row-progress .track{flex:1; height:6px; background:var(--bg-tertiary); border-radius:4px; overflow:hidden;}
.row-progress .fill{height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius:4px; width:0%; transition:width .8s var(--ease);}
.row-progress .pct{font-family: 'Inter', sans-serif; font-size:11px; color:var(--text-muted); width:32px;}

.remarks-cell{color:var(--text-muted); max-width:220px;}
.file-chip{display:inline-flex; align-items:center; gap:6px; background:var(--bg-secondary); border:1px solid var(--border); padding:4px 10px; border-radius:7px; font-size:11px; font-family: 'Inter', sans-serif;}
.delete-btn{
  background:none; border:1px solid var(--border); border-radius:7px; width:30px; height:30px;
  font-size:13px; color:var(--danger); transition:background .15s var(--ease), border-color .15s var(--ease);
}
.delete-btn:hover{background:#FEE2E2; border-color:var(--danger);}
.notes-cell{max-width:260px; color:var(--text-muted); cursor:pointer;}
.notes-cell.collapsed{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}

.empty-state{text-align:center; padding:34px 10px; color:var(--text-faint); font-size:13px; display:none;}
.empty-state.show{display:block;}

/* ================= NOTES GRID ================= */
.notes-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.note-card{
  background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.note-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.note-card-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;}
.note-topic{font-weight:700; font-size:13.5px;}
.note-date{font-size:10.5px; color:var(--text-faint); font-family: 'Inter', sans-serif;}
.note-body{font-size:12.5px; color:var(--text-muted); line-height:1.55;}

/* ================= PROGRESS TRACKER ================= */
.progress-tracker-list{display:flex; flex-direction:column; gap:16px;}
.pt-row{display:flex; align-items:center; gap:16px;}
.pt-name{width:220px; flex-shrink:0; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pt-track{flex:1; height:10px; background:var(--bg-tertiary); border-radius:6px; overflow:hidden;}
.pt-fill{height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius:6px; width:0%; transition:width 1s var(--ease);}
.pt-pct{width:42px; text-align:right; font-family: 'Inter', sans-serif; font-size:12px; color:var(--text-muted);}

.empty-panel{color:var(--text-muted); font-size:13.5px; line-height:1.6;}

/* ================= MODAL ================= */
.modal-backdrop{
  display:none; position:fixed; inset:0; background:rgba(43,43,38,.35); z-index:200;
  align-items:center; justify-content:center; padding:20px;
}
.modal-backdrop.show{display:flex; animation:fadeIn .2s var(--ease);}
.modal{
  background:var(--bg-primary); border-radius:var(--radius-lg); width:100%; max-width:460px;
  padding:24px; box-shadow:var(--shadow-lg); max-height:90vh; overflow-y:auto;
}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.modal-head h3{font-size:16px;}
.modal-close{background:none; border:none; font-size:22px; line-height:1; color:var(--text-faint);}
.modal-close:hover{color:var(--text);}
.form-row{margin-bottom:14px; display:flex; flex-direction:column; gap:6px;}
.form-row label{font-size:12px; font-weight:600; color:var(--text-muted);}
.form-row select, .form-row textarea{
  border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:13px;
  font-family: 'Inter', sans-serif; background:var(--bg-secondary); color:var(--text); resize:vertical;
  outline:none; transition:border-color .2s var(--ease);
}
.form-row select:focus, .form-row textarea:focus{border-color:var(--accent);}
.file-drop{
  position:relative; border:1.5px dashed var(--border-strong); border-radius:8px; padding:16px;
  text-align:center; font-size:12px; color:var(--text-faint); background:var(--bg-secondary);
  transition:border-color .2s var(--ease);
}
.file-drop:hover{border-color:var(--accent);}
.file-drop input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.checkbox-row{flex-direction:column; gap:8px;}
.checkbox-label{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--text); cursor:pointer;}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}

/* ================= TOPIC DETAIL MODAL ================= */
.detail-modal{max-width:620px;}
.detail-breadcrumb{font-size:10.5px; color:var(--text-faint); letter-spacing:.05em; display:block; margin-bottom:4px;}
.detail-modal .modal-head{align-items:flex-start;}
.detail-modal h3{font-size:19px;}
.detail-body{display:flex; flex-direction:column; gap:18px;}
.detail-tags{display:flex; gap:8px; flex-wrap:wrap;}
.detail-section-label{
  font-size:10.5px; font-weight:700; letter-spacing:.07em; color:var(--accent-dark);
  text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.detail-text{font-size:13.5px; line-height:1.7; color:var(--text);}
.detail-analogy{
  background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:8px;
  padding:12px 14px; font-size:13px; line-height:1.6; color:var(--accent-dark);
}
.detail-points{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text); line-height:1.5;}
.code-block{
  background:#2B2B26; color:#E9EEDD; border-radius:10px; padding:14px 16px;
  font-family: 'Inter', sans-serif; font-size:12px; line-height:1.6;
  overflow-x:auto; white-space:pre;
}
.code-block .cm{color:#9BAE7E;}
.detail-child-list{display:flex; flex-direction:column; gap:0;}
.detail-child-row{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px;
  border-bottom:1px solid var(--border); font-size:12.5px; border-radius:8px; transition:background .15s var(--ease);
  background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left; color:var(--text);
}
.detail-child-row:last-child{border-bottom:none;}
.detail-child-row:hover{background:var(--bg-secondary); cursor:pointer;}
.detail-child-row .pct{font-family: 'Inter', sans-serif; color:var(--text-muted); font-size:11px;}

.topic-link{cursor:pointer; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:2px; transition:color .15s var(--ease);}
.topic-link:hover{color:var(--accent-dark); text-decoration-color:var(--accent);}

/* ================= RESPONSIVE ================= */
@media(max-width:860px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0); box-shadow:var(--shadow-lg);}
  .sidebar-scrim.show{display:block;}
  .content{margin-left:0; padding:24px 18px 50px;}
  .nav-toggle{display:flex;}
  .search-wrap{width:170px;}
  .header-titles h1{font-size:15.5px;}
  .header-titles .subtitle{display:none;}
}