:root {
  color-scheme: dark;
  font: 15px Inter, 'Segoe UI', system-ui, sans-serif;
  color: #f4f2ff;
  background: #17172a;
  --ink: #f4f2ff;
  --muted: #b8b5d0;
  --line: #aab0ef29;
  --panel: linear-gradient(140deg,#272741ed,#202039e0);
  --violet: #c0aaff;
  --green: #7ce7be;
  --red: #ff9ab0;
  --neutral: #d1cde8;
  --focus: #d1bbff;
  --shadow: 0 12px 36px #08081838;
}
* { box-sizing: border-box }
body {
  margin: 0;
  background: radial-gradient(ellipse at 82% 0%,#53348358,transparent 42rem),
    radial-gradient(ellipse at 32% 24%,#0f346064,transparent 42rem),#17172a;
}
button,input,select,textarea { font: inherit; color: inherit }
button,select { cursor: pointer }
button,a,input,select,textarea { -webkit-tap-highlight-color: transparent }
a { color: inherit }
.icon { display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: middle }
button,.button-link {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  min-height: 44px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: #333252; color: var(--ink); font-weight: 650; text-decoration: none;
  transition: background .16s,border-color .16s,box-shadow .16s,transform .16s;
}
button:hover,.button-link:hover { background: #414068; border-color: #aca0e9a6 }
button:active,.button-link:active { transform: scale(.97) }
button:disabled { opacity: .5; cursor: default }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px }
.primary {
  background: linear-gradient(115deg,#5945bb,#7542aa);
  border-color: #ac8cfaa3; color: white; box-shadow: 0 5px 18px #5933bb5e;
}
.primary:hover { background: linear-gradient(115deg,#674ec7,#864eb8); box-shadow: 0 6px 22px #7042c98c }
.layout { display: grid; grid-template-columns: 244px minmax(0,1fr); min-height: 100dvh }
aside {
  position: sticky; top: 0; align-self: start; height: 100dvh; overflow: auto; z-index: 2;
  padding: 28px 17px; border-inline-end: 1px solid var(--line);
  background: #17182ce3; backdrop-filter: blur(20px);
}
.brand {
  display: flex; align-items: center; gap: 12px; margin: 0 4px 35px;
  font-size: 19px; font-weight: 750; line-height: 1.22; letter-spacing: -.02em; text-decoration: none;
}
.brand strong { min-width: 0; overflow-wrap: anywhere }
.brand-icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 14px; background: linear-gradient(145deg,#8762e0,#563795);
  border: 1px solid #c5a5ff86; box-shadow: 0 7px 24px #5d38b078;
}
nav { display: grid; gap: 6px }
nav a {
  display: flex; align-items: center; gap: 11px; padding: 12px;
  border-radius: 12px; border: 1px solid transparent; text-decoration: none; font-weight: 630;
  color: var(--muted); transition: background .18s,color .18s,border-color .18s;
}
nav a:hover { background: #b6a5fe17; color: var(--ink) }
nav a[aria-current] {
  background: linear-gradient(110deg,#533483b5,#0f3460a3);
  border-color: #ae8ff57a; color: #fff; box-shadow: 0 5px 18px #15112861;
}
nav a[aria-current] .icon { color: #d0baff }
main { width: 100%; max-width: 1500px; margin: 0 auto; padding: 34px clamp(18px,3.5vw,54px) 44px }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px }
h1 { margin: 0; font-size: clamp(25px,3.6vw,43px); font-weight: 760; line-height: 1.12; letter-spacing: -.045em }
h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.025em }
.head-tools,.tools,.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.head-tools { justify-content: end; flex: none }
#connection {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
  background: #1b1c32b0; font-size: 12px;
}
#connection::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-inline-end: 7px; border-radius: 50%; background: var(--violet) }
.tools { margin-bottom: 16px }
.tools input[type=search] { min-width: 0; flex: 1 }
.tools .spacer { flex: 1 }
input,textarea,select,.control {
  background: #1b1c33; border: 1px solid var(--line); border-radius: 12px;
  min-height: 44px; max-width: 100%; min-width: 0; padding: 9px 12px;
}
input::placeholder { color: #b0abc9; opacity: 1 }
input[type=checkbox] { min-height: auto; accent-color: #ad8cff }
textarea { resize: vertical }
.control { position: relative; display: flex; align-items: center; padding: 0; color: var(--violet) }
.control > .icon { position: absolute; inset-inline-start: 12px; pointer-events: none }
.control > .icon:last-child { inset-inline-start: auto; inset-inline-end: 10px }
.control input,.control select { width: 100%; border: 0; background: transparent; padding-inline-start: 39px; color: var(--ink) }
.control select { appearance: none; padding-inline-end: 35px }
select option { background: #25243e }
.journal-toolbar {
  display: grid; grid-template-columns: minmax(135px,1fr) minmax(135px,.8fr) minmax(145px,1.6fr) auto;
  gap: 9px; margin-bottom: 16px; padding: 12px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(15px);
}
.journal-toolbar > button { white-space: nowrap }
.card,.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.card { padding: 17px; margin-bottom: 16px }
.stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 12px; margin: 0 0 16px }
.stat { min-width: 0; padding: 15px; overflow-wrap: anywhere }
.stat strong { display: block; font-size: 23px; margin-top: 5px; font-variant-numeric: tabular-nums }
.attendance-stats { grid-template-columns: repeat(3,minmax(0,1fr)) }
[data-value=p] { --status-color: var(--green); --status-fill: #16463e; --status-border: #55dbab67; --status-wash: #1b615744 }
[data-value=a] { --status-color: var(--red); --status-fill: #54283f; --status-border: #e9456080; --status-wash: #8b325744 }
[data-value=n] { --status-color: var(--neutral); --status-fill: #41405c; --status-border: #b6abc96b; --status-wash: #68638944 }
.attendance-stat {
  position: relative; overflow: hidden; min-height: 120px; padding: 16px 18px;
  background: linear-gradient(130deg,var(--status-wash),transparent 80%),var(--panel);
  color: var(--status-color);
}
.attendance-stat > span:first-child { font-size: 14px; font-weight: 650 }
.attendance-stat strong { margin-top: 9px; font-size: clamp(28px,4vw,45px); line-height: 1.05; color: var(--ink); animation: number-in .22s ease-out both }
.stat-icon {
  position: absolute; inset: auto 14px 14px auto; display: grid; place-items: center;
  width: 39px; height: 39px; border-radius: 12px; border: 1px solid var(--status-border); background: var(--status-fill);
}
.journal-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; background: #19192e }
.journal-switch button { min-height: 36px; padding: 5px 12px; border-color: transparent; background: transparent; color: var(--muted) }
.journal-switch button[aria-pressed=true] { background: #4b3879; color: var(--ink) }
.month-help { margin: 0 0 12px }
.month-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px }
.month-grid { border-spacing: 0; text-align: center; width: max-content; min-width: 100%; font-variant-numeric: tabular-nums }
.month-grid th,.month-grid td { border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.month-grid thead th { background: #303053; min-width: 43px; height: 34px; color: var(--muted); font-weight: 650 }
.month-grid thead th.current-day { background: #573e91; color: white }
.month-grid tr > th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; width: clamp(123px,36vw,220px); max-width: clamp(123px,36vw,220px); background: #252542; text-align: start; padding: 0 8px; box-shadow: 3px 0 8px #14142955 }
.month-grid tbody tr:last-child > * { border-bottom: 0 }
.month-person { justify-content: start; text-align: start; font-size: 13px; border: 0; background: transparent; padding: 3px 0; overflow-wrap: anywhere }
.month-mark { display: block; width: 42px; min-height: 44px; padding: 0; background: #1c1d33; border: 0; border-radius: 0; font-size: 18px }
.month-mark:focus-visible { outline-offset: -3px }
.month-mark[data-value=p],.month-mark[data-value=a] { background: var(--status-fill); color: var(--status-color) }
.month-mark:hover { filter: brightness(1.2) }
.payment-period { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--muted); font-size: 13px }
.payment-period .icon { width: 17px; height: 17px; color: var(--violet) }
.attendance-header { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 16px; margin-bottom: 12px }
.attendance-header h2 { display: flex; align-items: center; gap: 9px; margin: 0 }
.group-accent { width: 4px; height: 19px; border-radius: 5px; background: linear-gradient(#c09aff,#8765eb); box-shadow: 0 0 10px #ac82e773 }
.roster-card:nth-of-type(3n+2) .group-accent { background: linear-gradient(#7ccfff,#687ff8) }
.roster-card:nth-of-type(3n+3) .group-accent { background: linear-gradient(#fba2c3,#ab5cdb) }
.attendance-legend { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-inline-start: auto; color: var(--muted); font-size: 11px }
.legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap }
.legend-symbol { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--line); border-radius: 6px; font-weight: 700 }
.row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding: 8px 0; min-height: 58px }
.row:first-child { border-top: 0 }
.journal-row { padding: 6px 9px; margin: 5px 0; border: 1px solid #b3aff51c; border-radius: 13px; background: #17182d74 }
.journal-row:first-child { border-top: 1px solid #b3aff51c }
.journal-row:hover { background: #353451b0 }
.person { justify-content: start; text-align: start; padding: 0; border: 0; background: transparent; min-width: 0 }
.person:hover { background: transparent; color: #dacbff }
.person b,.row strong { overflow-wrap: anywhere }
.new-student-badge { flex: none; border-radius: 999px; background: #16463e; color: var(--green); border: 1px solid #55dbab67; font-size: 11px; padding: 3px 6px }
.person:has(.new-student-badge) { flex-wrap: wrap }
.avatar {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover;
  color: #fff; background: linear-gradient(145deg,#7256be,#414384); border: 1px solid #b1a0e37d; font-size: 12px;
}
.journal-row:nth-child(3n+2) .avatar { background: linear-gradient(145deg,#417eb4,#48488b) }
.journal-row:nth-child(3n+3) .avatar { background: linear-gradient(145deg,#a65f9a,#604b93) }
.mark { width: 40px; min-height: 40px; flex: none; padding: 0; border-radius: 50%; background: #262740; color: var(--muted); font-size: 17px }
.mark .icon { width: 17px; height: 17px }
.mark:hover { color: var(--ink); box-shadow: 0 0 12px #9e83ef45 }
:is(.mark[aria-pressed=true],.legend-symbol)[data-value] { background: var(--status-fill); border-color: var(--status-border); color: var(--status-color) }
.mark[aria-pressed=true] { animation: mark-in .17s ease-out }
:is(.mark,.legend-symbol)[data-payment=paid] { background: #16463e; border-color: #55dbab67; color: var(--green) }
.mark[data-payment=partial] { background: #513c28; border-color: #efb95578; color: #ffda88 }
.mark[data-payment=unpaid]:last-child { background: #3d3d58; color: var(--neutral) }
.payment-actions { border-inline-start: 1px solid var(--line); padding-inline-start: 8px; flex-wrap: nowrap }
.journal-row > .actions { flex-wrap: nowrap; gap: 6px }
.demo-bar { display: flex; justify-content: end; margin: -6px 0 12px }
.demo-bar .button-link { min-height: 32px; padding: 5px 10px; font-size: 12px; background: #23223a }
.sub,small,.empty { color: var(--muted) }
.sub { margin: 5px 0; white-space: pre-wrap; overflow-wrap: anywhere }
.empty { padding: 22px 8px; margin: 0 }
dialog {
  color: var(--ink); background: #272640; border: 1px solid #c2aeff58; border-radius: 21px;
  width: min(500px,calc(100% - 20px)); max-height: calc(100dvh - 20px); padding: 22px; box-shadow: 0 24px 70px #0a091bc4;
}
dialog::backdrop { background: #100d24a8; backdrop-filter: blur(5px) }
dialog label { display: grid; gap: 4px; margin-bottom: 10px }
dialog fieldset { border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; padding: 8px 12px }
dialog fieldset label { display: flex; align-items: center; gap: 6px; margin: 0 }
dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px }
.error { color: var(--red); white-space: pre-wrap }
.error:empty { display: none }
#toast { position: fixed; bottom: 18px; right: 18px; z-index: 3; max-width: calc(100% - 36px); background: #2d2750; border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; box-shadow: var(--shadow) }
.group-row { grid-template-columns: minmax(0,1fr) auto }
.group-row strong { font-size: 17px }
.group-row .actions { min-width: 0 }
.group-row .sub:empty { display: none }
.profile-heading h2 { margin: 0; overflow-wrap: anywhere }
.profile-photo-button { padding: 0; border: 0; border-radius: 16px; background: transparent }
.profile-photo-button .avatar { width: 76px; height: 76px; border-radius: 16px }
.photo-viewer { width: min(760px,calc(100% - 20px)); padding: 0 }
.photo-viewer-content { padding: clamp(10px,3vw,18px) }
.photo-viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px }
.photo-viewer-bar h2 { min-width: 0; margin: 0; overflow-wrap: anywhere }
.photo-viewer img { display: block; max-width: 100%; max-height: 75vh; max-height: 75dvh; width: auto; height: auto; object-fit: contain; margin: 0 auto; border-radius: 8px }
@media (max-width:650px) {
  .group-row { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 12px 0 }
  .group-row .actions { justify-content: start }
}
.app-credits { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 20px }
.app-credits p { margin: 4px 0 }
.file { display: none }
.export-tools { margin: 12px 0 }
.export-period { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px }
.export-period input { width: 100% }
.export-fields { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-top: 7px }
.export-fields summary { cursor: pointer; padding: 4px 0; font-weight: 650 }
.export-fields label { display: flex; align-items: center; gap: 8px; margin: 6px 0 }
@keyframes number-in { from { opacity: .45; transform: translateY(4px) } to { opacity: 1; transform: translateY(0) } }
@keyframes mark-in { from { transform: scale(.87) } to { transform: scale(1) } }
@media (max-width:1050px) {
  .journal-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)) }
}
@media (max-width:760px) {
  .layout { display: block }
  aside { height: auto; padding: 9px 10px; overflow: visible; border-inline-end: 0; border-bottom: 1px solid var(--line) }
  .brand { margin: 0 4px 7px; font-size: 17px }
  .brand-icon { width: 30px; height: 30px; border-radius: 9px }
  .brand-icon .icon,nav .icon { width: 16px; height: 16px }
  nav { display: flex; overflow-x: auto; scrollbar-width: thin; padding-bottom: 3px; gap: 4px }
  nav a { white-space: nowrap; padding: 8px 9px; font-size: 13px; gap: 6px }
  main { padding: 19px 12px 32px }
  header { margin-bottom: 13px }
  #connection { display: none }
  .attendance-header { align-items: start; flex-direction: column }
  .attendance-legend { margin-inline-start: 0 }
}
@media (max-width:480px) {
  .journal-toolbar { padding: 8px; gap: 7px }
  .journal-toolbar > button { font-size: 13px; padding-inline: 7px; white-space: normal }
  .journal-toolbar > button .icon { width: 16px }
  .attendance-stats { gap: 6px }
  .attendance-stat { padding: 9px; min-height: 83px; border-radius: 15px }
  .attendance-stat > span:first-child { font-size: 11px }
  .attendance-stat strong { margin-top: 5px }
  .stat-icon { inset: auto 7px 7px auto; width: 24px; height: 24px; border-radius: 8px }
  .stat-icon .icon { width: 15px; height: 15px }
  .card { padding: 10px }
  .journal-row { grid-template-columns: 1fr; gap: 1px; padding: 4px 8px 8px }
  .journal-row > .actions { justify-content: end }
  .payment-actions { padding-inline-start: 6px }
  .mark { width: 37px; min-height: 37px }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important }
}