:root{
  --paper: #F6F4EF;
  --paper-raised: #FFFFFF;
  --ink: #232032;
  --ink-soft: #5B5770;
  --ink-faint: #A6A2B8;
  --line: #E3E0D6;
  --line-strong: #CFCBBD;
  --accent: #2F6F62;
  --accent-bg: #E4EEE9;
  --danger: #A14E4E;
}
@font-face{font-family:'Inter'; src:url('../fonts/inter-cyrillic-400-normal.woff2') format('woff2'); font-weight:400; unicode-range:U+0400-04FF,U+0500-052F,U+2116;}
@font-face{font-family:'Inter'; src:url('../fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight:400; unicode-range:U+0000-00FF,U+2000-206F;}
@font-face{font-family:'Inter'; src:url('../fonts/inter-cyrillic-500-normal.woff2') format('woff2'); font-weight:500; unicode-range:U+0400-04FF,U+0500-052F,U+2116;}
@font-face{font-family:'Inter'; src:url('../fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight:500; unicode-range:U+0000-00FF,U+2000-206F;}
@font-face{font-family:'Inter'; src:url('../fonts/inter-cyrillic-600-normal.woff2') format('woff2'); font-weight:600; unicode-range:U+0400-04FF,U+0500-052F,U+2116;}
@font-face{font-family:'Inter'; src:url('../fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight:600; unicode-range:U+0000-00FF,U+2000-206F;}

/* Fraunces не поддерживает кириллицу — используем Lora как замену для заголовков */
@font-face{font-family:'Lora'; src:url('../fonts/lora-cyrillic-500-normal.woff2') format('woff2'); font-weight:500; unicode-range:U+0400-04FF,U+0500-052F,U+2116;}
@font-face{font-family:'Lora'; src:url('../fonts/lora-latin-500-normal.woff2') format('woff2'); font-weight:500; unicode-range:U+0000-00FF,U+2000-206F;}
@font-face{font-family:'Lora'; src:url('../fonts/lora-cyrillic-600-normal.woff2') format('woff2'); font-weight:600; unicode-range:U+0400-04FF,U+0500-052F,U+2116;}
@font-face{font-family:'Lora'; src:url('../fonts/lora-latin-600-normal.woff2') format('woff2'); font-weight:600; unicode-range:U+0000-00FF,U+2000-206F;}

@font-face{font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2'); font-weight:400; unicode-range:U+0400-04FF,U+0500-052F,U+2116;}
@font-face{font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight:400; unicode-range:U+0000-00FF,U+2000-206F;}
@font-face{font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-cyrillic-500-normal.woff2') format('woff2'); font-weight:500; unicode-range:U+0400-04FF,U+0500-052F,U+2116;}
@font-face{font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight:500; unicode-range:U+0000-00FF,U+2000-206F;}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1{font-family:'Lora',serif; font-weight:500; letter-spacing:-0.01em;}
h2{font-family:'Lora',serif; font-weight:500;}
.brand{font-family:'Lora',serif; font-weight:500;}
.obs-meta, .day-num, .quarter-months, .week-head{font-family:'IBM Plex Mono',monospace;}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; background:var(--paper-raised); border-bottom:1px solid var(--line);
  flex-wrap:wrap; gap:10px;
}
.topbar .brand{font-weight:600; font-size:16px;}
.topbar nav{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:14px;}
.topbar a{color:var(--ink-soft); text-decoration:none;}
.topbar a:hover{color:var(--ink);}
.container{max-width:900px; margin:0 auto; padding:20px 16px 60px;}
h1{font-size:22px; margin:0 0 16px;}
.card{background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px;}
.obs-meta{font-size:12.5px; color:var(--ink-faint); margin-bottom:6px;}
.tag{display:inline-block; background:var(--accent-bg); color:var(--accent); font-size:11.5px; padding:2px 8px; border-radius:999px; margin-right:6px;}
.obs-text{font-size:14.5px; line-height:1.5;}
.btn{display:inline-block; background:var(--ink); color:var(--paper); border:none; padding:9px 16px; border-radius:8px; font-size:14px; text-decoration:none; cursor:pointer;}
.btn:hover{opacity:.9;}
.btn-danger{background:var(--danger);}
.btn-ghost{background:none; border:1px solid var(--line-strong); color:var(--ink-soft); padding:8px 15px; border-radius:8px; text-decoration:none; font-size:14px;}
.chip{display:inline-block; background:var(--paper-raised); color:var(--ink-soft); border:1px solid var(--line-strong); padding:6px 14px; border-radius:999px; font-size:13px; text-decoration:none; cursor:pointer; transition:all .12s ease;}
.chip:hover{border-color:var(--ink-faint); color:var(--ink);}
.chip.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.period-btn{display:inline-block; background:var(--paper-raised); color:var(--ink-soft); border:1px solid var(--line-strong); padding:7px 16px; border-radius:8px; font-size:13.5px; text-decoration:none; cursor:pointer; transition:all .12s ease;}
.period-btn:hover{border-color:var(--ink-faint); color:var(--ink);}
.period-btn.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
form .field{margin-bottom:14px;}
form label{display:block; font-size:13px; color:var(--ink-soft); margin-bottom:4px;}
form input:not([type="checkbox"]):not([type="radio"]), form select, form textarea{
  width:100%; padding:8px 10px; border:1px solid var(--line-strong); border-radius:8px;
  font-size:14px; background:var(--paper); color:var(--ink); font-family:inherit;
}
.empty{color:var(--ink-faint); font-size:14px; padding:20px 0;}
.student-list{list-style:none; padding:0; margin:0;}
.student-list li{padding:8px 0; border-bottom:1px solid var(--line);}
.student-list a{color:var(--ink); text-decoration:none; font-size:14.5px;}
.actions-row{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.login-box{max-width:360px; margin:80px auto; background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:28px;}