.hidden{
  display: none !important;
}input, textarea{
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  padding: 4px 6px;
}input, textarea, select, button{
  font: inherit;
}button,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    opacity 140ms ease,
    filter 140ms ease,
    outline-color 140ms ease,
    box-shadow 140ms ease;
}button:focus,
button:focus-visible,
button:active,
input[type="button"]:focus,
input[type="button"]:focus-visible,
input[type="button"]:active,
input[type="submit"]:focus,
input[type="submit"]:focus-visible,
input[type="submit"]:active,
input[type="reset"]:focus,
input[type="reset"]:focus-visible,
input[type="reset"]:active{
  outline: none;
  box-shadow: none;
}.clickable{
  cursor: pointer;
}
/* ---------------- 2) Variables ---------------- */
:root{  --ev-tone-dark-rgb: 200, 200, 200;
  --ev-tone-light-rgb: 230, 230, 230;
  --ev-tone-rgb: var(--ev-tone-dark-rgb);
  --accentBlueDark: #32aaff;
  --accentBlueLight: #385DBA;
  --accentRedDark: #FF7174;
  --accentRedLight: #DC0000;
  --accentGreenDark: #34c759;
  --accentGreenLight: #006200;
  --accentYellowDark: #ffd60a;
  --accentYellowLight: #8E6B00;
  --accent-blue: var(--accentBlueDark);
  --accent-red: var(--accentRedDark);
  --accent-green: var(--accentGreenDark);
  --accent-yellow: var(--accentYellowDark);
  --accent-blue-alpha: rgba(50, 170, 255, 0.69);
  --interactive-hover-bg: var(--surface-3);
  --interactive-active-bg: var(--surface-4);
  --interactive-focus-ring: var(--accent-blue);
  --interactive-focus-width: 2px;
  --interactive-focus-offset: 2px;
  --interactive-hover-filter: brightness(1.06);
  --interactive-active-filter: brightness(0.94);
  --text-main: #ffffff;
  --text-main-inverse: #000000;
  --card: #151517;
  --border: #2a2a2e;
  --sotido-focus-top: 164px;
  --today-sep-floating-top-gap: 8px;
  --today-sep-floating-bottom-gap: 200px;
  --connector-edge-inset: 18px;

  /* базовые размеры для записей / отступов */
  --ENTRY_H: 30px;            /* высота записи (лист + таймлайн) */
  --ENTRY_V_PADDING: 0px;

  --DAY_W: 30px;              /* ширина колонки даты */
  --ROW_GAP: 5px;

  /* историческая переменная — читает JS */
  --TIMELINE_LANE_H: var(--ENTRY_H);
  --TIMELINE_LANE_MID_H: 10px;
  --calendar-base-bg: #121212;
  --calendar-visual-image: none;
  --calendar-visual-color: var(--calendar-base-bg);

  /* Text scale */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 14px;
  --text-xl: 16px;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 800;

  /* Surfaces */
  --surface-1: rgba(171, 171, 171, 0.25);
  --surface-2: rgb(24,24,24);
  --surface-3: rgba(255,255,255,0.05);
  --surface-4: rgba(71, 71, 71, 0.6);
  --surface-5: rgba(0, 0, 0, 0.25);
  --surface-6: rgb(255, 255, 255);
  --surface-7: rgba(255, 255, 255, 0.35);
  --surface-8: rgb(45, 45, 45);
  --surface-9: rgb(87, 87, 87);  
  --sheader: #5c5c5c;  
  --safe-area-top-bg: var(--sheader);
  --surface-10event: rgb(69, 69, 69);
  --surface-11event: rgb(37, 37, 37);
  --surface-viewer: #161616;
  --surface-border: rgba(255,255,255,0.10);
  --shadow-elevated: 0 18px 40px rgba(0,0,0,0.65);

  /* Inputs */
  --input-bg: #0f0f11;
  --input-border: rgba(255,255,255,0.20);
  --input-radius: 10px;

  /* Buttons */
  --btn-radius: 999px;
  --btn-bg: transparent;
  --btn-bg-secondary: rgba(255,255,255,0.10);
  --btn-bg-primary: linear-gradient(to bottom right, #ffffff, #7177bc);
  --btn-border: rgba(255,255,255,0.12);
  --btn-shadow: 0 10px 22px rgba(0,0,0,0.22);
  --settings-icon-filter: invert(1);
  --sotido-header-bottom: 0px;
  --sotido-modepanel-h: calc(48px + env(safe-area-inset-bottom, 0px) + 4px);
  --sotido-modepanel-right: 0px;
  --sotido-modepanel-left: 0px;
  --sotido-story-strip-bottom: calc(var(--sotido-modepanel-h, calc(48px + env(safe-area-inset-bottom, 0px) + 4px)) + 10px);
  --sotido-workspace-head-bottom: calc(var(--sotido-story-strip-bottom, calc(var(--sotido-modepanel-h, calc(48px + env(safe-area-inset-bottom, 0px) + 4px)) + 10px)) + 54px);
  --sotido-root-demo-floating-cta-top: calc(var(--sotido-header-bottom, 0px) + 48px);
  --sotido-root-demo-floating-cta-reserve: 0px;
  --sotido-root-demo-safe-top: calc(var(--sotido-header-bottom, 0px) + var(--sotido-root-demo-floating-cta-reserve, 0px));
}body.theme-light, html[data-theme="light"] body{
  --accent-blue: var(--accentBlueLight);
  --accent-red: var(--accentRedLight);
  --accent-green: var(--accentGreenLight);
  --accent-yellow: var(--accentYellowLight);
  --accent-blue-alpha: rgba(0, 122, 255, 0.69);
  --calendar-base-bg: #f6f6f6;
  --text-main: #000000;
  --text-main-inverse: #ffffff;
  --card: #ffffff;
  --border: #d8d8dd;
  --ev-tone-rgb: var(--ev-tone-light-rgb);

  --surface-1: rgba(0,0,0,0.15);
  --surface-2: rgba(255,255,255,1);
  --surface-3: rgba(0,0,0,0.15);
  --surface-4: rgba(255,255,255,0.60);
  --surface-5: rgba(200, 200, 200, 0.25);
  --surface-6: rgb(0, 0, 0);
  --surface-7: rgba(32, 32, 32, 0.35);
  --surface-8: rgb(196, 196, 196);
  --surface-9: rgb(242, 242, 242);
  --surface-10event: rgb(222, 222, 222);
  --surface-11event: rgb(255, 255, 255);
  --surface-viewer: #d9d9d9;
  --sheader: #ebebeb;
  --surface-border: rgba(0,0,0,0.12);
  --shadow-elevated: 0 18px 40px rgba(0,0,0,0.18);
  --input-bg: #c9c9c9;
  --input-border: rgba(0,0,0,0.12);
  --input-radius: 10px;
  --btn-bg-secondary: rgba(0,0,0,0.06);
  --btn-bg-primary: linear-gradient(to bottom right, #ffffff, #d6d6d6);
  --btn-border: rgba(0,0,0,0.12);
  --btn-shadow: 0 10px 22px rgba(0,0,0,0.14);
  --settings-icon-filter: invert(0);
}/* ---------------- 3) Base layout ---------------- */
:is(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled):not(.disabled):focus-visible{
  outline: var(--interactive-focus-width) solid var(--interactive-focus-ring);
  outline-offset: var(--interactive-focus-offset);
}
@media (hover: hover){
  :is(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled):not(.disabled):hover{
    filter: var(--interactive-hover-filter);
  }
  body :is(
    .mode-panel .mode-panel-entry-btn,
    .calendar-theme-banner .banner-actions .banner-action-btn,
    .calendar-view-switcher-btn,
    .workspace-overlay-filter-toggle,
    .task-overlay-filter-toggle,
    #modal .event-modal-header .event-modal-tabs-close,
    .mode-account-popover-btn,
    .calendar-story-folder-create-btn,
    .cal-settings-head-close-btn,
    .cal-settings-cal-help-btn.tasklist-connect-help,
    .cal-create-group-choice-btn,
    .cal-create-group-manual-avatar-btn,
    .tasklist-input-slot .tasklist-remove,
    .today-sep.today-sep-floating .today-sep-pill,
    .day-expanded-control-btn,
    .discover-map-left-controls .discover-map-layer-btn,
    .map-picker-point-marker.map-picker-point-marker-discover,
    .event-note-cover-slide,
    .event-note-cover-slide-remove,
    .event-note-cover-slot
  ):not(:disabled):not(.disabled):hover{
    background: var(--interactive-hover-bg);
    filter: none;
  }
}
:is(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled):not(.disabled):active{
  filter: var(--interactive-active-filter);
}
body :is(
  .mode-panel .mode-panel-entry-btn,
  .calendar-theme-banner .banner-actions .banner-action-btn,
  .calendar-view-switcher-btn,
  .workspace-overlay-filter-toggle,
  .task-overlay-filter-toggle,
  #modal .event-modal-header .event-modal-tabs-close,
  .mode-account-popover-btn,
  .calendar-story-folder-create-btn,
  .cal-settings-head-close-btn,
  .cal-settings-cal-help-btn.tasklist-connect-help,
  .cal-create-group-choice-btn,
  .cal-create-group-manual-avatar-btn,
  .tasklist-input-slot .tasklist-remove,
  .today-sep.today-sep-floating .today-sep-pill,
  .day-expanded-control-btn,
  .discover-map-left-controls .discover-map-layer-btn,
  .map-picker-point-marker.map-picker-point-marker-discover,
  .event-note-cover-slide,
  .event-note-cover-slide-remove,
  .event-note-cover-slot
):not(:disabled):not(.disabled):active{
  background: var(--interactive-active-bg);
  filter: none;
}
html, body{
  overflow-anchor: none !important;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  height: 100%;
}
html{
  overscroll-behavior: none;
}body{
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  background-color: var(--calendar-visual-color, var(--calendar-base-bg, #121212));
  background-image: var(--calendar-visual-image, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0;
  color: var(--text-main);
  position: relative;
}
html:has(body.calendar-mode-list:not(.discover-mode):not(.feed-mode)),
body.calendar-mode-list:not(.discover-mode):not(.feed-mode),
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) #rootContent{
  overflow-anchor: auto !important;
}
.app-surface-stage,
.app-surface-host,
.calendar-list-shell,
#rootContent{
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.calendar-month-header{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  font-weight: 500;
}
.calendar-month-header-label{
  display: inline-block;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 0px 15px 15px 0px;
  background: var(--text-main-inverse);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(5px);
}
html[data-app-surface-bundle="calendar-surface"] body:not(.discover-mode):not(.feed-mode) .calendar-list-shell,
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) .calendar-list-shell,
body.calendar-mode-grid:not(.discover-mode):not(.feed-mode) .calendar-list-shell{
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}
#rootContent{
  grid-row: 2 / 5;
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) #rootContent{
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.demo-mode.calendar-mode-list:not(.discover-mode):not(.feed-mode) #rootContent{
  padding-top: var(--sotido-root-demo-floating-cta-reserve, 0px);
}
body.feed-mode #rootContent,
body.events-viewer-route #rootContent,
body.discover-mode #rootContent{
  height: auto;
  min-height: 100%;
  overflow: visible;
}
html[data-app-surface-bundle="events-surface"] #calendarThemeBanner,
html[data-app-surface-bundle="events-surface"] #calendarStoryStrip,
html[data-app-surface-bundle="events-surface"] #topRightOverlayActions,
html[data-app-surface-bundle="events-surface"] #workspaceOverlayHead,
html[data-app-surface-bundle="events-surface"] #workspaceOverlay,
html[data-app-surface-bundle="events-surface"] #workspaceOverlay,
html[data-app-surface-bundle="events-surface"] #calendarMyUtcLabelPanel,
html[data-app-surface-bundle="discover-surface"] #calendarThemeBanner,
html[data-app-surface-bundle="discover-surface"] #calendarStoryStrip,
html[data-app-surface-bundle="discover-surface"] #topRightOverlayActions,
html[data-app-surface-bundle="discover-surface"] #workspaceOverlayHead,
html[data-app-surface-bundle="discover-surface"] #workspaceOverlay,
html[data-app-surface-bundle="discover-surface"] #workspaceOverlay,
html[data-app-surface-bundle="discover-surface"] #calendarMyUtcLabelPanel{
  display: none !important;
}
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) #rootContent{
  flex: 1 1 auto;
  min-height: 100%;
  box-sizing: border-box;
}
#rootContent.calendar-switch-slide{
  transform: translate3d(34px, 0, 0);
  opacity: 0.06;
}
#rootContent.calendar-switch-slide.calendar-switch-slide-active{
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: transform 240ms cubic-bezier(.22,.78,.25,1), opacity 240ms ease;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce){
  #rootContent.calendar-switch-slide,
  #rootContent.calendar-switch-slide.calendar-switch-slide-active{
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    will-change: auto !important;
  }
}
body.feed-mode #rootContent,
body.events-viewer-route #rootContent{
  flex: 1 0 auto;
}
body.calendar-mode-panel-rail #rootContent{
  --sotido-modepanel-h: 0px !important;
}
#safeAreaTopBg{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  pointer-events: none;
  z-index: 0;
  background: var(--safe-area-top-bg, var(--sheader));
}
.workspace-overlay.is-shell-placeholder,
.task-overlay.is-shell-placeholder{
  order: 2;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  pointer-events: auto;
}
.workspace-shell-placeholder-panel{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(var(--sotido-modepanel-h, calc(48px + env(safe-area-inset-bottom, 0px) + 4px)) + 12px);
  min-height: 220px;
  border-radius: 18px;
  border: 1px solid var(--surface-border);
  background: var(--surface-2);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.workspace-shell-placeholder-head{
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  background: var(--surface-4);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
}
.workspace-shell-placeholder-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 20px;
  color: var(--text-main);
  text-align: center;
}
.workspace-shell-placeholder-copy{
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.72;
}
@keyframes tgspin { to { transform: rotate(360deg); } }.calendar-sync-indicator{
  position: fixed;
  top: calc(var(--sotido-header-bottom, calc(0px + 0px)) + 40px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  width: 28px;
  height: 28px;
  border-radius: var(--btn-radius);
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--btn-shadow);
}.calendar-sync-indicator.is-visible{
  display: flex;
}body.demo-mode .calendar-sync-indicator{
  top: calc(var(--sotido-root-demo-safe-top, var(--sotido-header-bottom, calc(0px + 0px))) + 40px);
}.calendar-sync-spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--btn-border);
  border-top-color: var(--text-main);
  animation: tgspin 0.9s cubic-bezier(0.2, 0, 0.8, 1) infinite;
}
@media (hover: none) and (pointer: coarse){
  #rootContent.list{
    --calendar-pull-space-top: 0px;
    --calendar-pull-space-bottom: 0px;
  }
}