.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;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    opacity 140ms ease,
    box-shadow 140ms ease;
}button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active{
  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);
  --sotido-brand-telegram: #0088CC;
  --text-main: var(--sotido-theme-text-primary);
  --text-main-inverse: var(--sotido-theme-text-inverse);
  --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;

  --ROW_GAP: 5px;

  /* историческая переменная — читает JS */
  --TIMELINE_LANE_H: var(--ENTRY_H);
  --TIMELINE_LANE_MID_H: 10px;
  /* Surfaces: dark theme */
  --surface-1: var(--sotido-theme-background);
  --surface-2: var(--sotido-theme-surface);
  --surface-3: var(--sotido-theme-surface-soft);
  --surface-4: var(--sotido-theme-surface-raised);
  --surface-5: var(--sotido-theme-surface-chrome);
  --surface-6: var(--sotido-theme-surface-highest);

  --calendar-bg: var(--sotido-theme-background);
  --calendar-bg-image: none;
  --surface-border: color-mix(in srgb, var(--sotido-theme-text-primary) 10%, transparent);
  --shadow-compact: 0 12px 28px color-mix(in srgb, var(--sotido-theme-background) 25%, transparent);
  --shadow-dot: 0 2px 6px color-mix(in srgb, var(--sotido-theme-background) 35%, transparent);
  --shadow-elevated: 0 18px 40px color-mix(in srgb, var(--sotido-theme-background) 65%, transparent);
  --shadow-inset-subtle: 0 14px 30px -10px color-mix(in srgb, var(--sotido-theme-background) 20%, transparent) inset;
  --shadow-panel-filter: drop-shadow(-10px 21px 36px color-mix(in srgb, var(--sotido-theme-background) 60%, transparent));
  --surface-loading-scrim: color-mix(in srgb, var(--sotido-theme-background) 5%, transparent);
  --skeleton-accent-glow: color-mix(in srgb, var(--sotido-theme-accent) 11%, transparent);
  --skeleton-sheen: color-mix(in srgb, var(--sotido-theme-surface-highest) 16%, transparent);
  --purchase-offer-overlay-backdrop: color-mix(in srgb, var(--sotido-theme-background) 62%, transparent);
  --purchase-offer-sheet-shadow: 0 24px 56px color-mix(in srgb, var(--sotido-theme-background) 45%, transparent);
  --purchase-success-ring: color-mix(in srgb, var(--sotido-theme-text-primary) 25%, transparent);
  --purchase-success-ring-strong: color-mix(in srgb, var(--sotido-theme-text-primary) 34%, transparent);
  --purchase-success-shadow-warm: color-mix(in srgb, var(--sotido-theme-warning-text) 28%, transparent);
  --purchase-success-shadow-warm-strong: color-mix(in srgb, var(--sotido-theme-warning-text) 34%, transparent);
  --purchase-success-shadow-hot: color-mix(in srgb, var(--sotido-color-accent-yellow) 36%, transparent);
  --purchase-success-shadow-hot-strong: color-mix(in srgb, var(--sotido-color-accent-yellow) 44%, transparent);
  --purchase-success-sheen: color-mix(in srgb, var(--sotido-theme-text-primary) 45%, transparent);

  /* Buttons */
  --btn-radius: 999px;
  --btn-bg: transparent;
  --btn-bg-secondary: color-mix(in srgb, var(--sotido-theme-text-primary) 10%, transparent);
  --btn-bg-primary: linear-gradient(to bottom right, var(--sotido-color-surface), var(--sotido-color-accent-blue-pressed));
  --btn-border: color-mix(in srgb, var(--sotido-theme-text-primary) 12%, transparent);
  --btn-shadow: 0 10px 22px color-mix(in srgb, var(--sotido-theme-background) 22%, transparent);
  --settings-icon-filter: invert(1);
  --sotido-header-bottom: 0px;
  --sotido-calendar-banner-scroll-spacer-h: 0px;
  --sotido-calendar-top-chrome-measured-h: 0px;
  --sotido-calendar-bottom-chrome-measured-h: 0px;
  --sotido-calendar-top-chrome-min-reserve: calc(env(safe-area-inset-top, 0px) + var(--sotido-recipe-calendar-top-chrome-stack-minimum-reserve));
  --sotido-calendar-bottom-chrome-min-reserve: max(
    var(--sotido-recipe-calendar-lower-chrome-stack-minimum-bottom-reserve),
    calc(var(--sotido-modepanel-min-h) + var(--sotido-recipe-calendar-lower-chrome-stack-horizontal-padding) * 2)
  );
  --sotido-calendar-top-content-inset: max(
    var(--sotido-calendar-top-chrome-measured-h, 0px),
    var(--sotido-calendar-top-chrome-min-reserve)
  );
  --sotido-calendar-bottom-content-inset: max(
    var(--sotido-calendar-bottom-chrome-measured-h, 0px),
    var(--sotido-calendar-bottom-chrome-min-reserve)
  );
  --sotido-modepanel-min-h: calc(72px + env(safe-area-inset-bottom, 0px));
  --sotido-modepanel-h: var(--sotido-modepanel-min-h);
  --sotido-modepanel-right: 0px;
  --sotido-modepanel-left: 0px;
  --sotido-story-strip-bottom: calc(max(var(--sotido-modepanel-h, 0px), var(--sotido-modepanel-min-h)) + 10px);
  --sotido-workspace-head-bottom: calc(var(--sotido-story-strip-bottom, calc(max(var(--sotido-modepanel-h, 0px), var(--sotido-modepanel-min-h)) + 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));
}:is(html[data-theme="light"], body.theme-light, html[data-theme="light"] body){
  --text-main: var(--sotido-theme-text-primary);
  --text-main-inverse: var(--sotido-theme-text-inverse);
  --ev-tone-rgb: var(--ev-tone-light-rgb);

  --surface-1: var(--sotido-theme-background);
  --surface-2: var(--sotido-theme-surface);
  --surface-3: var(--sotido-theme-surface-soft);
  --surface-4: var(--sotido-theme-surface-raised);
  --surface-5: var(--sotido-theme-surface-chrome);
  --surface-6: var(--sotido-theme-surface-highest);

  --calendar-bg: var(--sotido-theme-background);
  --surface-border: color-mix(in srgb, var(--sotido-theme-text-primary) 12%, transparent);
  --shadow-compact: 0 12px 28px color-mix(in srgb, var(--sotido-theme-background) 18%, transparent);
  --shadow-dot: 0 2px 6px color-mix(in srgb, var(--sotido-theme-background) 22%, transparent);
  --shadow-elevated: 0 18px 40px color-mix(in srgb, var(--sotido-theme-background) 18%, transparent);
  --shadow-inset-subtle: 0 14px 30px -10px color-mix(in srgb, var(--sotido-theme-background) 14%, transparent) inset;
  --shadow-panel-filter: drop-shadow(-10px 21px 36px color-mix(in srgb, var(--sotido-theme-background) 28%, transparent));
  --surface-loading-scrim: color-mix(in srgb, var(--sotido-theme-background) 5%, transparent);
  --skeleton-accent-glow: color-mix(in srgb, var(--sotido-theme-accent) 9%, transparent);
  --skeleton-sheen: color-mix(in srgb, var(--sotido-theme-surface-highest) 24%, transparent);
  --purchase-offer-overlay-backdrop: color-mix(in srgb, var(--sotido-theme-background) 62%, transparent);
  --purchase-offer-sheet-shadow: 0 24px 56px color-mix(in srgb, var(--sotido-theme-background) 22%, transparent);
  --purchase-success-ring: color-mix(in srgb, var(--sotido-theme-text-primary) 18%, transparent);
  --purchase-success-ring-strong: color-mix(in srgb, var(--sotido-theme-text-primary) 24%, transparent);
  --purchase-success-shadow-warm: color-mix(in srgb, var(--sotido-theme-warning-text) 22%, transparent);
  --purchase-success-shadow-warm-strong: color-mix(in srgb, var(--sotido-theme-warning-text) 28%, transparent);
  --purchase-success-shadow-hot: color-mix(in srgb, var(--sotido-color-accent-yellow) 28%, transparent);
  --purchase-success-shadow-hot-strong: color-mix(in srgb, var(--sotido-color-accent-yellow) 34%, transparent);
  --purchase-success-sheen: color-mix(in srgb, var(--sotido-theme-text-primary) 36%, transparent);
  --btn-bg-secondary: color-mix(in srgb, var(--sotido-theme-text-primary) 6%, transparent);
  --btn-bg-primary: linear-gradient(to bottom right, var(--sotido-color-surface), var(--sotido-color-divider));
  --btn-border: color-mix(in srgb, var(--sotido-theme-text-primary) 12%, transparent);
  --btn-shadow: 0 10px 22px color-mix(in srgb, var(--sotido-theme-background) 14%, transparent);
  --settings-icon-filter: invert(0);
}/* ---------------- 3) Base layout ---------------- */
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;
  background-color: var(--calendar-bg, var(--sotido-theme-background));
}body{
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  background-color: var(--calendar-bg, var(--sotido-theme-background));
  background-image: var(--calendar-bg-image, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0;
  color: var(--sotido-theme-text-primary);
  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,
.app-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;
  margin-bottom: 8px;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 0px 15px 15px 0px;
  background: var(--sotido-theme-surface-soft);
  color: var(--sotido-theme-text-primary);
  box-shadow: var(--shadow-compact);
}
html[data-app-surface-bundle="calendar-surface"] body:not(.discover-mode):not(.feed-mode) .app-shell,
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) .app-shell,
body.calendar-mode-grid:not(.discover-mode):not(.feed-mode) .app-shell,
body.workflow-screen-open .app-shell{
  --sotido-calendar-root-top-spacer-h: 0px;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}
html[data-app-surface-bundle="calendar-surface"] body:not(.discover-mode):not(.feed-mode) .app-top-chrome-stack,
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) .app-top-chrome-stack,
body.calendar-mode-grid:not(.discover-mode):not(.feed-mode) .app-top-chrome-stack,
body.workflow-screen-open .app-top-chrome-stack{
  grid-row: 1;
  grid-column: 1;
  position: sticky;
  align-self: start;
  left: var(--sotido-recipe-calendar-top-chrome-stack-outer-inset);
  right: var(--sotido-recipe-calendar-top-chrome-stack-outer-inset);
  top: calc(env(safe-area-inset-top, 0px) + var(--sotido-recipe-calendar-top-chrome-stack-safe-area-top-gap));
  justify-self: center;
  z-index: 3300;
  width: min(
    calc(100% - (2 * var(--sotido-recipe-calendar-top-chrome-stack-outer-inset)) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)),
    var(--sotido-recipe-calendar-top-chrome-stack-max-width)
  );
  display: grid;
  gap: var(--sotido-recipe-calendar-top-chrome-stack-stack-gap);
  pointer-events: none;
  box-sizing: border-box;
}
body.workflow-screen-open .app-top-chrome-stack{
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--sotido-recipe-calendar-top-chrome-stack-safe-area-top-gap));
  left: auto;
  right: auto;
  transform: none;
  align-self: start;
  align-items: start;
  grid-auto-rows: auto;
}
html[data-app-surface-bundle="calendar-surface"] body:not(.discover-mode):not(.feed-mode) .app-bottom-chrome-stack,
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) .app-bottom-chrome-stack,
body.calendar-mode-grid:not(.discover-mode):not(.feed-mode) .app-bottom-chrome-stack,
body.workflow-screen-open .app-bottom-chrome-stack{
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  position: sticky;
  left: max(0px, env(safe-area-inset-left, 0px));
  right: max(0px, env(safe-area-inset-right, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sotido-recipe-calendar-lower-chrome-stack-bottom-padding));
  justify-self: center;
  z-index: 3200;
  width: min(
    calc(100% - var(--sotido-recipe-calendar-lower-chrome-stack-viewport-horizontal-inset) * 2 - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)),
    var(--sotido-recipe-calendar-lower-chrome-stack-max-width)
  );
  display: grid;
  gap: var(--sotido-recipe-calendar-lower-chrome-stack-stack-spacing);
  pointer-events: none;
  box-sizing: border-box;
}
#appSurfaceStage{
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}
#appSurfaceStage[aria-hidden="true"],
#appSurfaceStage[data-active-surface-host="calendar"]{
  display: none;
  pointer-events: none;
}
body.workflow-screen-open #appSurfaceStage,
#appSurfaceStage[data-active-surface-host="workflow"]{
  display: block;
  pointer-events: auto;
}
#appSurfaceWorkflowHost[hidden],
#appSurfaceWorkflowHost[aria-hidden="true"]{
  display: none;
  pointer-events: none;
}
.app-surface-host-workflow{
  width: 100%;
  height: 100%;
  min-height: 0;
}
#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;
}
html[data-app-surface-bundle="calendar-surface"] body:not(.discover-mode):not(.feed-mode) #rootContent,
body.calendar-mode-list:not(.discover-mode):not(.feed-mode) #rootContent,
body.calendar-mode-grid:not(.discover-mode):not(.feed-mode) #rootContent{
  grid-row: 1;
  padding-top: var(--sotido-calendar-top-content-inset);
  padding-bottom: var(--sotido-calendar-bottom-content-inset);
  scroll-padding-top: var(--sotido-calendar-top-content-inset);
  scroll-padding-bottom: var(--sotido-calendar-bottom-content-inset);
}
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: calc(
    var(--sotido-calendar-top-content-inset) + var(--sotido-root-demo-floating-cta-reserve, 0px)
  );
}
body.feed-mode #rootContent,
body.events-viewer-route #rootContent{
  height: auto;
  min-height: 100%;
  overflow: visible;
}
html[data-app-surface-bundle="events-surface"] #calendarThemeBanner,
html[data-app-surface-bundle="events-surface"] #calendarFilterDock,
html[data-app-surface-bundle="events-surface"] #calendarStoryControlsHost,
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"] #calendarFilterDock,
html[data-app-surface-bundle="discover-surface"] #calendarStoryControlsHost,
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.event-compose-screen-open #calendarThemeBanner,
body.event-compose-screen-open .calendar-theme-banner,
body.event-compose-screen-open #calendarTopControlsHost,
body.event-compose-screen-open .calendar-top-controls-host,
body.event-compose-screen-open #calendarFilterDock,
body.event-compose-screen-open .calendar-filter-dock,
body.calendar-settings-screen-open #calendarThemeBanner,
body.calendar-settings-screen-open .calendar-theme-banner,
body.calendar-settings-screen-open #calendarTopControlsHost,
body.calendar-settings-screen-open .calendar-top-controls-host,
body.calendar-settings-screen-open #calendarFilterDock,
body.calendar-settings-screen-open .calendar-filter-dock,
body.calendar-settings-screen-open #calendarStoryControlsHost,
body.calendar-settings-screen-open #calendarStoryStrip{
  display: none !important;
}
body.event-compose-screen-open #rootContent,
body.calendar-settings-screen-open #rootContent{
  display: none !important;
}
body.workflow-screen-open #calendarThemeBanner,
body.workflow-screen-open .calendar-theme-banner,
body.workflow-screen-open #calendarTopControlsHost,
body.workflow-screen-open .calendar-top-controls-host,
body.workflow-screen-open #calendarFilterDock,
body.workflow-screen-open .calendar-filter-dock,
body.workflow-screen-open #calendarStoryControlsHost,
body.workflow-screen-open #calendarStoryStrip,
body.workflow-screen-open #workspaceOverlayHead,
body.workflow-screen-open #topRightOverlayActions{
  display: none !important;
}
body.workflow-screen-open #rootContent{
  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(--sotido-theme-surface-highest);
}
.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(max(var(--sotido-modepanel-h, 0px), var(--sotido-modepanel-min-h)) + 12px);
  min-height: 220px;
  border-radius: 18px;
  border: 1px solid var(--sotido-theme-border);
  background: var(--sotido-theme-surface);
  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(--sotido-theme-surface-raised);
  color: var(--sotido-theme-text-primary);
  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(--sotido-theme-text-primary);
  text-align: center;
}
.workspace-shell-placeholder-copy{
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.72;
}
.workspace-overlay.is-shell-placeholder[data-workflow-screen="1"],
.task-overlay.is-shell-placeholder[data-workflow-screen="1"]{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--sotido-theme-background);
  overflow: hidden;
}
body.workflow-screen-open .workspace-overlay.is-shell-placeholder[data-workflow-screen="1"],
body.workflow-screen-open .task-overlay.is-shell-placeholder[data-workflow-screen="1"]{
  pointer-events: auto;
}
.workflow-shell-skeleton{
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  filter: none;
  pointer-events: auto;
}
.workflow-shell-skeleton-box{
  min-height: 100%;
  box-sizing: border-box;
  padding: max(22px, var(--sotido-calendar-top-content-inset, 20px)) 12px calc(var(--sotido-modepanel-h, calc(48px + env(safe-area-inset-bottom, 0px) + 4px)) + 14px);
  background:
    radial-gradient(circle at 18% 0%, var(--skeleton-accent-glow), transparent 34%),
    linear-gradient(180deg, var(--sotido-theme-surface), var(--sotido-theme-background));
  color: var(--sotido-theme-text-primary);
  border-radius: 0;
  box-shadow: none;
}
.workflow-shell-skeleton-header{
  max-width: 780px;
  margin: 0 auto 12px;
  padding: 16px;
  border: 1px solid var(--sotido-theme-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--sotido-theme-surface-soft) 82%, transparent);
}
.workflow-shell-skeleton-kicker{
  font-size: 11px;
  line-height: 1.2;
  color: var(--sotido-theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.workflow-shell-skeleton-title{
  margin-top: 5px;
  font-size: 22px;
  line-height: 1.08;
  font-weight: 800;
}
.workflow-shell-skeleton-copy{
  margin-top: 6px;
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
  line-height: 1.35;
}
.workflow-shell-skeleton-tabs,
.workflow-shell-skeleton-search,
.workflow-shell-skeleton-subtabs,
.workflow-shell-skeleton-section{
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.workflow-shell-skeleton-tabs{
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.workflow-shell-skeleton-tabs .task-seg-btn{
  opacity: 0.78;
}
.workflow-shell-skeleton-searchbar{
  display: block;
  height: 40px;
  border-radius: 16px;
  border: 1px solid var(--sotido-theme-border);
  background: var(--sotido-theme-surface-soft);
  color: var(--sotido-theme-text-secondary);
  font-size: 13px;
  line-height: 40px;
  padding: 0 14px;
}
.workflow-shell-skeleton-subtabs{
  display: flex;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 12px;
}
.workflow-shell-skeleton-subtabs span{
  display: block;
  width: 72px;
  height: 28px;
  border-radius: 999px;
  background: var(--sotido-theme-surface-raised);
}
.workflow-shell-skeleton-section{
  display: grid;
  gap: 10px;
}
.workflow-shell-skeleton-row{
  min-height: 70px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--sotido-theme-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--sotido-theme-surface-soft) 72%, transparent);
}
.workflow-shell-skeleton-avatar,
.workflow-shell-skeleton-line,
.workflow-shell-skeleton-chip{
  position: relative;
  overflow: hidden;
  background: var(--sotido-theme-surface-chrome);
}
.workflow-shell-skeleton-avatar{
  width: 42px;
  height: 42px;
  border-radius: 14px;
}
.workflow-shell-skeleton-lines{
  display: grid;
  gap: 8px;
}
.workflow-shell-skeleton-line{
  display: block;
  height: 10px;
  border-radius: 999px;
}
.workflow-shell-skeleton-line--strong{
  width: min(240px, 72%);
}
.workflow-shell-skeleton-line--muted{
  width: min(320px, 92%);
  opacity: 0.72;
}
.workflow-shell-skeleton-chip{
  min-width: 54px;
  height: 24px;
  border-radius: 999px;
  color: transparent;
}
.workflow-shell-skeleton-avatar:after,
.workflow-shell-skeleton-line:after,
.workflow-shell-skeleton-chip:after{
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-sheen), transparent);
  animation: workflowSkeletonSweep 1.4s ease-in-out infinite;
}
@keyframes workflowSkeletonSweep{
  100%{
    transform: translateX(100%);
  }
}
@keyframes tgspin{
  to{
    transform: rotate(360deg);
  }
}
@keyframes sotidoLogoSpin{
  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{
  --sotido-logo-spinner-size: 16px;
  --sotido-logo-spinner-src: url("/static/svg/seclogo.webp");
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
  border: 0;
  background: center / contain no-repeat var(--sotido-logo-spinner-src);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sotido-theme-border) 72%, transparent);
  animation: sotidoLogoSpin 0.95s linear infinite;
  transform-origin: 50% 50%;
}
.sotido-logo-spinner{
  --sotido-logo-spinner-size: 18px;
  --sotido-logo-spinner-src: url("/static/svg/seclogo.webp");
  width: var(--sotido-logo-spinner-size);
  height: var(--sotido-logo-spinner-size);
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
  background: center / contain no-repeat var(--sotido-logo-spinner-src);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sotido-theme-border) 72%, transparent);
  animation: sotidoLogoSpin 0.95s linear infinite;
  transform-origin: 50% 50%;
}
.sotido-loading-inline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.sotido-loading-inline::before{
  content: '';
  --sotido-logo-spinner-size: 14px;
  --sotido-logo-spinner-src: url("/static/svg/seclogo.webp");
  width: var(--sotido-logo-spinner-size);
  height: var(--sotido-logo-spinner-size);
  border-radius: 999px;
  flex: 0 0 auto;
  background: center / contain no-repeat var(--sotido-logo-spinner-src);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sotido-theme-border) 72%, transparent);
  animation: sotidoLogoSpin 0.95s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .calendar-sync-spinner,
  .sotido-logo-spinner,
  .sotido-loading-inline::before{
    animation-duration: 1.8s;
  }
}
@media (hover: none) and (pointer: coarse){
  #rootContent.list{
    --calendar-pull-space-top: 0px;
    --calendar-pull-space-bottom: 0px;
  }
}