:root {

  color-scheme: dark;

  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background:

    radial-gradient(circle at top, rgba(90, 138, 255, 0.22), transparent 35%),

    linear-gradient(135deg, #09111f, #11192d 55%, #0b1220);

  color: #edf2ff;

}



* {

  box-sizing: border-box;

}



body {

  margin: 0;

  min-height: 100vh;

}



button,

input,

textarea {

  font: inherit;

}



[hidden] {

  display: none !important;

}



.page-shell {

  min-height: 100vh;

  padding: 2rem;

}



.login-layout,

.app-layout {

  min-height: calc(100vh - 4rem);

  display: grid;

  gap: 2rem;

}



.login-layout {

  grid-template-columns: 1.1fr 0.9fr;

  align-items: center;

}



.hero-panel,

.panel,

.content-card,

.module-button {

  border: 1px solid rgba(167, 188, 255, 0.16);

  background: rgba(8, 15, 28, 0.72);

  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(14px);

}



.hero-panel,

.panel,

.content-card {

  border-radius: 28px;

}



.hero-panel {

  padding: 3rem;

}



.eyebrow {

  margin: 0 0 1rem;

  color: #8fb1ff;

  text-transform: uppercase;

  letter-spacing: 0.24em;

  font-size: 0.82rem;

}



h1,

h2,

h3,

p {

  margin-top: 0;

}



h1 {

  font-size: clamp(2.6rem, 6vw, 5rem);

  line-height: 0.96;

  max-width: 12ch;

}



.lead,

.muted,

.feedback,

.panel-subtitle {

  color: #afbbd6;

  line-height: 1.6;

}



.login-panel {

  padding: 2rem;

}



.login-form {

  display: grid;

  gap: 1rem;

  margin-top: 1.5rem;

}



label {

  display: grid;

  gap: 0.45rem;

  font-size: 0.95rem;

  color: #dae3ff;

}



input,

button {

  border-radius: 14px;

  border: 1px solid rgba(167, 188, 255, 0.18);

}



input,

textarea {

  background: rgba(16, 23, 41, 0.9);

  color: #edf2ff;

  padding: 0.95rem 1rem;

}



textarea {

  min-height: 110px;

  resize: vertical;

}



button {

  padding: 1rem 1.1rem;

  background: linear-gradient(135deg, #7aa2ff, #4d6cff);

  color: #08101d;

  font-weight: 700;

  cursor: pointer;

}



.secondary-button {

  background: transparent;

  color: #edf2ff;

}



.feedback {

  min-height: 1.5rem;

  margin-top: 1rem;

}



.feedback[data-tone="error"] {

  color: #ff9393;

}



.feedback[data-tone="success"] {

  color: #99f0bb;

}



.app-layout {

  grid-template-columns: 280px 1fr;

  align-items: stretch;

}



.sidebar {

  padding: 1.5rem;

  display: grid;

  gap: 1rem;

  position: sticky;

  top: 1rem;

  align-self: start;

  height: calc(100vh - 2rem);

  overflow: auto;

  transition: transform 0.24s ease, opacity 0.24s ease;

}



.brand-block {

  padding: 1rem 0 1.25rem;

  border-bottom: 1px solid rgba(167, 188, 255, 0.16);

  display: grid;

  gap: 0.35rem;

}



.session-badge {

  color: #8fb1ff;

  font-size: 0.85rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

}



.session-user {

  font-size: 1.15rem;

  font-weight: 700;

}



.module-nav {

  display: grid;

  gap: 0.75rem;

}

.sidebar-toggle-button {

  align-self: start;

  justify-self: start;

  margin-top: 0.2rem;

  padding: 0.7rem 0.95rem;

  border-radius: 999px;

  background: rgba(16, 23, 41, 0.9);

  color: #edf2ff;

  border: 1px solid rgba(167, 188, 255, 0.18);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);

}



.module-button {

  display: grid;

  gap: 0.2rem;

  padding: 1rem 1.05rem;

  min-height: 62px;

  text-align: left;

  color: #edf2ff;

  border-radius: 18px;

  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;

}

.module-button:hover {

  transform: translateY(-1px);

  border-color: rgba(122, 162, 255, 0.35);

}



.module-button.active {

  border-color: rgba(122, 162, 255, 0.75);

  background: linear-gradient(135deg, rgba(122, 162, 255, 0.2), rgba(77, 108, 255, 0.18));

}



.module-button-label {

  color: #8fb1ff;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.72rem;

}



.module-button-title {

  font-size: 1rem;

  font-weight: 700;

}



.status-chip {

  display: inline-flex;

  align-items: center;

  margin-top: 1rem;

  padding: 0.4rem 0.75rem;

  border-radius: 999px;

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.04em;

}



.status-chip.success {

  background: rgba(104, 214, 154, 0.14);

  color: #99f0bb;

}



.status-chip.warning {

  background: rgba(255, 204, 102, 0.14);

  color: #ffd98c;

}



.card-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

  margin: 1.25rem 0;

}



.event-list {

  display: grid;

  gap: 0.75rem;

}



.event-item {

  padding: 0.9rem 1rem;

  border: 1px solid rgba(167, 188, 255, 0.12);

  border-radius: 18px;

  background: rgba(12, 18, 35, 0.6);

}



.sidebar-footer {

  margin-top: auto;

}



.workspace {

  display: grid;

  gap: 1.25rem;

}



.workspace-header {

  padding: 1rem 1.25rem;

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  justify-content: space-between;

  gap: 1rem;

}

.workspace-header-copy {

  min-width: 0;

  flex: 1 1 260px;

}



.workspace-title {

  margin-bottom: 0.25rem;

  font-size: clamp(1.55rem, 2.5vw, 2.2rem);

}



.workspace-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1.25rem;

}

.app-layout.sidebar-collapsed {

  grid-template-columns: 0 minmax(0, 1fr);

}

.app-layout.sidebar-collapsed .sidebar {

  transform: translateX(calc(-100% - 1.5rem));

  opacity: 0;

  pointer-events: none;

}



.content-card {

  padding: 1.25rem;

}



.span-two {

  grid-column: 1 / -1;

}



.feature-list {

  margin: 0;

  padding-left: 1.1rem;

  color: #d6def7;

  line-height: 1.8;

}



.integration-list {

  display: grid;

  gap: 0.85rem;

}



.integration-card {

  width: 100%;

  text-align: left;

  display: grid;

  gap: 0.45rem;

  padding: 1rem 1.05rem;

  border-radius: 20px;

  border: 1px solid rgba(167, 188, 255, 0.16);

  background: rgba(12, 18, 35, 0.6);

  color: #edf2ff;

}



.integration-card.active {

  border-color: rgba(122, 162, 255, 0.75);

  background: linear-gradient(135deg, rgba(122, 162, 255, 0.2), rgba(77, 108, 255, 0.18));

}



.integration-card-label {

  color: #8fb1ff;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.72rem;

}



.integration-card-description {

  color: #afbbd6;

  line-height: 1.5;

}



.integration-card-action {

  color: #dfe8ff;

  font-size: 0.9rem;

  font-weight: 700;

}



@media (max-width: 1160px) {

  .agenda-shell {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 960px) {

  .login-layout,

  .app-layout,

  .workspace-grid {

    grid-template-columns: 1fr;

  }



  .hero-panel,

  .login-panel,

  .panel,

  .content-card {

    border-radius: 22px;

  }



  .page-shell {

    padding: 1rem;

  }

}



.app-layout.sidebar-collapsed .workspace {

  grid-column: 1 / -1;

}

button:disabled {

  cursor: not-allowed;

  opacity: 0.56;

}



.workspace-feedback {

  min-height: 1.5rem;

  margin-top: 0.25rem;

  flex-basis: 100%;

}



.settings-form {

  display: grid;

  gap: 1rem;

  margin-top: 1rem;

}



.settings-split {

  display: grid;

  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);

  gap: 1rem;

  align-items: start;

}



.settings-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

  align-items: center;

}



.users-list-panel {

  display: grid;

  gap: 1rem;

  align-content: start;

}

.users-header-actions {

  justify-content: flex-start;

}



.users-list-header {

  display: flex;

  justify-content: space-between;

  gap: 1rem;

  align-items: flex-start;

}



.users-list {

  display: grid;

  gap: 0.9rem;

}



.user-card {

  border: 1px solid rgba(167, 188, 255, 0.16);

  border-radius: 20px;

  background: rgba(12, 18, 35, 0.66);

  padding: 1rem;

  display: grid;

  gap: 0.85rem;

}



.user-card.active {

  border-color: rgba(122, 162, 255, 0.75);

  background: linear-gradient(135deg, rgba(122, 162, 255, 0.2), rgba(77, 108, 255, 0.16));

}



.user-card-header {

  display: flex;

  justify-content: space-between;

  gap: 1rem;

  align-items: flex-start;

}



.user-card-name {

  margin: 0;

  font-weight: 700;

  color: #eef3ff;

}



.user-card-subtitle {

  margin: 0.2rem 0 0;

  color: #aeb9d8;

  font-size: 0.95rem;

}



.user-card-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem 1rem;

  color: #c9d3ee;

  font-size: 0.92rem;

}



.user-card-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

}



.settings-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;

}



.form-field {

  display: grid;

  gap: 0.45rem;

  color: #dae3ff;

  font-size: 0.95rem;

}



.form-field.wide {

  grid-column: 1 / -1;

}



.form-field input {

  width: 100%;

}



.primary-button {

  background: linear-gradient(135deg, #7aa2ff, #4d6cff);

  color: #08101d;

}




button:disabled {

  background: transparent;

  color: #93a5c8;

}



@media (max-width: 960px) {

  .settings-grid {

    grid-template-columns: 1fr;

  }

  .settings-split {

    grid-template-columns: 1fr;

  }

}







.agenda-toolbar {

  display: flex;

  justify-content: space-between;

  gap: 1rem;

  align-items: flex-start;

}

.agenda-toolbar-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.7rem;

  align-items: center;

  justify-content: flex-end;

}

.agenda-toolbar-pill {

  display: inline-flex;

  align-items: center;

  padding: 0.7rem 0.95rem;

  border-radius: 999px;

  border: 1px solid rgba(167, 188, 255, 0.16);

  color: #edf2ff;

  background: rgba(12, 18, 35, 0.6);

}

.agenda-shell {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

}

.agenda-main {

  display: grid;

  gap: 1rem;

}

.agenda-main-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 1rem;

}

.agenda-rail {

  display: grid;

  gap: 1rem;

}

.agenda-mini-month-card,

.agenda-rail-card,

.agenda-week-panel,

.agenda-composer {

  display: grid;

  gap: 0.85rem;

}

.agenda-week-label {

  color: #d6def7;

  text-transform: capitalize;

  letter-spacing: 0.08em;

}

.agenda-mini-month-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 0.75rem;

}

.agenda-mini-month-hint {

  color: #afbbd6;

  font-size: 0.85rem;

}

.agenda-mini-weekdays,

.agenda-mini-grid {

  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  gap: 0.35rem;

}

.agenda-mini-weekdays span {

  color: #8fb1ff;

  text-transform: uppercase;

  font-size: 0.65rem;

  text-align: center;

}

.agenda-mini-day {

  aspect-ratio: 1;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background: rgba(16, 23, 41, 0.75);

  color: #d6def7;

  font-size: 0.86rem;

}

.agenda-mini-day.outside {

  opacity: 0.35;

}

.agenda-mini-day.today {

  background: linear-gradient(135deg, #7aa2ff, #4d6cff);

  color: #08101d;

  font-weight: 700;

}

.agenda-status-line {

  display: grid;

  gap: 0.25rem;

}

.agenda-status-line strong {

  color: #edf2ff;

  font-size: 1rem;

}

.agenda-status-line span {

  color: #afbbd6;

  font-size: 0.85rem;

}

.agenda-hero {

  display: grid;

  gap: 1rem;

}



.agenda-metrics {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 0.75rem;

}



.agenda-metric {

  padding: 1rem;

  border-radius: 18px;

  border: 1px solid rgba(167, 188, 255, 0.12);

  background: rgba(12, 18, 35, 0.6);

  display: grid;

  gap: 0.35rem;

}



.agenda-metric span {

  color: #8fb1ff;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.72rem;

}



.agenda-metric strong {

  color: #edf2ff;

  font-size: 1rem;

  line-height: 1.35;

}



.agenda-month {

  margin: 0;

  color: #d6def7;

  text-transform: capitalize;

  letter-spacing: 0.08em;

}



.agenda-board {

  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  gap: 0.75rem;

}



.agenda-day-card {

  min-height: 260px;

  padding: 1rem;

  border-radius: 20px;

  border: 1px solid rgba(167, 188, 255, 0.12);

  background: rgba(12, 18, 35, 0.6);

  display: grid;

  gap: 0.8rem;

  align-content: start;

}



.agenda-day-card.today {

  border-color: rgba(122, 162, 255, 0.75);

  background: linear-gradient(135deg, rgba(122, 162, 255, 0.15), rgba(12, 18, 35, 0.72));

}



.agenda-day-card-header {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 0.5rem;

}



.agenda-day-label {

  color: #8fb1ff;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.72rem;

}



.agenda-day-card-header strong {

  color: #edf2ff;

  font-size: 1.45rem;

  line-height: 1;

}



.agenda-day-meta {

  color: #afbbd6;

  font-size: 0.9rem;

  text-transform: capitalize;

}



.agenda-day-events {

  display: grid;

  gap: 0.6rem;

}



.agenda-event-chip {

  display: grid;

  gap: 0.25rem;

  padding: 0.8rem 0.85rem;

  border-radius: 16px;

  border: 1px solid rgba(167, 188, 255, 0.12);

  background: rgba(16, 23, 41, 0.92);

}



.agenda-event-chip strong {

  font-size: 0.94rem;

  line-height: 1.35;

}



.agenda-event-time,

.agenda-more {

  color: #afbbd6;

  font-size: 0.84rem;

}



.agenda-more {

  margin: 0;

}

.app-layout {

  position: relative;

}

.sidebar {

  border-radius: 28px;

  border: 1px solid rgba(167, 188, 255, 0.16);

  background: rgba(8, 15, 28, 0.88);

  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.35);

}

.app-layout.sidebar-collapsed {

  grid-template-columns: 1fr;

  gap: 0;

}

.app-layout.sidebar-collapsed .sidebar {

  position: absolute;

  inset: 1rem auto 1rem 1rem;

  width: 280px;

  transform: translateX(calc(-115% - 1rem));

  opacity: 0;

  pointer-events: none;

}

.app-layout.sidebar-collapsed .workspace {

  grid-column: 1;

}

.workspace {

  min-width: 0;

}

.agenda-header-card {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 0.75rem;

  flex-wrap: wrap;

  padding: 1rem 1.25rem;

}

.agenda-header-copy {

  min-width: 0;

  flex: 1 1 260px;

}

.agenda-header-actions {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  align-items: center;

  gap: 0.5rem;

}

.agenda-view-switch {

  display: inline-flex;

  flex-wrap: wrap;

  gap: 0.35rem;

}

.agenda-header-card .primary-button,
.agenda-header-card .secondary-button {

  padding: 0.72rem 0.95rem;

  min-height: 42px;

}

.agenda-view-button.active {

  border-color: rgba(122, 162, 255, 0.75);

  background: linear-gradient(135deg, rgba(122, 162, 255, 0.2), rgba(77, 108, 255, 0.18));

  color: #edf2ff;

}

.agenda-shell {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

}

.agenda-main {

  display: grid;

  gap: 1rem;

  min-width: 0;

}

.agenda-main-header {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 1rem;

}

.agenda-main-label {

  margin: 0 0 0.3rem;

  color: #8fb1ff;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.72rem;

}

.agenda-month-grid {

  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  gap: 0.75rem;

}

.agenda-month-cell {

  min-height: 160px;

  padding: 0.85rem;

  border-radius: 20px;

  border: 1px solid rgba(167, 188, 255, 0.12);

  background: rgba(12, 18, 35, 0.6);

  display: grid;

  gap: 0.6rem;

  align-content: start;

}

.agenda-month-cell.today {

  border-color: rgba(122, 162, 255, 0.75);

  background: linear-gradient(135deg, rgba(122, 162, 255, 0.16), rgba(12, 18, 35, 0.72));

}

.agenda-month-cell.selected,
.agenda-week-column.selected,
.agenda-day-view.selected,
.agenda-year-day.selected {

  box-shadow: inset 0 0 0 1px rgba(122, 162, 255, 0.95), 0 0 0 1px rgba(122, 162, 255, 0.22);

}

.agenda-month-cell.selected {

  background: linear-gradient(135deg, rgba(122, 162, 255, 0.22), rgba(12, 18, 35, 0.78));

}

.agenda-week-column.selected,
.agenda-day-view.selected,
.agenda-year-day.selected {

  background: rgba(122, 162, 255, 0.12);

}

.agenda-month-cell.outside {

  opacity: 0.56;

}

.agenda-day-hitbox,
.agenda-week-header,
.agenda-year-header,
.agenda-day-hero {

  background: transparent;

  color: #edf2ff;

  border: 0;

  padding: 0;

}

.agenda-day-hitbox {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 0.5rem;

}

.agenda-day-number {

  font-size: 1.15rem;

  font-weight: 700;

  line-height: 1;

}

.agenda-month-cell-events,
.agenda-week-column-events,
.agenda-day-events-stack {

  display: grid;

  gap: 0.5rem;

  align-content: start;

}

.agenda-event-chip-button {

  text-align: left;

  width: 100%;

  padding: 0.8rem 0.85rem;

  border-radius: 16px;

  border: 1px solid rgba(167, 188, 255, 0.12);

  background: rgba(16, 23, 41, 0.92);

  color: #edf2ff;

  transition: transform 0.18s ease, border-color 0.18s ease;

}

.agenda-event-chip-button:hover {

  transform: translateY(-1px);

  border-color: rgba(122, 162, 255, 0.35);

}

.agenda-event-chip-button strong {

  font-size: 0.94rem;

  line-height: 1.35;

}

.agenda-event-chip-button .agenda-event-time {

  color: #afbbd6;

  font-size: 0.84rem;

}

.agenda-week-grid {

  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  gap: 0.75rem;

}

.agenda-week-column {

  min-height: 360px;

  padding: 0.85rem;

  border-radius: 20px;

  border: 1px solid rgba(167, 188, 255, 0.12);

  background: rgba(12, 18, 35, 0.6);

  display: grid;

  gap: 0.7rem;

  align-content: start;

}

.agenda-week-column.today {

  border-color: rgba(122, 162, 255, 0.75);

}

.agenda-week-header {

  display: grid;

  gap: 0.35rem;

  justify-items: start;

}

.agenda-week-header span,
.agenda-year-header span {

  color: #8fb1ff;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.72rem;

}

.agenda-week-header strong {

  font-size: 1.7rem;

  line-height: 1;

}

.agenda-day-view {

  display: grid;

  gap: 1rem;

}

.agenda-day-hero {

  display: grid;

  gap: 0.35rem;

  justify-items: start;

}

.agenda-day-hero span {

  color: #8fb1ff;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.72rem;

}

.agenda-day-hero strong {

  font-size: clamp(1.4rem, 2vw, 2rem);

}

.agenda-day-timeline {

  display: grid;

  grid-template-columns: 84px minmax(0, 1fr);

  gap: 1rem;

}

.agenda-day-hours {

  display: grid;

  gap: 1.05rem;

  color: #8fb1ff;

  font-size: 0.75rem;

  padding-top: 0.2rem;

}

.agenda-day-hours span {

  position: relative;

}

.agenda-day-hours span::after {

  content: '';

  position: absolute;

  left: 3.4rem;

  right: -1rem;

  top: 50%;

  height: 1px;

  background: rgba(167, 188, 255, 0.14);

}

.agenda-year-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1rem;

}

.agenda-year-card {

  padding: 1rem;

  border-radius: 20px;

  border: 1px solid rgba(167, 188, 255, 0.12);

  background: rgba(12, 18, 35, 0.6);

  display: grid;

  gap: 0.85rem;

}

.agenda-year-header {

  display: grid;

  gap: 0.3rem;

  justify-items: start;

}

.agenda-year-header strong {

  font-size: 1.2rem;

}

.agenda-year-mini-grid {

  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  gap: 0.35rem;

}

.agenda-year-day {

  min-height: 32px;

  padding: 0;

  border-radius: 10px;

  background: rgba(16, 23, 41, 0.82);

  color: #d6def7;

  border: 1px solid rgba(167, 188, 255, 0.12);

}

.agenda-year-day.today {

  background: linear-gradient(135deg, #7aa2ff, #4d6cff);

  color: #08101d;

}

.agenda-year-day.has-events {

  border-color: rgba(122, 162, 255, 0.35);

}

.agenda-mini-day {

  aspect-ratio: 1;

  display: grid;

  place-items: center;

  gap: 0.25rem;

  border-radius: 12px;

  background: rgba(16, 23, 41, 0.82);

  color: #d6def7;

  font-size: 0.86rem;

  border: 1px solid rgba(167, 188, 255, 0.1);

}

.agenda-mini-day i {

  width: 0.4rem;

  height: 0.4rem;

  border-radius: 999px;

  background: #8fb1ff;

}

.agenda-mini-day.outside {

  opacity: 0.38;

}

.agenda-mini-day.today {

  background: linear-gradient(135deg, #7aa2ff, #4d6cff);

  color: #08101d;

  font-weight: 700;

}

.agenda-modal {

  position: fixed;

  inset: 0;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 1.5rem;

  z-index: 60;

}

.agenda-modal.is-open {

  display: flex;

}

.agenda-modal-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(3, 7, 15, 0.72);

  backdrop-filter: blur(10px);

}

.agenda-modal-panel {

  position: relative;

  z-index: 1;

  width: min(980px, 100%);

  max-height: calc(100vh - 3rem);

  overflow: auto;

}

.user-modal-panel {

  width: min(860px, 100%);

}

.user-modal-form {

  margin-top: 1rem;

}

.agenda-modal-header {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 1rem;

  margin-bottom: 1rem;

}

.agenda-day-picker-modal {

  width: min(760px, 100%);

}

.agenda-day-picker-toolbar {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.75rem;

  margin-bottom: 1rem;

}

.agenda-day-picker-toolbar strong {

  color: #edf2ff;

  text-transform: capitalize;

  letter-spacing: 0.06em;

}

.agenda-day-picker-grid {

  margin-top: 0.75rem;

}

.agenda-day-picker-day {

  aspect-ratio: 1;

  border-radius: 14px;

  border: 1px solid rgba(167, 188, 255, 0.12);

  background: rgba(16, 23, 41, 0.75);

  color: #d6def7;

  display: grid;

  place-items: center;

  font-weight: 600;

}

.agenda-day-picker-day.selected {

  border-color: rgba(122, 162, 255, 0.9);

  background: linear-gradient(135deg, rgba(122, 162, 255, 0.22), rgba(77, 108, 255, 0.2));

  color: #edf2ff;

}

.agenda-day-picker-day.today {

  box-shadow: inset 0 0 0 1px rgba(122, 162, 255, 0.75);

}

.agenda-day-picker-footer {

  display: flex;

  justify-content: flex-end;

  gap: 0.75rem;

  margin-top: 1rem;

}

@media (max-width: 1160px) {

  .agenda-shell,

  .agenda-year-grid {

    grid-template-columns: 1fr;

  }

  .agenda-week-grid,

  .agenda-month-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}

@media (max-width: 960px) {

  .app-layout,

  .workspace-grid,

  .agenda-shell,

  .agenda-week-grid,

  .agenda-month-grid,

  .agenda-year-grid,

  .agenda-day-timeline {

    grid-template-columns: 1fr;

  }

  .agenda-header-card,

  .agenda-main-header,

  .agenda-modal-header {

    flex-direction: column;

  }

  .hero-panel,

  .login-panel,

  .panel,

  .content-card {

    border-radius: 22px;

  }

  .page-shell {

    padding: 1rem;

  }

}