/* STYLES - Lich Hoc 2022KTT (Mobile) - Extracted from index.mobile.html */

:root {
  --primary:       #983514;
  --primary-alt:   #B84C2A;
  --on-primary:    #fef9f1;
  --surface:       #fef9f1;
  --surface-low:   #f2ede5;
  --surface-xlow:  #ece6dc;
  --on-surface:    #1d1c17;
  --muted:         #9a9488;
  --muted-light:   #c5c0b8;
  --line:          rgba(29,28,23,0.12);
  --success:       #4a7c6b;
  --danger:        #983514;
  --font-d: 'Newsreader', Georgia, serif;
  --font-b: 'Manrope', sans-serif;
  --font-l: 'Space Grotesk', monospace;
}

[data-theme="dark"] {
  --primary:       #e8764a;
  --primary-alt:   #f09070;
  --on-primary:    #1a1410;
  --surface:       #1a1816;
  --surface-low:   #242220;
  --surface-xlow:  #2e2c28;
  --on-surface:    #e8e2d8;
  --muted:         #8a8478;
  --muted-light:   #5a564e;
  --line:          rgba(232,226,216,0.1);
  --success:       #6aac9b;
  --danger:        #e8764a;
}
[data-theme="dark"] .top-nav { background:rgba(26,24,22,0.95); }
[data-theme="dark"] .mob-nav { background:rgba(26,24,22,0.95); }
[data-theme="dark"] .a1 .mdc-name { color:#e88a6a; }
[data-theme="dark"] .a2 .mdc-name { color:#c8a87a; }
[data-theme="dark"] .a3 .mdc-name { color:#7ac0a8; }
[data-theme="dark"] .a4 .mdc-name { color:#9a9acc; }
[data-theme="dark"] .a5 .mdc-name { color:#d0a040; }
[data-theme="dark"] .a6 .mdc-name { color:#c87aa0; }
[data-theme="dark"] .a7 .mdc-name { color:#5ab0c8; }

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--surface);
  color:var(--on-surface);
  font-family:var(--font-b);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  padding-bottom:72px;
}

[contenteditable="true"] { transition: background 0.2s; border-radius: 4px; padding: 0 4px; margin: 0 -4px; }
[contenteditable="true"]:hover { background: rgba(152,53,20,0.05); cursor: text; }
[contenteditable="true"]:focus { outline: none; background: rgba(152,53,20,0.1); }
[data-theme="dark"] [contenteditable="true"]:hover { background: rgba(232,118,74,0.1); }
[data-theme="dark"] [contenteditable="true"]:focus { background: rgba(232,118,74,0.2); }

/* ── TOP NAV ── */
.top-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  height:48px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1rem; gap:0.5rem;
}
.nav-brand {
  font-family:var(--font-d); font-size:0.9rem; font-weight:400;
  color:var(--on-surface); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;
}
.nav-brand em { font-style:italic; color:var(--primary); }
.nav-clock-wrap { text-align:right; flex-shrink:0; }
.nc-time {
  display:block; font-family:var(--font-l); font-size:0.78rem; font-weight:700;
  color:var(--primary); letter-spacing:0.04em; line-height:1.1;
}
.nc-date {
  display:block; font-family:var(--font-l); font-size:0.45rem;
  color:var(--muted); letter-spacing:0.06em;
}
.theme-toggle {
  background:none; border:1px solid var(--line); cursor:pointer;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:all 0.2s; flex-shrink:0;
}
.theme-toggle svg { width:14px; height:14px; fill:var(--muted); }
.install-btn {
  display:none; align-items:center; gap:0.3rem;
  font-family:var(--font-l); font-size:0.48rem; letter-spacing:0.08em;
  text-transform:uppercase; font-weight:700; color:var(--on-primary);
  background:var(--primary); border:none; cursor:pointer;
  padding:0.3rem 0.5rem; white-space:nowrap; flex-shrink:0;
}
.install-btn svg { width:10px; height:10px; fill:currentColor; }
.install-btn.show { display:flex; }

/* ── HERO (compact mobile) ── */
.hero {
  padding-top:48px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.hero-ghost {
  position:absolute; right:-0.5rem; top:50%; transform:translateY(-50%);
  font-family:var(--font-d); font-size:clamp(4rem,18vw,7rem);
  font-weight:300; line-height:0.85;
  color:var(--surface-low); pointer-events:none; user-select:none;
  white-space:nowrap; opacity:0.5;
}
.hero-inner { padding:1.5rem 1.2rem 1.2rem; position:relative; z-index:1; }
.hero-eyebrow {
  font-family:var(--font-l); font-size:0.5rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--primary); font-weight:600;
  margin-bottom:0.5rem;
  display:flex; align-items:center; gap:0.6rem;
}
.hero-eyebrow::before { content:''; display:inline-block; width:1.2rem; height:1px; background:var(--primary); }
.hero-title {
  font-family:var(--font-d); font-size:clamp(1.6rem,7.5vw,2.4rem);
  font-weight:300; letter-spacing:-0.03em; line-height:1.05;
  color:var(--on-surface); margin-bottom:1rem;
}
.hero-title em { font-style:italic; color:var(--primary); }
.hero-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:0.4rem 1rem;
}
.hs-label {
  font-family:var(--font-l); font-size:0.48rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:0.15rem;
}
.hs-value {
  font-family:var(--font-l); font-size:0.78rem; font-weight:700;
  color:var(--on-surface); letter-spacing:0.02em;
}

/* ── TODAY STRIP ── */
.today-strip {
  background:var(--surface-low);
  border-bottom:1px solid var(--line);
  padding:1rem 1.2rem;
}
.ts-clock {
  text-align:center; margin-bottom:0.8rem;
  padding-bottom:0.8rem; border-bottom:1px solid var(--line);
}
.d-clock {
  font-family:var(--font-l); font-size:clamp(1.6rem,7vw,2.2rem);
  font-weight:700; letter-spacing:0.06em; line-height:1; color:var(--on-surface);
}
.d-clock .col { color:var(--primary); animation:blink 1s step-start infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.15} }
.d-date {
  font-family:var(--font-l); font-size:0.58rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin-top:0.2rem;
}
.ts-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem 1rem; }
.ts-label {
  font-family:var(--font-l); font-size:0.52rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:0.3rem;
}
.ts-value {
  font-family:var(--font-d); font-size:0.92rem; font-weight:400;
  letter-spacing:-0.01em; line-height:1.2; color:var(--on-surface);
}
.ts-value em { font-style:italic; color:var(--primary); }
.ts-sub { font-family:var(--font-b); font-size:0.65rem; color:var(--muted); margin-top:0.2rem; }

/* In class badge */
.in-class-badge {
  display:inline-flex; align-items:center; gap:0.35rem;
  background:rgba(152,53,20,0.1); padding:0.28rem 0.65rem;
  font-family:var(--font-l); font-size:0.55rem; font-weight:700;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--primary);
  margin-top:0.4rem;
}
.pulse-dot {
  width:7px; height:7px; background:var(--primary); border-radius:50%;
  animation:pulse 1.5s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }

/* Progress */
.progress-wrap { margin-top:0.8rem; padding-top:0.7rem; border-top:1px solid var(--line); }
.progress-label { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.4rem; }
.pl-text {
  font-family:var(--font-l); font-size:0.5rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
.pl-pct { font-family:var(--font-l); font-size:0.7rem; font-weight:700; color:var(--primary); }
.progress-bar { height:5px; background:var(--surface-xlow); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background:var(--primary); border-radius:3px; transition:width 0.6s ease; }
.progress-dates {
  display:flex; justify-content:space-between; margin-top:0.3rem;
  font-family:var(--font-l); font-size:0.45rem; color:var(--muted-light); letter-spacing:0.05em;
}

/* ── WRAP ── */
.wrap { padding:0 1.2rem; }
.section-gap { margin-top:2rem; }
.section-gap2 { margin-top:3rem; }

/* Section heads */
.sec-head {
  display:flex; flex-direction:column; gap:0.15rem;
  padding-bottom:0.6rem; margin-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.sec-title {
  font-family:var(--font-d); font-size:1.5rem; font-weight:300;
  letter-spacing:-0.02em; line-height:1; color:var(--on-surface);
}
.sec-title em { font-style:italic; color:var(--primary); }
.sec-kicker {
  font-family:var(--font-l); font-size:0.5rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}

/* ── VIEW TOGGLE ── */
.view-toggle { display:flex; border:1px solid var(--line); overflow:hidden; margin-bottom:0.8rem; }
.vt-btn {
  font-family:var(--font-l); font-size:0.52rem; letter-spacing:0.1em;
  text-transform:uppercase; font-weight:700; border:none; cursor:pointer;
  flex:1; text-align:center; padding:0.45rem 0.5rem;
  background:var(--surface); color:var(--muted); transition:all 0.18s; min-height:38px;
}
.vt-btn:not(:last-child) { border-right:1px solid var(--line); }
.vt-btn.active { background:var(--primary); color:var(--on-primary); }

/* ── WEEK NAV ── */
.week-nav { display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:0.8rem; }
.wn-label {
  flex-basis:100%; order:-1; text-align:center;
  font-family:var(--font-l); font-size:0.65rem; font-weight:700;
  color:var(--on-surface); margin-bottom:0.1rem;
}
.wn-label em { font-style:normal; font-weight:400; color:var(--muted); font-size:0.58rem; margin-left:0.3rem; }
.wbtn {
  flex:1; text-align:center;
  font-family:var(--font-l); font-size:0.52rem; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--on-surface);
  background:none; border:none; cursor:pointer; padding:0.45rem 0.3rem; transition:color 0.18s;
}
.wbtn:hover { color:var(--primary); }
.wbtn-solid {
  flex:1; text-align:center;
  background:var(--primary); color:var(--on-primary);
  font-family:var(--font-l); font-size:0.52rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; border:none; cursor:pointer;
  padding:0.45rem 0.5rem; transition:background 0.18s;
}
.wbtn-solid:hover { background:var(--primary-alt); }

/* ── MOBILE DAY-LIST ── */
.mob-daylist { margin-bottom:2rem; }
.mob-day-tabs {
  display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--line); margin-bottom:1.2rem;
  scrollbar-width:none; padding:0 0.2rem;
}
.mob-day-tabs::-webkit-scrollbar { display:none; }
.mob-day-tab {
  flex-shrink:0; background:none; border:none; cursor:pointer;
  padding:0.65rem 0.85rem; font-family:var(--font-l); font-size:0.6rem;
  font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--muted); position:relative; transition:color 0.2s;
  -webkit-tap-highlight-color:transparent; min-height:48px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.mob-day-tab .mdt-num { font-size:0.88rem; font-weight:700; color:var(--on-surface); line-height:1; }
.mob-day-tab::after {
  content:''; position:absolute; bottom:0; left:0.4rem; right:0.4rem;
  height:2px; background:var(--primary); transform:scaleX(0); transition:transform 0.2s;
}
.mob-day-tab.active { color:var(--primary); }
.mob-day-tab.active .mdt-num { color:var(--primary); }
.mob-day-tab.active::after { transform:scaleX(1); }
.mob-day-tab.is-today { background:rgba(152,53,20,0.06); border-radius:8px 8px 0 0; }

.mob-day-classes { display:flex; flex-direction:column; gap:0.6rem; }
.mdc-card {
  background:var(--surface-low); border-left:3px solid var(--muted);
  padding:0.9rem 1rem; cursor:pointer;
  transition:box-shadow 0.15s, background 0.15s;
  -webkit-tap-highlight-color:transparent; border-radius:0 6px 6px 0;
}
.mdc-card:active { background:var(--surface-xlow); }
.mdc-card.now-active { background:rgba(152,53,20,0.08); box-shadow:inset 0 0 0 1px var(--primary); }
.mdc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:0.6rem; margin-bottom:0.4rem; }
.mdc-name {
  font-family:var(--font-b); font-size:0.82rem; font-weight:600;
  line-height:1.3; color:var(--on-surface); flex:1;
}
.mdc-period {
  font-family:var(--font-l); font-size:0.56rem; font-weight:700;
  letter-spacing:0.06em; color:var(--primary); white-space:nowrap;
  background:rgba(152,53,20,0.08); padding:0.2rem 0.5rem;
  text-transform:uppercase; flex-shrink:0; border-radius:3px;
}
.mdc-info { display:flex; gap:1.2rem; flex-wrap:wrap; }
.mdc-info-item { display:flex; align-items:center; gap:0.3rem; }
.mdc-info-item svg { width:13px; height:13px; fill:var(--muted); flex-shrink:0; }
.mdc-info-item span { font-family:var(--font-l); font-size:0.6rem; color:var(--muted); font-weight:500; letter-spacing:0.03em; }
.mdc-empty { text-align:center; padding:2.5rem 1rem; font-family:var(--font-b); font-size:0.82rem; color:var(--muted); }
.mdc-empty-icon { font-size:1.8rem; margin-bottom:0.4rem; display:block; }

.mdc-card.a1{border-left-color:#983514;} .mdc-card.a1 .mdc-name{color:#6b2410;}
.mdc-card.a2{border-left-color:#7a6547;} .mdc-card.a2 .mdc-name{color:#4a3d28;}
.mdc-card.a3{border-left-color:#4a7c6b;} .mdc-card.a3 .mdc-name{color:#224d40;}
.mdc-card.a4{border-left-color:#5a5a8a;} .mdc-card.a4 .mdc-name{color:#2e2e62;}
.mdc-card.a5{border-left-color:#8a6020;} .mdc-card.a5 .mdc-name{color:#5a3d08;}
.mdc-card.a6{border-left-color:#7a4060;} .mdc-card.a6 .mdc-name{color:#521628;}
.mdc-card.a7{border-left-color:#2a6a7a;} .mdc-card.a7 .mdc-name{color:#0e4050;}

/* ── MONTH CALENDAR ── */
.month-wrap { display:none; margin-bottom:2rem; }
.month-wrap.show { display:block; }
.month-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.6rem; gap:0.5rem; }
.month-title { font-family:var(--font-d); font-size:1rem; font-weight:400; color:var(--on-surface); text-align:center; }
.month-title em { font-style:italic; color:var(--primary); }
.mbtn {
  font-family:var(--font-l); font-size:0.55rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--on-surface);
  background:none; border:none; cursor:pointer; padding:0.35rem 0.5rem;
  transition:color 0.18s; min-height:40px;
}
.mbtn:hover { color:var(--primary); }
.cal-grid {
  display:grid; grid-template-columns:repeat(7,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.cal-head {
  background:var(--surface-xlow); padding:0.35rem 0.15rem;
  font-family:var(--font-l); font-size:0.5rem; letter-spacing:0.08em;
  text-transform:uppercase; font-weight:700; color:var(--muted);
  text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cal-day {
  background:var(--surface); min-height:44px;
  padding:0.2rem; border-right:1px solid var(--line);
  border-bottom:1px solid var(--line); cursor:pointer;
  transition:background 0.15s; position:relative;
  -webkit-tap-highlight-color:transparent;
}
.cal-day:hover { background:var(--surface-low); }
.cal-day.other-month { opacity:0.3; }
.cal-day.is-today { background:rgba(152,53,20,0.06); }
.cal-day.is-today .cd-num { color:var(--primary); font-weight:700; }
.cd-num { font-family:var(--font-l); font-size:0.58rem; font-weight:500; color:var(--on-surface); margin-bottom:0.2rem; line-height:1; }
.cd-dots { display:flex; flex-wrap:wrap; gap:2px; }
.cd-dot { width:4px; height:4px; border-radius:50%; flex-shrink:0; }

/* ── SUBJECTS ── */
.subjects-grid {
  display:grid; grid-template-columns:1fr;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
  margin-bottom:2rem;
}
.sc {
  background:var(--surface); padding:1rem;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background 0.2s;
}
.sc:hover { background:var(--surface-low); }
.sc-no {
  font-family:var(--font-l); font-size:0.5rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
  margin-bottom:0.6rem; display:flex; align-items:center; gap:0.6rem;
}
.sc-bar { width:1.5rem; height:2px; display:inline-block; flex-shrink:0; }
.sc-name {
  font-family:var(--font-d); font-size:0.95rem; font-weight:400;
  letter-spacing:-0.01em; line-height:1.3; color:var(--on-surface); margin-bottom:0.7rem;
}
.sc-tc {
  font-family:var(--font-l); font-size:0.58rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--primary); font-weight:700;
  border-bottom:1.5px solid var(--primary); padding-bottom:1px;
  display:inline-block; margin-bottom:0.8rem;
}
.sc-rows { display:flex; flex-direction:column; gap:0.35rem; }
.sc-row { display:flex; gap:0.6rem; align-items:baseline; }
.sc-row .rl {
  font-family:var(--font-l); font-size:0.5rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
  min-width:48px; flex-shrink:0;
}
.sc-row .rv { font-family:var(--font-b); font-size:0.68rem; color:var(--on-surface); font-weight:400; }

/* ── ACTION BUTTONS ── */
.action-btns { display:flex; flex-direction:column; gap:0.3rem; margin-top:0.8rem; }
.act-btn {
  width:100%; justify-content:center;
  font-family:var(--font-l); font-size:0.52rem; letter-spacing:0.08em;
  text-transform:uppercase; font-weight:700; border:1px solid var(--line);
  background:var(--surface); color:var(--on-surface); cursor:pointer;
  padding:0.45rem 0.6rem; display:flex; align-items:center; gap:0.4rem;
  transition:all 0.18s; min-height:40px;
}
.act-btn:hover { border-color:var(--primary); color:var(--primary); }
.act-btn svg { width:16px; height:16px; fill:currentColor; }

/* ── SHARED PANEL ── */
.shared-panel { background:var(--surface-low); border:1px solid var(--line); padding:0.8rem; margin-top:0.8rem; margin-bottom:1rem; }
.shared-panel-title {
  font-family:var(--font-l); font-size:0.6rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--primary); font-weight:700;
  margin-bottom:0.75rem; display:flex; align-items:center; gap:0.5rem;
}
.shared-panel-title svg { width:14px; height:14px; fill:var(--primary); }
.shared-item { padding:0.6rem 0; border-bottom:1px solid var(--line); }
.shared-item:last-child { border-bottom:none; }
.shared-item-subj { font-family:var(--font-b); font-size:0.75rem; font-weight:600; color:var(--on-surface); margin-bottom:0.15rem; }
.shared-item-text { font-family:var(--font-b); font-size:0.7rem; color:var(--muted); line-height:1.5; }

/* ── REMINDERS ── */
.rem-list { display:flex; flex-direction:column; margin-bottom:2rem; }
.rem-item {
  display:flex; align-items:baseline; gap:0.7rem; padding:0.9rem 0;
  border-bottom:1px solid var(--line);
  animation:slideIn 0.35s ease both;
}
@keyframes slideIn { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:translateX(0)} }
.ri-no { font-family:var(--font-l); font-size:0.5rem; color:var(--muted); letter-spacing:0.08em; font-weight:600; min-width:18px; }
.ri-body { flex:1; }
.ri-title { font-family:var(--font-b); font-size:0.75rem; font-weight:600; color:var(--on-surface); line-height:1.35; }
.ri-sub { font-family:var(--font-b); font-size:0.65rem; color:var(--muted); margin-top:0.15rem; }
.ri-tag {
  font-family:var(--font-l); font-size:0.5rem; letter-spacing:0.08em;
  text-transform:uppercase; font-weight:700; padding:0.2rem 0.45rem; flex-shrink:0;
}
.ri-tag.urgent { background:rgba(152,53,20,0.1); color:var(--primary); }
.ri-tag.soon   { background:rgba(122,101,71,0.1); color:#7a6547; }
.ri-tag.normal { background:rgba(74,124,107,0.1); color:#4a7c6b; }

/* ── MODAL ── */
.m-overlay {
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(29,28,23,0.5);
  align-items:flex-end; justify-content:center;
}
.m-overlay.open { display:flex; }
.m-box {
  background:var(--surface); width:100%; max-height:88vh;
  padding:1.5rem 1.2rem 2rem; position:relative;
  overflow-y:auto; border-radius:16px 16px 0 0;
  box-shadow:0 -4px 40px rgba(29,28,23,0.15);
  animation:mSlide 0.25s ease;
}
@keyframes mSlide { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
.m-close {
  position:absolute; top:1rem; right:1.2rem; background:none; border:none;
  font-family:var(--font-l); font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); cursor:pointer; font-weight:600;
}
.m-eyebrow {
  font-family:var(--font-l); font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--primary); font-weight:600; margin-bottom:0.7rem;
  display:flex; align-items:center; gap:0.6rem;
}
.m-eyebrow::before { content:''; display:inline-block; width:1.2rem; height:1px; background:var(--primary); }
.m-title { font-family:var(--font-d); font-size:1.2rem; font-weight:300; letter-spacing:-0.02em; line-height:1.2; color:var(--on-surface); margin-bottom:1.5rem; }
.m-row { display:flex; justify-content:space-between; align-items:baseline; padding:0.7rem 0; border-bottom:1px solid var(--line); gap:0.8rem; }
.m-row:last-child { border-bottom:none; }
.m-row .ml { font-family:var(--font-l); font-size:0.5rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:600; flex-shrink:0; }
.m-row .mv { font-family:var(--font-b); font-size:0.68rem; font-weight:500; color:var(--on-surface); text-align:right; word-break:break-word; }

/* Attendance */
.att-row { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; margin-top:0.75rem; padding-top:0.75rem; border-top:1px solid var(--line); }
.att-btn {
  font-family:var(--font-l); font-size:0.48rem; letter-spacing:0.07em;
  text-transform:uppercase; font-weight:700; border:none; cursor:pointer;
  padding:0.28rem 0.45rem; transition:all 0.18s; min-height:34px;
  display:flex; align-items:center; gap:0.25rem;
}
.att-btn svg { width:13px; height:13px; fill:currentColor; }
.att-present { background:rgba(74,124,107,0.12); color:var(--success); }
.att-present:hover { background:rgba(74,124,107,0.2); }
.att-present.selected { background:var(--success); color:var(--on-primary); }
.att-absent { background:rgba(152,53,20,0.08); color:var(--danger); }
.att-absent:hover { background:rgba(152,53,20,0.15); }
.att-absent.selected { background:var(--danger); color:var(--on-primary); }
.att-stats { font-family:var(--font-l); font-size:0.48rem; color:var(--muted); flex-basis:100%; text-align:center; margin-top:0.1rem; }

/* Notes */
.note-section { margin-top:1.2rem; padding-top:0.8rem; border-top:1px solid var(--line); }
.note-label { font-family:var(--font-l); font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:0.4rem; }
.note-textarea {
  width:100%; min-height:72px; border:1px solid var(--line); background:var(--surface-low);
  color:var(--on-surface); font-family:var(--font-b); font-size:0.68rem;
  padding:0.65rem; resize:vertical; outline:none; transition:border-color 0.2s; line-height:1.5;
}
.note-textarea:focus { border-color:var(--primary); }
.note-saved { font-family:var(--font-l); font-size:0.48rem; color:var(--success); letter-spacing:0.07em; text-transform:uppercase; margin-top:0.25rem; opacity:0; transition:opacity 0.3s; }
.note-saved.show { opacity:1; }

/* Shared note in modal */
.shared-note { background:var(--surface-low); border-left:3px solid var(--primary); padding:0.65rem 0.85rem; margin-top:0.6rem; }
.shared-note-label { font-family:var(--font-l); font-size:0.48rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--primary); font-weight:700; margin-bottom:0.25rem; display:flex; align-items:center; gap:0.35rem; }
.shared-note-label svg { width:11px; height:11px; fill:var(--primary); }
.shared-note-text { font-family:var(--font-b); font-size:0.72rem; color:var(--on-surface); line-height:1.5; }
.shared-note-time { font-family:var(--font-l); font-size:0.45rem; color:var(--muted-light); margin-top:0.25rem; }

/* ── AI IMPORT MODAL ──────────────────────────────────────────────────── */
.act-btn-ai { background:var(--primary); color:var(--on-primary); border-color:var(--primary); margin-bottom: 0.5rem; }
.act-btn-ai:hover { background:var(--primary-alt); border-color:var(--primary-alt); color:var(--on-primary); }
.act-btn-ai svg { fill:var(--on-primary); }
.import-box { max-width:620px; max-height:88vh; overflow-y:auto; }
.import-steps { display:flex; flex-direction:column; gap:0.8rem; }
.import-step { display:flex; align-items:center; gap:0.6rem; font-family:var(--font-b); font-size:0.75rem; color:var(--on-surface); }
.step-num { width:22px; height:22px; border-radius:50%; background:var(--primary); color:var(--on-primary); font-family:var(--font-l); font-size:0.55rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.import-input-wrap { display: flex; flex-direction: column; gap: 0.6rem; }
.file-upload-box { background: var(--surface-low); border: 1px dashed var(--line); padding: 0.8rem; text-align: center; border-radius: 4px; }
.file-upload-label { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--font-l); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); padding: 0.4rem 0.8rem; border: 1px solid var(--primary); border-radius: 4px; }
.file-upload-label svg { width: 16px; height: 16px; fill: currentColor; }
.remove-img-btn { position: absolute; top: 0rem; right: 0rem; width: 22px; height: 22px; background: var(--danger); color: white; border: none; border-radius: 50%; font-weight: bold; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.import-or { text-align: center; font-family: var(--font-l); font-size: 0.55rem; letter-spacing: 0.15em; color: var(--muted); font-weight: 700; position: relative; }
.import-or::before, .import-or::after { content: ''; position: absolute; top: 50%; width: 35%; height: 1px; background: var(--line); }
.import-or::before { left: 0; } .import-or::after { right: 0; }
.import-textarea { width:100%; min-height:100px; max-height:200px; border:1px solid var(--line); background:var(--surface-low); color:var(--on-surface); font-family:var(--font-l); font-size:0.65rem; padding:0.6rem; resize:vertical; outline:none; line-height:1.5; }
.import-btn { display:flex; align-items:center; justify-content:center; gap:0.4rem; width:100%; padding:0.7rem 1.2rem; background:var(--primary); color:var(--on-primary); font-family:var(--font-l); font-size:0.65rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border:none; min-height:42px; text-decoration:none; }
.import-btn:disabled { opacity:0.6; }
.import-btn.loading { position:relative; color:transparent; }
.import-btn.loading::after { content:''; position:absolute; width:18px; height:18px; border:2px solid var(--on-primary); border-top-color:transparent; border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.import-status { font-family:var(--font-l); font-size:0.55rem; letter-spacing:0.06em; line-height:1.5; padding:0.4rem 0; min-height:1.2rem; }
.import-status.error { color:var(--danger); }
.import-status.success { color:var(--success); }
.import-status.loading { color:var(--muted); }
.import-preview { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); animation:mPop 0.25s ease; }
.import-info { background:var(--surface-low); padding:0.6rem 0.8rem; margin:0.5rem 0; font-family:var(--font-b); font-size:0.7rem; color:var(--on-surface); line-height:1.5; }
.import-table-wrap { max-height:250px; overflow:auto; margin:0.5rem 0; border:1px solid var(--line); }
.import-table-wrap table { width:100%; border-collapse:collapse; font-family:var(--font-b); font-size:0.65rem; }
.import-table-wrap th { background:var(--surface-xlow); padding:0.4rem; font-family:var(--font-l); font-size:0.5rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:600; text-align:left; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1; }
.import-table-wrap td { padding:0.4rem; border-bottom:1px solid var(--line); color:var(--on-surface); }
.import-table-wrap tr:nth-child(even) td { background:var(--surface-low); }
.import-actions { display:flex; gap:0.5rem; margin-top:0.8rem; }
.import-apply { flex:1; padding:0.6rem 1rem; background:var(--success); color:var(--on-primary); font-family:var(--font-l); font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border:none; }
.import-cancel { padding:0.6rem 1rem; background:none; border:1px solid var(--line); color:var(--muted); font-family:var(--font-l); font-size:0.6rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; }

/* ── FOOTER ── */
footer { background:var(--surface-xlow); padding:1.5rem 1.2rem 5rem; border-top:1px solid var(--line); }
.ft-inner { display:flex; flex-direction:column; gap:0.6rem; }
.ft-left h4 { font-family:var(--font-d); font-size:1.2rem; font-weight:300; letter-spacing:-0.02em; color:var(--on-surface); }
.ft-left h4 em { font-style:italic; color:var(--primary); }
.ft-left p { font-family:var(--font-l); font-size:0.55rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-top:0.2rem; }
.ft-right { font-family:var(--font-l); font-size:0.55rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); line-height:1.8; font-weight:500; }

/* ── INSTALL BANNER ── */
.install-banner {
  display:none; position:fixed; bottom:58px; left:0; right:0; z-index:300;
  background:var(--on-surface); color:var(--surface);
  padding:0.7rem 0.8rem;
  animation:bannerSlide 0.35s ease;
}
@keyframes bannerSlide { from{transform:translateY(100%)} to{transform:translateY(0)} }
.ib-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ib-text { display:flex; align-items:center; gap:0.75rem; flex:1; }
.ib-icon { width:28px; height:28px; background:var(--primary); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ib-icon svg { width:14px; height:14px; fill:var(--on-primary); }
.ib-info h4 { font-family:var(--font-b); font-size:0.68rem; font-weight:600; color:var(--surface); }
.ib-info p { font-family:var(--font-l); font-size:0.48rem; letter-spacing:0.06em; color:var(--muted-light); margin-top:0.1rem; }
.ib-actions { display:flex; gap:0.5rem; align-items:center; }
.ib-install { font-family:var(--font-l); font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--on-primary); background:var(--primary); border:none; cursor:pointer; padding:0.5rem 1.2rem; }
.ib-dismiss { font-family:var(--font-l); font-size:0.58rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:var(--muted-light); background:none; border:none; cursor:pointer; padding:0.5rem 0.5rem; }
.install-banner.show { display:block; }

/* ── BOTTOM NAV ── */
.mob-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:300;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -2px 12px rgba(0,0,0,0.08);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.mob-nav-inner {
  display:flex; justify-content:space-around; align-items:center;
  max-width:480px; margin:0 auto; height:58px; padding:0 0.5rem;
}
.mob-tab {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; cursor:pointer; padding:6px 8px;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:color 0.2s; min-width:56px;
}
.mob-tab svg { width:22px; height:22px; fill:var(--muted); transition:fill 0.25s; }
.mob-tab span { font-family:var(--font-l); font-size:0.5rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); transition:color 0.25s; }
.mob-tab.active svg { fill:var(--primary); }
.mob-tab.active span { color:var(--primary); }
.mob-tab.active { position:relative; }
.mob-tab.active::before {
  content:''; position:absolute; top:-1px; left:25%; right:25%;
  height:2px; background:var(--primary); border-radius:0 0 2px 2px;
}

/* ── PRINT A4 ──────────────────────────────────────────────────────────── */
@media print {
  @page { size: portrait; margin: 10mm; }
  body { background: white !important; color: black !important; padding: 0 !important; font-size: 10pt; }
  .top-nav, .hero, .mob-nav, .bottom-nav, .action-btns, .shared-panel, #nhacnho, footer, .view-toggle, .install-banner, .m-overlay, .theme-toggle, .mob-day-tabs { display: none !important; }
  
  .wrap { margin: 0 !important; padding: 0 !important; width: 100% !important; border: none !important; box-shadow: none !important; }
  #thoikhoa { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  
  .mob-day-classes { display: block !important; }
  .mdc-card { border: 1px solid #aaa !important; margin-bottom: 10mm !important; box-shadow: none !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; page-break-inside: avoid; }
  
  /* Reset colored cards for print so they look readable */
  .mdc-card[class*="a"] { color: white !important; }
  .mdc-card.a1 { background: #983514 !important; }
  .mdc-card.a2 { background: #7a6547 !important; }
  .mdc-card.a3 { background: #4a7c6b !important; }
  .mdc-card.a4 { background: #5a5a8a !important; }
  .mdc-card.a5 { background: #8a6020 !important; }
  .mdc-card.a6 { background: #7a4060 !important; }
  .mdc-card.a7 { background: #2a6a7a !important; }
  
  body::before {
    content: "THỜI KHÓA BIỂU SINH VIÊN";
    display: block; font-family: sans-serif; font-size: 16pt; font-weight: bold;
    text-align: center; margin-bottom: 10px; text-transform: uppercase;
    color: black;
  }
}