:root{
  --nav:#0d315d;
  --nav2:#174a87;
  --blue:#1776d2;
  --blue2:#0d5fb0;
  --bg:#eef5fb;
  --card:#ffffff;
  --text:#15263f;
  --muted:#5f6f86;
  --line:#d7e3ef;
  --ok:#117b58;
  --warn:#ba7700;
  --danger:#b33636;
  --shadow:0 16px 36px rgba(17,45,84,.09);
  --base-font:17px;
  --font-scale:1;
}

html[data-font-scale="normal"]{ --font-scale:1; }
html[data-font-scale="large"]{ --font-scale:1.10; }
html[data-font-scale="xlarge"]{ --font-scale:1.22; }

body{
  font-size:calc(var(--base-font) * var(--font-scale));
  line-height:1.55;
  background:
    radial-gradient(circle at top right, rgba(118,188,255,.18), transparent 18%),
    linear-gradient(180deg, #f6fbff 0%, #eef5fb 100%);
}

.app{grid-template-columns:300px 1fr}
.sidebar{
  padding:20px 14px;
  background:linear-gradient(180deg, #123663 0%, #0e2b50 100%);
}
.brand{
  padding:10px 10px 20px;
  margin-bottom:14px;
}
.brand-icon,.login-logo{
  width:54px;
  height:54px;
  border-radius:16px;
  font-size:1.2em;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.brand b{font-size:1.18em;letter-spacing:.02em}
.brand span{font-size:.82em;line-height:1.4;color:#d2e4ff;max-width:190px}
.side-section{font-size:.72em;color:#9db8df;padding:15px 12px 8px}
.nav{
  padding:14px 14px;
  border-radius:12px;
  margin:4px 0;
  gap:12px;
  font-size:1.02em;
  font-weight:700;
  letter-spacing:.01em;
}
.nav span{font-size:1em}
.nav:hover,.nav.active{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 8px 18px rgba(0,0,0,.13);
}

.topbar{
  min-height:82px;
  height:auto;
  padding:14px 26px;
  gap:18px;
  flex-wrap:wrap;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topbar-left b{font-size:1.18em}
.top-user{display:flex;align-items:center;gap:12px}
.top-user b{font-size:1.02em}
.top-user small{font-size:.84em;color:var(--muted)}
.ui-tools{
  display:flex;
  align-items:center;
  gap:8px;
  background:#f3f8fe;
  border:1px solid #d8e5f2;
  border-radius:999px;
  padding:6px 8px 6px 12px;
}
.ui-tools-label{font-size:.9em;color:var(--muted);font-weight:700}
.font-btn{
  min-width:42px;
  padding:8px 10px !important;
  border-radius:999px;
  font-weight:800;
}
.font-btn.active{
  background:var(--blue) !important;
  color:#fff !important;
  border-color:var(--blue) !important;
}

.content{padding:28px;max-width:1560px}
.page-head{margin-bottom:20px}
.page-head h1{font-size:1.9em;margin-bottom:6px}
.page-head p,.muted{font-size:1em;line-height:1.55}
.actions{gap:10px}

.card,.kpi,.report-card{
  border-radius:18px;
  border:1px solid rgba(215,227,239,.95);
  box-shadow:var(--shadow);
}
.card{padding:22px;margin-bottom:18px}
.card h3{font-size:1.18em;margin-bottom:16px}
.kpi{padding:20px}
.kpi span,.kpi small{font-size:.92em}
.kpi b{font-size:2.1em}
.kpi-grid,.report-grid{gap:16px}

.btn{
  padding:11px 15px;
  font-size:.98em;
  font-weight:700;
  border-radius:12px;
  background:#f7faff;
}
.btn.sm{padding:8px 12px;font-size:.9em}
.btn.primary{
  background:linear-gradient(180deg, #2385e1 0%, #166fc8 100%);
}
.btn.primary:hover{background:linear-gradient(180deg, #1e7bd3 0%, #1364b7 100%)}
.btn.danger{background:#fff0f0;border-color:#ffd7d7}

.badge{
  padding:5px 10px;
  font-size:.76em;
  letter-spacing:.03em;
}
.tag,.chip{font-size:.82em;padding:6px 10px;border-radius:999px}
.tag{background:#e8f2ff;color:#1059ad}

.table-scroll{
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(215,227,239,.85);
}
table{font-size:.95em}
th{
  padding:13px 12px;
  font-size:.93em;
  background:#edf5ff;
}
td{
  padding:12px 12px;
  line-height:1.45;
}
.schedule-table{min-width:1220px}
.schedule-table th,.schedule-table td{min-width:150px}
.schedule-table th:first-child,.schedule-table td:first-child{min-width:110px}
.sched{
  padding:9px 6px;
  border-radius:10px;
  font-size:.96em;
}
.sched small{font-size:.79em;margin-top:4px}
.empty,.notice,.success,.issue,.big-status,.dialog{font-size:.96em;line-height:1.55}
.issue{padding:12px 12px;border-radius:10px}
.big-status{padding:14px 16px;border-radius:14px}
.big-status span{font-size:.88em}

.toolbar{gap:12px;margin-bottom:14px}
.toolbar select,.toolbar input,select,input,textarea{
  min-height:46px;
  padding:10px 12px;
  font-size:.98em;
  border-radius:12px;
  background:#fff;
}
label{
  font-size:.94em;
  font-weight:700;
  color:#45556e;
  margin:10px 0;
}
label input,label select,label textarea{margin-top:6px}
textarea{min-height:110px}
select[multiple]{min-height:220px}
.form-grid,.class-grid,.student-grid,.journal-header,.identity{gap:12px}

.class-card{
  padding:16px;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}
.class-card span{font-size:.9em}

.student-row{
  padding:12px 14px;
  font-size:.96em;
  border-radius:12px;
}
.att-buttons{gap:6px}
.att-buttons button{
  padding:7px 10px;
  font-size:.84em;
  font-weight:800;
  border-radius:8px;
}

.journal-header>div{
  padding:13px 14px;
  border-radius:12px;
}
.journal-header span{font-size:.82em}
.journal-header b{font-size:.98em}

.report-card{padding:20px}
.report-card span{font-size:.88em}
.identity{font-size:.96em}
.signature{font-size:.98em;line-height:1.6}

.check-grid{gap:12px}
.check-grid>div{padding:16px;border-radius:12px}
.check-grid b{font-size:1.8em}
.check-grid span{font-size:.84em}

.availability-grid{gap:10px}
.avail-day>b{font-size:.98em}
.avail-slot{
  padding:9px 10px;
  border-radius:10px;
  font-size:.92em;
}
.avail-slot small{font-size:.78em}

.login-screen{
  background:
    radial-gradient(circle at top right, rgba(126,191,255,.33), transparent 22%),
    linear-gradient(135deg,#0f2d53,#2266b5);
}
.login-card{
  width:min(460px,100%);
  padding:32px;
  border-radius:22px;
}
.login-card h1{font-size:1.8em}
.login-card p{font-size:.98em;line-height:1.55}
.login-card small{font-size:.86em;line-height:1.5}
.login-card label{font-size:.95em}
.login-card .btn{margin-top:4px}

.modal-card{
  width:min(880px,100%);
  border-radius:18px;
}
.modal-head,.modal-foot{padding:18px 22px}
.modal-head h3{font-size:1.22em}
.modal-body,#modalBody{padding:8px 22px 18px}
.x{font-size:30px}

.toast{
  padding:13px 16px;
  border-radius:12px;
  font-size:.93em;
}

@media (max-width: 1250px){
  .app{grid-template-columns:92px 1fr}
  .brand div:last-child,.nav span,.side-section{display:none}
  .brand{justify-content:center}
  .nav{justify-content:center;font-size:1.25em;padding:15px 10px}
  .sidebar{padding:16px 10px}
}

@media (max-width: 860px){
  .content{padding:18px}
  .kpi-grid,.split,.class-grid,.form-grid.two,.form-grid.three,.student-grid,.journal-header,.report-grid,.identity{grid-template-columns:1fr}
  .availability-grid{grid-template-columns:1fr 1fr}
  .topbar{padding:14px 18px}
}

@media (max-width: 640px){
  .ui-tools{
    width:100%;
    justify-content:center;
    border-radius:16px;
    padding:10px;
  }
  .topbar-right{width:100%;justify-content:space-between}
  .top-user>div{display:none}
  .btn,.toolbar select,.toolbar input,select,input,textarea{font-size:16px}
}

@media print{
  .ui-tools{display:none!important}
}