:root {
  /* Локальные алиасы календаря → общий слой токенов (tokens.css) */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface2: var(--color-surface-4);
  --border: var(--color-border-strong);
  --text: var(--color-text);
  --text-primary: var(--color-text);
  --text2: var(--color-text-muted);
  --text3: var(--color-text-faint);
  --accent: var(--color-accent);
  --accent2: var(--color-accent-2);
  --green: var(--p-green-800);
  --orange: var(--p-orange-600);
  --blue: var(--color-info);
  --red: var(--p-red-600);
  --tg: var(--platform-tg);
  --ig: var(--platform-ig);
  --vk: var(--platform-vk);
  --yt: var(--platform-yt);
  --cal-booking: var(--p-green-500);
  --cal-autoposting: var(--p-platform-tg);
  --cal-events: var(--p-green-700);
  --cal-tasks: var(--p-orange-500);
  --radius: var(--radius-sm);
  --radius-sm: 4px;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  padding-bottom: 80px;
}

/* Top bar (matching Dashboard Header 1:1 - no jerking, transparent, space-between) */
.settings-header.cal-nav-header,
.topbar.cal-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin-top: 0;
  margin-bottom: 20px;
  min-height: 40px;
  background: transparent;
  border: none;
  position: relative;
  z-index: 500;
}
.cal-nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cal-nav-left .settings-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 14px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: none !important;
  box-shadow: none !important;
  color: var(--p-white);
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .cal-nav-left .settings-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border: none !important;
    box-shadow: none !important;
    transform: translateX(-2px);
  }
}

.cal-nav-left .title,
.cal-nav-left .settings-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-800);
  color: var(--p-white);
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.cal-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  position: relative;
  z-index: 501;
}
.cal-icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--p-white-a80);
  border-radius: 12px;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  text-decoration: none;
}
@media (hover: hover) {
  .cal-icon-btn:hover {
    background: var(--p-white-a8);
    color: var(--p-white);
  }
}

/* Google Calendar status button */
.cal-icon-btn--gc {
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
}
.cal-icon-btn--gc.gc-active {
  color: #4ade80;
}
.cal-icon-btn--gc.gc-active:hover {
  color: #4ade80;
}

/* Layout */
.layout {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 48px);
  position: relative;
}
.sidebar {
  display: none !important;
}
.main {
  flex: 1;
  overflow: visible;
}

/* Mini calendar */
.mini-month {
  font-size: var(--text-sm);
  font-weight: var(--fw-600);
  margin-bottom: 6px;
  color: var(--text2);
}
.mini-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mini-nav button {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: var(--text-sm);
}
.mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.mini-hdr {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 3px;
}
.mini-hdr span {
  font-size: var(--text-9);
  text-align: center;
  color: var(--text3);
}
.mini-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text3);
}
@media (hover: hover) {
  .mini-cell:hover {
    background: var(--surface2);
  }
}

.mini-cell.other {
  opacity: 0.25;
}
.mini-cell.today {
  background: var(--accent);
  color: var(--p-white);
  font-weight: var(--fw-700);
}
.mini-cell.has-posts {
  color: var(--text);
  font-weight: var(--fw-600);
}

/* Month grid */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}
.day-header {
  padding: 7px 8px;
  font-size: var(--text-2xs);
  color: var(--text3);
  font-weight: var(--fw-600);
  text-align: center;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.day-header.weekend {
  color: var(--p-red-400-a50);
}
.month-cell {
  min-height: 90px;
  padding: 4px 5px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  background: var(--bg);
  transition: background 0.1s;
}
.month-cell:nth-child(7n) {
  border-right: none;
}
@media (hover: hover) {
  .month-cell:hover {
    background: var(--surface);
  }
}

.month-cell.other-month {
  opacity: 0.25;
  pointer-events: none;
}
.month-cell.today .day-num {
  background: var(--accent);
  color: var(--p-white);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-700);
  font-size: var(--text-xs);
}
.month-cell .day-num {
  font-size: var(--text-xs);
  color: var(--text2);
  margin-bottom: 3px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.month-cell .event {
  font-size: var(--text-2xs);
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid;
  line-height: var(--leading-normal);
  margin-bottom: 1px;
}
.month-cell .event:active {
  opacity: 0.7;
}
.month-cell .event.tg {
  background: var(--p-platform-tg-a10);
  border-color: var(--tg);
  color: var(--tg);
}
.month-cell .event.ig {
  background: var(--p-platform-ig-a10);
  border-color: var(--ig);
  color: var(--ig);
}
.month-cell .event.vk {
  background: var(--p-platform-vk-a10);
  border-color: var(--vk);
  color: var(--vk);
}
.month-cell .event.yt {
  background: var(--p-platform-yt-a10);
  border-color: var(--yt);
  color: var(--yt);
}
.month-cell .more {
  font-size: var(--text-2xs);
  color: var(--accent);
  cursor: pointer;
  padding: 1px 5px;
  font-weight: var(--fw-600);
}

/* Week / Day time grid */
.time-grid {
  display: grid;
  grid-template-columns: 45px repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}
.time-grid.day-mode {
  grid-template-columns: 45px 1fr;
}
.time-slot {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  height: 44px;
  position: relative;
  font-size: var(--text-2xs);
  padding: 1px 3px;
  cursor: pointer;
}
@media (hover: hover) {
  .time-slot:hover {
    background: var(--surface);
  }
}

.time-slot .hour-label {
  color: var(--text3);
  font-size: var(--text-2xs);
  text-align: right;
  padding-right: 5px;
  transform: translateY(-5px);
  cursor: default;
}
.time-slot .ev-block {
  border-radius: 3px;
  padding: 2px 5px;
  font-size: var(--text-2xs);
  border-left: 3px solid;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 1px;
  cursor: pointer;
}
.time-slot .ev-block.tg {
  background: var(--p-platform-tg-a15);
  border-color: var(--tg);
  color: var(--tg);
}
.time-slot .ev-block.ig {
  background: var(--p-platform-ig-a15);
  border-color: var(--ig);
  color: var(--ig);
}
.time-slot .ev-block.vk {
  background: var(--p-platform-vk-a15);
  border-color: var(--vk);
  color: var(--vk);
}

/* Day panel (FullScreen Space Container & Glassmorphism) */
.day-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--color-bg, #05050d);
  background-image:
    radial-gradient(circle at 50% -10%, var(--p-cosmic-17) 0%, transparent 65%),
    radial-gradient(circle at 0% 30%, var(--p-cosmic-18) 0%, transparent 55%),
    radial-gradient(circle at 100% 70%, var(--p-cosmic-19) 0%, transparent 65%),
    radial-gradient(circle at 50% 110%, var(--p-cosmic-20) 0%, var(--p-cosmic-21) 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 90px;
  animation: panelFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.day-panel.open {
  display: block;
}

.day-panel-inner {
  width: 100%;
  max-width: var(--container-max, 672px);
  margin: 0 auto;
  padding: 24px var(--space-4, 16px) 60px;
  position: relative;
  box-sizing: border-box;
}

@media (min-width: 480px) {
  .day-panel-inner {
    padding-inline: var(--space-5, 20px);
  }
}

@media (min-width: 768px) {
  .day-panel-inner {
    padding-inline: var(--space-6, 24px);
  }
}

.day-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
}

.day-panel-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.day-panel-subtitle {
  font-size: var(--text-sm);
  color: var(--p-white-a45, rgba(255, 255, 255, 0.45));
  font-weight: var(--fw-500);
}

.day-panel-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    var(--p-purple-600, #9333ea) 0%,
    var(--p-pink-500, #ec4899) 100%
  );
  border: none;
  color: var(--p-white);
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  cursor: pointer;
  box-shadow: 0 4px 16px var(--color-accent-border);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  flex-shrink: 0;
}
@media (hover: hover) {
  .day-panel-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--p-purple-a55);
  }
}

.day-panel-add-btn:active {
  transform: scale(0.97);
}

.day-panel-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.day-panel .slot-row {
  margin: 0;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--p-cosmic-82-a55) 0%, var(--p-cosmic-83-a65) 100%);
  border: 1px solid var(--p-white-a9);
  border-radius: 18px;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 24px var(--p-black-a35);
  cursor: pointer;
  border-left: 4px solid var(--border);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .day-panel .slot-row:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent-border);
    box-shadow:
      0 12px 32px var(--p-black-a50),
      0 0 20px var(--p-purple-a15);
  }
}

.day-panel .slot-row .sr-time {
  font-size: var(--text-13);
  color: var(--p-sky-400);
  font-weight: var(--fw-700);
  margin-bottom: 6px;
  letter-spacing: var(--tracking-wide);
}

.day-panel .slot-row .sr-title {
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  color: var(--p-white);
  margin-bottom: 4px;
  line-height: var(--leading-base);
}

.day-panel .slot-row .sr-body {
  font-size: var(--text-13);
  color: var(--p-white-a65);
  line-height: var(--leading-base);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.day-panel .slot-row .sr-meta {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.day-panel .sr-badge {
  font-size: var(--text-xs);
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: var(--fw-600);
}

.day-panel .sr-badge.tg {
  background: var(--p-platform-tg-a20);
  color: var(--p-sky-400);
  border: 1px solid var(--p-platform-tg-a35);
}

.day-panel .sr-badge.ig {
  background: var(--p-platform-ig-a20);
  color: var(--p-pink-400);
  border: 1px solid var(--p-platform-ig-a35);
}

.day-panel .sr-badge.vk {
  background: var(--p-platform-vk-a20);
  color: var(--p-blue-400);
  border: 1px solid var(--p-platform-vk-a35);
}

.day-panel .sr-badge.draft {
  background: var(--p-orange-600-a20);
  color: var(--p-amber-400);
  border: 1px solid var(--p-orange-600-a35);
}

.day-panel .sr-badge.ready {
  background: var(--p-green-800-a15);
  color: var(--green);
  border: 1px solid var(--p-green-800-a35);
}

.day-panel .sr-badge.pub {
  background: var(--p-messenger-a15);
  color: var(--blue);
  border: 1px solid var(--p-messenger-a35);
}

/* ── Kind Badges inside day-panel slot-row ── */
.day-panel .cal-kind-badge {
  font-size: var(--text-xs);
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: var(--fw-600);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.day-panel .cal-kind-badge.booking {
  color: var(--p-green-400);
  background: var(--p-green-500-a15);
  border: 1px solid var(--p-green-500-a35);
}

.day-panel .cal-kind-badge.autoposting {
  color: var(--p-sky-400);
  background: var(--p-platform-tg-a15);
  border: 1px solid var(--p-platform-tg-a35);
}

.day-panel .cal-kind-badge.events {
  color: var(--p-green-300);
  background: var(--p-green-700-a15);
  border: 1px solid var(--p-green-700-a35);
}

.day-panel .cal-kind-badge.tasks {
  color: var(--p-orange-400);
  background: var(--p-orange-500-a15);
  border: 1px solid var(--p-orange-500-a35);
}

/* ══════════════════════════════════════════════════════════════
   FULL-PAGE EVENT EDITOR (Единый полноэкранный редактор событий)
   ══════════════════════════════════════════════════════════════ */
.event-page-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--p-bg-7);
  z-index: 1200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: pageFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-page-overlay.show {
  display: block;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.event-page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 0%, var(--p-purple-600-a8) 0%, transparent 60%), var(--p-bg-7);
  padding-bottom: 120px;
  box-sizing: border-box;
}

/* Header */
.ee-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  background: var(--p-bg-7-a85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
}

.ee-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--p-sky-400);
  font-size: var(--text-base);
  font-weight: var(--fw-500);
  font-family: inherit;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .ee-back-btn:hover {
    background: var(--p-sky-400-a10);
  }
}

.ee-header-center {
  flex: 1;
  text-align: center;
  padding: 0 8px;
}

.ee-header-title {
  margin: 0;
  font-size: var(--text-17);
  font-weight: var(--fw-700);
  color: var(--p-white);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ee-save-btn {
  background: linear-gradient(135deg, var(--p-purple-600) 0%, var(--p-purple-300) 100%);
  color: var(--p-white);
  border: none;
  font-size: var(--text-md);
  font-weight: var(--fw-600);
  font-family: inherit;
  padding: 7px 16px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--p-purple-600-a35);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .ee-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--p-purple-600-a45);
  }
}

.ee-save-btn:active {
  transform: scale(0.97);
}

/* Content */
.ee-content {
  max-width: 580px;
  margin: 0 auto;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Kind Switcher */
.ee-kind-switcher {
  display: flex;
  background: var(--p-white-a5);
  border: none;
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
}

.ee-kind-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: var(--p-white-a60);
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  font-family: inherit;
  border-radius: 10px;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .ee-kind-pill:hover {
    color: var(--p-white);
    background: var(--p-white-a5);
  }
}

.ee-kind-pill.active {
  background: var(--p-white-a12);
  color: var(--p-white);
  box-shadow: 0 2px 8px var(--p-black-a25);
}

.ee-kind-pill[data-kind='booking'].active {
  background: var(--p-green-500-a20);
  color: var(--p-green-500);
}

.ee-kind-pill[data-kind='post'].active {
  background: var(--p-platform-tg-a20);
  color: var(--p-sky-400);
}

.ee-kind-pill[data-kind='task'].active {
  background: var(--p-amber-500-a20);
  color: var(--p-amber-400);
}

.ee-kind-pill[data-kind='event'].active {
  background: var(--p-pink-500-a20);
  color: var(--p-pink-400);
}

.ee-kind-emoji {
  font-size: var(--text-15);
}

/* Glass Card Base */
.ee-card {
  background: var(--p-cosmic-84-a65);
  border: none;
  border-radius: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: visible;
  position: relative;
  z-index: 0;
  box-shadow: 0 4px 20px var(--p-black-a20);
}

/* Когда внутри карточки открыт выпадающий список - карточка
   приподнимается выше соседних, чтобы меню лежало поверх контента. */
.ee-card:has(.custom-select-wrapper.open),
.ee-card:has(.topic-dropdown.show) {
  z-index: 50;
}

/* Hero Card (Contact / Entity) */
.ee-hero-card {
  padding: 16px;
}

.ee-client-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ee-client-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-purple-600-a25), var(--p-pink-500-a25));
  border: 1.5px solid var(--p-white-a15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-22);
  flex-shrink: 0;
}

.ee-client-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ee-client-name-input {
  background: transparent;
  border: none;
  color: var(--p-white);
  font-size: var(--text-17);
  font-weight: var(--fw-700);
  font-family: inherit;
  padding: 0;
  outline: none;
}

.ee-client-name-input::placeholder {
  color: var(--p-white-a35);
}

.ee-client-phone-input {
  background: transparent;
  border: none;
  color: var(--p-white-a60);
  font-size: var(--text-13);
  font-family: inherit;
  padding: 0;
  outline: none;
}

.ee-client-phone-input::placeholder {
  color: var(--p-white-a30);
}

.ee-badge {
  font-size: var(--text-xs);
  font-weight: var(--fw-700);
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.ee-badge-new {
  background: var(--p-green-500-a20);
  color: var(--p-green-500);
  border: 1px solid var(--p-green-500-a30);
}

/* Status toggle row (Подтвердил визит | Пришел | Не пришел) */
.ee-status-toggle-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.ee-status-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  border: none;
  background: var(--p-white-a4);
  color: var(--p-white-a70);
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  font-family: inherit;
  border-radius: 12px;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .ee-status-toggle-btn:hover {
    background: var(--p-white-a8);
    color: var(--p-white);
  }
}

.ee-status-toggle-btn.active {
  background: var(--p-white-a14);
  color: var(--p-white);
  box-shadow: 0 2px 10px var(--p-black-a20);
}

.ee-status-toggle-btn[data-status='confirmed'].active,
.ee-status-toggle-btn[data-status='ready'].active {
  background: var(--p-green-500-a20);
  color: var(--p-green-500);
}

.ee-status-toggle-btn[data-status='attended'].active,
.ee-status-toggle-btn[data-status='draft'].active {
  background: var(--p-sky-400-a20);
  color: var(--p-sky-400);
}

.ee-status-toggle-btn[data-status='no_show'].active,
.ee-status-toggle-btn[data-status='cancel'].active {
  background: var(--p-rose-500-a20);
  color: var(--p-rose-500);
}

/* General Title Input for Post/Task/Event */
.ee-title-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--p-white);
  font-size: var(--text-xl);
  font-weight: var(--fw-700);
  font-family: inherit;
  padding: 4px 0 10px;
  outline: none;
}

.ee-title-input::placeholder {
  color: var(--p-white-a35);
}

/* Row Items */
.ee-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--p-white-a5);
  gap: 12px;
}

.ee-row-item:last-child {
  border-bottom: none;
}

.ee-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ee-row-icon {
  font-size: var(--text-base);
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ee-row-label {
  font-size: var(--text-md);
  font-weight: var(--fw-600);
  color: var(--p-white-a90);
}

.ee-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}

.ee-row-input,
.ee-row-select,
.ee-row-time,
.ee-row-num {
  background: transparent;
  border: none;
  color: var(--p-white-a85);
  font-size: var(--text-md);
  font-weight: var(--fw-500);
  font-family: inherit;
  text-align: right;
  outline: none;
}

.ee-row-input {
  width: 100%;
}

.ee-row-input::placeholder {
  color: var(--p-white-a30);
}

.ee-row-select {
  cursor: pointer;
}

.ee-row-select option {
  background: var(--p-cosmic-22);
  color: var(--p-white);
}

.ee-avatar-micro {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--p-blue-500);
  color: var(--p-white);
  font-size: var(--text-xs);
  font-weight: var(--fw-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ee-price-tag {
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  color: var(--p-white-a70);
}

/* Quick Toggles Row (Весь день / Повторять) */
.ee-quick-toggles-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--p-black-a15);
  border-radius: 0 0 18px 18px;
}

.ee-pill-btn {
  background: var(--p-white-a5);
  border: none;
  color: var(--p-white-a75);
  font-size: var(--text-sm);
  font-weight: var(--fw-600);
  font-family: inherit;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .ee-pill-btn:hover {
    background: var(--p-white-a10);
    color: var(--p-white);
  }
}

.ee-pill-btn.active {
  background: var(--p-purple-600-a25);
  color: var(--p-purple-200);
}

.ee-pill-tag {
  font-size: var(--text-sm);
  color: var(--p-white-a40);
  font-weight: var(--fw-500);
  margin-left: auto;
}

/* Color Palette Dots */
.ee-color-card {
  padding: 14px 16px;
}

.ee-color-palette {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ee-color-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}
@media (hover: hover) {
  .ee-color-dot:hover {
    transform: scale(1.15);
  }
}

.ee-color-dot.active {
  transform: scale(1.1);
  box-shadow:
    0 0 0 3px var(--p-bg-7),
    0 0 0 5px var(--p-white-a60);
  border-color: var(--p-white);
}

/* Note Card */
.ee-note-card {
  padding: 14px 16px;
}

/* ═══════════════════════════════════════════════════════════════
   DEDICATED APPLE IOS EVENT FORM STYLING
   ═══════════════════════════════════════════════════════════════ */

.ee-event-hero-box {
  padding: 4px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ee-event-title-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--p-white);
  font-size: var(--text-26);
  font-weight: var(--fw-800);
  font-family: inherit;
  letter-spacing: var(--tracking-tighter);
  padding: 0;
  outline: none;
}

.ee-event-title-input::placeholder {
  color: var(--p-white-a35);
}

.ee-event-desc-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--p-white-a75);
  font-size: var(--text-15);
  font-weight: var(--fw-500);
  font-family: inherit;
  padding: 0;
  outline: none;
  resize: none;
  line-height: var(--leading-base);
}

.ee-event-desc-input::placeholder {
  color: var(--p-white-a30);
}

/* Dual Date/Time Cards Row */
.ee-event-datetime-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.ee-datetime-card {
  flex: 1;
  padding: 12px 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--p-white-a7) 0%, var(--p-white-a2) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 10px 24px -4px var(--p-black-a50),
    inset 0 1px 0 0 var(--p-white-a16);
  cursor: pointer;
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s;
  user-select: none;
}
@media (hover: hover) {
  .ee-datetime-card:hover {
    background: var(--p-white-a9);
    transform: translateY(-1px);
  }
}

.ee-dt-card-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-500);
  color: var(--p-white-a45);
  margin-bottom: 3px;
}

.ee-dt-card-value {
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  color: var(--p-white);
  letter-spacing: var(--tracking-tight);
}

/* Event Quick Toggles Bar */
.ee-event-toggles-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  background: transparent;
  padding: 0 2px;
}

/* Grouped Event List Card (iOS Table View) */
.ee-event-list-card {
  margin-bottom: 20px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 12px 32px -4px var(--p-black-a55),
    inset 0 1px 0 0 var(--p-white-a16);
}

.ee-row-clickable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
@media (hover: hover) {
  .ee-row-clickable:hover {
    background: var(--p-white-a4);
  }
}

.ee-row-clickable:active {
  background: var(--p-white-a8);
}

.ee-row-value-text {
  font-size: var(--text-md);
  color: var(--p-white-a45);
  font-weight: var(--fw-500);
}

.ee-chevron {
  font-size: var(--text-lg);
  color: var(--p-white-a35);
  font-weight: var(--fw-600);
  line-height: var(--leading-none);
  margin-left: 4px;
}

.ee-plus-icon {
  font-size: var(--text-xl);
  color: var(--p-white-a55);
  font-weight: var(--fw-600);
  line-height: var(--leading-none);
}

.ee-expand-panel {
  padding: 8px 16px 14px;
  background: var(--p-black-a25);
  border-bottom: 1px solid var(--p-white-a5);
}

.ee-expand-panel .ee-row-input {
  text-align: left;
  font-size: var(--text-md);
  padding: 6px 0;
  border-bottom: 1px solid var(--p-white-a10);
}

/* Event Sections (Календарь, Напоминания, Статус) */
.ee-event-section {
  margin-bottom: 20px;
}

.ee-section-title {
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  color: var(--p-white-a50);
  margin-bottom: 10px;
  padding-left: 2px;
}

.ee-event-calendar-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ee-cal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  color: var(--p-white-a70);
  background: var(--p-white-a5);
  border: none;
  cursor: pointer;
  box-shadow:
    0 4px 16px var(--p-black-a30),
    inset 0 1px 0 0 var(--p-white-a14);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
@media (hover: hover) {
  .ee-cal-pill:hover {
    background: var(--p-white-a8);
    color: var(--p-white);
  }
}

.ee-cal-pill.active {
  background: var(--p-white-a14);
  color: var(--p-white);
  box-shadow:
    0 6px 20px var(--p-black-a45),
    inset 0 1px 0 0 var(--p-white-a22);
}

.ee-cal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Reminders List & Add Button */
.ee-reminders-chip-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.ee-reminder-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--p-white-a7) 0%, var(--p-white-a2) 100%);
  color: var(--p-white);
  font-size: var(--text-md);
  font-weight: var(--fw-600);
  box-shadow:
    0 6px 18px var(--p-black-a35),
    inset 0 1px 0 0 var(--p-white-a16);
}

.ee-reminder-chip-remove {
  background: var(--p-white-a15);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p-white);
  cursor: pointer;
  font-size: var(--text-sm);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  padding: 0;
}
@media (hover: hover) {
  .ee-reminder-chip-remove:hover {
    background: var(--p-red-500-a80);
    transform: scale(1.1);
  }
}

.ee-add-reminder-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--p-white-a5);
  border: none;
  color: var(--p-white-a90);
  font-size: var(--text-md);
  font-weight: var(--fw-600);
  cursor: pointer;
  box-shadow:
    0 4px 16px var(--p-black-a25),
    inset 0 1px 0 0 var(--p-white-a14);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .ee-add-reminder-btn:hover {
    background: var(--p-white-a8);
    color: var(--p-white);
    transform: translateY(-1px);
  }
}

.ee-add-icon {
  font-size: var(--text-base);
  font-weight: var(--fw-700);
  color: var(--p-purple-300, #c084fc);
}

/* Event Status Card Row */
.ee-status-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 20px;
  margin-bottom: 0;
}

.ee-status-icon-box {
  font-size: var(--text-xl);
  line-height: var(--leading-none);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.ee-status-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: var(--text-15);
  background: var(--p-white-a8);
}

.ee-status-indicator.busy {
  background: var(--p-rose-500-a20);
}

.ee-status-indicator.free {
  background: var(--p-green-500-a20);
}

.ee-status-indicator.tentative {
  background: var(--p-amber-500-a20);
}

.ee-status-indicator.dnd {
  background: var(--p-purple-300-a18);
}

.ee-status-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ee-status-card-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-500);
  color: var(--p-white-a45);
}

.ee-status-card-value {
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  color: var(--p-white);
}

/* ═══════════════════════════════════════════════════════════════
   BRAND DARK GLASS DATE & TIME PICKER MODAL (Скрин 2)
   ═══════════════════════════════════════════════════════════════ */

.brand-dt-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--p-black-a65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-dt-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.brand-dt-card {
  background: var(--p-cosmic-85-a96);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  border-radius: 24px;
  padding: 22px 24px 18px;
  width: 100%;
  max-width: 340px;
  box-shadow:
    0 24px 60px -8px var(--p-black-a85),
    inset 0 1px 0 0 var(--p-white-a18);
  border: none;
  transform: scale(0.94) translateY(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.brand-dt-overlay.show .brand-dt-card {
  transform: scale(1) translateY(0);
}

.brand-dt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.brand-dt-month-title {
  font-size: var(--text-17);
  font-weight: var(--fw-700);
  color: var(--p-white);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: var(--tracking-tight);
}

.brand-dt-arrow {
  color: var(--p-rose-500);
  font-size: var(--text-lg);
  font-weight: var(--fw-700);
}

.brand-dt-nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-dt-nav-btn {
  background: transparent;
  border: none;
  color: var(--p-rose-500);
  font-size: var(--text-2xl);
  font-weight: var(--fw-700);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  line-height: var(--leading-none);
  transition: background 0.15s ease;
  padding: 0;
}
@media (hover: hover) {
  .brand-dt-nav-btn:hover {
    background: var(--p-rose-500-a12);
  }
}

.brand-dt-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--fw-600);
  color: var(--p-white-a45);
  margin-bottom: 10px;
}

.brand-dt-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px 2px;
  justify-items: center;
}

.brand-dt-day {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-15);
  font-weight: var(--fw-600);
  color: var(--p-white);
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.15s;
  transition-timing-function: ease;
  border: none;
  background: transparent;
  padding: 0;
}
@media (hover: hover) {
  .brand-dt-day:hover:not(.other-month) {
    background: var(--p-white-a10);
  }
}

.brand-dt-day.other-month {
  color: var(--p-white-a18);
  pointer-events: none;
}

.brand-dt-day.active {
  background: var(--p-rose-500) !important;
  color: var(--p-white) !important;
  font-weight: var(--fw-700);
  box-shadow: 0 0 16px var(--p-rose-500-a60);
}

.brand-dt-day.today:not(.active) {
  color: var(--p-rose-500);
  font-weight: var(--fw-700);
}

.brand-dt-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--p-white-a8);
  position: relative;
}

.brand-dt-time-label {
  font-size: var(--text-15);
  font-weight: var(--fw-600);
  color: var(--p-white);
}

.brand-dt-time-wrapper {
  position: relative;
}

.brand-dt-time-btn {
  background: var(--p-white-a8);
  border: none;
  border-radius: 12px;
  color: var(--p-white);
  font-size: var(--text-base);
  font-weight: var(--fw-700);
  padding: 6px 14px;
  cursor: pointer;
  box-shadow:
    0 4px 12px var(--p-black-a30),
    inset 0 1px 0 0 var(--p-white-a15);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .brand-dt-time-btn:hover {
    background: var(--p-white-a14);
  }
}

.brand-dt-time-dropdown {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 140px;
  max-height: 200px;
  background: var(--p-cosmic-86-a98);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow:
    0 12px 32px var(--p-black-a75),
    inset 0 1px 0 var(--p-white-a16);
  padding: 6px;
  z-index: 100;
  overflow-y: auto;
}

.brand-dt-time-scroll {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-dt-time-item {
  padding: 8px 12px;
  font-size: var(--text-md);
  font-weight: var(--fw-600);
  color: var(--p-white-a85);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease;
}
@media (hover: hover) {
  .brand-dt-time-item:hover {
    background: var(--p-white-a10);
    color: var(--p-white);
  }
}

.brand-dt-time-item.active {
  background: var(--p-rose-500-a20);
  color: var(--p-rose-500);
  font-weight: var(--fw-700);
}

.brand-dt-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid var(--p-white-a6);
}

.brand-dt-done-btn {
  background: transparent;
  border: none;
  color: var(--p-rose-500);
  font-size: var(--text-base);
  font-weight: var(--fw-700);
  cursor: pointer;
  padding: 4px 8px;
  transition: opacity 0.2s;
}
@media (hover: hover) {
  .brand-dt-done-btn:hover {
    opacity: 0.8;
  }
}

.ee-card-subtitle {
  display: block;
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  color: var(--p-white-a60);
  margin-bottom: 8px;
}

.ee-note-textarea {
  width: 100%;
  background: var(--p-black-a20);
  border: none;
  border-radius: 12px;
  color: var(--p-white);
  font-size: var(--text-md);
  font-family: inherit;
  padding: 10px 12px;
  box-sizing: border-box;
  resize: vertical;
  min-height: 70px;
  outline: none;
  transition: background 0.2s ease;
}

.ee-note-textarea:focus {
  background: var(--p-black-a35);
}

.ee-note-textarea::placeholder {
  color: var(--p-white-a30);
}

/* File Upload Card */
.ee-file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .ee-file-card:hover {
    background: var(--p-white-a8);
  }
}

.ee-file-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--p-sky-400-a15);
  color: var(--p-sky-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ee-file-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ee-file-title {
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  color: var(--p-white-a85);
}

.ee-file-desc {
  font-size: var(--text-xs);
  color: var(--p-white-a45);
}

/* Платформы и медиа: колонка в правой части строки */
.ee-platform-col,
.ee-media-col,
.ee-link-col {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

/* Чипы-список (Платформы) */
.ee-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.ee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--p-white-a12);
  background: var(--p-white-a5);
  color: var(--p-white-a70);
  font-size: var(--text-sm);
  font-weight: var(--fw-600);
  font-family: inherit;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.18s;
  transition-timing-function: ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .ee-chip:hover {
    background: var(--p-white-a10);
  }
}

.ee-chip.active {
  background: var(--p-purple-300-a22);
  border-color: var(--p-purple-a50);
  color: var(--p-purple-200);
}

.ee-chip-add {
  border-style: dashed;
  color: var(--p-white-a80);
}

/* Медиафайлы: чипы загруженных файлов */
.ee-media-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.ee-file-chip {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--p-sky-400-a14);
  border: 1px solid var(--p-sky-400-a30);
  color: var(--p-sky-300);
  font-size: var(--text-xs);
  font-weight: var(--fw-600);
}

.ee-file-empty {
  font-size: var(--text-xs);
  color: var(--p-white-a40);
}

/* Место / Ссылка: подсветка ссылки */
.ee-link-input.is-link {
  color: var(--p-sky-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Онлайн-запись скоро (только для записи) */
.ee-booking-soon-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border: 1px dashed var(--p-purple-a35);
  background: var(--p-purple-600-a8);
}

.ee-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--p-purple-a20);
  border: 1px solid var(--color-accent-border);
  color: var(--p-purple-200);
  font-size: var(--text-2xs);
  font-weight: var(--fw-800);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ee-soon-title {
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  color: var(--p-white-a95);
}

.ee-soon-text {
  font-size: var(--text-13);
  line-height: var(--leading-normal);
  color: var(--p-white-a60);
}

/* Ряд чипов прикреплённых файлов */
.ee-attachment-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 4px;
}

/* Meta Info */
.ee-meta-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--p-white-a40);
  padding: 4px 6px;
}

/* Action Buttons */
.ee-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ee-action-card-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: var(--p-white-a5);
  border: none;
  color: var(--p-sky-400);
  font-size: var(--text-15);
  font-weight: var(--fw-600);
  font-family: inherit;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  text-align: center;
}
@media (hover: hover) {
  .ee-action-card-btn:hover {
    background: var(--p-white-a8);
  }
}

.ee-action-card-btn.ee-action-danger {
  color: var(--p-rose-500);
}
@media (hover: hover) {
  .ee-action-card-btn.ee-action-danger:hover {
    background: var(--p-rose-500-a10);
  }
}

/* Sticky Footer */
.ee-sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--p-bg-7-a88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: none;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
}

.ee-footer-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ee-footer-label {
  font-size: var(--text-xs);
  color: var(--p-sky-400);
  font-weight: var(--fw-600);
}

.ee-footer-amount {
  font-size: var(--text-lg);
  font-weight: var(--fw-800);
  color: var(--p-sky-400);
}

.ee-footer-main-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--p-purple-600) 0%, var(--p-purple-300) 100%);
  color: var(--p-white);
  border: none;
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--p-purple-600-a35);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .ee-footer-main-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--p-purple-600-a45);
  }
}

.ee-footer-main-btn:active {
  transform: scale(0.98);
}

/* Topic select in sheet */
.topic-select {
  position: relative;
}
.topic-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  z-index: 1200;
  background: var(--p-bg-8);
  border: 1px solid var(--p-white-a15);
  border-radius: 12px;
  list-style: none;
  padding: 4px;
  margin: 4px 0 0;
  box-shadow: 0 10px 30px var(--p-black-a70);
}
.topic-dropdown.show {
  display: block;
}
.topic-dropdown li {
  padding: 8px 12px;
  font-size: var(--text-13);
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}
@media (hover: hover) {
  .topic-dropdown li:hover {
    background: var(--accent);
    color: var(--p-white);
  }
}
.topic-dropdown li.active {
  background: var(--accent);
  color: var(--p-white);
}

.topic-dropdown li.no-topic {
  color: var(--text3);
  font-style: italic;
}
.topic-dropdown li.no-results {
  color: var(--text3);
  cursor: default;
}

/* Switch toggle */
.sheet-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.sheet-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.sheet-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--p-white-a12);
  border: 1px solid var(--p-white-a18);
  border-radius: 22px;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.sheet-slider:before {
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: var(--p-white);
  border-radius: 50%;
  box-shadow: 0 1px 4px var(--p-black-a35);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.sheet-switch input:checked + .sheet-slider {
  background: linear-gradient(135deg, var(--p-purple-300), var(--p-purple-600));
  border-color: var(--p-purple-300-a60);
  box-shadow: 0 0 12px var(--color-accent-border);
}

.sheet-switch input:checked + .sheet-slider:before {
  transform: translateX(16px);
  background-color: var(--p-white);
}

.sheet-bottom-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.sheet-main-btn {
  flex: 1;
  padding: 14px;
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  border-radius: 14px;
}

/* Best Time */
.besttime-panel {
  margin: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: none;
}
.besttime-panel.show {
  display: block;
}
.besttime-panel h3 {
  font-size: var(--text-md);
  margin-bottom: 10px;
}
.heatmap-grid {
  display: grid;
  grid-template-columns: 45px repeat(7, 1fr);
  gap: 2px;
  font-size: var(--text-2xs);
}
.heatmap-cell {
  text-align: center;
  padding: 4px 1px;
  border-radius: 3px;
}
.heatmap-score-90 {
  background: var(--p-green-800-a70);
}
.heatmap-score-70 {
  background: var(--p-green-800-a40);
}
.heatmap-score-50 {
  background: var(--p-orange-600-a30);
}
.heatmap-score-30 {
  background: var(--p-orange-600-a15);
}
.heatmap-score-0 {
  background: transparent;
  color: var(--text3);
}

.loader {
  text-align: center;
  padding: 40px;
  color: var(--text2);
}
.empty-note {
  text-align: center;
  padding: 30px;
  color: var(--text3);
  font-size: var(--text-13);
}

/* ── Onboarding ── */
#onboarding {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 40px;
  width: 100%;
}
.onboard-card {
  background: linear-gradient(
    135deg,
    var(--p-cosmic-89-a28) 0%,
    var(--p-bg-0-a38) 50%,
    var(--p-cosmic-92-a38) 100%
  );
  border: 1px solid var(--p-white-a8);
  border-radius: 20px;
  padding: 32px 24px;
  max-width: 480px;
  width: 100%;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 16px 40px var(--p-black-a50),
    inset 0 1px 0 var(--p-white-a8);
}
.onboard-header {
  text-align: center;
  margin-bottom: 24px;
}
.onboard-header h1 {
  font-size: var(--text-22);
  color: var(--text-primary);
  margin: 0 0 6px;
}
.onboard-header p {
  font-size: var(--text-13);
  color: var(--text3);
  margin: 0;
}
.onboard-steps {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.onboard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.35;
  transition: opacity 0.2s;
}
.onboard-step.active {
  opacity: 1;
}
.onboard-step.done {
  opacity: 0.7;
}
.onboard-step .step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--fw-600);
  color: var(--text2);
}
.onboard-step.active .step-num {
  background: linear-gradient(135deg, var(--p-purple-600), var(--p-pink-500));
  color: var(--p-white);
}
.onboard-step.done .step-num {
  background: var(--accent2);
  color: var(--p-white);
}
.onboard-step .step-label {
  font-size: var(--text-2xs);
  color: var(--text3);
  white-space: nowrap;
}
.onboard-body {
  margin-bottom: 24px;
  min-height: 120px;
}
.onboard-body h3 {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin: 0 0 12px;
  text-align: center;
}
.onboard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.onboard-chip {
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text2);
  font-size: var(--text-md);
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.15s;
  transition-timing-function: ease;
  font-family: inherit;
}
@media (hover: hover) {
  .onboard-chip:hover {
    border-color: var(--p-white-a20);
    color: var(--text-primary);
  }
}

.onboard-chip.selected {
  border-color: var(--p-purple-600);
  background: var(--p-purple-600-a10);
  color: var(--p-purple-400);
}
.onboard-chip.multi {
  min-width: 44px;
  text-align: center;
}
.onboard-chip-input {
  width: 84px;
  min-width: 68px;
  padding: 10px 10px;
  text-align: center;
  -moz-appearance: textfield;
}
.onboard-chip-input::-webkit-outer-spin-button,
.onboard-chip-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.onboard-chip-input:focus {
  outline: none;
  border-color: var(--p-purple-600);
}
.onboard-chip-input.selected {
  border-color: var(--p-purple-600);
  background: var(--p-purple-600-a10);
  color: var(--p-purple-400);
}
.onboard-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text-primary);
  font-size: var(--text-md);
  font-family: inherit;
  box-sizing: border-box;
}
.onboard-input:focus {
  outline: none;
  border-color: var(--p-purple-600);
}
.onboard-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.onboard-actions .btn {
  min-width: 140px;
  padding: 12px 24px;
}

/* ── Onboarding Clock Stepper (Alarm Style) ── */
.onboard-time-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 6px;
  margin: 12px 0 10px;
  scrollbar-width: thin;
}

.onboard-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--p-white-a4) 0%, var(--p-cosmic-87-a50) 100%);
  border: 1px solid var(--p-purple-300-a22);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px var(--p-black-a35);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .onboard-time-row:hover {
    border-color: var(--p-purple-a55);
    background: linear-gradient(135deg, var(--p-purple-a12) 0%, var(--p-pink-500-a8) 100%);
    box-shadow: 0 6px 20px var(--p-purple-600-a25);
    transform: translateY(-1px);
  }
}
.onboard-time-row:focus-within {
  border-color: var(--p-purple-a55);
  background: linear-gradient(135deg, var(--p-purple-a12) 0%, var(--p-pink-500-a8) 100%);
  box-shadow: 0 6px 20px var(--p-purple-600-a25);
  transform: translateY(-1px);
}

.onboard-post-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboard-post-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--p-purple-600), var(--p-pink-500));
  color: var(--p-white);
  font-size: var(--text-sm);
  font-weight: var(--fw-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px var(--p-purple-600-a40);
  flex-shrink: 0;
}

.onboard-post-name {
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  color: var(--p-white);
  letter-spacing: var(--tracking-tight);
}

.onboard-clock-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--p-cosmic-ink-a90);
  border: 1px solid var(--p-purple-a35);
  padding: 4px 8px;
  border-radius: 12px;
  box-shadow: inset 0 2px 6px var(--p-black-a60);
}

.clock-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 36px;
}

.clock-btn {
  background: transparent;
  border: none;
  color: var(--p-white-a45);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.15s;
  transition-timing-function: ease;
  line-height: var(--leading-none);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .clock-btn:hover {
    color: var(--p-white);
    background: var(--p-purple-300-a30);
    transform: scale(1.15);
  }
}

.clock-btn:active {
  transform: scale(0.92);
}

.clock-digit {
  width: 34px;
  height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--p-white);
  font-size: var(--text-lg);
  font-weight: var(--fw-800);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  padding: 0;
  margin: 1px 0;
  box-sizing: border-box;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .clock-digit:hover {
    background: var(--p-white-a6);
  }
}

.clock-digit:focus {
  background: var(--p-purple-600-a25);
  border-color: var(--p-purple-300-a60);
  box-shadow: 0 0 10px var(--p-purple-600-a40);
}

.clock-colon {
  font-size: var(--text-lg);
  font-weight: var(--fw-800);
  color: var(--p-white-a60);
  margin-bottom: 2px;
  user-select: none;
}

/* ── Today Panel ── */
#todayPanel {
  margin: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.today-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.today-header h2 {
  margin: 0;
  font-size: var(--text-base);
  color: var(--text-primary);
}
.today-date {
  font-size: var(--text-sm);
  color: var(--text3);
}
.today-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.today-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .today-slot:hover {
    border-color: var(--p-white-a15);
    background: var(--p-white-a2);
  }
}

.today-slot .ts-time {
  font-size: var(--text-md);
  font-weight: var(--fw-600);
  color: var(--accent2);
  min-width: 45px;
}
.today-slot .ts-info {
  flex: 1;
}
.today-slot .ts-title {
  font-size: var(--text-13);
  color: var(--text-primary);
}
.today-slot .ts-meta {
  font-size: var(--text-xs);
  color: var(--text3);
  margin-top: 2px;
}
.today-slot .ts-action {
  flex-shrink: 0;
}
.today-slot .ts-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text2);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: inherit;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .today-slot .ts-btn:hover {
    border-color: var(--p-white-a20);
    color: var(--text-primary);
  }
}

.today-slot .ts-btn.primary {
  background: linear-gradient(135deg, var(--p-purple-600), var(--p-pink-500));
  color: var(--p-white);
  border: none;
}
.today-slot.empty {
  opacity: 0.5;
  border-style: dashed;
}
.today-empty {
  text-align: center;
  padding: 20px;
  color: var(--text3);
  font-size: var(--text-13);
}

/* ── Empty Week (Photo 1) ── */
#emptyWeek {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 24px;
  text-align: center;
}
.empty-card {
  text-align: center;
  max-width: 440px;
}
.empty-cal-icon {
  width: 62px;
  height: 68px;
  background: var(--p-slate-200);
  border-radius: 8px;
  margin: 0 auto 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 30px var(--p-black-a60);
}
.empty-cal-top {
  background: linear-gradient(135deg, var(--p-purple-600), var(--p-pink-500));
  color: var(--p-white);
  font-size: var(--text-xs);
  font-weight: var(--fw-800);
  padding: 4px 0 3px;
  text-align: center;
  letter-spacing: var(--tracking-wide);
}
.empty-cal-bottom {
  flex: 1;
  color: var(--p-cosmic-23);
  font-size: var(--text-3xl);
  font-weight: var(--fw-800);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--p-slate-50);
  font-family: inherit;
}
.empty-card h2 {
  font-size: var(--text-22);
  font-weight: var(--fw-800);
  color: var(--p-white);
  margin: 0 0 10px;
  letter-spacing: var(--tracking-tighter);
}
.empty-card p {
  font-size: var(--text-md);
  color: var(--p-white-a55);
  margin: 0 0 26px;
  line-height: var(--leading-base);
}
.empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.empty-actions .btn {
  padding: 13px 26px;
  border-radius: 14px;
  font-size: var(--text-15);
  font-weight: var(--fw-700);
}
.empty-actions .btn-secondary {
  background: var(--p-cosmic-24);
  border: 1px solid var(--p-white-a12);
  color: var(--p-white);
}

/* ── Status badges ── */
.sr-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-600);
  margin-left: 6px;
}
.sr-badge.tg {
  background: var(--p-sky-600-a15);
  color: var(--platform-tg);
}
.sr-badge.ig {
  background: var(--p-ig-red-a15);
  color: var(--platform-ig);
}
.sr-badge.vk {
  background: var(--p-platform-vk-a15);
  color: var(--platform-vk);
}
.sr-badge.yt {
  background: var(--p-platform-yt-a15);
  color: var(--platform-yt);
}
.sr-badge.ready {
  background: var(--p-orange-600-a15);
  color: var(--p-orange-600);
}
.sr-badge.pub {
  background: var(--p-green-800-a15);
  color: var(--p-green-800);
}
.sr-badge.draft {
  background: var(--p-messenger-a15);
  color: var(--color-info);
}

/* ── Btn ── */
.btn {
  border: none;
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--text-md);
  font-weight: var(--fw-500);
  cursor: pointer;
  font-family: inherit;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--p-purple-600), var(--p-pink-500));
  color: var(--p-white);
}
.btn-secondary {
  background: var(--bg);
  color: var(--text2);
  border: 1px solid var(--border);
}
.btn-danger {
  background: var(--p-red-600-a10);
  color: var(--p-red-600);
  border: 1px solid var(--p-red-600-a20);
}
@media (hover: hover) {
  .btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
  }
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  .month-cell {
    min-height: 105px;
  }
}
@media (max-width: 480px) {
  .month-cell {
    min-height: 64px;
    padding: 2px 3px;
  }
  .month-cell .event {
    font-size: var(--text-9);
  }
  .month-cell .day-num {
    font-size: var(--text-2xs);
    width: 18px;
    height: 18px;
  }
  .topbar {
    gap: 3px;
    padding: 6px 8px;
  }
  .topbar .title {
    font-size: var(--text-md);
  }
  .time-slot {
    height: 36px;
  }
}

/* ── Back button ── */
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--back-btn-size);
  height: var(--back-btn-size);
  min-width: var(--back-btn-size);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--back-btn-radius);
  color: var(--text2);
  font-size: var(--text-base);
  cursor: pointer;
  flex-shrink: 0;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .back-btn:hover {
    border-color: var(--p-white-a20);
    color: var(--text);
    background: var(--surface);
  }
}

/* ── Bottom nav ── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 16px;
  z-index: 100;
  width: 100%;
  max-width: var(--container-max, 672px);
  margin: 0 auto;
  box-sizing: border-box;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 6px 16px;
  height: 52px;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  opacity: 0.55;
  position: relative;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
}
@media (hover: hover) {
  .nav-item:hover {
    opacity: 0.85;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

.nav-item.active {
  opacity: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.nav-item.active .nav-item-icon svg {
  stroke: var(--p-purple-200);
  stroke: url(#navActiveGrad);
}
.nav-item.active .nav-item-label {
  background: linear-gradient(90deg, var(--p-purple-600) 0%, var(--p-pink-500) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-item-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
.nav-item-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-500);
  line-height: var(--leading-tight);
}

/* ── Drag & Drop ── */
[data-slot-id] {
  cursor: grab;
}
[data-slot-id]:active {
  cursor: grabbing;
}
.dragging {
  opacity: 0.4;
}
.drag-over {
  background: var(--p-purple-600-a15) !important;
  outline: 2px dashed var(--accent2, var(--p-purple-600));
  outline-offset: -2px;
}

/* ══════════════════════════════════════════════════════════════
   PHOTO 2 CALENDAR TIMELINE & WEEK STRIP
   ══════════════════════════════════════════════════════════════ */

.cal-icon-btn.active {
  background: var(--p-purple-600-a25);
  border-color: var(--p-purple-300-a80) !important;
  box-shadow: 0 0 12px var(--p-purple-600-a40);
}

/* Month View Card (Photo 2) */
.cal-month-card {
  background: var(--p-cosmic-88-a85);
  border: 1px solid var(--p-white-a8);
  border-radius: 20px;
  padding: 16px 14px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px var(--p-black-a50);
}

.cal-month-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 8px;
}

.cal-month-card-title {
  font-size: var(--text-md);
  font-weight: var(--fw-600);
  color: var(--p-white-a85);
}

.cal-month-nav-btn {
  background: transparent;
  border: none;
  color: var(--p-white-a45);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .cal-month-nav-btn:hover {
    color: var(--p-white);
    background: var(--p-white-a8);
  }
}

.cal-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--fw-600);
  color: var(--p-white-a40);
  margin-bottom: 12px;
}

.cal-month-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 10px;
  text-align: center;
}

.cal-month-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 38px;
  font-size: var(--text-md);
  font-weight: var(--fw-500);
  color: var(--p-white-a80);
  cursor: pointer;
  position: relative;
}

.cal-month-cell.empty {
  cursor: default;
}

.cal-month-cell.selected .cal-month-day-num {
  background: var(--p-purple-600);
  color: var(--p-white);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-700);
  box-shadow: 0 4px 14px var(--p-purple-600-a50);
}

.cal-month-cell.today:not(.selected) .cal-month-day-num {
  color: var(--p-pink-500);
  font-weight: var(--fw-800);
  text-shadow: 0 0 10px var(--p-pink-500-a50);
}

.cal-month-cell .cal-month-dot {
  width: 3px;
  height: 3px;
  background: var(--p-purple-300);
  border-radius: 50%;
  position: absolute;
  bottom: 1px;
}

/* View Switcher Dropdown (Photo 1) */
.cal-view-dropdown {
  position: absolute;
  top: 48px;
  right: 0;
  background: var(--p-bg-9);
  border: 1px solid var(--p-white-a12);
  border-radius: 18px;
  padding: 6px;
  min-width: 170px;
  box-shadow: 0 12px 36px var(--p-black-a60);
  z-index: 120;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.cal-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--p-white);
  font-size: var(--text-md);
  font-weight: var(--fw-500);
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  text-decoration: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: background 0.15s;
}
@media (hover: hover) {
  .cal-dropdown-item:hover {
    background: var(--p-white-a8);
  }
}

.cal-dropdown-item.active {
  font-weight: var(--fw-600);
}

.cal-dropdown-check {
  font-size: var(--text-md);
  color: var(--p-white-a70);
  margin-left: 12px;
}

.cal-dropdown-divider {
  height: 1px;
  background: var(--p-white-a8);
  margin: 4px 6px;
}

/* Week strip */
.cal-week-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px;
  margin-bottom: 16px;
  gap: 2px;
}

.cal-strip-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--p-white-a60);
  font-family: inherit;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 14px;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  position: relative;
  flex: 1;
}

.cal-strip-name {
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  color: var(--p-white-a65);
  text-transform: lowercase;
}

.cal-strip-num {
  font-size: var(--text-17);
  font-weight: var(--fw-700);
  color: var(--p-white);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.cal-strip-day.is-today .cal-strip-num,
.cal-strip-day.is-today-selected .cal-strip-num {
  background: linear-gradient(135deg, var(--p-purple-600) 0%, var(--p-pink-500) 100%);
  color: var(--p-white);
  box-shadow:
    0 4px 16px var(--p-purple-a55),
    0 0 12px var(--p-pink-500-a35);
}

.cal-strip-day.is-selected:not(.is-today):not(.is-today-selected) .cal-strip-num {
  background: var(--p-cosmic-25);
  color: var(--p-white);
  border: 1.5px solid var(--p-purple-300-a60);
  box-shadow: 0 2px 10px var(--p-purple-600-a35);
}

.cal-strip-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--p-purple-300);
  position: absolute;
  bottom: 0;
}

/* Hourly Timeline (Photo 2) */
.cal-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 100px;
}

.cal-timeline-row {
  display: flex;
  align-items: flex-start;
  min-height: 58px;
  cursor: pointer;
  position: relative;
}

.cal-time-col {
  width: 54px;
  flex-shrink: 0;
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  color: var(--p-white-a45);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.cal-events-col {
  flex: 1;
  position: relative;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
}

.cal-time-line {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--p-white-a8);
  pointer-events: none;
}

.cal-slot-card {
  position: relative;
  z-index: 2;
  background: var(--p-cosmic-90-a90);
  border: 1px solid var(--p-purple-300-a30);
  border-left: 4px solid var(--accent2, #a855f7);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 2px;
  box-shadow: 0 4px 16px var(--p-black-a40);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
@media (hover: hover) {
  .cal-slot-card:hover {
    transform: translateX(3px);
    border-color: var(--p-purple-300-a60);
  }
}

.cal-slot-card.tg {
  border-left-color: var(--p-platform-tg);
}
.cal-slot-card.ig {
  border-left-color: var(--p-platform-ig);
}
.cal-slot-card.vk {
  border-left-color: var(--p-platform-vk);
}

.cal-slot-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cal-slot-time {
  font-size: var(--text-sm);
  font-weight: var(--fw-700);
  color: var(--p-purple-300);
}

.cal-slot-plat {
  font-size: var(--text-2xs);
  font-weight: var(--fw-700);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--p-white-a8);
}

.cal-slot-plat.tg {
  color: var(--p-platform-tg);
  background: var(--p-platform-tg-a15);
}
.cal-slot-plat.ig {
  color: var(--p-platform-ig);
  background: var(--p-platform-ig-a15);
}
.cal-slot-plat.vk {
  color: var(--p-platform-vk);
  background: var(--p-platform-vk-a15);
}

.cal-slot-status {
  font-size: var(--text-2xs);
  font-weight: var(--fw-600);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: auto;
}

.cal-slot-status.ready {
  color: var(--p-green-500);
  background: var(--p-green-500-a15);
}
.cal-slot-status.pub {
  color: var(--p-blue-500);
  background: var(--p-blue-500-a15);
}
.cal-slot-status.draft {
  color: var(--p-amber-500);
  background: var(--p-amber-500-a15);
}

.cal-slot-title {
  font-size: var(--text-md);
  font-weight: var(--fw-600);
  color: var(--p-white);
  line-height: var(--leading-base);
}

/* Floating Bottom Controls (Above Bottom Nav) */
.cal-floating-footer {
  position: fixed;
  bottom: 86px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 150;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.cal-today-pill {
  pointer-events: auto;
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--p-cosmic-26);
  border: 1px solid var(--p-white-a15);
  color: var(--p-white);
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--p-black-a60);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .cal-today-pill:hover {
    background: var(--p-cosmic-27);
    border-color: var(--p-white-a30);
    transform: scale(1.03);
  }
}

.cal-today-pill:active {
  transform: scale(0.97);
}

.cal-fab-btn {
  pointer-events: auto;
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--p-purple-600, #7c3aed) 0%,
    var(--p-pink-500, #ec4899) 100%
  );
  border: none;
  color: var(--p-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 8px 24px var(--p-purple-600-a55),
    0 2px 8px var(--p-pink-500-a35);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .cal-fab-btn:hover {
    transform: scale(1.08);
    box-shadow:
      0 12px 32px var(--p-purple-600-a75),
      0 4px 12px var(--p-pink-500-a50);
  }
}

.cal-fab-btn:active {
  transform: scale(0.94);
}

/* ── Multi-Column Timeline Grid (3, 5, 7 days matching Photo 2, 3, 4) ── */
.cal-multi-grid {
  display: flex;
  flex-direction: column;
  background: var(--p-white-a2);
  border: 1px solid var(--p-white-a8);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 12px;
}

.cal-multi-row {
  display: flex;
  min-height: 52px;
  border-bottom: 1px solid var(--p-white-a6);
}

.cal-multi-time {
  width: 48px;
  min-width: 48px;
  padding: 6px 4px;
  font-size: var(--text-xs);
  color: var(--p-white-a40);
  font-weight: var(--fw-500);
  text-align: right;
  border-right: 1px solid var(--p-white-a6);
  user-select: none;
}

.cal-multi-cells {
  display: flex;
  flex: 1;
  width: 100%;
}

.cal-multi-cell {
  flex: 1;
  min-width: 0;
  border-right: 1px solid var(--p-white-a6);
  padding: 2px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}

.cal-multi-cell:last-child {
  border-right: none;
}
@media (hover: hover) {
  .cal-multi-cell:hover {
    background: var(--p-white-a4);
  }
}

.cal-multi-cell.is-today-col {
  background: var(--p-white-a3);
}

.cal-multi-now-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--p-purple-600) 0%, var(--p-pink-500) 100%);
  box-shadow: 0 0 8px var(--p-pink-500-a60);
  z-index: 10;
  pointer-events: none;
}

.cal-multi-slot-card {
  background: var(--p-purple-600-a30);
  border: 1px solid var(--p-purple-300-a60);
  border-radius: 6px;
  padding: 3px 5px;
  font-size: var(--text-2xs);
  color: var(--p-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
  cursor: pointer;
}

.cal-multi-slot-card.ready {
  background: var(--p-orange-500-a30);
  border-color: var(--p-orange-500-a60);
}

.cal-multi-slot-card.pub {
  background: var(--p-green-500-a30);
  border-color: var(--p-olive-300-a60);
}

/* ── Full Month Scrollable View (matching Photo 5) ── */
.cal-full-month-view {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 4px 60px;
}

.cal-full-month-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cal-full-month-title {
  font-size: var(--text-22);
  font-weight: var(--fw-800);
  color: var(--p-white);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 4px;
}

.cal-full-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--fw-600);
  color: var(--p-white-a40);
  padding-bottom: 6px;
}

.cal-full-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px 4px;
  justify-items: center;
  align-items: center;
}

.cal-month-cell-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.15s ease;
}
@media (hover: hover) {
  .cal-month-cell-box:hover {
    transform: scale(1.15);
    background: var(--p-white-a5);
  }
}

.cal-month-cell-box.empty {
  cursor: default;
  pointer-events: none;
}

.cal-month-ring-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-month-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.cal-month-bg-ring {
  fill: none;
  stroke: var(--p-white-a10);
  stroke-width: 2.8;
}

.cal-month-fill-ring {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
}

.cal-month-cell-box.plat-tg .cal-month-fill-ring {
  filter: drop-shadow(0 0 6px var(--p-sky-400-a70));
}

.cal-month-cell-box.plat-ig .cal-month-fill-ring {
  filter: drop-shadow(0 0 6px var(--p-pink-400-a70));
}

.cal-month-cell-box.plat-vk .cal-month-fill-ring {
  filter: drop-shadow(0 0 6px var(--p-blue-400-a70));
}

.cal-month-cell-box.plat-personal .cal-month-fill-ring {
  filter: drop-shadow(0 0 6px var(--p-purple-200-a70));
}

.cal-month-cell-box.plat-teal .cal-month-fill-ring {
  filter: drop-shadow(0 0 6px var(--p-teal-400-a70));
}

.cal-month-num {
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  color: var(--p-white);
  z-index: 1;
  letter-spacing: var(--tracking-tight);
}

.cal-month-ring-inner.plain .cal-month-num {
  font-weight: var(--fw-500);
  color: var(--p-white-a85);
}

/* Today active state (glowing neon badge) */
.cal-month-ring-inner.today-bg {
  background: linear-gradient(135deg, var(--p-rose-500) 0%, var(--p-pink-500) 100%);
  border-radius: 50%;
  box-shadow:
    0 0 16px var(--p-rose-500-a75),
    0 0 30px var(--p-pink-500-a40);
}

.cal-month-num.today-num {
  color: var(--p-white);
  font-weight: var(--fw-800);
}

/* ── Month Style Dropdown ── */
.cal-style-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 48px;
  z-index: 9999;
  background: var(--p-bg-8);
  border: 1px solid var(--p-white-a15);
  border-radius: 16px;
  padding: 6px;
  min-width: 150px;
  box-shadow: 0 12px 36px var(--p-black-a75);
}

/* ── Detailed Month View (matching Photo 2) ── */
.cal-detail-month-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 60px;
}

.cal-detail-week-row {
  border-top: 1px solid var(--p-white-a12);
  padding: 10px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-detail-week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.cal-detail-day-num {
  font-size: var(--text-base);
  font-weight: var(--fw-700);
  color: var(--p-white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border-radius: 50%;
  transition: background 0.15s;
}
@media (hover: hover) {
  .cal-detail-day-num:hover {
    background: var(--p-white-a10);
  }
}

.cal-detail-day-num.today {
  background: var(--p-rose-500);
  color: var(--p-white);
}

.cal-detail-week-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  min-height: 40px;
}

.cal-detail-day-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cal-detail-post-pill {
  font-size: var(--text-2xs);
  font-weight: var(--fw-600);
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--p-blue-500-a25);
  border: 1px solid var(--p-blue-500-a50);
  color: var(--p-cosmic-15);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.1s;
}
@media (hover: hover) {
  .cal-detail-post-pill:hover {
    transform: scale(1.03);
  }
}

.cal-detail-post-pill.vk {
  background: var(--p-green-500-a25);
  border-color: var(--p-green-500-a50);
  color: var(--p-cosmic-28);
}

.cal-detail-post-pill.ig {
  background: var(--p-pink-500-a25);
  border-color: var(--p-pink-500-a50);
  color: var(--p-pink-400);
}

/* ── Full Year View (Continuous 2025..2030 Feed) ── */
.cal-year-feed-container {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-bottom: 80px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.cal-year-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 16px;
}

.cal-year-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--p-cosmic-29-a85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 6px;
  border-bottom: 1px solid var(--p-white-a8);
}

.cal-year-title-text {
  font-size: var(--text-4xl);
  font-weight: var(--fw-800);
  color: var(--p-white);
  letter-spacing: var(--tracking-tighter);
}

.cal-year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 14px;
}

@media (max-width: 640px) {
  .cal-year-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 10px;
  }
}

.cal-year-month-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  padding: 4px;
  border-radius: 12px;
  transition: background 0.15s;
}
@media (hover: hover) {
  .cal-year-month-card:hover {
    background: var(--p-white-a4);
  }
}

.cal-year-month-name {
  font-size: var(--text-md);
  font-weight: var(--fw-700);
  color: var(--p-white);
  margin-bottom: 2px;
}

.cal-year-month-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  font-size: var(--text-2xs);
  color: var(--p-white-a70);
}

.cal-year-day-num {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cal-year-day-num.weekend {
  color: var(--p-rose-500);
}

.cal-year-day-num.today {
  background: var(--p-rose-500);
  color: var(--p-white);
  font-weight: var(--fw-800);
}

/* ══════════════════════════════════════════════════════════════
   КАЛЕНДАРИ-СЛОИ (Задачи / События / Автопостинг)
   Цвета типов записей, кнопка «Календари», шаг выбора типа.
   ══════════════════════════════════════════════════════════════ */
:root {
  --cal-autoposting: var(--platform-tg, #2aabee);
  --cal-events: var(--p-green-600, #16a34a);
  --cal-tasks: var(--p-orange-600, #ea580c);
}

/* Кнопка «Календари» в шапке слева */
.cal-calendars-wrap {
  position: relative;
  margin-left: 4px;
}

.cal-calendars-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: var(--p-white-a6);
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 12px;
  color: var(--p-white-a85);
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
.cal-calendars-btn:focus,
.cal-calendars-btn:focus-visible,
.cal-calendars-btn:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
@media (hover: hover) {
  .cal-calendars-btn:hover {
    background: var(--p-white-a12);
    border: none !important;
    color: var(--p-white);
  }
}

/* Дропдаун со слоями календарей */
.cal-calendars-dropdown {
  position: absolute;
  top: 44px;
  left: 0;
  min-width: 230px;
  background: var(--p-bg-9);
  border: none !important;
  outline: none !important;
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 16px 48px var(--p-black-a80), 0 0 24px rgba(0, 0, 0, 0.4);
  z-index: 120;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.cal-calendars-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-calendars-divider {
  height: 1px;
  background: var(--p-white-a8);
  margin: 4px 6px;
}

.cal-calendar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
}
@media (hover: hover) {
  .cal-calendar-item:hover {
    background: var(--p-white-a6);
  }
}

.cal-calendar-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
.cal-calendar-icon-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.cal-calendar-name {
  flex: 1;
  font-size: var(--text-md);
  font-weight: var(--fw-500);
  color: var(--p-white);
}
.cal-calendar-toggle {
  transform: scale(0.85);
}
.cal-demo-item {
  margin-top: 2px;
}

/* Шаг выбора типа записи в модалке */
.sheet-kind-selector {
  padding: 4px 0 8px;
}
.kind-selector-title {
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  color: var(--p-white);
  text-align: center;
  margin-bottom: 14px;
}
.kind-selector-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-kind-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--p-white-a4);
  border: 1px solid var(--p-white-a10);
  border-radius: 16px;
  color: var(--p-white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .cal-kind-card:hover {
    border-color: var(--p-purple-a50);
    background: var(--p-purple-600-a8);
  }
}

.cal-kind-card.selected {
  border-color: var(--p-purple-600);
  background: var(--p-purple-600-a14);
}
.cal-kind-emoji {
  font-size: var(--text-2xl);
  flex-shrink: 0;
}
.cal-kind-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-kind-name {
  font-size: var(--text-15);
  font-weight: var(--fw-700);
}
.cal-kind-desc {
  font-size: var(--text-sm);
  color: var(--p-white-a55);
}

/* Бейдж типа записи */
.cal-kind-badge {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: var(--fw-700);
  padding: 1px 7px;
  border-radius: 6px;
  margin-right: 4px;
  vertical-align: middle;
}
.cal-kind-badge.booking {
  color: var(--p-green-400);
  background: var(--p-green-500-a15);
  border: 1px solid var(--p-green-500-a35);
}
.cal-kind-badge.autoposting {
  color: var(--p-platform-tg);
  background: var(--p-platform-tg-a15);
}
.cal-kind-badge.events {
  color: var(--p-green-300);
  background: var(--p-green-700-a15);
}
.cal-kind-badge.tasks {
  color: var(--p-orange-400);
  background: var(--p-orange-500-a15);
}

/* Пилюли-переключатели в модалке: активное состояние */
.sheet-pill-btn.active {
  background: var(--p-purple-600-a20);
  border: 1px solid var(--p-purple-300-a60);
  color: var(--p-purple-pale);
}

/* Цвета карточек по типу записи */
.cal-slot-card.kind-booking {
  border-left-color: var(--cal-booking);
}
.cal-slot-card.kind-event {
  border-left-color: var(--cal-events);
}
.cal-slot-card.kind-task {
  border-left-color: var(--cal-tasks);
}
@media (hover: hover) {
  .cal-slot-card.kind-booking:hover {
    border-color: var(--p-green-500-a60);
  }
}
@media (hover: hover) {
  .cal-slot-card.kind-event:hover {
    border-color: var(--p-green-700-a60);
  }
}
@media (hover: hover) {
  .cal-slot-card.kind-task:hover {
    border-color: var(--p-orange-500-a60);
  }
}

.cal-multi-slot-card.kind-booking {
  background: var(--p-green-500-a30);
  border-color: var(--p-green-500-a60);
}
.cal-multi-slot-card.kind-event {
  background: var(--p-green-700-a30);
  border-color: var(--p-green-700-a60);
}
.cal-multi-slot-card.kind-task {
  background: var(--p-orange-500-a30);
  border-color: var(--p-orange-500-a60);
}

.cal-detail-post-pill.kind-booking {
  background: var(--p-green-500-a25);
  border-color: var(--p-green-500-a50);
  color: var(--p-green-400);
}
.cal-detail-post-pill.kind-event {
  background: var(--p-green-700-a25);
  border-color: var(--p-green-700-a50);
  color: var(--p-green-300);
}
.cal-detail-post-pill.kind-task {
  background: var(--p-orange-500-a25);
  border-color: var(--p-orange-500-a50);
  color: var(--p-orange-400);
}

/* Статус задачи/события/брони в таймлайне */
.cal-slot-status.booking {
  color: var(--p-green-400);
  background: var(--p-green-500-a15);
}
.cal-slot-status.task {
  color: var(--p-orange-400);
  background: var(--p-orange-500-a15);
}
.cal-slot-status.event {
  color: var(--p-green-300);
  background: var(--p-green-700-a15);
}

/* Чекбокс задачи */
.cal-task-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border: 1.5px solid var(--p-white-a40);
  border-radius: 6px;
  color: var(--p-white);
  font-size: var(--text-sm);
  font-weight: var(--fw-700);
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}
@media (hover: hover) {
  .cal-task-check:hover {
    border-color: var(--cal-tasks);
  }
}

.cal-task-check.done {
  background: var(--cal-tasks);
  border-color: var(--cal-tasks);
}

/* Строки сегодняшней панели - акцент по типу */
.today-slot.kind-booking {
  border-left: 3px solid var(--cal-booking);
}
.today-slot.kind-event {
  border-left: 3px solid var(--cal-events);
}
.today-slot.kind-task {
  border-left: 3px solid var(--cal-tasks);
}
.today-slot.kind-post {
  border-left: 3px solid var(--cal-autoposting);
}

/* ═══════════════════════════════════════════════════════════════
   TOP VIEW SEGMENTS (День | Месяц | Сетка каналов)
   ═══════════════════════════════════════════════════════════════ */

.cal-top-switcher {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  width: 100%;
}

.cal-segmented-control {
  display: inline-flex;
  align-items: center;
  background: var(--p-white-a5);
  border: 1px solid var(--p-white-a10);
  padding: 3px;
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  gap: 3px;
  width: 100%;
  max-width: 420px;
}

.cal-segment-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--p-white-a65);
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  border-radius: 11px;
  cursor: pointer;
  text-align: center;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
@media (hover: hover) {
  .cal-segment-btn:hover {
    color: var(--p-white);
    background: var(--p-white-a6);
  }
}

.cal-segment-btn.active {
  background: linear-gradient(135deg, var(--p-purple-strong-a40) 0%, var(--p-blue-500-a40) 100%);
  color: var(--p-white);
  border: 1px solid var(--p-purple-200-a40);
  box-shadow: 0 4px 14px var(--p-purple-strong-a30);
}

/* ═══════════════════════════════════════════════════════════════
   HORIZONTAL MULTI-CALENDAR TIMELINE MATRIX (Photo Reference)
   ═══════════════════════════════════════════════════════════════ */

.cal-matrix-wrapper {
  width: 100%;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--p-cosmic-82-a45) 0%, var(--p-cosmic-83-a55) 100%);
  border: 1px solid var(--p-white-a9);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 12px 32px var(--p-black-a45);
  overflow: hidden;
  margin-bottom: 24px;
}

.cal-matrix-scroll-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--p-white-a20) transparent;
}

.cal-matrix-scroll-container::-webkit-scrollbar {
  height: 6px;
}

.cal-matrix-scroll-container::-webkit-scrollbar-thumb {
  background: var(--p-white-a20);
  border-radius: 3px;
}

.cal-matrix-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
}

/* ── Top Header Row (Dates) ── */
.cal-matrix-head-row {
  background: var(--p-white-a3);
}

.cal-matrix-corner-th {
  position: sticky;
  left: 0;
  z-index: 25;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--p-white-a8);
  border-right: 1px solid var(--p-white-a8);
  background: var(--p-cosmic-29);
  transition:
    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    min-width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cal-matrix-wrapper.is-expanded .cal-matrix-corner-th {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}

.cal-matrix-corner-drawer {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 13px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  gap: 12px;
}

.cal-matrix-corner-label {
  font-size: var(--text-13);
  font-weight: var(--fw-700);
  color: var(--p-white);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.cal-matrix-wrapper.is-expanded .cal-matrix-corner-label {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.cal-matrix-corner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: var(--p-white-a80);
  cursor: pointer;
  flex-shrink: 0;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .cal-matrix-corner-btn:hover {
    background: var(--p-white-a8);
    color: var(--p-white);
  }
}

.cal-matrix-wrapper.is-expanded .cal-matrix-corner-btn {
  background: var(--p-white-a8);
  color: var(--p-white);
}

.cal-matrix-date-th {
  padding: 8px 6px 10px;
  min-width: 72px;
  width: 72px;
  max-width: 72px;
  height: 64px;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 1px solid var(--p-white-a8);
  border-right: 1px solid var(--p-white-a5);
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
  user-select: none;
  vertical-align: middle;
}
@media (hover: hover) {
  .cal-matrix-date-th:hover {
    background: var(--p-white-a4);
  }
}

.cal-matrix-top-indicator {
  position: absolute;
  top: 0;
  left: 6px;
  right: 6px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--p-blue-500-a70);
  box-shadow: 0 0 8px var(--p-blue-500-a50);
}

.cal-matrix-date-th.is-today .cal-matrix-top-indicator {
  background: var(--p-sky-400);
  height: 4px;
  box-shadow: 0 0 12px var(--p-sky-400-a80);
}

.cal-matrix-date-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.cal-matrix-day-num {
  font-size: var(--text-base);
  font-weight: var(--fw-700);
  color: var(--p-white);
}

.cal-matrix-date-th.is-today .cal-matrix-day-num {
  color: var(--p-sky-400);
}

.cal-matrix-day-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-600);
  color: var(--p-white-a65);
}

.cal-matrix-day-name.weekend {
  color: var(--p-rose-400);
}

.cal-matrix-month-name {
  font-size: var(--text-xs);
  color: var(--p-white-a40);
  margin-top: 2px;
  font-weight: var(--fw-500);
}

/* ── Left Sticky Column (Accounts) ── */
.cal-matrix-row {
  height: 68px;
  transition: background 0.15s ease;
}
@media (hover: hover) {
  .cal-matrix-row:hover {
    background: var(--p-white-a1);
  }
}

.cal-matrix-account-td {
  position: sticky;
  left: 0;
  z-index: 20;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  height: 68px;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--p-white-a8);
  border-right: 1px solid var(--p-white-a8);
  background: var(--p-cosmic-29);
  box-sizing: border-box;
  transition:
    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    min-width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cal-matrix-wrapper.is-expanded .cal-matrix-account-td {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}

.cal-matrix-account-drawer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  gap: 12px;
}

.cal-matrix-avatar-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.cal-matrix-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--p-white-a20);
  box-shadow: 0 4px 10px var(--p-black-a30);
  display: block;
}

.cal-matrix-platform-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: var(--text-8);
  font-weight: var(--fw-800);
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid var(--p-black-a40);
}

.cal-matrix-platform-badge.booking {
  background: var(--p-green-500);
  color: var(--p-white);
}

.cal-matrix-platform-badge.telegram {
  background: var(--p-platform-tg);
  color: var(--p-white);
}

.cal-matrix-platform-badge.instagram {
  background: var(--p-platform-ig);
  color: var(--p-white);
}

.cal-matrix-platform-badge.vk {
  background: var(--p-platform-vk);
  color: var(--p-white);
}

.cal-matrix-account-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.cal-matrix-wrapper.is-expanded .cal-matrix-account-text {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.cal-matrix-account-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-700);
  color: var(--p-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-matrix-account-sub {
  font-size: var(--text-2xs);
  color: var(--p-white-a40);
}

/* ── Matrix Cells (Workload Ring & Hours) ── */
.cal-matrix-cell {
  padding: 0 6px;
  min-width: 72px;
  width: 72px;
  max-width: 72px;
  height: 68px;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 1px solid var(--p-white-a8);
  border-right: 1px solid var(--p-white-a5);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.2s ease;
}
@media (hover: hover) {
  .cal-matrix-cell:hover {
    background: var(--p-purple-strong-a8);
  }
}

.cal-matrix-cell.is-today-cell {
  background: var(--p-sky-400-a3);
}
@media (hover: hover) {
  .cal-matrix-cell.is-today-cell:hover {
    background: var(--p-sky-400-a8);
  }
}

/* ── Circular Workload Ring (Ползунок / Кольцо загруженности) ── */
.cal-workload-ring-box {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .cal-workload-ring-box:hover {
    transform: scale(1.12);
  }
}

.cal-workload-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.cal-workload-bg {
  fill: none;
  stroke: var(--p-white-a10);
  stroke-width: 2.8;
}

.cal-workload-fill {
  fill: none;
  stroke: var(--p-green-500);
  stroke-width: 2.8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
  filter: drop-shadow(0 0 6px var(--p-green-500-a60));
}

.cal-matrix-row:nth-child(2) .cal-workload-fill {
  stroke: var(--p-sky-400);
  filter: drop-shadow(0 0 6px var(--p-sky-400-a60));
}

.cal-matrix-row:nth-child(3) .cal-workload-fill {
  stroke: var(--p-pink-400);
  filter: drop-shadow(0 0 6px var(--p-pink-400-a60));
}

.cal-matrix-row:nth-child(4) .cal-workload-fill {
  stroke: var(--p-blue-400);
  filter: drop-shadow(0 0 6px var(--p-blue-400-a60));
}

.cal-matrix-row:nth-child(5) .cal-workload-fill {
  stroke: var(--p-purple-200);
  filter: drop-shadow(0 0 6px var(--p-purple-200-a60));
}

.cal-workload-num {
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  color: var(--p-white);
  z-index: 1;
}

/* ── Empty Matrix Slot (+) ── */
.cal-empty-matrix-slot {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px dashed var(--p-white-a12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p-white-a25);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .cal-empty-matrix-slot:hover {
    border-color: var(--p-purple-300-a60);
    background: var(--p-purple-a15);
    color: var(--p-white);
    transform: scale(1.08);
  }
}

.cal-empty-plus {
  font-size: var(--text-base);
  font-weight: var(--fw-300);
  line-height: var(--leading-none);
}

/* ── Hierarchical Sub-Calendars (Задачи / События) ── */
.cal-matrix-sub-row {
  height: 52px;
  background: var(--p-white-a1);
}
@media (hover: hover) {
  .cal-matrix-sub-row:hover {
    background: var(--p-white-a3);
  }
}

.cal-matrix-sub-td {
  height: 52px;
}

.cal-matrix-sub-drawer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 28px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

.cal-matrix-sub-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.cal-matrix-sub-name {
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  color: var(--p-white-a85);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-matrix-sub-cell {
  height: 52px;
}

.cal-sub-workload-box {
  width: 36px;
  height: 36px;
}

.cal-sub-workload-box .cal-workload-num {
  font-size: var(--text-13);
}

.cal-empty-sub-slot {
  width: 30px;
  height: 30px;
}

.cal-empty-sub-slot .cal-empty-plus {
  font-size: var(--text-md);
}

/* ── Add Sub-Calendar Row ── */
.cal-matrix-add-row {
  height: 44px;
  background: transparent;
}

.cal-matrix-add-drawer {
  padding-left: 28px;
  display: flex;
  align-items: center;
  height: 100%;
}

.cal-matrix-add-sub-btn {
  background: var(--p-white-a4);
  border: none;
  border-radius: 10px;
  color: var(--p-white-a70);
  font-size: var(--text-sm);
  font-weight: var(--fw-600);
  font-family: inherit;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow:
    0 2px 8px var(--p-black-a20),
    inset 0 1px 0 0 var(--p-white-a12);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
@media (hover: hover) {
  .cal-matrix-add-sub-btn:hover {
    background: var(--p-white-a8);
    color: var(--p-white);
    transform: translateY(-1px);
  }
}

.cal-matrix-add-plus {
  font-size: var(--text-md);
  font-weight: var(--fw-700);
  color: var(--p-purple-300, #c084fc);
  line-height: var(--leading-none);
}

.cal-matrix-add-cell {
  height: 44px;
  border-bottom: 1px solid var(--p-white-a4);
}

/* ══════════════════════════════════════════════════════════════
   CALENDAR LIST VIEW (Список событий с цветовой дифференциацией)
   ══════════════════════════════════════════════════════════════ */

.cal-list-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-bottom: 24px;
  box-sizing: border-box;
}

/* List Toolbar */
.cal-list-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--p-white-a3);
  border: 1px solid var(--p-white-a8);
  border-radius: 18px;
  padding: 12px 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cal-list-filters-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cal-list-select-wrap {
  flex: 1 1 140px;
  min-width: 120px;
  position: relative;
}

.cal-list-select {
  width: 100%;
  background: var(--p-white-a6);
  border: 1px solid var(--p-white-a12);
  border-radius: var(--field-radius);
  color: var(--p-white);
  font-size: var(--text-md);
  font-weight: var(--fw-500);
  padding: var(--field-padding);
  padding-right: 34px;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--field-select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
}
@media (hover: hover) {
  .cal-list-select:hover {
    border-color: var(--p-purple-a50);
    background-color: var(--p-white-a10);
  }
}
.cal-list-select:focus {
  border-color: var(--p-purple-a50);
  background-color: var(--p-white-a10);
}

.cal-list-select option {
  background: var(--p-cosmic-30);
  color: var(--p-white);
}

.cal-list-counter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.cal-list-count-badge {
  font-size: var(--text-sm);
  font-weight: var(--fw-600);
  color: var(--p-white-a60);
  background: var(--p-white-a5);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--p-white-a6);
}

.cal-list-add-btn {
  background: linear-gradient(135deg, var(--p-purple-600) 0%, var(--p-purple-300) 100%);
  border: none;
  color: var(--p-white);
  font-size: var(--text-sm);
  font-weight: var(--fw-600);
  padding: 6px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  box-shadow: 0 2px 10px var(--p-purple-600-a30);
}
@media (hover: hover) {
  .cal-list-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--p-purple-300-a45);
  }
}

/* List Cards Container */
.cal-list-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual Event Card */
.cal-list-card {
  position: relative;
  display: flex;
  background: linear-gradient(135deg, var(--p-white-a4) 0%, var(--p-white-a1) 100%);
  border: 1px solid var(--p-white-a8);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px var(--p-black-a25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (hover: hover) {
  .cal-list-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-accent, rgba(168, 85, 247, 0.6));
    box-shadow:
      0 8px 24px var(--p-black-a40),
      0 0 16px rgba(var(--card-accent), 0.15);
  }
}

.cal-list-card:active {
  transform: scale(0.99);
}

/* Left colored accent pill */
.cal-list-card-accent-pill {
  width: 5px;
  flex-shrink: 0;
  transition: width 0.2s ease;
}
@media (hover: hover) {
  .cal-list-card:hover .cal-list-card-accent-pill {
    width: 7px;
  }
}

/* Kind-specific background tinting */
.cal-list-card.kind-booking {
  background: linear-gradient(135deg, var(--p-green-500-a8) 0%, var(--p-green-500-a2) 100%);
  border-color: var(--p-green-500-a20);
}
@media (hover: hover) {
  .cal-list-card.kind-booking:hover {
    border-color: var(--p-green-500-a60);
    box-shadow:
      0 8px 24px var(--p-black-a40),
      0 0 16px var(--p-green-500-a20);
  }
}

.cal-list-card.kind-post {
  background: linear-gradient(135deg, var(--p-platform-tg-a8) 0%, var(--p-platform-tg-a2) 100%);
  border-color: var(--p-platform-tg-a20);
}
@media (hover: hover) {
  .cal-list-card.kind-post:hover {
    border-color: var(--p-platform-tg-a60);
    box-shadow:
      0 8px 24px var(--p-black-a40),
      0 0 16px var(--p-platform-tg-a20);
  }
}

.cal-list-card.kind-task {
  background: linear-gradient(135deg, var(--p-amber-500-a8) 0%, var(--p-amber-500-a2) 100%);
  border-color: var(--p-amber-500-a20);
}
@media (hover: hover) {
  .cal-list-card.kind-task:hover {
    border-color: var(--p-amber-500-a60);
    box-shadow:
      0 8px 24px var(--p-black-a40),
      0 0 16px var(--p-amber-500-a20);
  }
}

.cal-list-card.kind-event {
  background: linear-gradient(135deg, var(--p-pink-500-a8) 0%, var(--p-pink-500-a2) 100%);
  border-color: var(--p-pink-500-a20);
}
@media (hover: hover) {
  .cal-list-card.kind-event:hover {
    border-color: var(--p-pink-500-a60);
    box-shadow:
      0 8px 24px var(--p-black-a40),
      0 0 16px var(--p-pink-500-a20);
  }
}

/* Card Inner Content */
.cal-list-card-main {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Header Row: Date & Status */
.cal-list-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cal-list-date-text {
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  color: var(--p-white-a85);
  letter-spacing: var(--tracking-tight);
}

.cal-list-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.cal-list-badge.new {
  background: var(--p-green-500-a15);
  color: var(--p-green-500);
  border: 1px solid var(--p-green-500-a30);
}

.cal-list-badge.pub {
  background: var(--p-green-700-a18);
  color: var(--p-green-300);
  border: 1px solid var(--p-green-700-a40);
}

.cal-list-badge.ready {
  background: var(--p-amber-500-a18);
  color: var(--p-amber-400);
  border: 1px solid var(--p-amber-500-a40);
}

.cal-list-badge.gen {
  background: var(--p-blue-500-a18);
  color: var(--p-blue-400);
  border: 1px solid var(--p-blue-500-a40);
}

.cal-list-badge.done {
  background: var(--p-green-700-a18);
  color: var(--p-green-300);
  border: 1px solid var(--p-green-700-a40);
}

.cal-list-badge.booking {
  background: var(--p-green-500-a18);
  color: var(--p-green-400);
  border: 1px solid var(--p-green-500-a40);
}

/* Title Row */
.cal-list-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-list-title {
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  color: var(--p-white);
  line-height: var(--leading-snug);
  margin: 0;
  word-break: break-word;
}

.cal-list-title.task-done {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Subtitle */
.cal-list-subtitle {
  font-size: var(--text-13);
  font-weight: var(--fw-500);
  color: var(--p-white-a65);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cal-list-plat-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--text-9);
  font-weight: var(--fw-700);
}
.cal-list-plat-badge.tg {
  background: var(--p-platform-tg-deep);
  color: var(--p-white);
}
.cal-list-plat-badge.ig {
  background: var(--p-ig-red);
  color: var(--p-white);
}
.cal-list-plat-badge.vk {
  background: var(--p-platform-vk);
  color: var(--p-white);
}
.cal-list-plat-badge.yt {
  background: var(--p-platform-yt);
  color: var(--p-white);
}

/* Body */
.cal-list-body {
  font-size: var(--text-sm);
  color: var(--p-white-a55);
  line-height: var(--leading-base);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
}

/* Footer Row */
.cal-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--p-white-a5);
  margin-top: 4px;
}

.cal-list-created-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-list-created-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

.cal-list-created-text {
  font-size: var(--text-xs);
  color: var(--p-white-a45);
}

.cal-list-kind-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--fw-600);
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid;
}

/* Empty State */
.cal-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  background: var(--p-white-a2);
  border: 1px dashed var(--p-white-a10);
  border-radius: 20px;
}

.cal-list-empty-icon {
  font-size: var(--text-5xl);
  margin-bottom: 12px;
  opacity: 0.8;
}

.cal-list-empty-title {
  font-size: var(--text-base);
  font-weight: var(--fw-700);
  color: var(--p-white);
  margin-bottom: 6px;
}

.cal-list-empty-desc {
  font-size: var(--text-13);
  color: var(--p-white-a50);
  max-width: 320px;
  line-height: var(--leading-base);
  margin-bottom: 16px;
}

/* Замутнённые (неактивные) типы в селекторе модалки */
.ee-kind-pill.is-muted {
  opacity: 0.38;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
}

/* Конфликт наложений: «Вы уверены? У вас здесь конфликт» */
.conflict-modal-card {
  max-width: 360px;
}

.conflict-subtitle {
  font-size: var(--text-13);
  color: var(--p-white-a60);
  margin-bottom: 12px;
}

.conflict-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  max-height: 220px;
  overflow-y: auto;
}

.conflict-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--p-white-a5);
}

.conflict-emoji {
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.conflict-info {
  min-width: 0;
}

.conflict-title {
  font-size: var(--text-md);
  font-weight: var(--fw-600);
  color: var(--p-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conflict-meta {
  font-size: var(--text-sm);
  color: var(--p-white-a50);
}

.conflict-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conflict-btn {
  padding: 11px 14px;
  border: none;
  border-radius: 12px;
  font-size: var(--text-md);
  font-weight: var(--fw-600);
  font-family: inherit;
  cursor: pointer;
  background: var(--p-white-a8);
  color: var(--p-white);
  transition: background 0.2s ease;
}
@media (hover: hover) {
  .conflict-btn:hover {
    background: var(--p-white-a14);
  }
}

.conflict-btn-force {
  background: var(--p-rose-500-a45);
}
@media (hover: hover) {
  .conflict-btn-force:hover {
    background: var(--p-rose-500-a60);
  }
}

.conflict-btn-open {
  background: var(--p-green-500-a45);
}
@media (hover: hover) {
  .conflict-btn-open:hover {
    background: var(--p-green-500-a60);
  }
}

/* ── Столбцы наложений в таймлайне (контракт 11.5) ── */
.cal-multi-slot-columns {
  display: flex;
  gap: 2px;
  align-items: stretch;
}

/* ── Секция «Подкалендари» в дропдауне «Календари» (CRUD пары B) ── */
.cal-subcal-section {
  padding: 4px 12px 8px;
  border-bottom: 1px solid var(--p-white-a8);
}

.cal-subcal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 4px;
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  color: var(--p-white-a85);
}

.cal-subcal-count {
  font-size: var(--text-xs);
  font-weight: var(--fw-500);
  color: var(--p-white-a45);
}

.cal-subcal-group-title {
  padding: 8px 0 2px;
  font-size: var(--text-xs);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--p-white-a40);
}

.cal-subcal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.cal-subcal-color {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--p-white-a25);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: transform 0.15s;
}
@media (hover: hover) {
  .cal-subcal-color:hover {
    transform: scale(1.12);
  }
}

.cal-subcal-name {
  flex: 1;
  font-size: var(--text-13);
  color: var(--p-white-a85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-subcal-act {
  background: transparent;
  border: none;
  color: var(--p-white-a50);
  font-size: var(--text-md);
  cursor: pointer;
  padding: 2px 4px;
  line-height: var(--leading-none);
  border-radius: 6px;
}
@media (hover: hover) {
  .cal-subcal-act:hover {
    background: var(--p-white-a10);
    color: var(--p-white);
  }
}
@media (hover: hover) {
  .cal-subcal-del:hover {
    color: var(--p-rose-500);
  }
}

.cal-subcal-add {
  width: 100%;
  margin-top: 4px;
  padding: 6px 0;
  background: var(--p-purple-600-a25);
  border: 1px dashed var(--p-purple-300-a45);
  border-radius: 8px;
  color: var(--p-white-a80);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: center;
}
@media (hover: hover) {
  .cal-subcal-add:hover {
    background: var(--p-purple-600-a40);
    color: var(--p-white);
  }
}

/* ── Квадратная кнопка [+] справа от кнопки Календари ── */
.cal-add-subcal-square-btn {
  padding: 6px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--p-purple-600-a25) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--p-purple-200) !important;
  margin-left: 4px;
}
.cal-add-subcal-square-btn:focus,
.cal-add-subcal-square-btn:focus-visible,
.cal-add-subcal-square-btn:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
@media (hover: hover) {
  .cal-add-subcal-square-btn:hover {
    background: var(--p-purple-600-a45) !important;
    border: none !important;
    color: var(--p-white) !important;
    transform: translateY(-1px);
  }
}

.cal-add-subcal-dropdown {
  min-width: 250px;
  padding: 12px;
}

.cal-subcal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 6px;
}

.cal-subcal-header-title {
  font-size: var(--text-md);
  font-weight: var(--fw-700);
  color: var(--p-white);
}

.cal-subcal-quota-badge {
  font-size: var(--text-xs);
  font-weight: var(--fw-700);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--p-purple-300-a25);
  color: var(--p-purple-200);
  border: 1px solid var(--p-purple-300-a30);
}

.cal-subcal-group-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-700);
  color: var(--p-white-a50);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 6px 4px 4px;
}

.cal-subcal-add-btn {
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
  border-radius: 8px;
  background: var(--p-white-a5);
  color: var(--p-white-a85);
  font-size: var(--text-13);
  font-weight: var(--fw-600);
  text-align: left;
  cursor: pointer;
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .cal-subcal-add-btn:hover {
    background: var(--p-purple-300-a25);
    color: var(--p-white);
  }
}

/* ── Главная кнопка Сохранить внизу формы ── */
.ee-save-main-btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, var(--p-purple-600) 0%, var(--p-pink-500) 100%);
  color: var(--p-white);
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  cursor: pointer;
  box-shadow: 0 4px 18px var(--p-purple-600-a45);
  transition-property:
    background, border-color, color, box-shadow, transform, opacity, filter, border-radius,
    text-decoration, letter-spacing, font-weight;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .ee-save-main-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--p-purple-600-a65);
  }
}

.ee-save-main-btn:active {
  transform: scale(0.98);
}