:root{
  --ink:#1B2C4F;
  --ink-soft:#3C4A6B;
  --paper:#F4F2EC;
  --paper-raised:#FFFFFF;
  --rule:#C9C3B4;
  --seal:#7A1F2B;
  --seal-soft:#F1E1E1;
  --focus:#7A1F2B;
  --shadow:0 1px 2px rgba(27,44,79,0.06);
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
}

body{
  background:var(--paper);
  background-image:
    linear-gradient(var(--paper), var(--paper)),
    repeating-linear-gradient(0deg, rgba(27,44,79,0.025) 0px, rgba(27,44,79,0.025) 1px, transparent 1px, transparent 34px);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:18px 12px 60px;
}

.page{
  max-width:1180px;
  margin:0 auto;
}

header{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 18px;
  background:#D9FFF4;
  border:1px solid var(--rule);
  border-radius:6px;
  box-shadow:var(--shadow);
  margin-bottom:16px;
}

.seal{
  flex:0 0 auto;
  width:68px;
  height:68px;
  object-fit:contain;
}

.titles{
  flex:1;
  min-width:0;
}

.header-session{
  margin-left:auto;
  flex:0 0 auto;
  text-align:right;
  font-size:11px;
  line-height:1.4;
  color:var(--ink-soft);
  white-space:nowrap;
}

.header-user{
  color:var(--ink);
  font-weight:500;
}

.header-logout{
  margin-left:8px;
  border:none;
  background:none;
  padding:0;
  font:inherit;
  font-size:11px;
  color:var(--seal);
  cursor:pointer;
  text-decoration:underline;
}

.header-logout:hover{
  color:var(--ink);
}

.header-change-password{
  margin-left:8px;
  border:none;
  background:none;
  padding:0;
  font:inherit;
  font-size:11px;
  color:var(--seal);
  cursor:pointer;
  text-decoration:underline;
}

.header-change-password:hover{
  color:var(--ink);
}

.page-message{
  min-height:18px;
  margin:0 0 12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--seal);
}

.page-message.ok{
  color:#4A7C59;
}

.app-dialog{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(27,44,79,0.35);
}

.app-dialog[hidden]{
  display:none;
}

.app-dialog-panel{
  width:100%;
  max-width:360px;
  padding:22px 20px;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:8px;
  box-shadow:var(--shadow);
}

.app-dialog-panel h3{
  margin:0 0 14px;
  font-family:'Lora', serif;
  font-size:18px;
  color:var(--ink);
}

.app-dialog-field{
  margin-bottom:12px;
}

.app-dialog-field label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
}

.app-dialog-field input{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--rule);
  border-radius:5px;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  background:var(--input-bg, #FBFAF7);
  color:var(--ink);
}

.app-dialog-field-admin{
  margin-top:16px;
  padding:12px;
  border:1px solid var(--gold, #B8892B);
  border-radius:6px;
  background:var(--gold-soft, #F4E9D2);
}

.app-dialog-field-admin label{
  display:block;
  margin-bottom:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--gold, #B8892B);
}

.app-dialog-field-admin input{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--gold, #B8892B);
  border-radius:5px;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  background:#fff;
  color:var(--ink);
}

.app-dialog-field-admin input:focus{
  outline:2px solid rgba(184,137,43,0.35);
  outline-offset:1px;
}

.app-dialog-error{
  min-height:16px;
  margin:0 0 12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--seal);
}

.app-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.app-dialog-actions .btn{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:12.5px;
  font-weight:500;
  border:1px solid var(--rule);
  background:var(--paper-raised);
  color:var(--ink);
  padding:7px 13px;
  border-radius:5px;
  cursor:pointer;
}

.app-dialog-actions .btn.primary{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}

.titles h1{
  font-family:'Lora', serif;
  font-weight:700;
  font-size:20px;
  margin:0 0 2px;
  color:var(--ink);
  line-height:1.2;
}

.titles .loc{
  font-size:12.5px;
  color:var(--ink-soft);
  letter-spacing:.03em;
  margin-bottom:6px;
}

.titles .term{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--seal);
  background:var(--seal-soft);
  border:1px solid rgba(122,31,43,0.25);
  padding:3px 9px;
  border-radius:3px;
}

.login-panel{
  max-width:380px;
  margin:48px auto 0;
  padding:28px 24px;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:6px;
  box-shadow:var(--shadow);
}

.login-panel h2{
  font-family:'Lora', serif;
  font-size:18px;
  font-weight:600;
  margin:0 0 20px;
  color:var(--ink);
  text-align:center;
}

.login-field{
  margin-bottom:14px;
}

.login-field label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:6px;
}

.login-field input{
  width:100%;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:14px;
  border:1px solid var(--rule);
  background:var(--paper-raised);
  color:var(--ink);
  padding:10px 12px;
  border-radius:5px;
}

.login-field input:focus{
  outline:none;
  box-shadow:inset 0 0 0 1.5px var(--focus);
}

.password-field{
  position:relative;
  width:100%;
}

.password-field > input{
  width:100%;
  padding-right:42px;
}

.password-toggle{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  margin:0;
  border:none;
  border-radius:4px;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:none;
}

.password-toggle:hover{
  color:var(--ink);
  background:rgba(27,44,79,0.06);
}

.password-toggle:focus{
  outline:none;
  box-shadow:0 0 0 1.5px var(--focus);
}

.password-toggle:focus:not(:focus-visible){
  box-shadow:none;
}

.password-toggle:focus-visible{
  box-shadow:0 0 0 1.5px var(--focus);
}

.password-toggle svg{
  width:20px;
  height:20px;
  display:block;
  pointer-events:none;
}

.login-error{
  min-height:18px;
  margin:0 0 12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--seal);
  text-align:center;
}

.login-btn{
  width:100%;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  padding:10px 14px;
  border-radius:5px;
  cursor:pointer;
  box-shadow:var(--shadow);
}

.login-btn:hover{
  background:#2A3C63;
}

.login-btn:active{
  transform:translateY(1px);
}

.error-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 12px;
}

.error-page .page{
  width:min(100%, 480px);
  margin:0;
}

.error-page header{
  margin-bottom:20px;
}

.error-shell{
  display:flex;
  justify-content:center;
}

.error-panel{
  width:min(100%, 420px);
  padding:32px 28px 28px;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:8px;
  box-shadow:var(--shadow);
  text-align:center;
}

.error-code{
  font-family:'IBM Plex Mono', monospace;
  font-size:48px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--seal);
  margin:0 0 10px;
  line-height:1;
}

.error-panel h2{
  font-family:'Lora', serif;
  font-size:20px;
  font-weight:600;
  margin:0 0 10px;
  color:var(--ink);
}

.error-text{
  margin:0 0 24px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
}

.error-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.error-link{
  display:inline-block;
  width:100%;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  text-align:center;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  padding:10px 14px;
  border-radius:5px;
  box-shadow:var(--shadow);
}

.error-link:hover{
  background:#2A3C63;
}

.page-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.page-nav a{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--rule);
  background:var(--paper-raised);
  padding:7px 13px;
  border-radius:5px;
  box-shadow:var(--shadow);
}

.page-nav a:hover{
  background:#EFEBE0;
}

.staff-panel{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:6px;
  box-shadow:var(--shadow);
  padding:20px;
  margin-bottom:16px;
}

.staff-panel h2{
  font-family:'Lora', serif;
  font-size:18px;
  font-weight:600;
  margin:0 0 16px;
  color:var(--ink);
}

.staff-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-bottom:14px;
}

.staff-field label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:6px;
}

.staff-field input{
  width:100%;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  border:1px solid var(--rule);
  background:var(--paper-raised);
  color:var(--ink);
  padding:8px 10px;
  border-radius:5px;
}

.staff-field input:focus{
  outline:none;
  box-shadow:inset 0 0 0 1.5px var(--focus);
}

.class-checks{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-bottom:14px;
}

.class-checks label{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink);
  cursor:pointer;
}

.staff-btn{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:12.5px;
  font-weight:500;
  border:1px solid var(--rule);
  background:var(--paper-raised);
  color:var(--ink);
  padding:7px 13px;
  border-radius:5px;
  cursor:pointer;
  box-shadow:var(--shadow);
}

.staff-btn:hover{background:#EFEBE0;}
.staff-btn.primary{background:var(--ink); color:#fff; border-color:var(--ink);}
.staff-btn.primary:hover{background:#2A3C63;}
.staff-btn.danger{color:var(--seal); border-color:rgba(122,31,43,0.35);}
.staff-btn.danger:hover{background:var(--seal-soft);}
.staff-btn.small{padding:5px 10px; font-size:11.5px;}

.staff-message{
  min-height:18px;
  margin:0 0 12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--seal);
}

.staff-message.ok{color:#4A7C59;}

.staff-hint{
  margin:-4px 0 12px;
  font-size:12.5px;
  color:var(--ink-soft);
}

.staff-table td.staff-empty{
  font-size:13px;
  color:var(--ink-soft);
  font-style:italic;
  padding:18px 12px;
}

.staff-table-wrap{
  overflow:auto;
}

.staff-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  min-width:760px;
}

.staff-table th,
.staff-table td{
  border-bottom:1px solid #ECE8DC;
  padding:14px 12px;
  text-align:left;
  vertical-align:middle;
}

.staff-table th:nth-child(1),
.staff-table td:nth-child(1){width:24%;}
.staff-table th:nth-child(2),
.staff-table td:nth-child(2){width:14%;}
.staff-table th:nth-child(3),
.staff-table td:nth-child(3){width:26%;}
.staff-table th:nth-child(3),
.staff-table td:nth-child(3){width:46%;}

.staff-table th{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  vertical-align:bottom;
  padding-bottom:10px;
}

.staff-table td.name{
  font-weight:500;
}

.staff-name-cell{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  min-height:34px;
}

.staff-name-text{
  min-width:0;
}

.staff-row-actions{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

.staff-text-btn{
  border:none;
  background:none;
  padding:0;
  font:inherit;
  font-size:11px;
  color:var(--seal);
  cursor:pointer;
  text-decoration:underline;
  white-space:nowrap;
}

.staff-text-btn:hover{
  color:var(--ink);
}

.staff-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid rgba(122,31,43,0.45);
  border-radius:5px;
  background:var(--seal-soft);
  color:var(--seal);
  cursor:pointer;
  box-shadow:var(--shadow);
  flex-shrink:0;
}

.staff-icon-btn:hover{
  background:#E8CACA;
  border-color:var(--seal);
}

.staff-icon-btn svg{
  width:14px;
  height:14px;
  display:block;
  pointer-events:none;
}

.staff-list-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
}

.staff-table td.classes .class-checks{
  margin-bottom:0;
}

.staff-table td.username{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
}

.staff-table td.classes{
  font-size:13px;
  line-height:1.4;
}

.staff-role-tag{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--seal);
  background:var(--seal-soft);
  border:1px solid rgba(122,31,43,0.25);
  padding:2px 7px;
  border-radius:3px;
  margin-left:0;
}

.staff-table td.actions .staff-inline-form{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  max-width:100%;
}

.staff-inline-form .password-field{
  flex:1 1 160px;
  max-width:220px;
  min-width:0;
}

.staff-inline-form input{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:12.5px;
  border:1px solid var(--rule);
  background:var(--paper-raised);
  color:var(--ink);
  padding:6px 9px;
  border-radius:5px;
  min-width:0;
  flex:1 1 160px;
  max-width:220px;
}

.staff-inline-form input:focus{
  outline:none;
  box-shadow:inset 0 0 0 1.5px var(--focus);
}

.staff-delete-dialog{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(27,44,79,0.35);
}

.staff-delete-dialog[hidden]{display:none;}

.staff-delete-dialog-panel{
  width:100%;
  max-width:340px;
  padding:22px 20px;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:6px;
  box-shadow:var(--shadow);
}

.staff-delete-dialog-panel h3{
  font-family:'Lora', serif;
  font-size:17px;
  font-weight:600;
  margin:0 0 12px;
  color:var(--ink);
}

.staff-delete-dialog-panel p{
  margin:0 0 14px;
  font-size:13px;
  color:var(--ink-soft);
}

.staff-delete-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}

@media (max-width:640px){
  body{
    padding:12px 8px 48px;
  }

  .page{
    max-width:100%;
  }

  header{
    flex-direction:column;
    text-align:center;
    align-items:center;
    padding:12px 14px;
  }

  .seal{
    width:56px;
    height:56px;
  }

  .titles h1{
    font-size:1.15rem;
  }

  .header-session{
    margin-left:0;
    white-space:normal;
  }

  .login-panel{
    padding:20px 16px;
  }

  .staff-panel{
    padding:16px;
  }

  .staff-form-grid{
    grid-template-columns:1fr;
  }

  .staff-table-wrap{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  .staff-table td.actions .staff-inline-form{
    flex-direction:column;
    align-items:stretch;
  }

  .staff-inline-form .password-field,
  .staff-inline-form input{
    max-width:none;
    flex:1 1 auto;
  }

  .staff-list-footer .staff-btn{
    width:100%;
  }
}

@media print{
  .header-session{
    display:none !important;
  }
}