@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ============ TOKENS ============ */
:root{
  --bg: #0b0c0f;
  --surface: #131419;
  --surface-2: #191b21;
  --surface-3: #1e2027;
  --line: rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.055);
  --line-strong: rgba(255,255,255,.16);
  --text: #eef0f3;
  --text-dim: #9a9ea8;
  --text-faint: #686c76;

  --gold: #4fd1c5;
  --gold-soft: rgba(79,209,197,.14);
  --sage: #7fe3ab;
  --brick: #f2705c;
  --brick-soft: rgba(242,112,92,.14);

  --tab1: #f0a860;
  --tab2: #7fe3ab;
  --tab3: #6fb3f2;
  --tab4: #c9a8f2;
  --tab5: #4fd1c5;
  --tab6: #8fd0c9;
  --tab7: #f2a8d0;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 6px 16px rgba(0,0,0,.18);
  --shadow-md: 0 16px 40px rgba(0,0,0,.28);
}

/* ============ RESET & BASE ============ */
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}

html,body{
  height:100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.display{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}

button, input, textarea, select{
  font-family: inherit;
  color: inherit;
}

button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

::selection{ background: var(--gold-soft); color: var(--text); }
::-moz-selection{ background: var(--gold-soft); color: var(--text); }

/* ============ LAYOUT ============ */
.app{
  display:flex;
  height:100vh;
  height:100dvh;
  width:100vw;
}

/* ============ MOBILE TOPBAR & NAV DRAWER (hidden on desktop) ============ */
.mobile-topbar{ display:none; }
.nav-close-btn{ display:none; }
.nav-scrim{ display:none; }

/* ---------- sidebar ---------- */
.tabs{
  display:flex;
  flex-direction:column;
  width: 232px;
  flex-shrink:0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 20px 12px 14px;
}

.brand{
  padding: 4px 8px 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.brand .mark{
  width: 34px; height:34px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk';
  font-weight:700;
  font-size:14px;
  color: #0b1613;
  background: var(--gold);
  margin-bottom: 12px;
}
.brand .name{
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.brand .sub{
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 3px;
}

.tab-btn{
  display:flex;
  align-items:center;
  gap: 10px;
  text-align:left;
  min-height:38px;
  padding: 9px 10px;
  margin: 1px 0;
  border:1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor:pointer;
  font-size: 13.5px;
  color: var(--text-dim);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tab-btn .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--dotc);
  flex-shrink:0;
}
.tab-btn:hover{ color: var(--text); background: var(--surface-2); }
.tab-btn.active{
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line);
}
.tab-btn .count{
  margin-left:auto;
  font-size: 10.5px;
  color: var(--text-dim);
  background: rgba(255,255,255,.06);
  border-radius: 7px;
  padding: 1px 6px;
  min-width: 16px;
  text-align:center;
}

.sync-note{
  margin-top:auto;
  padding: 16px 10px 8px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  line-height:1.5;
  color: var(--text-faint);
}
.sync-note b{ color: var(--text-dim); font-weight:600; }
.sync-dotpulse{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--sage); margin-right:5px;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.4} 50%{opacity:1} }
.sync-dotpulse.flash{ animation: saveFlash .9s ease; }
@keyframes saveFlash{ 0%{ background: var(--gold); box-shadow:0 0 0 0 var(--gold-soft);} 60%{background: var(--gold); box-shadow:0 0 0 6px transparent;} 100%{ background: var(--sage);} }

.backup-row{
  display:flex; gap:6px;
  padding: 10px 2px 2px;
}
.backup-btn{
  flex:1;
  font-size:10.5px;
  letter-spacing:.01em;
  padding:8px 4px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor:pointer;
  text-align:center;
  transition: border-color .15s ease, color .15s ease, transform .1s ease;
}
.backup-btn:hover{ color:var(--text); border-color: var(--line-strong); }
.backup-btn:active{ transform: scale(.97); }
@media (max-width: 720px){ .backup-row{ display:none; } }

/* ---------- main ---------- */
.main{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative;
  padding: 34px 44px 60px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  overscroll-behavior-y: contain;
}
.main::-webkit-scrollbar{width:9px}
.main::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:5px}
.main::-webkit-scrollbar-track{background:transparent}

.view{ display:none; animation: viewIn .25s ease; }
.view.active{ display:block; }
@keyframes viewIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

/* ============ DASHBOARD ============ */
.topline{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.topline .greeting{ font-size: 25px; letter-spacing:-.02em; }
.topline .date{ font-size: 12.5px; color: var(--text-faint); margin-top:6px; text-transform:capitalize; }
.topline-badges{ display:flex; align-items:center; gap:10px; }
.streak-badge{
  font-size: 11px;
  color: var(--tab1);
  border: 1px solid rgba(240,168,96,.3);
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(240,168,96,.1);
  font-weight:500;
  transition: transform .15s ease;
}
.streak-badge:hover{ transform: translateY(-1px); }
.today-badge{
  font-size: 11px;
  color: var(--gold);
  border: 1px solid var(--gold-soft);
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--gold-soft);
  font-weight:500;
}

.quick-actions{
  display:grid;
  grid-template-columns:1.2fr repeat(4,1fr);
  gap:10px;
  margin: 0 0 24px;
  padding:10px;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.quick-heading{ display:flex; flex-direction:column; justify-content:center; padding:8px 14px; }
.quick-heading span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.quick-heading strong{ margin-top:6px; font-size:16px; font-weight:600; color:var(--text); }
.quick-action{
  display:flex; align-items:center; gap:10px;
  min-height:62px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  text-align:left;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.quick-action:hover{ border-color: var(--gold-soft); background: rgba(79,209,197,.06); transform: translateY(-1px); }
.quick-action b,.quick-action small{ display:block; }
.quick-action b{ font-size:12.5px; font-weight:600; }
.quick-action small{ margin-top:3px; color:var(--text-faint); font-size:10.5px; }
.quick-icon{
  display:grid; place-items:center;
  width:28px; height:28px;
  border-radius:8px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size:15px;
  flex-shrink:0;
}

.dash-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
  align-items:start;
}
.orbit-wrap{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  background: var(--surface);
  display:flex; flex-direction:column; align-items:center;
}
.orbit-title{ font-size: 11.5px; color: var(--text-faint); margin-bottom: 8px; align-self:flex-start; text-transform:uppercase; letter-spacing:.08em; }
.orbit-svg{ width:100%; max-width: 280px; height:auto; }
.orbit-legend{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; justify-content:center; }
.orbit-legend span{ font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:6px;}
.orbit-legend i{ width:7px;height:7px;border-radius:50%; display:inline-block; }

.stat-list{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 4px 20px;
}
.stat-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.stat-row:last-child{ border-bottom:none; }
.stat-row .label{ font-size:13px; color:var(--text-dim); }
.stat-row .value{ font-family:'Space Grotesk'; font-size:20px; color:var(--text); }

.upcoming-title{ font-size:11.5px; color:var(--text-faint); margin: 20px 0 10px; text-transform:uppercase; letter-spacing:.08em; padding-left:2px; }
.upcoming-item{
  display:flex; gap:12px; align-items:flex-start;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size:13px;
}
.upcoming-item:last-child{ border-bottom:none; }
.upcoming-item .u-date{
  font-family:'Space Grotesk'; font-size:12px; color:var(--gold);
  min-width:44px;
}
.upcoming-item .u-title{ color:var(--text); }
.upcoming-item .u-sub{ color:var(--text-faint); font-size:11.5px; margin-top:1px; }

.empty-note{
  color:var(--text-faint);
  font-size:12.5px;
  padding:22px 20px;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-md);
  background: var(--surface);
  line-height:1.6;
}

/* ============ SECTION HEADER ============ */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:18px; margin-bottom: 22px;
}
.section-head h2{ font-size:26px; letter-spacing:-.02em; }
.section-hint{ margin-top:6px; color:var(--text-faint); font-size:12px; line-height:1.5; max-width:560px; }
.add-btn{
  border:1px solid var(--gold-soft);
  background: var(--gold-soft);
  color: var(--gold);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  transition: background .15s ease, transform .1s ease;
}
.add-btn:hover{ background: rgba(79,209,197,.22); }
.add-btn:active{ transform: scale(.97); }

/* ============ LIST / LEDGER ============ */
.ledger{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow:hidden;
}
.item-row{
  display:grid;
  grid-template-columns: 20px 1fr auto auto auto;
  gap: 14px;
  align-items:center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .12s ease;
}
.item-row:last-child{ border-bottom:none; }
.item-row:hover{ background: var(--surface-2); }
.check{
  width:16px; height:16px; border-radius:4px;
  border: 1.5px solid var(--text-faint);
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  transition: background .12s ease, border-color .12s ease;
}
.check.done{ background: var(--sage); border-color: var(--sage); }
.check.done::after{
  content:''; position:absolute; left:5px; top:1px;
  width:4px; height:8px;
  border:solid #0b1613; border-width:0 2px 2px 0;
  transform: rotate(45deg);
}
.item-main .item-title{ font-size:13.5px; color:var(--text); }
.item-main.done .item-title{ color:var(--text-faint); text-decoration: line-through; }
.item-main .item-meta{ font-size:11.5px; color:var(--text-faint); margin-top:3px; }
.tag{
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  white-space:nowrap;
  background: rgba(255,255,255,.02);
}
.tag.overdue{ color: var(--brick); border-color: rgba(242,112,92,.4); background: var(--brick-soft); }
.tag.sor{ color: var(--brick); border-color: rgba(242,112,92,.4); background: var(--brick-soft); font-weight:600; }
.tag.sor.lowgrade{ color:#ff9d8f; border-color:rgba(255,120,100,.55); background:rgba(255,90,70,.16); }
.tag.priority-high{ color: var(--brick); border-color: rgba(242,112,92,.4); background: var(--brick-soft); font-weight:600; }
.tag.priority-low{ color: var(--text-faint); }
.row-actions{ display:flex; gap:6px; }
.icon-btn{
  background:none; border:none; color:var(--text-faint); cursor:pointer;
  display:inline-flex; align-items:center;
  font-size: 13px; padding: 4px 6px; border-radius:6px;
  transition: color .12s ease, background .12s ease;
}
.icon-btn .ui-icon{ width:14px; height:14px; }
.icon-btn:hover{ color: var(--gold); background: var(--gold-soft); }
.icon-btn.del:hover{ color: var(--brick); background: var(--brick-soft); }

/* ============ SUBJECTS ============ */
.subject-panel{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.subject-pill{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--text-dim);
  font-size:12.5px;
  cursor:pointer;
  transition: all .15s ease;
}
.subject-pill:hover{ border-color: var(--line-strong); color: var(--text); }
.subject-pill.active{
  background: var(--gold);
  border-color: var(--gold);
  color: #0b1613;
  font-weight:600;
}
.subject-pill-count{
  background: rgba(0,0,0,.16);
  border-radius:999px;
  font-size:10.5px;
  padding:1px 7px;
  line-height:1.4;
}
.subject-pill.active .subject-pill-count{ background: rgba(0,0,0,.2); }
.subject-detail{ margin-top:4px; }
.subject-detail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.subject-detail-head h3{
  font-size:19px;
  font-weight:600;
}

/* ============ FILTER ROW ============ */
.hw-filter-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  font-size:12px;
  color: var(--text-dim);
}
.hw-filter-row select{
  background: var(--surface);
  border:1px solid var(--line);
  color: var(--text);
  border-radius:var(--radius-sm);
  padding:7px 10px;
  font-size:12.5px;
  cursor:pointer;
}
.hw-filter-row select:focus{ border-color: var(--gold-soft); outline:none; }

/* ============ SUMMATIVES STATS ============ */
.summ-stats{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:stretch;
  margin-bottom:16px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background: var(--surface);
}
.summ-stat-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:150px;
  padding-right:18px;
  border-right:1px solid var(--line);
}
.summ-stat-label{ font-size:11px; color:var(--text-faint); }
.summ-stat-value{ font-family:'Space Grotesk'; font-size:30px; color:var(--text); margin-top:4px; }
.summ-stat-sub{ font-size:11px; color:var(--text-faint); margin-top:4px; }
.summ-subject-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  flex:1;
}
.summ-subject-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--gold-soft);
  font-size:11.5px;
  color:var(--text-dim);
}
.summ-subject-pill b{ color:var(--gold); font-family:'Space Grotesk'; }
.summ-subject-pill.low{ border-color:rgba(242,112,92,.35); background:var(--brick-soft); }
.summ-subject-pill.low b{ color:#ff9d8f; }
@media (max-width:760px){
  .summ-stat-card{ border-right:none; padding-right:0; border-bottom:1px solid var(--line); padding-bottom:12px; width:100%; }
}

/* ============ GOALS / NOTES ============ */
.goal-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 12px;
  background: var(--surface);
  transition: border-color .15s ease;
}
.goal-card:hover{ border-color: var(--line-strong); }
.goal-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.goal-title{ font-size: 14px; font-weight:600; }
.goal-desc{ font-size:12.5px; color:var(--text-faint); margin-top:6px; line-height:1.55; }
.goal-bar-track{
  margin-top: 14px;
  height: 6px;
  background: var(--line-soft);
  border-radius: 4px;
  overflow:hidden;
}
.goal-bar-fill{
  height:100%;
  background: linear-gradient(90deg, var(--sage), var(--gold));
  border-radius:4px;
  transition: width .4s ease;
}
.goal-pct{ font-size:11px; color:var(--text-faint); margin-top:8px; text-align:right; }
.note-card .goal-desc{ white-space:pre-wrap; }

/* ============ SCHEDULE ============ */
.sched-nav{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.sched-arrow{
  width:30px; height:30px;
  border-radius:50%;
  border:1px solid var(--line);
  background: var(--surface);
  color:var(--text);
  cursor:pointer;
  font-size:15px;
  transition: border-color .15s ease, color .15s ease;
}
.sched-arrow:hover{ border-color:var(--gold-soft); color:var(--gold); }
.sched-range{
  font-family:'Space Grotesk';
  font-size:15px;
  font-weight:600;
  min-width:150px;
}
.sched-today{
  border:1px solid var(--gold-soft);
  background: var(--gold-soft);
  color: var(--gold);
  border-radius:14px;
  padding:6px 14px;
  font-size:11px;
  cursor:pointer;
}
.sched-today:hover{ background: rgba(79,209,197,.22); }
.sched-grid-wrap{ overflow-x:auto; padding-bottom:8px; }
.sched-grid{
  display:grid;
  grid-template-columns: 58px repeat(5, minmax(150px,1fr));
  min-width: 820px;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  border-radius: var(--radius-md);
  overflow:hidden;
}
.sched-corner{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background: var(--surface);
}
.sched-head{
  padding:8px 6px;
  text-align:center;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background: var(--surface);
}
.sched-head.is-today{ background: var(--gold-soft); }
.sched-head-day{ font-size:11.5px; color:var(--text-dim); }
.sched-head-date{ font-family:'Space Grotesk'; font-size:13px; font-weight:600; margin-top:2px; }
.sched-time{
  padding:6px 6px;
  font-size:10.5px;
  color:var(--text-faint);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:flex-start;
  background: var(--surface);
}
.sched-cell{
  padding:6px 8px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line-soft);
  min-height:56px;
  cursor:pointer;
  background: rgba(255,255,255,.012);
  transition: background .12s ease;
}
.sched-cell:hover{ background: var(--surface-2); }
.sched-cell.homeroom{ cursor:default; opacity:.5; }
.sched-subj{ font-size:12px; font-weight:600; color:var(--text); }
.sched-room{ font-size:10px; color:var(--text-faint); margin-top:1px; }
.sched-tag{
  font-size:10.5px;
  color: var(--text-dim);
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sched-tag.sor{ color: var(--brick); font-weight:600; }
.sched-tag.done{ color: var(--text-faint); text-decoration:line-through; }

/* ============ CALENDAR ============ */
.cal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 20px;
}
.cal-nav{ display:flex; gap:8px; align-items:center; }
.cal-nav button{
  width:28px; height:28px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 50%;
  cursor:pointer;
  font-size:13px;
  transition: border-color .15s ease, color .15s ease;
}
.cal-nav button:hover{ color: var(--gold); border-color: var(--gold-soft); }
.cal-nav button:nth-child(2){ width:auto; border-radius:14px; padding:0 12px; font-size:11px; }
.cal-month-label{ font-family:'Space Grotesk'; font-size:18px; min-width:170px; text-align:center; }

.cal-grid-wrap{ position:relative; min-height: 420px; }
.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.cal-dow{
  background: var(--surface);
  text-align:center;
  font-size: 10.5px;
  color: var(--text-faint);
  padding: 10px 0;
}
.cal-cell{
  background: var(--surface);
  min-height: 90px;
  padding: 8px 9px;
  cursor:pointer;
  position:relative;
  transition: background .12s ease;
}
.cal-cell:hover{ background: var(--surface-2); }
.cal-cell.other{ opacity: .32; }
.cal-cell.today{ box-shadow: inset 0 0 0 1px var(--gold); background: var(--gold-soft); }
.cal-cell.selected{ outline: 1.5px solid var(--gold); outline-offset:-1.5px; }
.cal-daynum{ font-size: 11.5px; color: var(--text-dim); font-family:'Space Grotesk'; }
.cal-dots{ display:flex; gap:3px; margin-top:8px; flex-wrap:wrap; }
.cal-dots i{ width:5px; height:5px; border-radius:50%; display:block; }

.cal-fade{ animation: calFade .22s ease; }
@keyframes calFade{ from{opacity:0; transform: translateY(3px);} to{opacity:1; transform:translateY(0);} }

.day-panel{
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.day-panel-title{ font-size: 13px; color: var(--text-dim); margin-bottom: 12px; text-transform:capitalize; }

/* ============ MODAL ============ */
.overlay{
  position:fixed; inset:0; background: rgba(5,6,8,.68);
  display:none; align-items:center; justify-content:center; z-index:50;
  backdrop-filter: blur(4px);
}
.overlay.open{ display:flex; animation: overlayIn .16s ease; }
@keyframes overlayIn{ from{opacity:0} to{opacity:1} }
.modal{
  width: 440px; max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-md);
  transform: translateY(6px);
  animation: modalIn .18s ease forwards;
}
@keyframes modalIn{ to{ transform: translateY(0); } }
.modal h3{ font-size: 17px; margin-bottom: 18px; letter-spacing:-.01em; }
.field{ margin-bottom: 14px; }
.field label{ display:block; font-size:11.5px; color:var(--text-faint); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 13px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.field textarea{ resize:vertical; min-height: 56px; }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 20px; }
.btn-secondary, .btn-primary{
  padding: 9px 18px; border-radius: var(--radius-sm); font-size: 12.5px; cursor:pointer; border:1px solid var(--line);
  transition: background .15s ease, transform .1s ease, filter .15s ease;
}
.btn-secondary{ background:transparent; color:var(--text-dim); }
.btn-secondary:hover{ color: var(--text); background: var(--surface-2); }
.btn-primary{ background: var(--gold); color:#0b1613; border-color:var(--gold); font-weight:600; }
.btn-primary:hover{ filter: brightness(1.08); }
.btn-primary:active, .btn-secondary:active{ transform: scale(.97); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .tabs{ width:200px; }
}
@media (max-width: 760px){
  .app{ flex-direction:column; }
  .mobile-topbar{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    height:56px;
    padding: env(safe-area-inset-top,0) 14px 0;
    box-sizing:content-box;
    background: var(--surface);
    border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:55;
    flex-shrink:0;
  }
  .mobile-topbar-title{
    display:flex; flex-direction:column; align-items:center; gap:1px;
    min-width:0; flex:1;
    font-family:'Space Grotesk'; color:var(--text);
  }
  .mobile-topbar-title b{
    font-size:13.5px; font-weight:600;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .mobile-topbar-title small{
    font-family:'Inter',sans-serif; font-size:9.5px; font-weight:400; color:var(--gold);
  }
  .mobile-icon-btn{
    width:36px; height:36px; flex-shrink:0;
    display:grid; place-items:center;
    border:1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-dim);
    font-size:15px;
    cursor:pointer;
  }
  .nav-scrim{
    position:fixed; inset:0; z-index:65;
    background: rgba(3,4,6,.55);
    display:none;
  }
  .nav-scrim.open{ display:block; }
  .nav-close-btn{
    display:grid;
    position:absolute; top:14px; right:14px;
    z-index:2;
  }
  .tabs{
    position:fixed; top:0; bottom:0; left:0;
    width:82vw; max-width:300px;
    padding-top: calc(20px + env(safe-area-inset-top,0px));
    padding-bottom: calc(14px + env(safe-area-inset-bottom,0px));
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index:70;
    box-shadow: var(--shadow-md);
    overflow-y:auto;
  }
  .tabs.open{ transform: translateX(0); }
  .brand .name, .brand .sub, .tab-btn span.label, .tab-btn .count{ display:block; }
  .brand{ text-align:left; padding:0 8px 18px; }
  .tab-btn{ justify-content:flex-start; }
  .sync-note{ display:block; }
  .backup-row{ display:flex; }
  .main{ padding: 20px 16px 50px; }
  .dash-grid{ grid-template-columns: 1fr; }
  .quick-actions{ grid-template-columns:repeat(2,1fr); }
  .quick-heading{ grid-column:1/-1; min-height:auto; }
  .topline{ flex-wrap:wrap; row-gap:10px; }
  .pomodoro{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width:520px){
  .quick-actions{ grid-template-columns:1fr; }
  .quick-heading{ grid-column:auto; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .item-row{ grid-template-columns: 20px 1fr auto; row-gap:8px; }
  .item-row .row-actions{ grid-column: 1/-1; justify-content:flex-end; }
  .cal-cell{ min-height:70px; }
  .tabs{ width:86vw; }
}

/* ============ INTRO SPLASH ============ */
.intro-splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background: var(--bg);
  transition: opacity 1.4s ease, filter 1.4s ease;
}
.intro-splash.closing{ opacity:0; filter:blur(14px); pointer-events:none; }
.intro-splash.done{ display:none; }
.intro-art{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  opacity:0;
  filter:saturate(.78) contrast(1.08);
  animation: artReveal 24s ease-in-out infinite;
}
.intro-art-one{ background-image:url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/_%20%281%29-98AQ3fhWuZ2caWTYcI1bx2g4afKqtg.jpeg'); animation-delay:0s; }
.intro-art-two{ background-image:url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/395402042287166979-WZnRNR53n6DukHUF9Z2HzQN35XbwOQ.jpeg'); animation-delay:8s; }
.intro-art-three{ background-image:url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/946178202950321835-BRMSKZtin3zdtud8jelUvUEtVKK49C.jpeg'); animation-delay:16s; }
.intro-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, rgba(11,12,15,.12), rgba(11,12,15,.88) 88%),
    linear-gradient(90deg, rgba(11,12,15,.74), transparent 55%, rgba(11,12,15,.5));
}
.intro-stage{ position:relative; z-index:2; text-align:center; }
.intro-kicker{
  font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold);
  opacity:0; animation: riseIn 1.3s .5s both;
}
.intro-title{
  font-family:'Space Grotesk'; font-size:clamp(42px,7vw,96px); line-height:.98; letter-spacing:-.06em;
  color:#eee9da; margin-top:22px; text-shadow:0 12px 40px rgba(0,0,0,.45);
  opacity:0; animation: riseIn 1.6s .8s both;
}
.intro-title em{ font-family:Georgia,serif; font-weight:400; font-style:italic; color:#d7b76d; }
.intro-rule{ width:120px; height:1px; background:var(--gold); margin:28px auto; animation: ruleIn 1.5s 1.4s both; }
.intro-caption{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(236,233,221,.65);
  opacity:0; animation: riseIn 1.3s 1.6s both;
}
.intro-skip{
  position:absolute; bottom:26px; right:28px;
  background:none; border:none; cursor:pointer;
  font-size:11px; color:var(--text-faint);
  padding:6px 10px; border-radius:6px;
  transition: color .15s ease, background .15s ease;
}
.intro-skip:hover{ color:var(--text); background: var(--surface-2); }
.intro-loop .intro-art{ animation-duration: var(--scene-duration,16s); }
@keyframes artReveal{
  0%,100%{opacity:0;transform:scale(1.02) translate3d(-1%,0,0)}
  14%,32%{opacity:.7}
  42%{opacity:0}
  50%{transform:scale(1.1) translate3d(2%,-1%,0)}
}
@keyframes riseIn{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes ruleIn{ from{width:0;opacity:0} to{width:120px;opacity:1} }

.settings-card{
  padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background: var(--surface-2); margin-bottom:10px;
}
.settings-card label{ display:flex; gap:10px; align-items:center; font-size:12px; color:var(--text); }
.settings-card input{ accent-color: var(--gold); }
.settings-card small{ display:block; color:var(--text-faint); font-size:10px; margin:7px 0 0 24px; line-height:1.4; }
.settings-btn{
  margin:14px 2px 4px;
  padding:10px 12px;
  border:1px solid var(--gold-soft);
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: var(--radius-sm);
  font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  cursor:pointer; text-align:left;
  transition: background .2s ease, transform .15s ease;
}
.settings-btn span{ float:right; font-size:14px; }
.settings-btn:hover{ background: rgba(79,209,197,.22); transform: translateY(-1px); }

/* ============ DASHBOARD HERO (animated watch) ============ */
.dashboard-hero{
  position:relative;
  min-height:320px;
  margin:0 0 24px;
  padding:38px 44px;
  border:1px solid rgba(201,184,255,.22);
  border-radius: var(--radius-lg);
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 40%, rgba(79,209,197,.13), transparent 22%),
    linear-gradient(120deg, rgba(19,30,47,.91), rgba(21,28,43,.59) 70%, rgba(35,28,50,.42));
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:space-between;
}
.dashboard-hero::before{
  content:'';
  position:absolute;
  width:180px; height:180px;
  right:35%; top:-120px;
  border:1px solid rgba(79,209,197,.12);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(79,209,197,.025), 0 0 0 56px rgba(201,184,255,.02);
  animation: uiOrbit 14s linear infinite;
}
.dashboard-hero::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 45%, rgba(255,255,255,.055));
  pointer-events:none;
}
@keyframes uiOrbit{ to{ transform:rotate(360deg); } }
.hero-copy{ position:relative; z-index:2; max-width:510px; }
.eyebrow{ display:inline-block; color:var(--gold); font-weight:600; font-size:10px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:18px; }
.hero-copy h1{ font-family:Georgia,serif; font-size:clamp(38px,5vw,72px); font-weight:400; line-height:.98; letter-spacing:-.03em; color:var(--text); text-shadow:0 10px 30px rgba(0,0,0,.35); }
.hero-copy h1 em{ font-style:italic; color:var(--tab4); }
.hero-copy p{ margin-top:18px; color:var(--text-dim); font-size:13px; max-width:310px; line-height:1.6; }
.hero-note{ position:absolute; right:24px; top:24px; z-index:3; display:flex; gap:8px; align-items:center; color:var(--text-faint); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.hero-note span:first-child{ color:var(--gold); font-family:'Space Grotesk'; font-size:16px; }

.hero-object{
  position:relative; z-index:2;
  width:280px; height:260px;
  display:flex; align-items:center; justify-content:center;
  margin-right:3%;
  perspective:900px;
}
.watch-glow{
  position:absolute; width:190px; height:190px; border-radius:50%;
  background: radial-gradient(circle, rgba(79,209,197,.28), rgba(201,184,255,.12) 42%, transparent 70%);
  filter:blur(18px);
  animation: watchGlow 5s ease-in-out infinite;
}
.watch-stage{
  position:relative; width:180px; height:230px;
  transform-style:preserve-3d;
  animation: watchMotion 10s ease-in-out infinite alternate;
}
.watch-band{
  position:absolute; left:48px; width:84px; height:116px;
  border:1px solid rgba(239,247,255,.45);
  background:
    repeating-linear-gradient(90deg, rgba(82,101,119,.8) 0 7px, rgba(218,229,237,.92) 7px 11px, rgba(91,109,126,.85) 11px 17px),
    linear-gradient(90deg,#53687b,#f0f5f7 48%,#53687b);
  box-shadow: inset 0 0 12px rgba(0,0,0,.46), 0 8px 12px rgba(0,0,0,.25);
  transform: translateZ(-8px);
}
.watch-band::after{
  content:''; position:absolute; inset:10px 15px;
  border-left:1px solid rgba(255,255,255,.38);
  border-right:1px solid rgba(0,0,0,.25);
  opacity:.7;
}
.watch-band-top{ top:-18px; border-radius:22px 22px 8px 8px; }
.watch-band-bottom{ bottom:-18px; border-radius:8px 8px 22px 22px; }
.watch-case{
  position:absolute; left:4px; top:43px; width:172px; height:148px;
  border-radius:48%; padding:8px;
  background: linear-gradient(135deg,#f7fbff 0%,#879bab 24%,#dce7ed 46%,#52697b 72%,#d5e2e8 100%);
  box-shadow:
    11px 17px 0 rgba(22,34,48,.42),
    0 24px 30px rgba(0,0,0,.42),
    inset 2px 2px 3px rgba(255,255,255,.85),
    inset -3px -4px 7px rgba(34,49,64,.55);
  transform: rotateX(7deg) translateZ(8px);
}
.watch-case::before{
  content:''; position:absolute; right:-9px; top:43px; width:13px; height:29px;
  border-radius:3px 8px 8px 3px;
  background: linear-gradient(90deg,#6d8291,#e9f2f6 45%,#778b9a);
  box-shadow: 3px 4px 5px rgba(0,0,0,.25);
}
.watch-bezel{
  position:relative; width:100%; height:100%; padding:8px; border-radius:48%;
  background: linear-gradient(145deg,#101c2a,#273a4d 48%,#0b1420);
  box-shadow: inset 2px 2px 3px rgba(255,255,255,.26), inset -3px -4px 5px rgba(0,0,0,.6);
}
.watch-face{
  position:relative; width:100%; height:100%; overflow:hidden; border-radius:48%;
  background:
    radial-gradient(circle at 36% 28%, rgba(181,234,243,.24), transparent 22%),
    radial-gradient(circle, #1c4258 0%, #0c2336 58%, #07131f 100%);
  border:1px solid rgba(183,225,236,.42);
  box-shadow: inset 0 0 18px rgba(0,0,0,.68);
}
.watch-face::before{
  content:''; position:absolute; inset:10px; border-radius:50%;
  background: repeating-conic-gradient(from 0deg, rgba(219,244,247,.8) 0 1deg, transparent 1deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 76%, #000 77% 82%, transparent 83%);
  mask: radial-gradient(circle, transparent 0 76%, #000 77% 82%, transparent 83%);
  opacity:.75;
}
.watch-face::after{
  content:''; position:absolute; width:58%; height:24%; top:-2%; left:-5%;
  border-radius:50%; background: rgba(255,255,255,.2); filter:blur(8px); transform:rotate(-22deg);
}
.watch-marker{ position:absolute; z-index:2; display:block; background:#eaf7f8; box-shadow:0 0 5px rgba(79,209,197,.7); }
.marker-12,.marker-6{ width:3px; height:12px; left:calc(50% - 1.5px); border-radius:3px; }
.marker-12{ top:10px; }
.marker-6{ bottom:10px; }
.marker-3,.marker-9{ width:12px; height:3px; top:calc(50% - 1.5px); border-radius:3px; }
.marker-3{ right:10px; }
.marker-9{ left:10px; }
.watch-hand{
  position:absolute; z-index:3; left:calc(50% - 2px); bottom:50%; width:4px;
  border-radius:5px 5px 2px 2px; background:#f5fbf9; box-shadow:0 0 5px rgba(79,209,197,.65);
  transform-origin:50% 100%;
}
.watch-hand-hour{ height:32%; transform:rotate(38deg); }
.watch-hand-minute{ height:42%; width:3px; background:var(--gold); transform:rotate(300deg); animation:watchMinute 12s linear infinite; }
.watch-center{
  position:absolute; z-index:4; left:calc(50% - 5px); top:calc(50% - 5px); width:10px; height:10px;
  border:2px solid #eaf7f8; border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(79,209,197,.7);
}
@keyframes watchMotion{
  0%{transform:translateY(8px) rotateY(-24deg) rotateZ(-8deg)}
  45%{transform:translateY(-5px) rotateY(7deg) rotateZ(-3deg)}
  100%{transform:translateY(4px) rotateY(24deg) rotateZ(-7deg)}
}
@keyframes watchGlow{
  0%,100%{opacity:.55;transform:scale(.9)}
  50%{opacity:.95;transform:scale(1.12)}
}
@keyframes watchMinute{ to{ transform:rotate(660deg); } }

/* мобильный герой: должен идти после базовых правил выше, иначе они выигрывают */
@media (max-width:760px){
  .dashboard-hero{
    flex-direction:column;
    align-items:flex-start;
    min-height:auto;
    padding:24px 22px;
    gap:14px;
  }
  /* Часы рисуются крупнее своего блока: ремешок торчит на 18px вверх и вниз,
     и на телефоне наезжал на текст. Уменьшаем весь блок целиком — на сам
     .watch-stage transform вешать нельзя, его занимает анимация. */
  .hero-object{
    position:relative; right:auto; bottom:auto;
    width:100%; height:200px;
    margin:0 auto;
    transform: scale(.75);
  }
  .hero-copy h1{ font-size:clamp(28px,9vw,40px); }
  .hero-copy p{ margin-top:12px; font-size:12.5px; }
  .hero-note{ display:none; }
}


/* ============ CONFETTI ============ */
.confetti-piece{
  position:fixed;
  width:6px; height:6px;
  border-radius:2px;
  pointer-events:none;
  z-index:9999;
  animation: confettiBurst .7s ease-out forwards;
}
@keyframes confettiBurst{
  to{ transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity:0; }
}

/* ============ THEME TOGGLE ============ */
.theme-toggle{
  margin:8px 2px 0;
  padding:10px 12px;
  border:1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  font-size:11px;
  cursor:pointer;
  text-align:left;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.theme-toggle:hover{ color:var(--text); border-color:var(--line-strong); transform: translateY(-1px); }

/* ============ COMMAND PALETTE / SEARCH ============ */
.search-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%;
  margin: 2px 0 10px;
  padding:9px 12px;
  border:1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-faint);
  border-radius: var(--radius-sm);
  font-size:12px;
  cursor:pointer;
  text-align:left;
  transition: border-color .15s ease, color .15s ease;
}
.search-trigger:hover{ color:var(--text-dim); border-color:var(--line-strong); }
.search-trigger kbd{
  font-family:'Space Grotesk';
  font-size:10px;
  border:1px solid var(--line-strong);
  border-radius:5px;
  padding:1px 6px;
  color:var(--text-faint);
  background: var(--surface);
}
.palette-overlay{
  position:fixed; inset:0; z-index:80;
  display:none;
  align-items:flex-start; justify-content:center;
  padding-top:12vh;
  background: rgba(5,6,8,.6);
  backdrop-filter: blur(4px);
}
.palette-overlay.open{ display:flex; animation: overlayIn .15s ease; }
.palette{
  width:560px; max-width:90vw;
  max-height:60vh;
  display:flex; flex-direction:column;
  background: var(--surface-3);
  border:1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow:hidden;
  transform: translateY(6px);
  animation: modalIn .16s ease forwards;
}
.palette-input{
  width:100%;
  padding:16px 18px;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-size:15px;
  outline:none;
}
.palette-input::placeholder{ color:var(--text-faint); }
.palette-results{ overflow-y:auto; padding:8px; }
.palette-empty{ padding:22px 18px; color:var(--text-faint); font-size:12.5px; text-align:center; }
.palette-item{
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding:11px 12px;
  border:none; border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  font-size:13px;
}
.palette-item:hover, .palette-item.active{ background: var(--surface-2); }
.palette-item-title{ font-size:13px; color:var(--text); }
.palette-item-sub{ font-size:11px; color:var(--text-faint); margin-top:2px; }
.palette-hint{
  padding:9px 16px;
  border-top:1px solid var(--line);
  font-size:10.5px;
  color:var(--text-faint);
  display:flex; gap:14px;
}

/* ============ POMODORO TIMER ============ */
.pomodoro{ position:fixed; right:22px; bottom:22px; z-index:60; }
.pomodoro-toggle{
  display:flex; align-items:center; gap:8px;
  padding:11px 16px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background: var(--surface-3);
  color: var(--text);
  font-size:13px;
  font-family:'Space Grotesk';
  cursor:pointer;
  box-shadow: var(--shadow-md);
  transition: border-color .15s ease, transform .15s ease;
}
.pomodoro-toggle:hover{ border-color: var(--gold-soft); transform: translateY(-1px); }
.pomodoro.running .pomodoro-toggle{ border-color: var(--gold-soft); color: var(--gold); }
.pomodoro-panel{
  display:none;
  position:absolute; right:0; bottom:56px;
  width:220px;
  padding:18px;
  border:1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
  text-align:center;
}
.pomodoro.open .pomodoro-panel{ display:block; animation: modalIn .16s ease forwards; }
.pomodoro-mode{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.pomodoro-time{ font-family:'Space Grotesk'; font-size:40px; margin:10px 0 16px; color:var(--text); }
.pomodoro-controls{ display:flex; gap:8px; }
.pomodoro-controls button{
  flex:1;
  padding:9px 0;
  border-radius: var(--radius-sm);
  border:1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size:12px;
  cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.pomodoro-controls button:first-child{ background: var(--gold); color:#0b1613; border-color:var(--gold); font-weight:600; }
.pomodoro-controls button:first-child:hover{ filter:brightness(1.08); }
.pomodoro-controls button:last-child:hover{ color:var(--text); }
.pomodoro-modes{ display:flex; gap:6px; margin-top:12px; }
.pomodoro-modes button{
  flex:1;
  padding:7px 0;
  border-radius: var(--radius-sm);
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-faint);
  font-size:11px;
  cursor:pointer;
  transition: border-color .15s ease, color .15s ease;
}
.pomodoro-modes button:hover{ color:var(--text); border-color:var(--line-strong); }
@media (max-width:520px){
  .pomodoro{ right:14px; bottom:14px; }
  .pomodoro-panel{ width:200px; }
}

/* ============ LIGHT THEME ============ */
:root[data-theme="light"]{
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f1f2f5;
  --surface-3: #ffffff;
  --line: rgba(15,23,42,.1);
  --line-soft: rgba(15,23,42,.06);
  --line-strong: rgba(15,23,42,.18);
  --text: #14161b;
  --text-dim: #565b66;
  --text-faint: #8a8f9a;

  --gold: #0f9e8f;
  --gold-soft: rgba(15,158,143,.12);
  --sage: #1a9e56;
  --brick: #d84f3e;
  --brick-soft: rgba(216,79,62,.1);

  --tab1: #c97a2e;
  --tab2: #1a9e56;
  --tab3: #2f7fd6;
  --tab4: #8a5fd6;
  --tab5: #0f9e8f;
  --tab6: #2f9186;
  --tab7: #c2559a;

  --shadow-sm: 0 6px 16px rgba(15,23,42,.08);
  --shadow-md: 0 16px 40px rgba(15,23,42,.14);
}
:root[data-theme="light"] .intro-splash{ background:#0b0c0f; }
:root[data-theme="light"] .check.done::after,
:root[data-theme="light"] .brand .mark,
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .subject-pill.active{ color:#fff; }

/* ============ ICONS ============ */
.ui-icon{
  width:16px; height:16px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.search-trigger .ui-icon{ width:14px; height:14px; vertical-align:-2px; }

/* ============ УРОКИ НА СЕГОДНЯ ============ */
.today-lessons{
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.today-lessons-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.today-lessons-head span{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.today-lessons-head strong{ font-family:'Space Grotesk'; font-size:14px; font-weight:600; }
.today-row{
  display:grid;
  grid-template-columns: 46px 1fr auto auto;
  align-items:center; gap:10px;
  padding:7px 10px;
  border-radius: var(--radius-sm);
  font-size:12.5px;
}
.today-row + .today-row{ margin-top:2px; }
.today-row.past{ opacity:.42; }
.today-row.now{ background: var(--gold-soft); box-shadow: inset 2px 0 0 var(--gold); }
.today-time{ font-size:11px; color:var(--text-faint); font-variant-numeric: tabular-nums; }
.today-row.now .today-time{ color: var(--gold); }
.today-subject{ color: var(--text); }
.today-room{ font-size:10.5px; color: var(--text-faint); }
.today-marks{ display:flex; gap:5px; }
.today-mark{
  font-size:9.5px; padding:2px 7px; border-radius:20px;
  border:1px solid var(--line); color:var(--text-dim);
}
.today-mark.sor{ color:var(--brick); border-color:rgba(242,112,92,.4); background:var(--brick-soft); }

@media (max-width: 760px){
  .today-row{ grid-template-columns: 42px 1fr auto; }
  .today-room{ display:none; }
}

/* ============ СРОКИ ============ */
.due-tag{ display:inline-flex; flex-direction:column; align-items:flex-end; gap:1px; line-height:1.25; }
.due-tag i{ font-style:normal; font-size:9px; opacity:.75; letter-spacing:.01em; }
.due-tag.due-today{ color:var(--tab1); border-color:rgba(240,168,96,.45); background:rgba(240,168,96,.12); font-weight:600; }
.due-tag.due-soon{ color:var(--tab1); border-color:rgba(240,168,96,.28); }

/* ============ ЧИПЫ СТАТУСА ============ */
.status-chips{ display:flex; flex-wrap:wrap; gap:7px; margin: 0 0 14px; }
.status-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px;
  border:1px solid var(--line);
  border-radius:20px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size:11.5px;
  cursor:pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.status-chip:hover{ color:var(--text); border-color:var(--line-strong); }
.status-chip span{
  font-size:10px; color:var(--text-faint);
  background: var(--surface-3);
  padding:1px 6px; border-radius:20px;
  font-variant-numeric: tabular-nums;
}
.status-chip.active{
  color: var(--gold); border-color: var(--gold-soft); background: var(--gold-soft); font-weight:600;
}
.status-chip.active span{ background: rgba(79,209,197,.18); color: var(--gold); }

/* ============ ШАГИ ЗАДАНИЯ ============ */
.steps{ margin-top:8px; display:flex; flex-direction:column; gap:3px; }
.steps-count{ font-size:10px; color:var(--text-faint); letter-spacing:.04em; margin-bottom:2px; }
.step{
  display:flex; align-items:center; gap:8px;
  background:none; border:none; padding:2px 0;
  color: var(--text-dim); font-size:12px; text-align:left; cursor:pointer;
}
.step i{
  width:12px; height:12px; flex-shrink:0;
  border:1.5px solid var(--line-strong); border-radius:3px;
  position:relative;
  transition: background .12s ease, border-color .12s ease;
}
.step:hover i{ border-color: var(--gold); }
.step.done i{ background: var(--sage); border-color: var(--sage); }
.step.done i::after{
  content:''; position:absolute; left:3px; top:0;
  width:3px; height:6px;
  border:solid #0b1613; border-width:0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.step.done span{ color: var(--text-faint); text-decoration: line-through; }

/* ============ БЫСТРЫЙ ВВОД ============ */
.quick-task{ display:flex; gap:8px; margin: 0 0 6px; }
.quick-task input{
  flex:1; min-width:0;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size:13px;
}
.quick-task input::placeholder{ color: var(--text-faint); }
.quick-task input:focus{ border-color: var(--gold-soft); outline:none; }
.quick-task button{
  padding:0 18px;
  border:1px solid var(--gold-soft);
  border-radius: var(--radius-sm);
  background: var(--gold-soft);
  color: var(--gold);
  font-size:12px; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.quick-task button:hover{ background: rgba(79,209,197,.2); }
.quick-task-hint{
  font-size:11px; color: var(--text-faint);
  margin: 0 2px 14px; min-height:14px;
}
.quick-task-hint.ready{ color: var(--gold); }

/* ============ ПРОГНОЗ ОЦЕНКИ ============ */
.forecast{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding:14px 16px;
  margin: 0 0 16px;
}
.forecast.empty{ color: var(--text-faint); font-size:12px; }
.forecast-main{ display:flex; align-items:center; gap:14px; }
.forecast-grade{
  width:46px; height:46px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius: 14px;
  font-family:'Space Grotesk'; font-size:23px; font-weight:700;
  background: var(--gold-soft); color: var(--gold);
}
.forecast.grade-5 .forecast-grade{ background: rgba(127,227,171,.16); color: var(--sage); }
.forecast.grade-4 .forecast-grade{ background: var(--gold-soft); color: var(--gold); }
.forecast.grade-3 .forecast-grade{ background: rgba(240,168,96,.16); color: var(--tab1); }
.forecast.grade-2 .forecast-grade{ background: var(--brick-soft); color: var(--brick); }
.forecast-pct{ font-family:'Space Grotesk'; font-size:16px; font-weight:600; }
.forecast-basis{ font-size:10.5px; color: var(--text-faint); margin-top:2px; }
.forecast-rows{ display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--text-dim); }
.forecast-rows b{ color: var(--text); font-weight:600; }

/* ============ ШПАРГАЛКА ПО КЛАВИШАМ ============ */
.theme-toggle kbd{
  float:right;
  font-family: inherit; font-size:10px;
  padding:1px 6px; border-radius:5px;
  border:1px solid var(--line); background: var(--surface-3); color: var(--text-faint);
}
.hotkey-list{ display:flex; flex-direction:column; gap:2px; margin: 4px 0 6px; }
.hotkey-row{
  display:flex; align-items:center; gap:12px;
  padding:7px 10px; border-radius: var(--radius-sm);
  font-size:12.5px; color: var(--text-dim);
}
.hotkey-row:nth-child(odd){ background: var(--surface-2); }
.hotkey-row kbd{
  min-width:58px; text-align:center; flex-shrink:0;
  font-family: inherit; font-size:11px; font-weight:600;
  padding:3px 8px; border-radius:6px;
  border:1px solid var(--line-strong); background: var(--surface-3); color: var(--text);
}

/* ============ ГРАФИКИ ============ */
.summ-charts{ display:flex; flex-direction:column; gap:14px; margin: 0 0 18px; }
.chart-card{
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding:16px 18px 10px;
}
.chart-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.chart-head strong{ display:block; font-family:'Space Grotesk'; font-size:13.5px; font-weight:600; }
.chart-head small{ display:block; font-size:10.5px; color:var(--text-faint); margin-top:3px; }
.chart-toggle{
  flex-shrink:0;
  padding:5px 11px; border-radius:20px;
  border:1px solid var(--line); background: var(--surface-2);
  color: var(--text-dim); font-size:10.5px; cursor:pointer;
}
.chart-toggle:hover{ color:var(--text); border-color:var(--line-strong); }
.chart-svg{ width:100%; height:auto; display:block; overflow:visible; }
.chart-grid{ stroke: var(--line); stroke-width:1; }
.chart-track{ fill: var(--surface-2); }
.chart-axis{ fill: var(--text-faint); font-size:10px; font-family:'Inter',sans-serif; }
.chart-rowname{ fill: var(--text-dim); font-size:11px; }
.chart-label{ fill: var(--text); font-size:11px; font-weight:600; font-family:'Inter',sans-serif; }
.chart-dot, .chart-bar{ cursor:pointer; }
.chart-dot:hover{ r:6; }
.chart-bar:hover{ opacity:.85; }

.chart-tip{
  position:fixed; z-index:200; pointer-events:none;
  padding:7px 11px; border-radius: var(--radius-sm);
  background: var(--surface-3); border:1px solid var(--line-strong);
  color: var(--text); font-size:11.5px;
  box-shadow: var(--shadow-sm);
  opacity:0; transition: opacity .12s ease;
}
.chart-tip.open{ opacity:1; }

.chart-table{ width:100%; border-collapse:collapse; margin-bottom:14px; font-size:12px; }
.chart-table th{
  text-align:left; padding:7px 10px;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-faint); border-bottom:1px solid var(--line); font-weight:500;
}
.chart-table td{ padding:7px 10px; border-bottom:1px solid var(--line-soft); color:var(--text-dim); }
.chart-table td:first-child{ color: var(--text); }

@media (max-width: 760px){
  .chart-rowname{ font-size:9.5px; }
}

/* ============ ОТМЕНА УДАЛЕНИЯ ============ */
.undo-bar{
  position:fixed; z-index:210;
  left:50%; bottom:22px;
  transform: translate(-50%, 20px);
  display:flex; align-items:center; gap:14px;
  max-width: calc(100vw - 32px);
  padding:11px 12px 11px 16px;
  border:1px solid var(--line-strong);
  border-radius:30px;
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
  font-size:12.5px; color: var(--text-dim);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.undo-bar.open{ opacity:1; transform: translate(-50%, 0); pointer-events:auto; }
.undo-bar span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.undo-bar button{
  flex-shrink:0;
  padding:6px 14px; border-radius:20px;
  border:1px solid var(--gold-soft); background: var(--gold-soft);
  color: var(--gold); font-size:11.5px; font-weight:600; cursor:pointer;
}
.undo-bar button:hover{ background: rgba(79,209,197,.2); }

@media (max-width: 760px){
  .undo-bar{ bottom: 16px; }
}

/* ============ КАРТА АКТИВНОСТИ ============ */
.activity-heatmap{
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding:16px 18px;
  margin-bottom:18px;
}
.heat-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.heat-head strong{ display:block; font-family:'Space Grotesk'; font-size:13.5px; font-weight:600; }
.heat-head small{ display:block; font-size:10.5px; color:var(--text-faint); margin-top:3px; }
.heat-legend{ display:flex; align-items:center; gap:4px; font-size:10px; color:var(--text-faint); }
.heat-legend span{ margin:0 3px; }
.heat-grid{ display:flex; gap:3px; }
.heat-col{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.heat-cell{
  display:block; width:100%; aspect-ratio:1;
  border-radius:3px;
  background: var(--heat-0);
}
.heat-legend .heat-cell{ width:10px; height:10px; aspect-ratio:auto; flex-shrink:0; }
.heat-void{ background:transparent; }
.heat-0{ background: var(--heat-0); }
.heat-1{ background: var(--heat-1); }
.heat-2{ background: var(--heat-2); }
.heat-3{ background: var(--heat-3); }
.heat-4{ background: var(--heat-4); }
.heat-months{
  display:flex; gap:3px; margin-top:6px;
  font-size:9px; color:var(--text-faint);
}
.heat-months span{ flex:1; min-width:0; }

:root{
  --heat-0: #1a1c22;
  --heat-1: #1d3b38;
  --heat-2: #236b63;
  --heat-3: #2a9488;
  --heat-4: #33bdae;
}
:root[data-theme="light"]{
  --heat-0: #e8eaee;
  --heat-1: #c2ece6;
  --heat-2: #7fd4c9;
  --heat-3: #3aa99b;
  --heat-4: #0f8074;
}

/* ============ ПЕЧАТЬ ============ */
@media print{
  html, body{
    height:auto; overflow:visible;
    background:#fff !important; color:#000 !important;
  }
  .app{ display:block; height:auto; width:auto; }
  .main{ overflow:visible; padding:0 !important; }

  /* всё, что на бумаге не нужно */
  .tabs, .mobile-topbar, .nav-scrim, .intro-splash, .pomodoro,
  .undo-bar, .chart-tip, .overlay, .palette-overlay,
  .add-btn, .quick-task, .quick-task-hint, .status-chips,
  .hw-filter-row, .sched-arrow, .sched-today, .quick-actions,
  .row-actions, .chart-toggle, .section-hint{ display:none !important; }

  /* печатаем только открытый раздел */
  .view{ display:none !important; }
  .view.active{ display:block !important; }

  .sched-grid-wrap, .cal-grid-wrap{ overflow:visible !important; }
  .sched-grid{ min-width:0 !important; width:100% !important; }
  .sched-cell, .sched-head, .sched-time, .sched-corner{
    border-color:#bbb !important;
    background:#fff !important;
    color:#000 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .sched-cell{ break-inside: avoid; }
  .sched-subj, .sched-room, .sched-tag,
  .sched-head-day, .sched-head-date, .sched-time,
  .sched-range{ color:#000 !important; }
  .sched-room{ color:#555 !important; }
  .sched-tag.sor{ font-weight:700; }
  .sched-cell.homeroom{ opacity:1; color:#555 !important; }

  h1, h2, h3{ color:#000 !important; }
  .item-row, .goal-card, .chart-card, .today-lessons,
  .activity-heatmap, .forecast{
    border-color:#bbb !important; background:#fff !important;
    break-inside: avoid;
  }
  .item-title, .item-meta, .tag, .chart-label, .chart-axis{ color:#000 !important; }

  @page{ margin: 12mm; size: A4 landscape; }
}

/* ============ ИМПОРТ КОПИИ ============ */
.import-list{ margin: 4px 0 12px; border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; }
.import-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; font-size:12.5px; color:var(--text-dim);
}
.import-row + .import-row{ border-top:1px solid var(--line-soft); }
.import-row b{ color: var(--text); font-variant-numeric: tabular-nums; }
.import-note{ font-size:11.5px; color:var(--text-faint); line-height:1.5; margin-bottom:4px; }

/* ============ ЗАМЕТКИ ============ */
.note-card.pinned{ border-color: var(--gold-soft); background: linear-gradient(var(--gold-soft), var(--gold-soft)) padding-box, var(--surface); }
.note-subject{
  display:inline-block; margin: 6px 0 0;
  font-size:10px; padding:2px 9px; border-radius:20px;
  border:1px solid var(--line); color: var(--text-faint);
}
.pin-btn.on{ color: var(--gold); }
.pin-btn.on .ui-icon{ fill: var(--gold-soft); }

.item-link{ color: var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-soft); }
.item-link:hover{ border-bottom-color: var(--gold); }

/* ============ НАСТРОЙКА ПРЕДМЕТОВ ============ */
.subj-list{
  max-height:280px; overflow-y:auto;
  border:1px solid var(--line); border-radius: var(--radius-sm);
  margin: 4px 0 12px;
}
.subj-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; font-size:12.5px; color:var(--text);
}
.subj-row + .subj-row{ border-top:1px solid var(--line-soft); }
.subj-row em{ font-style:normal; font-size:10.5px; color:var(--text-faint); }
.subj-del{
  border:none; background:none; cursor:pointer;
  color: var(--text-faint); font-size:11px; padding:3px 7px; border-radius:6px;
}
.subj-del:hover{ color: var(--brick); background: var(--brick-soft); }

/* ============ МЕНЮ ПЕРЕНОСА СРОКА ============ */
.snooze-menu{
  position:fixed; z-index:220;
  min-width:210px;
  padding:5px;
  border:1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
  opacity:0; pointer-events:none; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
.snooze-menu.open{ opacity:1; pointer-events:auto; transform:none; }
.snooze-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:8px 11px;
  border:none; border-radius: var(--radius-sm);
  background:none; color: var(--text);
  font-size:12.5px; text-align:left; cursor:pointer;
}
.snooze-menu button:hover{ background: var(--surface-2); }
.snooze-menu em{ font-style:normal; font-size:10.5px; color: var(--text-faint); white-space:nowrap; }

/* ============ УРОКИ В ПАНЕЛИ ДНЯ ============ */
.day-lessons{
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding:10px 12px;
  margin-bottom:12px;
}
.day-lessons-title{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--text-faint); margin-bottom:7px;
}
.day-lesson{
  display:grid; grid-template-columns: 44px 1fr auto;
  align-items:center; gap:10px;
  padding:3px 0; font-size:12px;
}
.day-lesson span{ font-size:10.5px; color:var(--text-faint); font-variant-numeric: tabular-nums; }
.day-lesson b{ font-weight:500; color:var(--text); }
.day-lesson em{ font-style:normal; font-size:10px; color:var(--text-faint); }

/* ============ НИЖНЯЯ ПАНЕЛЬ (телефон) ============ */
.bottom-nav{ display:none; }

@media (max-width: 760px){
  .bottom-nav{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background: var(--surface);
    border-top:1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-nav button{
    position:relative;
    flex:1; min-width:0;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:8px 2px 7px;
    border:none; background:none; cursor:pointer;
    color: var(--text-faint);
    font-size:9.5px; line-height:1.2;
  }
  .bottom-nav button span{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .bottom-nav button .ui-icon{ width:19px; height:19px; }
  .bottom-nav button.active{ color: var(--gold); }
  .bottom-badge{
    position:absolute; top:4px; left:calc(50% + 7px);
    min-width:15px; height:15px; padding:0 4px;
    display:none; place-items:center;
    border-radius:10px;
    background: var(--tab1); color:#0b0c0f;
    font-size:9px; font-weight:700; font-style:normal;
  }
  .bottom-badge.on{ display:grid; }

  /* контент не должен прятаться за панелью */
  .main{ padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; }
  .pomodoro{ bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .undo-bar{ bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

@media print{ .bottom-nav{ display:none !important; } }

/* ============ ПЕРЕКЛЮЧАТЕЛЬ НЕДЕЛИ А/Б ============ */
.sched-week-tag{
  margin-left:10px;
  padding:3px 10px;
  border:1px solid var(--line);
  border-radius:20px;
  background: var(--surface-2);
  color: var(--text-faint);
  font-size:10px; font-family:inherit; letter-spacing:.04em;
  cursor:pointer; vertical-align:middle;
}
.sched-week-tag:hover{ color: var(--gold); border-color: var(--gold-soft); }

/* ============ ЦЕЛИ ============ */
.goal-due{ font-size:11px; color: var(--text-faint); margin-top:6px; }
.goal-card.reached{ opacity:.62; }
.goal-card.reached .goal-title{ color: var(--sage); }
.goal-card .steps{ margin-top:10px; }

/* ============ МАССОВЫЕ ДЕЙСТВИЯ ============ */
.bulk-row{ display:none; gap:8px; flex-wrap:wrap; margin: -6px 0 14px; }
.bulk-row.on{ display:flex; }
.bulk-row button{
  padding:5px 12px; border-radius:20px;
  border:1px dashed var(--line-strong);
  background:none; color: var(--text-faint);
  font-size:11px; cursor:pointer;
}
.bulk-row button:hover{ color: var(--text); border-color: var(--gold-soft); border-style:solid; }

/* ============ ФИЛЬТРЫ И ПОДСВЕТКА В ПОИСКЕ ============ */
.palette-types{
  display:flex; gap:6px; flex-wrap:wrap;
  padding:9px 14px;
  border-bottom:1px solid var(--line);
}
.palette-type{
  padding:4px 10px; border-radius:20px;
  border:1px solid var(--line); background: var(--surface-2);
  color: var(--text-faint); font-size:10.5px; cursor:pointer;
}
.palette-type:hover{ color: var(--text-dim); }
.palette-type.active{ color: var(--gold); border-color: var(--gold-soft); background: var(--gold-soft); font-weight:600; }
.palette-item mark{
  background: var(--gold-soft); color: var(--gold);
  border-radius:3px; padding:0 1px;
}

/* ============ УЧИТЕЛЯ ============ */
.head-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.teacher-list{
  max-height:300px; overflow-y:auto;
  border:1px solid var(--line); border-radius: var(--radius-sm);
  margin: 4px 0 12px;
}
.teacher-row{
  display:grid; grid-template-columns: 1fr 120px 58px;
  align-items:center; gap:8px;
  padding:6px 10px;
}
.teacher-row + .teacher-row{ border-top:1px solid var(--line-soft); }
.teacher-row span{
  font-size:12px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.teacher-row input{
  padding:6px 9px; font-size:11.5px;
  border:1px solid var(--line); border-radius:6px;
  background: var(--surface-2); color: var(--text);
  min-width:0;
}
.teacher-row input:focus{ outline:none; border-color: var(--gold-soft); }
.subject-detail-head h3 small{
  display:block; margin-top:3px;
  font-family:'Inter',sans-serif; font-size:11px; font-weight:400; color:var(--text-faint);
}
@media (max-width:520px){
  .teacher-row{ grid-template-columns: 1fr; gap:5px; }
}

/* ============ НАГРУЗКА ПО ДНЯМ ============ */
.workload{
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding:16px 18px 12px;
  margin-bottom:18px;
}
.workload-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.workload-head strong{ display:block; font-family:'Space Grotesk'; font-size:13.5px; font-weight:600; }
.workload-head small{ display:block; font-size:10.5px; color:var(--text-faint); margin-top:3px; }
.wl-legend{ display:flex; align-items:center; gap:6px; font-size:10px; color:var(--text-faint); }
.wl-swatch{ width:9px; height:9px; border-radius:2px; background: var(--wl-bar); }
.wl-swatch.sor{ background: var(--wl-sor); margin-left:6px; }

.wl-grid{ display:flex; gap:4px; align-items:flex-end; }
.wl-col{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; }
.wl-bar-wrap{
  width:100%; height:64px;
  display:flex; align-items:flex-end;
  background: var(--surface-2);
  border-radius:4px;
  overflow:hidden;
}
.wl-col.weekend .wl-bar-wrap{ background: var(--surface-3); opacity:.7; }
.wl-bar{
  width:100%;
  background: var(--wl-bar);
  border-radius:4px 4px 0 0;
  transition: height .25s ease;
}
/* день без домашки, но с СОР */
.wl-dot{
  width:5px; height:5px; border-radius:50%;
  background: var(--wl-sor);
  margin:0 auto 5px;
}
.wl-bar-wrap{ justify-content:center; }
.wl-bar.has-sor{ background: var(--wl-sor); }
.wl-day{ font-size:9.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tag.mins{ color: var(--text-faint); }

:root{ --wl-bar:#2ca79b; --wl-sor:#d9534a; }
:root[data-theme="light"]{ --wl-bar:#0f9e8f; --wl-sor:#d1483a; }

.repeat-mark{
  display:inline-block; margin-left:7px;
  font-size:11px; color: var(--gold);
  vertical-align:1px;
}

.btn-ghost{
  margin-right:auto;
  padding:9px 14px; border-radius: var(--radius-sm);
  border:1px solid var(--line); background:none;
  color: var(--text-faint); font-size:12px; cursor:pointer;
}
.btn-ghost:hover{ color: var(--text); border-color: var(--line-strong); }

/* ============ СВОДКА «ЧТО ГОРИТ» ============ */
.urgent{ display:none; }
.urgent.on{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:11px 14px;
  margin: 0 0 18px;
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.urgent-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:20px;
  font-size:11.5px; color: var(--text-dim);
  border:1px solid var(--line); background: var(--surface-2);
}
.urgent-chip b{ font-size:12.5px; font-weight:700; }
.urgent-chip.bad{ color: var(--brick); border-color: rgba(242,112,92,.4); background: var(--brick-soft); }
.urgent-chip.warn{ color: var(--tab1); border-color: rgba(240,168,96,.4); background: rgba(240,168,96,.1); }
.urgent-chip.soft{ color: var(--text-dim); }
.urgent-time{ font-size:11px; color: var(--text-faint); }
.urgent-go{
  margin-left:auto;
  padding:6px 14px; border-radius:20px;
  border:1px solid var(--gold-soft); background: var(--gold-soft);
  color: var(--gold); font-size:11.5px; font-weight:600; cursor:pointer;
}
.urgent-go:hover{ background: rgba(79,209,197,.2); }
@media (max-width:520px){ .urgent-go{ margin-left:0; width:100%; } }

/* ============ ВРЕМЯ УРОКОВ ============ */
.time-list{
  max-height:260px; overflow-y:auto;
  border:1px solid var(--line); border-radius: var(--radius-sm);
  margin: 4px 0 14px;
}
.time-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 12px;
}
.time-row + .time-row{ border-top:1px solid var(--line-soft); }
.time-row span{ font-size:12px; color: var(--text-dim); }
.time-row input{
  padding:5px 8px; font-size:12px;
  border:1px solid var(--line); border-radius:6px;
  background: var(--surface-2); color: var(--text);
}

/* ============ РАЗВЛЕЧЕНИЯ ============ */
.fun-sources{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin: 0 0 16px;
}
.fun-sources-title{
  width:100%;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--text-faint); margin-bottom:2px;
}
.fun-source{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 13px;
  border:1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-decoration:none;
  transition: border-color .12s ease, transform .12s ease;
}
.fun-source:hover{ border-color: var(--gold-soft); transform: translateY(-1px); }
.fun-source b{ font-size:12.5px; color: var(--text); font-weight:600; }
.fun-source span{ font-size:10px; color: var(--text-faint); }

.fun-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap:12px;
}
.fun-card{
  position:relative;
  display:flex; flex-direction:column; gap:7px;
  padding:14px 15px 12px;
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration:none; color:inherit;
  transition: border-color .14s ease, transform .14s ease, background .14s ease;
}
a.fun-card:hover{ border-color: var(--gold-soft); transform: translateY(-2px); background: var(--surface-2); }
.fun-card.seen{ opacity:.55; }
.fun-card.picked{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.fun-top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.fun-kind{
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:20px;
  background: var(--gold-soft); color: var(--gold);
}
.fun-lang{ font-size:9.5px; color: var(--text-faint); }
.fun-title{ font-family:'Space Grotesk'; font-size:14px; font-weight:600; color:var(--text); line-height:1.3; }
.fun-note{ font-size:11.5px; color: var(--text-faint); line-height:1.5; }
.fun-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.fun-btn{
  padding:4px 9px; border-radius:20px;
  border:1px solid var(--line); background: var(--surface-2);
  color: var(--text-faint); font-size:10px; cursor:pointer;
}
.fun-btn:hover{ color: var(--text); border-color: var(--line-strong); }
.fun-btn.on{ color: var(--sage); border-color: rgba(127,227,171,.4); background: rgba(127,227,171,.12); }
.fun-btn.del:hover{ color: var(--brick); border-color: rgba(242,112,92,.4); }
.fun-go{ font-size:10px; color: var(--gold); }
.fun-go.muted{ color: var(--text-faint); }

@media (max-width:520px){
  .fun-grid{ grid-template-columns: 1fr; }
}

/* ============ ПРОГРЕСС ПО СЕРИЯМ ============ */
.fun-progress{
  display:flex; align-items:center; gap:6px;
  padding:6px 8px;
  border:1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.fun-progress span{ flex:1; font-size:11px; color: var(--text-dim); text-align:center; }
.fun-progress button{
  width:22px; height:22px; flex-shrink:0;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:6px;
  background: var(--surface-3); color: var(--text-dim);
  font-size:13px; line-height:1; cursor:pointer;
}
.fun-progress button:hover{ color: var(--gold); border-color: var(--gold-soft); }
.fun-progress button.season{ width:auto; padding:0 8px; font-size:10px; }

/* ============ ОЦЕНКА РАЗВЛЕЧЕНИЙ ============ */
.fun-stars{ display:flex; gap:1px; }
.fun-star{
  border:none; background:none; cursor:pointer;
  padding:0 2px; font-size:14px; line-height:1;
  color: var(--line-strong);
  transition: color .1s ease, transform .1s ease;
}
.fun-star:hover{ transform: scale(1.15); }
.fun-star.on{ color: var(--tab1); }

/* ============ ТАЙМЕР: ПОДХОДЫ И НАСТРОЙКИ ============ */
.pomodoro-rounds{
  margin-top:10px; text-align:center;
  font-size:10.5px; color: var(--text-faint);
}
.pomodoro-settings{
  width:100%; margin-top:8px;
  padding:6px; border-radius: var(--radius-sm);
  border:1px solid var(--line); background:none;
  color: var(--text-faint); font-size:10.5px; cursor:pointer;
}
.pomodoro-settings:hover{ color: var(--text); border-color: var(--line-strong); }
.pomodoro-modes button.active{
  color: var(--gold); border-color: var(--gold-soft); background: var(--gold-soft);
}

/* ============ ФОРМАТИРОВАНИЕ ЗАМЕТОК ============ */
.goal-desc.rich p{ margin: 0 0 6px; }
.goal-desc.rich p:last-child{ margin-bottom:0; }
.goal-desc.rich b{ color: var(--text); font-weight:600; }
.goal-desc.rich i{ font-style: italic; }
.goal-desc.rich ul{ margin: 4px 0 6px; padding-left: 18px; }
.goal-desc.rich li{ margin-bottom: 2px; }
.section-hint code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--line);
}

/* ============ КОПИРОВАНИЕ ДНЯ ============ */
.copy-day{
  margin-left:auto; flex-shrink:0;
  padding:4px 11px; border-radius:20px;
  border:1px solid var(--line); background: var(--surface-2);
  color: var(--text-faint); font-size:10px; cursor:pointer;
}
.copy-day:hover{ color: var(--gold); border-color: var(--gold-soft); }
.today-lessons-head{ align-items:center; }
.day-panel-title{ display:flex; align-items:center; gap:12px; }

.snooze-menu em.busy{ color: var(--tab1); }
.snooze-menu button{ align-items:flex-start; }