:root {
  --rly-pro-bg: #050609;
  --rly-pro-panel: rgba(16, 18, 24, 0.72);
  --rly-pro-panel-strong: rgba(22, 24, 31, 0.88);
  --rly-pro-line: rgba(255, 255, 255, 0.085);
  --rly-pro-line-strong: rgba(255, 255, 255, 0.14);
  --rly-pro-text-soft: rgba(255, 255, 255, 0.54);
  --rly-pro-cyan: #86f0ff;
  --rly-pro-blue: #5aa8ff;
  --rly-pro-violet: #b99cff;
  --rly-pro-green: #89e6b6;
}

body {
  background-color: var(--rly-pro-bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 220px);
  background-size: 88px 88px, 88px 88px, 100% 100%;
}

body::before,
body::after {
  opacity: 0;
}

.rail {
  background: rgba(5, 6, 9, 0.82);
  border-right-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.025);
}

.rail-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  box-shadow: none;
}

.rail-btn:hover {
  background: rgba(255, 255, 255, 0.075);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.rail-btn.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.105);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.rail-btn.active::before {
  background: var(--rly-pro-cyan);
  box-shadow: 0 0 8px rgba(134, 240, 255, 0.28);
}

.rail .avatar {
  background: linear-gradient(135deg, #5568ff, #8a6cff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.page-eyebrow,
.cal-header-cell,
.phase-card .phase-label,
.phase-card .phase-meta,
.cal-stat,
.db-btn,
.cal-chip,
.cal-more,
.day-label,
.day-modal .subtitle,
.day-hero-kicker,
.day-hero-sub,
.day-item .meta {
  letter-spacing: 0.06em;
}

.page-eyebrow .d {
  background: var(--rly-pro-cyan);
  box-shadow: 0 0 8px rgba(134, 240, 255, 0.30);
}

.page-title-h1 {
  letter-spacing: -0.025em;
}

.tile,
.cal-nav,
.cal-view-switcher,
.cal-stat,
.phase-card,
.day-modal-box {
  background: var(--rly-pro-panel);
  box-shadow:
    inset 0 0 0 1px var(--rly-pro-line),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.20);
}

.cal-card .tile {
  background: rgba(11, 13, 18, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.105),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 34px rgba(0, 0, 0, 0.24);
}

.cal-nav-btn,
.db-btn,
.rly-select,
.day-item-action,
.modal-close {
  background: rgba(255, 255, 255, 0.052);
  box-shadow: inset 0 0 0 1px var(--rly-pro-line);
}

.cal-nav-btn:hover,
.db-btn:hover,
.day-item-action:hover,
.modal-close:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--rly-pro-line-strong);
}

.cal-nav-btn:focus-visible,
.rly-select:focus-visible,
.day-notes-textarea:focus-visible {
  outline-color: var(--rly-pro-cyan);
}

.view-btn.active {
  background: rgba(255, 255, 255, 0.105);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.cal-stat.accent .num,
.cal-day.today .cal-day-num,
.phase-card.phase-1 .phase-label {
  color: var(--rly-pro-cyan);
}

.phase-card.phase-2 .phase-label {
  color: var(--rly-pro-violet);
}

.phase-card.phase-3 .phase-label,
.cal-stat.success .num {
  color: var(--rly-pro-green);
}

.cal-day {
  background: rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

.cal-day:hover {
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
}

.cal-day.has-content {
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.cal-day.today {
  background: linear-gradient(180deg, rgba(125, 219, 208, 0.13), rgba(125, 219, 208, 0.035));
  box-shadow:
    inset 0 0 0 1px rgba(125, 219, 208, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.cal-chip.scheduled {
  background: rgba(125, 167, 255, 0.14);
  color: #dbe5ff;
  box-shadow: inset 0 0 0 1px rgba(125, 167, 255, 0.26);
}

.cal-chip.scheduled.slot {
  background: rgba(125, 219, 208, 0.105);
  color: #c9fffa;
  border-color: rgba(125, 219, 208, 0.3);
  box-shadow: inset 0 0 0 1px rgba(125, 219, 208, 0.18);
}

.cal-chip.posted {
  background: rgba(137, 230, 182, 0.115);
  color: #ccf9df;
  box-shadow: inset 0 0 0 1px rgba(137, 230, 182, 0.25);
}

.phase-card.current {
  box-shadow:
    inset 0 0 0 1px rgba(125, 219, 208, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.phase-card .phase-progress i {
  background: linear-gradient(90deg, #4fd4c4, #a8fff2);
  box-shadow: none;
}

.phase-card.phase-2 .phase-progress i {
  background: linear-gradient(90deg, #8d75ff, #cfbdff);
  box-shadow: none;
}

.phase-card.phase-3 .phase-progress i {
  background: linear-gradient(90deg, #56d58f, #b7f5d1);
  box-shadow: none;
}

.cal-day.phase-1::before {
  background: var(--rly-pro-cyan);
  box-shadow: none;
}

.cal-day.phase-2::before {
  background: var(--rly-pro-violet);
}

.cal-day.phase-3::before {
  background: var(--rly-pro-green);
}

.day-pillar-pill,
.day-hero {
  background: rgba(125, 219, 208, 0.11);
  box-shadow: inset 0 0 0 1px rgba(125, 219, 208, 0.24);
  color: #d3fffb;
}

.day-hero:hover {
  box-shadow:
    inset 0 0 0 1px rgba(125, 219, 208, 0.38),
    0 8px 22px rgba(0, 0, 0, 0.18);
}

.day-hero-kicker,
.day-hero-arrow {
  color: var(--rly-pro-cyan);
}

.day-notes-textarea,
.day-item {
  background: rgba(255, 255, 255, 0.042);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

@media (max-width: 760px) {
  body {
    background-size: 64px 64px, 64px 64px, 100% 100%;
  }

  .main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .topbar {
    align-items: stretch;
    gap: 10px;
  }

  .page-title-h1 {
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .top-actions {
    width: 100%;
    margin-left: 0;
  }

  .page-subtitle {
    width: 100%;
    white-space: normal;
    line-height: 1.45;
  }

  .cal-toolbar {
    align-items: stretch;
  }

  .cal-nav,
  .cal-view-switcher,
  .cal-stats,
  #ical-export-btn {
    width: 100%;
  }

  .cal-nav {
    justify-content: space-between;
  }

  .cal-month-title {
    flex: 1;
    min-width: 0;
  }

  .view-btn,
  .cal-stat {
    flex: 1;
    text-align: center;
  }

  #ical-export-btn {
    min-height: 44px;
    justify-content: center;
  }

  .cal-card .tile {
    padding: 10px !important;
  }

  .cal-grid {
    gap: 4px;
  }

  .cal-day {
    border-radius: 8px;
  }

  .day-modal-box {
    border-radius: 16px 16px 0 0 !important;
  }

  .day-hero-title,
  .day-item .title {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .day-item {
    align-items: flex-start;
  }
}