:root{
  --bg:#0b1730;
  --panel:#102245;
  --panel2:#0e1d3c;
  --text:#eaf0ff;
  --muted:#b9c7ea;
  --outline:rgba(255,255,255,.10);
  --outline2:rgba(255,255,255,.16);
  --radius:22px;
  --pill:999px;
  --gap:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body.app{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
body[data-admin]:not([data-admin-mobile]){
  overflow: hidden;
}

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

.topbar{padding: 14px 16px 0;}
.topnav{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.spacer{flex:1}

.pill{
  display:inline-flex;
  align-items:center;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--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:32px; padding:0 12px; font-size: 13px;}
.pill.small.is-wide{min-width: 170px; justify-content:center;}

.content{padding: 16px;}
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;
}

.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;
}

.dashboard-grid{
  height: calc(100vh - 110px);
  grid-template-rows: minmax(120px, auto) minmax(0, 1fr);
  gap: 30px;
}

.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);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.dashboard-grid .panel{padding: 12px; min-height:0;}
.dashboard-grid .dashboard-top{
  padding: 10px 12px;
  align-self: stretch;
  height: auto;
  min-height: 120px;
}
.dashboard-grid .dashboard-top-half{
  grid-column: span 3;
}
.dashboard-clock-panel{
  display:flex;
  align-items:center;
  justify-content:center;
}
.dashboard-date-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  text-align:center;
}
.dashboard-date-panel .date-weekday{
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 600;
  color: var(--muted);
}
.dashboard-date-panel .date-full{
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 650;
}
.dashboard-date-panel .date-week{
  font-size: clamp(14px, 1.6vw, 20px);
  color: var(--muted);
}
.dashboard-grid .pill.small{
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.dashboard-grid h2{margin: 0 0 8px; font-size: 18px;}
@media (max-width: 900px){
  .panel{grid-column: span 12;}
  .dashboard-grid{
    grid-template-rows: auto;
    min-height: 0;
  }
  .schedule-row{grid-template-columns: 1fr;}
  .schedule-time{font-size: 14px;}
  .appointment-row{grid-template-columns: 1fr;}
  .timetable-editor{grid-template-columns: 1fr;}
}

.clock{font-size: 130px; font-weight: 700; letter-spacing: 1px; line-height: 1;}
.sub{margin-top: 10px; color: var(--muted); font-size: 26px;}
.dashboard-clock-panel .clock{
  font-size: clamp(48px, 6vw, 86px);
}

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

.duty-list{display:grid; gap: 10px; margin-top: 8px;}
.duty-list .appt-item{
  display:grid;
  grid-template-columns: 200px 1fr;
  align-items:center;
  column-gap: 26px;
}
.duty-list .appt-item .pill.small.is-wide{
  width: 100%;
  min-width: 200px;
  justify-content:center;
}
.duty-service-pill{
  font-size: 14px;
  font-weight: 600;
}
.duty-name-list{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
}
.duty-row{display:grid; gap: 6px;}
.duty-label{color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em;}
.duty-value{font-size: 20px;}
.duty-divider{
  height: 32px;
  margin: 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.duty-subtitle{
  margin: 12px 0 8px;
  font-size: 18px;
}
.duty-person-pill{
  display:inline-flex;
  align-items:center;
  gap:16px;
}
.duty-name-pill{
  width: auto;
  justify-content:center;
  font-size: 13px;
  padding: 0 12px;
  min-width: 120px;
}
.duty-rotate-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor:pointer;
  font-size: 14px;
}
.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: 10px; margin-top: 8px;}
.appt-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:space-between;
  margin-bottom: 10px;
}
.appt-toolbar__group{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.appointments-panel{
  display:flex;
  flex-direction:column;
}
.appointments-panel .appointments-list{
  flex:1;
  align-content:start;
}
.appointment-pill{
  flex:1;
  justify-content:flex-start;
  min-width: 0;
}
.appointment-date-pill{
  white-space:nowrap;
  padding: 0 16px;
}
.dashboard-grid .appt-list{gap: 6px; margin-top: 4px;}
.appointment-row{display:grid; grid-template-columns: 120px 1fr; gap: 12px; align-items:center;}
.appointment-date{font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600;}
.appointment-title{font-size: 18px;}
.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:44px;
  border-radius: 14px;
  border:1px solid var(--outline);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 0 12px;
}
.input.mini{height:38px; border-radius: 12px; padding: 0 10px;}
.timetable-editor{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.timetable-col{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.timetable-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.timetable-head h3{margin:0; font-size: 16px;}
.timetable-list{
  display:grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.04);
}
.timetable-row{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
}
.timetable-row.is-error .timetable-time{
  border-color: rgba(255,120,120,.7);
}
.timetable-index{
  min-width: 38px;
  justify-content:center;
  font-weight: 600;
}
.timetable-time{
  width: 92px;
  text-align:center;
  font-variant-numeric: tabular-nums;
}
.timetable-remove{
  padding: 0 10px;
}
.timetable-actions{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap: 12px;
}
.subject-editor{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 8px;
}
.subject-list{
  display:grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.04);
}
.subject-row{
  display:flex;
  align-items:center;
  gap: 8px;
}
.subject-input{
  flex: 1 1 auto;
  min-width: 160px;
}
.subject-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

.btn{
  height:44px;
  padding:0 18px;
  border-radius: 14px;
  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: 44px;
  padding: 0 18px;
  border-radius: var(--pill);
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 16px;
}

body[data-admin-mobile] .settings-header__inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 12px;
  padding-left: 16px;
}
body[data-admin-mobile] .settings-actions{
  margin-left:0;
  width:100%;
  justify-content:flex-start;
}
body[data-admin-mobile] .save-status{
  margin-left: 0;
  justify-content:flex-start;
}
body[data-admin-mobile] .settings-side{
  position: relative;
  width: auto;
  height: auto;
  left: auto;
  top: auto;
  margin-bottom: 12px;
}
body[data-admin-mobile] .panel{padding: 12px;}
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: 110px repeat(5, minmax(120px, 1fr));
  overflow-x:auto;
}
body[data-admin-mobile] .settings-mobile-intro{
  margin-bottom: 12px;
}

/* 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: 10px;
  padding: 14px var(--settings-edge, 16px) 0;
  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;
}
.settings-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.settings-actions .pill{
  height:44px;
  padding: 0 18px;
  font-size: 16px;
}
.settings-side{
  width: 240px;
  flex: 0 0 240px;
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  padding: 12px;
  position: fixed;
  top: calc(var(--settings-header-h, 56px) + 12px);
  left: var(--settings-edge, 16px);
  height: calc(100vh - (var(--settings-header-h, 56px) + 24px));
  overflow:auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  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:8px;
  padding: 0 4px 6px;
}
.settings-nav-group{
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  padding: 6px;
}
.settings-nav-group + .settings-nav-group{ margin-top: 6px; }
.settings-nav-group > button{
  width: 100%;
  text-align:left;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--pill);
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 12px;
  cursor:pointer;
  font-weight: 700;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.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:6px;
  margin-top: 6px;
  padding: 0 6px 4px;
}
.settings-nav-group.is-open .settings-subnav{ display:flex; }
.settings-subnav button{
  width: 100%;
  text-align:left;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--pill);
  border: 1px solid var(--outline);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 11px;
  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);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  padding: 14px;
  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);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.05));
  padding: 14px;
  margin-bottom: 16px;
}
.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;
}
.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(--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(--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(--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(--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.appt{
  grid-template-columns: 1fr 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: 6px; 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;
}
.duty-col .appt-item{
  padding: 8px;
}
@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-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-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 .input{
  height:44px;
}
.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__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;}