:root {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  color: #19253a;
  background: #f3f5fa;
  font-synthesis: none;
  --ink: #19253a;
  --muted: #596881;
  --brand: #364fcd;
  --line: #dce3ed;
  --nav: #142036;
  --white: #fff;
  --round: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 310px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #526cf2; outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.loader { margin: 3rem; }
.muted { color: var(--muted); line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.avatar { display: block; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: #f6f7fa; }
.mark { display: block; flex: 0 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: white; font-size: 25px; font-weight: 700; letter-spacing: -.045em; width: fit-content; }
.brand b { color: #a8b8ff; font-weight: 700; }
.brand .mark { border: 1px solid #ffffff26; border-radius: 11px; }
.button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 39px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--ink);
  background: transparent;
  font-weight: 650;
  font-size: .875rem;
}
.icon-button { width: 38px; padding: 0; color: #42516a; border-color: var(--line); background: #fff; flex: 0 0 auto; }
.icon-button:hover, .button.secondary:hover { background: #edf1f9; }
.button.primary { background: var(--brand); color: white; }
.button.primary:hover { background: #2940b5; }
.button.secondary { background: #fff; border-color: var(--line); }
.button.text { padding-inline: 3px; color: var(--brand); }
.button.text:hover { text-decoration: underline; }
.button.danger { color: #a32840; border-color: #efc8d1; }
.button.danger:hover { background: #fcecf0; }
.button.danger.solid { background: #a52842; color: white; }
button svg, .info-card svg, .notice svg { flex: 0 0 auto; }
.layout { display: grid; grid-template-columns: 208px minmax(0,1fr); min-height: 100dvh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 39px;
  padding: 29px 16px 18px;
  background: var(--nav);
  color: #c6d0e1;
}
.sidebar .brand { margin-inline: 6px; }
.sidebar nav { display: grid; gap: 7px; }
.nav-item, .user-button {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  color: inherit;
  background: transparent;
  text-align: left;
  font-size: .89rem;
  font-weight: 600;
}
.nav-item:hover, .user-button:hover { background: #253452; color: white; }
.nav-item.active { color: #eef2ff; background: #2b3c6c; box-shadow: inset 3px 0 #8197ff; }
.nav-item.active svg { color: #a8b8ff; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 14px; }
.user-button { justify-content: space-between; padding: 11px 7px 6px; border-top: 1px solid #ffffff20; border-radius: 0 0 9px 9px; }
.user-button .avatar { width: 34px; height: 34px; }
.user-button span { flex: 1; min-width: 0; }
.user-button strong, .user-button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-button strong { color: white; font-size: .82rem; }
.user-button small { font-size: .72rem; margin-top: 3px; }
.main { width: 100%; max-width: 1700px; margin-inline: auto; padding: 32px clamp(16px, 2.5vw, 44px); }
.main-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.main-head h1 { font-size: clamp(1.5rem, 2.45vw, 2.35rem); letter-spacing: -.045em; line-height: 1.14; }
.main-head p { color: var(--muted); margin-top: 7px; font-size: .93rem; }
.dashboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(188px, 226px); align-items: start; gap: 17px; }
.calendar-panel, .info-card {
  border: 1px solid var(--line);
  border-radius: var(--round);
  background: white;
  box-shadow: 0 2px 4px #29354d05;
}
.calendar-panel { padding: 17px; }
.month-bar { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 1px 15px; }
.month-bar h2 { font-size: clamp(1.02rem, 1.75vw, 1.52rem); letter-spacing: -.035em; }
.month-bar p { color: var(--muted); font-size: .76rem; line-height: 1.4; margin-top: 4px; }
.month-bar p span { padding-inline: 3px; }
.month-nav { display: flex; gap: 6px; }
.weekdays, .day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.weekdays { margin-bottom: 7px; padding-block: 7px; border-radius: 7px; background: #f2f5fa; }
.weekdays abbr { text-decoration: none; text-align: center; font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .075em; color: #596881; }
.day {
  position: relative;
  min-height: clamp(74px, 7.5vw, 110px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--tint, #f5f7fb) 53%, #dce4ef);
  border-radius: 8px;
  padding: 7px 6px 5px;
  color: var(--ink);
  text-align: left;
  background: var(--tint, #f5f7fb);
  transition: box-shadow .14s;
}
.day:hover { box-shadow: inset 0 0 0 1px #526cf2; }
.day.today { box-shadow: inset 0 0 0 1px #405bdd; border-color: #405bdd; }
.day.today .date-num { background: var(--brand); color: white; }
.day.outside { color: #68778d; background: #f5f7fb; }
.day.outside:hover { box-shadow: none; }
.day.warning { border-color: #d9a54b; }
.day.crowded { border-color: #d3606f; box-shadow: inset 0 0 0 1px #d3606f; }
.day-top { display: flex; justify-content: space-between; gap: 2px; align-items: center; }
.date-num { font-size: .84rem; font-weight: 750; line-height: 1; min-width: 20px; height: 20px; padding-inline: 2px; display: inline-grid; place-items: center; border-radius: 5px; font-variant-numeric: tabular-nums; }
.shift-tag, .request-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 24px;
  height: 22px;
  padding-inline: 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tint, white) 66%, #9ca9bb);
  color: #1e2c44;
  font-size: .71rem;
  font-weight: 750;
  line-height: 1;
}
.shift-D { background: #eef1f5; color: #576579; }
.day-requests { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.mini-request { display: inline-flex; align-items: center; border-radius: 20px; gap: 2px; background: #ffffffa8; padding: 1px 2px 1px 1px; }
.mini-request .avatar { width: clamp(15px, 1.7vw, 22px); height: clamp(15px, 1.7vw, 22px); }
.mini-request .request-badge { font-size: .56rem; min-width: 0; width: auto; height: 16px; border-radius: 10px; padding-inline: 3px; }
.overflow-count { font-size: .67rem; font-weight: 700; }
.code-AP { color: #173973; background: #d2eaff; }
.code-V { color: #532881; background: #eedffc; }
.code-C { color: #65410b; background: #ffebae; }
.code-O { color: #175747; background: #d4f1e7; }
.day-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 2px; }
.note-mark { display: flex; margin-left: auto; color: #354b87; }
.note-mark svg, .count svg { width: 13px; height: 13px; }
.count { display: inline-flex; align-items: center; white-space: nowrap; gap: 4px; border-radius: 5px; padding: 2px 5px; background: #ffe3a6; color: #704800; font-size: .62rem; font-weight: 750; }
.crowded .count { background: #fbd0d0; color: #932739; }
.rail { display: grid; gap: 13px; }
.info-card { padding: 15px; }
.info-card h2 { display: flex; align-items: center; gap: 8px; font-size: .92rem; margin-bottom: 13px; }
.info-card h2 svg { color: #5c6f98; }
.info-card h2 small { margin-left: auto; padding: 3px 7px; border-radius: 10px; color: #52617b; background: #f0f3f8; }
.legend { display: grid; gap: 9px; }
.legend > div { display: flex; align-items: center; gap: 9px; font-size: .77rem; }
.legend .shift-tag, .legend .request-badge { width: 28px; height: 24px; }
.legend strong, .legend small { display: block; }
.legend small { color: var(--muted); margin-top: 2px; font-size: .7rem; }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px 5px; }
.team > div { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.team .avatar { width: 33px; height: 33px; outline: 1px solid #e3e8f1; }
.team span { font-size: .61rem; color: var(--muted); text-align: center; line-height: 1.15; }
.calendar-footer { margin-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px 13px; }
.notice { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #ecd29f; border-radius: 9px; background: #fff6df; color: #724900; font-size: .78rem; line-height: 1.45; }
.notice.serious { border-color: #eec0c7; background: #fdf0f2; color: #8e243a; }
.auth { min-height: 100dvh; display: grid; place-items: center; padding: clamp(14px, 4vw, 44px); }
.auth-card { width: min(100%, 470px); padding: clamp(20px, 3.3vw, 38px); border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 18px 60px #23314d0d; }
.auth-card .brand { color: var(--ink); margin-bottom: 17px; }
.auth-card .brand b { color: var(--brand); }
.auth-card h1 { font-size: clamp(1.45rem, 3vw, 2.12rem); letter-spacing: -.045em; margin-bottom: 7px; }
.auth-card .muted, dialog .muted { font-size: .9rem; }
.stack { display: grid; gap: 14px; margin-top: 18px; }
.stack label { display: grid; gap: 6px; color: var(--ink); font-size: .85rem; font-weight: 650; }
.stack input:not([type=hidden]), .stack textarea, .stack select { width: 100%; min-width: 0; min-height: 40px; border: 1px solid #ccd5e5; border-radius: 8px; padding: 8px 10px; background: #fff; color: var(--ink); }
.stack textarea { resize: vertical; }
.profile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-block: 18px 7px; }
.profile { display: grid; align-content: start; justify-items: center; gap: 5px; min-height: 91px; padding: 8px 2px; background: #f8f9fc; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font-size: .69rem; line-height: 1.14; font-weight: 650; }
.profile .avatar { width: clamp(37px, 4vw, 53px); height: clamp(37px, 4vw, 53px); }
.profile:hover { border-color: var(--brand); background: #ecefff; }
dialog { width: min(480px, calc(100% - 24px)); max-height: calc(100dvh - 28px); overflow: auto; position: fixed; color: var(--ink); background: white; border: 1px solid #d3dbe9; border-radius: 17px; padding: 19px; box-shadow: 0 18px 70px #09182e4d; }
dialog::backdrop { background: #13203972; }
dialog.day-dialog, dialog.schedule-dialog { width: min(540px, calc(100% - 24px)); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.dialog-head h2 { font-size: 1.23rem; letter-spacing: -.025em; }
.dialog-head .icon-button { border: none; width: 34px; min-height: 34px; }
.onboarding .dialog-head .icon-button { display: none; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 12px; }
.confirm-person { display: flex; align-items: center; gap: 11px; }
.confirm-person .avatar { width: 52px; height: 52px; border: 1px solid var(--line); }
.form-error { margin-top: 10px; color: #9a243e; font-size: .8rem; }
.day-subtitle { color: var(--muted); font-size: .87rem; margin-bottom: 12px; }
.day-detail { display: grid; gap: 13px; }
.day-detail section { border-top: 1px solid var(--line); padding-top: 11px; }
.day-detail section h3 { font-size: .9rem; margin-bottom: 7px; }
.day-dialog .notice { margin-bottom: 11px; }
.request-list { display: grid; gap: 4px; list-style: none; padding: 0; margin: 0; }
.request-list li { display: flex; align-items: center; gap: 7px; min-height: 33px; font-size: .82rem; }
.request-list .avatar { width: 27px; height: 27px; }
.request-list small { color: var(--muted); }
.request-list .request-badge { margin-left: auto; }
.request-choices, .palette { border: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.request-choices label { display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 7px; padding: 7px 5px; cursor: pointer; font-size: .73rem; }
.request-choices label:has(input:checked) { background: #edf0ff; border-color: #798bf0; }
.request-choices input, .palette input { accent-color: var(--brand); }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; background: #f2f5fb; color: #354666; padding: 8px 10px; border-radius: 6px; font-size: .85rem; line-height: 1.45; }
.color-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 16px; }
.color-preview span { border-radius: 8px; display: grid; place-items: center; min-height: 48px; font-weight: 650; font-size: .82rem; }
.palette { margin-top: 14px; }
.palette label { display: flex; gap: 5px; align-items: center; border: 1px solid var(--line); padding: 5px; border-radius: 7px; cursor: pointer; }
.palette label:has(input:checked) { border-color: #697fed; }
.palette span { width: 100%; padding: 5px; background: var(--sample); font-size: .8rem; border-radius: 5px; }
.settings-list { display: grid; gap: 6px; }
.settings-list button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: #f9fafd; color: var(--ink); }
.settings-list button:hover { background: #edf0ff; }
.settings-list button span { flex: 1; }
.settings-list strong, .settings-list small { display: block; }
.settings-list small { margin-top: 3px; color: var(--muted); }
.schedule-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#toast { position: fixed; z-index: 5; inset: auto 16px 16px auto; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 9px; background: #172746; color: #fff; font-size: .85rem; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s; }
#toast.show { visibility: visible; opacity: 1; }
@media (max-width: 1240px) {
  .count-label { display: none; }
}
@media (max-width: 1050px) {
  .layout { grid-template-columns: 167px minmax(0,1fr); }
  .dashboard { grid-template-columns: minmax(0, 1fr); }
  .rail { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .day { min-height: 87px; }
}
@media (max-width: 740px) {
  .layout { display: block; }
  .sidebar { height: auto; z-index: 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 7px; padding: 9px 12px; }
  .sidebar .brand { margin: 0; font-size: 21px; gap: 6px; }
  .sidebar .mark { width: 32px; height: 32px; }
  .sidebar nav { display: flex; gap: 4px; margin-left: auto; }
  .nav-item { justify-content: center; width: 37px; min-height: 36px; padding: 5px; }
  .nav-item span, .user-button small, .user-button > svg { display: none; }
  .sidebar-bottom { margin: 0; }
  .user-button { border: none; border-radius: 7px; padding: 3px; min-height: 35px; gap: 5px; }
  .user-button .avatar { width: 31px; height: 31px; }
  .user-button strong { max-width: 100px; font-size: .74rem; }
  .main { padding: 19px 10px; }
  .main-head { margin-bottom: 13px; }
  .main-head p { font-size: .78rem; margin-top: 5px; }
  .main-head button { padding-inline: 8px; }
  .calendar-panel { padding: 8px; }
  .month-bar { padding: 2px 0 8px; }
  .month-bar p { font-size: .66rem; }
  .weekdays, .day-grid { gap: 3px; }
  .weekdays { margin-bottom: 4px; }
  .weekdays abbr { font-size: .61rem; }
  .day { min-height: 70px; gap: 2px; padding: 3px 2px; border-radius: 5px; }
  .date-num { font-size: .71rem; min-width: 15px; height: 16px; }
  .day .shift-tag { font-size: .61rem; min-width: 15px; height: 16px; padding-inline: 2px; }
  .mini-request { gap: 1px; }
  .mini-request .avatar { width: 14px; height: 14px; }
  .mini-request .request-badge { height: 12px; padding-inline: 2px; font-size: .48rem; }
  .day-requests { gap: 2px; }
  .count { padding: 1px 3px; gap: 2px; }
  .count svg, .note-mark svg { width: 10px; height: 10px; }
  .rail { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .info-card { padding: 10px; }
  .team-card { grid-column: 1 / -1; }
  .team { grid-template-columns: repeat(8, minmax(0,1fr)); }
  .team .avatar { width: 28px; height: 28px; }
  .team span { font-size: .58rem; }
}
@media (max-width: 380px) {
  .user-button span { display: none; }
  .main-head h1 { font-size: 1.27rem; }
  .main-head p { font-size: .72rem; }
  .day { min-height: 66px; }
  .day .overflow-count { font-size: .56rem; }
  .schedule-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}