/* ============================================================
   Layout
   ============================================================ */
.app{
  display:grid;
  grid-template-columns: 264px 1fr;
  min-height:100vh;
}

/* ---- Sidebar ---- */
.sidebar{
  padding:28px 18px;
  display:flex; flex-direction:column; gap:28px;
  border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh;
}
.brand{ display:flex; align-items:center; gap:10px; padding:0 10px; }
.brand-ring{ width:34px; height:34px; flex:none; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.1; }
.brand-name span{ display:block; font-family:var(--font-body); font-weight:500; font-size:11px; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase; }

.nav{ display:flex; flex-direction:column; gap:4px; }
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius: var(--radius-md);
  color:var(--text-dim); font-weight:600; font-size:14px;
  cursor:pointer; border:1px solid transparent; background:none;
  transition: all .2s var(--ease); text-align:left; width:100%;
}
.nav-item:hover{ background:var(--surface); color:var(--text); }
.nav-item.active{
  background: var(--surface-strong);
  border-color:var(--border);
  color:var(--text);
  box-shadow: var(--shadow-sm);
}
.nav-item.active .nav-dot{ background: var(--grad-primary); }
.nav-icon{ width:18px; height:18px; flex:none; opacity:.9; }

.sidebar-footer{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.streak-pill{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius-md);
  background:var(--grad-warm); color:#2b1400; font-weight:700; font-size:13px;
}

/* ---- Main ---- */
.main{ padding:26px 34px 60px; max-width:1400px; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:26px; gap:16px; flex-wrap:wrap;
}
.topbar h1{ font-size:26px; }
.topbar .sub{ color:var(--text-dim); font-size:14px; margin-top:4px; }
.topbar-actions{ display:flex; align-items:center; gap:10px; }

.icon-btn{
  width:40px; height:40px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  cursor:pointer; color:var(--text); transition: transform .15s var(--ease), background .2s;
}
.icon-btn:hover{ transform:translateY(-2px); background:var(--surface-strong); }
.icon-btn svg{ width:18px; height:18px; }

.accent-dots{ display:flex; gap:6px; align-items:center; padding:4px 6px; border-radius:var(--radius-pill); background:var(--surface); border:1px solid var(--border); }
.accent-dot{ width:18px; height:18px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition: transform .15s var(--ease); }
.accent-dot:hover{ transform:scale(1.15); }
.accent-dot.active{ border-color: var(--text); }

.view{ display:none; animation: fadeUp .45s var(--ease); }
.view.active{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* ---- Grid / Cards ---- */
.grid{ display:grid; gap:18px; }
.grid-dash{ grid-template-columns: repeat(12, 1fr); }
.card{
  padding:20px; display:flex; flex-direction:column; gap:12px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{ box-shadow: var(--shadow-md); }
.card-title{ display:flex; align-items:center; justify-content:space-between; }
.card-title h3{ font-size:14px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.card-title .card-icon{ width:20px; height:20px; opacity:.7; }

.span-4{ grid-column: span 4; }
.span-5{ grid-column: span 5; }
.span-6{ grid-column: span 6; }
.span-7{ grid-column: span 7; }
.span-8{ grid-column: span 8; }
.span-12{ grid-column: span 12; }

/* ---- Focus Ring (signature element) ---- */
.ring-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.ring-wrap svg{ transform: rotate(-90deg); }
.ring-track{ fill:none; stroke: var(--border); }
.ring-progress{ fill:none; stroke-linecap:round; transition: stroke-dashoffset 1s var(--ease); }
.ring-center{ position:absolute; text-align:center; }
.ring-value{ font-family:var(--font-display); font-weight:700; font-size:22px; }
.ring-label{ font-size:11px; color:var(--text-dim); }

/* ---- Timeline (Daily schedule) ---- */
.timeline{ display:flex; flex-direction:column; gap:0; position:relative; }
.timeline-item{ display:grid; grid-template-columns:64px 1fr; gap:14px; padding:12px 0; position:relative; }
.timeline-item::before{
  content:""; position:absolute; left:70px; top:0; bottom:0; width:2px; background:var(--border);
}
.timeline-item:first-child::before{ top:50%; }
.timeline-item:last-child::before{ bottom:50%; }
.timeline-time{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); text-align:right; padding-top:3px; }
.timeline-dot{ position:absolute; left:65px; top:16px; width:12px; height:12px; border-radius:50%; background:var(--bg-elevated); border:3px solid var(--accent); z-index:1; }
.timeline-content{ padding:12px 16px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); }
.timeline-content.now{ background: var(--grad-primary); color:#fff; border-color:transparent; box-shadow: var(--shadow-md); }
.timeline-subject{ font-weight:700; font-size:14px; }
.timeline-meta{ font-size:12px; opacity:.8; margin-top:2px; }

/* ---- Badges / chips ---- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; }
.chip-dot{ width:6px; height:6px; border-radius:50%; }

.progress-bar{ height:8px; border-radius:var(--radius-pill); background:var(--border); overflow:hidden; }
.progress-fill{ height:100%; border-radius:var(--radius-pill); background:var(--grad-primary); transition: width .6s var(--ease); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:11px 18px; border-radius:var(--radius-md); font-weight:700; font-size:13.5px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-primary{ background: var(--grad-primary); color:#fff; border-color:transparent; }
.btn-primary:hover{ box-shadow: var(--shadow-md); }
.btn-sm{ padding:7px 12px; font-size:12.5px; border-radius:var(--radius-sm); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-danger{ color:var(--accent-3); }

/* ---- Forms ---- */
input, textarea, select{
  font-family: var(--font-body); font-size:14px; color:var(--text);
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:10px 12px; width:100%; outline:none; transition: border-color .2s;
}
input:focus, textarea:focus, select:focus{ border-color: var(--accent); }
label{ font-size:12px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em; display:block; margin-bottom:6px; }
.field{ display:flex; flex-direction:column; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ---- Quote ---- */
.quote-card{ background: var(--grad-primary); color:#fff; }
.quote-text{ font-family:var(--font-display); font-size:17px; line-height:1.4; }
.quote-author{ font-size:12px; opacity:.85; margin-top:8px; }

/* ---- Timetable grid ---- */
.tt-wrap{ overflow-x:auto; }
.tt-grid{ display:grid; grid-template-columns: 70px repeat(6, minmax(150px,1fr)); gap:8px; min-width:900px; }
.tt-head{ font-weight:700; font-size:12px; text-align:center; padding:8px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.tt-time{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); text-align:right; padding:10px 6px 0 0; }
.tt-cell{ min-height:56px; border-radius:var(--radius-sm); border:1px dashed var(--border); }
.tt-block{
  border-radius:var(--radius-sm); padding:8px 10px; font-size:12px; font-weight:700; color:#fff;
  cursor:grab; box-shadow: var(--shadow-sm); min-height:56px; display:flex; flex-direction:column; justify-content:center;
}
.tt-block small{ display:block; font-weight:500; opacity:.85; font-size:10.5px; }
.tt-block.current{ outline:2px solid var(--text); outline-offset:2px; }

/* ---- List rows (assignments/reminders) ---- */
.row-list{ display:flex; flex-direction:column; gap:10px; }
.row-item{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border);
  transition: transform .15s var(--ease);
}
.row-item:hover{ transform: translateX(2px); }
.row-item.done{ opacity:.55; }
.row-item.done .row-title{ text-decoration: line-through; }
.check{
  width:22px; height:22px; border-radius:7px; border:2px solid var(--border); flex:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: all .2s;
}
.check.checked{ background: var(--grad-mint); border-color:transparent; }
.check.checked svg{ width:13px; height:13px; stroke:#fff; }
.row-body{ flex:1; min-width:0; }
.row-title{ font-weight:700; font-size:14px; }
.row-meta{ font-size:12px; color:var(--text-dim); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; }
.priority-high{ color:var(--accent-3); }
.priority-med{ color:var(--accent-5); }
.priority-low{ color:var(--accent-4); }

/* ---- Notebook ---- */
.nb-layout{ display:grid; grid-template-columns: 240px 1fr; gap:18px; }
.nb-list{ display:flex; flex-direction:column; gap:8px; max-height:70vh; overflow:auto; }
.nb-note{ padding:12px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); cursor:pointer; font-size:13px; }
.nb-note.active{ border-color: var(--accent); box-shadow: var(--shadow-sm); }
.nb-note-title{ font-weight:700; margin-bottom:3px; }
.nb-note-meta{ color:var(--text-faint); font-size:11px; }
.nb-editor{ display:flex; flex-direction:column; gap:10px; }
.nb-toolbar{ display:flex; gap:6px; flex-wrap:wrap; }
.nb-toolbar button{ width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); cursor:pointer; font-weight:700; }
.nb-canvas-tools{ display:flex; gap:8px; align-items:center; }
.nb-body[contenteditable]{ min-height:280px; padding:16px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); font-size:14px; line-height:1.7; }
canvas.nb-draw{ border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg-elevated); touch-action:none; width:100%; height:280px; }

/* ---- AI Assistant ---- */
.chat-log{ display:flex; flex-direction:column; gap:12px; max-height:420px; overflow:auto; padding-right:4px; }
.msg{ max-width:82%; padding:12px 14px; border-radius:var(--radius-md); font-size:13.5px; line-height:1.55; }
.msg.ai{ background:var(--surface); border:1px solid var(--border); align-self:flex-start; }
.msg.user{ background: var(--grad-primary); color:#fff; align-self:flex-end; }
.ai-tools{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.ai-tool{ padding:14px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); cursor:pointer; text-align:left; }
.ai-tool:hover{ border-color: var(--accent); }
.ai-tool-title{ font-weight:700; font-size:13.5px; }
.ai-tool-sub{ font-size:11.5px; color:var(--text-dim); margin-top:3px; }

.flash-card{
  aspect-ratio:3/2; border-radius:var(--radius-md); background: var(--grad-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:18px;
  cursor:pointer; font-weight:700; font-size:14px; perspective:800px;
}

/* ---- Achievements ---- */
.badge{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:16px 10px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border);
}
.badge.locked{ opacity:.4; filter:grayscale(1); }
.badge-icon{ width:44px; height:44px; border-radius:50%; background:var(--grad-warm); display:flex; align-items:center; justify-content:center; font-size:20px; }

/* ---- Group study ---- */
.member{ display:flex; align-items:center; gap:10px; }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--grad-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none; }

.empty{ text-align:center; padding:36px 20px; color:var(--text-dim); }
.empty svg{ width:40px; height:40px; margin-bottom:10px; opacity:.5; }

/* ---- Modal ---- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(10,8,20,.5); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-backdrop.open{ display:flex; }
.modal{ width:min(480px,100%); max-height:88vh; overflow:auto; padding:24px; border-radius:var(--radius-lg); background:var(--bg-elevated); border:1px solid var(--border); box-shadow: var(--shadow-lg); display:flex; flex-direction:column; gap:14px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; }

/* ---- Toast ---- */
.toast-wrap{ position:fixed; bottom:22px; right:22px; display:flex; flex-direction:column; gap:10px; z-index:200; }
.toast{ padding:12px 16px; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); box-shadow: var(--shadow-md); font-size:13px; font-weight:600; animation: slideIn .3s var(--ease); }
@keyframes slideIn{ from{ opacity:0; transform:translateX(20px);} to{opacity:1; transform:none;} }

/* ---- Charts (lightweight canvas-based) ---- */
.chart-box{ position:relative; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-dim); }
.legend-item{ display:flex; align-items:center; gap:6px; }
.legend-dot{ width:9px; height:9px; border-radius:50%; }

/* ---- Responsive ---- */
@media (max-width: 980px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; bottom:0; left:0; right:0; top:auto; height:auto; flex-direction:row;
    overflow-x:auto; padding:10px 12px; border-right:none; border-top:1px solid var(--border);
    background: var(--bg-elevated); z-index:50; gap:6px; }
  .brand,.sidebar-footer{ display:none; }
  .nav{ flex-direction:row; gap:4px; }
  .nav-item span{ display:none; }
  .main{ padding:20px 16px 100px; }
  .grid-dash [class*="span-"]{ grid-column: span 12; }
  .nb-layout{ grid-template-columns:1fr; }
}