/* =========================================================
   LinguaOne · Student Demo (Static)
   - Three-column layout
   - No external libs
   ========================================================= */

:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1f2430;
  --muted: #6b7280;
  --line: rgba(31,36,48,.10);
  --shadow: 0 10px 30px rgba(18, 23, 38, .06);

  --primary: #3b82f6;
  --primary2: #2563eb;
  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --soft: rgba(59,130,246,.12);
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.10), transparent 60%),
              radial-gradient(1200px 600px at 95% 10%, rgba(34,197,94,.08), transparent 50%),
              var(--bg);
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.topbar__left, .topbar__center, .topbar__right{
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar__center{ justify-content: center; }
.topbar__right{ justify-content: flex-end; }

.brand{ display:flex; gap:10px; align-items:center; }
.brand__mark{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  background: var(--soft);
  border: 1px solid rgba(59,130,246,.20);
  border-radius: 12px;
  font-weight: 900;
  color: var(--primary2);
}
.brand__name{ font-weight: 800; letter-spacing: .2px; }
.brand__sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.modeToggle{
  display:flex;
  background: rgba(31,36,48,.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.seg{
  position: relative;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor:pointer;
  user-select: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg:has(input:checked){
  background: white;
  color: var(--text);
  box-shadow: 0 6px 20px rgba(31,36,48,.08);
  border: 1px solid rgba(31,36,48,.10);
}

.teacherSelect{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
}
.teacherSelect select{
  border: none;
  background: transparent;
  outline: none;
  font-weight: 700;
  color: var(--text);
  cursor:pointer;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(31,36,48,.06);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.pill--soft{
  background: var(--soft);
  border-color: rgba(59,130,246,.20);
  color: var(--primary2);
}

.btn{
  border: 1px solid transparent;
  background: var(--primary);
  color: white;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  cursor:pointer;
  transition: transform .05s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 25px rgba(59,130,246,.18);
}
.btn:hover{ background: var(--primary2); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.btn--ghost{
  background: rgba(255,255,255,.7);
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}
.btn--ghost:hover{ background: rgba(255,255,255,1); }
.btn--primary{ background: var(--primary); }
.btn--small{ padding: 8px 10px; border-radius: 10px; font-size: 13px; }
.btn--full{ width: 100%; display:block; }

/* Layout */
.layout{
  padding: 16px;
  display: grid;
  grid-template-columns: 280px minmax(520px, 1fr) 340px;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
}

.col{ min-height: calc(100vh - 64px - 32px); }
.col--left, .col--right{ position: sticky; top: 80px; align-self: start; }
.col--center{ min-height: 400px; }

@media (max-width: 1180px){
  .layout{ grid-template-columns: 260px 1fr; }
  .col--right{ display:none; }
}
@media (max-width: 880px){
  .layout{ grid-template-columns: 1fr; }
  .col--left{ position: static; }
}

/* Cards */
.card{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.card--inner{
  box-shadow: none;
  background: rgba(255,255,255,.65);
}
.card__header{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.card__header--tight{ margin-bottom: 8px; }
.card__title{
  font-weight: 900;
  letter-spacing: .2px;
}
.card__sub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.card__actions{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

.divider{
  height: 1px;
  background: var(--line);
  margin: 12px 0;
}

/* Left profile */
.profileCard{
  display:flex;
  gap: 12px;
  align-items:center;
}
.avatar{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: radial-gradient(20px 20px at 30% 30%, rgba(255,255,255,.8), rgba(59,130,246,.25)),
              rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.2);
  font-weight: 900;
  color: var(--primary2);
}
.profileCard__name{ font-weight: 900; }
.profileCard__desc{ display:flex; gap: 8px; margin-top: 6px; }

/* Nav */
.nav{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.nav__item{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.65);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
  color: var(--text);
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  transition: transform .05s ease, background .2s ease;
}
.nav__item:hover{ background: rgba(255,255,255,.95); }
.nav__item:active{ transform: translateY(1px); }
.nav__item.is-active{
  background: var(--soft);
  border-color: rgba(59,130,246,.20);
}
.nav__icon{ width: 18px; text-align:center; }

/* Mini cards */
.miniCard{ margin-top: 12px; }
.miniCard__title{
  font-weight: 900;
  margin-bottom: 10px;
}
.miniCard__footer{
  display:flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.miniList{
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}
.miniList li{
  margin: 6px 0;
  line-height: 1.35;
}
.advice{
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.skeleton{
  height: 12px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(31,36,48,.06), rgba(31,36,48,.12), rgba(31,36,48,.06));
  background-size: 200% 200%;
  animation: shimmer 1.1s ease-in-out infinite;
  margin: 10px 0;
}
.skeleton--short{ width: 70%; }
@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

.footnote{
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Views */
.view{ display:none; }
.view.is-active{ display:block; }

.grid2{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
}
@media (max-width: 880px){
  .grid2{ grid-template-columns: 1fr; }
}

.chat{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  overflow: hidden;
}
.chat__meta{
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.chat__log{
  height: 320px;
  overflow:auto;
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.bubble{
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 10px 25px rgba(18, 23, 38, .05);
  line-height: 1.45;
  white-space: pre-wrap;
}
.bubble--user{
  margin-left: auto;
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.20);
}
.bubble__meta{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
}
.bubble__meta b{ color: var(--text); }

.chat__composer{
  display:flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.65);
}
.chat__input{
  flex:1;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  outline: none;
  font-weight: 700;
  background: rgba(255,255,255,.85);
}
.chat__quick{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.65);
}

.chip{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.8);
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 800;
  font-size: 13px;
  transition: transform .05s ease, background .2s ease;
}
.chip:hover{ background: rgba(255,255,255,1); }
.chip:active{ transform: translateY(1px); }

.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
}

/* Stats */
.statGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.stat{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.65);
}
.stat__label{ color: var(--muted); font-weight: 800; font-size: 12px; }
.stat__value{ font-weight: 950; font-size: 24px; margin: 6px 0; letter-spacing: .2px; }

.bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(31,36,48,.08);
  overflow:hidden;
  border: 1px solid var(--line);
}
.bar__fill{
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, rgba(59,130,246,.95), rgba(34,197,94,.75));
  border-radius: 999px;
}

.muted{ color: var(--muted); }
.small{ font-size: 12px; }

/* Weakness chips */
.chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag{
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.65);
  cursor: pointer;
  transition: transform .05s ease, background .2s ease;
}
.tag:hover{ background: rgba(255,255,255,1); }
.tag.is-on{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.22);
}

/* Timeline */
.timeline{ display:flex; flex-direction: column; gap: 10px; }
.tItem{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.65);
}
.tItem__meta{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.tItem__title{ font-weight: 900; }
.tItem__body{ color: var(--text); line-height: 1.55; font-size: 13px; white-space: pre-wrap; }

/* Table */
.tableWrap{ overflow:auto; border-radius: 14px; border: 1px solid var(--line); }
.table{ width: 100%; border-collapse: collapse; min-width: 820px; background: rgba(255,255,255,.65); }
.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
}
.table thead th{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.9);
  z-index: 1;
  font-weight: 900;
}
.table td.right{ text-align: right; }
.table .pill{ font-size: 11px; padding: 3px 8px; }

.progressMini{
  display:flex;
  align-items:center;
  gap: 10px;
}
.progressMini .bar{ flex:1; height: 8px; }
.progressMini .score{ width: 44px; text-align: right; font-weight: 900; font-size: 12px; color: var(--muted); }

.actionsInline{
  display:flex;
  gap: 6px;
  justify-content: flex-end;
}
.iconBtn{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.85);
  padding: 6px 8px;
  border-radius: 10px;
  cursor:pointer;
  font-weight: 900;
  font-size: 12px;
}
.iconBtn:hover{ background: rgba(255,255,255,1); }

/* Forms */
.input{
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  outline: none;
  font-weight: 800;
  background: rgba(255,255,255,.85);
  min-width: 180px;
}
.form{ display:flex; flex-direction: column; gap: 10px; }
.formRow{ display:flex; flex-direction: column; gap: 6px; }
.formRow label{ font-weight: 900; font-size: 12px; color: var(--muted); }
.formActions{ display:flex; gap: 10px; align-items:center; margin-top: 4px; }

/* Mistakes */
.mistakeGrid{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
}
@media (max-width: 880px){
  .mistakeGrid{ grid-template-columns: 1fr; }
}
.mistakePanel{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  padding: 12px;
}
.panelTitle{ font-weight: 900; margin-bottom: 10px; }

.mistakeItem{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.8);
  margin-bottom: 10px;
}
.mistakeItem__meta{
  display:flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted);
  margin-bottom: 6px;
}
.mistakeItem__body{ font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.mistakeItem__actions{ display:flex; gap: 8px; margin-top: 8px; }
.badge{
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.20);
  color: #b45309;
}

/* Right column */
.kv{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.kv__row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  border: 1px dashed rgba(31,36,48,.14);
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
}
.kv__k{ color: var(--muted); font-weight: 900; font-size: 12px; }
.kv__v{ font-weight: 900; font-size: 13px; text-align: right; }

.miniTitle{ font-weight: 900; margin-bottom: 10px; }

.meter{ margin-bottom: 10px; }
.meter__label{ font-size: 12px; font-weight: 900; color: var(--muted); margin-bottom: 6px; }

.suggest{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.suggestItem{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.65);
  line-height: 1.5;
}
.suggestItem__meta{
  display:flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted);
  margin-bottom: 6px;
}
.suggestItem__title{ font-weight: 900; color: var(--text); }

.checklist{ margin: 0; padding-left: 18px; color: var(--text); }
.checklist li{ margin: 6px 0; line-height: 1.45; }

.weekBars{ display:flex; flex-direction: column; gap: 10px; }
.weekRow{
  display:flex; gap: 10px; align-items:center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.65);
}
.weekRow__k{ width: 70px; font-weight: 900; }
.weekRow__v{ flex:1; }
.weekRow__n{ width: 52px; text-align: right; font-weight: 900; color: var(--muted); }

.radar{ display:flex; flex-direction: column; gap: 8px; }
.radarRow{
  display:flex; gap: 10px; align-items:center;
}
.radarRow__k{ width: 70px; font-weight: 900; color: var(--muted); font-size: 12px; }
.radarRow__bar{ flex:1; }
.radarRow__n{ width: 44px; text-align:right; font-weight: 900; color: var(--muted); font-size: 12px; }

/* Modals */
.modalBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 26, .35);
  backdrop-filter: blur(6px);
  z-index: 50;
}
.modal{
  position: fixed;
  z-index: 60;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 26px));
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(18, 23, 38, .25);
  padding: 14px;
}
.modal__header{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 10px;
  padding: 4px 2px 10px;
}
.modal__title{ font-weight: 950; }
.modal__sub{ margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.35; }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(31,36,48,.92);
  color: white;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 20px 60px rgba(18, 23, 38, .35);
  font-weight: 800;
  z-index: 80;
}

/* Utility */
.right{ text-align:right; }


/* =========================================================
   Teacher Demo additions
   ========================================================= */

.layout--teacher{
  /* same three-column feel, but slightly more room for center */
  grid-template-columns: 320px minmax(560px, 1fr) 360px;
}

@media (max-width: 1180px){
  .layout--teacher{ grid-template-columns: 300px 1fr; }
}

.rosterSearch{
  display:flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.rosterList{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.rosterItem{
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.65);
  cursor: pointer;
  transition: transform .05s ease, border-color .15s ease, background .15s ease;
}
.rosterItem:hover{
  border-color: rgba(59,130,246,.35);
}
.rosterItem:active{ transform: translateY(1px); }
.rosterItem.is-active{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.25);
}
.rosterItem__top{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 10px;
}
.rosterItem__name{
  font-weight: 950;
}
.rosterItem__meta{
  margin-top: 6px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}
.rosterBadges{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge--ok{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.20);
  color: #15803d;
}
.badge--bad{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.20);
  color: #b91c1c;
}

.planGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .planGrid{ grid-template-columns: 1fr; }
}

.planArea{
  min-height: 120px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.5;
}

.itemsList{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.itemCard{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.65);
  line-height: 1.5;
}
.itemCard__meta{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.itemCard__q{ font-weight: 950; }
.itemCard__a{ margin-top: 6px; color: var(--muted); white-space: pre-wrap; }
.itemCard__tip{ margin-top: 6px; font-size: 12px; color: var(--muted); }

.taskRow{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.65);
  margin-bottom: 10px;
}
.taskRow input[type="checkbox"]{ margin-top: 3px; }
.taskRow__body{ flex:1; }
.taskRow__title{ font-weight: 900; }
.taskRow__meta{ margin-top: 4px; font-size: 12px; color: var(--muted); }