*{box-sizing:border-box}
html,body{height:100%}
body.app{
  margin:0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  background: var(--bg);
  color: var(--text);
}
body[data-admin]:not([data-admin-mobile]){
  overflow: hidden;
}
body[data-admin-mobile]{
  --settings-header-h: 52px;
}

a{color:inherit}
.muted{color:var(--muted)}
.error{color:#ffb0b0}

.topbar{padding: var(--topbar-pad-y) var(--topbar-pad-x) 0;}
.topnav{display:flex; gap:var(--nav-gap); align-items:center; flex-wrap:wrap;}
.spacer{flex:1}
.home-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--icon-btn-size);
  height:var(--icon-btn-size);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--outline);
  text-decoration:none;
  color: var(--text);
}
.home-link svg{
  width:var(--icon-size);
  height:var(--icon-size);
}

.pill{
  display:inline-flex;
  align-items:center;
  height: var(--pill-height);
  padding: 0 var(--pill-pad-x);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--outline);
  text-decoration:none;
  color: var(--text);
  cursor:pointer;
}
.pill.is-active{
  background: rgba(255,255,255,.10);
  border-color: var(--outline2);
}
.pill.small{height:var(--pill-height-sm); padding:0 var(--pill-pad-x-sm); font-size: var(--pill-font-sm);}
.pill.small.is-wide{min-width: var(--pill-wide-min); justify-content:center;}

.content{padding: var(--nav-to-card-gap) var(--base-content-pad) var(--base-content-pad);}
body[data-admin] .content{
  padding-top: calc(var(--settings-header-h, 56px) + 12px);
  padding-left: calc(var(--settings-side-w, 240px) + var(--settings-side-gap, 16px) + var(--settings-edge, 16px));
  padding-right: var(--settings-edge, 16px);
  min-height: 100vh;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: calc(var(--settings-header-h, 56px) + 12px);
}
body[data-admin][data-admin-mobile] .content{
  padding-left: 16px;
  padding-right: 16px;
  height: auto;
  overflow: visible;
}
.login-center{
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-center .panel.narrow{width: 100%;}
.update-banner{
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,170,0,.55);
  background: rgba(255,170,0,.12);
  color: #ffd9a3;
  font-size: 14px;
}
.landing-grid{
  grid-template-rows: auto;
}
.landing-hero{
  grid-column: span 7;
  display:flex;
  flex-direction:column;
  gap: var(--landing-gap);
}
.landing-hero h1{
  margin: 0;
  font-size: var(--landing-title-size);
}
.landing-eyebrow{
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--landing-eyebrow-size);
  color: var(--muted);
}
.landing-actions{
  display:flex;
  flex-wrap:wrap;
  gap: var(--landing-actions-gap);
}
.landing-card{
  grid-column: span 5;
  display:flex;
  flex-direction:column;
  gap: var(--landing-gap);
  text-decoration:none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.landing-card--wide{
  grid-column: span 7;
}
.landing-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.2);
}
.landing-card__title{
  font-size: var(--landing-card-title-size);
  font-weight: 650;
}
.landing-card__text{
  color: var(--muted);
  line-height: 1.5;
}
.landing-card__meta{
  margin-top: auto;
}

.grid{
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, 1fr);
}

.duties-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.duties-grid .panel{
  grid-column: span 1;
}

.flex-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.flex-grid .panel{
  grid-column: span 1;
}

.dashboard-grid{
  height: auto;
  grid-template-rows: auto auto;
  align-content: start;
  gap: var(--dashboard-gap);
  position: relative;
}
.dashboard-grid .schedule-panel{
  grid-column: 8 / span 5;
  grid-row: 2;
  align-self: start;
}

.schedule-panel{
  display:flex;
  flex-direction:column;
}
.schedule-panel h2{margin:0 0 12px 0;}
.schedule-panel .schedule-today{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.panel{
  grid-column: span 6;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--outline);
  border-radius: var(--radius-panel);
  padding: var(--panel-pad);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.dashboard-grid .panel{padding: var(--panel-pad-compact); min-height:0;}
.dashboard-grid .dashboard-top{
  padding: var(--dashboard-top-pad-y) var(--dashboard-top-pad-x);
  align-self: start;
  height: auto;
  min-height: var(--dashboard-top-min-h);
}
.dashboard-grid .dashboard-top-wide{
  grid-column: 8 / span 5;
  align-self: start;
  grid-row: 1;
}
.dashboard-grid .dashboard-left-panel{
  grid-column: 1 / span 7;
  grid-row: 1;
  align-self: start;
  position: absolute;
  z-index: 1;
}
.dashboard-grid .dashboard-info{
  display: flex;
  flex-direction: column;
}
.dashboard-info-rows{
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.dashboard-info-time,
.dashboard-info-date,
.dashboard-info-week{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.dashboard-info-time{
  flex: 4;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(72px, 11.5vw, 180px);
  line-height: 1;
  letter-spacing: 0.02em;
}
.dashboard-info-meta{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.dashboard-info-date{
  font-size: clamp(16px, 2.6vw, 24px);
  color: var(--muted);
  justify-content: flex-start;
  text-align: left;
}
.dashboard-info-week{
  font-size: clamp(16px, 2.6vw, 24px);
  color: var(--muted);
  justify-content: flex-start;
  text-align: left;
  margin-top: 0;
}
.dashboard-grid .dashboard-top-half{
  grid-column: span 3;
}
.dashboard-grid .pill.small{
  height: var(--dashboard-pill-height);
  padding: 0 var(--dashboard-pill-pad-x);
  font-size: var(--dashboard-pill-font);
}
.dashboard-grid h2{margin: 0 0 8px; font-size: var(--dashboard-h2-size);}
@media (max-width: 900px){
  .panel{grid-column: span 12;}
  .landing-hero{grid-column: span 12;}
  .landing-card{grid-column: span 12;}
  .dashboard-grid{
    grid-template-rows: auto;
    min-height: 0;
  }
  .flex-grid{grid-template-columns: 1fr;}
  .schedule-row{grid-template-columns: 1fr;}
  .schedule-time{font-size: 14px;}
  .appointment-row{grid-template-columns: 1fr;}
  .timetable-editor{grid-template-columns: 1fr;}
}

.sub{margin-top: 10px; color: var(--muted); font-size: var(--font-sub);}

.flex-card{
  display:flex;
  flex-direction:column;
  gap: 12px;
  min-height: 0;
}
.flex-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.flex-badge{
  display:inline-flex;
  align-items:center;
  height: var(--flex-badge-height);
  padding: 0 var(--flex-badge-pad-x);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 600;
  letter-spacing: .2px;
}
.flex-badge--gold{
  background: linear-gradient(180deg, rgba(204,160,64,.28), rgba(163,119,38,.18));
  color: #f2d08a;
  border-color: rgba(214,170,77,.55);
}
.flex-badge--silver{
  background: linear-gradient(180deg, rgba(170,180,198,.28), rgba(132,142,160,.18));
  color: #d6dde8;
  border-color: rgba(180,190,210,.55);
}
.flex-badge--bronze{
  background: linear-gradient(180deg, rgba(199,120,70,.28), rgba(147,82,44,.18));
  color: #f1c3a8;
  border-color: rgba(199,120,70,.55);
}
.flex-count{
  font-size: var(--flex-count-size);
  font-weight: 650;
  color: var(--muted);
}

.birthdays-panel--full{
  grid-column: span 12;
}

.birthdays-table-wrap{
  height: calc(100vh - var(--birthdays-height-offset));
}
.birthdays-table{
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: var(--birthdays-table-gap);
  margin-top: calc(-1 * (var(--nav-to-card-gap) - var(--base-content-pad)));
}
.birthdays-table td{
  padding: 0;
  vertical-align: top;
}
.birthdays-panel h2{
  margin: 0 0 6px;
  font-size: var(--birthdays-h2-size);
}
.birthdays-panel{
  display:flex;
  flex-direction:column;
  min-height: 0;
  padding: var(--birthdays-panel-pad);
  height: 100%;
  overflow: hidden;
}
.birthdays-panel .appt-list{
  margin-top: 4px;
  gap: 6px;
  min-height: 0;
  overflow: auto;
}
.birthdays-panel .appt-item{
  padding: var(--birthdays-appt-pad-y) var(--birthdays-appt-pad-x);
  gap: 6px;
  border-radius: var(--radius-sm);
}
.birthdays-panel .pill{
  height: var(--birthdays-pill-height);
  font-size: var(--birthdays-pill-font);
  padding: 0 var(--birthdays-pill-pad-x);
}
.birthdays-panel .appointment-pill{
  font-size: var(--birthdays-pill-font);
}
.birthdays-panel .appointment-date-pill{
  font-size: var(--birthdays-pill-font);
  padding: 0 var(--birthdays-pill-pad-x);
}
@media (max-width: 1100px){
  .birthdays-table-wrap{height: auto;}
  .birthdays-table{height: auto; border-spacing: 12px;}
  .birthdays-table tr{display: table-row;}
}
@media (max-width: 700px){
  .birthdays-table{display: block;}
  .birthdays-table tbody{display: block;}
  .birthdays-table tr{display: grid; grid-template-columns: 1fr; gap: 12px;}
  .birthdays-table td{display: block;}
}
.flex-name-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.flex-name-pill{
  background: rgba(255,255,255,.08);
}

.schedule-today{display:grid; gap: var(--schedule-gap); margin-top: 8px;}
.schedule-row{display:grid; grid-template-columns: var(--schedule-row-time-width) 1fr; gap: var(--schedule-row-gap); align-items:center;}
.schedule-time{font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600;}
.schedule-label{font-size: var(--schedule-label-size); text-align: center;}

.duty-list{display:grid; gap: var(--duty-list-gap); margin-top: 8px;}
.duty-list .appt-item{
  display:grid;
  grid-template-columns: var(--duty-label-width) 1fr;
  align-items:center;
  column-gap: var(--duty-list-column-gap);
}
.duty-list .appt-item .pill.small.is-wide{
  width: 100%;
  min-width: var(--duty-pill-wide-min);
  justify-content:center;
}
.duty-service-pill{
  font-size: var(--duty-service-size);
  font-weight: 600;
}
.duty-name-list{
  display:flex;
  align-items:center;
  gap: var(--duty-name-gap);
  flex-wrap:wrap;
}
.dashboard-grid .duty-name-list{
  flex-wrap: nowrap;
  gap: var(--duty-dashboard-name-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dashboard-grid .duty-list .pill.small{
  height: var(--birthdays-pill-height);
  min-height: var(--birthdays-pill-height);
  max-height: var(--birthdays-pill-height);
  padding: 0 var(--birthdays-pill-pad-x);
  font-size: var(--birthdays-pill-font);
  line-height: 1;
}
.dashboard-grid .pill.small.duty-name-pill{
  min-width: 0;
  width: var(--duty-dashboard-name-width);
  font-size: var(--birthdays-pill-font);
  padding: 0 var(--birthdays-pill-pad-x);
  height: var(--birthdays-pill-height);
  justify-content:center;
}
.dashboard-grid .duty-list .appt-item .pill.small.is-wide{
  width: var(--duty-dashboard-label-width);
  min-width: var(--duty-dashboard-label-width);
  height: var(--birthdays-pill-height);
  font-size: var(--birthdays-pill-font);
  padding: 0 var(--birthdays-pill-pad-x);
}
.dashboard-grid .duty-list .appt-item{
  grid-template-columns: var(--duty-dashboard-label-width) 1fr;
  column-gap: var(--duty-dashboard-column-gap);
}
.duty-row{display:grid; gap: var(--duty-row-gap);}
.duty-label{color: var(--muted); font-size: var(--duty-label-size); text-transform: uppercase; letter-spacing: .04em;}
.duty-value{font-size: var(--duty-value-size);}
.duty-divider{
  height: var(--duty-divider-height);
  margin: 0;
  font-size: var(--duty-divider-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.duty-subtitle{
  margin: 12px 0 8px;
  font-size: var(--duty-subtitle-size);
}
.duty-person-pill{
  display:inline-flex;
  align-items:center;
  gap: var(--duty-person-gap);
}
.duty-name-pill{
  width: auto;
  justify-content:center;
  font-size: var(--duty-name-size);
  padding: 0 12px;
  min-width: var(--duty-name-pill-min);
}
.duty-rotate-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: var(--duty-rotate-size);
  width: var(--duty-rotate-size);
  border-radius: 50%;
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor:pointer;
  font-size: var(--duty-rotate-font);
}
.duty-person-name{
  flex: 1 1 auto;
  text-align:center;
}
.duty-rotate-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: var(--outline2);
}
.duty-auth-modal{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(6, 10, 20, .6);
  z-index: 4000;
}
.duty-auth-modal.is-open{ display:flex; }
.duty-auth-modal__dialog{
  width: min(420px, 92vw);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.duty-auth-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 6px;
}
.duty-auth-modal__hint{
  margin-top: 8px;
  min-height: 18px;
}
@media (max-width: 900px){
  .duties-grid{
    grid-template-columns: 1fr;
  }
}

.appointments-list{display:grid; gap: var(--appointments-list-gap); margin-top: 8px;}
.appt-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap: var(--appointments-toolbar-gap);
  justify-content:space-between;
  margin-bottom: 10px;
}
.appt-toolbar__group{
  display:flex;
  flex-wrap:wrap;
  gap: var(--appointments-toolbar-group-gap);
}
.appointments-panel{
  display:flex;
  flex-direction:column;
}
.dashboard-grid .appointments-panel{
  grid-column: 1 / span 7;
  grid-row: 2;
  align-self: end;
  margin-top: 0;
  --appt-pill-w: var(--appointments-panel-pill-width);
  --appt-pill-gap: var(--appointments-panel-pill-gap);
  width: 100%;
  justify-self: stretch;
}
.appointments-panel .appointments-list{
  flex:1;
  align-content:start;
}
.appointments-page{
  display:flex;
  flex-direction:column;
  gap: 14px;
  height: calc(100vh - var(--birthdays-height-offset));
  overflow: hidden;
}
.calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.calendar-tabs{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.calendar-controls{
  display:flex;
  align-items:center;
  gap: 10px;
}
.calendar-toggle{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.05);
}
.calendar-toggle input{
  accent-color: #9fb6ff;
}
.calendar-label{
  flex:1;
  text-align:center;
  font-weight: 600;
  color: var(--muted);
}
.calendar-view{display:none;}
.calendar-view.is-active{
  display:flex;
  flex-direction:column;
  flex: 1;
  min-height: 0;
}
.calendar-month-head-row{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
.calendar-year-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.calendar-month-block{
  border: 1px solid var(--outline2);
  border-radius: 14px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(16,34,69,.6), rgba(16,34,69,.35));
  display:flex;
  flex-direction:column;
  min-height: 0;
}
.calendar-month-block h2{
  margin: 0 0 8px;
  font-size: 13px;
}
.calendar-mini-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  flex: 1;
  min-height: 0;
}
.calendar-mini-head{
  font-size: 10px;
  text-align:center;
  color: var(--muted);
}
.calendar-mini-day{
  font-size: 10px;
  text-align:center;
  padding: 2px 0;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
}
.calendar-mini-day.is-outside{opacity:.35;}
.calendar-mini-day.has-appt{background: rgba(130,160,255,.28);}
.calendar-mini-day.is-schoolfree{background: rgba(255,170,110,.28);}

.calendar-month-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
  height: 100%;
  align-content: stretch;
}
.calendar-month-head{
  font-size: 10px;
  text-align:center;
  color: var(--muted);
  line-height: 1.1;
}
.calendar-month-day{
  min-height: 0;
  height: 100%;
  border-radius: 12px;
  padding: 4px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
}
.calendar-month-day.is-outside{opacity:.35;}
.calendar-month-day.has-appt{border-color: rgba(130,160,255,.45);}
.calendar-month-day.is-schoolfree{border-color: rgba(255,170,110,.55);}
.calendar-day-num{
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 4px;
}
.calendar-day-list{
  display:flex;
  flex-direction:column;
  gap: 4px;
  font-size: 11px;
  min-height: 0;
  overflow: hidden;
}
.calendar-day-item{
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-tooltip{
  position: fixed;
  z-index: 50;
  width: max-content;
  max-width: calc(100vw - 24px);
  background: rgba(16,34,69,.96);
  border: 1px solid var(--outline2);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-size: 12px;
  color: var(--text);
  box-sizing: border-box;
}
.calendar-tooltip__title{
  font-weight: 650;
  margin-bottom: 6px;
  color: var(--muted);
}
.calendar-tooltip__row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items:center;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  white-space: nowrap;
}
.calendar-tooltip__label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-tooltip__time{
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.calendar-tooltip__row.is-grade{
  color: var(--appointments-grade-color);
  font-weight: 600;
}
.calendar-tooltip__item{
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-tooltip__item.is-grade{
  color: var(--appointments-grade-color);
  font-weight: 600;
}

.calendar-week-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.calendar-week-col{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255,255,255,.04);
}
.calendar-week-head{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.calendar-week-list{
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-size: 12px;
}
.calendar-week-item{
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-day-view{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.calendar-day-row{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--dashboard-schedule-item-gap);
  align-items:center;
}
.appointments-page .appointments-list{
  display: grid;
  gap: var(--dashboard-schedule-gap);
  margin: 0;
}
.appointments-page .appt-item{
  display:grid;
  grid-template-columns: 16ch 1fr 16ch 16ch;
  align-items:center;
  gap: var(--dashboard-schedule-item-gap);
}
.appointments-page .appt-item .pill.small{
  width: 16ch;
  min-width: 16ch;
  max-width: 16ch;
  height: var(--birthdays-pill-height);
  justify-content:center;
  justify-self: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appointments-page .appointment-pill{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--birthdays-pill-height);
  padding: 0 var(--birthdays-pill-pad-x);
  white-space: nowrap;
  text-align: center;
  line-height: 1.15;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appointments-page .appointment-date-pill{
  width: 16ch;
  min-width: 16ch;
  max-width: 16ch;
  height: var(--birthdays-pill-height);
  padding: 0 var(--birthdays-pill-pad-x);
  font-size: var(--birthdays-pill-font);
  line-height: 1.15;
  text-align: center;
  justify-content:center;
  justify-self: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appointments-page .appointment-weekday-pill{
  width: 16ch;
  min-width: 16ch;
  max-width: 16ch;
  height: var(--birthdays-pill-height);
  padding: 0 var(--birthdays-pill-pad-x);
  font-size: var(--birthdays-pill-font);
  line-height: 1.15;
  text-align: center;
  justify-content:center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-grid .appointments-panel .appointments-list{
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  gap: var(--dashboard-schedule-gap);
  margin-top: var(--dashboard-appt-list-margin-top);
}
.dashboard-grid .appointments-panel .appt-item{
  display:grid;
  grid-template-columns: 1fr var(--dashboard-appt-side-width);
  align-items:center;
  gap: var(--dashboard-schedule-item-gap);
}
.dashboard-grid .appointments-panel .appt-item.has-subject{
  grid-template-columns: max-content 1fr var(--dashboard-appt-side-width);
}
.dashboard-grid .appointments-panel .appt-item.has-birthday{
  grid-template-columns: max-content 1fr var(--dashboard-appt-side-width);
}
.dashboard-grid .appointments-panel .appt-item.has-subject.has-birthday{
  grid-template-columns: max-content max-content 1fr var(--dashboard-appt-side-width);
}
.dashboard-grid .appointments-panel .appt-item.has-other.is-classwork.has-subject{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--dashboard-appt-side-width);
}
.dashboard-grid .appointments-panel .appt-item.has-other.has-birthday:not(.has-subject){
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--dashboard-appt-side-width);
}
.dashboard-grid .appointments-panel .appt-item.has-other.has-subject.has-birthday{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) var(--dashboard-appt-side-width);
}
.dashboard-grid .appointments-panel .appointment-subject-pill{
  width: auto;
  min-width: 10ch;
  max-width: 16ch;
  height: var(--dashboard-appointment-pill-height);
  padding: 0 var(--birthdays-pill-pad-x);
  font-size: var(--dashboard-appointment-pill-font);
  line-height: 1.15;
  text-align: center;
  justify-content:center;
  justify-self: stretch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-grid .appointments-panel .appt-item.is-classwork .appointment-subject-pill{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: var(--appointments-classwork-bg);
  color: var(--appointments-classwork-text);
}
.dashboard-grid .appointments-panel .appointment-birthday-pill{
  width: auto;
  min-width: 10ch;
  max-width: 16ch;
  height: var(--dashboard-appointment-pill-height);
  padding: 0 var(--birthdays-pill-pad-x);
  font-size: var(--dashboard-appointment-pill-font);
  line-height: 1.15;
  text-align: center;
  justify-content:center;
  justify-self: stretch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--appointments-birthday-bg);
  color: var(--appointments-birthday-text);
}
.dashboard-grid .appointments-panel .appt-item.has-other .appointment-subject-pill,
.dashboard-grid .appointments-panel .appt-item.has-other .appointment-birthday-pill{
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.dashboard-grid .appointments-panel .appointment-pill{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--dashboard-appointment-pill-height);
  padding: 0 var(--birthdays-pill-pad-x);
  white-space: nowrap;
  text-align: center;
  line-height: 1.15;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-grid .appointments-panel .appointment-pill .appt-grade{
  color: var(--appointments-grade-color);
  font-weight: 600;
}
.dashboard-grid .appointments-panel .appointment-pill .appt-extra{
  color: var(--muted);
}
.dashboard-grid .appointments-panel .appt-link{
  text-decoration: none;
  color: inherit;
}
.dashboard-grid .appointments-panel .appointment-pill.is-long{
  font-size: var(--birthdays-pill-font);
}
.dashboard-grid .appointments-panel .appointment-pill.is-very-long{
  font-size: var(--birthdays-pill-font);
}
.dashboard-grid .appointments-panel .appointment-date-pill{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--birthdays-pill-height);
  padding: 0 var(--birthdays-pill-pad-x);
  font-size: var(--birthdays-pill-font);
  line-height: 1.15;
  text-align: center;
  justify-content:center;
  justify-self: stretch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-grid .appointments-panel .appointment-weekday-pill{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--dashboard-appointment-pill-height);
  padding: 0 var(--birthdays-pill-pad-x);
  font-size: var(--dashboard-appointment-pill-font);
  line-height: 1.15;
  text-align: center;
  justify-self: stretch;
  justify-content:center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appointment-pill{
  flex:1;
  justify-content:flex-start;
  min-width: 0;
}
.appointment-date-pill{
  white-space:nowrap;
  padding: 0 var(--appointment-date-pad-x);
}
.dashboard-grid .appt-list{gap: var(--dashboard-appt-list-gap); margin-top: var(--dashboard-appt-list-margin-top);}
.dashboard-grid .schedule-panel .appointment-pill{
  justify-content: center;
  text-align: center;
  height: var(--birthdays-pill-height);
  padding: 0 var(--birthdays-pill-pad-x);
  font-size: var(--birthdays-pill-font);
}
.dashboard-grid .schedule-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dashboard-schedule-gap);
}
.dashboard-grid .schedule-list .appt-item{
  display: grid;
  grid-template-columns: var(--dashboard-schedule-item-col1) var(--dashboard-schedule-item-col2) 1fr;
  gap: var(--dashboard-schedule-item-gap);
  align-items: center;
}
.dashboard-grid .schedule-list .appt-item .pill.small{
  min-width: 0;
  width: 100%;
  height: var(--birthdays-pill-height);
  padding: 0 var(--birthdays-pill-pad-x);
  font-size: var(--birthdays-pill-font);
}
.dashboard-grid .schedule-number-pill{
  font-weight: 650;
}
.appointment-row{display:grid; grid-template-columns: var(--appointment-row-date-width) 1fr; gap: var(--appointment-row-gap); align-items:center;}
.appointment-date{font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600;}
.appointment-title{font-size: var(--appointment-title-size);}
.narrow{max-width:520px}
.panel.narrow{margin: 0 auto;}

.field{display:block; margin: 10px 0;}
.field span{display:block; color:var(--muted); margin-bottom:6px}

.input{
  width:100%;
  height:var(--input-height);
  border-radius: var(--input-radius);
  border:1px solid var(--outline);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 0 var(--input-pad-x);
}
input.input[type="date"]{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.input.mini{height:var(--input-mini-height); border-radius: var(--input-mini-radius); padding: 0 var(--input-mini-pad-x);}
.timetable-editor{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--timetable-gap);
  margin-top: 12px;
}
.timetable-col{
  display:flex;
  flex-direction:column;
  gap: var(--timetable-col-gap);
}
.timetable-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--timetable-head-gap);
}
.timetable-head h3{margin:0; font-size: 16px;}
.timetable-list{
  display:grid;
  gap: var(--timetable-list-gap);
  padding: var(--timetable-list-pad);
  border-radius: var(--timetable-list-radius);
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.04);
}
.timetable-row{
  display:flex;
  align-items:center;
  gap: var(--timetable-row-gap);
  flex-wrap:wrap;
}
.timetable-row.is-error .timetable-time{
  border-color: rgba(255,120,120,.7);
}
.timetable-index{
  min-width: var(--timetable-index-min);
  justify-content:center;
  font-weight: 600;
}
.timetable-time{
  width: var(--timetable-time-width);
  text-align:center;
  font-variant-numeric: tabular-nums;
}
.timetable-remove{
  padding: 0 var(--input-mini-pad-x);
}
.timetable-actions{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap: var(--timetable-actions-gap);
}
.subject-editor{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 8px;
}
.subject-list{
  display:grid;
  gap: var(--subject-list-gap);
  padding: var(--subject-list-pad);
  border-radius: var(--subject-list-radius);
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.04);
}
.subject-row{
  display:flex;
  align-items:center;
  gap: var(--subject-row-gap);
}
.subject-input{
  flex: 1 1 auto;
  min-width: 160px;
}
.subject-actions{
  display:flex;
  align-items:center;
  gap: var(--subject-actions-gap);
  flex-wrap:wrap;
}

.btn{
  height:var(--btn-height);
  padding:0 var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border:1px solid var(--outline2);
  background: rgba(255,255,255,.10);
  color: var(--text);
  cursor:pointer;
}
body[data-admin] .btn,
body[data-admin] .pill{
  display: inline-flex;
  align-items: center;
  height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--radius-pill);
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: var(--btn-font);
}

body[data-admin-mobile] .settings-header__inner{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap: var(--admin-mobile-header-gap);
  padding: var(--admin-mobile-header-pad-y) var(--admin-mobile-header-pad-x);
  flex-wrap:wrap;
}
body[data-admin-mobile] .settings-actions{
  margin-left:auto;
  width:auto;
  justify-content:flex-end;
}
body[data-admin-mobile] .save-status{
  margin-left: 0;
  justify-content:flex-start;
}
body[data-admin-mobile] .settings-actions .pill{
  height: var(--admin-mobile-actions-pill-height);
  padding: 0 var(--admin-mobile-actions-pill-pad-x);
  font-size: var(--admin-mobile-actions-pill-font);
}
body[data-admin-mobile] .save-status{
  height: var(--admin-mobile-save-height);
  min-width: 0;
  padding: 0 var(--admin-mobile-save-pad-x);
  font-size: var(--admin-mobile-save-font);
}
body[data-admin-mobile] .settings-side{
  display: none;
}
body[data-admin-mobile] .panel{padding: var(--admin-mobile-panel-pad);}
body[data-admin-mobile] .split{grid-template-columns: 1fr;}
body[data-admin-mobile] .form-row{grid-template-columns: 1fr;}
body[data-admin-mobile] .row{grid-template-columns: 1fr;}
body[data-admin-mobile] .table.appt .row.appt{grid-template-columns: 1fr;}
body[data-admin-mobile] .schedule-grid{
  grid-template-columns: var(--admin-mobile-schedule-col1) repeat(5, minmax(var(--admin-mobile-schedule-min), 1fr));
  overflow-x:auto;
}
body[data-admin-mobile] .settings-mobile-intro{
  margin-bottom: var(--admin-mobile-intro-margin);
}

/* Admin sticky header */
.settings-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: linear-gradient(180deg, rgba(11,23,48,.92), rgba(11,23,48,.6));
  border-bottom: none;
  backdrop-filter: blur(8px);
}
.settings-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--admin-header-gap);
  padding: var(--admin-header-pad-y) var(--settings-edge, var(--admin-header-pad-x));
  padding-left: calc(var(--settings-side-w, 240px) + var(--settings-side-gap, 16px) + var(--settings-edge, 16px));
}
.settings-info{
  display:flex;
  align-items:center;
  min-width: 0;
  flex: 1;
  gap: var(--admin-header-gap);
}
.settings-header__nav{
  display:flex;
  align-items:center;
  gap: var(--admin-nav-gap);
  flex-wrap:wrap;
}
.settings-header__nav .pill{
  height: var(--admin-nav-pill-height);
  padding: 0 var(--admin-nav-pill-pad-x);
  font-size: var(--admin-nav-pill-font);
}
.settings-actions{
  display:flex;
  align-items:center;
  gap: var(--admin-actions-gap);
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-left: auto;
}
.settings-actions .pill{
  height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  font-size: var(--btn-font);
}
.settings-side{
  width: var(--settings-side-w);
  flex: 0 0 var(--settings-side-w);
  border: 1px solid var(--outline);
  border-radius: var(--admin-side-radius);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  padding: var(--admin-side-pad);
  position: fixed;
  top: calc(var(--settings-header-h, 56px) + var(--admin-side-top-gap));
  left: var(--settings-edge, 16px);
  height: calc(100vh - (var(--settings-header-h, 56px) + (var(--admin-side-top-gap) * 2)));
  overflow:auto;
  box-shadow: var(--admin-side-shadow);
  z-index: 240;
}
.settings-side h3{
  margin: 6px 8px 10px;
  font-size: 13px;
  opacity: .8;
  font-weight: 800;
  letter-spacing: .2px;
}
.settings-nav{
  display:flex;
  flex-direction:column;
  gap: var(--admin-nav-group-gap);
  padding: 0 4px 6px;
}
.settings-nav-group{
  border: 1px solid var(--outline);
  border-radius: var(--admin-nav-group-radius);
  background: rgba(255,255,255,.03);
  padding: var(--admin-nav-group-pad);
}
.settings-nav-group + .settings-nav-group{ margin-top: 6px; }
.settings-nav-group > button{
  width: 100%;
  text-align:left;
  height: var(--admin-nav-btn-height);
  padding: 0 var(--admin-nav-btn-pad-x);
  border-radius: var(--radius-pill);
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: var(--admin-nav-btn-font);
  cursor:pointer;
  font-weight: 700;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--admin-nav-group-gap);
}
.settings-nav-group > button:hover{ background: rgba(255,255,255,.10); }
.settings-nav-group.is-open > button{
  background: rgba(255,255,255,.12);
  border-color: var(--outline2);
}
.settings-subnav{
  display:none;
  flex-direction:column;
  gap: var(--admin-subnav-gap);
  margin-top: 6px;
  padding: 0 var(--admin-subnav-pad-x) 4px;
}
.settings-nav-group.is-open .settings-subnav{ display:flex; }
.settings-subnav button{
  width: 100%;
  text-align:left;
  height: var(--admin-subnav-btn-height);
  padding: 0 var(--admin-subnav-btn-pad-x);
  border-radius: var(--radius-pill);
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: var(--admin-subnav-btn-font);
  cursor:pointer;
  font-weight: 600;
}
.settings-subnav button:hover{ background: rgba(255,255,255,.08); }
.settings-subnav button.is-active{
  background: rgba(255,255,255,.12);
  border-color: var(--outline2);
}
.settings-main{
  border: 1px solid var(--outline);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  padding: var(--admin-main-pad);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.settings-panel{ display:none; }
.settings-panel.is-active{ display:block; }
.settings-panel > h2:first-child{
  margin-top: 4px;
}
.settings-layout-modern .settings-panel{
  display:block;
}
.settings-layout-modern .settings-panel.is-active{
  display:block;
}
.settings-group{
  border: 1px solid var(--outline);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.05));
  padding: var(--admin-group-pad);
  margin-bottom: var(--admin-group-gap);
}
.settings-group:last-child{ margin-bottom: 0; }
.settings-group-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}

/* Admin helpers for inline spacing */
.admin-mt-sm{margin-top: var(--admin-mt-sm);}
.admin-mt-md{margin-top: var(--admin-mt-md);}
.admin-mt-lg{margin-top: var(--admin-mt-lg);}
.admin-flex-end{display:flex; justify-content:flex-end;}
.admin-flex-center{display:flex; align-items:center;}
.admin-flex-end-center{display:flex; align-items:center; justify-content:flex-end;}
.admin-field-grow{flex:1;}
.admin-pill-label{cursor:pointer;}
.settings-group-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
}
.settings-group-sub{
  font-size: 12px;
  opacity: .7;
  margin-top: 4px;
}
.settings-group-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.settings-group-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--outline);
  font-size: 11px;
  font-weight: 700;
  opacity:.85;
  background: rgba(255,255,255,.06);
}
.settings-group-chip{
  display:inline-flex;
  align-items:center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--outline);
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.04);
}
.settings-group-panels{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.muted.inf-hide-hint{ display:none !important; }
@media (max-width: 920px){
  .settings-side{
    width:auto;
    flex:0 0 auto;
    height:auto;
    position:relative;
    top:auto;
    left:auto;
  }
  .settings-main{ padding: 10px; }
  .settings-nav{
    gap:6px;
  }
  .settings-group{
    padding: 12px;
  }
  .settings-group-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .settings-group-meta{
    justify-content:flex-start;
  }
}
.user-pill-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.pill-input{
  height:32px;
  border-radius: var(--radius-pill);
  padding: 0 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--outline);
  color: var(--text);
  min-width: 130px;
}
.pill-input.user-birth{ min-width: 150px; }
.pill-readonly{
  background: rgba(255,255,255,.10);
  border-color: var(--outline2);
}
.user-initial[data-state="replaced"]{
  opacity: .75;
}
.user-init-create{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:8px;
  flex-wrap:wrap;
}
.user-init-pill{
  display:inline-flex;
  align-items:center;
}
.role-select{
  position:relative;
  display:inline-block;
}
.role-select__menu{
  position:absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-height: 260px;
  overflow:auto;
  background: linear-gradient(180deg, rgba(18,32,64,.98), rgba(12,24,48,.98));
  border: 1px solid var(--outline2);
  border-radius: 14px;
  padding: 8px;
  display:none;
  z-index: 400;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.role-select.is-open .role-select__menu{ display:block; }
.role-select__item{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 6px 8px;
  border-radius: 10px;
  cursor:pointer;
  font-size: 13px;
}
.role-select__item:hover{
  background: rgba(255,255,255,.08);
}
.role-select__item input{ margin:0; }
.logout-form{margin:0}
.save-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height:36px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border:1px solid var(--outline);
  background: rgba(255,255,255,.06);
  min-width: 260px;
  justify-content:center;
}
.save-status__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: rgba(255,255,255,.35);
}
.save-status[data-state="dirty"] .save-status__dot{ background: rgba(255,170,0,.8); }
.save-status[data-state="saving"] .save-status__dot{
  background: rgba(255,170,0,.9);
  animation: pulse 0.9s infinite ease-in-out;
}
.save-status[data-state="clean"] .save-status__dot{ background: rgba(60,255,160,.8); }
.save-status[data-state="error"] .save-status__dot{ background: rgba(255,80,80,.9); }

@keyframes pulse{
  0%{ transform: scale(1); opacity: .7;}
  50%{ transform: scale(1.35); opacity: 1;}
  100%{ transform: scale(1); opacity: .7;}
}

/* Two-column blocks inside a panel */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 900px){
  .split{grid-template-columns: 1fr;}
}
.subpanel{
  border: 1px solid var(--outline);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.03);
}
.subpanel h3{margin: 0 0 10px 0;}

.form-row{display:grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px;}
@media (max-width: 900px){
  .form-row{grid-template-columns: 1fr;}
}

/* Tables */
.table{display:grid; gap: 8px; margin-top: 10px;}
.row{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr .5fr;
  gap: 10px;
  align-items:center;
}
.row.head{
  color: var(--muted);
  font-size: 14px;
  padding: 0 6px;
}
.table.appt .row{
  grid-template-columns: 1.4fr 1fr auto;
}
.table.users .row.users{
  grid-template-columns: 2.4fr 1fr .4fr auto;
}
.row.head.users{
  font-size: 13px;
}
.user-tools{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
  margin: 6px 0 6px;
}
.user-alpha{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.user-alpha .pill{
  height:28px;
  padding: 0 10px;
  font-size: 12px;
}
.user-sort{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.user-sort .pill{
  height:28px;
  padding: 0 10px;
  font-size: 12px;
}

/* Schedule grid */
.schedule-grid{
  display:grid;
  grid-template-columns: 140px repeat(5, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 900px){
  .schedule-grid{grid-template-columns: 120px repeat(5, 1fr); overflow-x:auto;}
}
.cell{
  border: 1px solid var(--outline);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255,255,255,.03);
}
.cell.head{
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-weight: 600;
}
.cell.head.small{font-size: 13px;}
.schedule-grid:not(.public) .cell.head.small{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.schedule-grid.public .cell{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 52px;
}
.public-cell.is-now{
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset;
}

/* Appointment list (public) */
.appt-list{display:flex; flex-direction:column; gap: 10px; margin-top: 12px;}
.appt-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--outline);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
}
.dashboard-grid .appt-item{padding: var(--dashboard-item-pad); gap: 10px; border-radius: 14px;}
.appt-item .pill.small{
  min-width: 130px;
  justify-content:center;
}
.appt-main{display:flex; flex-direction:column; gap: 2px;}
.appt-title{font-size: 18px; font-weight: 650;}
.dashboard-grid .appt-title{font-size: 16px;}
.dashboard-grid .muted{font-size: 13px;}

.duties-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}
.dashboard-grid .duties-split{
  grid-template-columns: 1fr;
}
.duty-col .appt-item{
  padding: 8px;
}
.dashboard-grid .duty-col .appt-item{
  padding: var(--dashboard-item-pad);
}
@media (max-width: 900px){
  .duties-split{grid-template-columns: 1fr;}
}

/* Timer page */
.timer-page{
  display:grid;
  gap: var(--gap);
}
.timer-hero{
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr auto;
  align-items:center;
  position: relative;
}
.timer-hero__meta h1{
  margin: 0 0 6px;
  font-size: 26px;
}
.timer-hero__meta .muted{margin:0}
.timer-hero__actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.timer-hero__actions #btnHome{display:none;}
.timer-display{
  grid-column: 1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  padding: 6px 0 0;
}
.timer-title{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-align:center;
}
.timer-time{
  font-size: clamp(72px, 12vw, 140px);
  font-weight: 800;
  letter-spacing: 2px;
}
.timer-controls{
  grid-column: 1 / -1;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap:wrap;
}
.timer-hero.is-fullscreen{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width: 100%;
  height: 100%;
  padding: 40px;
}
.timer-hero.is-fullscreen .timer-hero__meta{display:none;}
.timer-hero.is-fullscreen .timer-hero__actions{
  position:absolute;
  top: 24px;
  right: 24px;
  justify-content:flex-end;
}
.timer-hero.is-fullscreen .timer-hero__actions #btnFullscreen{display:none;}
.timer-hero.is-fullscreen .timer-hero__actions #btnHome{display:inline-flex;}
.timer-hero.is-fullscreen .timer-display{
  flex:1;
  width:100%;
  justify-content:center;
}
.timer-hero.is-fullscreen .timer-title{
  font-size: clamp(26px, 5vw, 52px);
  margin-bottom: 8px;
}
.timer-hero.is-fullscreen .timer-time{
  font-size: clamp(110px, 18vw, 240px);
}
.timer-hero.is-fullscreen .timer-controls{
  position:absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}
.timer-cards{
  display:grid;
  gap: var(--gap);
}
.timer-card{
  display:grid;
  gap: 12px;
  align-content:start;
  min-height: 140px;
}
.timer-card h2{
  margin: 0;
  font-size: 16px;
}
.timer-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
}
.timer-grid .pill{
  justify-content:center;
}
.timer-grid .input{
  height:44px;
}
.timer-grid--custom{
  grid-template-columns: 0.8fr 0.8fr 1.2fr 1.2fr;
}
.timer-grid--custom .timer-input-title{
  grid-column: 1 / -1;
}
.timer-grid--presets{
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}
.timer-grid--presets .timer-input-title{
  grid-column: 1 / -1;
}
.timer-grid--custom .timer-input-min,
.timer-grid--custom .timer-input-sec{
  text-align: center;
}
.timer-grid__spacer{
  border: 1px dashed transparent;
}
@media (max-width: 900px){
  .timer-hero{
    grid-template-columns: 1fr;
    align-items:start;
  }
  .timer-hero__actions{
    justify-content:flex-start;
  }
  .timer-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .timer-grid--custom{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .timer-grid--presets{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .timer-grid--custom .timer-input-title{
    grid-column: 1 / -1;
  }
  .timer-grid--presets .timer-input-title{
    grid-column: 1 / -1;
  }
  .timer-grid__spacer{display:none}
}

/* Import preview mini-table */
.mini-table{display:grid; gap: 6px; margin-top: 10px;}
.mini-row{display:grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.mini-row.head{color: var(--muted); font-size: 13px;}