:root{
    --bg: #F4F1EE;
    --panel: #FFFFFF;
    --ink: #1C192E;
    --ink-soft: #5B638A;
    --line: #DEDBE6;
    --blue-row: #EEF0F8;
    --rose-row: #FBEFE3;
    --accent: #342E51;
    --accent-soft: #E7E4F0;
    --amber: #FFB800;
    --good: #2D5A27;
    --good-soft: #E5EFE3;
    --mid: #8A6A14;
    --bad: #BB0000;
    --bad-soft: #FBEAEA;
    --hu: #5B638A;
    --header-h: 96px;
    --toolbar-h: 56px;
  }
  *{box-sizing:border-box;}
  html{ height:100%; }
  body{
    margin:0; padding:0;
    width:100%; height:100%;
    background:var(--bg);
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    color:var(--ink);
    overflow:hidden;
  }

  /* ===== Top App Header ===== */
  .app-header{
    height:var(--header-h);
    background:var(--accent);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 40px;
  }
  .app-header .title-block{
    display:flex; flex-direction:column; gap:2px;
  }
  .app-header .title-block .app-name{
    font-size:18px; letter-spacing:.08em; text-transform:uppercase; opacity:.75;
    font-weight:600;
  }
  .app-header .title-block .context{
    font-size:30px; font-weight:700;
  }
  .app-header .context .muted{
    font-weight:400; opacity:.85; font-size:22px; margin-left:14px;
  }
  .header-right{
    display:flex; align-items:center; gap:28px;
  }
  .header-chip{
    background:rgba(255,255,255,0.14);
    border-radius:10px;
    padding:10px 18px;
    font-size:18px;
    display:flex; flex-direction:column; gap:2px;
    min-width:150px;
  }
  .header-chip .label{ font-size:13px; opacity:.75; }
  .header-chip .value{ font-size:20px; font-weight:700; }
  .avatar{
    width:52px;height:52px;border-radius:50%;
    background:#fff; color:var(--accent);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:20px;
  }

  .sync-status{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,0.14);
    border-radius:10px;
    padding:10px 18px;
  }
  .sync-dot{
    width:14px; height:14px;
    border-radius:50%;
    flex-shrink:0;
  }
  .sync-local .sync-dot{ background:#E25B4F; box-shadow:0 0 0 3px rgba(226,91,79,0.25); }
  .sync-online .sync-dot{ background:#4CA66B; box-shadow:0 0 0 3px rgba(76,166,107,0.25); }
  .sync-text{ display:flex; flex-direction:column; gap:2px; }
  .sync-label{ font-size:18px; font-weight:700; color:#fff; }
  .sync-time{ font-size:13px; color:rgba(255,255,255,0.75); }

  /* ===== Toolbar: fach/klasse tabs + zeitraum ===== */
  .toolbar{
    height:var(--toolbar-h);
    background:var(--panel);
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 40px;
  }
  .tabs{ display:flex; gap:8px; height:100%; align-items:center;}
  .tab{
    padding:8px 18px;
    border-radius:8px;
    font-size:16px;
    font-weight:600;
    color:var(--ink-soft);
    cursor:pointer;
  }
  .tab.active{
    background:var(--accent-soft);
    color:var(--accent);
  }
  .toolbar-right{ display:flex; align-items:center; gap:18px; font-size:15px; color:var(--ink-soft);}
  .legend{ display:flex; gap:14px; align-items:center; font-size:14px;}
  .legend .dot{ width:10px;height:10px;border-radius:50%; display:inline-block; margin-right:6px;}
  .dot.sa{background:var(--accent);}
  .dot.slzk{background:var(--amber);}
  .dot.mab{background:var(--ink-soft);}

  /* ===== Main grid area ===== */
  .grid-wrap{
    position:relative;
    height: calc(1600px - var(--header-h) - var(--toolbar-h));
    overflow:hidden;
  }
  table.grid{
    border-collapse:collapse;
    width:100%;
    table-layout:fixed;
  }
  .grid th, .grid td{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    text-align:center;
    vertical-align:middle;
    font-size:16px;
    padding:0;
  }

  /* sticky name + summary columns */
  col.col-nr{width:40px;}
  col.col-name{width:180px;}
  col.col-avg{width:50px;}
  col.col-note{width:50px;}
  col.col-entry{width:80px;}

  thead th{
    background:var(--panel);
    position:sticky; top:0; z-index:5;
    padding:6px 4px;
  }
  th.col-head-group{
    background:#EFEDE7;
    font-size:17px;
    color:var(--ink-soft);
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    border-bottom:1px solid var(--line);
  }
  th.col-head-entry{
    height:70px;
    font-weight:600;
  }
  .entry-head{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    height:100%; line-height:1.3; gap:3px;
  }
  .entry-head .nr-date{ display:flex; align-items:center; gap:5px; font-size:14px; color:var(--ink-soft); font-weight:700;}
  .entry-head .nr-date .sep{ opacity:.5; }
  .entry-head .topic{ font-size:17px; font-weight:800; max-width:95px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);}
  .entry-head.type-sa{ border-top:4px solid #342E51; }
  .entry-head.type-slzk{ border-top:4px solid #FFB800; }
  .entry-head.type-mlzk{ border-top:4px solid #7B89C2; }
  .entry-head.type-hu{ border-top:4px solid #2D5A27; }
  .entry-head.type-mab{ border-top:4px solid #BB0000; }

  th.sticky-col, td.sticky-col{
    position:sticky;
    background:inherit;
    z-index:4;
  }
  th.nr-col, td.nr-col{ left:0; font-size:24px; font-weight:700; }
  th.name-col, td.name-col{ left:40px; text-align:left; padding-left:10px; font-size:24px; font-weight:700;}
  th.avg-col, td.avg-col{ left:220px; background:#EFEDE7 !important; font-weight:800; font-size:24px; }
  th.note-col, td.note-col{ left:270px; background:#EFEDE7 !important; font-weight:800; border-right:2px solid #BFBBAF;}

  tbody tr.row-m.odd td.name-col, tbody tr.row-m.odd{ background:var(--blue-row); }
  tbody tr.row-m.even td.name-col, tbody tr.row-m.even{ background:#FFFFFF; }
  tbody tr.row-w.odd td.name-col, tbody tr.row-w.odd{ background:var(--rose-row); }
  tbody tr.row-w.even td.name-col, tbody tr.row-w.even{ background:#FFFFFF; }
  tbody tr td.sticky-col{ background:inherit; }
  tbody tr.row-m.odd td.avg-col, tbody tr.row-m.odd td.note-col{ background:#E3E6DC !important; }
  tbody tr.row-m.even td.avg-col, tbody tr.row-m.even td.note-col{ background:#EFEDE7 !important; }
  tbody tr.row-w.odd td.avg-col, tbody tr.row-w.odd td.note-col{ background:#F2E3DC !important; }
  tbody tr.row-w.even td.avg-col, tbody tr.row-w.even td.note-col{ background:#EFEDE7 !important; }

  td.cell{ height:62px; font-weight:700; font-size:24px; cursor:pointer; }
  td.cell:hover{ outline:2px solid var(--accent); outline-offset:-2px; }
  td.cell.empty{ color:#C7C3BA; font-weight:400; font-size:20px; }

  .val-good{ color:var(--good); }
  .val-mid{ color:var(--mid); }
  .val-bad{ color:var(--bad); }
  .val-neutral{ color:var(--ink); }

  .note-pill{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:10px;
    font-size:19px; font-weight:800; color:#fff;
  }
  .n1{ background:#2D5A27; }
  .n2{ background:#5B8A4E; }
  .n3{ background:#FFB800; color:#1C192E; }
  .n4{ background:#C97A3A; }
  .n5{ background:#BB0000; }

  .pct-text{ font-size:15px; color:var(--ink-soft); font-weight:600; display:block; }

  /* ===== Bottom status / footer bar ===== */
  .footer-bar{
    position:absolute; bottom:0; left:0; right:0;
    height:0;
  }

  /* timestamp badge sim (small corner dot on a couple of cells to show concept) */
  .ts-dot{
    position:absolute; top:4px; right:4px;
    width:7px; height:7px; border-radius:50%;
    background:var(--accent);
  }
  td.cell{ position:relative; }

  /* Klassendurchschnitt row */
  tr.row-avg td{
    font-size:24px;
    font-weight:800;
    background:var(--accent-soft) !important;
    color:var(--accent);
    border-top:2px solid var(--accent);
    height:62px;
  }
  tr.row-avg td.name-col{
    font-size:24px;
    font-weight:800;
    text-align:left;
    padding-left:10px;
  }

/* ===== Cell input popup (added for working frontend) ===== */
.cell-popup-anchor{
  position:absolute;
  z-index:60;
}
.cell-popup{
  background:#fff;
  border-radius:16px;
  width:320px;
  box-shadow:0 16px 48px rgba(28,25,46,0.3);
  border:1px solid var(--line);
  position:relative;
}
.cell-popup::before{
  content:'';
  position:absolute;
  top:-9px; left:40px;
  width:18px; height:18px;
  background:#fff;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.popup-header{
  padding:18px 20px 14px 20px;
  border-bottom:1px solid var(--line);
}
.popup-header .p-student{ font-size:18px; font-weight:800; color:var(--ink); }
.popup-header .p-context{
  font-size:14px; font-weight:600; color:var(--ink-soft); margin-top:3px;
  display:flex; align-items:center; gap:8px;
}
.popup-header .p-context .type-dot{ width:9px; height:9px; border-radius:50%; }
.popup-body{ padding:18px 20px; }

.stage-label{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft); margin-bottom:12px;
}
.stufen-btn-row{ display:flex; gap:10px; }
.stufen-btn{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:16px 8px;
  border-radius:12px;
  border:2px solid var(--line);
  cursor:pointer;
}
.stufen-btn .s-val{ font-size:24px; font-weight:800; color:var(--ink); }
.stufen-btn .s-pct{ font-size:12px; font-weight:600; color:var(--ink-soft); }
.stufen-btn.selected{ border-color:var(--good); background:var(--good-soft); }
.stufen-btn.selected .s-val{ color:var(--good); }

.value-input-row{ display:flex; align-items:center; gap:10px; }
.value-input{
  flex:1;
  font-size:24px; font-weight:800;
  padding:12px 14px;
  border:2px solid var(--line);
  border-radius:12px;
  text-align:center;
  color:var(--ink);
  font-family:inherit;
}
.value-input.error{
  border-color:var(--bad, #BB0000);
  color:var(--bad, #BB0000);
  background:#FBEAEA;
}
.value-unit{ font-size:16px; font-weight:700; color:var(--ink-soft); }
.error-message{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:10px;
  font-size:13px; font-weight:700;
  color:var(--bad, #BB0000);
}

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

.date-confirm-row{
  display:flex; align-items:center; justify-content:space-between;
  background:#F4F1EE;
  border-radius:10px;
  padding:12px 16px;
}
.date-confirm-row .d-label{ font-size:13px; font-weight:700; color:var(--ink-soft); }
.date-confirm-row .d-value{
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:800; color:var(--ink);
  cursor:pointer;
}

.popup-footer{
  display:flex; justify-content:flex-end; gap:10px;
  padding:14px 20px;
  border-top:1px solid var(--line);
  background:#FAF9F7;
  border-radius:0 0 16px 16px;
}
.popup-btn{
  font-size:14px; font-weight:700;
  padding:10px 18px;
  border-radius:10px;
  cursor:pointer;
}
.popup-btn.cancel{ background:transparent; color:var(--ink-soft); border:1px solid var(--line); }
.popup-btn.save{ background:var(--accent); color:#fff; border:none; }

.cell-highlighted{
  outline:3px solid var(--accent) !important;
  outline-offset:-3px;
  background:#fff !important;
}

/* ===== Auth screens (login, pin setup, pin entry) ===== */
#auth-root{
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  z-index:200;
}
.login-wrap, .pin-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; height:100%; color:#fff;
}
.login-card{
  background:#fff; border-radius:24px; width:90%; max-width:420px;
  padding:40px 36px 32px 36px; box-shadow:0 30px 80px rgba(0,0,0,0.3);
  color:var(--ink);
}
.brand-mark{ display:flex; flex-direction:column; align-items:center; margin-bottom:28px; }
.brand-icon{
  width:56px; height:56px; border-radius:14px; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px; font-weight:800; margin-bottom:14px;
}
.brand-title{ font-size:21px; font-weight:800; }
.brand-sub{ font-size:14px; color:var(--ink-soft); font-weight:600; margin-top:3px; }

.field-block{ margin-bottom:18px; }
.field-label{
  font-size:12px; font-weight:700; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
}
.text-input{
  width:100%; font-size:17px; font-weight:600; padding:14px 16px;
  border:1.5px solid var(--line); border-radius:11px; font-family:inherit; color:var(--ink);
}
.text-input.error{ border-color:var(--bad); background:#FBEAEA; }

.login-btn{
  width:100%; background:var(--accent); color:#fff; font-size:17px; font-weight:800;
  padding:15px 0; border-radius:12px; text-align:center; margin-top:8px; cursor:pointer;
}
.forgot-link{ text-align:center; font-size:13px; font-weight:700; color:var(--ink-soft); margin-top:16px; cursor:pointer; }

.divider-row{ display:flex; align-items:center; gap:12px; margin:24px 0 18px 0; }
.divider-row .line{ flex:1; height:1px; background:var(--line); }
.divider-row .label{ font-size:12px; font-weight:700; color:var(--ink-soft); }

.info-note{
  display:flex; align-items:flex-start; gap:10px; background:#EEF0F8; color:var(--accent);
  font-size:13px; font-weight:600; padding:13px 15px; border-radius:10px; line-height:1.4;
}
.login-error-banner{
  display:flex; align-items:center; gap:9px; background:#FBEAEA; color:var(--bad);
  font-size:13px; font-weight:700; padding:12px 15px; border-radius:10px; margin-bottom:18px;
}

.avatar-big{
  width:72px; height:72px; border-radius:50%; background:#fff; color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; margin-bottom:18px;
}
.greeting{ font-size:21px; font-weight:800; margin-bottom:5px; }
.greeting-sub{ font-size:14px; font-weight:600; color:rgba(255,255,255,0.7); margin-bottom:32px; }

.pin-dots{ display:flex; gap:15px; margin-bottom:36px; }
.pin-dot{ width:17px; height:17px; border-radius:50%; border:2px solid rgba(255,255,255,0.5); }
.pin-dot.filled{ background:#fff; border-color:#fff; }
.pin-dot.error{ background:#FF8A80; border-color:#FF8A80; }

.keypad{ display:grid; grid-template-columns:repeat(3, 80px); gap:18px; }
.keypad-btn{
  width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center; font-size:25px; font-weight:700; cursor:pointer;
}
.keypad-btn.empty{ background:transparent; cursor:default; }
.keypad-btn.action{ font-size:18px; font-weight:700; background:transparent; }

.bio-link{ margin-top:30px; display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:rgba(255,255,255,0.85); cursor:pointer; }
.pin-error-text{ font-size:13px; font-weight:700; color:#FF8A80; margin-top:-26px; margin-bottom:26px; }
.attempt-warning{ margin-top:14px; font-size:12px; font-weight:600; color:rgba(255,255,255,0.6); text-align:center; max-width:280px; }
.fallback-link{ margin-top:18px; font-size:13px; font-weight:600; color:rgba(255,255,255,0.55); cursor:pointer; }