:root {
        --page: #e7ecf6;
        --phone: #d9dfec;
        --white: #fbfcff;
        --navy: #20223d;
        --blue: #2f66df;
        --navy-soft: #646c87;
        --text: #252943;
        --muted: #7b839d;
        --line: #dde3f0;
        --danger: #f3b0ab;
        --danger-strong: #ff6f61;
        --success: #9be5aa;
        --success-strong: #2bb54c;
        --chat-bg: #eef3fb;
        --chat-bg-strong: #e5ecf8;
        --chat-line: rgba(125, 141, 181, 0.22);
        --chat-bubble: rgba(255, 255, 255, 0.96);
        --chat-bubble-own: rgba(222, 247, 214, 0.98);
        --chat-avatar-ring: rgba(115, 130, 165, 0.14);
        --surface-soft: rgba(255, 255, 255, 0.5);
        --shadow: 0 24px 60px rgba(35, 41, 67, 0.16);
        --keyboard-offset: 0px;
        --app-viewport-height: 100dvh;
      }

      * {
        box-sizing: border-box;
      }

      html {
        height: 100%;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        min-height: var(--app-viewport-height);
        background: var(--page);
        color: var(--text);
        font-family: Poppins, "Segoe UI", sans-serif;
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation;
      }

      body {
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        width: 100%;
        min-height: var(--app-viewport-height);
        padding: 0;
        -webkit-tap-highlight-color: transparent;
      }

      button,
      select,
      input,
      textarea {
        font: inherit;
        touch-action: manipulation;
      }

      button {
        line-height: 1;
      }

      button svg,
      button img,
      .icon-badge svg,
      .button-icon svg,
      .overview-download-icon svg,
      .home-folder-badge svg,
      .participant-avatar svg,
      .message-attachment-icon svg,
      .message-draft-attachment-badge svg,
      .media-row-file-badge svg,
      .detail-checklist-edit svg,
      .detail-checklist-remove svg,
      .detail-schedule-remove svg,
      .detail-checklist-inline-cancel svg,
      .detail-inline-edit-icon svg,
      .detail-inline-popup-close svg,
      .template-options-modal-close svg,
      .participant-remove svg,
      .participant-attendance-action svg,
      .home-footer-link svg,
      .home-folder-menu-button svg,
      .list-tool-button svg,
      .pdf-preview-icon-button svg {
        display: block;
        flex: 0 0 auto;
      }

      .icon-badge,
      .list-tool-button,
      .home-notification-button,
      .home-account-button,
      .home-folder-add,
      .home-footer-link,
      .message-search-toggle,
      .chat-search-toggle,
      .pdf-preview-icon-button,
      .participant-remove,
      .participant-attendance-action,
      .subitem-modal-close,
      .detail-action.attachment-add,
      .detail-expense-toggle,
      .detail-checklist-edit,
      .detail-checklist-remove,
      .detail-checklist-add,
      .detail-inline-popup-close,
      .message-attach,
      .message-send,
      .ai-chat-send-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        line-height: 1;
      }

      .phone {
        position: relative;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        max-width: none;
        height: var(--app-viewport-height);
        min-height: var(--app-viewport-height);
        max-height: none;
        overflow: hidden;
        border-radius: 0;
        background: var(--phone);
        box-shadow: none;
      }

      .app {
        flex: 1 1 auto;
        min-height: 0;
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        padding:
          max(18px, env(safe-area-inset-top))
          max(18px, env(safe-area-inset-right))
          calc(max(18px, env(safe-area-inset-bottom)) + var(--keyboard-offset))
          max(18px, env(safe-area-inset-left));
      }

      .app::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .screen {
        display: none;
      }

      .hidden {
        display: none !important;
      }

      .screen.active {
        display: block;
      }

      .subitem-modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: flex-end;
        justify-content: center;
        padding: 18px 18px calc(18px + var(--keyboard-offset));
        background: rgba(20, 24, 40, 0.34);
        z-index: 120;
      }

      .subitem-modal.active {
        display: flex;
      }

      .dialog-modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left));
        background: rgba(20, 24, 40, 0.38);
        z-index: 130;
      }

      .dialog-modal.active {
        display: flex;
      }

      .dialog-modal-card {
        width: 100%;
        max-width: 372px;
        padding: 22px 18px 18px;
        border-radius: 24px;
        background: rgba(251, 252, 255, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.72);
        box-shadow: 0 24px 54px rgba(21, 24, 43, 0.25);
        text-align: left;
        position: relative;
      }

      .dialog-modal-head {
        display: grid;
        gap: 8px;
        padding-right: 44px;
      }

      .dialog-modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy-soft);
        background: rgba(232, 238, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
        cursor: pointer;
      }

      .dialog-modal-close svg {
        width: 17px;
        height: 17px;
      }

      .dialog-modal-kicker {
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .dialog-modal-head h3 {
        margin: 0;
        color: var(--navy);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.14;
      }

      .dialog-modal-body {
        display: grid;
        gap: 8px;
        margin-top: 12px;
      }

      .dialog-modal-body p {
        margin: 0;
        color: var(--navy);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.45;
        overflow-wrap: anywhere;
      }

      .dialog-modal-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 24px;
      }

      .dialog-modal-actions-custom {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
      }

      .dialog-modal,
      .dialog-modal *,
      .dialog-modal-card,
      .dialog-modal-card *,
      .dialog-modal-actions,
      .dialog-modal-actions button,
      .dialog-modal-actions button * {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
      }

      .dialog-modal-actions .secondary,
      .dialog-modal-actions .primary {
        width: 100%;
        min-width: 0;
        height: 50px;
        padding: 0 14px;
        border-radius: 18px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
      }

      .dialog-modal-actions .secondary {
        background: rgba(255, 255, 255, 0.82);
        border-color: rgba(126, 136, 164, 0.24);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.66);
      }

      .dialog-modal-actions .primary {
        background: var(--navy);
        box-shadow: 0 12px 24px rgba(31, 35, 63, 0.18);
      }

      .template-options-modal {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10060 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px max(18px, env(safe-area-inset-right)) calc(18px + var(--keyboard-offset)) max(18px, env(safe-area-inset-left));
        background: rgba(20, 24, 40, 0.38);
        animation: expense-backdrop-fade-in 0.25s ease-out forwards;
        pointer-events: auto;
        overscroll-behavior: contain;
        touch-action: none;
      }

      .template-options-modal-card {
        position: relative;
        width: 100%;
        max-width: 450px;
        max-height: calc(var(--app-viewport-height) - var(--keyboard-offset) - 64px);
        display: flex;
        flex-direction: column;
        gap: 18px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 24px;
        border-radius: 24px;
        background: #ffffff;
        box-shadow: 0 22px 46px rgba(21, 24, 43, 0.24);
        animation: expense-modal-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        pointer-events: auto;
        touch-action: auto;
      }

      .template-options-modal-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(32, 34, 61, 0.08);
      }

      .template-options-modal-head p {
        margin: 0 0 4px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .template-options-modal-head h3 {
        margin: 0;
        color: var(--navy);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.16;
      }

      .template-options-modal-close {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 14px;
        background: rgba(47, 102, 223, 0.08);
        color: var(--navy-soft);
        cursor: pointer;
        transition: color 0.2s ease, background 0.2s ease;
      }

      .template-options-modal-close:hover {
        color: var(--danger-strong);
        background: rgba(255, 111, 97, 0.08);
      }

      .template-options-modal-close svg {
        width: 16px;
        height: 16px;
      }

      .template-options-list {
        display: grid;
        gap: 10px;
      }

      .template-options-choice {
        min-height: 50px;
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding: 13px 14px;
        border-radius: 18px;
        background: rgba(246, 248, 253, 0.92);
        color: var(--navy);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.25;
        box-shadow: inset 0 0 0 1px rgba(32, 34, 61, 0.08);
        cursor: pointer;
      }

      .template-options-choice input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .template-options-checkbox {
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: inset 0 0 0 1.5px rgba(100, 108, 135, 0.26);
      }

      .template-options-choice.active .template-options-checkbox {
        background: var(--blue);
        box-shadow: inset 0 0 0 1.5px var(--blue);
      }

      .template-options-choice.active .template-options-checkbox::after {
        content: "";
        width: 11px;
        height: 7px;
        border-left: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        transform: rotate(-45deg) translateY(-1px);
      }

      .template-options-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding-top: 2px;
      }

      .template-options-actions .secondary,
      .template-options-actions .primary {
        width: 100%;
        min-width: 0;
        height: 52px;
        border-radius: 18px;
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
      }

      .subitem-modal-card {
        position: relative;
        width: 100%;
        max-height: calc(var(--app-viewport-height) - var(--keyboard-offset) - 64px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
        border-radius: 24px;
        background: rgba(251, 252, 255, 0.98);
        box-shadow: 0 22px 46px rgba(21, 24, 43, 0.24);
      }

      /* Improve input field contrast and focus highlight in composer modals */
      .subitem-modal-card .field,
      .subitem-modal-card .textarea {
        background: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(32, 34, 61, 0.14);
      }

      .subitem-modal-card .field:focus-within,
      .subitem-modal-card .textarea:focus-within {
        box-shadow: inset 0 0 0 1.5px var(--blue);
      }

      /* Keyboard visible adjustments to make modal fit and scroll cleanly */
      .keyboard-visible .subitem-modal-card {
        max-height: calc(var(--app-viewport-height) - var(--keyboard-offset) - 40px);
        padding: 12px;
        border-radius: 20px;
      }

      .keyboard-visible .detail-inline-popup {
        padding: 12px 12px calc(12px + var(--keyboard-offset));
      }

      .keyboard-visible .detail-inline-popup-card {
        max-height: calc(var(--app-viewport-height) - var(--keyboard-offset) - 40px);
        gap: 10px;
        padding: 16px;
        border-radius: 20px;
      }

      .keyboard-visible .organizer-composer-modal-head {
        margin-bottom: 10px;
      }

      .keyboard-visible .organizer-composer-modal-body {
        gap: 8px;
      }

      .keyboard-visible .organizer-composer-modal-body .organizer-composer-stack {
        gap: 8px;
      }

      .keyboard-visible .subitem-modal-fields {
        gap: 8px;
      }

      .keyboard-visible .subitem-modal-card .field,
      .keyboard-visible .subitem-modal-card .textarea {
        padding: 10px 12px;
      }

      .keyboard-visible .detail-inline-popup-fields {
        gap: 10px;
      }

      .keyboard-visible .subitem-modal-card .field label,
      .keyboard-visible .subitem-modal-card .textarea label {
        margin-bottom: 6px;
      }

      .subitem-modal-head {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 14px;
        padding-right: 44px;
      }

      .subitem-modal-head h3 {
        margin: 0;
        color: var(--navy);
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
      }

      .subitem-modal-head p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.35;
      }

      .subitem-modal-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: rgba(32, 34, 61, 0.08);
        font-size: 18px;
        cursor: pointer;
        transition: background 140ms ease, transform 120ms ease;
        flex-shrink: 0;
      }

      .subitem-modal-close:hover {
        background: rgba(32, 34, 61, 0.14);
      }

      .subitem-modal-close:active {
        transform: scale(0.9);
        background: rgba(32, 34, 61, 0.18);
      }

      .subitem-modal-fields {
        display: grid;
        gap: 10px;
      }

      .pdf-preview-card {
        width: 100%;
        max-width: none;
        height: calc(100dvh - 20px - var(--keyboard-offset));
        max-height: calc(100dvh - 20px - var(--keyboard-offset));
        padding: 10px;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 10px;
      }

      .pdf-preview-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .pdf-preview-toolbar-spacer {
        flex: 1 1 auto;
      }

      .pdf-preview-icon-button {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.94);
        box-shadow:
          0 10px 18px rgba(31, 35, 63, 0.12),
          inset 0 0 0 1px rgba(82, 89, 114, 0.08);
        cursor: pointer;
      }

      .pdf-preview-icon-button svg {
        width: 18px;
        height: 18px;
      }

      .pdf-preview-frame {
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
      }

      .subitem-assignee-block {
        display: grid;
        gap: 10px;
      }

      .subitem-assignee-chip {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.14);
      }

      .subitem-assignee-chip strong {
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
      }

      .subitem-assign-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
      }

      .subitem-assign-row .organizer-assign-button {
        width: auto;
        padding: 0 16px;
      }

      .title-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 14px;
      }

      .event-title-row {
        display: block;
        margin-top: 18px;
        margin-bottom: 24px;
      }

      .title-row h1,
      .title-row h2 {
        margin: 0;
        color: var(--navy);
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
      }

      .title-row p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 12px;
      }

      .screen-head {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 12px;
      }

      .screen-head-with-logo {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 12px;
        margin-bottom: 24px;
      }

      .screen-head-with-logo .drawer-back {
        align-self: flex-start;
      }

      .settings-brand-logo {
        display: block;
        width: auto;
        height: 100px;
        object-fit: contain;
        margin: 8px 0 4px 0;
        filter: drop-shadow(0 8px 18px rgba(31, 35, 63, 0.09));
      }

      .screen-head-copy {
        min-width: 0;
      }

      .screen-head-with-logo .screen-head-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-top: -4px;
      }

      .screen-head-copy::before {
        content: "";
        display: block;
        width: 120px;
        height: 120px;
        margin-bottom: 0;
        background-image: var(--brand-logo-image, none);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
        filter: drop-shadow(0 8px 18px rgba(31, 35, 63, 0.08));
      }

      .screen-head-with-logo .screen-head-copy::before {
        display: none;
      }

      .screen-head-with-logo .screen-head-copy h2 {
        color: var(--navy);
        font-size: 26px;
        font-weight: 600;
        line-height: 1.2;
        text-align: left;
      }

      .create-event-head {
        margin-bottom: 28px;
      }

      .create-event-head .screen-head-copy h2 {
        font-size: 28px;
        margin-top: 4px;
      }

      .screen-head-copy.no-brand::before {
        display: none;
      }

.loading-skeleton-stack {
  gap: 12px;
}

.loading-skeleton-notice {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(47, 102, 223, 0.08);
  color: var(--navy-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.loading-skeleton-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.14);
}

.loading-skeleton-line,
.loading-skeleton-button {
  position: relative;
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(223, 228, 241, 0.95) 0%, rgba(244, 247, 255, 0.98) 50%, rgba(223, 228, 241, 0.95) 100%);
  background-size: 220% 100%;
  animation: loadingSkeletonPulse 1.15s linear infinite;
}

.loading-skeleton-row-card .loading-skeleton-line:first-child,
.loading-skeleton-panel-card .loading-skeleton-line:first-child {
  height: 15px;
}

.loading-skeleton-field-card .loading-skeleton-line:nth-child(2) {
  height: 44px;
  border-radius: 14px;
}

.loading-skeleton-panel-card {
  min-height: 102px;
}

.loading-skeleton-tabs {
  opacity: 0.78;
}

.loading-skeleton-actions {
  pointer-events: none;
}

.loading-skeleton-button {
  height: 44px;
  flex: 1 1 0;
  border-radius: 14px;
}

.loading-skeleton-button.primary {
  opacity: 0.92;
}

.event-loading-stack {
  padding-top: 2px;
}

@keyframes loadingSkeletonPulse {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -20% 0;
  }
}

      .create-event-ai-head {
        position: relative;
        justify-content: center;
        min-height: 120px;
      }

      .create-event-ai-head .drawer-back {
        position: absolute;
        top: 0;
        left: 0;
      }

      .create-event-ai-head .screen-head-copy::before {
        margin-left: auto;
        margin-right: auto;
        background-position: center top;
      }

      .event-permissions-card {
        display: grid;
        gap: 14px;
        padding: 16px 18px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow:
          0 12px 28px rgba(31, 35, 63, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.82);
      }

      .event-permissions-head {
        display: grid;
        gap: 4px;
      }

      .event-permissions-head h3 {
        margin: 0;
        color: var(--navy);
        font-size: 18px;
        font-weight: 500;
      }

      .event-permissions-head p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }

      .event-permission-group {
        display: grid;
        gap: 10px;
      }

      .event-permission-group strong {
        color: var(--navy);
        font-size: 14px;
        font-weight: 500;
      }

      .event-permission-grid {
        display: grid;
        gap: 10px;
      }

      .event-permission-option {
        justify-content: flex-start;
      }

      .event-settings-panel {
        gap: 14px;
      }

      .event-settings-panel .field,
      .event-settings-panel .event-permissions-card {
        background: rgba(251, 252, 255, 0.88);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.78),
          0 8px 20px rgba(31, 35, 63, 0.04);
      }

      .event-settings-panel .field {
        padding: 16px;
        border-radius: 18px;
      }

      .event-settings-panel .field label {
        margin-bottom: 10px;
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
      }

      .event-settings-panel .field input,
      .event-settings-panel .field select {
        color: var(--navy);
        font-size: 17px;
        font-weight: 500;
        line-height: 1.25;
      }

      .event-settings-panel .radio-row {
        gap: 9px;
      }

      .event-settings-panel .radio-choice {
        min-height: 32px;
        width: 100%;
        border-radius: 12px;
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        color: var(--navy);
        font-size: 16px;
        font-weight: 600;
      }

      .event-settings-panel .radio-dot {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: rgba(251, 252, 255, 0.96);
        box-shadow:
          inset 0 0 0 1.5px rgba(126, 148, 184, 0.72),
          0 4px 10px rgba(31, 35, 63, 0.05);
      }

      .event-settings-panel .radio-choice.active .radio-dot {
        box-shadow:
          inset 0 0 0 1.5px var(--navy),
          0 6px 14px rgba(32, 34, 61, 0.14);
      }

      .event-settings-panel .radio-choice.active .radio-dot::after {
        inset: 5px;
        background: var(--navy);
      }

      .event-settings-panel .event-date-field {
        position: relative;
      }

      .event-settings-panel .event-date-display-button,
      .event-settings-panel .event-date-input-wrap {
        min-height: 52px;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow:
          inset 0 0 0 1px rgba(126, 148, 184, 0.18),
          0 6px 14px rgba(31, 35, 63, 0.04);
      }

      .event-settings-panel .event-date-display-button {
        color: var(--navy);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0;
      }

      .event-settings-panel .event-date-field-settings .event-date-input,
      .event-settings-panel .event-date-field-settings .event-date-display-button {
        font-size: 15px;
        letter-spacing: 0;
      }

      .event-settings-panel .event-date-display-button::after,
      .event-settings-panel .event-date-input-wrap::after {
        color: rgba(58, 92, 175, 0.82);
      }

      .event-settings-panel .event-date-picker-popover {
        top: calc(100% + 12px);
        width: min(340px, calc(100vw - 48px));
        padding: 16px;
        border-radius: 22px;
        background: rgba(251, 252, 255, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.78);
        box-shadow:
          0 24px 48px rgba(31, 35, 63, 0.18),
          inset 0 0 0 1px rgba(126, 148, 184, 0.1);
      }

      .event-settings-panel .event-date-picker-popover::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 24px;
        width: 14px;
        height: 14px;
        border-radius: 4px 0 0 0;
        background: rgba(251, 252, 255, 0.98);
        transform: rotate(45deg);
        box-shadow: -1px -1px 0 rgba(255, 255, 255, 0.78);
      }

      .event-settings-date-grid .event-date-field:nth-child(2) .event-date-picker-popover {
        right: 0;
        left: auto;
      }

      .event-settings-date-grid .event-date-field:nth-child(2) .event-date-picker-popover::before {
        right: 24px;
        left: auto;
      }

      .event-settings-panel .event-date-picker-head {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 10px;
        margin-bottom: 14px;
      }

      .event-settings-panel .event-date-picker-head strong {
        color: var(--navy);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0;
      }

      .event-settings-panel .event-date-picker-nav {
        width: 38px;
        height: 38px;
        border-radius: 13px;
        color: var(--navy);
        background: rgba(232, 237, 249, 0.94);
        box-shadow: inset 0 0 0 1px rgba(126, 148, 184, 0.1);
      }

      .event-settings-panel .event-date-picker-nav:disabled {
        opacity: 0.32;
        cursor: default;
        pointer-events: none;
      }

      .event-settings-panel .event-date-picker-weekdays span {
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
      }

      .event-settings-panel .event-date-picker-grid {
        gap: 7px;
      }

      .event-settings-panel .event-date-picker-day {
        height: 38px;
        border-radius: 12px;
        color: var(--navy);
        font-size: 14px;
        font-weight: 700;
        background: rgba(245, 247, 255, 0.62);
      }

      .event-settings-panel .event-date-picker-day:hover {
        background: rgba(232, 237, 249, 0.96);
      }

      .event-settings-panel .event-date-picker-day.selected {
        background: var(--navy);
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(32, 34, 61, 0.18);
      }

      .event-settings-panel .event-date-picker-day.outside {
        color: rgba(117, 128, 161, 0.48);
        background: transparent;
      }

      .event-settings-panel .event-date-picker-day:disabled,
      .event-settings-panel .event-date-picker-day.unavailable {
        color: rgba(117, 128, 161, 0.55);
        background: transparent;
        box-shadow: none;
        pointer-events: none;
      }

      .event-settings-panel .event-permissions-card {
        gap: 16px;
        padding: 18px 20px;
        border-radius: 22px;
      }

      .event-settings-panel .event-permissions-head h3 {
        color: var(--navy);
        font-size: 21px;
        font-weight: 700;
        line-height: 1.12;
      }

      .event-settings-panel .event-permissions-head p {
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.45;
      }

      .event-settings-panel .event-permission-group {
        gap: 9px;
      }

      .event-settings-panel .event-permission-group strong {
        color: var(--navy);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
      }

      .event-settings-panel .event-permission-grid {
        gap: 9px;
      }

      .event-settings-panel .event-permission-option {
        min-height: 26px;
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        color: var(--navy);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
      }

      .event-settings-panel .inline-checkbox-choice-box {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        background: rgba(251, 252, 255, 0.94);
        box-shadow:
          inset 0 0 0 1.5px rgba(126, 148, 184, 0.72),
          0 4px 10px rgba(31, 35, 63, 0.05);
      }

      .event-settings-panel .inline-checkbox-choice.active .inline-checkbox-choice-box {
        background: var(--navy);
        box-shadow:
          0 6px 14px rgba(32, 34, 61, 0.18),
          inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      }

      .event-settings-panel .inline-checkbox-choice.active .inline-checkbox-choice-box::after {
        inset: auto;
        left: 6px;
        top: 6px;
        width: 10px;
        height: 6px;
        border-radius: 0;
        border-left: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        background: transparent;
        transform: rotate(-45deg);
      }

      .event-settings-actions {
        gap: 10px;
      }

      .composer-popup-shell {
        min-height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 24px 14px calc(30px + var(--keyboard-offset));
      }

      .composer-popup-card {
        width: min(100%, 520px);
        max-height: calc(100vh - 48px);
        overflow: auto;
        padding: 20px 18px;
        border-radius: 28px;
        background: rgba(245, 247, 255, 0.97);
        box-shadow:
          0 24px 48px rgba(31, 35, 63, 0.14),
          inset 0 0 0 1px rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(18px);
      }

      .composer-popup-head {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 14px;
      }

      .composer-popup-head h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.15;
        white-space: nowrap;
      }

      .supply-composer-stack {
        display: grid;
        gap: 12px;
      }

      .organizer-composer-stack {
        width: 100%;
      }

      .organizer-composer-modal-card {
        max-width: min(100%, 560px);
      }

      .organizer-composer-modal-head {
        margin-bottom: 16px;
      }

      .organizer-composer-modal-body {
        display: grid;
        gap: 12px;
      }

      .organizer-composer-modal-body .organizer-composer-stack {
        gap: 12px;
      }

      .organizer-composer-modal-body .composer-actions {
        margin-top: 2px;
      }

      .organizer-composer-stack-task {
        display: grid;
        gap: 12px;
      }

      .organizer-composer-stack-task-create {
        gap: 10px;
      }

      .organizer-task-field-head {
        display: grid;
        gap: 8px;
      }

      .organizer-task-time-mode-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .organizer-task-time-mode-row .radio-choice {
        min-height: 40px;
        justify-content: center;
        padding: 0 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 0 0 1px rgba(58, 67, 98, 0.12);
      }

      .organizer-task-time-mode-row .radio-choice.active {
        background: rgba(231, 236, 252, 0.96);
        box-shadow: inset 0 0 0 1px rgba(58, 67, 98, 0.16);
      }

      .organizer-task-quick-grid {
        display: grid;
        gap: 10px;
        margin-top: 10px;
      }

      .organizer-task-quick-grid .attendance-time-grid {
        min-width: 0;
      }

      .organizer-task-count-field input {
        text-align: center;
      }

      .organizer-task-quick-grid-no-time {
        grid-template-columns: minmax(0, 1fr) 120px;
        align-items: start;
      }

      .organizer-task-quick-grid-no-time .composer-meta {
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0;
      }

      .composer-section {
        display: grid;
        gap: 12px;
      }

      .composer-section-title {
        margin: 0;
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
      }

      .field.field-primary label {
        color: var(--navy);
        font-size: 13px;
        font-weight: 500;
      }

      .field.field-primary input {
        min-height: 48px;
        padding: 13px 15px;
        font-size: 16px;
        font-weight: 400;
      }

      .assign-choice {
        display: grid;
        gap: 10px;
      }

      .assign-choice-segment {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 4px;
        border-radius: 14px;
        background: rgba(230, 235, 245, 0.72);
        box-shadow: inset 0 0 0 1px rgba(32, 34, 61, 0.08);
      }

      .assign-choice-button {
        min-height: 40px;
        padding: 0 12px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 500;
        transition: background 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
      }

      .assign-choice-button.active {
        background: var(--navy);
        color: var(--white);
        box-shadow: 0 6px 16px rgba(32, 34, 61, 0.16);
      }

      .assign-choice-button:not(.active) {
        box-shadow: none;
      }

      .assign-choice-target {
        display: grid;
        gap: 8px;
      }

      .assign-choice-hint {
        margin: 0;
        color: var(--navy-soft);
        font-size: 13px;
        line-height: 1.45;
      }

      .invite-screen {
        display: grid;
        gap: 16px;
        padding-top: max(18px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
      }

      .invite-screen-home {
        gap: 12px;
      }

      .invite-screen-event {
        gap: 16px;
      }

      .invite-hero {
        display: grid;
        gap: 8px;
        text-align: center;
        padding: 0 6px 0 0;
      }

      .invite-screen-home .invite-hero {
        gap: 6px;
      }

      .invite-logo-wrap {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        margin-bottom: 0;
      }

      .invite-screen-home .invite-logo-wrap {
        margin-top: -18px;
        margin-bottom: -8px;
      }

      .invite-logo {
        display: block;
        width: auto;
        max-width: 308px;
        max-height: 152px;
        object-fit: contain;
        filter: drop-shadow(0 8px 18px rgba(31, 35, 63, 0.08));
      }

      .invite-screen-home .invite-logo {
        max-width: 276px;
        max-height: 126px;
      }

      .invite-kicker {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .invite-hero h1 {
        margin: 0;
        color: var(--navy);
        font-size: 30px;
        font-weight: 500;
        line-height: 1.06;
      }

      .invite-screen-home .invite-hero h1 {
        font-size: 28px;
      }

      .invite-hero p {
        margin: 0;
        color: var(--navy-soft);
        font-size: 14px;
        line-height: 1.45;
      }

      .invite-screen-home .invite-hero p {
        font-size: 13px;
      }

      .invite-event-hero-card {
        display: grid;
        gap: 14px;
        padding: 16px 16px 18px;
        border-radius: 24px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 255, 0.92));
        box-shadow:
          0 18px 36px rgba(31, 35, 63, 0.1),
          inset 0 0 0 1px rgba(255, 255, 255, 0.84);
      }

      .invite-intro-header {
        justify-items: start;
        text-align: left;
        gap: 8px;
        padding: 4px 6px 0 2px;
      }

      .invite-intro-header .invite-logo-wrap {
        margin: 0;
      }

      .invite-intro-header .invite-logo {
        max-width: 72px;
        max-height: 72px;
      }

      .invite-intro-header h1 {
        margin: 0;
        font-size: 28px;
        line-height: 1.08;
      }

      .invite-intro-header .invite-kicker {
        font-size: 13px;
        letter-spacing: 0.05em;
      }

      .invite-hero-compact {
        gap: 6px;
        padding: 0;
      }

      .invite-hero-compact .invite-logo {
        max-width: 180px;
        max-height: 88px;
      }

      .invite-hero-compact h1 {
        font-size: 28px;
        font-weight: 400;
        line-height: 1.14;
      }

      .invite-hero-compact p {
        font-size: 13px;
      }

      .invite-event-summary {
        display: grid;
        gap: 10px;
      }

      .invite-event-byline {
        margin: 0;
        color: var(--navy-soft);
        font-size: 14px;
        line-height: 1.45;
      }

      .invite-event-card {
        display: grid;
        gap: 14px;
        padding: 18px;
        border-radius: 24px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 255, 0.9));
        box-shadow:
          0 18px 36px rgba(31, 35, 63, 0.1),
          inset 0 0 0 1px rgba(255, 255, 255, 0.84);
      }

      .invite-event-card h2 {
        margin: 2px 0 0;
        color: var(--navy);
        font-size: 26px;
        font-weight: 500;
        line-height: 1.12;
      }

      .invite-event-kicker {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .invite-event-description {
        margin: 0;
        color: var(--navy-soft);
        font-size: 14px;
        line-height: 1.5;
      }

      .invite-meta-grid {
        display: grid;
        gap: 10px;
      }

      .invite-meta-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .invite-meta-pill {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 16px;
        background: rgba(231, 236, 246, 0.62);
        box-shadow: inset 0 0 0 1px rgba(123, 131, 157, 0.1);
      }

      .invite-meta-pill svg {
        width: 18px;
        height: 18px;
        color: var(--navy-soft);
        flex: 0 0 auto;
      }

      .invite-meta-pill span {
        color: var(--navy);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.35;
      }

      .invite-auth-card {
        display: grid;
        gap: 14px;
        padding: 18px;
        border-radius: 24px;
        background: rgba(251, 252, 255, 0.9);
        box-shadow:
          0 18px 36px rgba(31, 35, 63, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.8);
      }

      .invite-screen-home .invite-auth-card {
        gap: 12px;
        padding: 16px 18px 18px;
      }

      .invite-auth-card-compact {
        gap: 12px;
        padding: 18px;
      }

      .invite-auth-head {
        display: grid;
        gap: 4px;
      }

      .invite-auth-head strong {
        color: var(--navy);
        font-size: 17px;
        font-weight: 500;
      }

      .invite-auth-head p {
        margin: 0;
        color: var(--navy-soft);
        font-size: 14px;
        line-height: 1.45;
      }

      .invite-auth-switch {
        text-align: center;
        color: var(--navy-soft);
        font-size: 14px;
        line-height: 1.4;
      }

      .invite-auth-switch button {
        border: 0;
        padding: 0;
        background: transparent;
        color: var(--navy);
        font-size: 14px;
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
      }

      .invite-auth-google {
        width: 100%;
      }

      .google-login-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        min-height: 50px;
        padding: 13px 20px;
        border: none;
        border-radius: 14px;
        background: #ffffff;
        box-shadow:
          0 2px 8px rgba(31, 35, 63, 0.08),
          inset 0 0 0 1px rgba(0, 0, 0, 0.1);
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.01em;
        cursor: pointer;
        transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
      }

      .google-login-btn:hover {
        background: #f8f9ff;
        box-shadow:
          0 6px 16px rgba(31, 35, 63, 0.12),
          inset 0 0 0 1px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
      }

      .google-login-btn:active {
        transform: translateY(0);
        box-shadow:
          0 2px 6px rgba(31, 35, 63, 0.08),
          inset 0 0 0 1px rgba(0, 0, 0, 0.1);
      }

      .invite-choice-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .invite-choice-bar-inline {
        margin-top: 2px;
      }

      .invite-choice-pill {
        appearance: none;
        -webkit-appearance: none;
        min-width: 0;
        min-height: 46px;
        border: 0;
        padding: 10px 12px;
        border-radius: 16px;
        background: rgba(236, 240, 249, 0.92);
        box-shadow:
          inset 0 0 0 1px rgba(123, 131, 157, 0.12);
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        cursor: pointer;
        transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
      }

      .invite-choice-pill.active {
        background: var(--navy);
        box-shadow: 0 12px 24px rgba(31, 35, 63, 0.16);
        color: var(--white);
      }

      .invite-choice-pill:not(.active):hover {
        background: rgba(227, 232, 244, 0.98);
        color: var(--navy);
      }

      .invite-form {
        display: grid;
        gap: 10px;
      }

      .invite-screen-home .invite-form {
        gap: 8px;
      }

      .invite-form .field {
        padding: 15px 16px;
      }

      .invite-screen-home .invite-form .field {
        padding: 13px 16px;
      }

      .invite-form .field input {
        font-size: 16px;
      }

      .invite-auth-card .composer-meta {
        margin: 0;
      }

      @media (max-width: 640px) {
        .invite-screen {
          padding-top: max(28px, env(safe-area-inset-top));
        }

        .invite-screen-event {
          gap: 14px;
        }

        .invite-event-hero-card {
          gap: 12px;
          padding: 14px 14px 16px;
          border-radius: 22px;
        }

        .invite-intro-header {
          gap: 10px;
          padding: 2px 4px 0;
        }

        .invite-intro-header .invite-logo {
          max-width: 76px;
          max-height: 76px;
        }

        .invite-intro-header .invite-kicker {
          font-size: 12px;
        }

        .invite-intro-header h1 {
          font-size: 26px;
        }

        .invite-event-summary {
          gap: 8px;
        }

        .invite-event-byline {
          font-size: 12px;
          line-height: 1.4;
        }

        .invite-event-summary h2 {
          margin: 0;
          font-size: 18px;
          line-height: 1.15;
        }

        .invite-meta-grid-compact {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .invite-meta-pill {
          min-height: 42px;
          padding: 10px 12px;
          border-radius: 14px;
        }

        .invite-meta-pill span {
          font-size: 13px;
        }

        .invite-choice-bar {
          grid-template-columns: 1fr;
        }
      }

      .startup-watchdog-screen {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        padding: 32px 20px 48px;
      }

      .startup-watchdog-card {
        width: min(100%, 560px);
        background: rgba(255, 255, 255, 0.92);
        border-radius: 32px;
        padding: 28px 24px;
        box-shadow: 0 20px 60px rgba(21, 24, 48, 0.12);
        color: var(--text);
      }

      .startup-watchdog-kicker {
        display: inline-block;
        margin-bottom: 10px;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }

      .startup-watchdog-card h1 {
        margin: 0 0 12px;
        font-size: 2rem;
        line-height: 1.08;
      }

      .startup-watchdog-card p {
        margin: 0 0 12px;
        color: var(--muted);
      }

      .startup-watchdog-actions {
        margin-top: 20px;
      }

      .startup-watchdog-reload {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 220px;
        text-decoration: none;
      }

      .startup-watchdog-details {
        margin-top: 18px;
        text-align: left;
      }

      .startup-watchdog-details summary {
        cursor: pointer;
        color: var(--muted);
        font-weight: 500;
      }

      .startup-watchdog-details pre {
        margin: 10px 0 0;
        padding: 14px 16px;
        border-radius: 18px;
        background: rgba(32, 34, 61, 0.08);
        color: var(--text);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.82rem;
        line-height: 1.5;
        white-space: pre-wrap;
        word-break: break-word;
      }

      @media (max-height: 780px) {
        .invite-screen-home .invite-logo-wrap {
          margin-top: -24px;
          margin-bottom: -12px;
        }

        .invite-screen-home .invite-logo {
          max-width: 252px;
          max-height: 112px;
        }

        .invite-screen-home .invite-hero h1 {
          font-size: 26px;
        }

        .invite-screen-home .invite-auth-card {
          gap: 10px;
          padding: 15px 16px 16px;
        }
      }

      .subitem-editor-block {
        display: grid;
        gap: 6px;
      }

      .icon-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
        position: relative;
      }

      .event-title-row .icon-row {
        grid-area: actions;
        justify-self: end;
      }

      .icon-badge {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.8);
        color: var(--navy);
      }

	      .icon-action {
	        border: 0;
	        cursor: pointer;
	      }

	      .icon-badge.active:not(.green) {
	        background: rgba(222, 231, 248, 0.96);
	        box-shadow: inset 0 0 0 1px rgba(134, 157, 208, 0.78);
	      }

      .header-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 180px;
        padding: 8px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 34px rgba(32, 34, 61, 0.18);
        z-index: 12;
      }

      .header-menu button {
        width: 100%;
        border: 0;
        background: transparent;
        text-align: left;
        padding: 12px 14px;
        border-radius: 12px;
        color: var(--text);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.3;
        white-space: normal;
        cursor: pointer;
      }

      .header-menu button.destructive {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--danger-strong);
      }

      .header-menu button.destructive svg {
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
      }

      .header-menu button:hover,
      .header-menu button:focus-visible {
        outline: none;
        background: rgba(47, 102, 223, 0.08);
      }

      .header-menu button:disabled {
        cursor: default;
        color: var(--muted);
        background: transparent;
      }

      .icon-badge.green {
        background: #83e294;
        color: #16311d;
      }

      .icon-badge svg {
        width: 18px;
        height: 18px;
      }

      .event-header-panel {
        display: grid;
        gap: 12px;
        margin-bottom: 18px;
      }

      .event-context-bar {
        --event-context-color: var(--blue);
        --event-context-color-strong: #1f2440;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        min-width: 0;
        min-height: 32px;
        padding: 7px 12px;
        border-radius: 13px;
        color: var(--white);
        background: linear-gradient(135deg, var(--event-context-color), var(--event-context-color-strong));
        box-shadow: 0 8px 18px rgba(31, 36, 64, 0.08);
      }

      .event-context-bar-dot {
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
      }

      .event-context-bar-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.15;
      }

      .event-context-bar-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
        flex: 1 1 auto;
      }

      .event-context-bar.has-details {
        min-height: 54px;
        align-items: flex-start;
        padding: 9px 12px;
        border-radius: 15px;
      }

      .event-context-bar.has-details .event-context-bar-dot {
        margin-top: 6px;
      }

      .event-context-bar.has-details .event-context-bar-title {
        font-size: 14px;
      }

      .event-context-bar-details {
        display: grid;
        gap: 1px;
        min-width: 0;
        color: rgba(255, 255, 255, 0.78);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.18;
      }

      .event-context-bar-details span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .event-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: relative;
      }

      .event-topbar > .event-overflow-trigger {
        margin-left: auto;
      }

      .event-screen-title-row {
        min-width: 0;
      }

      .event-screen-title {
        margin: 0;
        color: var(--navy);
        font-size: 30px;
        font-weight: 700;
        line-height: 1.12;
        letter-spacing: 0;
        overflow-wrap: anywhere;
      }

      .event-back-button {
        flex: 0 1 auto;
        min-width: 84px;
        max-width: min(48vw, 220px);
        height: 38px;
        padding: 0 15px 0 13px;
        border: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: var(--navy);
        background: rgba(251, 252, 255, 0.9);
        box-shadow: 0 8px 18px rgba(35, 41, 67, 0.06);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
      }

      .event-back-button svg {
        flex: 0 0 auto;
        width: 15px;
        height: 15px;
      }

      .event-back-button .back-button-icon {
        flex: 0 0 auto;
        font-size: 18px;
        line-height: 1;
      }

      .event-back-button .back-button-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .event-overflow-menu {
        position: relative;
        display: inline-flex;
        margin-left: auto;
      }

      .event-overflow-menu summary {
        list-style: none;
      }

      .event-overflow-menu summary::-webkit-details-marker {
        display: none;
      }

      .event-overflow-trigger.icon-badge {
        position: relative;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 14px;
        background: rgba(251, 252, 255, 0.9);
        box-shadow: 0 8px 18px rgba(35, 41, 67, 0.06);
        cursor: pointer;
      }

      .event-overflow-trigger svg {
        width: 19px;
        height: 19px;
      }

      .app-unread-count-badge {
        position: absolute;
        top: -7px;
        right: -7px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--white) !important;
        -webkit-text-fill-color: var(--white) !important;
        background: var(--danger-strong);
        border: 2px solid var(--white);
        box-shadow: 0 5px 12px rgba(255, 111, 97, 0.24);
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
        pointer-events: none;
        z-index: 3;
      }

      .event-overflow-trigger .app-unread-count-badge {
        top: -6px;
        right: -6px;
      }

      .event-overflow-dropdown {
        top: calc(100% + 10px);
        right: 0;
        min-width: 188px;
        padding: 8px;
        transform-origin: top right;
      }

      .event-overflow-item {
        position: relative;
      }

      .event-overflow-item.active {
        color: var(--navy);
        background: rgba(47, 102, 223, 0.1);
      }

      .event-overflow-item.has-dot::after {
        content: "";
        position: absolute;
        top: 12px;
        right: 12px;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: var(--danger-strong);
      }

      .progress {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
      }

      .progress span {
        flex: 1;
        height: 4px;
        border-radius: 999px;
        background: #c0c6d5;
      }

      .progress span.active {
        background: var(--navy);
      }

      .tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        overflow: visible;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding: 8px 10px 9px;
        margin-bottom: 0;
        border-radius: 24px;
        background: var(--white);
        box-shadow: 0 -2px 10px rgba(35, 41, 67, 0.03), 0 14px 34px rgba(35, 41, 67, 0.12);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-padding-right: 0;
        pointer-events: auto;
      }

      .tabs-shell {
        position: fixed;
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(10px + env(safe-area-inset-bottom) + var(--keyboard-offset));
        z-index: 100;
        margin: 0;
        pointer-events: none;
        transform: none !important;
        will-change: auto !important;
        opacity: 1;
        visibility: visible;
        transition: opacity 180ms ease, visibility 180ms ease, bottom 220ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .event-screen.event-list-search-focused[data-event-tab-layout="tasks"] .tabs-shell,
      .event-screen.event-list-search-focused[data-event-tab-layout="supplies"] .tabs-shell {
        bottom: calc(-124px - env(safe-area-inset-bottom));
        opacity: 0;
        visibility: hidden;
      }

      .tabs-shell::before {
        content: "";
        position: absolute;
        left: -12px;
        right: -12px;
        bottom: -10px;
        height: calc(100% + 28px);
        border-radius: 26px 26px 0 0;
        background: linear-gradient(180deg, rgba(217, 223, 236, 0) 0%, rgba(217, 223, 236, 0.94) 32%, rgba(217, 223, 236, 0.98) 100%);
        z-index: -1;
      }

      .event-tab-progress {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-bottom: 10px;
      }

      .event-tab-dot {
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: rgba(123, 131, 157, 0.34);
        transition: width 180ms ease, background-color 180ms ease, transform 180ms ease;
      }

      .event-tab-dot.active {
        width: 20px;
        background: var(--navy);
        transform: translateY(-1px);
      }

      .event-nav-actions {
        display: none;
      }

      .event-screen-nav,
      .event-screen-main,
      .event-screen-body,
      .event-screen-tools {
        min-width: 0;
      }

      .event-screen-main {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
        --event-swipe-offset: 0px;
        --event-swipe-enter-offset: 0px;
        --event-swipe-commit-offset: 0px;
        --event-swipe-opacity: 1;
        --event-swipe-scale: 1;
        touch-action: pan-y;
        transition: padding-bottom 180ms ease;
      }

      .event-screen[data-event-tab-layout="tasks"] .event-screen-main,
      .event-screen[data-event-tab-layout="supplies"] .event-screen-main {
        padding-bottom: calc(154px + env(safe-area-inset-bottom));
      }

      .event-screen.event-list-search-focused[data-event-tab-layout="tasks"] .event-screen-main,
      .event-screen.event-list-search-focused[data-event-tab-layout="supplies"] .event-screen-main {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
      }

      .event-screen.event-screen-swiping .event-screen-main {
        opacity: var(--event-swipe-opacity, 1);
        transform: translate3d(var(--event-swipe-offset, 0px), 0, 0) scale(var(--event-swipe-scale, 1));
        transition: none;
        user-select: none;
        will-change: transform, opacity;
      }

      .event-screen.event-screen-swipe-return .event-screen-main {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
        will-change: transform, opacity;
      }

      .event-screen.event-screen-swipe-commit .event-screen-main {
        animation: eventScreenTabExit 145ms cubic-bezier(0.32, 0, 0.67, 0) both;
        pointer-events: none;
        will-change: transform, opacity;
      }

      .event-screen.event-screen-tab-animating .event-screen-main {
        animation: eventScreenTabEnter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
        will-change: transform, opacity;
      }

      @keyframes eventScreenTabExit {
        from {
          opacity: var(--event-swipe-opacity, 1);
          transform: translate3d(var(--event-swipe-offset, 0px), 0, 0) scale(var(--event-swipe-scale, 1));
        }

        to {
          opacity: 0.72;
          transform: translate3d(var(--event-swipe-commit-offset, -112%), 0, 0) scale(0.975);
        }
      }

      @keyframes eventScreenTabEnter {
        from {
          opacity: 0.78;
          transform: translate3d(var(--event-swipe-enter-offset, 100%), 0, 0) scale(0.985);
        }

        to {
          opacity: 1;
          transform: translate3d(0, 0, 0) scale(1);
        }
      }

      .tabs::-webkit-scrollbar {
        display: none;
      }

      .tabs::after {
        display: none;
      }

      .tab {
        position: relative;
        min-width: 0;
        width: 100%;
        height: 58px;
        padding: 0 2px;
        border: 0;
        border-radius: 16px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: var(--muted);
        background: transparent;
        box-shadow: none;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.05;
        cursor: pointer;
      }

      .tab-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        min-width: 0;
        line-height: 1.05;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        overflow-wrap: anywhere;
      }

      .tab-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 34px;
        border-radius: 14px;
        color: var(--muted);
        background: #f0f2f7;
        box-shadow: inset 0 0 0 1px rgba(125, 137, 168, 0.06), 0 4px 10px rgba(35, 41, 67, 0.04);
        line-height: 1;
        transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
      }

      .tab-icon svg {
        width: 21px;
        height: 21px;
      }

      .tab.active {
        color: var(--navy);
        background: transparent;
      }

      .tab.active .tab-icon {
        color: var(--white);
        background: var(--navy);
        box-shadow: 0 8px 18px rgba(32, 34, 61, 0.18);
        transform: translateY(-1px);
      }

      .tab.active .tab-label {
        font-weight: 700;
      }

      .tab.active::after {
        display: none;
      }

      .tab-inform:not(.active) .tab-icon {
        color: var(--muted);
        background: #f0f2f7;
        box-shadow: inset 0 0 0 1px rgba(125, 137, 168, 0.06), 0 4px 10px rgba(35, 41, 67, 0.04);
        transform: none;
      }

      .tab-inform.active {
        color: var(--navy);
      }

      .tab-inform:not(.active) .event-tab-message-bubble {
        stroke: var(--success-strong);
      }

      .tab-inform:not(.active) .event-tab-message-lines {
        stroke: var(--muted);
      }

      .event-coachmark-target,
      .expense-coachmark-target,
      .attendance-reminder-target {
        box-shadow: 0 0 0 3px rgba(47, 102, 223, 0.16);
      }

      .event-coachmark-target:not(.tabs-shell),
      .expense-coachmark-target:not(.tabs-shell),
      .attendance-reminder-target:not(.tabs-shell) {
        position: relative;
        z-index: 17;
      }

      .event-coachmark-target.icon-badge,
      .event-coachmark-target.tab,
      .event-coachmark-target.tabs-shell,
      .expense-coachmark-target.icon-badge,
      .expense-coachmark-target.tab,
      .expense-coachmark-target.tabs-shell,
      .attendance-reminder-target.icon-badge,
      .attendance-reminder-target.tab,
      .attendance-reminder-target.tabs-shell,
      .attendance-reminder-target.simple-list-item {
        border-radius: 14px;
      }

      .event-coachmark-layer,
      .expense-coachmark-layer,
      .attendance-reminder-layer {
        position: absolute;
        inset: 0;
        z-index: 18;
        pointer-events: none;
      }

      .event-coachmark-bubble,
      .expense-coachmark-bubble,
      .attendance-reminder-bubble {
        position: absolute;
        width: min(248px, calc(100% - 32px));
        padding: 14px 14px 12px;
        border-radius: 18px;
        background: rgba(251, 252, 255, 0.98);
        box-shadow: 0 18px 38px rgba(21, 24, 43, 0.18);
        pointer-events: auto;
      }

      .event-coachmark-bubble.top,
      .expense-coachmark-bubble.top,
      .attendance-reminder-bubble.top {
        transform-origin: bottom center;
      }

      .event-coachmark-bubble.bottom,
      .expense-coachmark-bubble.bottom,
      .attendance-reminder-bubble.bottom {
        transform-origin: top center;
      }

      .event-coachmark-pointer,
      .expense-coachmark-pointer,
      .attendance-reminder-pointer {
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 4px;
        background: rgba(251, 252, 255, 0.98);
        transform: rotate(45deg);
      }

      .event-coachmark-bubble.bottom .event-coachmark-pointer,
      .expense-coachmark-bubble.bottom .expense-coachmark-pointer,
      .attendance-reminder-bubble.bottom .attendance-reminder-pointer {
        top: -6px;
      }

      .event-coachmark-bubble.top .event-coachmark-pointer,
      .expense-coachmark-bubble.top .expense-coachmark-pointer,
      .attendance-reminder-bubble.top .attendance-reminder-pointer {
        bottom: -6px;
      }

      .event-coachmark-kicker,
      .expense-coachmark-kicker,
      .attendance-reminder-kicker,
      .expense-coachmark-kicker {
        margin: 0 0 6px;
        color: var(--blue);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .event-coachmark-bubble strong,
      .expense-coachmark-bubble strong,
      .attendance-reminder-bubble strong {
        display: block;
        margin-bottom: 6px;
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
      }

      .event-coachmark-bubble p,
      .expense-coachmark-bubble p,
      .attendance-reminder-bubble p {
        margin: 0;
        color: var(--text);
        font-size: 13px;
        line-height: 1.4;
      }

      .event-coachmark-actions,
      .expense-coachmark-actions,
      .expense-coachmark-actions,
      .attendance-reminder-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 12px;
      }

      .event-coachmark-skip,
      .event-coachmark-next,
      .expense-coachmark-next,
      .attendance-reminder-skip,
      .attendance-reminder-next {
        border: 0;
        cursor: pointer;
      }

      .event-coachmark-skip {
        padding: 0;
        color: var(--muted);
        background: transparent;
        font-size: 12px;
        font-weight: 400;
      }

      .event-coachmark-next {
        min-width: 82px;
        padding: 9px 14px;
        border-radius: 999px;
        color: var(--white);
        background: var(--navy);
        font-size: 13px;
        font-weight: 500;
      }

      .expense-coachmark-next {
        min-width: 96px;
        margin-left: auto;
        padding: 9px 14px;
        border-radius: 999px;
        color: var(--white);
        background: var(--navy);
        font-size: 13px;
        font-weight: 500;
      }

      .attendance-reminder-skip {
        padding: 0;
        color: var(--muted);
        background: transparent;
        font-size: 12px;
        font-weight: 400;
      }

      .attendance-reminder-next {
        min-width: 108px;
        margin-left: auto;
        padding: 9px 14px;
        border-radius: 999px;
        color: var(--white);
        background: var(--green);
        font-size: 13px;
        font-weight: 600;
      }

      .subtabs {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
      }

      .subtab {
        min-width: 126px;
        height: 40px;
        padding: 0 14px;
        border: 0;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: var(--white);
        font-size: 15px;
        font-weight: 400;
        line-height: 1;
        cursor: pointer;
      }

      .subtab.active {
        color: var(--white);
        background: var(--navy);
      }

      .search {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 58px;
        padding: 0 18px;
        border-radius: 18px;
        margin-bottom: 16px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
      }

      .search.collapsed {
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
        border: 0;
        border-radius: 14px;
        margin-bottom: 16px;
        background: rgba(255, 255, 255, 0.76);
        cursor: pointer;
      }

      .search input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        color: var(--text);
        background: transparent;
        font-size: 16px;
      }

      .search input::placeholder {
        color: #8b92a8;
      }

      .search-icon,
      .search-close {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: #7d859d;
      }

      .search-close {
        border: 0;
        padding: 0;
        background: transparent;
        cursor: pointer;
      }

      .list-tools {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 16px;
      }

      .list-tools-main {
        flex: 1 1 auto;
        min-width: 0;
      }

      .list-tools-main:empty {
        display: none;
      }

      .list-tools-action-shell {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: flex-start;
        gap: 8px;
      }

      .list-tools-actions {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .list-tools .search {
        margin-bottom: 0;
      }

      .list-tool-menu-toggle {
        display: none;
      }

      .list-tool-menu-mobile-only {
        display: none;
      }

      .list-tool-menu-chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 19px;
        height: 19px;
        line-height: 1;
        transform: rotate(0deg);
        transition: transform 170ms ease;
      }

      .list-tools-action-shell.is-open .list-tool-menu-chevron {
        transform: rotate(90deg);
      }

      .list-tool-menu-chevron svg {
        width: 19px;
        height: 19px;
      }

      .list-tool-button {
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.76);
        color: var(--navy-soft);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
        cursor: pointer;
        flex: 0 0 auto;
        transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
      }

      .list-tool-button.has-dot {
        position: relative;
      }

      .list-tool-button.has-dot::after {
        content: "";
        position: absolute;
        top: 10px;
        right: 10px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #ff7b72;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
      }

      .list-tool-button.active {
        color: var(--navy);
        background: rgba(255, 255, 255, 0.94);
        box-shadow:
          inset 0 0 0 1px rgba(126, 136, 164, 0.16),
          0 10px 20px rgba(31, 35, 63, 0.08);
      }

      .list-tool-button svg {
        width: 18px;
        height: 18px;
      }

      .list-tool-button-label {
        display: none;
      }

      .list-filter-panel {
        display: grid;
        gap: 10px;
        padding: 14px 16px;
        margin-bottom: 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.84);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
      }

      .list-filter-panel strong {
        color: var(--navy);
        font-size: 14px;
        font-weight: 500;
      }

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

      .list-filter-chip {
        border: 0;
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(234, 238, 247, 0.8);
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
      }

      .list-filter-chip.active {
        background: var(--navy);
        color: var(--white);
      }

      .stack {
        display: grid;
        gap: 12px;
      }

      .label {
        margin: 0 0 10px;
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 400;
      }

      .panel,
      .field,
      .textarea,
      .choice,
      .card,
      .simple-list-item {
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
      }

      .simple-list-item {
        border: 0;
        width: 100%;
        color: var(--text);
        text-align: left;
        appearance: none;
        -webkit-appearance: none;
        -webkit-text-fill-color: var(--text);
      }

      @media (prefers-reduced-motion: no-preference) {
        button:not(:disabled),
        [role="button"]:not([aria-disabled="true"]) {
          transition: transform 130ms ease, filter 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
          transform-origin: center;
        }

        button:not(:disabled):active,
        button:not(:disabled).is-pressed,
        [role="button"]:not([aria-disabled="true"]):active,
        [role="button"].is-pressed {
          transform: scale(0.975) translateY(1px);
          filter: brightness(0.95) saturate(0.98);
          box-shadow:
            inset 0 2px 8px rgba(24, 28, 49, 0.12),
            0 2px 6px rgba(24, 28, 49, 0.06);
        }
      }

      .panel,
      .field,
      .choice,
      .simple-list-item {
        padding: 14px 16px;
      }

      .panel h3,
      .simple-list-item h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        color: var(--navy);
        -webkit-text-fill-color: var(--navy);
        line-height: 1.3;
      }

      .panel p,
      .simple-list-item p {
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
      }

      .settings-stack .simple-list-item {
        padding: 18px 20px;
        transition: all 180ms ease;
      }

      .settings-stack .simple-list-item:hover {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 
          inset 0 0 0 1px rgba(255, 255, 255, 0.9),
          0 4px 12px rgba(35, 41, 67, 0.08);
      }
        font-size: 14px;
        -webkit-text-fill-color: currentColor;
      }
.settings-card-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.settings-stack {
  width: 100%;
}

.settings-card-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  -webkit-text-fill-color: currentColor;
}

.settings-card-steps {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(240, 244, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.12);
}

.settings-card-steps strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
}

.settings-card-steps ol {
  margin: 8px 0 0 18px;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.settings-card-steps li + li {
  margin-top: 6px;
}

.notification-preferences {
  display: grid;
  gap: 18px;
  margin-top: 14px;
}

.notification-preference-block {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(126, 136, 164, 0.16);
}

.notification-preference-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.notification-preference-block h4 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
}

.notification-preference-block p {
  margin: 0;
}

.notification-preference-options {
  gap: 8px;
}

      .settings-item-with-icon,
      .feedback-intro-card {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .settings-item-copy,
      .feedback-intro-copy {
        min-width: 0;
        flex: 1 1 auto;
      }

      .settings-item-icon,
      .feedback-intro-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        color: var(--navy);
        background: rgba(79, 90, 170, 0.12);
        box-shadow: inset 0 0 0 1px rgba(79, 90, 170, 0.14);
        flex: 0 0 auto;
      }

      .settings-item-icon svg,
      .feedback-intro-icon svg {
        width: 22px;
        height: 22px;
      }

      .legal-document {
        gap: 14px;
      }

      .legal-document-meta {
        padding: 14px 16px;
      }

      .legal-document-meta p {
        margin: 0;
        color: var(--navy-soft);
        font-size: 13px;
      }

      @media (max-width: 720px) {
        .list-tools {
          align-items: flex-start;
          position: relative;
          z-index: 22;
        }

        .list-tools-main {
          order: 2;
          flex: 1 1 auto;
          min-width: 0;
        }

        .list-tools-action-shell {
          order: 1;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }

        .list-tools-main.search-open .search {
          width: 100%;
          min-height: 38px;
        }

        .list-tool-menu-toggle {
          display: inline-flex;
          width: 38px;
          height: 38px;
          border-radius: 12px;
          color: var(--navy);
          background: rgba(251, 252, 255, 0.94);
          box-shadow:
            0 10px 24px rgba(31, 35, 63, 0.07),
            inset 0 0 0 1px rgba(255, 255, 255, 0.78);
        }

        .list-tool-button.list-tool-menu-mobile-only {
          display: inline-flex;
        }

        .list-tools-actions {
          position: absolute;
          top: calc(100% + 8px);
          left: 0;
          display: none;
          min-width: 180px;
          padding: 10px;
          border-radius: 18px;
          background: rgba(251, 252, 255, 0.98);
          box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.84),
            0 18px 36px rgba(31, 35, 63, 0.17);
          z-index: 35;
          flex-direction: column;
          align-items: stretch;
          backdrop-filter: blur(14px);
        }

        .list-tools-action-shell.is-open .list-tools-actions {
          display: flex;
        }

        .list-tools-action-shell.no-toggle {
          flex-direction: row;
          align-items: center;
        }

        .list-tools-action-shell.no-toggle .list-tools-actions {
          position: static;
          display: inline-flex;
          min-width: 0;
          padding: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
          flex-direction: row;
          align-items: center;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
        }

        .list-tool-button.list-tool-menu-button {
          width: 100%;
          height: auto;
          min-height: 48px;
          padding: 7px 12px 7px 8px;
          justify-content: flex-start;
          gap: 12px;
          border-radius: 14px;
          color: var(--navy-soft);
          background: transparent;
          box-shadow: none;
        }

        .list-tool-button-label {
          display: block;
          flex: 1 1 auto;
          min-width: 0;
          font-size: 13px;
          font-weight: 600;
          line-height: 1.12;
          text-align: left;
          white-space: normal;
        }

        .list-tool-button.list-tool-menu-button svg {
          width: 34px;
          height: 34px;
          padding: 8px;
          border-radius: 12px;
          color: var(--navy-soft);
          background: rgba(232, 237, 249, 0.82);
          box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.12);
        }

        .list-tool-button.list-tool-menu-button.active {
          color: var(--navy);
          background: rgba(232, 238, 252, 0.9);
        }

        .list-tool-button.list-tool-menu-button.active svg {
          color: var(--blue);
          background: rgba(47, 102, 223, 0.12);
          box-shadow: inset 0 0 0 1px rgba(47, 102, 223, 0.15);
        }

        .list-tools-action-shell.no-toggle .list-tool-button.list-tool-menu-button {
          width: 38px;
          height: 38px;
          min-height: 38px;
          padding: 0;
          justify-content: center;
          gap: 0;
          border-radius: 12px;
          background: rgba(251, 252, 255, 0.94);
          box-shadow:
            0 10px 24px rgba(31, 35, 63, 0.07),
            inset 0 0 0 1px rgba(255, 255, 255, 0.78);
        }

        .list-tools-action-shell.no-toggle .list-tool-button.list-tool-menu-button svg {
          width: 18px;
          height: 18px;
          padding: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }

        .list-tools-action-shell.no-toggle .list-tool-button-label {
          display: none;
        }

        .list-tools .search:not(.collapsed) {
          width: 100%;
        }

        .event-screen[data-event-tab-layout="supplies"] .group-add-desktop-only {
          display: none;
        }
      }

      .legal-section {
        padding: 18px 18px 16px;
      }

      .legal-section h3 {
        margin: 0 0 10px;
        color: var(--text);
        font-size: 17px;
        font-weight: 500;
      }

      .legal-section p {
        margin: 0;
        color: var(--text);
        font-size: 14px;
        line-height: 1.6;
      }

      .legal-section p + p {
        margin-top: 10px;
      }

      .legal-section a {
        color: var(--navy);
        font-weight: 500;
        text-decoration: none;
      }

      .legal-section a:hover,
      .legal-section a:focus-visible {
        text-decoration: underline;
      }

      .legal-list {
        margin: 10px 0 0;
        padding-left: 18px;
        color: var(--text);
      }

      .legal-list li {
        margin: 0;
        line-height: 1.6;
      }

      .legal-list li + li {
        margin-top: 8px;
      }

      .field label,
      .textarea label {
        display: block;
        margin-bottom: 10px;
        color: var(--navy);
        font-size: 13px;
        font-weight: 500;
      }

      .field-required-indicator {
        color: #d74242;
        font-weight: 600;
      }

      .field input,
      .field select,
      .textarea textarea,
      .attendance-field select,
      .message-composer textarea {
        width: 100%;
        border: 0;
        outline: 0;
        padding: 0;
        color: var(--text);
        background: transparent;
        font-size: 16px;
      }

      .field select {
        appearance: none;
        -webkit-appearance: none;
      }

      .field-select-editable {
        position: relative;
      }

      .field-select-editable select {
        padding-right: 32px;
      }

      .field-select-editable svg {
        position: absolute;
        right: 2px;
        top: 50%;
        width: 18px;
        height: 18px;
        color: rgba(82, 89, 114, 0.68);
        transform: translateY(-50%);
        pointer-events: none;
      }

      .composer-meta {
        padding: 10px 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.55);
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 400;
      }

      .composer-meta.error {
        background: rgba(255, 111, 97, 0.14);
        color: #8b2019;
        box-shadow: inset 0 0 0 1px rgba(255, 111, 97, 0.18);
      }

      .composer-meta.success {
        background: rgba(155, 229, 170, 0.18);
        color: #1f6b33;
        box-shadow: inset 0 0 0 1px rgba(74, 157, 95, 0.14);
      }

      .composer-actions {
        display: grid;
        gap: 10px;
      }

      .secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        height: 48px;
        border: 1px solid rgba(58, 67, 98, 0.18);
        border-radius: 16px;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.72);
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        cursor: pointer;
        -webkit-text-fill-color: currentColor;
      }

      .inline-link-button {
        border: 0;
        min-width: 0;
        max-width: 100%;
        padding: 0;
        color: var(--navy);
        background: transparent;
        font-size: 14px;
        font-weight: 500;
        text-decoration: underline;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
        cursor: pointer;
      }

      .local-account-inline-note {
        display: grid;
        gap: 8px;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        margin-bottom: 10px;
        padding: 2px 0 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.4;
        overflow-wrap: anywhere;
      }

      .local-account-inline-note > * {
        min-width: 0;
        max-width: 100%;
      }

      .local-account-inline-note span {
        margin: 0;
        overflow-wrap: anywhere;
      }

      .local-account-inline-copy {
        margin: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      .local-account-inline-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        min-width: 0;
        max-width: 100%;
      }

      .local-account-inline-warning {
        color: var(--danger-strong);
        font-weight: 600;
      }

      .guest-account-inline-note {
        row-gap: 4px;
      }

      .local-account-inline-action {
        font-size: 13px;
        font-weight: 500;
      }

      .local-account-inline-separator {
        color: var(--muted);
        font-size: 13px;
      }

      .primary:disabled,
      .secondary:disabled {
        cursor: not-allowed;
        opacity: 0.55;
      }

      .button-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
      }

      .button-icon svg {
        width: 18px;
        height: 18px;
      }

      .create-event-ai-button {
        justify-content: center;
        gap: 8px;
        padding: 0 14px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
      }

      @keyframes create-entry-slide-in {
        from { opacity: 0; transform: translateY(18px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0)    scale(1); }
      }

      .create-event-entry-stack {
        gap: 14px;
        max-width: 860px;
        padding-top: 12px;
      }

      .create-event-entry-card {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        width: 100%;
        padding: 22px 24px;
        border: 0;
        border-radius: 28px;
        text-align: left;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 14px 34px rgba(31, 35, 64, 0.08), inset 0 0 0 1px rgba(82, 89, 114, 0.08);
        cursor: pointer;
        transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
        animation: create-entry-slide-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .create-event-entry-card:nth-child(1) { animation-delay: 0ms; }
      .create-event-entry-card:nth-child(2) { animation-delay: 70ms; }
      .create-event-entry-card:nth-child(3) { animation-delay: 140ms; }

      .create-event-entry-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 52px rgba(31, 35, 64, 0.13), inset 0 0 0 1px rgba(82, 89, 114, 0.1);
      }

      .create-event-entry-card:active {
        transform: scale(0.975);
        box-shadow: 0 6px 16px rgba(31, 35, 64, 0.07), inset 0 0 0 1px rgba(82, 89, 114, 0.08);
        transition-duration: 80ms;
      }

      .create-event-entry-card-ai {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 240, 255, 0.96) 100%);
      }

      .create-event-entry-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border-radius: 22px;
        color: var(--navy);
        background: rgba(234, 239, 252, 0.92);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.1);
        font-size: 34px;
        font-weight: 500;
        line-height: 1;
      }

      .create-event-entry-card-ai .create-event-entry-icon {
        color: #ffffff;
        background: linear-gradient(135deg, #ff8a5b 0%, #ff5fa2 45%, #6f7cff 100%);
        box-shadow: 0 12px 24px rgba(111, 124, 255, 0.2);
      }

      .create-event-entry-icon svg {
        width: 26px;
        height: 26px;
      }

      .create-event-entry-copy {
        display: grid;
        gap: 8px;
        min-width: 0;
        align-self: center;
      }

      .create-event-entry-copy strong {
        font-size: 20px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--navy);
      }

      .create-event-entry-copy span {
        color: var(--navy-soft);
        font-size: 15px;
        line-height: 1.5;
        font-weight: 400;
      }

      .create-event-action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
      }

      .create-event-action-row.single-action {
        grid-template-columns: minmax(0, 1fr);
      }

      .create-event-action-row .primary,
      .create-event-action-row .secondary {
        min-width: 0;
        height: 56px;
        padding: 0 14px;
        font-size: 16px;
        font-weight: 500;
        border: 1px solid rgba(58, 67, 98, 0.14);
        color: var(--navy);
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 8px 20px rgba(31, 35, 64, 0.05);
      }

      .create-event-action-row.single-action .primary {
        border-color: transparent;
        color: #fff;
        background: var(--navy);
        box-shadow: 0 16px 32px rgba(31, 35, 64, 0.18);
      }

      .create-event-ai-button .button-icon {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        color: #ffffff;
        background: linear-gradient(135deg, #ff8a5b 0%, #ff5fa2 45%, #6f7cff 100%);
        box-shadow: 0 8px 16px rgba(111, 124, 255, 0.18);
      }

      .create-event-ai-button .button-icon svg {
        width: 16px;
        height: 16px;
      }

      .create-event-ai-button .button-label {
        min-width: 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.15;
      }

      .create-event-template-link {
        justify-self: center;
        margin-top: -2px;
        color: var(--navy-soft);
        text-decoration: none;
      }

      .create-event-template-picker {
        display: grid;
        gap: 10px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.58);
        box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.12);
      }

      .create-event-template-picker-standalone {
        gap: 18px;
        padding: 20px;
      }

      .create-event-template-picker-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .create-event-template-picker-head.meta-only {
        justify-content: flex-end;
      }

      .create-event-template-picker-head-copy {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        min-width: 0;
      }

      .create-event-template-picker-head strong {
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
      }

      .create-event-template-picker-head .primary {
        width: auto;
        min-width: 190px;
        height: 48px;
        padding: 0 18px;
        border: 0;
        color: #fff;
        background: var(--navy);
        box-shadow: 0 16px 32px rgba(31, 35, 64, 0.18);
      }

      .create-event-template-list {
        display: grid;
        gap: 8px;
      }

      @media (min-width: 960px) {
        .create-event-template-list {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          align-items: start;
        }
      }

      .create-event-template-group-list,
      .create-event-template-folder-group {
        display: grid;
        gap: 12px;
      }

      .create-event-template-folder {
        display: grid;
        gap: 10px;
      }

      .create-event-template-folder-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 2px 0;
        list-style: none;
        cursor: pointer;
      }

      .create-event-template-folder-head::-webkit-details-marker {
        display: none;
      }

      .create-event-template-folder-head::after {
        content: "⌃";
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy-soft);
        background: rgba(238, 243, 251, 0.92);
        box-shadow: inset 0 0 0 1px rgba(198, 207, 224, 0.72);
        font-size: 15px;
        line-height: 1;
      }

      .create-event-template-folder:not([open]) .create-event-template-folder-head::after {
        content: "⌄";
      }

      .create-event-template-folder-head strong {
        color: var(--navy);
        font-size: 15px;
        font-weight: 600;
      }

      .create-event-template-folder-head span {
        color: var(--navy-soft);
        font-size: 13px;
      }

      .create-event-template-item {
        display: grid;
        gap: 4px;
        padding: 14px 16px;
        border: 0;
        border-radius: 16px;
        text-align: left;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.12);
        color: var(--navy);
        cursor: pointer;
      }

      .create-event-template-item strong {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 500;
      }

      .create-event-template-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--navy-soft);
        background: rgba(230, 235, 247, 0.9);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.08);
      }

      .create-event-template-item span {
        color: var(--navy-soft);
        font-size: 13px;
        line-height: 1.35;
      }

      .create-event-template-item-row {
        display: flex;
        align-items: stretch;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.12);
        border-radius: 16px;
        overflow: hidden;
      }

      .create-event-template-item-row .create-event-template-item {
        flex: 1 1 auto;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
      }

      .create-event-template-delete {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        background: transparent;
        border: 0;
        border-left: 1px solid rgba(126, 136, 164, 0.12);
        cursor: pointer;
        color: var(--navy-soft);
        opacity: 0.6;
      }

      .create-event-template-delete:hover {
        opacity: 1;
        color: var(--red, #c0392b);
      }

      .button-lock-badge {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(44, 51, 78, 0.82);
        background: rgba(234, 238, 247, 0.92);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
        flex: 0 0 auto;
      }

      .button-lock-badge svg {
        width: 12px;
        height: 12px;
      }

      .radio-row {
        display: grid;
        gap: 10px;
      }

      .radio-choice {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 0;
        padding: 0;
        background: transparent;
        color: var(--navy);
        font-size: 15px;
        font-weight: 400;
        text-align: left;
        cursor: pointer;
      }

      .radio-dot {
        width: 18px;
        height: 18px;
        border-radius: 999px;
        box-shadow: inset 0 0 0 1.5px rgba(44, 51, 78, 0.45);
        background: rgba(255, 255, 255, 0.9);
        position: relative;
        flex: 0 0 auto;
      }

      .radio-choice.active .radio-dot::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 999px;
        background: var(--navy);
      }

      .inline-checkbox-choice {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: 0;
        padding: 0;
        background: transparent;
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
      }

      .inline-checkbox-choice-box {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        box-shadow: inset 0 0 0 1.8px rgba(44, 51, 78, 0.28);
        background: rgba(255, 255, 255, 0.92);
        position: relative;
        flex: 0 0 auto;
      }

      .inline-checkbox-choice.active .inline-checkbox-choice-box::after {
        content: "";
        position: absolute;
        inset: 5px;
        border-radius: 4px;
        background: var(--navy);
      }

      .event-settings-autosave-status {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-height: 34px;
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 600;
      }

      .field-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .create-event-single-day-grid {
        align-items: stretch;
        grid-auto-rows: 1fr;
      }

      .create-event-single-day-grid > .field {
        min-height: 140px;
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .create-event-time-field {
        align-self: stretch;
      }

      .create-event-single-day-grid .event-date-field {
        justify-content: space-between;
      }

      .create-event-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .create-event-dates-field {
        gap: 14px;
      }

      .create-event-dates-card {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      .create-event-date-list {
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      .create-event-date-entry-wrapper,
      .create-event-date-entry {
        display: grid;
        gap: 10px;
        padding: 12px 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .create-event-date-entry-wrapper + .create-event-date-entry-wrapper {
        border-top: 1px solid rgba(198, 207, 224, 0.4);
      }

      .create-event-date-row-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
      }

      .event-date-entry-main {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-grow: 1;
        min-height: 38px;
      }

      .event-date-entry-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .event-date-text {
        font-size: 15px;
        color: var(--navy);
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .event-date-time-label {
        color: var(--muted);
        font-weight: 400;
        font-size: 14px;
        margin-left: 4px;
      }

      .event-date-input-hidden {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        -webkit-appearance: none;
      }

      .create-event-date-icon-button.clock-button.active {
        color: var(--navy);
        background: rgba(238, 243, 251, 1);
        box-shadow: inset 0 0 0 1.5px var(--navy);
      }

      .create-event-date-icon-button.clock-button:not(.active) {
        color: var(--muted);
        opacity: 0.75;
      }

      .create-event-date-row,
      .create-event-date-time-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
      }

      .create-event-date-time-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      }

      .create-event-date-input {
        min-width: 0;
        display: grid;
        gap: 7px;
        color: var(--navy);
        font-size: 13px;
        font-weight: 600;
      }

      .create-event-date-input input,
      .create-event-date-time-row select {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        border: 0;
        border-radius: 14px;
        padding: 0 13px;
        color: var(--navy);
        background: rgba(251, 252, 255, 0.94);
        box-shadow: inset 0 0 0 1px rgba(198, 207, 224, 0.7);
        font: inherit;
      }

      .create-event-date-time-row .field {
        min-height: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
      }

      .create-event-date-time-row .field label {
        margin-bottom: 7px;
        color: var(--navy);
        font-size: 13px;
        font-weight: 600;
      }

      .create-event-date-icon-button {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
        background: rgba(238, 243, 251, 0.9);
        box-shadow: inset 0 0 0 1px rgba(198, 207, 224, 0.68);
        cursor: pointer;
      }

      .create-event-date-icon-button svg {
        width: 17px;
        height: 17px;
      }

      .create-event-add-date-button,
      .create-event-add-time-button {
        min-height: 48px;
        border: 1.5px dashed rgba(126, 148, 184, 0.66);
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: var(--navy);
        background: rgba(251, 252, 255, 0.52);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        padding: 0 16px;
      }

      .create-event-add-date-button {
        margin-top: 16px;
        align-self: flex-start;
      }

      .create-event-add-time-button {
        justify-self: start;
        min-height: 38px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 13px;
      }

      @media (max-width: 390px) {
        .create-event-entry-card {
          grid-template-columns: 44px minmax(0, 1fr);
          gap: 12px;
          padding: 14px 16px;
          border-radius: 20px;
        }

        .create-event-entry-icon {
          width: 44px;
          height: 44px;
          border-radius: 14px;
          font-size: 26px;
        }

        .create-event-entry-icon svg {
          width: 20px;
          height: 20px;
        }

        .create-event-entry-copy strong {
          font-size: 15px;
        }

        .create-event-entry-copy span {
          font-size: 12.5px;
          line-height: 1.4;
        }
      }

      @media (max-width: 720px) {
        .create-event-entry-card {
          grid-template-columns: 54px minmax(0, 1fr);
          gap: 14px;
          padding: 18px 20px;
          border-radius: 22px;
        }

        .create-event-entry-icon {
          width: 54px;
          height: 54px;
          border-radius: 18px;
        }

        .create-event-entry-copy strong {
          font-size: 18px;
        }

        .create-event-entry-copy span {
          font-size: 14px;
        }

        .create-event-single-day-grid {
          gap: 8px;
        }

        .create-event-single-day-grid > .field {
          min-height: 132px;
          padding: 16px 14px 14px;
        }

        .create-event-single-day-grid .event-date-display-button,
        .create-event-single-day-grid .event-date-input-wrap,
        .create-event-single-day-grid .event-date-input {
          min-height: 52px;
        }

        .create-event-single-day-grid .event-date-display-button,
        .create-event-single-day-grid .event-date-input {
          font-size: 13px;
        }

        .create-event-single-day-grid .event-date-display-button {
          padding: 0 40px 0 12px;
        }

        .create-event-single-day-grid .event-date-display-button::after,
        .create-event-single-day-grid .event-date-input-wrap::after {
          right: 12px;
          width: 17px;
          height: 17px;
        }

        .create-event-single-day-grid .event-date-input-wrap {
          padding: 0 40px 0 12px;
        }

        .create-event-single-day-grid .event-date-display-button span {
          display: block;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .create-event-time-grid {
          gap: 8px;
        }

        .create-event-time-grid .field {
          padding: 18px 12px 12px;
        }

        .create-event-time-grid .field label {
          margin-bottom: 10px;
          font-size: 11px;
        }

        .create-event-time-grid .field select {
          min-height: 32px;
          margin-top: 3px;
          font-size: 14px;
          line-height: 1.35;
        }
      }

      .event-date-field {
        position: relative;
      }

      .event-date-input-wrap {
        position: relative;
        min-height: 48px;
        border-radius: 14px;
        padding: 0 42px 0 14px;
        display: flex;
        align-items: center;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 244, 252, 0.86) 100%);
        box-shadow:
          inset 0 0 0 1px rgba(125, 137, 168, 0.12),
          0 10px 18px rgba(35, 41, 67, 0.04);
      }

      .event-date-input-wrap::after {
        content: "";
        position: absolute;
        right: 14px;
        top: 50%;
        width: 18px;
        height: 18px;
        color: rgba(32, 34, 61, 0.58);
        transform: translateY(-50%);
        background: currentColor;
        pointer-events: none;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.25 3.5a.75.75 0 0 1 .75.75V5h8V4.25a.75.75 0 0 1 1.5 0V5h.75A2.75 2.75 0 0 1 21 7.75v9.5A2.75 2.75 0 0 1 18.25 20H5.75A2.75 2.75 0 0 1 3 17.25v-9.5A2.75 2.75 0 0 1 5.75 5h.75v-.75a.75.75 0 0 1 .75-.75ZM5.75 8A1.25 1.25 0 0 0 4.5 9.25v8A1.25 1.25 0 0 0 5.75 18.5h12.5a1.25 1.25 0 0 0 1.25-1.25v-8A1.25 1.25 0 0 0 18.25 8H5.75Zm2.5 3a.75.75 0 0 1 .75.75v.5h.5a.75.75 0 0 1 0 1.5H9v.5a.75.75 0 0 1-1.5 0V13.75H7a.75.75 0 0 1 0-1.5h.5v-.5a.75.75 0 0 1 .75-.75Zm4.25 1.25a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5h-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.25 3.5a.75.75 0 0 1 .75.75V5h8V4.25a.75.75 0 0 1 1.5 0V5h.75A2.75 2.75 0 0 1 21 7.75v9.5A2.75 2.75 0 0 1 18.25 20H5.75A2.75 2.75 0 0 1 3 17.25v-9.5A2.75 2.75 0 0 1 5.75 5h.75v-.75a.75.75 0 0 1 .75-.75ZM5.75 8A1.25 1.25 0 0 0 4.5 9.25v8A1.25 1.25 0 0 0 5.75 18.5h12.5a1.25 1.25 0 0 0 1.25-1.25v-8A1.25 1.25 0 0 0 18.25 8H5.75Zm2.5 3a.75.75 0 0 1 .75.75v.5h.5a.75.75 0 0 1 0 1.5H9v.5a.75.75 0 0 1-1.5 0V13.75H7a.75.75 0 0 1 0-1.5h.5v-.5a.75.75 0 0 1 .75-.75Zm4.25 1.25a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5h-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
      }

      .event-date-input {
        min-height: 48px;
        padding-right: 4px;
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.01em;
        cursor: pointer;
      }

      .event-date-input::-webkit-date-and-time-value {
        text-align: left;
      }

      .event-date-input::-webkit-datetime-edit,
      .event-date-input::-webkit-datetime-edit-fields-wrapper,
      .event-date-input::-webkit-datetime-edit-text,
      .event-date-input::-webkit-datetime-edit-month-field,
      .event-date-input::-webkit-datetime-edit-day-field,
      .event-date-input::-webkit-datetime-edit-year-field {
        color: inherit;
        font: inherit;
      }

      .event-date-input::-webkit-calendar-picker-indicator {
        position: absolute;
        right: 0;
        top: 0;
        width: 48px;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
      }

      .event-date-input::-webkit-clear-button,
      .event-date-input::-webkit-inner-spin-button {
        display: none;
      }

      .event-date-input:focus {
        outline: none;
      }

      .event-date-field:focus-within .event-date-input-wrap {
        box-shadow:
          inset 0 0 0 1.5px rgba(47, 102, 223, 0.28),
          0 12px 20px rgba(47, 102, 223, 0.08);
      }

      .event-date-field-custom {
        min-width: 0;
      }

      .event-date-input-native {
        position: absolute;
        inset: auto;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }

      .event-date-display-button {
        width: 100%;
        min-height: 48px;
        border: 0;
        border-radius: 14px;
        padding: 0 44px 0 14px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        color: var(--navy);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 252, 0.9) 100%);
        box-shadow:
          inset 0 0 0 1px rgba(125, 137, 168, 0.13),
          0 10px 18px rgba(35, 41, 67, 0.04);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: -0.01em;
        text-align: left;
        cursor: pointer;
        transition: box-shadow 0.18s ease, transform 0.18s ease;
      }

      .event-date-display-button span {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .event-date-field-settings .event-date-input {
        font-size: 13px;
      }

      .event-date-field-settings .event-date-display-button {
        font-size: 13px;
        letter-spacing: -0.02em;
      }

      .event-date-display-button::after {
        content: "";
        position: absolute;
        right: 14px;
        top: 50%;
        width: 18px;
        height: 18px;
        color: rgba(32, 34, 61, 0.58);
        transform: translateY(-50%);
        background: currentColor;
        pointer-events: none;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.25 3.5a.75.75 0 0 1 .75.75V5h8V4.25a.75.75 0 0 1 1.5 0V5h.75A2.75 2.75 0 0 1 21 7.75v9.5A2.75 2.75 0 0 1 18.25 20H5.75A2.75 2.75 0 0 1 3 17.25v-9.5A2.75 2.75 0 0 1 5.75 5h.75v-.75a.75.75 0 0 1 .75-.75ZM5.75 8A1.25 1.25 0 0 0 4.5 9.25v8A1.25 1.25 0 0 0 5.75 18.5h12.5a1.25 1.25 0 0 0 1.25-1.25v-8A1.25 1.25 0 0 0 18.25 8H5.75Zm2.5 3a.75.75 0 0 1 .75.75v.5h.5a.75.75 0 0 1 0 1.5H9v.5a.75.75 0 0 1-1.5 0V13.75H7a.75.75 0 0 1 0-1.5h.5v-.5a.75.75 0 0 1 .75-.75Zm4.25 1.25a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5h-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.25 3.5a.75.75 0 0 1 .75.75V5h8V4.25a.75.75 0 0 1 1.5 0V5h.75A2.75 2.75 0 0 1 21 7.75v9.5A2.75 2.75 0 0 1 18.25 20H5.75A2.75 2.75 0 0 1 3 17.25v-9.5A2.75 2.75 0 0 1 5.75 5h.75v-.75a.75.75 0 0 1 .75-.75ZM5.75 8A1.25 1.25 0 0 0 4.5 9.25v8A1.25 1.25 0 0 0 5.75 18.5h12.5a1.25 1.25 0 0 0 1.25-1.25v-8A1.25 1.25 0 0 0 18.25 8H5.75Zm2.5 3a.75.75 0 0 1 .75.75v.5h.5a.75.75 0 0 1 0 1.5H9v.5a.75.75 0 0 1-1.5 0V13.75H7a.75.75 0 0 1 0-1.5h.5v-.5a.75.75 0 0 1 .75-.75Zm4.25 1.25a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5h-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
      }

      .event-date-display-button.placeholder {
        color: rgba(58, 67, 98, 0.7);
      }

      .event-date-display-button:hover,
      .event-date-display-button[aria-expanded="true"] {
        box-shadow:
          inset 0 0 0 1.5px rgba(47, 102, 223, 0.2),
          0 14px 24px rgba(35, 41, 67, 0.08);
      }

      .event-date-display-button:focus-visible {
        outline: none;
        box-shadow:
          inset 0 0 0 1.5px rgba(47, 102, 223, 0.32),
          0 14px 24px rgba(47, 102, 223, 0.1);
      }

      .event-date-picker-popover {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        z-index: 30;
        width: min(100%, 320px);
        padding: 14px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow:
          inset 0 0 0 1px rgba(125, 137, 168, 0.12),
          0 20px 34px rgba(23, 27, 47, 0.16);
        backdrop-filter: blur(14px);
      }

      .event-date-picker-head {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
      }

      .event-date-picker-head strong {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.02em;
        text-align: center;
        color: var(--navy);
        text-transform: capitalize;
      }

      .event-date-picker-nav {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 11px;
        background: rgba(233, 238, 248, 0.9);
        color: rgba(34, 40, 69, 0.9);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
      }

      .event-date-picker-nav:hover {
        background: rgba(219, 227, 241, 0.96);
      }

      .event-date-picker-weekdays {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 8px;
      }

      .event-date-picker-weekdays span {
        display: grid;
        place-items: center;
        min-height: 24px;
        color: rgba(91, 101, 134, 0.8);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .event-date-picker-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px;
      }

      .event-date-picker-day {
        min-width: 0;
        height: 38px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
      }

      .event-date-picker-day:hover {
        background: rgba(227, 234, 247, 0.9);
      }

      .event-date-picker-day.outside {
        color: rgba(105, 115, 147, 0.42);
      }

      .event-date-picker-day.selected {
        background: var(--navy);
        color: #fff;
        box-shadow: 0 10px 18px rgba(32, 38, 74, 0.22);
      }

      .event-date-picker-day:disabled,
      .event-date-picker-day.unavailable {
        color: rgba(105, 115, 147, 0.55);
        background: transparent;
        cursor: default;
        pointer-events: none;
      }

      .event-date-picker-day.unavailable:hover {
        background: transparent;
      }

      .create-event-error {
        margin-top: 8px;
        padding: 12px 14px;
        border-radius: 16px;
        color: #7a1d17;
        background: rgba(255, 111, 97, 0.16);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.45;
        pointer-events: none;
      }

      .create-event-loading-card {
        display: grid;
        justify-items: center;
        gap: 10px;
        padding: 16px 18px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.08);
        text-align: center;
      }

      .create-event-loading-logo {
        width: 48px;
        height: 48px;
        object-fit: contain;
        animation: aiAssistGlow 1.8s ease-in-out infinite;
      }

      .create-event-loading-card strong {
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
      }

      .create-event-loading-card p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }

      .create-event-loading-card .create-event-loading-warning {
        color: #b42318;
        font-weight: 600;
      }

      .create-event-loading-card .ai-chat-progress {
        width: 100%;
        margin-top: 2px;
      }

      .ai-preview {
        display: grid;
        gap: 10px;
        padding: 14px 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
      }

      .ai-preview h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
      }

      .ai-preview-group {
        display: grid;
        gap: 6px;
      }

      .ai-preview-group strong {
        color: var(--navy);
        font-size: 14px;
      }

      .ai-preview-group p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
      }

      .ai-preview-actions {
        display: grid;
        gap: 10px;
      }

      .ai-preview-note {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }

      .ai-chat-status-card,
      .ai-chat-question-card,
      .ai-chat-proposal-card,
      .ai-chat-stage,
      .ai-chat-input {
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow:
          0 10px 28px rgba(31, 35, 63, 0.07),
          inset 0 0 0 1px rgba(255, 255, 255, 0.88);
      }

      .ai-chat-status-card,
      .ai-chat-question-card,
      .ai-chat-proposal-card {
        padding: 15px;
      }

      .ai-chat-stage {
        padding: 15px;
      }

      .ai-chat-stage.compact {
        padding: 14px 15px;
      }

      .ai-chat-stage-typing {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 120px;
      }

      .ai-chat-stage-typing-logo {
        animation: aiAssistGlow 1.8s ease-in-out infinite;
        flex-shrink: 0;
      }

      .ai-chat-typing-copy {
        display: grid;
        gap: 10px;
      }

      .ai-chat-typing-copy strong {
        color: var(--navy);
        font-size: 14px;
        font-weight: 600;
      }

      .ai-chat-screen-stack {
        gap: 12px;
      }

      .ai-chat-status-card {
        padding: 12px 14px;
        background: rgba(255, 255, 255, 0.9);
      }

      .ai-chat-question-card h3 {
        margin: 0;
        color: var(--navy);
        font-size: 18px;
        font-weight: 600;
        line-height: 1.25;
      }

      .ai-chat-question-card p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
      }

      .ai-chat-progress {
        display: block;
      }

      .ai-chat-progress-track {
        position: relative;
        height: 8px;
        border-radius: 999px;
        background: rgba(213, 220, 226, 0.75);
        overflow: hidden;
      }

      .ai-chat-progress-track span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #67dc89 0%, #34c46a 55%, #22b758 100%);
      }

      .ai-chat-progress-track span.timed {
        transform-origin: left center;
        animation-name: aiTimedProgressFill;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        will-change: transform;
      }

      @keyframes aiTimedProgressFill {
        from { transform: scaleX(var(--ai-progress-start, 0)); }
        to { transform: scaleX(1); }
      }

      .ai-chat-question-card {
        display: grid;
        gap: 0;
        background: rgba(255, 255, 255, 0.94);
      }

      .ai-chat-proposal-head {
        display: grid;
        gap: 12px;
      }

      .ai-chat-proposal-head h3 {
        margin: 0;
        color: var(--navy);
        font-size: 18px;
        font-weight: 500;
      }

      .ai-chat-proposal-head p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }

      .ai-chat-hero {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        justify-items: start;
        gap: 14px;
        min-height: 0;
        padding: 0;
        text-align: left;
      }

      .ai-chat-hero.calm {
        gap: 12px;
      }

      .ai-chat-hero-logo {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background: linear-gradient(135deg, #ff8a5b 0%, #ff5fa2 45%, #6f7cff 100%);
        box-shadow: 0 10px 24px rgba(111, 124, 255, 0.18);
        flex: 0 0 auto;
        isolation: isolate;
        overflow: visible;
      }

      .ai-chat-hero.waiting .ai-chat-hero-logo {
        animation: aiAssistGlow 1.8s ease-in-out infinite;
      }

      .ai-chat-hero.waiting .ai-chat-hero-logo::before,
      .ai-chat-hero.waiting .ai-chat-hero-logo::after {
        content: "";
        position: absolute;
        inset: -7px;
        border-radius: 24px;
        pointer-events: none;
      }

      .ai-chat-hero.waiting .ai-chat-hero-logo::before {
        border: 3px solid rgba(48, 195, 106, 0.18);
        box-shadow: 0 0 0 1px rgba(48, 195, 106, 0.06);
      }

      .ai-chat-hero.waiting .ai-chat-hero-logo::after {
        border: 3px solid transparent;
        border-top-color: #30c36a;
        border-right-color: rgba(48, 195, 106, 0.72);
        box-shadow: 0 0 18px rgba(48, 195, 106, 0.22);
        animation: aiProposalLoaderRing 120s linear infinite;
      }

      .ai-chat-hero-logo svg {
        position: relative;
        z-index: 1;
        width: 28px;
        height: 28px;
      }

      .ai-chat-hero-copy {
        display: grid;
        gap: 6px;
      }

      .ai-chat-hero-copy strong {
        color: var(--navy);
        font-size: 14px;
        font-weight: 600;
      }

      .ai-chat-hero-copy p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
      }

      .ai-chat-hero-note {
        color: #5f6c8b;
      }

      .ai-chat-thread {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        min-height: 280px;
        justify-content: flex-end;
      }

      .ai-chat-bubble {
        display: block;
        max-width: min(82%, 360px);
        padding: 12px 14px;
        border-radius: 18px;
        font-size: 14px;
        line-height: 1.5;
      }

      .ai-chat-bubble.assistant {
        background: rgba(240, 243, 250, 0.96);
        color: var(--navy);
        align-self: flex-start;
        border-top-left-radius: 8px;
      }

      .ai-chat-bubble.user {
        background: linear-gradient(180deg, #d9fdd3 0%, #c6f3bf 100%);
        color: #1d3823;
        align-self: flex-end;
        border-top-right-radius: 8px;
        box-shadow: inset 0 0 0 1px rgba(88, 152, 96, 0.12);
      }

      .ai-chat-bubble.loading {
        opacity: 0.86;
      }

      .ai-chat-bubble p {
        margin: 0;
        color: inherit;
      }

      .ai-chat-typing {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .ai-chat-typing-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(63, 74, 112, 0.45);
        animation: aiTypingDot 1.15s ease-in-out infinite;
      }

      .ai-chat-typing-dot:nth-child(2) {
        animation-delay: 0.15s;
      }

      .ai-chat-typing-dot:nth-child(3) {
        animation-delay: 0.3s;
      }

      .ai-chat-proposal-head .primary {
        min-height: 38px;
        padding: 0 12px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        box-shadow: 0 2px 6px rgba(32, 34, 61, 0.05);
      }

      .ai-chat-convert-button {
        width: auto;
        max-width: 100%;
        justify-self: start;
        padding: 0 18px;
        min-height: 44px;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 500;
        background: linear-gradient(180deg, #54d57c 0%, #2fbe61 100%);
        box-shadow:
          0 6px 14px rgba(47, 190, 97, 0.16),
          inset 0 0 0 1px rgba(255, 255, 255, 0.18);
      }

      .ai-chat-convert-button:hover {
        filter: brightness(0.99);
      }

      @keyframes aiTypingDot {
        0%, 80%, 100% {
          transform: translateY(0);
          opacity: 0.36;
        }
        40% {
          transform: translateY(-4px);
          opacity: 1;
        }
      }

      .ai-chat-proposal-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 12px;
      }

      .ai-chat-proposal-tab {
        min-width: 0;
        min-height: 36px;
        border: 0;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--navy);
        background: rgba(247, 249, 253, 0.96);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.08);
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
      }

      .ai-chat-proposal-tab.active {
        color: #ffffff;
        background: rgba(32, 34, 61, 0.96);
        box-shadow: 0 5px 10px rgba(32, 34, 61, 0.08);
      }

      .ai-chat-proposal-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
        padding: 6px 10px;
        border-radius: 999px;
        color: #36508d;
        background: rgba(111, 124, 255, 0.1);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      .ai-chat-proposal-panel {
        display: grid;
        gap: 10px;
        margin-top: 12px;
        padding: 12px 14px;
        border-radius: 16px;
        background: rgba(245, 247, 252, 0.92);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.08);
      }

      .ai-chat-proposal-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .ai-chat-proposal-panel-head strong {
        color: var(--navy);
        font-size: 14px;
      }

      .ai-chat-proposal-count {
        color: var(--muted);
        font-size: 12px;
        font-weight: 500;
      }

      .ai-chat-proposal-hint {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }

      .ai-chat-proposal-list {
        display: grid;
        gap: 10px;
      }

      .create-event-template-preview .ai-chat-proposal-list {
        gap: 8px;
      }

      .ai-chat-proposal-item {
        display: grid;
        gap: 8px;
        padding: 12px 13px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.08);
      }

      .create-event-template-preview .ai-chat-proposal-item {
        gap: 6px;
        padding: 10px 12px;
      }

      .create-event-template-preview .ai-chat-proposal-item-head {
        align-items: center;
      }

      .create-event-template-preview .ai-chat-proposal-item-title {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
      }

      .create-event-template-preview .ai-chat-proposal-title-chip .ai-chat-proposal-chip {
        min-height: 22px;
      }

      .ai-chat-proposal-item.supply {
        background: rgba(246, 249, 255, 0.95);
      }

      .create-event-template-preview .ai-chat-proposal-checklist {
        display: none;
      }

      .ai-chat-proposal-item-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }

      .ai-chat-proposal-item-head > :first-child {
        min-width: 0;
        flex: 1 1 auto;
      }

      .ai-chat-proposal-item-title {
        margin: 0;
        color: var(--navy);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .ai-chat-proposal-item-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .ai-chat-proposal-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 24px;
        padding: 0 9px;
        border-radius: 999px;
        color: #51607e;
        background: rgba(238, 242, 249, 0.98);
        font-size: 12px;
        font-weight: 500;
      }

      .ai-chat-proposal-chip.supply {
        color: #36508d;
        background: rgba(111, 124, 255, 0.1);
      }

      .ai-chat-proposal-subrows {
        display: grid;
        gap: 4px;
        padding-top: 2px;
      }

      .ai-chat-proposal-subrows p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }

      .ai-chat-proposal-remove {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #8c5d66;
        background: rgba(255, 241, 244, 0.98);
        cursor: pointer;
      }

      .ai-chat-proposal-remove svg {
        width: 16px;
        height: 16px;
      }

      .ai-chat-proposal-empty {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }

      .ai-chat-composer {
        display: grid;
        gap: 10px;
      }

      .ai-chat-composer-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .ai-chat-composer.guided {
        gap: 10px;
      }

      .ai-chat-composer-actions.guided {
        gap: 10px;
        justify-content: stretch;
      }

      .ai-chat-composer-actions.guided > * {
        flex: 1 1 0;
      }

      .ai-chat-send-button {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background: var(--navy);
        box-shadow: 0 12px 22px rgba(32, 34, 61, 0.18);
        cursor: pointer;
      }

      .ai-chat-send-button:disabled {
        cursor: not-allowed;
        opacity: 0.55;
      }

      .ai-chat-send-button svg {
        width: 18px;
        height: 18px;
      }

      .ai-chat-input {
        position: relative;
        padding: 12px 14px;
      }

      .ai-chat-input textarea {
        display: block;
        min-height: 24px;
        height: 24px;
        max-height: 160px;
        padding: 0 54px 0 0;
        line-height: 24px;
        overflow-y: hidden;
        resize: none;
      }

      .ai-chat-input .ai-chat-send-button {
        position: absolute;
        right: 10px;
        bottom: 6px;
      }

      .ai-chat-input textarea:disabled {
        color: rgba(82, 89, 114, 0.72);
      }

      .ai-chat-input.guided {
        padding: 14px 15px;
      }

      .ai-chat-input.guided textarea {
        min-height: 100px;
        height: 100px;
        max-height: 200px;
        padding: 0;
        line-height: 1.5;
      }

      .ai-chat-footer-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .ai-chat-footer-actions .secondary {
        min-height: 40px;
        padding-inline: 18px;
      }

      @media (max-width: 560px) {
        .ai-chat-hero {
          grid-template-columns: 1fr;
          justify-items: center;
          text-align: center;
        }

        .ai-chat-footer-actions {
          flex-direction: column;
          align-items: stretch;
        }
      }

      @keyframes aiAssistGlow {
        0%, 100% {
          transform: scale(1);
          box-shadow:
            0 12px 28px rgba(111, 124, 255, 0.22),
            0 0 0 0 rgba(111, 124, 255, 0.16);
        }
        50% {
          transform: scale(1.06) translateY(-2px);
          box-shadow:
            0 18px 34px rgba(111, 124, 255, 0.28),
            0 0 0 10px rgba(111, 124, 255, 0.06);
        }
      }

      @keyframes aiProposalLoaderRing {
        from {
          transform: rotate(-45deg);
        }
        to {
          transform: rotate(315deg);
        }
      }

      .textarea {
        padding: 14px 16px;
      }

      .textarea textarea {
        min-height: 96px;
        resize: none;
      }

      .choice {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
      }

      .choice strong {
        font-size: 16px;
        font-weight: 400;
      }

      .primary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        height: 52px;
        border: 0;
        border-radius: 16px;
        color: var(--white);
        background: var(--navy);
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
        cursor: pointer;
        -webkit-text-fill-color: currentColor;
      }

      .overview-download-group {
        display: grid;
        gap: 10px;
      }

      .expense-download-group {
        margin-bottom: 10px;
      }

      .overview-download {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        min-height: 86px;
        padding: 14px 16px;
        text-align: left;
        cursor: pointer;
      }

      .expense-download {
        background: linear-gradient(135deg, rgba(238, 243, 255, 0.96), rgba(248, 250, 255, 0.98));
        box-shadow:
          inset 0 0 0 1px rgba(108, 129, 197, 0.16),
          0 10px 24px rgba(71, 87, 139, 0.08);
      }

      .expense-download:hover {
        filter: none;
        background: linear-gradient(135deg, rgba(233, 240, 255, 0.98), rgba(246, 249, 255, 1));
      }

      .expense-download .overview-download-copy p {
        color: #7380a5;
      }

      .overview-download-copy {
        display: grid;
        gap: 4px;
        min-width: 0;
      }

      .overview-download-copy h3 {
        margin: 0;
      }

      .overview-download-copy p {
        margin: 0;
      }

      .overview-download-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: rgba(234, 238, 247, 0.96);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.08);
        flex: 0 0 auto;
      }

      .expense-download-icon {
        color: #2f66df;
        background: rgba(231, 237, 251, 0.98);
        box-shadow: inset 0 0 0 1px rgba(47, 102, 223, 0.12);
      }

      .overview-download-icon svg {
        width: 18px;
        height: 18px;
      }

      .overview-download-icon.loading::after {
        content: "";
        position: absolute;
        inset: -5px;
        border-radius: 999px;
        border: 3px solid rgba(87, 184, 110, 0.22);
        border-top-color: #57b86e;
        animation: overviewDownloadSpinner 0.9s linear infinite;
      }

      .overview-download-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
      }

      .overview-detail-download-group {
        margin-bottom: 10px;
      }

      .overview-event-block .overview-detail-download-group {
        margin-bottom: 0;
      }

      .overview-detail-download {
        min-height: 76px;
        padding: 14px 16px;
        border-radius: 18px;
        background: rgba(251, 252, 255, 0.9);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.74),
          0 10px 24px rgba(31, 35, 63, 0.05);
      }

      .overview-detail-download .overview-download-copy h3 {
        color: var(--navy);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.15;
      }

      .overview-detail-download .overview-download-copy p {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.25;
      }

      .overview-expense-tools {
        display: grid;
        gap: 10px;
        margin-bottom: 12px;
      }

      .overview-expense-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        margin-bottom: 2px;
      }

      .drawer-back-inline {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        border: none;
        background: rgba(31, 35, 63, 0.05);
        color: var(--navy);
        font-size: 20px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        transition: all 180ms ease;
      }

      .drawer-back-inline:hover {
        background: rgba(31, 35, 63, 0.1);
      }

      .drawer-back-inline:active {
        transform: scale(0.92);
      }

      .overview-expense-header-row .overview-expense-tabs {
        flex: 1 1 auto;
        margin-bottom: 0;
      }

      .overview-expense-title {
        font-size: 19px;
        font-weight: 700;
        color: var(--navy);
        letter-spacing: -0.01em;
        line-height: 1.2;
        padding-left: 4px;
      }

      .expense-download-btn-small {
        height: 42px;
        padding: 0 14px;
        border-radius: 11px;
        border: none;
        background: #ffffff;
        color: var(--navy);
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        flex: 0 0 auto;
        box-shadow: inset 0 0 0 1px rgba(31, 35, 63, 0.08);
        transition: all 180ms ease;
      }

      .expense-download-btn-small:hover {
        background: rgba(232, 237, 249, 0.45);
        box-shadow: inset 0 0 0 1px rgba(31, 35, 63, 0.12);
      }

      .expense-download-btn-small:active {
        transform: scale(0.96);
      }

      .expense-download-btn-small .download-icon-small {
        width: 16px;
        height: 16px;
        stroke-width: 2.2px;
      }

      .expense-download-btn-small .spinner-small {
        width: 14px;
        height: 14px;
        border: 2px solid rgba(31, 35, 63, 0.15);
        border-top-color: var(--navy);
        border-radius: 50%;
        animation: overviewDownloadSpinner 0.8s linear infinite;
      }

      .overview-expense-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
        width: 100%;
      }

      .overview-expense-tabs .subtab {
        width: 100%;
        min-width: 0;
        height: 42px;
        padding: 0 14px;
        border-radius: 11px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.66);
      }

      .overview-expense-tabs .subtab.active {
        background: var(--navy);
        box-shadow: 0 10px 22px rgba(31, 35, 63, 0.14);
      }

      .overview-expense-tools .expense-download-group {
        margin-bottom: 0;
      }

      .overview-expense-tools .overview-download {
        min-height: 76px;
        padding: 14px 16px;
        border-radius: 18px;
      }

      .overview-expense-tools .overview-download-copy h3 {
        color: var(--navy);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.15;
      }

      .overview-expense-tools .overview-download-copy p {
        font-size: 13px;
        font-weight: 400;
        line-height: 1.25;
      }

      .overview-expense-stack {
        gap: 10px;
      }

      .overview-expense-stack .expense-total-card,
      .overview-expense-stack .expense-row-card {
        width: 100%;
        border-radius: 15px;
      }

      .overview-expense-stack .expense-row-card {
        min-height: 62px;
        padding: 12px 14px;
      }

      .overview-expense-stack .expense-row-copy h3 {
        color: var(--navy);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.18;
      }

      .overview-expense-stack .expense-row-meta {
        color: var(--navy);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.18;
      }

      .overview-expense-stack .expense-row-side p {
        color: var(--navy);
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        text-align: right;
      }

      .overview-expense-stack .expense-row-hint {
        color: var(--navy);
        background: rgba(232, 237, 249, 0.94);
        font-size: 11px;
        font-weight: 700;
      }

      @keyframes overviewDownloadSpinner {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .quick-nav {
        display: grid;
        gap: 10px;
      }

      .event-screen[data-event-tab-layout="overview"] .quick-nav,
      .event-screen[data-event-tab-layout="overview"] .overview-download-group {
        gap: 8px;
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        min-height: 72px;
        padding: 12px 14px;
        border-radius: 18px;
        background: rgba(251, 252, 255, 0.86);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
      }

      .event-screen[data-event-tab-layout="overview"] .overview-download {
        grid-template-columns: 36px minmax(0, 1fr) auto;
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice-copy,
      .event-screen[data-event-tab-layout="overview"] .overview-download-copy {
        align-self: center;
        justify-self: stretch;
      }

      .event-screen[data-event-tab-layout="overview"] .quick-count,
      .event-screen[data-event-tab-layout="overview"] .overview-download-actions {
        justify-self: end;
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice-icon-event {
        color: #2f66df;
        background: rgba(232, 238, 254, 0.96);
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice-icon-attendance {
        color: #2bb54c;
        background: rgba(225, 248, 231, 0.96);
        box-shadow:
          inset 0 0 0 1px rgba(43, 181, 76, 0.14),
          0 8px 18px rgba(43, 181, 76, 0.08);
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice-icon-tasks {
        color: var(--navy);
        background: rgba(231, 235, 247, 0.96);
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice-icon-supplies {
        color: #1672a5;
        background: rgba(225, 243, 250, 0.96);
        box-shadow:
          inset 0 0 0 1px rgba(22, 114, 165, 0.13),
          0 8px 18px rgba(22, 114, 165, 0.07);
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice-icon-expenses {
        color: #7a5b18;
        background: rgba(255, 244, 213, 0.96);
        box-shadow:
          inset 0 0 0 1px rgba(170, 127, 32, 0.14),
          0 8px 18px rgba(170, 127, 32, 0.07);
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice-icon-download,
      .event-screen[data-event-tab-layout="overview"] .quick-choice-icon-runbook {
        color: #7e5bef;
        background: #f3e8ff;
        box-shadow:
          inset 0 0 0 1px rgba(126, 91, 239, 0.13),
          0 8px 18px rgba(126, 91, 239, 0.07);
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice-icon-download {
        color: #d28a00;
        background: #fff3d6;
        box-shadow:
          inset 0 0 0 1px rgba(210, 138, 0, 0.15),
          0 8px 18px rgba(210, 138, 0, 0.07);
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice-icon-settings {
        color: #14966b;
        background: #e6f7f1;
        box-shadow:
          inset 0 0 0 1px rgba(20, 150, 107, 0.14),
          0 8px 18px rgba(20, 150, 107, 0.07);
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice h3 {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.15;
      }

      .event-screen[data-event-tab-layout="overview"] .quick-choice p {
        margin: 0;
        font-size: 12px;
        line-height: 1.24;
      }

      .overview-event-block {
        display: grid;
        gap: 18px;
      }

      .overview-event-focus-grid {
        display: grid;
        gap: 12px;
      }

      .overview-event-focus-actions {
        display: grid;
        gap: 10px;
      }

      .overview-event-focus-grid .overview-detail-download-group {
        margin-bottom: 0;
      }

      .overview-event-focus-grid .overview-detail-download {
        min-height: 90px;
      }

      .overview-event-detail-head {
        display: grid;
        align-items: start;
        gap: 16px;
        margin-bottom: 18px;
      }

      .overview-event-detail-head .drawer-back {
        justify-self: start;
        width: auto;
      }

      .overview-event-title-copy {
        display: grid;
        gap: 0;
        width: 100%;
      }

      .overview-event-title-copy::before {
        width: 78px;
        height: 78px;
        margin: 2px 0 24px 24px;
      }

      .overview-event-title-copy h2 {
        margin: 0 0 24px;
        color: var(--navy);
        font-size: 24px;
        font-weight: 700;
        line-height: 1.12;
      }

      .overview-event-intro {
        display: grid;
        gap: 7px;
      }

      .overview-event-intro h3 {
        margin: 0;
        color: var(--navy);
        font-size: 18px;
        font-weight: 600;
        line-height: 1.2;
      }

      .overview-event-intro p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.35;
      }

      .overview-attendance-detail-head {
        display: grid;
        align-items: start;
        gap: 16px;
        margin-bottom: 18px;
      }

      .overview-attendance-detail-head .drawer-back {
        justify-self: start;
        width: auto;
      }

      .overview-attendance-title-copy {
        display: grid;
        width: 100%;
      }

      .overview-attendance-title-copy::before {
        width: 78px;
        height: 78px;
        margin: 2px 0 24px 24px;
      }

      .overview-attendance-title-copy h2 {
        margin: 0;
        color: var(--navy);
        font-size: 24px;
        font-weight: 700;
        line-height: 1.12;
      }

      .overview-task-detail-head {
        display: grid;
        align-items: start;
        gap: 16px;
        margin-bottom: 18px;
      }

      .overview-task-detail-head .drawer-back {
        justify-self: start;
        width: auto;
      }

      .overview-task-title-copy {
        display: grid;
        width: 100%;
      }

      .overview-task-title-copy::before {
        width: 78px;
        height: 78px;
        margin: 2px 0 24px 24px;
      }

      .overview-task-title-copy h2 {
        margin: 0;
        color: var(--navy);
        font-size: 24px;
        font-weight: 700;
        line-height: 1.12;
      }

      .overview-supply-detail-head {
        display: grid;
        align-items: start;
        gap: 16px;
        margin-bottom: 18px;
      }

      .overview-supply-detail-head .drawer-back {
        justify-self: start;
        width: auto;
      }

      .overview-supply-title-copy {
        display: grid;
        width: 100%;
      }

      .overview-supply-title-copy::before {
        width: 78px;
        height: 78px;
        margin: 2px 0 24px 24px;
      }

      .overview-supply-title-copy h2 {
        margin: 0;
        color: var(--navy);
        font-size: 24px;
        font-weight: 700;
        line-height: 1.12;
      }

      .overview-expense-detail-head {
        display: grid;
        align-items: start;
        gap: 16px;
        margin-bottom: 18px;
      }

      .overview-expense-detail-head .drawer-back {
        justify-self: start;
        width: auto;
      }

      .overview-expense-title-copy {
        display: grid;
        justify-items: start;
        width: 100%;
      }

      .overview-expense-title-copy::before {
        width: 78px;
        height: 78px;
        margin: 2px 0 24px 24px;
      }

      .overview-expense-title-copy h2 {
        margin: 0;
        color: var(--navy);
        font-size: 24px;
        font-weight: 700;
        line-height: 1.12;
      }

      .overview-event-head {
        display: grid;
        gap: 4px;
        padding: 0 4px;
      }

      .overview-event-head h3 {
        margin: 0;
        color: var(--navy);
        font-size: 18px;
        font-weight: 500;
      }

      .overview-event-head p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
      }

      .overview-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .overview-summary-card {
        display: grid;
        align-content: start;
        gap: 7px;
        min-height: 104px;
        padding: 16px;
        border-radius: 18px;
        background: rgba(251, 252, 255, 0.88);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.72),
          0 10px 24px rgba(31, 35, 63, 0.05);
      }

      .overview-summary-label {
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.18;
        text-transform: uppercase;
      }

      .overview-summary-value {
        color: var(--navy);
        font-size: 30px;
        font-weight: 700;
        line-height: 0.95;
      }

      .overview-summary-note {
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.28;
      }

      .overview-action-grid {
        display: grid;
        gap: 12px;
        margin-top: 2px;
      }

      .overview-action-card {
        width: 100%;
        min-height: 88px;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border: none;
        border-radius: 18px;
        background: rgba(251, 252, 255, 0.9);
        color: var(--navy);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.74),
          0 10px 24px rgba(31, 35, 63, 0.05);
        text-align: left;
        cursor: pointer;
        transition:
          transform 160ms ease,
          box-shadow 160ms ease,
          background-color 160ms ease;
      }

      .overview-action-card:hover:not(:disabled) {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.96);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.82),
          0 14px 28px rgba(31, 35, 63, 0.08);
      }

      .overview-action-card:active:not(:disabled) {
        transform: translateY(0);
      }

      .overview-action-card:disabled {
        opacity: 0.58;
        cursor: not-allowed;
      }

      .overview-action-card > .quick-choice-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        align-self: center;
      }

      .overview-action-copy {
        min-width: 0;
        display: grid;
        align-content: center;
        gap: 4px;
      }

      .overview-action-label {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0;
      }

      .overview-action-description {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.25;
      }

      .overview-action-side {
        min-width: 76px;
        min-height: 58px;
        display: grid;
        align-content: center;
        gap: 2px;
        justify-items: center;
        text-align: center;
        padding: 8px 10px;
        border-radius: 14px;
        background: rgba(234, 238, 247, 0.78);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.07);
      }

      .overview-action-side strong {
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
      }

      .overview-action-side span {
        max-width: 11ch;
        color: var(--navy-soft);
        font-size: 10px;
        font-weight: 600;
        line-height: 1.12;
      }

      .home-header {
        display: grid;
        gap: 16px;
        margin-bottom: 16px;
      }

      .home-screen {
        position: relative;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        padding-bottom: calc(env(safe-area-inset-bottom) + 88px + var(--keyboard-offset));
        touch-action: pan-y;
      }

      .home-brand-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 76px;
      }

      .home-brand-row h1 {
        margin: 0;
        color: var(--navy);
        font-size: 26px;
        font-weight: 600;
        line-height: 1.1;
      }

      .home-logo {
        display: none;
      }

      .home-brand-mark {
        display: block;
        width: auto;
        height: 78px;
        object-fit: contain;
        align-self: center;
        margin-top: 0;
        filter: drop-shadow(0 12px 20px rgba(31, 35, 63, 0.09));
      }

      .home-notification-button {
        position: relative;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.78);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
        cursor: pointer;
      }

      .home-notification-button.has-dot::after {
        content: "";
        position: absolute;
        top: 10px;
        right: 11px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #ff7b72;
      }

      .home-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
        margin-left: auto;
        align-self: center;
      }

      .event-header-copy {
        display: contents;
      }

      .event-desktop-links {
        display: none;
      }

      .event-header-brand-link {
        grid-area: mark;
        justify-self: start;
        border: 0;
        padding: 0;
        background: transparent;
        cursor: pointer;
      }

      .event-header-mark {
        grid-area: mark;
        justify-self: start;
        display: block;
        width: auto;
        height: 92px;
        object-fit: contain;
        filter: drop-shadow(0 8px 18px rgba(31, 35, 63, 0.08));
      }

      .event-header-back-icon {
        display: block;
        width: 28px;
        height: 28px;
        color: var(--navy);
      }

      .event-header-title {
        grid-area: title;
        width: 100%;
        text-align: left;
        font-weight: 700;
      }

      .event-desktop-links {
        grid-area: desktopnav;
        gap: 10px;
      }

      .event-desktop-link {
        width: 100%;
        min-height: 46px;
        border: 0;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 18px;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
      }

      .event-desktop-link.icon-only {
        width: 50px;
        min-width: 50px;
        min-height: 50px;
        justify-content: center;
        padding: 0;
      }

      .event-desktop-link.icon-only svg {
        width: 22px;
        height: 22px;
      }

      .event-desktop-link.has-dot {
        position: relative;
      }

      .event-desktop-link.has-dot::after {
        content: "";
        position: absolute;
        top: 14px;
        right: 16px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--danger-strong);
      }

      .home-account-button {
        width: 46px;
        height: 46px;
        color: #ffffff;
        background: linear-gradient(145deg, #30345f 0%, #20223d 100%);
        box-shadow:
          0 14px 24px rgba(31, 35, 63, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
      }

      .home-account-button svg {
        width: 22px;
        height: 22px;
      }

      .home-header h1 {
        margin: 0;
        color: var(--navy);
        font-size: 28px;
        font-weight: 500;
        line-height: 1.1;
      }

      .home-header p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
      }

      .home-section-head {
        display: grid;
        gap: 4px;
        align-items: start;
        margin-top: 14px;
        margin-bottom: 12px;
      }

      .home-section-head-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
      }

      .home-section-head h2 {
        margin: 0;
        color: var(--navy);
        font-size: 24px;
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: 0;
      }

      .home-section-head.home-signed-out-head {
        gap: 12px;
        margin-top: 0;
        margin-bottom: 0;
      }

      .home-signed-out-header {
        width: min(100%, 560px);
        margin: 0 auto 18px;
        gap: clamp(20px, 3vh, 30px);
        padding-top: clamp(20px, 4vh, 40px);
      }

      .home-brand-row.home-signed-out-brand-row {
        justify-content: flex-start;
        align-items: flex-start;
        min-height: 136px;
        margin-bottom: 4px;
      }

      .home-signed-out-brand-row .home-brand-mark {
        height: 80px;
        margin-top: 0;
        transform: scale(1.85);
        transform-origin: left top;
      }

      .home-signed-out-hero {
        display: grid;
        gap: 24px;
        width: 100%;
        max-width: 560px;
      }

      .home-signed-out-intro {
        display: grid;
        gap: 14px;
        max-width: 560px;
      }

      .home-section-head.home-signed-out-head h2 {
        font-size: clamp(28px, 4.4vw, 38px);
        font-weight: 800;
        line-height: 1.02;
      }

      .home-signed-out-auth-card {
        width: 100%;
        max-width: 440px;
        margin: 16px auto 0;
        padding: 28px 24px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.95);
        box-shadow:
          0 24px 48px rgba(31, 35, 63, 0.1),
          inset 0 0 0 1px rgba(255, 255, 255, 0.9);
        box-sizing: border-box;
      }

      .home-signed-out-nudge {
        display: grid;
        gap: 12px;
        width: 100%;
        max-width: 560px;
      }

      .home-signed-out-nudge-copy {
        margin: 0;
        color: rgba(58, 67, 98, 0.76);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
      }

      .home-signed-out-copy {
        margin: 0;
        color: rgba(33, 39, 71, 0.66);
        font-size: clamp(15px, 1.6vw, 18px);
        font-weight: 500;
        line-height: 1.32;
        letter-spacing: 0;
      }

      .home-signed-out-copy-subline {
        display: inline-block;
        margin-top: 4px;
      }

      .home-signed-out-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
      }

      .home-signed-out-auth-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        box-sizing: border-box;
      }

      .home-signed-out-auth-divider {
        display: none;
      }

      .home-signed-out-login-copy {
        margin: 0;
        color: rgba(58, 67, 98, 0.76);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
      }

      .home-signed-out-login-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 46px;
        flex: 1 1 0;
        min-width: 0;
        border: 1.5px solid rgba(126, 136, 164, 0.2);
        padding: 0 12px;
        border-radius: 12px;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.8);
        font-size: 14.5px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        transition: all 180ms ease;
        box-shadow: 0 2px 8px rgba(31, 35, 63, 0.04);
        box-sizing: border-box;
      }

      .home-signed-out-login-link:hover,
      .home-signed-out-login-link:focus-visible {
        background: var(--white);
        border-color: var(--navy-soft);
        color: var(--navy);
        outline: none;
      }

      .home-signed-out-signup {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 46px;
        flex: 1 1 0;
        min-width: 0;
        border: 1.5px solid rgba(47, 102, 223, 0.2);
        padding: 0 12px;
        border-radius: 12px;
        color: var(--blue);
        background: rgba(47, 102, 223, 0.06);
        font-size: 14.5px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        transition: all 180ms ease;
        box-sizing: border-box;
      }

      .home-signed-out-signup:hover {
        background: rgba(47, 102, 223, 0.12);
        border-color: var(--blue);
      }

      .home-create-button.home-signed-out-create-button {
        width: 100%;
        max-width: 440px;
        min-width: 0;
        min-height: 58px;
        padding: 0 30px;
        justify-content: center;
        box-shadow:
          0 18px 34px rgba(32, 34, 61, 0.17),
          0 6px 16px rgba(58, 66, 160, 0.12);
        box-sizing: border-box;
      }

      @media (min-width: 900px) {
        .home-signed-out-actions {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }

        .home-signed-out-auth-actions {
          min-height: 52px;
        }
      }

      .home-create-button {
        width: 100%;
        min-height: 52px;
        border: 0;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: var(--white);
        background: linear-gradient(145deg, #3b42a0 0%, #20223d 55%, #161838 100%);
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.01em;
        cursor: pointer;
        box-shadow:
          0 4px 18px -2px rgba(32, 34, 96, 0.5),
          0 1px 4px rgba(0, 0, 0, 0.14),
          inset 0 1px 0 rgba(255, 255, 255, 0.12);
        transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
      }

      .home-primary-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: stretch;
        margin-bottom: 16px;
      }

      .home-folder-create-button {
        color: var(--navy);
        background: rgba(255, 255, 255, 0.86);
        box-shadow:
          inset 0 0 0 1px rgba(125, 137, 168, 0.18),
          0 12px 22px -18px rgba(31, 35, 63, 0.5);
      }

      .home-folder-create-button:hover {
        box-shadow:
          inset 0 0 0 1px rgba(125, 137, 168, 0.24),
          0 14px 26px -18px rgba(31, 35, 63, 0.52);
      }

      .home-create-button:hover {
        transform: translateY(-2px);
        box-shadow:
          0 10px 28px -4px rgba(32, 34, 96, 0.55),
          0 2px 6px rgba(0, 0, 0, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.14);
      }

      .home-create-button:active {
        transform: scale(0.975);
        transition-duration: 80ms;
        box-shadow:
          0 2px 8px -2px rgba(32, 34, 96, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .home-folder-add {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        flex: 0 0 auto;
      }

      .home-create-button .plus {
        width: 24px;
        height: 24px;
        border-radius: 9px;
        display: inline-grid;
        place-items: center;
        font-size: 24px;
        font-weight: 400;
        line-height: 1;
        margin-top: -1px;
        background: rgba(255, 255, 255, 0.14);
      }

      .home-folder-create-button .plus {
        background: rgba(47, 102, 223, 0.1);
        color: var(--blue);
      }

      .event-list {
        display: grid;
        gap: 14px;
        flex: 1 1 auto;
        align-content: start;
        padding-bottom: 10px;
      }

      @media (max-width: 720px) {
        .home-folder-head-spacer {
          display: block;
          width: 24px;
          min-width: 24px;
          min-height: 24px;
          flex: 0 0 auto;
        }

        .home-signed-out-header {
          gap: 20px;
          padding-top: 22px;
        }

        .home-brand-row.home-signed-out-brand-row {
          min-height: 106px;
          margin-bottom: 6px;
        }

        .home-signed-out-brand-row .home-brand-mark {
          height: 58px;
          transform: scale(2.3);
          transform-origin: left top;
        }

        .home-signed-out-hero {
          gap: 22px;
        }

        .home-section-head.home-signed-out-head {
          gap: 12px;
        }

        .home-section-head.home-signed-out-head h2 {
          font-size: clamp(24px, 6vw, 28px);
          line-height: 1.06;
        }

        .home-signed-out-auth-actions {
          width: 100%;
          max-width: 440px;
          margin: 0 auto;
          gap: 12px;
          justify-content: center;
        }

        .home-signed-out-copy {
          font-size: 15px;
          line-height: 1.36;
        }

        .home-signed-out-nudge {
          gap: 10px;
        }

        .home-signed-out-nudge-copy {
          font-size: 14px;
          line-height: 1.48;
        }

        .home-create-button.home-signed-out-create-button {
          width: 100%;
          min-width: 0;
          min-height: 52px;
          justify-content: center;
          padding: 0 20px;
        }

        .home-signed-out-signup,
        .home-signed-out-login-link {
          font-size: clamp(10.5px, 3.2vw, 13px);
          padding: 0 4px;
          height: 44px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        .home-signed-out-auth-divider {
          font-size: 14px;
        }
      }

      .home-footer-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: absolute;
        left: 50%;
        bottom: 0;
        z-index: 2;
        padding: 8px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: 0 14px 34px rgba(31, 38, 68, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.52);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        transform: translateX(-50%);
        margin-bottom: calc(env(safe-area-inset-bottom) + 10px);
      }

      .home-footer-link {
        border: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        color: var(--navy-soft);
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        cursor: pointer;
      }

      .home-footer-link:hover,
      .home-footer-link:focus-visible {
        background: rgba(232, 237, 247, 0.9);
        outline: none;
      }

      .home-footer-link svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
      }

      .event-card {
        position: relative;
        width: 100%;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.72),
          0 12px 26px -24px rgba(31, 35, 63, 0.4);
      }

      .event-card.is-drop-before::before,
      .event-card.is-drop-after::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        height: 3px;
        border-radius: 999px;
        background: rgba(47, 102, 223, 0.82);
        box-shadow: 0 0 0 3px rgba(47, 102, 223, 0.14);
        pointer-events: none;
      }

      .event-card.is-drop-before::before {
        top: -7px;
      }

      .event-card.is-drop-after::after {
        bottom: -7px;
      }

      .event-card-main {
        width: 100%;
        border: 0;
        padding: 0;
        color: inherit;
        background: transparent;
        text-align: left;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: pan-y;
      }

      .event-card-main * {
        user-select: none;
        -webkit-user-select: none;
      }

      .home-folder-group {
        display: grid;
        gap: 10px;
        position: relative;
        padding: 12px;
        border-radius: 24px;
        background:
          linear-gradient(180deg, rgba(238, 243, 251, 0.9) 0%, rgba(221, 229, 242, 0.68) 100%);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.6),
          0 16px 34px -30px rgba(31, 35, 63, 0.42);
      }

      .home-folder-group.menu-open {
        z-index: 60;
      }

      .home-folder-group.is-drop-ready {
        padding: 8px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.22);
      }

      .home-folder-group.is-drop-target {
        background: rgba(47, 102, 223, 0.12);
        box-shadow: inset 0 0 0 2px rgba(47, 102, 223, 0.2);
      }

      .home-folder-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 0 8px;
        color: rgba(31, 35, 63, 0.76);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
      }

      .home-folder-toggle {
        flex: 1 1 auto;
        border: 0;
        min-width: 0;
        min-height: 36px;
        padding: 2px 0;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: inherit;
        background: transparent;
        text-align: left;
        cursor: pointer;
      }

      .home-folder-toggle.is-static {
        cursor: default;
      }

      .home-folder-menu-wrap {
        position: relative;
        flex: 0 0 auto;
      }

      .home-folder-head-spacer {
        display: none;
      }

      .home-folder-menu-button {
        min-width: 30px;
        min-height: 30px;
        border: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(100, 108, 135, 0.58);
        background: transparent;
        box-shadow: none;
        cursor: pointer;
      }

      .home-folder-menu-button svg {
        width: 15px;
        height: 15px;
      }

      .home-folder-menu {
        top: 50%;
        left: calc(100% + 8px);
        right: auto;
        transform: translateY(-22%);
        min-width: 178px;
        max-width: min(220px, calc(100vw - 92px));
      }

      .home-folder-head .home-folder-add {
        margin-left: auto;
      }

      .home-folder-toggle[data-home-folder-drag] {
        cursor: grab;
      }

      .home-folder-group.is-home-folder-drag-source {
        opacity: 0;
        visibility: hidden;
      }

      @keyframes home-chevron-pop {
        from { opacity: 0.5; transform: scale(0.78); }
        to   { opacity: 1;   transform: scale(1); }
      }

      .home-folder-chevron {
        margin-left: auto;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: rgba(82, 89, 114, 0.08);
        color: var(--navy-soft);
        transition: background 150ms ease, color 150ms ease;
      }

      .home-folder-chevron svg {
        width: 14px;
        height: 14px;
        display: block;
        animation: home-chevron-pop 180ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }

      .home-folder-toggle:hover .home-folder-chevron {
        background: rgba(82, 89, 114, 0.14);
        color: var(--navy);
      }

      .home-folder-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow:
          inset 0 0 0 1px rgba(125, 137, 168, 0.14),
          0 6px 12px -10px rgba(31, 35, 63, 0.34);
        color: var(--navy);
        font-size: 16px;
      }

      .home-folder-badge svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
      }

      .home-folder-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
      }

      .home-drop-line {
        height: 2px;
        margin: 2px 6px 0;
        border-radius: 999px;
        background: transparent;
        opacity: 0;
        transition: opacity 120ms ease, background 120ms ease;
      }

      .home-folder-group.is-drop-target .home-drop-line {
        opacity: 1;
        background: rgba(47, 102, 223, 0.72);
      }

      .event-card.is-home-drag-source {
        opacity: 0.2;
        filter: grayscale(0.35);
        pointer-events: none;
        transition: opacity 120ms ease, filter 120ms ease;
      }

      .home-folder-group.is-home-folder-drag-source {
        opacity: 0;
        visibility: hidden;
      }

      .event-card.is-drag-pending {
        transform: scale(0.97);
        transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 6px 20px rgba(29, 37, 63, 0.14);
        z-index: 1;
        position: relative;
      }

      .home-folder-toggle.is-folder-drag-pending {
        transform: scale(0.96);
        transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
        opacity: 0.75;
      }

      @keyframes home-drag-ghost-in {
        from {
          opacity: 0;
          filter: saturate(1.04) blur(1px);
        }
        to {
          opacity: 1;
          filter: saturate(1.06) blur(0px);
        }
      }

      .home-drag-ghost {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;
        pointer-events: none;
        margin: 0;
        transform-origin: top left;
        transform: translate(-9999px, -9999px) rotate(-1.5deg) scale(0.88);
        box-shadow: 0 24px 48px rgba(29, 37, 63, 0.36), 0 6px 16px rgba(29, 37, 63, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
        will-change: transform;
        contain: layout style;
        animation: home-drag-ghost-in 180ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      body.home-dragging,
      body.home-dragging * {
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-touch-callout: none !important;
        cursor: grabbing !important;
      }

      body.home-dragging #app,
      body.home-dragging .phone {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none !important;
      }

      body.home-dragging .home-folder-toggle[data-toggle-home-folder] {
        pointer-events: none;
      }

      .event-card-menu-wrap {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .event-card.menu-open {
        z-index: 70;
      }

      .event-card-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 80;
        min-width: 212px;
        max-width: min(236px, calc(100vw - 46px));
        padding: 10px;
        border-radius: 22px;
      }

      .event-card-menu button {
        min-height: 42px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        text-align: left;
        color: var(--navy);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.18;
        white-space: normal;
      }

      .event-card-menu button.destructive {
        color: var(--danger-strong);
      }

      .event-card-menu button.destructive svg {
        width: 20px;
        height: 20px;
      }

      .saved-template-card {
        position: relative;
        padding-right: 72px;
      }

      .event-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
      }

      .event-card-title-row {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .event-card-title-row h3 {
        margin: 0;
      }

      .event-card-message-indicator {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 14px;
        background: #f0f2f7;
        box-shadow: 0 8px 18px rgba(35, 41, 67, 0.06);
        flex: 0 0 auto;
      }

      .event-card-notification-indicator {
        background: rgba(251, 252, 255, 0.9);
        color: var(--navy);
      }

      .event-card-message-indicator .app-unread-count-badge {
        top: -6px;
        right: -6px;
      }

      .event-card-message-indicator svg {
        width: 19px;
        height: 19px;
      }

      .event-card-message-indicator .event-tab-message-bubble {
        stroke: var(--success-strong);
      }

      .event-card-message-indicator .event-tab-message-lines {
        stroke: var(--muted);
      }

      .event-card-status {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: #ff7b72;
        flex: 0 0 auto;
      }

      .event-role-badge {
        flex: 0 0 auto;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
      }

      .event-role-badge.owned {
        color: var(--navy);
        background: rgba(47, 102, 223, 0.12);
      }

      .event-role-badge.participant {
        color: var(--navy-soft);
        background: rgba(123, 131, 157, 0.12);
      }

      .event-card-meta {
        margin-top: 8px;
        display: grid;
        gap: 8px;
      }

      .event-card-meta-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 400;
      }

      .event-card-meta-item svg {
        width: 16px;
        height: 16px;
        color: #9199b0;
      }

      .event-card-delete-hint {
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
      }

      .event-card-delete-bubble {
        max-width: 100%;
        border: 0;
        padding: 9px 12px 9px 11px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 18px 18px 18px 8px;
        background: rgba(255, 246, 246, 0.96);
        box-shadow: inset 0 0 0 1px rgba(214, 182, 182, 0.82);
        color: #8f5560;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
      }

      .event-card-delete-bubble svg {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .event-shell-back {
        margin-bottom: 10px;
      }

      .quick-nav button {
        width: 100%;
        border: 0;
        text-align: left;
        color: var(--navy);
        cursor: pointer;
      }

      .quick-choice {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
      }

      .quick-choice-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .quick-choice-copy {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .quick-choice-icon {
        width: 36px;
        height: 36px;
        border-radius: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        color: var(--blue);
        background: rgba(232, 238, 254, 0.95);
        box-shadow:
          inset 0 0 0 1px rgba(47, 102, 223, 0.12),
          0 8px 18px rgba(47, 102, 223, 0.08);
      }

      .quick-choice-icon svg {
        width: 19px;
        height: 19px;
      }

      .alert-dot {
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: var(--danger-strong);
      }

      .quick-choice-note.alert {
        color: #b43a31;
        font-weight: 500;
      }

      .attendance-status {
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 400;
      }

      .attendance-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
      }

      .attendance-chip {
        min-width: 112px;
        height: 34px;
        padding: 0 14px;
        border: 0;
        border-radius: 12px;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.88);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.16);
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
      }

      .attendance-chip.present.active {
        color: #14311f;
        background: var(--success);
        box-shadow: none;
      }

      .attendance-chip.absent.active {
        color: #ffffff;
        background: var(--danger-strong);
        box-shadow: none;
      }

      .attendance-chip.active {
        color: var(--white);
        background: var(--navy);
        box-shadow: none;
      }

      .quick-count {
        flex: 0 0 auto;
        min-width: 26px;
        height: 26px;
        padding: 0 7px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--blue);
        background: rgba(47, 102, 223, 0.14);
        box-shadow: inset 0 0 0 1px rgba(47, 102, 223, 0.18);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
      }

      .quick-count.zero {
        color: var(--danger-strong);
        background: rgba(255, 111, 97, 0.14);
        box-shadow: inset 0 0 0 1px rgba(255, 111, 97, 0.18);
      }

      .quick-choice.active {
        color: var(--white);
        background: var(--navy);
        box-shadow: none;
      }

      .quick-choice.active p,
      .quick-choice.active h3 {
        color: inherit;
      }

      .overview-compact-card {
        padding: 7px 12px;
        border-radius: 14px;
        color: var(--text);
        -webkit-text-fill-color: var(--text);
      }

      .overview-compact-card.checked {
        opacity: 0.96;
      }

      .overview-compact-card.checked h3 {
        color: var(--navy-soft);
        text-decoration: line-through;
        text-decoration-thickness: 1.5px;
        text-decoration-color: rgba(100, 108, 135, 0.55);
      }

      .overview-compact-card-top {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .overview-compact-card-wrap {
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }

      .overview-compact-card-body {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        padding: 0;
        background: transparent;
        text-align: left;
        color: var(--text);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -webkit-text-fill-color: var(--text);
        display: grid;
        gap: 1px;
      }

      .overview-compact-toggle {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        border-radius: 4px;
        border: 1.5px solid #aeb6ca;
        background: var(--white);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: transparent;
        cursor: pointer;
        position: relative;
        touch-action: manipulation;
      }

      .overview-compact-toggle::after {
        content: "";
        position: absolute;
        inset: -9px;
      }

      .overview-compact-toggle.checked {
        border-color: rgba(86, 182, 110, 0.95);
        background: rgba(235, 250, 239, 0.98);
        color: rgba(64, 148, 86, 1);
      }

      .overview-compact-card h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.16;
        color: var(--text);
        -webkit-text-fill-color: var(--text);
      }

      .overview-compact-card p {
        margin: 0;
        font-size: 11px;
        line-height: 1.16;
      }

      .overview-task-card {
        min-height: 46px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(251, 252, 255, 0.88);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.74),
          0 8px 18px rgba(31, 35, 63, 0.04);
      }

      .overview-task-card .overview-compact-card-wrap {
        align-items: center;
        gap: 12px;
      }

      .overview-task-card .overview-compact-card-body {
        gap: 3px;
      }

      .overview-task-card .overview-compact-toggle {
        width: 22px;
        height: 22px;
        margin: 0;
        border-radius: 7px;
        border: 1.5px solid rgba(126, 148, 184, 0.72);
        color: transparent;
        background: rgba(251, 252, 255, 0.94);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.72),
          0 4px 10px rgba(31, 35, 63, 0.05);
      }

      .overview-task-card .overview-compact-toggle.checked {
        border-color: var(--navy);
        color: #ffffff;
        background: var(--navy);
        box-shadow:
          0 6px 14px rgba(32, 34, 61, 0.18),
          inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      }

      .overview-task-card .overview-compact-toggle svg {
        width: 15px;
        height: 15px;
      }

      .overview-task-card h3 {
        color: var(--navy);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.14;
      }

      .overview-task-card p {
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.18;
      }

      .overview-supply-card {
        min-height: 46px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(251, 252, 255, 0.88);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.74),
          0 8px 18px rgba(31, 35, 63, 0.04);
      }

      .overview-supply-card .overview-compact-card-wrap {
        align-items: center;
        gap: 12px;
      }

      .overview-supply-card .overview-compact-card-body {
        gap: 3px;
      }

      .overview-supply-card .overview-compact-toggle {
        width: 22px;
        height: 22px;
        margin: 0;
        border-radius: 7px;
        border: 1.5px solid rgba(126, 148, 184, 0.72);
        color: transparent;
        background: rgba(251, 252, 255, 0.94);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.72),
          0 4px 10px rgba(31, 35, 63, 0.05);
      }

      .overview-supply-card .overview-compact-toggle.checked {
        border-color: var(--navy);
        color: #ffffff;
        background: var(--navy);
        box-shadow:
          0 6px 14px rgba(32, 34, 61, 0.18),
          inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      }

      .overview-supply-card .overview-compact-toggle svg {
        width: 15px;
        height: 15px;
      }

      .overview-supply-card h3 {
        color: var(--navy);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.14;
      }

      .overview-supply-card p {
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.18;
      }

      .overview-supply-card .overview-compact-strong {
        color: var(--navy);
        font-weight: 700;
      }

      .overview-compact-meta {
        color: var(--muted);
      }

      .overview-compact-strong {
        color: var(--text);
      }

      .overview-group {
        display: grid;
        gap: 6px;
      }

      .overview-group + .overview-group {
        margin-top: 4px;
      }

      .overview-group-title {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 4px;
        color: var(--navy);
        font-size: 13px;
        font-weight: 500;
      }

      .overview-group-button {
        width: 100%;
        justify-content: space-between;
        border: 0;
        background: transparent;
        text-align: left;
        cursor: pointer;
      }

      .overview-group-title-copy {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .participant-compact {
        padding: 7px 10px;
        border-radius: 12px;
      }

      .participant-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .participant-card-info {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .participant-avatar {
        position: relative;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        overflow: hidden;
        flex: 0 0 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(227, 233, 245, 0.96) 100%);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
      }

      .participant-avatar[data-online-profile-id]::after,
      .message-avatar[data-online-profile-id]::after,
      .activity-avatar-image[data-online-profile-id]::after,
      .activity-avatar-placeholder[data-online-profile-id]::after,
      .participant-stack-avatar[data-online-profile-id]::after {
        content: "";
        position: absolute;
        right: 1px;
        bottom: 1px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #6f7483;
        border: 2px solid var(--white);
        box-shadow: 0 0 0 1px rgba(31, 36, 64, 0.14);
        pointer-events: none;
        z-index: 3;
      }

      .participant-avatar.is-online::after,
      .message-avatar.is-online::after,
      .activity-avatar-image.is-online::after,
      .activity-avatar-placeholder.is-online::after,
      .participant-stack-avatar.is-online::after {
        background: #14a800;
        box-shadow: 0 0 0 1px rgba(20, 168, 0, 0.16);
      }

      .participant-avatar.organizer {
        box-shadow: inset 0 0 0 2px rgba(214, 167, 59, 0.95);
      }

      .participant-avatar-initial {
        color: #ffffff;
        background: linear-gradient(135deg, #cdb89e, #8b6f4f);
        box-shadow: 0 0 0 4px rgba(217, 223, 236, 0.45);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
      }

      .participant-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: translateZ(0);
        backface-visibility: hidden;
      }

      [data-profile-photo-loading] {
        opacity: 0;
      }

      .participant-avatar svg {
        width: 18px;
        height: 18px;
      }

      .profile-photo-placeholder {
        position: relative;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        border-radius: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: rgba(92, 102, 134, 0.76);
        background:
          radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 38%),
          linear-gradient(145deg, rgba(236, 241, 250, 0.98), rgba(212, 222, 240, 0.98));
      }

      .profile-photo-placeholder::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: inherit;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
        pointer-events: none;
      }

      .profile-photo-placeholder-art {
        width: 68%;
        height: 68%;
        display: block;
        opacity: 0.92;
      }

      .profile-photo-placeholder-initial {
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background: rgba(32, 34, 61, 0.76);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.86);
        font-size: 9px;
        font-weight: 700;
        line-height: 1;
      }

      .participant-avatar-button {
        flex: 0 0 auto;
        padding: 0;
        border: 0;
        background: transparent;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .participant-avatar-button:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.55);
        outline-offset: 3px;
      }

      .profile-photo-field {
        display: grid;
        gap: 10px;
      }

      .profile-photo-editor {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px;
        border-radius: 22px;
        background: rgba(251, 252, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(123, 131, 157, 0.14);
      }

      .profile-photo-editor-preview {
        width: 76px;
        height: 76px;
        border-radius: 999px;
        overflow: hidden;
        flex: 0 0 76px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        padding: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(227, 233, 245, 0.96) 100%);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
        color: var(--navy);
      }

      .profile-photo-editor-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .profile-photo-editor-preview svg {
        width: 34px;
        height: 34px;
      }

      .profile-photo-editor-preview .profile-photo-placeholder {
        border-radius: 999px;
      }

      .profile-photo-editor-copy {
        min-width: 0;
        flex: 1 1 auto;
        display: grid;
        gap: 8px;
      }

      .profile-photo-editor-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .profile-photo-editor-actions .secondary {
        width: auto;
        min-width: 0;
        padding: 0 14px;
        height: 40px;
      }

      .profile-photo-hint,
      .profile-photo-file-name {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }

      .profile-photo-modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: calc(max(18px, env(safe-area-inset-top)) + 38px) 18px max(18px, env(safe-area-inset-bottom));
        background: rgba(20, 24, 40, 0.34);
        z-index: 140;
        overflow-y: auto;
      }

      .profile-photo-modal.active {
        display: flex;
      }

      .profile-photo-modal-card {
        width: min(100%, 350px);
        max-height: calc(100vh - 36px);
        padding: 18px;
        margin-top: 10px;
        border-radius: 26px;
        background: rgba(251, 252, 255, 0.98);
        box-shadow: 0 24px 48px rgba(21, 24, 43, 0.22);
        display: grid;
        gap: 14px;
        overflow-y: auto;
      }

      .profile-photo-modal-topbar {
        display: flex;
        justify-content: flex-start;
        padding-top: 0;
      }

      .profile-photo-modal-back {
        flex: 0 0 auto;
      }

      .profile-photo-modal-visual {
        min-height: min(220px, 52vh);
        max-height: min(320px, 52vh);
        border-radius: 22px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(227, 233, 245, 0.94) 100%);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.1);
        color: var(--navy);
      }

      .profile-photo-modal-visual img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }

      .profile-photo-modal-visual svg {
        width: 86px;
        height: 86px;
      }

      .profile-photo-modal-visual .profile-photo-placeholder {
        border-radius: 22px;
      }

      .profile-photo-modal-visual .profile-photo-placeholder-art {
        width: 112px;
        height: 112px;
      }

      .profile-photo-modal-name {
        margin: 0;
        color: var(--navy);
        font-size: 17px;
        font-weight: 500;
        text-align: center;
      }

      .profile-photo-modal-subtitle {
        margin: -8px 0 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
        text-align: center;
      }

      .profile-photo-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
      }

      .profile-photo-modal-actions .secondary,
      .profile-photo-modal-actions .primary {
        width: auto;
        min-width: 0;
        padding: 0 16px;
        height: 42px;
      }

      @media (max-height: 700px) {
        .profile-photo-modal {
          padding-top: calc(max(12px, env(safe-area-inset-top)) + 24px);
          padding-bottom: max(12px, env(safe-area-inset-bottom));
        }

        .profile-photo-modal-card {
          gap: 12px;
          padding: 14px;
          max-height: calc(100vh - 24px);
        }

        .profile-photo-modal-visual {
          min-height: min(180px, 44vh);
          max-height: min(260px, 44vh);
        }
      }

      .participant-card-main {
        min-width: 0;
        flex: 1 1 auto;
      }

      .participant-card-main h3 {
        margin: 0;
        font-size: 17px;
        line-height: 1.1;
      }

      .participant-card-clickable {
        cursor: pointer;
      }

      .participant-card-clickable:hover {
        background: rgba(247, 249, 255, 0.96);
      }

      .participant-card-clickable:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.34);
        outline-offset: 3px;
      }

      .participants-invite-button {
        min-height: 40px;
        margin-top: 0;
        padding: 0 16px;
        border-radius: 15px;
        background: rgba(251, 252, 255, 0.84);
        box-shadow:
          0 6px 16px rgba(35, 41, 67, 0.04),
          inset 0 0 0 1px rgba(255, 255, 255, 0.74);
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 600;
      }

      .participants-invite-button .plus {
        width: 19px;
        height: 19px;
        color: var(--navy-soft);
        background: rgba(251, 252, 255, 0.92);
        box-shadow: inset 0 0 0 1.7px rgba(100, 108, 135, 0.55);
        font-size: 15px;
        font-weight: 500;
      }

      .participants-screen-head {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }

      .participants-list-panel {
        display: grid;
        align-content: start;
        overflow: hidden;
        border-radius: 18px;
        background: rgba(251, 252, 255, 0.9);
        box-shadow:
          0 10px 24px rgba(35, 41, 67, 0.05),
          inset 0 0 0 1px rgba(255, 255, 255, 0.74);
      }

      .participants-list-panel .participant-card {
        min-height: 56px;
        padding: 10px 12px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .participants-list-panel .participant-card + .participant-card {
        border-top: 1px solid rgba(126, 136, 164, 0.14);
      }

      .participants-list-panel .participant-card-clickable:hover {
        background: rgba(247, 249, 255, 0.76);
      }

      .participants-list-panel .participant-card-info {
        gap: 12px;
      }

      .participants-list-panel .participant-avatar,
      .participants-list-panel .participant-avatar-button {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
      }

      .participants-list-panel .participant-card-main h3 {
        color: var(--navy);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.15;
      }

      .participants-list-panel .participant-actions {
        gap: 8px;
        margin-left: auto;
      }

      .participants-list-panel .card-edit-button,
      .participants-list-panel .participant-remove {
        width: 32px;
        height: 32px;
        border-radius: 999px;
      }

      .participants-list-panel .card-edit-button {
        background: rgba(47, 102, 223, 0.12);
        box-shadow: inset 0 0 0 1px rgba(47, 102, 223, 0.18);
      }

      .participants-list-panel .participant-remove {
        background: rgba(255, 111, 97, 0.12);
        box-shadow: inset 0 0 0 1px rgba(255, 111, 97, 0.18);
      }

      .participant-overview-head {
        display: grid;
        align-items: start;
        gap: 18px;
        margin-bottom: 18px;
      }

      .participant-overview-head .drawer-back {
        justify-self: start;
        width: auto;
      }

      .participant-overview-profile {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 0 4px 2px;
      }

      .participant-overview-profile .participant-avatar-button,
      .participant-overview-profile .participant-avatar {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
      }

      .participant-overview-profile .participant-avatar {
        box-shadow:
          0 12px 24px rgba(35, 41, 67, 0.1),
          inset 0 0 0 1px rgba(255, 255, 255, 0.72);
      }

      .participant-overview-profile .participant-avatar.organizer {
        box-shadow:
          0 12px 24px rgba(35, 41, 67, 0.1),
          inset 0 0 0 2px rgba(214, 167, 59, 0.95);
      }

      .participant-overview-profile .participant-avatar-initial {
        font-size: 23px;
        font-weight: 700;
      }

      .participant-overview-profile-copy {
        min-width: 0;
        display: grid;
        gap: 6px;
      }

      .participant-overview-profile-copy h2 {
        margin: 0;
        color: var(--navy);
        font-size: 24px;
        font-weight: 700;
        line-height: 1.12;
        overflow-wrap: anywhere;
      }

      .participant-overview-profile-copy p {
        margin: 0;
        color: var(--navy-soft);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.35;
      }

      .participant-overview-summary {
        padding: 12px 14px;
      }

      .participant-overview-summary-head {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .participant-overview-summary-copy {
        min-width: 0;
        flex: 1 1 auto;
        display: grid;
        gap: 4px;
      }

      .participant-overview-summary-copy strong {
        color: var(--navy);
        font-size: 16px;
        font-weight: 500;
        line-height: 1.2;
      }

      .participant-overview-summary-copy p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.4;
      }

      .participant-overview-subtabs {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
      }

      .participant-overview-subtabs::-webkit-scrollbar {
        display: none;
      }

      .participant-overview-subtabs .subtab {
        min-width: 88px;
        height: 36px;
        padding: 0 14px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 400;
        white-space: nowrap;
      }

      .participant-overview-attendance-list {
        gap: 10px;
        margin-top: 0;
      }

      .participant-overview-attendance-list .participant-attendance-row {
        min-height: 58px;
        align-items: center;
        padding: 12px 14px;
        border-radius: 15px;
        background: rgba(251, 252, 255, 0.86);
      }

      .participant-overview-attendance-list .participant-attendance-row-main {
        gap: 3px;
      }

      .participant-overview-attendance-list .participant-attendance-row-main strong {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.18;
      }

      .participant-overview-attendance-list .participant-attendance-row-main p {
        font-size: 13px;
        font-weight: 400;
        line-height: 1.35;
      }

      .participant-overview-assignment-list {
        display: grid;
        gap: 10px;
      }

      .participant-overview-detail {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 62px;
        padding: 12px 14px;
        border-radius: 15px;
        background: rgba(251, 252, 255, 0.86);
        box-shadow:
          0 8px 18px rgba(35, 41, 67, 0.035),
          inset 0 0 0 1px rgba(255, 255, 255, 0.74);
      }

      .participant-overview-detail-copy {
        min-width: 0;
        flex: 1 1 auto;
        display: grid;
        gap: 4px;
      }

      .participant-overview-detail-copy h3 {
        color: var(--navy);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        overflow-wrap: anywhere;
      }

      .participant-overview-detail-copy p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.35;
      }

      .participant-overview-detail-meta {
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
      }

      .participant-overview-detail-side {
        flex: 0 0 auto;
        min-width: 44px;
        padding: 7px 10px;
        border-radius: 999px;
        color: var(--navy);
        background: rgba(233, 238, 249, 0.88);
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        text-align: center;
      }

      .participant-overview-empty h3 {
        font-size: 16px;
      }

      .participant-remove {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--danger-strong);
        background: rgba(255, 111, 97, 0.12);
        box-shadow: inset 0 0 0 1px rgba(255, 111, 97, 0.14);
        cursor: pointer;
      }

      .participant-remove svg {
        width: 14px;
        height: 14px;
      }

      .expense-row-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
      }

      .expense-row-card.has-receipt {
        cursor: pointer;
      }

      .expense-row-card.has-receipt:hover {
        background: rgba(247, 249, 255, 0.98);
      }

      .expense-row-card.has-receipt:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.35);
        outline-offset: 2px;
      }

      .expense-row-card h3,
      .expense-row-card p {
        margin: 0;
      }

      .expense-row-card h3 {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
      }

      .expense-row-card p {
        flex: 0 0 auto;
        color: var(--navy);
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
      }

      .expense-row-copy {
        min-width: 0;
        display: grid;
        gap: 4px;
      }

      .expense-row-meta {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.3;
      }

      .expense-row-side {
        display: grid;
        justify-self: end;
        justify-items: end;
        gap: 6px;
        min-width: max-content;
      }

      .expense-row-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
      }

      .expense-row-link:hover {
        color: var(--navy);
      }

      .expense-row-hint {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 7px 10px;
        border-radius: 999px;
        color: var(--blue);
        background: rgba(47, 102, 223, 0.08);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
      }

      .expense-row-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        color: #aa3131;
        background: rgba(255, 111, 97, 0.12);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .expense-total-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        background: rgba(241, 245, 255, 0.92);
        border: 1px solid rgba(47, 102, 223, 0.12);
      }

      .expense-total-card h3,
      .expense-total-card p {
        margin: 0;
      }

      .expense-total-card h3 {
        font-size: 15px;
        font-weight: 600;
      }

      .expense-total-card p {
        justify-self: end;
        color: var(--navy);
        font-size: 15px;
        font-weight: 700;
      }

      .participant-actions {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
      }

      .participant-editor-panel {
        margin-top: 8px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.58);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
      }

      .participant-editor-panel p {
        margin: 0 0 8px;
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 400;
      }

      .participant-editor-grid {
        display: grid;
        gap: 10px;
      }

      .participant-editor-grid .field,
      .participant-editor-grid .textarea {
        margin: 0;
      }

      .participant-editor-actions {
        display: flex;
        gap: 8px;
      }

      .participant-editor-actions button {
        flex: 1 1 0;
      }

      .participant-edit-section {
        display: grid;
        gap: 10px;
      }

      .participant-edit-section-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
      }

      .participant-edit-section-head h3 {
        margin: 0;
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
      }

      .participant-edit-section-head p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
      }

      .participant-attendance-rows {
        display: grid;
        gap: 8px;
      }

      .participant-attendance-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.1);
      }

      .participant-attendance-row.present {
        box-shadow: inset 0 0 0 2px rgba(76, 175, 80, 0.75);
      }

      .participant-attendance-row.partial {
        box-shadow: inset 0 0 0 2px rgba(47, 102, 223, 0.78);
      }

      .participant-attendance-row.absent {
        box-shadow: inset 0 0 0 2px rgba(255, 111, 97, 0.78);
      }

      .participant-attendance-row-main {
        min-width: 0;
        flex: 1 1 auto;
        display: grid;
        gap: 2px;
      }

      .participant-attendance-row-main strong {
        color: var(--navy);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
      }

      .participant-attendance-row-main p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.35;
      }

      .participant-attendance-row-actions {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .participant-attendance-action {
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: rgba(228, 233, 245, 0.95);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
        cursor: pointer;
      }

      .participant-attendance-action.destructive {
        color: var(--danger-strong);
        background: rgba(255, 111, 97, 0.12);
        box-shadow: inset 0 0 0 1px rgba(255, 111, 97, 0.14);
      }

      .participant-attendance-action:disabled {
        opacity: 0.45;
        cursor: default;
      }

      .participant-attendance-action svg {
        width: 16px;
        height: 16px;
      }

      .attendance-mode-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }

      .attendance-mode-chip {
        border: 0;
        border-radius: 12px;
        padding: 10px 8px;
        color: var(--navy);
        background: rgba(217, 223, 236, 0.9);
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
      }

      .attendance-mode-chip.all-day.active {
        color: #14311f;
        background: var(--success);
      }

      .attendance-mode-chip.timed.active {
        color: #214a9a;
        background: rgba(191, 217, 255, 0.95);
      }

      .attendance-mode-chip.active {
        color: var(--white);
        background: var(--blue);
      }

      .attendance-mode-chip.absent.active {
        background: var(--danger-strong);
      }

      .attendance-inline-note {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.35;
      }

      .participant-role-row {
        display: flex;
        gap: 8px;
      }

      .participant-role-row button {
        flex: 1 1 0;
        min-width: 0;
        height: 36px;
        border: 0;
        border-radius: 12px;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.86);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.14);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
      }

      .participant-role-row button.active {
        color: var(--white);
        background: var(--navy);
        box-shadow: none;
      }

      .participant-compact h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
      }

      .participant-compact p {
        margin: 2px 0 0;
        font-size: 12px;
        line-height: 1.2;
      }

      .chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        color: var(--navy);
        font-size: 18px;
        font-weight: 500;
        line-height: 1;
      }

	      .communication-screen {
	        display: grid;
	        gap: 16px;
	        width: 100%;
	        min-width: 0;
	        max-width: 100%;
	        overflow-x: clip;
	      }

	      .communication-main,
	      .communication-sidebar {
	        display: grid;
	        gap: 14px;
	        width: 100%;
	        min-width: 0;
	        max-width: 100%;
	      }

	      .communication-kicker {
	        display: inline-flex;
	        align-items: center;
	        gap: 8px;
	        color: var(--navy-soft);
	        font-size: 11px;
	        font-weight: 600;
	        letter-spacing: 0.08em;
	        text-transform: uppercase;
	      }

	      .communication-inbox-copy h2,
	      .communication-mobile-head-copy h2,
	      .communication-notifications-head h2 {
	        margin: 0;
	        color: var(--navy);
	        font-size: 28px;
	        font-weight: 600;
	        line-height: 1.06;
	      }

	      .communication-inbox-copy,
	      .communication-mobile-head-copy,
	      .communication-notifications-head {
	        display: grid;
	        gap: 6px;
	      }

	      .communication-inbox-copy p,
	      .communication-mobile-head-copy p,
	      .communication-notifications-head p {
	        margin: 0;
	        color: var(--muted);
	        font-size: 14px;
	        line-height: 1.45;
	      }

	      .communication-main-chat,
	      .communication-inbox-shell,
	      .communication-notifications-screen {
	        gap: 14px;
	      }

	      .communication-mobile-head {
	        display: grid;
	        gap: 0;
	      }

	      .communication-inbox-head {
	        display: grid;
	        gap: 14px;
	      }

	      .chat-list {
	        display: grid;
	        gap: 10px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
      }

      .communication-thread-list {
        gap: 0;
        background: rgba(255, 255, 255, 0.72);
        border-radius: 28px;
        box-shadow: inset 0 0 0 1px rgba(202, 210, 225, 0.74);
        overflow: hidden;
      }

      .communication-thread-list .chat-thread-avatar {
        display: none;
      }

      .communication-thread-list .chat-thread-avatar.general {
        display: inline-flex;
      }

      .chat-thread-groups {
        display: grid;
        gap: 14px;
      }

      .chat-thread-group {
        display: grid;
        gap: 10px;
      }

      .chat-thread-group-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 0 4px;
      }

      .chat-thread-group-head h3 {
        margin: 0;
        color: var(--navy);
        font-size: 17px;
        font-weight: 600;
      }

      .chat-thread-group-head span {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 500;
      }

      .notification-group {
        display: grid;
        gap: 10px;
      }

      .communication-notification-list .notification-group:first-child {
        margin-top: 8px;
      }

      .notification-group + .notification-group {
        margin-top: 6px;
      }

      .notification-group-label {
        margin: 0 4px 2px;
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
      }

	      .chat-search-wrap {
	        display: grid;
	        gap: 12px;
	        width: 100%;
	        min-width: 0;
	        max-width: 100%;
	      }

      .communication-mobile-search-wrap {
        margin-top: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition:
          max-height 180ms ease,
          margin-top 180ms ease,
          opacity 160ms ease,
          transform 180ms ease;
      }

      .communication-mobile-search-wrap.visible-on-scroll,
      .communication-mobile-search-wrap.has-query,
      .communication-mobile-search-wrap:focus-within {
        margin-top: 12px;
        max-height: 88px;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .chat-search-wrap.split {
        min-height: 0;
      }

      .chat-search-toggle {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.14);
        color: var(--navy-soft);
      }

      .chat-search-toggle svg,
      .chat-search-field svg {
        width: 18px;
        height: 18px;
      }

	      .chat-search-field {
	        display: flex;
	        align-items: center;
	        gap: 10px;
	        min-height: 52px;
	        width: 100%;
	        min-width: 0;
	        max-width: 100%;
	        padding: 0 16px;
	        border-radius: 18px;
	        background: rgba(255, 255, 255, 0.96);
	        box-shadow:
	          0 14px 30px rgba(31, 35, 63, 0.06),
	          inset 0 0 0 1px rgba(201, 209, 226, 0.68);
	        color: var(--navy-soft);
	      }

      .chat-search-field input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--text);
        font-size: 16px;
      }

      .chat-search-close {
        border: 0;
        padding: 0;
        background: transparent;
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 500;
      }

	      .chat-thread-button,
	      .chat-thread-card {
	        width: 100%;
	        min-width: 0;
	        max-width: 100%;
	        display: grid;
	        grid-template-columns: auto minmax(0, 1fr);
	        gap: 12px;
	        align-items: center;
	        border: 0;
	        padding: 14px 16px;
	        border-radius: 22px;
	        text-align: left;
	        color: var(--navy);
	        background: rgba(255, 255, 255, 0.9);
	        box-shadow:
	          0 14px 28px rgba(31, 35, 63, 0.05),
	          inset 0 0 0 1px rgba(198, 207, 224, 0.7);
	        overflow: hidden;
	      }

	      .chat-thread-button {
	        cursor: pointer;
	      }

      .communication-notification-list .chat-thread-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        align-items: stretch;
        min-height: 88px;
        padding: 14px 14px 13px;
        border-radius: 18px;
        background: rgba(251, 252, 255, 0.92);
        box-shadow:
          0 10px 24px rgba(31, 35, 63, 0.045),
          inset 0 0 0 1px rgba(255, 255, 255, 0.72);
      }

      .chat-thread-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 14px 16px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        border-bottom: 1px solid rgba(211, 218, 232, 0.86);
        align-items: stretch;
        position: relative;
      }

      .chat-thread-row.general-chat {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
      }

      .chat-thread-row:last-child {
        border-bottom: 0;
      }

	      .chat-thread-button.unread,
	      .chat-thread-card.unread {
	        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.96));
	        box-shadow:
	          0 16px 30px rgba(31, 35, 63, 0.06),
	          inset 0 0 0 1px rgba(121, 163, 231, 0.56);
	      }

	      .chat-thread-button.active,
	      .chat-thread-card.active {
	        background: linear-gradient(180deg, rgba(235, 247, 240, 0.98), rgba(227, 243, 233, 0.96));
	        box-shadow:
	          0 18px 34px rgba(31, 35, 63, 0.08),
	          inset 0 0 0 1px rgba(121, 193, 136, 0.58);
	      }

      .chat-thread-row.unread {
        background: rgba(245, 250, 255, 0.92);
        box-shadow: none;
      }

      .chat-thread-row.active {
        background: rgba(228, 241, 233, 0.95);
        box-shadow: inset 4px 0 0 #6ec27e;
      }

	      .chat-thread-avatar {
	        width: 52px;
	        height: 52px;
	        border-radius: 18px;
	        display: inline-flex;
	        align-items: center;
	        justify-content: center;
	        flex: 0 0 52px;
	        color: var(--navy);
	        background: rgba(233, 238, 248, 0.95);
	        box-shadow: inset 0 0 0 1px rgba(195, 205, 225, 0.9);
	        font-size: 18px;
	        font-weight: 600;
	      }

	      .chat-thread-avatar.general {
	        color: #244b33;
	        background: rgba(220, 242, 226, 0.96);
	        box-shadow: inset 0 0 0 1px rgba(144, 209, 160, 0.88);
	      }

	      .chat-thread-avatar.task {
	        color: #27458f;
	        background: rgba(232, 239, 255, 0.98);
	        box-shadow: inset 0 0 0 1px rgba(162, 184, 238, 0.92);
	      }

	      .chat-thread-avatar.item {
	        color: #7a4a15;
	        background: rgba(255, 240, 220, 0.96);
	        box-shadow: inset 0 0 0 1px rgba(239, 193, 136, 0.9);
	      }

	      .chat-thread-avatar.notification {
	        color: #49516e;
	        background: rgba(241, 243, 250, 0.98);
	        box-shadow: inset 0 0 0 1px rgba(203, 209, 224, 0.92);
	      }

      .chat-thread-avatar.notification svg {
        width: 18px;
        height: 18px;
      }

	      .chat-thread-avatar svg {
	        width: 22px;
	        height: 22px;
	      }

	      .chat-thread-body {
	        min-width: 0;
	        display: grid;
	        gap: 6px;
	      }

	      .chat-thread-top,
	      .chat-thread-bottom {
	        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
      }

	      .chat-thread-title {
	        min-width: 0;
	        display: grid;
	        gap: 4px;
	      }

      .communication-notification-list .chat-thread-title {
        display: block;
      }

      .communication-notification-list .chat-thread-body {
        gap: 8px;
      }

      .chat-thread-row .chat-thread-title {
        display: block;
      }

	      .chat-thread-label {
	        display: inline-flex;
	        align-items: center;
	        width: fit-content;
	        padding: 3px 9px;
	        border-radius: 999px;
	        color: var(--navy-soft);
	        background: rgba(234, 238, 246, 0.9);
	        font-size: 10px;
	        font-weight: 600;
	        letter-spacing: 0.05em;
	        text-transform: uppercase;
	      }

	      .chat-thread-top strong {
	        color: var(--navy);
	        font-size: 18px;
	        font-weight: 600;
	        line-height: 1.18;
	        display: -webkit-box;
	        -webkit-box-orient: vertical;
	        -webkit-line-clamp: 2;
	        overflow: hidden;
	      }

      .communication-notification-list .chat-thread-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      .communication-notification-list .chat-thread-top strong {
        display: block;
        color: var(--navy);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
      }

      .chat-thread-row .chat-thread-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        min-width: 0;
      }

      .chat-thread-row .chat-thread-top strong {
        display: block;
        font-size: 19px;
        font-weight: 500;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

	      .chat-thread-meta {
	        flex: 0 0 auto;
	        display: inline-flex;
	        align-items: center;
	        justify-content: flex-end;
	        gap: 8px;
          align-self: center;
	      }

	      .chat-thread-time {
	        color: var(--muted);
	        font-size: 12px;
	        font-weight: 500;
	        line-height: 1.2;
	      }

      .chat-thread-row .chat-thread-meta {
        padding-top: 0;
        min-width: 56px;
        gap: 6px;
        max-width: 56px;
      }

      .chat-thread-row .chat-thread-time {
        font-size: 13px;
        font-weight: 400;
        white-space: nowrap;
      }

	      .chat-thread-preview {
	        margin: 0;
	        color: var(--navy-soft);
	        font-size: 17px;
	        line-height: 1.42;
	        display: -webkit-box;
	        -webkit-box-orient: vertical;
	        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .chat-thread-preview-row {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        max-width: 100%;
      }

      .chat-thread-preview-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
      }

      .chat-thread-preview-avatar .message-avatar-button {
        cursor: default;
      }

      .chat-thread-preview-avatar .message-avatar {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        box-shadow:
          inset 0 0 0 1.5px var(--message-avatar-accent, var(--chat-avatar-ring)),
          0 5px 12px var(--message-avatar-glow, rgba(100, 82, 57, 0.08));
      }

      .chat-thread-preview-avatar .message-avatar svg {
        width: 13px;
        height: 13px;
      }

      .chat-thread-row .chat-thread-preview {
        min-height: calc(1.42em * 2);
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      .chat-thread-row .chat-thread-body {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
      }

      .chat-thread-row .chat-thread-title {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
      }

	      .chat-thread-preview-author {
	        color: var(--message-sender-color, var(--navy));
	        font-weight: 600;
	      }

	      .chat-thread-preview-text {
	        color: inherit;
	      }

	      .chat-thread-badge {
	        display: inline-flex;
	        align-items: center;
	        justify-content: center;
	        min-width: 22px;
	        min-height: 22px;
	        padding: 0 8px;
	        border-radius: 999px;
	        color: #ffffff;
	        background: #51b768;
	        font-size: 11px;
	        font-weight: 600;
	        line-height: 1;
	      }

      .chat-thread-row .chat-thread-badge {
        width: 24px;
        min-width: 24px;
        height: 24px;
        min-height: 24px;
        padding: 0 4px;
        border-radius: 999px;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        background: #51b768;
        box-shadow: 0 0 0 4px rgba(81, 183, 104, 0.14);
        font-size: 12px;
        color: #ffffff;
        z-index: 1;
      }

      .chat-thread-row .chat-thread-body {
        padding-right: 28px;
      }

      .communication-notification-list .chat-thread-meta {
        align-self: center;
        gap: 6px;
        min-width: max-content;
      }

      .communication-notification-list .chat-thread-time {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
      }

      .communication-notification-list .chat-thread-badge {
        width: 14px;
        min-width: 14px;
        flex: 0 0 14px;
        height: 14px;
        min-height: 14px;
        padding: 0;
        border-radius: 999px;
        background: transparent;
        box-shadow: none;
      }

      .communication-notification-list .chat-thread-badge-dot-fill {
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 999px;
        background: #51b768;
        box-shadow: 0 0 0 3px rgba(81, 183, 104, 0.14);
      }

      .communication-notification-list .chat-thread-preview {
        color: var(--navy-soft);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.32;
        -webkit-line-clamp: 2;
        overflow-wrap: anywhere;
      }

	      .communication-empty {
	        padding: 8px 6px 2px;
	      }

      .communication-empty.compact {
        padding: 10px 6px 4px;
      }

      .communication-empty.compact p {
        margin-top: 0;
      }

      .communication-empty h3 {
        margin: 0;
        color: var(--navy);
        font-size: 17px;
        font-weight: 500;
      }

      .communication-empty p {
        margin: 6px 0 0;
        color: var(--navy-soft);
        font-size: 13px;
        line-height: 1.45;
      }

      .chat-overview-conversation-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        border-radius: 28px;
        overflow: hidden;
	        background: rgba(250, 252, 255, 0.95);
	        box-shadow:
	          0 20px 42px rgba(31, 35, 63, 0.08),
	          inset 0 0 0 1px rgba(215, 223, 236, 0.7);
	      }

	      .chat-overview-conversation-panel.empty {
	        align-items: center;
	        justify-items: center;
	        background: linear-gradient(180deg, rgba(250, 252, 255, 0.96), rgba(240, 245, 252, 0.96));
	      }

	      .chat-overview-conversation-head {
	        display: flex;
	        flex-wrap: wrap;
	        align-items: center;
	        justify-content: space-between;
	        gap: 14px;
	        padding: 20px 22px 18px;
	        border-bottom: 1px solid rgba(220, 226, 238, 0.92);
	        background: rgba(255, 255, 255, 0.92);
	      }

	      .chat-overview-conversation-head-main {
	        min-width: 0;
	        display: flex;
	        align-items: center;
	        gap: 14px;
	      }

	      .chat-overview-conversation-badge {
	        width: 52px;
	        height: 52px;
	        border-radius: 18px;
	        display: inline-flex;
	        align-items: center;
	        justify-content: center;
	        flex: 0 0 52px;
	        color: var(--navy);
	        background: rgba(233, 238, 248, 0.95);
	        box-shadow: inset 0 0 0 1px rgba(195, 205, 225, 0.92);
	        font-size: 20px;
	        font-weight: 600;
	      }

	      .chat-overview-conversation-badge.general {
	        color: #244b33;
	        background: rgba(220, 242, 226, 0.96);
	        box-shadow: inset 0 0 0 1px rgba(144, 209, 160, 0.88);
	      }

	      .chat-overview-conversation-badge.task {
	        color: #27458f;
	        background: rgba(232, 239, 255, 0.98);
	        box-shadow: inset 0 0 0 1px rgba(162, 184, 238, 0.92);
	      }

	      .chat-overview-conversation-badge.item {
	        color: #7a4a15;
	        background: rgba(255, 240, 220, 0.96);
	        box-shadow: inset 0 0 0 1px rgba(239, 193, 136, 0.9);
	      }

	      .chat-overview-conversation-badge svg {
	        width: 22px;
	        height: 22px;
	      }

	      .chat-overview-conversation-copy {
	        min-width: 0;
        display: grid;
        gap: 4px;
      }

      .chat-overview-conversation-kicker {
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

	      .chat-overview-conversation-copy h3 {
	        margin: 0;
	        color: var(--navy);
	        font-size: 17px;
	        font-weight: 600;
	      }

      .chat-overview-conversation-copy p {
        margin: 0;
        color: var(--navy-soft);
        font-size: 13px;
        line-height: 1.45;
      }

	      .chat-overview-open-detail-button {
	        width: auto;
	        min-width: 0;
	        height: 42px;
        padding: 0 16px;
        border-radius: 14px;
        white-space: nowrap;
        flex: 0 0 auto;
      }

      .chat-overview-message-stage {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        overflow-anchor: none;
      }

      .chat-overview-message-stage .message-thread {
        min-height: 100%;
        justify-content: flex-start;
        gap: 9px;
        padding: 16px 24px 22px;
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
      }

      .chat-overview-message-stage .message-thread::before {
        content: "";
        margin-top: auto;
      }

      .chat-overview-message-stage .message-row {
        gap: 6px;
      }

      .chat-overview-message-stage .message-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        box-shadow: inset 0 0 0 1.5px var(--message-avatar-accent, var(--chat-avatar-ring)), 0 5px 12px var(--message-avatar-glow, rgba(100, 82, 57, 0.08));
      }

      .chat-overview-message-stage .message-avatar svg {
        width: 12px;
        height: 12px;
      }

      .chat-overview-message-stage .message-row-stack {
        max-width: 82%;
        gap: 6px;
      }

      .chat-overview-message-stage .message-bubble {
        max-width: min(calc(100% - 42px), 70%);
        min-width: 64px;
        padding: 10px 14px 8px;
        border-radius: 18px 18px 18px 6px;
        box-shadow: 0 6px 16px rgba(111, 93, 67, 0.05), inset 0 0 0 1px rgba(234, 225, 213, 0.96);
      }

      .chat-overview-message-stage .message-bubble.own {
        max-width: min(calc(100% - 42px), 70%);
        border-radius: 18px 18px 6px 18px;
        box-shadow: 0 6px 16px rgba(93, 133, 92, 0.06), inset 0 0 0 1px rgba(165, 220, 166, 0.92);
      }

      .chat-overview-message-stage .message-bubble-copy {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
      }

      .chat-overview-message-stage .message-bubble-copy p {
        margin: 0;
      }

      .chat-overview-message-stage .message-bubble.own .message-bubble-copy {
        align-items: flex-end;
      }

      .chat-overview-message-stage .message-bubble.own .message-bubble-copy p {
        align-self: stretch;
      }

      .chat-overview-message-stage .message-author-name {
        margin-bottom: 2px;
        font-size: 13px;
        line-height: 1.2;
      }

      .chat-overview-message-stage .message-bubble p {
        font-size: 18px;
        line-height: 1.45;
      }

      .chat-overview-message-stage .message-bubble-attachments {
        gap: 6px;
        margin-top: 8px;
      }

      .chat-overview-message-stage .message-bubble-footer {
        gap: 4px;
        margin-top: 5px;
        font-size: 11px;
        line-height: 1.1;
      }

      .chat-overview-message-stage .message-bubble-copy .message-bubble-footer {
        margin-top: 0;
        line-height: 1;
        padding-bottom: 1px;
      }

      .chat-overview-message-stage .message-read-sheet {
        padding-inline: 12px;
      }

      #chat-overview-message-stage.message-stage {
        border-top: 0;
        overflow-anchor: none;
      }

      .chat-overview-composer-wrap {
        padding-top: 0;
      }

	      .chat-overview-composer {
	        border-radius: 0;
	        padding-bottom: 14px;
	      }

        .keyboard-visible .chat-overview-composer {
          padding-bottom: 8px;
        }

	      .communication-empty-chat-pane {
	        max-width: 360px;
	        display: grid;
	        justify-items: center;
	        gap: 10px;
	        text-align: center;
	        padding: 28px;
	      }

	      .chat-overview-empty-mark {
	        width: 84px;
	        height: 84px;
	        border-radius: 28px;
	        display: inline-flex;
	        align-items: center;
	        justify-content: center;
	        color: rgba(85, 97, 124, 0.78);
	        background: rgba(255, 255, 255, 0.92);
	        box-shadow: inset 0 0 0 1px rgba(206, 214, 228, 0.84);
	      }

	      .chat-overview-empty-mark svg {
	        width: 34px;
	        height: 34px;
	      }

	      .subtab.has-dot,
	      .tab-with-dot {
	        position: relative;
      }

      .subtab.has-dot::after,
      .tab-with-dot::after {
        content: "";
        position: absolute;
        top: 5px;
        right: 10px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--danger-strong);
      }

      .icon-badge.tab-with-dot::after {
        top: 4px;
        right: 4px;
        width: 9px;
        height: 9px;
        box-shadow: 0 0 0 2px var(--phone);
        z-index: 1;
      }

	      .card {
	        overflow: hidden;
	        cursor: pointer;
	      }

      .list-reorder-row {
        position: relative;
        display: block;
      }

      .list-reorder-row .card {
        width: 100%;
        min-width: 0;
      }

      .list-reorder-button {
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 18px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(29, 33, 68, 0.5);
        background: rgba(255, 255, 255, 0.72);
        box-shadow:
          0 8px 18px rgba(31, 35, 68, 0.05),
          inset 0 0 0 1px rgba(29, 33, 68, 0.06);
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        transform: translateY(-50%);
        transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
        opacity: 0.78;
      }

      .list-reorder-up {
        left: -22px;
      }

      .list-reorder-down {
        right: -22px;
      }

      .list-reorder-button:hover:not(:disabled),
      .list-reorder-button.is-pressed:not(:disabled) {
        color: var(--navy);
        background: rgba(255, 255, 255, 0.94);
        box-shadow:
          0 8px 18px rgba(31, 35, 68, 0.08),
          inset 0 0 0 1px rgba(29, 33, 68, 0.12);
        opacity: 1;
      }

      .list-reorder-button:disabled {
        opacity: 0.18;
        cursor: default;
        box-shadow: inset 0 0 0 1px rgba(29, 33, 68, 0.04);
      }

      .card.open {
        box-shadow: inset 0 0 0 2.5px var(--danger);
      }

      .card.mine-open {
        box-shadow: inset 0 0 0 2.5px var(--blue);
      }

      .card.done {
        box-shadow: inset 0 0 0 2.5px var(--success);
      }

      .supply-card {
        position: relative;
        cursor: pointer;
      }

      .task-card,
      .supply-card,
      .overview-task-card,
      .overview-supply-card,
      .overview-compact-card-body,
      .simple-list-item {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      .task-card,
      .supply-card {
        padding: 0;
        margin-bottom: 0;
      }

      @media (max-width: 720px) {
        .list-reorder-button {
          width: 17px;
          height: 30px;
          font-size: 10px;
          opacity: 0.6;
        }

        .event-chat-inline-screen .communication-screen {
          width: calc(100% + 16px);
          max-width: none;
          justify-self: center;
          transform: translateX(-4px);
        }

        .list-reorder-up {
          left: -18px;
        }

        .list-reorder-down {
          right: -18px;
        }
      }

      .task-card.open,
      .supply-card.open {
        background: linear-gradient(180deg, rgba(251, 231, 228, 0.98) 0%, rgba(247, 220, 216, 0.94) 100%);
        box-shadow:
          0 10px 24px rgba(243, 176, 171, 0.18),
          inset 0 0 0 2.5px var(--danger);
      }

      .task-card.mine-open,
      .supply-card.mine-open {
        background: linear-gradient(180deg, rgba(228, 237, 255, 0.98) 0%, rgba(214, 227, 255, 0.95) 100%);
        box-shadow:
          0 10px 24px rgba(47, 102, 223, 0.16),
          inset 0 0 0 2.5px var(--blue);
      }

      .task-card.done,
      .supply-card.done {
        background: linear-gradient(180deg, rgba(231, 248, 235, 0.98) 0%, rgba(217, 242, 223, 0.95) 100%);
        box-shadow:
          0 10px 24px rgba(155, 229, 170, 0.16),
          inset 0 0 0 2.5px var(--success);
      }

      .card-head {
        display: grid;
        gap: 10px;
        padding: 16px;
      }

      .supply-card .card-head {
        gap: 8px;
        padding: 12px 16px 12px 14px;
      }

      .grocery-card .card-head {
        gap: 0;
        padding: 8px 12px;
      }

      .grocery-card-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
      }

      .grocery-card-main {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .grocery-card-copy {
        min-width: 0;
        display: grid;
        gap: 2px;
      }

      .grocery-card .card-title {
        font-size: 17px;
        line-height: 1.15;
      }

      .grocery-card-meta {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.2;
      }

      .grocery-card-side {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .grocery-card-status {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.15;
        text-align: right;
        white-space: nowrap;
      }

      .grocery-card .supply-checkbox,
      .grocery-card .card-edit-button,
      .grocery-card .card-delete-button {
        width: 20px;
        height: 20px;
      }

      .grocery-card .card-edit-button svg,
      .grocery-card .card-delete-button svg {
        width: 12px;
        height: 12px;
      }

      .card-title-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
      }

      .card-title-main {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        min-width: 0;
      }

      .card-title-row > :first-child {
        min-width: 0;
        flex: 1 1 auto;
      }

      .card-title-actions {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-left: auto;
      }

      .card-title-copy {
        min-width: 0;
        display: grid;
        gap: 4px;
      }

      .card-title-line {
        min-width: 0;
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 7px;
      }

      .card-title-line .card-title {
        min-width: 0;
      }

      .card-status-inline {
        flex: 0 1 auto;
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
      }

      .card-options-menu {
        position: relative;
        z-index: 8;
        flex: 0 0 auto;
      }

      .card-options-toggle {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: transparent;
        cursor: pointer;
        font-size: 20px;
        line-height: 1;
        transition: background-color 0.2s ease;
      }

      .card-options-toggle:hover {
        background: rgba(0, 0, 0, 0.05);
      }

      .card-options-popover {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 190px;
        padding: 6px;
        border-radius: 14px;
        display: grid;
        gap: 2px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow:
          0 18px 40px rgba(31, 35, 63, 0.16),
          inset 0 0 0 1px rgba(198, 207, 224, 0.72);
      }

      .card-options-popover button {
        width: 100%;
        min-height: 38px;
        border: 0;
        border-radius: 10px;
        padding: 0 10px;
        color: var(--navy);
        background: transparent;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
      }

      .card-options-popover button:hover,
      .card-options-popover button:focus-visible {
        background: rgba(238, 243, 251, 0.95);
        outline: none;
      }

      .card-options-popover button.destructive {
        color: var(--danger-strong);
      }

      .card-message-indicator {
        position: relative;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #3f9a50;
        background: rgba(123, 219, 133, 0.18);
        box-shadow: inset 0 0 0 1.5px rgba(123, 219, 133, 0.38), 0 5px 12px rgba(35, 41, 67, 0.04);
      }

      .card-message-indicator svg {
        width: 15px;
        height: 15px;
      }

      .card-message-indicator.has-dot::after {
        content: "";
        position: absolute;
        top: -2px;
        right: -2px;
        width: 13px;
        height: 13px;
        border-radius: 999px;
        background: var(--danger-strong);
        border: 2px solid var(--white);
        box-shadow: 0 5px 11px rgba(255, 111, 97, 0.24);
      }

      .card-delete-button {
        position: relative;
        z-index: 2;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--danger-strong);
        background: rgba(255, 111, 97, 0.12);
        box-shadow: inset 0 0 0 1px rgba(255, 111, 97, 0.14);
        cursor: pointer;
      }

      .card-delete-button svg {
        width: 15px;
        height: 15px;
      }

      .card-edit-button {
        position: relative;
        z-index: 2;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: rgba(47, 102, 223, 0.12);
        box-shadow: inset 0 0 0 1px rgba(47, 102, 223, 0.14);
        cursor: pointer;
      }

      .card-edit-button svg {
        width: 15px;
        height: 15px;
      }

      @media (max-width: 1099px) {
        .task-card .card-edit-button,
        .supply-card .card-edit-button {
          display: none;
        }
      }

      .task-pick {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 400;
      }

      .task-card .card-head {
        gap: 6px;
        padding: 12px 16px 10px 14px;
      }

      .task-card .card-title {
        font-size: 17px;
        line-height: 1.15;
      }

      .task-card .card-title-row,
      .supply-card .card-title-row,
      .task-card .card-title-main,
      .supply-card .card-title-main {
        align-items: center;
      }

      .task-card .card-title-main,
      .supply-card .card-title-main {
        gap: 12px;
      }

      .task-card-side,
      .supply-card-side {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: flex-start;
        gap: 8px;
      }

      .task-card-side > .card-title-actions,
      .supply-card-side > .card-title-actions {
        width: 68px;
        display: grid;
        grid-template-columns: repeat(2, 30px);
        gap: 8px;
      }

      .task-card-side > .card-title-actions .card-message-indicator,
      .supply-card-side > .card-title-actions .card-message-indicator {
        grid-column: 1;
      }

      .task-card-side > .card-title-actions .card-options-menu,
      .supply-card-side > .card-title-actions .card-options-menu {
        grid-column: 2;
      }

      .task-card-metrics,
      .supply-card-metrics {
        display: grid;
        justify-items: end;
        gap: 1px;
        padding-top: 1px;
      }

      .task-card-progress,
      .supply-card-progress {
        color: var(--navy);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.1;
        white-space: nowrap;
      }

      .task-card-time {
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.15;
        white-space: nowrap;
      }

      .task-card .task-pick {
        margin-bottom: 0;
        font-size: 13px;
        line-height: 1.15;
      }

      .event-screen[data-event-tab-layout="tasks"] .category-group {
        gap: 9px;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card {
        min-height: 56px;
        border-radius: 18px;
        overflow: hidden;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card .card-head {
        gap: 4px;
        padding: 11px 14px 10px;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card .card-title-row {
        align-items: center;
        gap: 10px;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card .card-title-main {
        align-items: center;
        gap: 10px;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card .card-title-main > div {
        min-width: 0;
        display: grid;
        gap: 4px;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-checkbox-hitbox {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        margin: 0;
        margin-top: 1px;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-checkbox {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        color: transparent;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-checkbox::before {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        border-color: rgba(126, 148, 184, 0.72);
        background: rgba(251, 252, 255, 0.86);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.78),
          0 4px 10px rgba(31, 35, 63, 0.06);
      }

      .event-screen[data-event-tab-layout="tasks"] .task-checkbox.checked::before {
        border-color: var(--navy);
        background: var(--navy);
        box-shadow:
          0 6px 14px rgba(32, 34, 61, 0.18),
          inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      }

      .event-screen[data-event-tab-layout="tasks"] .task-checkbox svg {
        position: relative;
        z-index: 1;
        width: 15px;
        height: 15px;
        color: #ffffff;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card .card-title {
        color: var(--navy);
        font-size: 17px;
        font-weight: 600;
        line-height: 1.18;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card-side {
        align-items: center;
        gap: 9px;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card-metrics {
        min-width: 32px;
        padding-top: 1px;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card-progress {
        color: var(--navy);
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card-time {
        font-size: 13px;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card .task-pick {
        padding-left: 52px;
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
      }

      .event-screen[data-event-tab-layout="tasks"] .card-delete-button {
        width: 31px;
        height: 31px;
        color: var(--danger-strong);
        background: rgba(255, 111, 97, 0.13);
        box-shadow:
          inset 0 0 0 1px rgba(255, 111, 97, 0.18),
          0 6px 12px rgba(255, 111, 97, 0.08);
      }

      .event-screen[data-event-tab-layout="tasks"] .card-delete-button svg {
        width: 15px;
        height: 15px;
      }

      .event-screen[data-event-tab-layout="supplies"] .category-group {
        gap: 9px;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card {
        min-height: 58px;
        border-radius: 18px;
        overflow: hidden;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card .card-head {
        gap: 4px;
        padding: 11px 14px 10px;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card .card-title-row {
        align-items: center;
        gap: 10px;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card .card-title-main {
        align-items: center;
        gap: 10px;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card-static .card-title-main {
        padding-left: 34px;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card-static .card-title-main:has(.assignment-avatar-hitbox),
      .event-screen[data-event-tab-layout="supplies"] .supply-card-static .card-title-main:has(.supply-checkbox-hitbox) {
        padding-left: 0;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card .card-title-main > div {
        min-width: 0;
        display: grid;
        gap: 4px;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-checkbox-hitbox {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        margin: 0;
        margin-top: 3px;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-checkbox {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        color: transparent;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-checkbox::before {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        border-color: rgba(126, 148, 184, 0.72);
        background: rgba(251, 252, 255, 0.86);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.78),
          0 4px 10px rgba(31, 35, 63, 0.06);
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-checkbox.checked::before {
        border-color: var(--navy);
        background: var(--navy);
        box-shadow:
          0 6px 14px rgba(32, 34, 61, 0.18),
          inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-checkbox.checked {
        color: #ffffff;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-checkbox svg {
        position: relative;
        z-index: 1;
        width: 15px;
        height: 15px;
        color: #ffffff;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card .card-title {
        color: var(--navy);
        font-size: 17px;
        font-weight: 600;
        line-height: 1.18;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card-side {
        align-items: center;
        gap: 9px;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card-metrics {
        min-width: 72px;
        padding-top: 1px;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card-progress {
        color: var(--navy);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.05;
      }

      .event-screen[data-event-tab-layout="supplies"] .supply-card .supply-pick {
        padding-left: 52px;
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
      }

      .event-screen[data-event-tab-layout="supplies"] .card-delete-button {
        width: 31px;
        height: 31px;
        color: var(--danger-strong);
        background: rgba(255, 111, 97, 0.13);
        box-shadow:
          inset 0 0 0 1px rgba(255, 111, 97, 0.18),
          0 6px 12px rgba(255, 111, 97, 0.08);
      }

      .event-screen[data-event-tab-layout="supplies"] .card-delete-button svg {
        width: 15px;
        height: 15px;
      }

      .event-screen[data-event-tab-layout="tasks"] .task-card:has(.card-options-menu.is-open),
      .event-screen[data-event-tab-layout="supplies"] .supply-card:has(.card-options-menu.is-open) {
        overflow: visible;
        z-index: 20;
      }

      .supply-card .supply-pick {
        margin-bottom: 0;
        font-size: 13px;
        line-height: 1.15;
      }

      .task-assignee-line {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.3;
      }

      .task-assignee-line svg {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
      }

      .task-checkbox-hitbox,
      .supply-checkbox-hitbox {
        position: relative;
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        margin: -5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .assignment-avatar-hitbox {
        position: relative;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        margin-top: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .assignment-avatar-choice {
        position: relative;
        width: 42px;
        min-width: 42px;
        height: 42px;
        border: 0;
        border-radius: 999px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy-soft);
        background: transparent;
        cursor: pointer;
        touch-action: manipulation;
      }

      .assignment-avatar-choice.is-static {
        cursor: default;
      }

      .assignment-avatar-choice.needs-assignee {
        color: #27b95f;
      }

      .assignment-avatar-choice:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.45);
        outline-offset: 3px;
      }

      .assignment-avatar-empty {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1.8px dashed rgba(39, 185, 95, 0.58);
        color: currentColor;
        background: rgba(237, 250, 242, 0.9);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.78),
          0 5px 12px rgba(39, 185, 95, 0.08);
      }

      .assignment-avatar-empty svg {
        width: 25px;
        height: 25px;
      }

      .assignment-avatar-choice.has-assignees {
        width: auto;
        min-width: 42px;
        padding-right: 0;
      }

      .assignment-avatar-first {
        position: relative;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 0 2px rgba(245, 247, 252, 1);
      }

      .assignment-avatar-first .participant-avatar,
      .assignment-avatar-first .participant-avatar-button {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
      }

      .assignment-avatar-first.can-release::after {
        content: "";
        position: absolute;
        right: -2px;
        bottom: -1px;
        z-index: 1;
        width: 15px;
        height: 15px;
        border-radius: 999px;
        background: #ef4f56;
        box-shadow:
          0 0 0 2px rgba(245, 247, 252, 1),
          0 6px 10px rgba(239, 79, 86, 0.24);
      }

      .assignment-avatar-first.can-release::before {
        content: "";
        position: absolute;
        right: 1px;
        bottom: 6px;
        z-index: 2;
        width: 9px;
        height: 2px;
        border-radius: 999px;
        background: #ffffff;
      }

      .assignment-avatar-overflow {
        min-width: 26px;
        height: 26px;
        margin-left: -10px;
        padding: 0 7px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.98);
        box-shadow:
          0 0 0 2px rgba(245, 247, 252, 1),
          inset 0 0 0 1px rgba(82, 89, 114, 0.1);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
      }

      .task-checkbox,
      .supply-checkbox {
        width: 44px !important;
        height: 44px !important;
        margin: 0;
        border: 0;
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
        touch-action: manipulation;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 5;
        isolation: isolate;
      }

      .task-checkbox::before,
      .supply-checkbox::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 18px;
        transform: translate(-50%, -50%);
        border-radius: 4px;
        border: 1.5px solid #aeb6ca;
        background: var(--white);
        z-index: -1;
      }

      .task-checkbox.checked,
      .supply-checkbox.checked {
        color: var(--white);
      }

      .task-checkbox.checked::before,
      .supply-checkbox.checked::before {
        border-color: var(--navy);
        background: var(--navy);
      }

      .task-checkbox svg,
      .supply-checkbox svg {
        pointer-events: none;
      }

      .role-group {
        display: grid;
        gap: 10px;
      }

      .role-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 0 2px;
        color: var(--navy);
        font-size: 14px;
        font-weight: 400;
      }

      .group-head-button {
        width: 100%;
        border: 0;
        text-align: left;
        background: transparent;
        cursor: pointer;
      }

      .group-add-button {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 8px;
        padding: 10px 12px;
        border: 0;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.55);
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
      }

      .group-add-button .plus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        box-shadow: inset 0 0 0 1.5px rgba(32, 34, 61, 0.22);
        font-size: 15px;
        line-height: 1;
      }

      .group-add-inline {
        width: auto;
        justify-content: flex-start;
        gap: 10px;
        margin-top: 10px;
        padding: 4px 0;
        border-radius: 0;
        background: transparent;
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 500;
      }

      .group-add-inline .plus {
        width: 20px;
        height: 20px;
        color: rgba(69, 78, 110, 0.9);
        background: rgba(255, 255, 255, 0.82);
        box-shadow: inset 0 0 0 1.5px rgba(69, 78, 110, 0.2);
        font-size: 14px;
      }

      .group-add-inline.group-add-round {
        width: 58px;
        min-width: 58px;
        height: 58px;
        min-height: 58px;
        justify-content: center;
        gap: 0;
        margin-top: 14px;
        padding: 0;
        border-radius: 999px;
        background: rgba(251, 252, 255, 0.9);
        color: var(--navy);
        box-shadow:
          0 10px 22px rgba(35, 41, 67, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.76);
        font-size: 30px;
        font-weight: 500;
        line-height: 1;
      }

      .group-add-inline.group-add-round .plus {
        width: auto;
        height: auto;
        color: currentColor;
        background: transparent;
        box-shadow: none;
        font-size: inherit;
        line-height: 1;
        transform: translateY(-1px);
      }

      .group-add-inline.group-add-round svg {
        width: 28px;
        height: 28px;
        color: currentColor;
      }

      .group-add-inline.group-add-round:hover,
      .group-add-inline.group-add-round:focus-visible {
        background: rgba(255, 255, 255, 0.96);
        box-shadow:
          0 12px 26px rgba(35, 41, 67, 0.11),
          inset 0 0 0 1px rgba(47, 102, 223, 0.18);
      }

      .invite-actions {
        display: flex;
        gap: 8px;
        margin-top: 8px;
      }

      .invite-actions button {
        flex: 1;
        min-width: 0;
      }

      .participant-magic-invite {
        display: grid;
        gap: 8px;
        margin-top: 8px;
      }

      .participant-invite-copy-panel {
        display: grid;
        gap: 8px;
        margin-top: 8px;
      }

      .participant-invite-email-field {
        padding: 12px 14px;
      }

      .participant-invite-link-field {
        padding: 12px 14px;
      }

      .participant-invite-email-field input {
        font-size: 15px;
      }

      .participant-invite-link-field input {
        color: var(--navy);
        font-size: 13px;
        line-height: 1.35;
        text-overflow: ellipsis;
      }

      .participant-magic-invite .primary {
        min-height: 46px;
        border-radius: 16px;
        font-size: 14px;
      }

      .participant-invite-copy-panel .primary,
      .participant-invite-copy-panel .secondary {
        min-height: 46px;
        border-radius: 16px;
        font-size: 14px;
      }

      .empty-inline-note {
        margin: 0;
        padding: 2px 2px 0;
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 400;
      }

      .empty-primary-add {
        min-height: 52px;
        font-size: 17px;
        font-weight: 500;
      }

      .subitem-draft-list {
        display: grid;
        gap: 4px;
      }

      .subitem-draft-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 68px 40px;
        gap: 5px;
        align-items: center;
      }

      .subitem-draft-row .field {
        min-width: 0;
        margin: 0;
      }

      .subitem-draft-row .field label {
        display: none;
      }

      .subitem-draft-row .field input {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 14px;
      }

      .subitem-draft-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 68px 40px;
        gap: 5px;
        padding: 0 2px 1px;
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 500;
      }

      .subitem-draft-actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
      }

      .subitem-draft-remove {
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 12px;
        color: var(--danger-strong);
        background: rgba(255, 111, 97, 0.08);
        box-shadow: inset 0 0 0 1px rgba(255, 111, 97, 0.12);
        font-size: 16px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .subitem-draft-add-row {
        display: flex;
        justify-content: flex-start;
        padding-top: 1px;
      }

      .subitem-draft-add-inline {
        min-height: 34px;
        padding: 0 11px;
        border: 0;
        border-radius: 12px;
        color: var(--navy);
        background: rgba(228, 233, 245, 0.82);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
      }

      .subitem-draft-add-inline .plus {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
      }

      .role-divider {
        height: 1px;
        margin-top: 6px;
        background: rgba(32, 34, 61, 0.18);
      }

      .card-title {
        margin: 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.25;
      }

      .card-context-line {
        margin: 0 0 4px;
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      .card-subtitle {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 14px;
      }

      .card-body,
      .subitems {
        border-top: 1px solid var(--line);
      }

      .card-body {
        padding: 12px 16px 14px;
      }

      .meta {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        color: var(--navy-soft);
        font-size: 14px;
      }

      .subrow {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border: 1.5px solid var(--line);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.88);
      }

      .subrow:first-child {
        border-top: 1.5px solid var(--line);
      }

      .subrow + .subrow {
        margin-top: 8px;
      }

      .subrow.status-open {
        border-color: rgba(213, 92, 92, 0.45);
      }

      .subrow.status-done {
        border-color: rgba(74, 168, 106, 0.55);
      }

      .subrow strong {
        display: block;
        font-size: 16px;
        font-weight: 400;
      }

      .subrow span {
        color: var(--muted);
        font-size: 14px;
      }

      .supply-pick,
      .supply-row-pick {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 400;
      }

      .supply-pick {
        margin-bottom: 2px;
      }

      .supply-checkbox {
        z-index: 2;
      }

      .supply-checkbox:disabled {
        opacity: 1;
      }

      .supply-checkbox.passive-claimed,
      .supply-checkbox.passive-claimed:disabled {
        cursor: default;
      }

      .supply-checkbox.passive-claimed::before,
      .supply-checkbox.passive-claimed:disabled::before {
        border-color: #4aa86a;
        background: #4aa86a;
      }

      .subrow-main {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        min-width: 0;
        flex: 1 1 auto;
      }

      .subrow-right {
        text-align: right;
      }

      .subrow-right strong {
        display: block;
        color: var(--navy);
        font-size: 13px;
        font-weight: 500;
      }

      .subrow-right span + span {
        display: block;
        margin-top: 3px;
      }

      .overview-open-subitems {
        padding: 4px 16px 8px;
        border-top: 1px solid var(--line);
      }

      .quick-open-row {
        padding: 7px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .quick-open-row:first-child {
        border-top: 0;
      }

      .quick-open-row + .quick-open-row {
        margin-top: 0;
        border-top: 1px solid rgba(32, 34, 61, 0.12);
      }

      .quick-open-row .subrow-main {
        align-items: center;
        gap: 8px;
      }

      .quick-open-row .subrow-copy {
        min-width: 0;
        display: flex;
        align-items: baseline;
        gap: 10px;
        flex-wrap: wrap;
      }

      .quick-open-row .subrow-copy strong {
        font-size: 14px;
        line-height: 1.2;
      }

      .quick-open-row .subrow-copy span {
        font-size: 12px;
        line-height: 1.2;
      }

      .category-group {
        display: grid;
        gap: 10px;
      }

      .category-head-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
      }

      .category-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 2px;
        color: var(--navy);
        font-size: 14px;
        font-weight: 400;
      }

      .category-head.group-head-button,
      .category-head-toggle {
        flex: 1 1 auto;
        min-width: 0;
      }

      .category-head-main {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .category-head-actions {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
      }

      .category-edit-button,
      .category-delete-button {
        width: 26px;
        height: 26px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.14);
        color: var(--navy-soft);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
      }

      .category-chevron-button {
        width: 28px;
        height: 28px;
        border: 0;
        padding: 0;
        margin-left: auto;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: var(--navy);
        cursor: pointer;
      }

      .category-edit-button {
        color: var(--navy);
      }

      .category-delete-button {
        color: #b45858;
      }

      .category-edit-button svg,
      .category-delete-button svg {
        width: 14px;
        height: 14px;
      }

      .category-chevron-button .chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        font-size: 18px;
        line-height: 1;
      }


      .category-count-badge {
        min-width: 17px;
        height: 17px;
        padding: 0 5px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.82);
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
      }

      .category-divider {
        height: 1px;
        margin-top: 6px;
        background: rgba(32, 34, 61, 0.18);
      }

      .subitems.collapsed {
        display: none;
      }

      .supply-footer {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        padding: 14px 16px;
        border-top: 1px solid var(--line);
      }

      .supply-footer-toggle {
        border: 0;
        background: transparent;
        color: var(--navy);
        cursor: pointer;
        padding: 0;
      }

      .drawer {
        --drawer-keyboard-offset: var(--keyboard-offset);
        position: fixed;
        inset: 0;
        z-index: 115;
        display: none;
        align-items: stretch;
        justify-content: stretch;
        padding:
          env(safe-area-inset-top)
          env(safe-area-inset-right)
          calc(env(safe-area-inset-bottom) + var(--drawer-keyboard-offset))
          env(safe-area-inset-left);
        background: rgba(237, 241, 247, 0.96);
      }

      .drawer.mobile-messages-active {
        --drawer-keyboard-offset: 0px;
      }

      .drawer.active {
        display: flex;
      }

      .drawer-card {
        position: relative;
        z-index: 101;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        max-width: none;
        height: calc(var(--app-viewport-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--drawer-keyboard-offset));
        max-height: none;
        overflow: hidden;
        border-radius: 0;
        background: var(--phone);
        box-shadow: none;
        --mobile-messages-header-offset: 0px;
        --mobile-messages-header-progress: 0;
        --mobile-messages-header-content-height: 180px;
        --detail-swipe-offset: 0px;
        --detail-swipe-enter-offset: 0px;
        --detail-swipe-commit-offset: 0px;
        --detail-swipe-opacity: 1;
        --detail-swipe-scale: 1;
      }

      .drawer-card.mobile-messages-active {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      .drawer-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
        padding: max(16px, calc(env(safe-area-inset-top) + 6px)) 18px 8px;
        background: linear-gradient(180deg, rgba(216, 220, 228, 0.98) 0%, rgba(216, 220, 228, 0.94) 100%);
      }

      .drawer-detail-top-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-width: 0;
      }

      .drawer-notifications-trigger {
        position: relative;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border-radius: 14px;
        background: rgba(251, 252, 255, 0.9);
        box-shadow: 0 8px 18px rgba(35, 41, 67, 0.06);
      }

      .drawer-notifications-trigger svg {
        width: 19px;
        height: 19px;
      }

      .drawer-notifications-trigger .app-unread-count-badge {
        top: -6px;
        right: -6px;
      }

      .drawer-primary-tabs-shell.hidden {
        display: none !important;
      }

      .drawer-event-context-bar {
        width: 100%;
      }

      .drawer-card.mobile-messages-active .drawer-head {
        background: var(--phone);
      }

      .drawer-head-left {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px 8px;
        width: 100%;
        min-width: 0;
      }

      .drawer-head-left > div {
        display: block;
        order: -1;
        flex: 1 0 100%;
        min-width: 0;
        margin-left: 0;
        margin-bottom: 10px;
        text-align: left;
        overflow: hidden;
        max-height: 180px;
        opacity: 1;
        transform: translateY(0);
      }

      .drawer-card.mobile-messages-active .drawer-head {
        padding-bottom: calc(8px - min(var(--mobile-messages-header-offset), 6px));
      }

      .drawer-card.mobile-messages-active .drawer-head-left > div {
        max-height: calc(var(--mobile-messages-header-content-height) - var(--mobile-messages-header-offset));
        margin-bottom: calc(10px - min(var(--mobile-messages-header-offset), 10px));
        opacity: calc(1 - var(--mobile-messages-header-progress));
        transform: translateY(calc(-1 * var(--mobile-messages-header-offset)));
        pointer-events: auto;
      }

      .drawer-home-logo-button {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: fit-content;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        line-height: 0;
      }

      .drawer-home-logo-image {
        display: block;
        width: auto;
        height: 92px;
        max-width: none;
        object-fit: contain;
        object-position: left center;
        filter: drop-shadow(0 8px 18px rgba(31, 35, 63, 0.08));
      }

      .drawer-head p {
        display: none;
      }

      #drawer-title.hidden {
        display: none;
      }

      .drawer-head-title-trigger {
        width: 100%;
        padding: 0;
        border: 0;
        background: none;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        color: var(--navy);
        font: inherit;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
        text-align: left;
        cursor: pointer;
      }

      .drawer-head-title-trigger:disabled {
        cursor: default;
        white-space: normal;
      }

      .drawer-head-title-trigger.hidden {
        display: none;
      }

      .drawer-head-title-trigger:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.45);
        outline-offset: 3px;
        border-radius: 10px;
      }

      .drawer-head h2 {
        margin: 0;
        color: var(--navy);
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
      }

      .drawer-head p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 14px;
      }

      .drawer-tabs {
        position: static;
        z-index: 2;
        display: flex;
        flex: 0 0 auto;
        min-width: 0;
        justify-content: flex-start;
        gap: 0;
        margin-left: 6px;
        padding: 0;
        background: transparent;
        transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1), transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), max-height 0.25s cubic-bezier(0.25, 1, 0.5, 1), margin 0.25s cubic-bezier(0.25, 1, 0.5, 1);
        opacity: 1;
        max-height: 60px;
        transform: translateY(0);
      }

      .drawer-tabs.hidden {
        display: flex;
        opacity: 0;
        transform: translateY(40px);
        pointer-events: none;
        max-height: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
      }

      .drawer-tabs-inner {
        display: flex;
        width: auto;
        max-width: 100%;
        gap: 8px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .drawer-tab {
        flex: 0 0 auto;
        min-width: 118px;
        min-height: 36px;
        padding: 0 16px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: var(--white);
        box-shadow: none;
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
      }

      .drawer-tab-label {
        min-width: 0;
        white-space: nowrap;
      }

      .drawer-tab.active {
        color: var(--white);
        background: var(--navy);
        box-shadow: none;
      }

      .drawer-tab.hidden {
        display: none;
      }

      .drawer-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        max-width: min(100%, 240px);
        min-width: 78px;
        height: 36px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        color: var(--navy);
        background: #edf0f7;
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
      }

      .drawer-back .back-button-icon {
        flex: 0 0 auto;
      }

      .drawer-back .back-button-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .detail-section {
        padding: 0 18px 18px;
      }

      .detail-section h3 {
        margin: 0 0 10px;
        color: var(--navy);
        font-size: 15px;
        font-weight: 400;
      }

      .detail-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0;
        padding: 0 0 14px;
        border-bottom: 1px solid rgba(126, 136, 164, 0.22);
      }

      .detail-section-heading h3 {
        margin: 0;
      }

      .detail-section-heading span {
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 500;
      }

      .detail-section-toggle {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        border: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        gap: 0;
        background: transparent;
        color: var(--navy);
        text-align: left;
        cursor: pointer;
      }

      .detail-section-toggle h3 {
        margin: 0;
        flex: 0 1 auto;
        min-width: 0;
      }

      .detail-section-chevron {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        margin-left: auto;
        color: var(--navy-soft);
        font-size: 18px;
        line-height: 1;
      }

      .detail-section-count-badge {
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        margin-left: 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.82);
        color: var(--navy-soft);
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
      }

      .detail-section-count-badge[data-status="incomplete"] {
        background: #ffd9d9;
        color: #cf3f3f;
      }

      .detail-section-count-badge[data-status="complete"] {
        background: #d7f7df;
        color: #1f9a4b;
      }

      .detail-section-body {
        margin-top: 14px;
      }

      .detail-section-body.collapsed {
        display: none;
      }

      .detail-progress-indicator {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--navy-soft);
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
      }

      button.detail-progress-indicator {
        cursor: pointer;
      }

      .detail-progress-indicator[data-status="incomplete"] {
        color: #cf5a5a;
      }

      .detail-progress-indicator[data-status="complete"] {
        color: #389457;
      }

      .detail-summary {
        position: relative;
        padding: 4px 18px 18px;
      }

      .detail-topic {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 400;
      }

      .detail-topic strong {
        color: var(--danger-strong);
        font-weight: 400;
      }

      .detail-main-title {
        margin: 0 0 10px;
        color: var(--navy);
        font-size: 20px;
        line-height: 1.2;
        font-weight: 500;
      }

      #drawer-main-title-static,
      #drawer-inline-title-trigger {
        display: none !important;
      }

      .detail-main-title.hidden {
        display: none;
      }

      .detail-main-title-button {
        width: 100%;
        padding: 0;
        border: 0;
        background: none;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        text-align: left;
        cursor: pointer;
        color: inherit;
      }

      .detail-main-title-button:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.45);
        outline-offset: 3px;
        border-radius: 10px;
      }

      .detail-main-title-button-text {
        flex: 0 1 auto;
      }

      .detail-main-title-button-text.participant-view-title {
        flex: 1 1 100%;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
      }

      .detail-main-title-summary {
        min-width: 0;
        display: inline-flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px 10px;
      }

      .detail-main-title-count {
        display: inline-flex;
        align-items: baseline;
        color: var(--navy-soft);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
      }

      .detail-main-title-editor {
        display: block;
        margin: 0;
      }

      .detail-main-title-editor.hidden {
        display: none;
      }

      .detail-main-title-input {
        width: 100%;
        min-width: 0;
        padding: 12px 14px;
        border: 1.5px solid rgba(32, 34, 61, 0.14);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--navy);
        font-size: 18px;
        line-height: 1.28;
        font-weight: 500;
      }

      .detail-main-title-input:focus {
        outline: none;
        border-color: rgba(47, 102, 223, 0.55);
        box-shadow: 0 0 0 4px rgba(47, 102, 223, 0.12);
      }

      .detail-meta-line {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 400;
      }

      .detail-meta-line span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .detail-meta-time-editable {
        cursor: pointer;
        border-radius: 999px;
      }

      .detail-meta-time-editable:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.45);
        outline-offset: 3px;
      }

      .detail-summary-assign {
        margin-top: 14px;
      }

      .detail-meta-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: none;
        color: inherit;
        font: inherit;
        cursor: pointer;
      }

      .detail-meta-chip.hidden {
        display: none;
      }

      .detail-meta-chip strong {
        color: inherit;
        font-size: inherit;
        font-weight: 500;
      }

      .detail-meta-chip:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.45);
        outline-offset: 2px;
      }

      .detail-inline-popup {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10050 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 18px 18px calc(18px + var(--keyboard-offset)) !important;
        background: rgba(20, 24, 40, 0.38);
        animation: expense-backdrop-fade-in 0.25s ease-out forwards;
        border: none !important;
        border-radius: 0 !important;
        pointer-events: auto;
        overscroll-behavior: contain;
        touch-action: none;
      }

      .detail-inline-popup.hidden {
        display: none !important;
      }

      html.detail-inline-modal-open,
      body.detail-inline-modal-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none !important;
      }

      .detail-inline-popup.modal-leaving {
        animation: expense-backdrop-fade-out 0.25s ease-in forwards;
      }

      .detail-inline-popup-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 450px;
        max-height: calc(var(--app-viewport-height) - var(--keyboard-offset) - 64px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 24px;
        border-radius: 24px;
        background: #ffffff;
        box-shadow: 0 22px 46px rgba(21, 24, 43, 0.24);
        animation: expense-modal-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        pointer-events: auto;
        touch-action: auto;
      }

      .detail-inline-popup-card.modal-leaving {
        animation: expense-modal-slide-down 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      .detail-inline-popup-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(32, 34, 61, 0.08);
      }

      .detail-inline-popup-head strong {
        color: var(--navy);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
      }

      .detail-inline-popup-close {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 14px;
        background: rgba(47, 102, 223, 0.08);
        color: var(--navy-soft);
        cursor: pointer;
        transition: color 0.2s ease, background 0.2s ease;
      }

      .detail-inline-popup-close:hover {
        color: var(--danger-strong, #ff6f61);
        background: rgba(255, 111, 97, 0.08);
      }

      .detail-inline-popup-close svg {
        width: 16px;
        height: 16px;
      }

      .detail-inline-popup-fields {
        display: grid;
        gap: 14px;
      }

      .detail-inline-popup-field {
        display: grid;
        gap: 6px;
      }

      .detail-inline-popup-field > span {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
      }

      .detail-inline-popup-field.hidden {
        display: none;
      }

      .detail-inline-chip-input,
      .detail-inline-popup-number {
        width: 100%;
        min-width: 0;
        padding: 12px 14px;
        border: 1.5px solid rgba(32, 34, 61, 0.14);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--navy);
        font-size: 16px;
        font-weight: 500;
        text-align: left;
      }

      .detail-inline-chip-input:focus,
      .detail-inline-popup-number:focus {
        outline: none;
        border-color: rgba(47, 102, 223, 0.55);
        box-shadow: 0 0 0 4px rgba(47, 102, 223, 0.12);
      }

      .detail-inline-edit-icon {
        width: 13px;
        height: 13px;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(58, 92, 175, 0.95);
      }

      .detail-inline-edit-icon svg {
        width: 13px;
        height: 13px;
      }

      .detail-inline-editor-status {
        margin: 0;
        color: var(--navy-soft);
        font-size: 13px;
        line-height: 1.4;
      }

      .detail-inline-editor-status.hidden {
        display: none;
      }

      .detail-inline-save {
        flex: 1 1 0;
        min-width: 0;
        height: 48px;
        padding: 0 18px;
        border: 0;
        border-radius: 14px;
        color: var(--white);
        background: var(--navy);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
      }

      .detail-inline-save:disabled,
      .detail-inline-input:disabled {
        opacity: 0.6;
        cursor: default;
      }

      .detail-inline-popup-actions {
        display: flex;
        align-items: center;
        justify-content: stretch;
        gap: 10px;
      }

      .claim-toast {
        position: fixed;
        left: 50%;
        bottom: calc(88px + env(safe-area-inset-bottom));
        z-index: 220;
        max-width: min(calc(100vw - 32px), 420px);
        padding: 12px 16px;
        border-radius: 999px;
        background: var(--navy);
        color: var(--white);
        box-shadow: 0 16px 34px rgba(32, 34, 61, 0.2);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 10px);
        transition: opacity 0.18s ease, transform 0.18s ease;
      }

      .claim-toast.visible {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      @media (min-width: 1100px) {
        .claim-toast {
          bottom: 28px;
        }
      }

      .detail-inline-cancel-button {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 48px;
        padding: 0 18px;
        border-radius: 14px;
      }

      .detail-card.soft {
        background: rgba(255, 255, 255, 0.66);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
      }

      .detail-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 14px 16px 10px;
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.2;
      }

      .detail-card-header strong {
        color: var(--navy);
        font-size: 14px;
        font-weight: 400;
      }

      .detail-people-names {
        padding: 10px 16px 12px;
        display: grid;
        gap: 10px;
      }

      #drawer-people-section .detail-card-header {
        display: none;
      }

      #drawer-people-section .detail-people-names {
        padding-top: 16px;
      }

      .detail-assignment-list,
      .detail-assignment-chooser {
        display: grid;
        gap: 8px;
        min-width: 0;
      }

      .detail-assignment-list {
        position: relative;
        overflow: visible;
      }

      .detail-assignment-section {
        display: grid;
        gap: 14px;
      }

      .detail-assignment-summary {
        display: grid;
        gap: 12px;
      }

      .detail-assignment-summary-copy {
        display: grid;
        gap: 4px;
      }

      .detail-assignment-summary-copy h4 {
        margin: 0;
        color: var(--navy);
        font-size: 17px;
        font-weight: 600;
      }

      .detail-assignment-summary-copy p {
        margin: 0;
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.45;
      }

      .detail-people-stack {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0;
        min-height: 34px;
      }

      .detail-people-stack-avatar {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .detail-people-stack-empty {
        min-height: 30px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
      }

      .detail-people-stack-avatar + .detail-people-stack-avatar,
      .detail-people-stack-avatar + .detail-people-stack-more,
      .detail-people-stack-empty + .detail-people-stack-more {
        margin-left: -6px;
      }

      .detail-people-stack-avatar .participant-avatar-button,
      .detail-people-stack-avatar .participant-avatar,
      .detail-people-stack-empty {
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow:
          0 0 0 2px rgba(245, 247, 252, 1),
          inset 0 0 0 1px rgba(82, 89, 114, 0.12);
      }

      .detail-people-stack-more {
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 0 0 2px rgba(245, 247, 252, 1);
        color: var(--navy);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
      }

      .detail-assignment-chooser {
        padding-top: 4px;
      }

      .detail-assignment-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .detail-assignment-head strong {
        color: var(--navy);
        font-size: 14px;
        font-weight: 500;
      }

      .detail-assignment-head span {
        display: inline-flex;
        align-items: center;
        color: var(--muted);
        font-size: 12px;
        font-weight: 400;
      }

      .detail-assignment-rows {
        display: grid;
        gap: 6px;
      }

      .detail-assignment-row {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
      }

      .detail-assignment-row-empty {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 6px 0;
      }

      .detail-assignment-empty-avatar {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1.5px dashed rgba(39, 185, 95, 0.58);
        border-radius: 999px;
        color: #27b95f;
        background: rgba(237, 250, 242, 0.8);
      }

      .detail-assignment-empty-avatar svg {
        width: 18px;
        height: 18px;
      }

      .detail-assignment-row-more-slots {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: var(--muted);
        font-weight: 500;
        padding: 4px 0 8px 46px;
      }

      .detail-assignment-person {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .detail-assignment-person .participant-avatar-button,
      .detail-assignment-person > .participant-avatar {
        flex: 0 0 auto;
      }

      .detail-assignment-copy {
        min-width: 0;
        display: grid;
        gap: 2px;
      }

      .detail-assignment-copy strong {
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.3;
      }

      .detail-assignment-copy span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.4;
      }

      .detail-assignment-remove {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: rgba(199, 84, 84, 0.95);
        background: rgba(255, 111, 97, 0.1);
        cursor: pointer;
      }

      .detail-assignment-remove svg {
        width: 13px;
        height: 13px;
      }

      .detail-assignment-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        align-items: center;
        min-width: 0;
        margin-top: 8px;
      }

      .detail-more-people-button {
        width: 100%;
        min-height: 46px;
        border: 0;
        border-radius: 14px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        background: rgba(227, 234, 247, 0.86);
        box-shadow: inset 0 0 0 1px rgba(126, 148, 184, 0.22);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
      }

      .detail-more-people-button:hover,
      .detail-more-people-button:focus-visible {
        outline: none;
        background: rgba(216, 226, 244, 0.96);
        box-shadow:
          inset 0 0 0 1px rgba(47, 102, 223, 0.24),
          0 10px 20px rgba(31, 35, 63, 0.07);
      }

      .detail-more-people-row {
        width: fit-content;
        max-width: 100%;
        border: 0;
        padding: 4px 12px 4px 0;
        color: inherit;
        background: transparent;
        font: inherit;
        text-align: left;
        cursor: pointer;
      }

      .detail-more-people-row:hover .detail-action.attachment-add,
      .detail-more-people-row:focus-visible .detail-action.attachment-add {
        border-color: rgba(47, 102, 223, 0.24);
        background: rgba(255, 255, 255, 0.98);
        box-shadow:
          inset 0 0 0 1px rgba(47, 102, 223, 0.14),
          0 8px 18px rgba(31, 35, 63, 0.06);
      }

      .detail-more-people-row:focus-visible {
        outline: none;
      }

      .detail-assignment-form-anchored {
        position: absolute;
        left: var(--assignment-anchor-left, 96px);
        top: var(--assignment-anchor-top, 96px);
        z-index: 170;
        width: var(--assignment-anchor-width, min(284px, calc(100vw - 28px)));
        margin: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        filter: drop-shadow(0 18px 34px rgba(31, 35, 63, 0.12));
        transform: translateY(-50%);
      }

      .detail-assignment-toolbar {
        padding: 0 0 2px;
      }

      .detail-assignment-select {
        width: 100%;
        min-width: 0;
        height: 40px;
        background: rgba(255, 255, 255, 0.84);
      }

      .detail-assignment-native-select {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }

      .detail-assignment-dropdown {
        position: relative;
        min-width: 0;
      }

      .detail-assignment-trigger {
        width: 100%;
        min-height: 40px;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-radius: 14px;
        padding: 0 12px;
        color: var(--navy);
        background: rgba(251, 252, 255, 0.96);
        box-shadow:
          inset 0 0 0 1.5px rgba(32, 34, 61, 0.14),
          0 8px 18px rgba(31, 35, 63, 0.04);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
      }

      .detail-assignment-trigger::-webkit-details-marker {
        display: none;
      }

      .detail-assignment-trigger span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .detail-assignment-trigger .placeholder {
        color: rgba(100, 108, 135, 0.72);
      }

      .detail-assignment-trigger svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: rgba(100, 108, 135, 0.85);
        transition: transform 160ms ease;
      }

      .detail-assignment-dropdown[open] .detail-assignment-trigger svg {
        transform: rotate(180deg);
      }

      .detail-assignment-menu {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% + 8px);
        z-index: 45;
        display: grid;
        gap: 4px;
        max-height: 210px;
        overflow-y: auto;
        padding: 8px;
        border-radius: 16px;
        background: rgba(251, 252, 255, 0.98);
        box-shadow:
          0 18px 38px rgba(31, 35, 63, 0.18),
          inset 0 0 0 1px rgba(126, 136, 164, 0.14);
        backdrop-filter: blur(14px);
      }

      .detail-assignment-form-anchored .detail-assignment-menu {
        top: calc(100% + 8px);
        bottom: auto;
        max-height: min(210px, var(--assignment-menu-max-height, calc(100dvh - 160px)));
      }

      .detail-assignment-form-anchored.is-menu-above .detail-assignment-menu {
        top: calc(100% + 8px);
        bottom: auto;
      }

      .detail-assignment-menu::-webkit-scrollbar {
        width: 6px;
      }

      .detail-assignment-menu::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(126, 136, 164, 0.32);
      }

      .detail-assignment-option {
        width: 100%;
        min-height: 34px;
        border: 0;
        border-radius: 11px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: var(--navy);
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        text-align: left;
        cursor: pointer;
      }

      .detail-assignment-option:hover {
        background: rgba(47, 102, 223, 0.08);
      }

      .detail-assignment-option.active {
        color: #ffffff;
        background: var(--blue);
        box-shadow: 0 8px 16px rgba(47, 102, 223, 0.18);
      }

      .detail-assignment-assign-button {
        flex: 0 0 auto;
        min-width: 98px;
        height: 40px;
        border: 1.5px solid rgba(32, 34, 61, 0.18);
        border-radius: 14px;
        padding: 0 14px;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 6px 16px rgba(31, 35, 64, 0.04);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
      }

      .detail-assignment-empty {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }

      .detail-assignment-empty.subtle {
        padding-top: 2px;
      }

      @media (max-width: 420px) {
        .detail-assignment-form {
          grid-template-columns: minmax(0, 1fr);
          gap: 8px;
        }

        .detail-assignment-form-anchored {
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 6px;
        }

        .detail-assignment-assign-button {
          width: 100%;
          min-height: 44px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        .detail-assignment-form-anchored .detail-assignment-assign-button {
          width: auto;
          min-height: 40px;
        }
      }

      @media (max-width: 420px) {
        .drawer-head-left {
          gap: 6px;
        }

        .drawer-back {
          min-width: 0;
          max-width: min(52vw, 180px);
          padding: 0 14px;
          flex: 0 1 auto;
        }

        .drawer-tabs {
          flex: 1 1 auto;
          min-width: 0;
          margin-left: 0;
        }

        .drawer-tabs-inner {
          width: 100%;
          gap: 6px;
        }

        .drawer-tab {
          flex: 1 1 0;
          min-width: 0;
          padding: 0 12px;
        }

        .drawer-tab-label {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .detail-person-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .detail-person-claim {
        width: 100%;
        min-height: 38px;
        border: 1.5px solid rgba(32, 34, 61, 0.22);
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 14px;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.84);
        font-size: 15px;
        font-weight: 400;
        cursor: pointer;
      }

      .detail-person-claim.positive {
        color: #14311f;
        background: rgba(155, 229, 170, 0.92);
        border-color: rgba(86, 182, 110, 0.95);
      }

      .detail-person-claim.negative {
        color: var(--danger-strong);
        background: rgba(255, 111, 97, 0.1);
        border-color: rgba(255, 111, 97, 0.22);
      }

      .detail-person-remove {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 111, 97, 0.12);
        color: var(--danger-strong);
        box-shadow: inset 0 0 0 1px rgba(255, 111, 97, 0.14);
        cursor: pointer;
      }

      .detail-person-remove svg {
        width: 15px;
        height: 15px;
      }

      .detail-assign-inline {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .detail-assign-inline .organizer-select {
        flex: 1 1 auto;
        min-width: 0;
      }

      .detail-assign-inline .organizer-assign-button {
        flex: 0 0 auto;
      }

      .detail-action {
        width: calc(100% - 32px);
        margin: 0 16px 16px;
        height: 42px;
        border: 1.5px solid rgba(32, 34, 61, 0.34);
        border-radius: 14px;
        color: var(--navy);
        background: var(--white);
        font-size: 15px;
        font-weight: 400;
        cursor: pointer;
      }

      .detail-action.positive {
        color: #14311f;
        background: rgba(155, 229, 170, 0.95);
        border-color: rgba(86, 182, 110, 0.95);
      }

      .detail-action.negative {
        color: var(--white);
        background: var(--danger-strong);
        border-color: var(--danger-strong);
      }

      .detail-action.hidden {
        display: none;
      }

      .detail-note-card {
        padding: 14px 16px;
      }

      .detail-note-card p {
        margin: 0;
        color: var(--text);
        font-size: 15px;
        line-height: 1.6;
      }

      .detail-checklist-card {
        padding: 14px 16px;
        display: grid;
        gap: 0;
        overflow: visible;
      }

      .detail-checklist-card-header {
        display: none !important;
      }

      .detail-checklist-card-header h3 {
        margin: 0;
        color: var(--navy);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.2;
      }

      .detail-checklist-card > .detail-section-body {
        margin-top: 0;
        padding: 10px 14px 12px;
      }

      .detail-checklist-list {
        display: grid;
        gap: 6px;
      }

      .detail-checklist-empty {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
      }

      .detail-checklist-row {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 6px;
        min-height: 36px;
        padding: 5px 6px;
        margin: 0 -4px;
        border-radius: 10px;
        transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.16s ease, box-shadow 0.16s ease;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
      }

      .detail-checklist-row:hover {
        background-color: rgba(220, 228, 245, 0.12);
      }

      .detail-checklist-row.detail-checklist-row-pressing {
        transform: scale(0.97);
        background-color: rgba(220, 228, 245, 0.28);
      }

      .detail-checklist-row.menu-open {
        background-color: rgba(220, 228, 245, 0.4);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 4px 10px rgba(31, 35, 63, 0.05);
      }

      .detail-checklist-row.is-busy {
        pointer-events: none;
        opacity: 0.68;
        background-color: rgba(220, 228, 245, 0.24);
      }

      .detail-checklist-row.is-deleting {
        opacity: 0.48;
        transform: scale(0.99);
      }

      .detail-checklist-row.editing {
        grid-template-columns: 22px minmax(0, 1fr);
        align-items: start;
      }

      .detail-checklist-toggle {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        border: 1.5px solid rgba(126, 148, 184, 0.72);
        background: rgba(251, 252, 255, 0.94);
        color: transparent;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        cursor: pointer;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.72),
          0 4px 10px rgba(31, 35, 63, 0.05);
        transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
      }

      .detail-checklist-toggle.checked {
        border-color: var(--navy);
        background: var(--navy);
        color: #ffffff;
        box-shadow:
          0 6px 14px rgba(32, 34, 61, 0.18),
          inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      }

      .detail-checklist-toggle.locked {
        cursor: default;
      }

      .detail-checklist-toggle svg {
        width: 15px;
        height: 15px;
      }

      .detail-checklist-text {
        flex: 1 1 auto;
        min-width: 0;
        display: grid;
        justify-items: start;
        gap: 2px;
        position: relative;
      }

      .detail-checklist-row.editing .detail-checklist-text {
        grid-column: 2 / -1;
        width: 100%;
      }

      .detail-checklist-text-button {
        border: 0;
        padding: 0;
        background: transparent;
        color: var(--text);
        font-size: 15px;
        line-height: 1.28;
        text-align: left;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .detail-checklist-text-button:disabled {
        cursor: default;
      }

      .detail-checklist-label {
        color: var(--navy);
        font: inherit;
        font-weight: 400;
      }

      .detail-checklist-row.checked .detail-checklist-text-button {
        color: var(--navy-soft);
      }

      .detail-checklist-row.checked .detail-checklist-label {
        color: var(--navy-soft);
        text-decoration: line-through;
        text-decoration-thickness: 1.5px;
        text-decoration-color: rgba(100, 108, 135, 0.55);
      }

      .detail-checklist-saving-indicator {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 2px solid rgba(126, 148, 184, 0.24);
        border-top-color: var(--navy);
        flex: 0 0 auto;
        animation: spin-small-anim 0.8s linear infinite;
      }

      .detail-checklist-meta {
        display: none;
        color: var(--muted);
        font-size: 11px;
        line-height: 1.2;
      }

      .detail-checklist-row.show-meta .detail-checklist-meta {
        display: block;
      }

      @media (hover: hover) {
        .detail-checklist-row.has-meta:hover .detail-checklist-meta {
          display: block;
        }
      }

      .detail-checklist-remove {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 111, 97, 0.12);
        color: rgba(225, 83, 77, 1);
        flex: 0 0 auto;
        cursor: pointer;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
        transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
      }

      .detail-checklist-actions {
        display: inline-flex;
        align-items: center;
        justify-self: end;
        gap: 8px;
        flex: 0 0 auto;
        position: relative;
        min-width: 0;
        padding-right: 0;
      }

      .detail-checklist-edit {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(47, 102, 223, 0.12);
        color: rgba(58, 92, 175, 1);
        flex: 0 0 auto;
        cursor: pointer;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
        transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
      }

      .detail-checklist-edit.active {
        background: rgba(47, 102, 223, 0.2);
        color: rgba(32, 64, 140, 1);
      }

      .detail-checklist-edit:hover,
      .detail-checklist-remove:hover {
        transform: translateY(-1px);
      }

      .detail-checklist-edit svg,
      .detail-checklist-remove svg {
        width: 15px;
        height: 15px;
      }

      .detail-checklist-add-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        width: 100%;
        padding: 2px 2px 0 0;
        box-sizing: border-box;
        overflow: hidden;
      }

      .detail-checklist-add-row.has-items {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        align-items: center;
        column-gap: 12px;
        row-gap: 6px;
        margin-top: 8px;
        padding-left: 0;
      }

      .detail-checklist-add-row.is-collapsed {
        justify-content: flex-start;
      }

      .detail-checklist-add-label {
        order: 2;
        flex: 0 0 auto;
      }

      .detail-checklist-input {
        order: 3;
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        height: 42px;
        border: 1px solid rgba(32, 34, 61, 0.12);
        border-radius: 14px;
        padding: 0 14px;
        color: var(--text);
        background: rgba(255, 255, 255, 0.96);
        font-size: 15px;
        transition:
          opacity 0.18s ease,
          max-width 0.18s ease,
          padding 0.18s ease,
          border-color 0.18s ease;
      }

      .detail-checklist-add-row.is-collapsed .detail-checklist-input {
        max-width: 0;
        width: 0;
        padding-left: 0;
        padding-right: 0;
        border-color: transparent;
        opacity: 0;
        pointer-events: none;
      }

      .detail-checklist-add-row.is-open .detail-checklist-add-label {
        display: none;
      }

      .detail-checklist-add {
        order: 1;
        cursor: pointer;
        flex: 0 0 auto;
      }

      .detail-checklist-add-row.has-items .detail-checklist-add {
        width: 22px;
        height: 22px;
        min-width: 22px;
        padding: 0;
        border-radius: 7px;
        border: 1.5px solid rgba(126, 148, 184, 0.72);
        background: rgba(251, 252, 255, 0.94);
        color: var(--navy);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.72),
          0 4px 10px rgba(31, 35, 63, 0.04);
        align-self: center;
      }

      .detail-checklist-add-row.has-items.is-focused .detail-checklist-add {
        opacity: 0;
        pointer-events: none;
      }

      .detail-checklist-add-row.has-items .detail-checklist-add-label {
        display: none;
      }

      .detail-checklist-add-row.has-items .detail-checklist-input {
        grid-column: 2 / -1;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 14px;
        line-height: 1.2;
      }

      .detail-checklist-add-row.has-items .detail-checklist-input:focus {
        outline: none;
        box-shadow: none;
      }

      .detail-checklist-add-row.has-items .detail-action-plus {
        font-size: 16px;
        transform: translateY(-1px);
      }

      .detail-checklist-add-row.has-items .detail-checklist-input::placeholder {
        color: var(--navy-soft);
        opacity: 1;
      }

      .detail-checklist-inline-editor {
        width: 100%;
        display: grid;
        gap: 8px;
      }

      .detail-checklist-inline-input {
        min-width: 0;
        width: 100%;
        height: 38px;
        border: 1.5px solid rgba(47, 102, 223, 0.45);
        border-radius: 12px;
        padding: 0 12px;
        color: var(--text);
        background: rgba(255, 255, 255, 0.98);
        font-size: 14px;
        box-sizing: border-box;
        -webkit-user-select: text;
        user-select: text;
      }

      .detail-checklist-inline-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: 100%;
      }

      .detail-checklist-inline-save,
      .detail-checklist-inline-cancel {
        height: 38px;
        border: 0;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: 0 0 auto;
      }

      .detail-checklist-inline-save {
        min-width: 92px;
        padding: 0 14px;
        color: var(--white);
        background: var(--navy);
        font-size: 14px;
        font-weight: 500;
      }

      .detail-checklist-inline-cancel {
        width: 38px;
        color: var(--navy-soft);
        background: rgba(148, 156, 187, 0.16);
      }

      .detail-checklist-inline-cancel svg {
        width: 14px;
        height: 14px;
      }

      @media (max-width: 640px) {
        .detail-checklist-inline-actions {
          justify-content: stretch;
        }

        .detail-checklist-inline-save {
          flex: 1 1 auto;
        }
      }

      /* Checklist Modal Dialog */
      .checklist-modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.35);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 9999;
        animation: checklistFadeIn 0.2s ease-out;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
      }

      .checklist-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 320px;
        padding: 24px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.8);
        box-shadow: 
          0 20px 48px rgba(15, 23, 42, 0.24),
          inset 0 0 0 1px rgba(255, 255, 255, 0.6);
        z-index: 10000;
        display: flex;
        flex-direction: column;
        gap: 16px;
        box-sizing: border-box;
        animation: checklistScaleIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
      }

      .checklist-modal-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy-soft);
        background: rgba(232, 238, 255, 0.78);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
        cursor: pointer;
      }

      .checklist-modal-close svg {
        width: 17px;
        height: 17px;
      }

      .checklist-modal-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--navy);
        text-align: center;
        line-height: 1.45;
        word-break: break-word;
        margin-bottom: 4px;
        padding: 4px 44px 0;
      }

      .checklist-modal-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .checklist-modal-actions button {
        width: 100%;
        min-height: 46px;
        border: 0;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
        color: var(--navy);
        background: rgba(245, 247, 255, 0.94);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
        transition: background-color 0.16s ease, transform 0.12s ease;
      }

      .checklist-modal-actions button:active {
        transform: scale(0.98);
      }

      .checklist-modal-actions button:hover {
        background: rgba(232, 238, 255, 0.96);
      }

      .checklist-modal-actions button.destructive {
        color: #e1534d;
        background: rgba(255, 111, 97, 0.08);
      }

      .checklist-modal-actions button.destructive:hover {
        background: rgba(255, 111, 97, 0.16);
      }

      @keyframes checklistFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes checklistScaleIn {
        from { 
          opacity: 0;
          transform: translate(-50%, -46%) scale(0.96);
        }
        to { 
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
      }


      .detail-schedule-card {
        padding: 10px 12px;
        display: grid;
        gap: 8px;
      }

      .detail-schedule-list {
        display: grid;
        gap: 0;
      }

      .detail-schedule-empty,
      .detail-schedule-status,
      .detail-schedule-row-status {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }

      .detail-schedule-status,
      .detail-schedule-row-status {
        color: var(--danger-strong);
        font-weight: 500;
      }

      .detail-schedule-row {
        display: grid;
        grid-template-columns: minmax(134px, 0.84fr) minmax(0, 1fr) 32px;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 5px 0;
        border-bottom: 1px solid rgba(126, 136, 164, 0.12);
        background: transparent;
        box-shadow: none;
      }

      .detail-schedule-row.readonly {
        grid-template-columns: minmax(134px, 0.84fr) minmax(0, 1fr);
      }

      .detail-schedule-row:last-child {
        border-bottom: 0;
      }

      .detail-schedule-row.invalid {
        border-radius: 11px;
        background: rgba(255, 111, 97, 0.06);
        box-shadow: inset 0 0 0 1px rgba(255, 111, 97, 0.16);
      }

      .detail-schedule-time-range {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(56px, 1fr) auto minmax(56px, 1fr);
        align-items: center;
        gap: 4px;
      }

      .detail-schedule-task,
      .detail-schedule-field {
        min-width: 0;
        display: grid;
        gap: 0;
      }

      .detail-schedule-task > span,
      .detail-schedule-field > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
      }

      .detail-schedule-task strong,
      .detail-schedule-readonly {
        min-height: 32px;
        padding: 0 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.76);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.1);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .detail-schedule-readonly {
        color: var(--text);
        font-weight: 500;
      }

      #drawer-schedule-section .detail-card {
        overflow: visible;
      }

      .detail-schedule-native-select {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }

      .detail-schedule-dropdown {
        position: relative;
        min-width: 0;
      }

      .detail-schedule-trigger {
        width: 100%;
        min-width: 0;
        min-height: 32px;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        border-radius: 10px;
        padding: 0 9px;
        color: var(--text);
        background: rgba(251, 252, 255, 0.96);
        box-shadow:
          inset 0 0 0 1.4px rgba(82, 89, 114, 0.13),
          0 6px 14px rgba(31, 35, 63, 0.035);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        transition: box-shadow 160ms ease, background 160ms ease;
      }

      .detail-schedule-trigger::-webkit-details-marker {
        display: none;
      }

      .detail-schedule-trigger span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .detail-schedule-trigger .placeholder {
        color: rgba(100, 108, 135, 0.72);
      }

      .detail-schedule-trigger svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        color: rgba(100, 108, 135, 0.85);
        transition: transform 160ms ease;
      }

      .detail-schedule-trigger:hover,
      .detail-schedule-dropdown[open] .detail-schedule-trigger {
        background: rgba(255, 255, 255, 0.99);
        box-shadow:
          inset 0 0 0 1.5px rgba(47, 102, 223, 0.22),
          0 8px 18px rgba(31, 35, 63, 0.06);
      }

      .detail-schedule-trigger:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.28);
        outline-offset: 3px;
      }

      .detail-schedule-dropdown[open] .detail-schedule-trigger svg {
        transform: rotate(180deg);
      }

      .detail-schedule-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        z-index: 70;
        display: grid;
        gap: 4px;
        max-height: min(230px, calc(100dvh - 180px));
        overflow-y: auto;
        padding: 8px;
        border-radius: 16px;
        background: rgba(251, 252, 255, 0.98);
        box-shadow:
          0 18px 38px rgba(31, 35, 63, 0.18),
          inset 0 0 0 1px rgba(126, 136, 164, 0.14);
        backdrop-filter: blur(14px);
      }

      .detail-schedule-time-field .detail-schedule-menu {
        left: 50%;
        right: auto;
        width: max(100%, 112px);
        transform: translateX(-50%);
      }

      .detail-schedule-menu::-webkit-scrollbar {
        width: 6px;
      }

      .detail-schedule-menu::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(126, 136, 164, 0.32);
      }

      .detail-schedule-option {
        width: 100%;
        min-height: 34px;
        border: 0;
        border-radius: 11px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: var(--navy);
        background: transparent;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        text-align: left;
        white-space: nowrap;
        cursor: pointer;
      }

      .detail-schedule-option:hover {
        background: rgba(47, 102, 223, 0.08);
      }

      .detail-schedule-option.active {
        color: #ffffff;
        background: var(--blue);
        box-shadow: 0 8px 16px rgba(47, 102, 223, 0.18);
      }

      .detail-schedule-option:disabled {
        color: rgba(100, 108, 135, 0.42);
        cursor: not-allowed;
      }

      .detail-schedule-time-field .detail-schedule-trigger,
      .detail-schedule-time-field .detail-schedule-readonly {
        justify-content: center;
        padding-right: 8px;
        padding-left: 8px;
        text-align: center;
        font-variant-numeric: tabular-nums;
      }

      .detail-schedule-time-separator {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
      }

      .detail-schedule-remove {
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--danger-strong);
        background: rgba(255, 111, 97, 0.1);
        cursor: pointer;
      }

      .detail-schedule-remove svg {
        width: 16px;
        height: 16px;
      }

      .detail-schedule-row-status {
        grid-column: 1 / -1;
        padding: 0 4px 2px;
      }

      .detail-schedule-add {
        min-height: 42px;
        border: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--navy);
        background: var(--chat-bg);
        box-shadow: inset 0 0 0 1px rgba(47, 102, 223, 0.1);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
      }

      .detail-resource-empty,
      .detail-schedule-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
        gap: 10px;
      }

      .detail-resource-empty {
        min-height: 118px;
        align-content: center;
      }

      .detail-resource-action,
      .detail-resource-action.detail-schedule-add {
        width: 100%;
        min-height: 72px;
        margin: 0;
        border: 0;
        border-radius: 18px;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
        justify-content: stretch;
        gap: 12px;
        padding: 12px 14px;
        color: var(--navy);
        background: rgba(247, 249, 253, 0.96);
        box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.1);
        font: inherit;
        text-align: left;
        cursor: pointer;
      }

      .detail-resource-action:hover,
      .detail-resource-action:focus-visible {
        background: rgba(255, 255, 255, 0.98);
        box-shadow:
          inset 0 0 0 1px rgba(47, 102, 223, 0.18),
          0 10px 22px rgba(31, 35, 64, 0.06);
        outline: none;
      }

      .detail-resource-action .detail-action-plus {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        color: var(--blue);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: inset 0 0 0 1px rgba(47, 102, 223, 0.14);
      }

      .detail-resource-copy {
        min-width: 0;
        display: grid;
        gap: 3px;
      }

      .detail-resource-copy strong,
      .detail-resource-copy small {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .detail-resource-copy strong {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
      }

      .detail-resource-copy small {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
      }

      .drawer-card.drawer-detail-supply [data-drawer-sheet-tab="schedule"] {
        display: none;
      }

      @media (max-width: 760px) {
        .detail-schedule-row {
          grid-template-columns: minmax(124px, 0.82fr) minmax(0, 1fr) 32px;
        }

        .detail-schedule-row.readonly {
          grid-template-columns: minmax(124px, 0.82fr) minmax(0, 1fr);
        }

        .detail-schedule-person-field {
          grid-column: auto;
        }

        .detail-schedule-remove {
          grid-column: auto;
          grid-row: auto;
        }
      }

      .organizer-panel {
        padding: 14px 16px;
        display: grid;
        gap: 14px;
      }

      .organizer-row {
        display: grid;
        gap: 10px;
      }

      .organizer-row-head {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        align-items: center;
      }

      .organizer-row-head strong {
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
      }

      .organizer-row-head span {
        color: var(--muted);
        font-size: 12px;
      }

      .organizer-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .organizer-select-row {
        display: flex;
        gap: 8px;
        align-items: stretch;
      }

      .organizer-select {
        flex: 1 1 auto;
        min-width: 0;
        height: 38px;
        border: 0;
        border-radius: 12px;
        padding: 0 12px;
        color: var(--text);
        background: rgba(255, 255, 255, 0.9);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.14);
        font-size: 14px;
        font-weight: 400;
        appearance: none;
        -webkit-appearance: none;
      }

      .organizer-assign-button {
        flex: 0 0 auto;
        min-width: 112px;
        border: 0;
        border-radius: 14px;
        padding: 0 16px;
        color: var(--white);
        background: var(--navy);
        font-size: 14px;
        font-weight: 500;
        box-shadow: 0 12px 20px rgba(32, 34, 61, 0.16);
        cursor: pointer;
      }

      .organizer-add-button {
        flex: 1 1 auto;
        min-width: 0;
      }

      .organizer-chip {
        border: 0;
        border-radius: 999px;
        min-height: 34px;
        padding: 0 12px;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.86);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.14);
        font-size: 13px;
        font-weight: 400;
        cursor: pointer;
      }

      .organizer-chip.active {
        color: var(--white);
        background: var(--navy);
        box-shadow: none;
      }

      .organizer-assigned-list {
        display: grid;
        gap: 8px;
      }

      .organizer-assigned-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
      }

      .organizer-assigned-item strong {
        color: var(--text);
        font-size: 14px;
        font-weight: 500;
      }

      .organizer-assigned-remove {
        border: 0;
        border-radius: 10px;
        width: 30px;
        height: 30px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(199, 84, 84, 0.95);
        background: rgba(255, 111, 97, 0.12);
        cursor: pointer;
      }

      .organizer-assigned-remove svg {
        width: 13px;
        height: 13px;
      }

      .drawer-view {
        display: none;
        flex: 1 1 auto;
        overflow-y: auto;
        padding-bottom: 28px;
      }

      .drawer-view.active {
        display: block;
      }

      .drawer-view::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .detail-card {
        border-radius: 16px;
        overflow: hidden;
        background: var(--white);
        box-shadow: inset 0 0 0 1px rgba(237, 240, 247, 0.9);
      }

      #drawer-checklist-section .detail-card {
        overflow: visible;
      }

      .detail-text {
        padding: 16px;
        color: var(--text);
        font-size: 15px;
        line-height: 1.6;
      }

      .detail-row,
      .person-row,
      .media-row {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        padding: 14px 16px;
        border-top: 1px solid var(--line);
      }

      .detail-row:first-child,
      .person-row:first-child,
      .media-row:first-child {
        border-top: 0;
      }

      .detail-row span,
      .media-row span,
      .person-row span {
        color: var(--muted);
        font-size: 13px;
      }

      .detail-row strong,
      .media-row strong,
      .person-row strong {
        font-size: 15px;
        font-weight: 400;
      }

      .detail-action.attachment-add {
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid rgba(32, 34, 61, 0.18);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 6px 16px rgba(31, 35, 64, 0.04);
      }

      .detail-action.attachment-add:hover {
        border-color: rgba(47, 102, 223, 0.24);
        background: rgba(255, 255, 255, 0.98);
      }

      .detail-action-plus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        font-size: 23px;
        font-weight: 600;
        line-height: 1;
        transform: none;
      }

      .detail-expense-card {
        position: relative;
        padding: 16px;
        display: grid;
        gap: 14px;
      }

      .detail-expense-card.is-saving > :not(.detail-expense-saving-overlay) {
        filter: blur(5px);
        opacity: 0.52;
        pointer-events: none;
        user-select: none;
      }

      .detail-expense-list {
        display: grid;
        align-items: stretch;
        gap: 8px;
      }

      .detail-expense-empty {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
      }

      .detail-expense-empty.compact {
        font-size: 13px;
        line-height: 1.4;
      }

.detail-expense-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(248, 250, 254, 0.92);
  border: 1px solid rgba(126, 136, 164, 0.08);
}

.detail-expense-row-button {
  width: 100%;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.detail-expense-row.has-receipt {
  cursor: pointer;
}

.detail-expense-row.has-receipt:hover,
.detail-expense-row.has-receipt:focus-visible {
  background: rgba(243, 247, 255, 0.98);
  border-color: rgba(47, 102, 223, 0.14);
  box-shadow: 0 10px 22px rgba(31, 35, 64, 0.06);
  outline: none;
}
      .detail-expense-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: center;
        justify-content: stretch;
        justify-self: stretch;
        gap: 14px;
        min-width: 0;
        width: 100%;
      }

      .detail-expense-side {
        flex: 0 0 auto;
        display: grid;
        justify-self: end;
        justify-items: end;
        margin-left: 0;
        min-width: max-content;
      }

      .detail-expense-copy {
        min-width: 0;
        display: grid;
        gap: 5px;
      }

      .detail-expense-copy strong {
        color: var(--navy);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.25;
      }

      .detail-expense-meta {
        min-width: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 7px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;
      }

      .detail-expense-meta-part {
        display: inline-flex;
        align-items: center;
        min-width: 0;
      }

      .detail-expense-meta-part + .detail-expense-meta-part::before {
        content: "";
        width: 4px;
        height: 4px;
        margin-right: 7px;
        border-radius: 999px;
        background: rgba(126, 136, 164, 0.42);
      }

      .detail-expense-value {
        color: var(--navy);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.1;
        text-align: right;
        white-space: nowrap;
      }

      .detail-expense-delete-btn,
      .detail-attachment-delete-btn {
        background: none;
        border: none;
        padding: 4px 6px;
        cursor: pointer;
        color: #f43f5e;
        font-size: 20px;
        font-weight: 500;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: color 0.15s ease, transform 0.1s ease;
        z-index: 10;
      }

      .detail-expense-delete-btn:hover,
      .detail-attachment-delete-btn:hover {
        color: #e11d48;
        transform: scale(1.15);
      }

      .detail-expense-delete-btn:active,
      .detail-attachment-delete-btn:active {
        transform: scale(0.95);
      }

      .detail-inline-add-row,
      .detail-expense-toolbar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
      }

      .detail-inline-add-label,
      .detail-expense-toolbar-label {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
      }

      .detail-expense-toggle {
        margin: 0;
      }

      .detail-expense-toolbar {
        width: fit-content;
        max-width: 100%;
        padding: 6px 12px 6px 6px;
        border-radius: 16px;
        background: rgba(238, 243, 251, 0.9);
        box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.08);
      }

      .detail-attachments-toolbar {
        padding: 0 10px 2px;
      }

      #drawer-attachments {
        position: relative;
      }

      #drawer-attachments.is-saving {
        min-height: 180px;
      }

      .detail-attachments-saving-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        border-radius: 24px;
        background: rgba(238, 242, 249, 0.78);
        backdrop-filter: blur(8px);
      }

      .detail-attachments-saving-card {
        width: min(100%, 340px);
        display: grid;
        gap: 8px;
        padding: 18px 20px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow:
          0 18px 34px rgba(31, 35, 64, 0.12),
          inset 0 0 0 1px rgba(255, 255, 255, 0.72);
        text-align: center;
      }

      .detail-attachments-saving-card strong {
        color: var(--navy);
        font-size: 16px;
        font-weight: 700;
      }

      .detail-attachments-saving-card p {
        margin: 0;
        color: var(--navy-soft);
        font-size: 13px;
        line-height: 1.45;
      }

      .detail-attachments-saving-bar {
        display: block;
        width: 100%;
        height: 6px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(47, 102, 223, 0.18), rgba(47, 102, 223, 0.78), rgba(47, 102, 223, 0.18));
        background-size: 180% 100%;
        animation: detailAttachmentSavingPulse 1.1s linear infinite;
      }

      @keyframes detailAttachmentSavingPulse {
        0% {
          background-position: 100% 0;
        }
        100% {
          background-position: -100% 0;
        }
      }

      .detail-attachments-empty {
        padding: 0 10px 14px 10px;
      }

      .detail-attachment-row {
        width: 100%;
        margin: 0;
        padding: 10px 12px;
        border: 0;
        border-radius: 18px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow:
          inset 0 0 0 1px rgba(32, 34, 61, 0.08),
          0 8px 18px rgba(31, 35, 64, 0.05);
        color: inherit;
        text-align: left;
      }

      .detail-attachment-row + .detail-attachment-row {
        margin-top: 8px;
      }

      .detail-attachment-row.is-clickable {
        cursor: pointer;
      }

      .detail-attachment-row.is-clickable:hover,
      .detail-attachment-row.is-clickable:focus-visible {
        background: rgba(250, 251, 255, 0.98);
        box-shadow:
          inset 0 0 0 1px rgba(47, 102, 223, 0.14),
          0 12px 24px rgba(31, 35, 64, 0.08);
        outline: none;
      }

      .detail-attachment-visual {
        width: 56px;
        height: 56px;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .detail-attachment-thumb {
        width: 56px;
        height: 56px;
        display: block;
        border-radius: 16px;
        object-fit: cover;
        background: rgba(241, 244, 252, 0.9);
        box-shadow: inset 0 0 0 1px rgba(32, 34, 61, 0.08);
      }

      .detail-attachment-badge {
        min-width: 56px;
        height: 56px;
        padding: 0 10px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(47, 102, 223, 0.1);
        color: var(--navy);
        box-shadow: inset 0 0 0 1px rgba(47, 102, 223, 0.08);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .detail-attachment-badge.pdf {
        background: rgba(255, 111, 97, 0.12);
        color: #a33d3d;
        box-shadow: inset 0 0 0 1px rgba(255, 111, 97, 0.12);
      }

      .detail-attachment-copy {
        min-width: 0;
        display: grid;
        gap: 4px;
      }

      .detail-attachment-copy strong {
        display: block;
        color: var(--navy);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .detail-attachment-copy span {
        display: block;
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
      }

      .detail-attachment-action {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        background: rgba(236, 240, 249, 0.95);
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
      }

      .detail-attachment-row.is-clickable:hover .detail-attachment-action,
      .detail-attachment-row.is-clickable:focus-visible .detail-attachment-action {
        background: rgba(223, 231, 248, 0.98);
        color: var(--navy);
      }

      .detail-expense-toolbar-label,
      .detail-inline-add-label {
        display: inline-flex;
        align-items: center;
        line-height: 1.2;
      }

      .detail-expense-composer {
        display: grid;
        gap: 12px;
        padding: 14px;
        border-top: 1px solid rgba(32, 34, 61, 0.08);
        border-radius: 18px;
        background: rgba(248, 250, 254, 0.88);
      }

      .detail-expense-label,
      .detail-expense-receipt-label {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
      }

      .detail-expense-input {
        width: 100%;
        height: 46px;
        border: 1px solid rgba(126, 136, 164, 0.14);
        border-radius: 14px;
        padding: 0 14px;
        background: rgba(255, 255, 255, 0.98);
        color: var(--text);
        font-size: 15px;
        box-shadow: 0 8px 18px rgba(31, 35, 64, 0.03);
      }

      .detail-expense-receipt-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        min-height: 44px;
      }

      .detail-expense-receipt-label {
        order: 2;
      }

      .detail-attachments-toolbar {
        padding: 10px 16px 8px;
      }

      .detail-expense-attach-button {
        margin: 0;
        order: 1;
      }

      .detail-expense-receipt-preview {
        display: grid;
        gap: 8px;
      }

      .detail-expense-draft {
        position: relative;
        width: fit-content;
        max-width: 100%;
      }

      .detail-expense-draft-image,
      .detail-expense-receipt-thumb {
        display: block;
        width: 108px;
        height: 108px;
        border-radius: 18px;
        object-fit: cover;
        border: 1px solid rgba(32, 34, 61, 0.08);
        background: rgba(255, 255, 255, 0.92);
      }

      .detail-expense-draft-file,
      .detail-expense-receipt-file {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 14px;
        color: var(--navy);
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(32, 34, 61, 0.1);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
      }

      .detail-expense-draft-file.pdf,
      .detail-expense-receipt-file.pdf {
        color: #9c2b2b;
      }

      .detail-expense-receipt-open {
        width: fit-content;
        max-width: 100%;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 11px;
        border: 1px solid rgba(32, 34, 61, 0.1);
        border-radius: 12px;
        background: rgba(247, 249, 255, 0.9);
        color: var(--navy);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        text-align: left;
      }

      .detail-expense-receipt-open:hover {
        background: rgba(240, 244, 255, 0.96);
      }

      .detail-expense-receipt-open.pdf {
        color: #9c2b2b;
      }

      .detail-expense-receipt-copy {
        min-width: 0;
        display: grid;
        gap: 2px;
      }

      .detail-expense-receipt-title {
        font-size: 12px;
        font-weight: 600;
        color: currentColor;
      }

      .detail-expense-receipt-subtitle {
        font-size: 11px;
        font-weight: 500;
        color: var(--muted);
      }

      .detail-expense-side .detail-expense-receipt-open {
        justify-self: end;
      }

      .detail-expense-file-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 28px;
        padding: 0 9px;
        border-radius: 999px;
        background: rgba(47, 102, 223, 0.12);
        color: var(--navy);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .detail-expense-file-badge.pdf {
        background: rgba(255, 111, 97, 0.14);
        color: #a53a3a;
      }

      .detail-expense-draft-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 241, 241, 0.96);
        color: rgba(199, 84, 84, 0.95);
        box-shadow: 0 8px 18px rgba(31, 35, 64, 0.12);
        cursor: pointer;
      }

      .detail-expense-saving-overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: grid;
        place-items: center;
        padding: 16px;
        border-radius: inherit;
        background: rgba(239, 242, 249, 0.5);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }

      .detail-expense-saving-card {
        width: min(100%, 260px);
        display: grid;
        gap: 8px;
        padding: 16px 18px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow:
          inset 0 0 0 1px rgba(126, 136, 164, 0.12),
          0 18px 34px rgba(32, 34, 61, 0.12);
        text-align: center;
      }

      .detail-expense-saving-card strong {
        color: var(--navy);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
      }

      .detail-expense-saving-card p {
        margin: 0;
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.45;
      }

      .detail-expense-saving-bar {
        display: block;
        width: 100%;
        height: 12px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(223, 228, 241, 0.95) 0%, rgba(244, 247, 255, 0.98) 50%, rgba(223, 228, 241, 0.95) 100%);
        background-size: 220% 100%;
        animation: loadingSkeletonPulse 1.15s linear infinite;
      }

      .detail-expense-status {
        margin: 0;
        color: rgba(167, 63, 63, 0.96);
        font-size: 13px;
        line-height: 1.4;
      }

      .detail-expense-status.hidden {
        display: none;
      }

      .detail-expense-save {
        width: 100%;
        margin: 0;
      }

      .drawer-view.messages-view.active {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-bottom: 0;
        min-height: 0;
      }

      .drawer-view.messages-view .message-stage {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      .drawer-card.mobile-messages-active .message-stage {
        border-top: 0;
        background: var(--phone);
      }

      .drawer-messages-head {
        display: none;
      }

      .drawer-messages-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 48px 24px;
        color: rgba(32, 34, 61, 0.55);
        font-size: 0.92rem;
        animation: drawerMessagesLoadingFadeIn 180ms ease-out 80ms both;
      }

      .drawer-messages-loading-spinner {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2.5px solid rgba(32, 34, 61, 0.12);
        border-top-color: rgba(32, 34, 61, 0.55);
        animation: drawerMessagesLoadingSpin 720ms linear infinite;
      }

      .drawer-messages-loading-label {
        letter-spacing: 0.01em;
      }

      @keyframes drawerMessagesLoadingSpin {
        to { transform: rotate(360deg); }
      }

      @keyframes drawerMessagesLoadingFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      .drawer-view.messages-view.chat-overview-mobile-head .drawer-messages-head {
        display: grid;
        gap: 0;
        padding: 14px 18px 10px;
        border-bottom: 1px solid rgba(220, 226, 238, 0.92);
        background: rgba(255, 255, 255, 0.74);
      }

      .drawer-chat-overview-tabs {
        margin: 0;
      }

      .message-stage {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid var(--chat-line);
        background: linear-gradient(180deg, var(--chat-bg) 0%, var(--chat-bg-strong) 100%);
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .message-stage::-webkit-scrollbar {
        display: none;
      }

      .message-thread {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 12px;
        padding: 18px 18px 28px;
        overflow-anchor: none;
      }

      .message-row {
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 8px;
      }

      .message-row.own {
        justify-content: flex-end;
      }

      .message-row-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        width: 100%;
        max-width: 88%;
        transform: translateX(var(--message-read-swipe-offset, 0px));
        transition: transform 180ms ease;
      }

      .message-row.own.can-swipe-read-sheet {
        touch-action: pan-y;
      }

      .message-avatar-button {
        flex: 0 0 auto;
        padding: 0;
        border: 0;
        background: transparent;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .message-avatar-button.static {
        cursor: default;
      }

      .message-avatar-button:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.35);
        outline-offset: 3px;
      }

      .message-avatar {
        position: relative;
        width: 48px;
        height: 48px;
        border-radius: 999px;
        overflow: hidden;
        flex: 0 0 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--message-sender-color, var(--navy));
        background: linear-gradient(180deg, var(--message-avatar-tint, rgba(255, 255, 255, 0.96)) 0%, rgba(255, 255, 255, 0.98) 100%);
        box-shadow: inset 0 0 0 2px var(--message-avatar-accent, var(--chat-avatar-ring)), 0 8px 18px var(--message-avatar-glow, rgba(100, 82, 57, 0.08));
      }

      .message-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: translateZ(0);
        backface-visibility: hidden;
      }

      .message-avatar svg {
        width: 16px;
        height: 16px;
      }

      .message-bubble {
        max-width: min(calc(100% - 64px), 88%);
        padding: 10px 12px 8px;
        border-radius: 17px 17px 17px 9px;
        background: var(--chat-bubble);
        box-shadow: 0 10px 22px rgba(111, 93, 67, 0.07), inset 0 0 0 1px rgba(234, 225, 213, 0.98);
      }

      .message-bubble.own {
        max-width: 100%;
        border-radius: 17px 17px 9px 17px;
        background: var(--chat-bubble-own);
        box-shadow: 0 10px 22px rgba(93, 133, 92, 0.08), inset 0 0 0 1px rgba(165, 220, 166, 0.95);
      }

      .message-bubble-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 8px;
        min-width: 0;
      }

      .message-bubble-copy p {
        min-width: 0;
      }

      .message-author-name {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-bottom: 4px;
        color: var(--message-sender-color, var(--navy));
        font-size: 15px;
        font-weight: 600;
      }


      .message-bubble.own .message-author-name {
        justify-content: flex-end;
      }

      .message-bubble p {
        margin: 0;
        color: var(--text);
        font-size: 18px;
        line-height: 1.45;
      }

      .message-bubble-text {
        display: block;
      }

      .message-bubble.own p {
        color: rgba(25, 44, 35, 0.98);
      }

      .message-bubble-attachments {
        display: grid;
        gap: 8px;
        margin-top: 10px;
      }

      .message-attachment-link {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        padding: 10px 12px;
        border-radius: 14px;
        text-decoration: none;
        background: rgba(244, 247, 253, 0.94);
        color: var(--text);
        box-shadow: inset 0 0 0 1px rgba(222, 228, 240, 0.95);
      }

      .message-bubble.own .message-attachment-link {
        background: rgba(235, 249, 238, 0.96);
        box-shadow: inset 0 0 0 1px rgba(170, 222, 181, 0.95);
      }

      .message-bubble.own .message-attachment-copy strong {
        color: rgba(25, 44, 35, 0.98);
      }

      .message-bubble.own .message-attachment-copy span {
        color: rgba(73, 109, 81, 0.92);
      }

      .message-attachment-icon {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.86);
        color: var(--navy-soft);
        font-size: 15px;
      }

      .message-attachment-icon.pdf {
        background: rgba(226, 86, 86, 0.14);
        color: #bc4545;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .message-attachment-copy {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      .message-attachment-copy strong {
        min-width: 0;
        color: var(--navy);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .message-attachment-copy span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.3;
      }

      .message-attachment-link.image {
        display: block;
        padding: 0;
        overflow: hidden;
      }

      .message-bubble.own .message-attachment-link.image {
        background: rgba(235, 249, 238, 0.96);
      }

      .message-attachment-image {
        display: block;
        width: 100%;
        max-width: 240px;
        max-height: 220px;
        object-fit: cover;
        background: rgba(255, 255, 255, 0.72);
      }

      .message-attachment-image-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
      }

      .message-bubble-footer {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        margin-top: 8px;
        color: rgba(112, 102, 90, 0.88);
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
      }

      .message-bubble-copy .message-bubble-footer {
        margin-top: 0;
        align-self: end;
        padding-bottom: 2px;
      }

      .message-bubble.own .message-bubble-footer {
        gap: 4px;
        color: rgba(73, 109, 81, 0.92);
      }

      .message-bubble-read-status {
        display: inline-flex;
        align-items: center;
        gap: 0;
        cursor: pointer;
        user-select: none;
      }

      .message-bubble-read-status.double span + span {
        margin-left: -2px;
      }

      .message-day-badge-wrap {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 2px 0 4px;
      }

      .message-day-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 0 14px;
        border-radius: 999px;
        color: rgba(77, 86, 110, 0.92);
        background: rgba(255, 255, 255, 0.9);
        box-shadow:
          0 4px 10px rgba(31, 35, 63, 0.05),
          inset 0 0 0 1px rgba(218, 223, 234, 0.9);
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
      }

      .message-read-sheet {
        width: min(320px, 100%);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding: 0 14px;
        border-radius: 16px;
        background: rgba(235, 249, 238, 0.94);
        box-shadow: inset 0 0 0 1px rgba(170, 222, 181, 0.95);
        transition: max-height 180ms ease, opacity 180ms ease, padding 180ms ease;
      }

      .message-row.own.read-sheet-open .message-read-sheet {
        max-height: 220px;
        opacity: 1;
        padding: 12px 14px;
      }

      .message-read-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: rgba(25, 44, 35, 0.98);
      }

      .message-read-sheet-head strong {
        font-size: 14px;
        font-weight: 600;
      }

      .message-read-sheet-head span {
        color: rgba(73, 109, 81, 0.9);
        font-size: 13px;
        font-weight: 600;
      }

      .message-read-sheet-list {
        display: grid;
        gap: 8px;
        margin-top: 10px;
      }

      .message-read-sheet-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .message-read-sheet-item strong {
        color: rgba(25, 44, 35, 0.98);
        font-size: 14px;
        font-weight: 500;
      }

      .message-read-sheet-item span,
      .message-read-sheet-empty {
        color: rgba(73, 109, 81, 0.9);
        font-size: 13px;
        line-height: 1.35;
      }

      .message-read-sheet-empty {
        margin: 10px 0 0;
      }

      .message-composer-wrap {
        position: relative;
        z-index: 4;
        flex: 0 0 auto;
        margin-top: 0;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .keyboard-visible .drawer.mobile-messages-active,
      .composer-input-active .drawer.mobile-messages-active {
        align-items: flex-end;
        padding-bottom: 0;
      }

      .keyboard-visible .drawer.mobile-messages-active .drawer-card,
      .composer-input-active .drawer.mobile-messages-active .drawer-card {
        height: min(
          calc(var(--visual-viewport-bottom, var(--app-viewport-height)) - env(safe-area-inset-top)),
          calc(var(--app-viewport-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom))
        );
        max-height: min(
          calc(var(--visual-viewport-bottom, var(--app-viewport-height)) - env(safe-area-inset-top)),
          calc(var(--app-viewport-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom))
        );
      }

      .keyboard-visible .drawer.mobile-messages-active .message-composer,
      .composer-input-active .drawer.mobile-messages-active .message-composer {
        min-height: 0;
        padding: 4px 14px 2px !important;
      }

      .keyboard-visible .drawer.mobile-messages-active .message-composer-row,
      .composer-input-active .drawer.mobile-messages-active .message-composer-row {
        align-items: center;
        min-height: 42px;
      }

      .keyboard-visible .drawer.mobile-messages-active .message-composer textarea,
      .composer-input-active .drawer.mobile-messages-active .message-composer textarea {
        min-height: 18px;
        max-height: 120px;
        overflow-y: auto;
        padding: 6px 0;
      }

      .composer-input-active:not(.standalone-display-mode) .drawer.mobile-messages-active .drawer-card {
        transform: translateY(-1px);
      }

      .composer-input-active .drawer-tabs {
        display: none !important;
      }

      .composer-input-active .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .drawer-view.messages-view.active {
        margin-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
      }

      @media (max-width: 1099px) {
        .composer-input-active .tabs-shell {
          display: none !important;
        }

        .checklist-input-active .tabs-shell {
          display: none !important;
        }

        html.detail-inline-modal-open.keyboard-visible .tabs-shell,
        body.detail-inline-modal-open.keyboard-visible .tabs-shell {
          display: none !important;
        }
      }


      .message-draft-attachments {
        display: none;
        align-items: center;
        gap: 8px;
        margin: 0 0 10px;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
      }

      .message-draft-attachments.active {
        display: flex;
      }

      .message-draft-attachment {
        position: relative;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: min(220px, calc(100vw - 96px));
        padding: 6px 8px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
      }

      .message-draft-attachment.image {
        padding: 6px 8px;
        overflow: hidden;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.88);
      }

      .message-draft-attachment-image {
        display: block;
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 10px;
        object-fit: cover;
        background: rgba(255, 255, 255, 0.72);
      }

      .message-draft-attachment-badge {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(84, 95, 136, 0.12);
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .message-draft-attachment-badge.pdf {
        background: rgba(226, 86, 86, 0.14);
        color: #bc4545;
      }

      .message-draft-attachment-copy {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      .message-draft-attachment.image .message-draft-attachment-copy {
        padding: 0;
      }

      .message-draft-attachment-copy strong {
        min-width: 0;
        color: var(--navy);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .message-draft-attachment-copy span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.3;
      }

      .message-draft-attachment-remove {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        border: 0;
        border-radius: 999px;
        background: rgba(236, 90, 90, 0.12);
        color: #d45454;
        font-size: 16px;
        cursor: pointer;
      }

      .message-draft-attachment.image .message-draft-attachment-remove {
        position: static;
        background: rgba(236, 90, 90, 0.12);
        box-shadow: none;
      }

      .message-toolbar {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
      }

      .message-search-toggle {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.76);
        color: var(--navy-soft);
        cursor: pointer;
      }

      .message-search-toggle svg {
        width: 21px;
        height: 21px;
      }

      .message-search-panel {
        display: none;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        margin-bottom: 10px;
        padding: 0 12px;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.68);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
      }

      .message-search-panel.active {
        display: flex;
      }

      .message-search-field {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }

      .message-search-field svg {
        width: 18px;
        height: 18px;
        color: var(--navy-soft);
        flex: 0 0 auto;
      }

      .message-search-field input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: 0;
        padding: 13px 0;
        color: var(--text);
        background: transparent;
        font-size: 16px;
        line-height: 1.4;
      }

      .message-search-close {
        flex: 0 0 auto;
        border: 0;
        background: transparent;
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
      }

      .message-composer {
        display: grid;
        gap: 0;
        min-height: 48px;
        margin: 0;
        padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
        border-radius: 0;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: inset 0 0 0 1px rgba(232, 223, 210, 0.88);
      }

      .keyboard-visible .message-composer {
        padding-bottom: 10px;
      }

      .message-composer-row {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
      }

      .message-input-pill {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 16px;
        background: rgba(238, 243, 251, 0.96);
        overflow: hidden;
      }

      .message-expand-button {
        flex: 0 0 auto;
        width: 41px;
        height: 41px;
        min-width: 41px;
        border: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--blue);
        background: transparent;
        line-height: 1;
        cursor: pointer;
        white-space: nowrap;
      }

      .message-expand-button svg {
        width: 18px;
        height: 18px;
      }

      .message-expand-button .icon-collapse {
        display: none;
      }
      .message-expand-button .icon-expand {
        display: inline;
      }
      .drawer-card.drawer-messages-expanded .message-expand-button .icon-collapse {
        display: inline;
      }
      .drawer-card.drawer-messages-expanded .message-expand-button .icon-expand {
        display: none;
      }

      .message-input-pill textarea {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        display: block;
        resize: none;
        overflow: hidden;
        white-space: nowrap;
      }

      .message-attach {
        flex: 0 0 auto;
        width: 41px;
        height: 41px;
        min-width: 41px;
        border: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: var(--navy-soft);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }

      .message-attach svg {
        width: 20px;
        height: 20px;
        display: block;
      }

      .message-file-input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
        opacity: 0;
        pointer-events: none;
      }

      .message-composer textarea {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        min-height: 18px;
        max-height: 72px;
        overflow-y: auto;
        border: 0;
        outline: 0;
        padding: 6px 0;
        resize: none;
        color: var(--text);
        background: transparent;
        font-size: 20px;
        line-height: 1.4;
      }

      .message-send {
        flex: 0 0 auto;
        width: 41px;
        height: 41px;
        min-width: 41px;
        border: 0;
        border-radius: 999px;
        color: var(--white);
        background: #59b46a;
        font-size: 17px;
        font-weight: 500;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-indent: -9999px;
        position: relative;
      }

      .message-send::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 24px;
        height: 24px;
        background: currentColor;
        text-indent: 0;
        transform: translateX(1px);
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M2.01%2021%2023%2012%202.01%203%202%2010l15%202-15%202z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M2.01%2021%2023%2012%202.01%203%202%2010l15%202-15%202z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
      }

      .message-search-hit {
        padding: 0 2px;
        border-radius: 4px;
        background: rgba(255, 212, 84, 0.42);
      }

      .item-thread {
        display: grid;
        gap: 0;
      }

      #drawer-items.item-thread {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
      }

      .item-row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
        border: 1.5px solid var(--line);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.9);
      }

      .item-row:first-child {
        border-top: 1.5px solid var(--line);
      }

      .item-row + .item-row {
        margin-top: 8px;
      }

      .item-row.status-open {
        border-color: rgba(213, 92, 92, 0.45);
      }

      .item-row.status-done {
        border-color: rgba(74, 168, 106, 0.55);
      }

      .item-row-main {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        flex: 1 1 auto;
      }

      .item-row strong {
        display: block;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.2;
      }

      .item-row span {
        color: var(--muted);
        font-size: 13px;
      }

      .item-row-copy {
        min-width: 0;
        display: grid;
        gap: 2px;
      }

      .item-row-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 10px;
      }

      .item-row-meta span {
        font-size: 12px;
      }

      .item-row-meta .item-row-owner {
        color: var(--navy-soft);
        font-weight: 400;
      }

      .item-row-people {
        color: var(--navy-soft);
        font-size: 12px;
        line-height: 1.35;
      }

      .item-row-actions {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        align-self: center;
      }

      .item-qty-button,
      .item-qty-value {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 500;
      }

      .item-qty-button {
        border: 0;
        color: var(--navy);
        background: rgba(47, 102, 223, 0.12);
        box-shadow: inset 0 0 0 1px rgba(47, 102, 223, 0.14);
        cursor: pointer;
      }

      .item-qty-button:disabled {
        cursor: default;
        opacity: 0.34;
      }

      .item-qty-value {
        width: 34px;
        color: var(--navy);
        background: rgba(237, 240, 247, 0.9);
      }

      .item-row-add {
        justify-content: center;
        padding: 10px 12px;
      }

      .item-add-button {
        width: 100%;
        border: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 12px;
        color: var(--navy-soft);
        background: rgba(255, 255, 255, 0.55);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
      }

      .item-add-button .plus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        box-shadow: inset 0 0 0 1.5px rgba(32, 34, 61, 0.22);
        font-size: 15px;
        line-height: 1;
      }

      .attendance-overview {
        display: grid;
        gap: 14px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
      }

      .attendance-list {
        display: grid;
        gap: 12px;
        padding-bottom: calc(210px + env(safe-area-inset-bottom));
      }

      .attendance-card {
        position: relative;
        border-radius: 18px;
        background: rgba(251, 252, 255, 0.88);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.76),
          0 10px 22px rgba(31, 35, 63, 0.04);
        overflow: visible;
      }

      .attendance-card.open {
        box-shadow: inset 0 0 0 2px var(--danger);
      }

      .attendance-card.mine-open {
        box-shadow: inset 0 0 0 2px var(--blue);
      }

      .attendance-card.done {
        box-shadow: inset 0 0 0 2px var(--success);
      }

      .attendance-card.view {
        background: rgba(255, 255, 255, 0.92);
      }

      .attendance-card-button {
        width: 100%;
        border: 0;
        padding: 0;
        color: inherit;
        text-align: left;
        cursor: pointer;
      }

      .attendance-card-button:focus-visible {
        outline: 2px solid rgba(70, 96, 187, 0.42);
        outline-offset: 3px;
      }

      .attendance-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 14px 8px;
      }

      .attendance-day-button {
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        text-align: left;
        cursor: pointer;
      }

      .attendance-head strong {
        display: block;
        color: var(--navy);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.14;
      }

      .attendance-head span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.25;
      }

      .attendance-body {
        display: grid;
        gap: 12px;
        padding: 0 14px 14px;
      }

      .attendance-card.view .attendance-head {
        padding: 14px 16px 6px;
      }

      .attendance-card.view .attendance-body {
        gap: 8px;
        padding: 0 16px 14px;
      }

      .attendance-toggle {
        display: block;
      }

      .attendance-overview .attendance-actions {
        display: flex !important;
        background: #edf0f7 !important;
        border-radius: 14px !important;
        padding: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 4px !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06) !important;
      }

      .attendance-overview .attendance-chip {
        flex: 1 1 50% !important;
        width: 50% !important;
        min-width: 0 !important;
        height: 38px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--navy-soft, #525972) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
      }

      .attendance-overview .attendance-chip.present.active {
        color: #14311f !important;
        background: var(--success, #a3ebb1) !important;
        box-shadow: 0 2px 8px rgba(31, 192, 104, 0.16) !important;
      }

      .attendance-overview .attendance-chip.absent.active {
        color: #ffffff !important;
        background: var(--danger-strong, #ff6f61) !important;
        box-shadow: 0 2px 8px rgba(255, 111, 97, 0.2) !important;
      }

      .attendance-time-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .attendance-field {
        position: relative;
        border-radius: 14px;
        background: rgba(251, 252, 255, 0.94);
        box-shadow:
          inset 0 0 0 1px rgba(126, 136, 164, 0.12),
          0 8px 18px rgba(31, 35, 63, 0.04);
        padding: 11px 12px;
      }

      .attendance-field::after {
        content: "";
        position: absolute;
        right: 12px;
        bottom: 17px;
        width: 8px;
        height: 8px;
        border-right: 2px solid rgba(100, 108, 135, 0.72);
        border-bottom: 2px solid rgba(100, 108, 135, 0.72);
        transform: rotate(45deg);
        pointer-events: none;
      }

      .attendance-field label {
        display: block;
        margin-bottom: 7px;
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.15;
      }

      .attendance-field input {
        width: 100%;
        border: 0;
        outline: 0;
        padding: 0;
        color: var(--text);
        background: transparent;
        font-size: 16px;
      }

      .attendance-field select {
        width: 100%;
        border: 0;
        outline: 0;
        padding: 0 22px 0 0;
        color: var(--navy);
        background: transparent;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        appearance: none;
        -webkit-appearance: none;
      }

      .attendance-field select:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.22);
        outline-offset: 6px;
        border-radius: 8px;
      }

      .attendance-field select:disabled {
        color: var(--muted);
      }

      .attendance-time-picker::after {
        display: none;
      }

      .attendance-time-dropdown {
        position: relative;
      }

      .attendance-time-dropdown[inert] {
        pointer-events: none;
      }

      .attendance-time-trigger {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 24px;
        color: var(--navy);
        cursor: pointer;
      }

      .attendance-time-trigger::-webkit-details-marker {
        display: none;
      }

      .attendance-time-trigger span {
        min-width: 0;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
      }

      .attendance-time-trigger .placeholder {
        color: rgba(100, 108, 135, 0.56);
      }

      .attendance-time-trigger svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: rgba(100, 108, 135, 0.82);
        transition: transform 160ms ease;
      }

      .attendance-time-dropdown[open] .attendance-time-trigger svg {
        transform: rotate(180deg);
      }

      .attendance-time-menu {
        position: absolute;
        left: -6px;
        right: -6px;
        top: calc(100% + 10px);
        z-index: 40;
        display: grid;
        gap: 4px;
        max-height: 218px;
        overflow-y: auto;
        padding: 8px;
        border-radius: 16px;
        background: rgba(251, 252, 255, 0.98);
        box-shadow:
          0 18px 38px rgba(31, 35, 63, 0.18),
          inset 0 0 0 1px rgba(126, 136, 164, 0.14);
        backdrop-filter: blur(14px);
      }

      .attendance-time-menu::-webkit-scrollbar {
        width: 6px;
      }

      .attendance-time-menu::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(126, 136, 164, 0.32);
      }

      .attendance-time-option {
        width: 100%;
        min-height: 34px;
        border: 0;
        border-radius: 11px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: var(--navy);
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        text-align: left;
        cursor: pointer;
      }

      .attendance-time-option:hover {
        background: rgba(47, 102, 223, 0.08);
      }

      .attendance-time-option.active {
        color: #ffffff;
        background: var(--blue);
        box-shadow: 0 8px 16px rgba(47, 102, 223, 0.18);
      }

      @media (max-width: 640px) {
        .organizer-composer-head {
          margin-bottom: 10px;
        }

        .organizer-composer-head .screen-head-copy h2 {
          font-size: 18px;
        }

        .organizer-composer-stack-task-create .composer-meta {
          padding: 8px 12px;
          font-size: 12px;
        }

        .organizer-composer-stack-task-create .field {
          padding: 12px 14px;
        }

        .organizer-composer-stack-task-create .field label {
          margin-bottom: 6px;
        }

        .organizer-task-field-head {
          gap: 6px;
        }

        .organizer-task-time-mode-row .radio-choice {
          min-height: 36px;
          gap: 8px;
          padding: 0 10px;
          font-size: 14px;
        }

        .organizer-task-quick-grid {
          grid-template-columns: minmax(0, 1fr) 112px;
          gap: 8px;
          margin-top: 8px;
        }

        .organizer-task-quick-grid .attendance-time-grid {
          gap: 8px;
        }

        .organizer-task-quick-grid .attendance-field {
          padding: 8px 10px;
        }

        .organizer-task-quick-grid .attendance-field label,
        .organizer-task-count-field label {
          font-size: 10px;
        }

        .organizer-task-count-field {
          min-width: 0;
        }

        .organizer-task-count-field input {
          font-size: 15px;
        }

	        .organizer-composer-stack-task-create .composer-actions {
	          margin-top: 2px;
	        }

	        .communication-screen {
	          gap: 14px;
	        }

	        .communication-mobile-head {
	          gap: 12px;
	        }

	        .communication-mobile-head-copy h2,
	        .communication-notifications-head h2 {
	          font-size: 20px;
	        }

	        .communication-mobile-head-copy p,
	        .communication-notifications-head p {
	          font-size: 13px;
	        }

	        .chat-search-field {
	          min-height: 48px;
	          border-radius: 16px;
	          padding: 0 14px;
	        }

	        .chat-thread-button,
	        .chat-thread-card {
	          gap: 10px;
	          padding: 12px 13px;
	          border-radius: 18px;
	        }

        .communication-thread-list {
          border-radius: 24px;
        }

        .chat-thread-row {
          gap: 12px;
          padding: 12px 14px;
          border-radius: 0;
        }

	        .chat-thread-avatar {
	          width: 48px;
	          height: 48px;
	          flex-basis: 48px;
	          border-radius: 16px;
	          font-size: 16px;
	        }

	        .chat-thread-top {
	          gap: 10px;
	        }

	        .chat-thread-top strong {
	          font-size: 16px;
	        }

        .chat-thread-row .chat-thread-top strong {
          font-size: 17px;
        }

        .chat-thread-row .chat-thread-meta {
          min-width: 56px;
          max-width: 56px;
        }

        .chat-thread-row .chat-thread-time {
          font-size: 12px;
        }

	        .chat-thread-preview {
	          font-size: 16px;
	          line-height: 1.35;
	        }

        .chat-thread-row .chat-thread-preview {
          min-height: calc(1.35em * 2);
        }

	        .chat-thread-badge {
	          min-width: 18px;
	          min-height: 18px;
	          padding: 0 6px;
	          font-size: 10px;
	        }
	      }

      .attendance-date-block {
        display: grid;
        gap: 4px;
      }

      .attendance-view-summary {
        display: grid;
        gap: 8px;
        padding-top: 2px;
      }

      .attendance-card.view .attendance-view-summary {
        gap: 8px;
        padding-top: 0;
      }

      .attendance-view-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        min-width: 0;
      }

      .attendance-view-row span {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 500;
      }

      .attendance-view-row strong {
        min-width: 0;
        color: var(--navy);
        font-size: 15px;
        font-weight: 600;
        text-align: left;
      }

      .attendance-save-actions {
        display: grid;
        gap: 8px;
        position: sticky;
        bottom: max(12px, env(safe-area-inset-bottom));
        z-index: 60;
        isolation: isolate;
        padding: 12px;
        border-radius: 20px;
        background: #eef2f8;
        box-shadow:
          0 -18px 32px rgba(223, 229, 241, 0.96),
          0 12px 28px rgba(31, 35, 63, 0.12),
          inset 0 0 0 1px rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
      }

      .attendance-save-actions::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(-28px - env(safe-area-inset-bottom));
        z-index: -1;
        width: 100vw;
        height: calc(100% + 58px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
        background:
          linear-gradient(
            to bottom,
            rgba(231, 236, 246, 0) 0,
            var(--page) 30px,
            var(--page) 100%
          );
        pointer-events: none;
      }

      .attendance-save-status {
        margin: 0;
        text-align: center;
        color: var(--navy-soft);
        font-size: 13px;
      }

      .attendance-save-actions .primary {
        box-shadow: 0 8px 18px rgba(31, 35, 63, 0.14);
      }

      @media (min-width: 1100px) {
        body {
          padding: 0;
        }

        .phone {
          width: 100%;
          max-width: none;
          height: var(--app-viewport-height);
          min-height: var(--app-viewport-height);
          max-height: none;
          border-radius: 0;
        }

        .app {
          padding:
            max(28px, env(safe-area-inset-top))
            max(30px, env(safe-area-inset-right))
            calc(max(44px, env(safe-area-inset-bottom)) + var(--keyboard-offset))
            max(30px, env(safe-area-inset-left));
        }

        .attendance-save-actions {
          bottom: 16px;
        }

        .screen.active:not(.event-screen) {
          width: 100%;
          max-width: none;
          margin: 0;
        }

        .screen.active.home-screen {
          width: min(100%, 760px);
          max-width: 760px;
          margin: 0 auto;
          padding-top: 24px;
        }

        .screen.active:not(.event-screen):not(.home-screen) {
          width: min(100%, 760px);
          max-width: 760px;
          margin-left: auto;
          margin-right: auto;
        }

        .home-brand-row {
          min-height: 0;
          margin-bottom: 8px;
          align-items: center;
        }

        .home-brand-mark {
          height: 64px;
          margin-top: 0;
        }

        .home-header-actions .home-notification-button,
        .home-header-actions .home-settings-button,
        .home-header-actions .home-account-button {
          background: rgba(255, 255, 255, 0.85);
          color: var(--navy);
          box-shadow: inset 0 0 0 1px rgba(125, 137, 168, 0.18), 0 8px 20px -12px rgba(31, 35, 63, 0.3);
        }

        .home-section-head {
          margin-top: 18px;
          margin-bottom: 14px;
        }

        .home-section-head h2 {
          font-size: 32px;
          font-weight: 600;
          letter-spacing: -0.015em;
        }

        .home-create-button {
          height: 52px;
          border-radius: 16px;
          box-shadow: 0 18px 38px -16px rgba(31, 35, 63, 0.5);
        }

        .home-primary-actions {
          grid-template-columns: 1fr;
          gap: 14px;
          margin-top: 0;
          margin-bottom: 30px;
        }

        .home-primary-actions .home-create-button {
          margin: 0;
        }

        .home-folder-group {
          gap: 0;
          padding: 16px 16px 18px;
          margin-bottom: 18px;
          background: rgba(255, 255, 255, 0.45);
          border-radius: 22px;
          box-shadow:
            inset 0 0 0 1px rgba(125, 137, 168, 0.12),
            0 16px 36px -24px rgba(31, 35, 63, 0.22);
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
        }

        .home-folder-head {
          padding: 2px 4px 10px;
          font-size: 12px;
          letter-spacing: 0.06em;
          color: rgba(31, 35, 63, 0.6);
          border-bottom: 1px dashed rgba(125, 137, 168, 0.2);
          margin-bottom: 12px;
        }

        .home-folder-toggle {
          padding: 4px 8px 4px 4px;
          gap: 12px;
          border-radius: 12px;
          background: transparent;
          transition: background-color 160ms ease;
        }

        .home-folder-toggle:hover {
          background: rgba(255, 255, 255, 0.65);
        }

        .home-folder-badge {
          width: 30px;
          height: 30px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.95);
          box-shadow: inset 0 0 0 1px rgba(125, 137, 168, 0.18), 0 4px 10px -4px rgba(31, 35, 63, 0.18);
          color: rgba(31, 35, 63, 0.7);
        }

        .home-folder-toggle > span:nth-child(2) {
          font-size: 15px;
          font-weight: 600;
          color: var(--navy);
          letter-spacing: 0;
          text-transform: none;
        }

        .home-folder-count {
          background: rgba(91, 108, 255, 0.12);
          color: rgba(91, 108, 255, 0.95);
          font-size: 12px;
          font-weight: 600;
          padding: 2px 10px;
          border-radius: 999px;
        }

        .home-folder-chevron {
          color: rgba(31, 35, 63, 0.4);
          font-size: 14px;
        }

        .event-card {
          position: relative;
          background: #ffffff;
          border-radius: 16px;
          padding: 18px 22px 18px 26px;
          box-shadow:
            inset 0 0 0 1px rgba(125, 137, 168, 0.10),
            0 8px 20px -16px rgba(31, 35, 63, 0.28);
          transition: transform 180ms ease, box-shadow 220ms ease;
        }

        .event-card + .event-card {
          margin-top: 12px;
        }

        .event-card::before {
          content: "";
          position: absolute;
          top: 18px;
          bottom: 18px;
          left: 0;
          width: 4px;
          border-radius: 0 4px 4px 0;
          background: linear-gradient(180deg, #5b6cff, #8a7bff);
          opacity: 0.9;
        }

        .event-card:hover {
          transform: translateY(-1px);
          box-shadow:
            inset 0 0 0 1px rgba(125, 137, 168, 0.18),
            0 18px 38px -20px rgba(31, 35, 63, 0.4);
        }

        .invite-screen-home .invite-auth-card {
          width: min(100%, 760px);
          margin: 0 auto;
        }

        .settings-stack {
          width: min(100%, 820px);
          margin: 0 auto;
        }

        .field-grid {
          gap: 14px;
        }

        .event-date-input-wrap {
          min-height: 56px;
          border-radius: 16px;
          padding: 0 48px 0 16px;
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 242, 251, 0.92) 100%);
          box-shadow:
            inset 0 0 0 1px rgba(125, 137, 168, 0.11),
            0 14px 24px rgba(35, 41, 67, 0.05);
        }

        .event-date-input {
          min-height: 56px;
          font-size: 16px;
        }

        .event-date-input-wrap::after {
          right: 16px;
          width: 19px;
          height: 19px;
        }

        .event-date-display-button {
          min-height: 56px;
          border-radius: 16px;
          padding: 0 48px 0 16px;
          font-size: 16px;
        }

        .event-date-display-button::after {
          right: 16px;
          width: 19px;
          height: 19px;
        }

        .event-date-picker-popover {
          top: calc(100% + 12px);
          width: min(100%, 344px);
          padding: 16px;
          border-radius: 22px;
        }

        .event-date-picker-head {
          margin-bottom: 14px;
        }

        .event-date-picker-day {
          height: 40px;
          border-radius: 13px;
          font-size: 15px;
        }

        .settings-stack .settings-card-actions {
          justify-items: start;
        }

        .settings-stack .settings-card-actions .primary,
        .settings-stack .settings-card-actions .secondary {
          width: auto;
          min-width: 260px;
          padding: 0 22px;
        }

        .home-create-button {
          width: 100%;
          min-width: 220px;
          padding: 0 26px;
        }

        .title-row h1,
        .title-row h2 {
          font-size: 28px;
        }

        .stack {
          gap: 16px;
        }

        .panel,
        .field,
        .choice,
        .simple-list-item {
          padding: 18px 20px;
          border-radius: 22px;
        }

        .textarea,
        .card {
          border-radius: 22px;
        }

        .panel h3,
        .simple-list-item h3 {
          font-size: 19px;
        }

        .panel p,
        .simple-list-item p {
          font-size: 15px;
        }

        .search {
          height: 62px;
          border-radius: 20px;
          padding: 0 20px;
        }

        .search.collapsed,
        .list-tool-button {
          width: 52px;
          height: 52px;
          border-radius: 16px;
        }

        .screen-head,
        .event-shell-back,
        .communication-screen {
          width: min(100%, 1120px);
          margin-left: auto;
          margin-right: auto;
        }

        .event-shell-back,
        .communication-screen {
          width: min(100%, 1380px);
        }

        .screen-head {
          gap: 14px;
          margin-bottom: 18px;
        }

        .screen-head-copy h2 {
          font-size: 30px;
        }

        .screen-head-copy p {
          font-size: 15px;
        }

        .organizer-composer-head,
        .organizer-composer-stack {
          width: min(100%, 920px);
          margin-left: auto;
          margin-right: auto;
        }

	        .communication-screen {
	          gap: 18px;
	        }

	        .communication-screen.split {
	          grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
	          align-items: stretch;
	          gap: 24px;
	          height: calc(100vh - 180px);
	          min-height: calc(100vh - 180px);
	          max-height: calc(100vh - 180px);
	          overflow: hidden;
	        }

	        .communication-screen .chat-list {
	          grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	          gap: 14px;
	        }

        .communication-screen:not(.split) .communication-thread-list {
          grid-auto-flow: column;
          grid-auto-columns: minmax(340px, 360px);
          grid-template-columns: none;
          align-items: stretch;
          justify-content: start;
          overflow-x: auto;
          overflow-y: hidden;
          padding-bottom: 6px;
          scroll-snap-type: x proximity;
        }

        .communication-screen:not(.split) .communication-thread-list .chat-thread-row {
          width: 100%;
          min-width: 340px;
          scroll-snap-align: start;
        }

        .communication-screen:not(.split) .communication-thread-list .communication-empty {
          min-width: 340px;
        }

        .communication-screen.split .chat-list {
          grid-template-columns: 1fr;
          gap: 10px;
        }

        .communication-screen.split .communication-sidebar {
          grid-template-rows: auto minmax(0, 1fr);
          align-content: start;
          height: 100%;
          min-height: 0;
          overflow: hidden;
        }

	        .communication-screen.split .communication-sidebar-top {
	          display: grid;
	          gap: 16px;
	          min-width: 0;
	          position: relative;
	          z-index: 1;
	        }

        .communication-screen.split .communication-main {
          align-content: start;
          height: 100%;
          min-height: 0;
          overflow: hidden;
        }

        .communication-sidebar {
          min-height: 0;
        }

        .communication-screen.split .desktop-chat-search-wrap {
          margin-bottom: 0;
        }

	        .communication-screen.split .desktop-chat-search-field {
	          width: 100%;
	        }

	        .communication-screen.split .chat-list.split {
	          align-content: start;
	          height: 100%;
          min-height: 0;
          overflow-y: auto;
          overflow-x: hidden;
          padding-top: 4px;
          padding-right: 4px;
        }

	        .communication-screen.split .chat-thread-button,
	        .communication-screen.split .chat-thread-card {
	          padding: 15px 16px;
	          border-radius: 24px;
	        }

        .communication-screen.split .chat-thread-row {
          padding: 14px 16px;
          min-height: 102px;
          border-radius: 0;
        }

	        .communication-screen.split .chat-thread-avatar {
	          width: 56px;
	          height: 56px;
	          border-radius: 20px;
	          flex-basis: 56px;
	        }

	        .communication-screen.split .chat-thread-top strong {
	          font-size: 15px;
	          line-height: 1.2;
	        }

        .communication-screen.split .chat-thread-row .chat-thread-top strong {
          font-size: 17px;
        }

	        .communication-screen.split .chat-thread-preview {
	          min-height: calc(1.42em * 2);
	          font-size: 15px;
	        }

        .chat-thread-groups {
          gap: 18px;
        }

        .chat-thread-group {
          gap: 12px;
        }

        .chat-thread-group-head {
          padding: 0 6px;
        }

        .chat-thread-group-head h3 {
          font-size: 18px;
        }

        .chat-thread-group-head span {
          font-size: 13px;
        }

        .screen-head + .chat-list {
          width: min(100%, 1120px);
          margin: 0 auto;
          grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
          gap: 14px;
        }

        .notification-group {
          grid-column: 1 / -1;
          gap: 12px;
        }

        .notification-group-label {
          margin: 0 4px;
          font-size: 14px;
        }

	        .chat-search-wrap {
	          gap: 12px;
	        }

        .event-shell-back + .communication-screen {
          margin-top: 14px;
        }

        .chat-search-toggle {
          width: 48px;
          height: 48px;
          border-radius: 16px;
        }

        .chat-search-field {
          min-height: 54px;
          border-radius: 18px;
          padding: 0 16px;
        }

	        .chat-thread-button,
	        .chat-thread-card {
	          padding: 16px 17px;
	          border-radius: 24px;
	        }

        .communication-thread-list {
          border-radius: 28px;
        }

        .chat-thread-row {
          padding: 15px 18px;
          border-radius: 0;
        }

	        .chat-overview-conversation-head {
	          padding: 22px 24px 20px;
	        }

        .chat-overview-conversation-panel {
          height: 100%;
          min-height: 0;
          max-height: 100%;
        }

	        .chat-overview-conversation-copy h3 {
	          font-size: 20px;
	        }

        .chat-overview-conversation-copy p {
          font-size: 14px;
        }

        .chat-overview-open-detail-button {
          height: 44px;
          padding-inline: 18px;
        }

        .chat-overview-message-stage {
          height: 100%;
          min-height: 0;
          overflow-y: auto;
          overflow-x: hidden;
          overflow-anchor: none;
        }

	        .chat-overview-message-stage .message-thread {
	          padding: 20px 20px 26px;
	          overflow-anchor: none;
	        }

        .chat-overview-message-stage .message-bubble p {
          font-size: 19px;
        }

        .screen.active.event-screen {
          display: grid;
          grid-template-columns: 280px minmax(0, 1fr);
          gap: 28px;
          align-items: start;
          width: 100%;
          margin: 0;
        }

        .event-screen-nav {
          position: static;
          top: auto;
          align-self: start;
          padding: 8px 8px 10px 0;
        }

        .event-screen-main {
          display: grid;
          gap: 18px;
          align-content: start;
          justify-items: start;
          min-width: 0;
          padding-bottom: 0;
        }

        .event-screen[data-event-tab-layout="tasks"] .event-screen-main {
          padding-bottom: 0;
        }

        .event-screen[data-event-tab-layout="supplies"] .event-screen-main {
          padding-bottom: 0;
        }

        .event-screen-tools,
        .event-screen-body {
          width: min(100%, 1120px);
        }

        .event-screen[data-event-tab-layout="tasks"] .event-screen-tools,
        .event-screen[data-event-tab-layout="tasks"] .event-screen-body,
        .event-screen[data-event-tab-layout="supplies"] .event-screen-tools,
        .event-screen[data-event-tab-layout="supplies"] .event-screen-body {
          width: min(100%, 980px);
        }

        .event-screen[data-event-tab-layout="participants"] .event-screen-main {
          justify-items: center;
        }

        .event-screen[data-event-tab-layout="participants"] .event-screen-body {
          width: min(100%, 980px);
        }

        .event-screen[data-event-tab-layout="participants"] .participants-screen-stack {
          display: grid;
          grid-template-columns: minmax(440px, 1fr) minmax(240px, 300px);
          grid-template-areas:
            "participants-head participants-head"
            "participants-list participants-invite";
          align-items: start;
          gap: 18px;
          margin-top: 24px;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-screen-stack.no-invite-panel {
          grid-template-columns: minmax(0, 720px);
          grid-template-areas:
            "participants-head"
            "participants-list";
          justify-content: center;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-screen-head {
          grid-area: participants-head;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-invite-panel {
          grid-area: participants-invite;
          display: grid;
          gap: 12px;
          padding: 14px;
          border-radius: 24px;
          background: rgba(251, 252, 255, 0.76);
          box-shadow:
            0 14px 34px rgba(35, 41, 67, 0.06),
            inset 0 0 0 1px rgba(255, 255, 255, 0.82);
        }

        .event-screen[data-event-tab-layout="participants"] .participants-invite-button {
          width: 100%;
          min-height: 54px;
          justify-content: center;
          margin: 0;
          border-radius: 18px;
          background: rgba(255, 255, 255, 0.9);
          color: var(--navy);
          font-size: 15px;
          box-shadow:
            inset 0 0 0 1px rgba(126, 136, 164, 0.12),
            0 10px 22px rgba(35, 41, 67, 0.05);
        }

        .event-screen[data-event-tab-layout="participants"] .participants-invite-button .plus {
          color: var(--navy-soft);
          background: rgba(238, 243, 251, 0.95);
          box-shadow: inset 0 0 0 1.7px rgba(100, 108, 135, 0.38);
        }

        .event-screen[data-event-tab-layout="participants"] .participants-invite-panel .invite-actions {
          display: grid;
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-invite-panel .participant-magic-invite,
        .event-screen[data-event-tab-layout="participants"] .participants-invite-panel .participant-invite-copy-panel {
          margin-top: 0;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-invite-panel .participant-invite-email-field,
        .event-screen[data-event-tab-layout="participants"] .participants-invite-panel .participant-invite-link-field {
          margin: 0;
          padding: 12px 14px;
          border-radius: 16px;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-invite-panel .invite-actions button {
          width: 100%;
          min-height: 44px;
          border-radius: 16px;
          font-size: 13px;
          font-weight: 600;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-invite-panel .composer-meta {
          margin: 0 !important;
          padding: 0 4px;
          color: var(--navy-soft);
          font-size: 12px;
          line-height: 1.4;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-list-panel {
          grid-area: participants-list;
          width: 100%;
          max-width: 650px;
          justify-self: end;
          border-radius: 24px;
          background: rgba(251, 252, 255, 0.92);
          box-shadow:
            0 18px 42px rgba(35, 41, 67, 0.07),
            inset 0 0 0 1px rgba(255, 255, 255, 0.82);
        }

        .event-screen[data-event-tab-layout="participants"] .participants-screen-stack.no-invite-panel .participants-list-panel {
          max-width: 720px;
          justify-self: center;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .participant-card {
          min-height: 72px;
          padding: 14px 16px;
          gap: 16px;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .participant-card + .participant-card {
          border-top-color: rgba(126, 136, 164, 0.12);
        }

        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .participant-card-clickable:hover {
          background: rgba(247, 249, 255, 0.86);
        }

        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .participant-card-info {
          gap: 14px;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .participant-avatar,
        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .participant-avatar-button {
          width: 46px;
          height: 46px;
          flex-basis: 46px;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .participant-card-main h3 {
          font-size: 17px;
          line-height: 1.18;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .participant-actions {
          display: inline-flex;
          align-items: center;
          justify-content: flex-end;
          gap: 9px;
          min-width: 84px;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .card-edit-button,
        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .participant-remove {
          width: 36px;
          height: 36px;
          border-radius: 14px;
        }

        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .card-edit-button svg,
        .event-screen[data-event-tab-layout="participants"] .participants-list-panel .participant-remove svg {
          width: 16px;
          height: 16px;
        }

        .event-screen[data-event-tab-layout="supplies"] .category-group > .group-add-button {
          width: auto;
          min-width: 280px;
          max-width: 420px;
          justify-self: start;
          padding-left: 24px;
          padding-right: 24px;
        }

        .event-screen[data-event-tab-layout="supplies"] .category-group > .group-add-round {
          width: 58px;
          min-width: 58px;
          max-width: 58px;
          padding-left: 0;
          padding-right: 0;
        }

        .event-screen-body > .stack {
          gap: 16px;
        }

        .event-screen-tools .list-tools {
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 0;
        }

        .event-screen-tools .list-tools-main {
          flex: 0 0 auto;
        }

        .event-screen-tools .search:not(.collapsed) {
          width: min(360px, 40vw);
        }

        .event-title-row {
          display: block;
          margin-top: 18px;
          margin-bottom: 24px;
        }

        .event-header-home {
          display: none;
        }

        .event-title-row .icon-row {
          display: none;
          flex-direction: row;
          gap: 10px;
          justify-self: start;
          align-self: center;
        }

        .event-header-brand-link {
          display: inline-flex;
          justify-self: start;
        }

        .event-desktop-links {
          display: none;
        }

        .event-header-mark {
          justify-self: start;
          height: 74px;
        }

        .event-header-title {
          font-size: 31px;
          line-height: 1.06;
          margin-top: 2px;
        }

        .event-screen-title {
          font-size: 31px;
          line-height: 1.06;
        }

        .event-desktop-link {
          min-height: 50px;
          border-radius: 18px;
          padding: 0 18px;
          font-size: 16px;
          font-weight: 600;
        }

        .event-desktop-link.icon-only {
          width: 52px;
          min-width: 52px;
          min-height: 52px;
          padding: 0;
          justify-self: start;
        }

        .tabs-shell {
          position: relative;
          left: auto;
          right: auto;
          bottom: auto;
          z-index: auto;
          margin-bottom: 0;
          pointer-events: auto;
        }

        .tabs-shell::before {
          display: none;
        }

        .event-tab-progress {
          display: none;
        }

        .tabs {
          display: flex;
          flex-direction: column;
          gap: 10px;
          overflow-x: visible;
          overflow-y: auto;
          padding: 0;
          margin-bottom: 0;
          max-height: calc(100dvh - 250px);
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }

        .tab {
          width: 100%;
          min-width: 0;
          min-height: 48px;
          height: auto;
          flex-direction: row;
          justify-content: flex-start;
          gap: 12px;
          padding: 8px 12px;
          border-radius: 16px;
          color: var(--navy);
          background: rgba(255, 255, 255, 0.82);
          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
          font-size: 15px;
          font-weight: 500;
        }

        .tab-icon {
          width: 38px;
          height: 34px;
          border-radius: 14px;
        }

        .tab-icon svg {
          width: 20px;
          height: 20px;
        }

        .tab-label {
          justify-content: flex-start;
          text-align: left;
          font-weight: 500;
        }

        .tab.active:not(.event-nav-action) {
          color: var(--navy);
          background: rgba(255, 255, 255, 0.92);
          box-shadow: inset 0 0 0 1px rgba(125, 137, 168, 0.16), 0 8px 20px -16px rgba(31, 35, 63, 0.28);
          font-weight: 600;
        }

        .event-nav-action.active {
          color: var(--white);
          background: var(--navy);
          box-shadow: none;
          font-weight: 600;
        }

        .tab.active .tab-label {
          font-weight: 600;
        }

        .tab.active::after {
          display: none;
        }

        .event-nav-actions {
          display: grid;
          gap: 12px;
          margin-top: 14px;
        }

        .event-nav-action {
          width: 100%;
          min-height: 48px;
          justify-content: flex-start;
          padding: 0 18px;
          border-radius: 16px;
          color: var(--navy);
          background: rgba(255, 255, 255, 0.82);
          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
          font-size: 15px;
          font-weight: 500;
        }

        .overview-action-grid {
          grid-template-columns: repeat(2, minmax(280px, 360px));
          justify-content: start;
          gap: 12px;
          margin-top: 0;
        }

        .overview-event-focus-grid {
          grid-template-columns: minmax(260px, 360px) minmax(360px, 520px);
          align-items: stretch;
          justify-content: start;
        }

        .overview-event-focus-actions {
          grid-template-columns: minmax(0, 1fr);
        }

        .overview-event-focus-grid .overview-detail-download {
          height: 100%;
        }

        .overview-action-card {
          width: min(100%, 360px);
          min-height: 88px;
          align-items: center;
          gap: 12px;
          padding: 14px 16px;
          border-radius: 18px;
        }

        .overview-action-label {
          font-size: 15px;
        }

        .overview-action-description {
          max-width: 24ch;
          font-size: 12px;
          line-height: 1.3;
        }

        .overview-action-side {
          min-width: 74px;
          padding: 8px 10px;
          border-radius: 14px;
        }

        .overview-action-side strong {
          font-size: 22px;
        }

        .overview-action-side span {
          font-size: 10px;
        }

        .drawer {
          align-items: stretch;
          padding:
            env(safe-area-inset-top)
            env(safe-area-inset-right)
            calc(env(safe-area-inset-bottom) + var(--keyboard-offset))
            env(safe-area-inset-left);
        }

        .drawer-card {
          width: 100%;
          max-width: none;
          height: calc(var(--app-viewport-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--keyboard-offset));
          max-height: none;
          border-radius: 0;
        }

        .drawer-card.desktop-split {
          display: grid;
          grid-template-columns: minmax(0, 1.08fr) minmax(400px, 0.92fr);
          grid-template-rows: auto minmax(0, 1fr);
        }

        .drawer-head {
          padding: max(24px, calc(env(safe-area-inset-top) + 10px)) 28px 18px;
        }

        .drawer-card.desktop-split .drawer-head {
          grid-column: 1 / -1;
          grid-row: 1;
          background: transparent;
          border-bottom: none;
          box-shadow: none;
        }

        .drawer-card.desktop-split .drawer-head-left > div {
          display: none;
        }

        .drawer-home-logo-button {
          display: none;
        }

        .drawer-head-left {
          align-items: center;
          width: 100%;
          flex-wrap: nowrap;
          justify-content: flex-start;
          gap: 14px;
        }

        .drawer-head-left > div {
          display: block;
          min-width: 0;
          margin-left: auto;
          order: 0;
          flex: 0 1 auto;
          text-align: right;
        }

        #drawer-title.hidden {
          display: block;
        }

        .drawer-head p {
          display: block;
        }

        .drawer-head-title-trigger {
          display: none !important;
        }

        .drawer-head h2 {
          font-size: 26px;
        }

        .drawer-head p {
          font-size: 15px;
        }

        .drawer-tabs {
          top: 88px;
          padding: 0 28px 18px;
        }

        .drawer-card.desktop-split .drawer-tabs {
          display: none !important;
        }

        .drawer-tabs-inner {
          width: auto;
          min-width: 320px;
        }

        .drawer-tab {
          min-height: 40px;
          font-size: 15px;
        }

        .drawer-card.desktop-split #drawer-view-info.active {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          gap: 18px 22px;
          align-content: start;
          grid-column: 1;
          grid-row: 2;
          min-height: 0;
          overflow-y: auto;
          padding: 8px 28px 34px;
          border-right: 1px solid rgba(126, 136, 164, 0.18);
        }

        .drawer-card.desktop-split #drawer-view-info > .detail-summary {
          grid-column: 1 / -1;
          padding: 0 0 8px;
        }

        .drawer-card.desktop-split #drawer-view-info > .detail-section {
          padding: 0;
          display: grid;
          grid-template-rows: minmax(28px, auto) 1fr;
          gap: 0;
        }

        .drawer-card.desktop-split #drawer-people-wrap,
        .drawer-card.desktop-split #drawer-checklist-section {
          display: flex;
          flex-direction: column;
          gap: 0;
        }

        .drawer-card.desktop-split #drawer-people-wrap {
          grid-column: 1;
          grid-row: 3;
          min-width: 0;
        }

        .drawer-card.desktop-split #drawer-people-wrap > .detail-section-heading {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
          padding-bottom: 12px;
          border-bottom: 1px solid #eef1f8;
          height: auto;
          min-height: auto;
        }

        .drawer-card.desktop-split #drawer-people-body {
          margin-top: 12px;
        }

        .drawer-card.desktop-split #drawer-people-section .detail-card-header {
          display: none !important;
        }

        .drawer-card.desktop-split #drawer-people-section .detail-card-header strong {
          color: var(--navy);
          font-size: 16px;
          font-weight: 600;
          line-height: 1.2;
        }

        .drawer-card.desktop-split #drawer-people-progress {
          display: inline-flex !important;
          flex: 0 0 auto;
        }

        .drawer-card.desktop-split #drawer-people-section .detail-people-names {
          padding: 18px 20px 16px;
        }

        .drawer-card.desktop-split #drawer-people-section .detail-assignment-row-empty {
          width: 100%;
          min-height: 60px;
          justify-content: flex-start;
          border: 0;
          background: transparent;
          cursor: pointer;
        }

        .drawer-card.desktop-split #drawer-people-section .detail-assignment-empty-avatar {
          width: 44px;
          height: 44px;
          flex: 0 0 44px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: 2px dashed rgba(39, 185, 95, 0.58);
          border-radius: 999px;
          color: #27b95f;
          background: rgba(237, 250, 242, 0.9);
        }

        .drawer-card.desktop-split #drawer-people-section .detail-assignment-empty-avatar svg {
          width: 25px;
          height: 25px;
        }

        .drawer-card.desktop-split #drawer-checklist-section {
          grid-column: 2;
          grid-row: 3;
        }

        .drawer-card.desktop-split #drawer-expenses-section {
          grid-column: 1;
          grid-row: 4;
        }

        .drawer-card.desktop-split #drawer-schedule-section {
          grid-column: 2;
          grid-row: 4;
        }

        .drawer-card.desktop-split .detail-schedule-row {
          grid-template-columns: minmax(124px, 0.82fr) minmax(0, 1fr) 32px;
        }

        .drawer-card.desktop-split .detail-schedule-row.readonly {
          grid-template-columns: minmax(124px, 0.82fr) minmax(0, 1fr);
        }

        .drawer-card.desktop-split .detail-schedule-person-field {
          grid-column: auto;
        }

        .drawer-card.desktop-split .detail-schedule-remove {
          grid-column: auto;
          grid-row: auto;
        }

        .drawer-card.desktop-split #drawer-attachments-section {
          grid-column: 2;
          grid-row: 4;
        }

        .drawer-card.desktop-split.drawer-detail-supply #drawer-schedule-section {
          display: none !important;
        }

        .drawer-card.desktop-split.drawer-detail-supply #drawer-attachments-section {
          grid-column: 2;
          grid-row: 4;
        }

        .drawer-card.desktop-split #drawer-items-section,
        .drawer-card.desktop-split #drawer-organizer-section {
          grid-column: 1 / -1;
        }

        .drawer-card.desktop-split #drawer-items-section {
          grid-row: 6;
        }

        .drawer-card.desktop-split #drawer-view-info > .hidden {
          display: none !important;
        }

        .detail-main-title {
          font-size: 28px;
        }

        #drawer-main-title-static:not(.hidden) {
          display: block !important;
        }

        #drawer-inline-title-trigger:not(.hidden) {
          display: inline-flex !important;
        }

        .detail-meta-line {
          font-size: 14px;
        }

        .detail-section h3 {
          margin-bottom: 12px;
          font-size: 16px;
        }

        .detail-section-heading {
          align-items: center;
          min-height: 28px;
          margin-bottom: 0;
          padding-bottom: 12px;
        }

        .detail-section-heading.hidden {
          display: none !important;
        }

        .detail-section-heading span {
          font-size: 16px;
        }

        .drawer-card.desktop-split #drawer-view-info > .detail-section > h3,
        .drawer-card.desktop-split #drawer-view-info > .detail-section > .detail-section-heading {
          margin: 0;
        }

        .drawer-card.desktop-split .detail-section-toggle {
          cursor: default;
          pointer-events: none;
        }

        .drawer-card.desktop-split .detail-section-count-badge,
        .drawer-card.desktop-split .detail-section-chevron,
        .drawer-card.desktop-split #drawer-people-heading-progress {
          display: none !important;
        }

        .drawer-card.desktop-split .detail-section-body {
          margin-top: 12px;
        }

        .drawer-card.desktop-split #drawer-people-wrap > .detail-section-heading {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          align-items: center;
          flex: 0 0 32px;
          height: 32px;
          min-height: 32px;
          gap: 12px;
        }

        .drawer-card.desktop-split #drawer-checklist-section > .detail-section-heading,
        .drawer-card.desktop-split #drawer-expenses-section > .detail-section-heading,
        .drawer-card.desktop-split #drawer-schedule-section > .detail-section-heading,
        .drawer-card.desktop-split #drawer-attachments-section > .detail-section-heading {
          display: flex;
          align-items: center;
          flex: 0 0 32px;
          height: 32px;
          min-height: 32px;
          line-height: 1.1;
        }

        .drawer-card.desktop-split #drawer-view-info > .detail-section > h3 {
          display: flex;
          align-items: center;
          min-height: 28px;
        }

        .drawer-card.desktop-split #drawer-people-section,
        .drawer-card.desktop-split #drawer-people-section .detail-card,
        .drawer-card.desktop-split #drawer-checklist-section .detail-card,
        .drawer-card.desktop-split #drawer-expenses-section .detail-card,
        .drawer-card.desktop-split #drawer-schedule-section .detail-card,
        .drawer-card.desktop-split #drawer-attachments-section .detail-card {
          height: 100%;
          min-width: 0;
        }

        .drawer-card.desktop-split #drawer-checklist-section .detail-card {
          margin-top: 0;
        }

        .detail-card-header {
          padding: 18px 20px 12px;
        }

        .drawer-card.desktop-split #drawer-checklist-section .detail-checklist-card {
          display: grid;
          gap: 0;
          padding: 18px 20px 16px;
          overflow: visible;
        }

        .drawer-card.desktop-split #drawer-checklist-section .detail-checklist-card-header {
          display: none !important;
        }

        .drawer-card.desktop-split #drawer-view-info .detail-section {
          align-self: start;
        }

        .detail-people-names,
        .detail-expense-card {
          padding: 18px 20px;
        }

        .drawer-card.desktop-split #drawer-expenses-section .detail-expense-card,
        .drawer-card.desktop-split #drawer-schedule-section .detail-schedule-card,
        .drawer-card.desktop-split #drawer-attachments-section .detail-card.soft {
          min-height: 160px;
        }

        .drawer-card.desktop-split #drawer-schedule-section .detail-schedule-card {
          min-height: 0;
          padding: 10px 12px;
        }

        .drawer-card.desktop-split #drawer-attachments-section .detail-card.soft {
          padding: 18px 20px;
        }

        .drawer-card.desktop-split #drawer-attachments-section .detail-attachments-toolbar,
        .drawer-card.desktop-split #drawer-attachments-section .detail-attachments-empty {
          padding-left: 0;
          padding-right: 0;
        }

        .detail-checklist-card {
          padding: 12px 18px 14px;
        }

        .detail-action {
          width: calc(100% - 40px);
          margin: 0 20px 20px;
        }

        .drawer-card.desktop-split #drawer-view-messages.active {
          grid-column: 2;
          grid-row: 2;
          display: flex;
          flex-direction: column;
          min-height: 0;
          padding-bottom: 0;
          overflow: hidden;
          border-bottom-left-radius: 32px;
          background: linear-gradient(180deg, rgba(236, 241, 250, 0.86) 0%, rgba(232, 238, 249, 0.94) 100%);
        }

        .drawer-card.desktop-split.drawer-messages-expanded #drawer-view-info {
          display: none !important;
        }

        .drawer-card.desktop-split.drawer-messages-expanded #drawer-view-messages.active {
          grid-column: 1 / -1 !important;
          border-left: none !important;
          border-bottom-left-radius: 32px;
          border-bottom-right-radius: 32px;
        }

        .drawer-card.desktop-split .drawer-messages-head {
          display: grid;
          gap: 4px;
          padding: 16px 22px 12px;
          border-bottom: 1px solid rgba(126, 136, 164, 0.16);
          background: rgba(255, 255, 255, 0.36);
        }

        .drawer-card.desktop-split .drawer-messages-head-main {
          min-width: 0;
          display: inline-flex;
          align-items: center;
          gap: 10px;
        }

        .drawer-card.desktop-split .drawer-messages-head-icon {
          width: 34px;
          height: 34px;
          border-radius: 999px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: var(--success-strong);
          background: rgba(45, 191, 85, 0.12);
          flex: 0 0 auto;
        }

        .drawer-card.desktop-split .drawer-messages-head-icon svg {
          width: 18px;
          height: 18px;
          display: block;
        }

        .drawer-card.desktop-split .drawer-messages-head h3 {
          margin: 0;
          color: var(--navy);
          font-size: 18px;
          font-weight: 600;
        }

        .drawer-card.desktop-split .drawer-messages-head p {
          margin: 0;
          color: var(--navy-soft);
          font-size: 13px;
          line-height: 1.35;
        }

        .drawer-card.desktop-split #drawer-view-messages .message-stage {
          padding: 0 28px;
        }

        .drawer-card.desktop-split #drawer-view-messages .message-thread {
          width: 100%;
          margin: 0 auto;
          padding: 22px 0 34px;
        }

        .drawer-card.desktop-split #drawer-view-messages .message-composer-wrap {
          width: 100%;
          padding: 14px 0 0;
        }

        .drawer-card.desktop-split .message-card-body {
          background: transparent;
          box-shadow: none;
          display: flex;
          flex-direction: column;
          flex: 1 1 auto;
          min-height: 0;
          overflow: hidden;
        }

        .drawer-card.desktop-split #drawer-view-messages .message-composer {
          width: 100%;
          margin: 0;
          padding: 14px 24px calc(16px + env(safe-area-inset-bottom));
          border-radius: 22px 22px 0 0;
        }

        .drawer-card.desktop-split #drawer-view-messages .message-composer-row {
          display: grid;
          grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
          align-items: center;
          gap: 10px;
        }

        .drawer-card.desktop-split #drawer-view-messages .message-input-pill {
          min-height: 44px;
          padding: 0 14px;
          border-radius: 14px;
          background: rgba(238, 243, 251, 0.96);
        }

        .drawer-card.desktop-split #drawer-view-messages .message-attach,
        .drawer-card.desktop-split #drawer-view-messages .message-send,
        .drawer-card.desktop-split #drawer-view-messages .message-expand-button {
          width: 44px;
          height: 44px;
          min-width: 44px;
          margin: 0;
        }

        .drawer-card.desktop-split #drawer-view-messages .message-attach,
        .drawer-card.desktop-split #drawer-view-messages .message-expand-button {
          border-radius: 999px;
          color: var(--blue);
          background: rgba(238, 243, 251, 0.96);
        }

        .drawer-card.desktop-split #drawer-view-messages .message-bubble {
          max-width: min(520px, calc(100% - 84px));
        }

        .subitem-modal,
        .dialog-modal {
          align-items: center;
          padding: 28px;
        }

        .subitem-modal-card {
          width: min(100%, 760px);
          max-height: min(calc(100dvh - 72px - var(--keyboard-offset)), 900px);
          padding: 24px;
          border-radius: 30px;
        }

        .organizer-composer-modal-card {
          width: min(100%, 620px);
        }

        .subitem-modal-head {
          margin-bottom: 18px;
        }

        .subitem-modal-head h3 {
          font-size: 22px;
        }

        .subitem-modal-head p {
          font-size: 14px;
        }

        .dialog-modal-card {
          max-width: 420px;
          padding: 24px 22px 20px;
          border-radius: 28px;
        }

        .dialog-modal-actions {
          gap: 12px;
        }

        .dialog-modal-actions,
        .composer-actions {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .pdf-preview-card {
          width: min(100%, 1280px);
          height: min(calc(100dvh - 56px - var(--keyboard-offset)), 920px);
          max-height: min(calc(100dvh - 56px - var(--keyboard-offset)), 920px);
          padding: 14px;
        }
      }

      @media (min-width: 1100px) and (max-width: 1349px) {
        .drawer-card.desktop-split #drawer-view-info.active {
          grid-template-columns: minmax(0, 1fr) !important;
        }
        .drawer-card.desktop-split #drawer-people-wrap,
        .drawer-card.desktop-split #drawer-checklist-section,
        .drawer-card.desktop-split #drawer-expenses-section,
        .drawer-card.desktop-split #drawer-schedule-section,
        .drawer-card.desktop-split #drawer-attachments-section {
          grid-column: 1 / -1 !important;
          grid-row: auto !important;
        }
      }

      @media (min-width: 1100px) {
        .home-folder-group[data-home-folder-dropzone="__zonder_map__"] {
          gap: 0;
          padding: 16px 16px 18px;
          margin-bottom: 18px;
          background: rgba(255, 255, 255, 0.45);
          border-radius: 22px;
          box-shadow:
            inset 0 0 0 1px rgba(125, 137, 168, 0.12),
            0 16px 36px -24px rgba(31, 35, 63, 0.22);
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
        }

        .home-folder-group[data-home-folder-dropzone="__zonder_map__"] .home-folder-head {
          padding: 2px 4px 10px;
          border-bottom: 1px dashed rgba(125, 137, 168, 0.2);
          margin-bottom: 12px;
        }

        .home-folder-group[data-home-folder-dropzone="__zonder_map__"] .home-folder-toggle {
          width: 100%;
          min-width: 0;
          padding: 4px 8px 4px 4px;
          border-radius: 12px;
          background: transparent;
          box-shadow: none;
          color: inherit;
          font-size: inherit;
          letter-spacing: 0;
        }

        .home-folder-group[data-home-folder-dropzone="__zonder_map__"] .home-folder-badge {
          width: 30px;
          height: 30px;
          background: rgba(255, 255, 255, 0.95);
          box-shadow: inset 0 0 0 1px rgba(125, 137, 168, 0.18), 0 4px 10px -4px rgba(31, 35, 63, 0.18);
          color: rgba(31, 35, 63, 0.7);
          border-radius: 10px;
        }

        .home-folder-group[data-home-folder-dropzone="__zonder_map__"] .home-folder-toggle > span:nth-child(2) {
          color: var(--navy);
        }
      }

      .drawer-tab-icon,
      .drawer-more-icon svg,
      .message-send svg {
        width: 1em;
        height: 1em;
        display: block;
        flex: 0 0 auto;
      }

      .drawer-tab-badge {
        position: absolute;
        top: 2px;
        right: 16%;
        min-width: 16px;
        height: 16px;
        padding: 0 5px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        background: var(--danger-strong);
        font-size: 9px;
        font-weight: 600;
        line-height: 1;
      }

      .drawer-tab-section-hidden,
      .drawer-more-scrim,
      .drawer-more-sheet {
        display: none !important;
      }

      .detail-card-heading-copy {
        min-width: 0;
        display: grid;
        gap: 3px;
      }

      .detail-card-heading-copy span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.35;
      }

      .detail-expense-total-block {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: center;
        gap: 5px 14px;
        padding: 18px 18px;
        border-radius: 18px;
        background:
          linear-gradient(135deg, rgba(220, 246, 234, 0.95) 0%, rgba(238, 252, 244, 0.95) 100%);
        box-shadow: inset 0 0 0 1px rgba(27, 158, 106, 0.12);
        text-align: left;
      }

      .detail-expense-total-block span {
        grid-column: 1;
        grid-row: 1;
        color: rgba(22, 120, 80, 0.75);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .detail-expense-total-block strong {
        grid-column: 2;
        grid-row: 1;
        color: #1a8f5c;
        font-size: 27px;
        font-weight: 700;
        line-height: 1;
        text-align: right;
        white-space: nowrap;
      }

      .detail-expense-total-block small {
        grid-column: 1;
        grid-row: 2;
        color: var(--muted);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.25;
      }

      @media (max-width: 1099px) {
        .drawer {
          background: rgba(231, 236, 246, 0.98);
        }

        .drawer-card.drawer-tabbed-detail {
          height: calc(var(--app-viewport-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--drawer-keyboard-offset));
          background: var(--page);
          overflow: hidden;
          touch-action: pan-y;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head {
          flex: 0 0 auto;
          padding: max(10px, calc(env(safe-area-inset-top) + 4px)) 18px 6px;
          background: var(--page);
          box-shadow: none;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head-left {
          align-items: center;
          gap: 10px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-back {
          max-width: min(48vw, 180px);
          min-width: 78px;
          height: 38px;
          padding: 0 14px;
          border-radius: 14px;
          background: var(--white);
          color: var(--navy);
          font-size: 14px;
          font-weight: 400;
          box-shadow: 0 2px 10px rgba(35, 41, 67, 0.04);
        }

        .drawer-card.drawer-tabbed-detail .drawer-back .back-button-icon {
          font-size: 18px;
          line-height: 1;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head-left > div {
          order: 3;
          flex: 1 0 100%;
          margin: 10px 0 0;
          max-height: none;
          text-align: left;
        }

        .drawer-card.drawer-tabbed-detail .drawer-home-logo-button,
        .drawer-card.drawer-tabbed-detail .drawer-home-logo-image,
        .drawer-card.drawer-tabbed-detail #drawer-subtitle {
          display: none !important;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head h2,
        .drawer-card.drawer-tabbed-detail .drawer-head-title-trigger {
          color: var(--navy);
          font-size: 24px;
          font-weight: 700;
          line-height: 1.12;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head-title-trigger {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 32px;
          align-items: start;
          gap: 12px;
          letter-spacing: 0;
        }

        .drawer-card.drawer-tabbed-detail .detail-main-title-summary {
          min-width: 0;
          gap: 4px 8px;
        }

        .drawer-card.drawer-tabbed-detail .detail-inline-edit-icon {
          width: 30px;
          height: 30px;
          margin-top: 2px;
          border-radius: 999px;
          color: var(--blue);
          background: rgba(47, 102, 223, 0.1);
          box-shadow:
            inset 0 0 0 1px rgba(47, 102, 223, 0.12),
            0 8px 16px rgba(47, 102, 223, 0.08);
        }

        .drawer-card.drawer-tabbed-detail .detail-inline-edit-icon svg {
          width: 16px;
          height: 16px;
        }

        .drawer-card.drawer-tabbed-detail[data-active-tab="messages"]:not(.is-organizer) .detail-inline-edit-icon {
          display: none !important;
        }

        .drawer-card.drawer-tabbed-detail[data-active-tab="messages"]:not(.is-organizer) .drawer-head-title-trigger,
        .drawer-card.drawer-tabbed-detail[data-active-tab="messages"]:not(.is-organizer) #drawer-inline-title-trigger {
          grid-template-columns: minmax(0, 1fr);
          pointer-events: none;
          cursor: default;
        }

        .drawer-card.drawer-tabbed-detail .detail-main-title-count {
          flex-basis: 100%;
          color: var(--muted);
          font-size: 13px;
          font-weight: 400;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tabs {
          position: fixed;
          left: max(12px, env(safe-area-inset-left));
          right: max(12px, env(safe-area-inset-right));
          bottom: calc(10px + env(safe-area-inset-bottom));
          z-index: 110;
          display: flex;
          flex-direction: column;
          align-items: stretch;
          margin: 0;
          padding: 0;
          pointer-events: none;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tabs::before {
          content: "";
          position: absolute;
          left: calc(-1 * max(12px, env(safe-area-inset-left)));
          right: calc(-1 * max(12px, env(safe-area-inset-right)));
          bottom: calc(-10px - env(safe-area-inset-bottom));
          height: calc(132px + env(safe-area-inset-bottom));
          z-index: 0;
          background:
            linear-gradient(
              to bottom,
              rgba(231, 236, 246, 0) 0,
              var(--page) 28px,
              var(--page) 100%
            );
          pointer-events: none;
        }

        .drawer-card.drawer-tabbed-detail .drawer-detail-tab-progress {
          position: relative;
          z-index: 1;
          height: 16px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          align-self: center;
          gap: 5px;
          margin: 0 auto 5px;
          pointer-events: none;
        }

        .drawer-card.drawer-tabbed-detail .drawer-detail-tab-dot {
          width: 5px;
          height: 5px;
          border-radius: 999px;
          background: rgba(126, 136, 164, 0.36);
          transition: width 180ms ease, background-color 180ms ease;
        }

        .drawer-card.drawer-tabbed-detail .drawer-detail-tab-dot.active {
          width: 22px;
          background: var(--navy);
        }

        .drawer-card.drawer-tabbed-detail .drawer-tabs-inner {
          position: relative;
          z-index: 1;
          width: 100%;
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));
          gap: 3px;
          padding: 6px 4px;
          border-radius: 20px;
          background: var(--white);
          box-shadow: 0 -2px 10px rgba(35, 41, 67, 0.04), 0 14px 34px rgba(35, 41, 67, 0.12);
          pointer-events: auto;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab {
          position: relative;
          min-width: 0;
          min-height: 38px;
          height: 38px;
          padding: 1px 1px 0;
          border-radius: 8px;
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1px;
          color: var(--muted);
          background: transparent;
          box-shadow: none;
          font-size: 8px;
          font-weight: 400;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab-label {
          max-width: 100%;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          color: currentColor;
          line-height: 1.12;
          text-align: center;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab-icon {
          width: 16px;
          height: 16px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab-badge {
          top: 2px;
          right: 18%;
          min-width: 14px;
          height: 14px;
          padding: 0 4px;
          background: var(--danger-strong);
          color: #ffffff;
          font-size: 8px;
          font-weight: 700;
          box-shadow: 0 0 0 2px var(--white);
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab.active {
          color: var(--navy);
          background: transparent;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab.active .drawer-tab-label {
          font-weight: 600;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab.active::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: -6px;
          width: 14px;
          height: 2px;
          border-radius: 999px;
          background: var(--navy);
          transform: translateX(-50%);
        }

        .drawer-card.drawer-tabbed-detail .drawer-view {
          padding-bottom: calc(112px + env(safe-area-inset-bottom));
        }

        .drawer-card.drawer-tabbed-detail .drawer-view.active,
        .drawer-card.drawer-tabbed-detail .detail-section,
        .drawer-card.drawer-tabbed-detail .detail-card,
        .drawer-card.drawer-tabbed-detail .detail-assignment-row,
        .drawer-card.drawer-tabbed-detail .detail-checklist-row,
        .drawer-card.drawer-tabbed-detail .detail-expense-row,
        .drawer-card.drawer-tabbed-detail .detail-schedule-row,
        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-stage,
        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-composer,
        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-input-pill,
        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) #drawer-message-input {
          touch-action: pan-y;
        }

        .drawer-card.drawer-tabbed-detail.drawer-detail-swiping .drawer-view.active {
          opacity: var(--detail-swipe-opacity, 1);
          transform: translate3d(var(--detail-swipe-offset, 0px), 0, 0) scale(var(--detail-swipe-scale, 1));
          transition: none;
          user-select: none;
          will-change: transform, opacity;
        }

        .drawer-card.drawer-tabbed-detail.drawer-detail-swipe-return .drawer-view.active {
          opacity: 1;
          transform: translate3d(0, 0, 0);
          transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
          will-change: transform, opacity;
        }

        .drawer-card.drawer-tabbed-detail.drawer-detail-swipe-commit .drawer-view.active {
          animation: drawerDetailTabExit 145ms cubic-bezier(0.32, 0, 0.67, 0) both;
          pointer-events: none;
          will-change: transform, opacity;
        }

        .drawer-card.drawer-tabbed-detail.drawer-detail-tab-animating .drawer-view.active {
          animation: drawerDetailTabEnter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
          will-change: transform, opacity;
        }

        @keyframes drawerDetailTabExit {
          from {
            opacity: var(--detail-swipe-opacity, 1);
            transform: translate3d(var(--detail-swipe-offset, 0px), 0, 0) scale(var(--detail-swipe-scale, 1));
          }

          to {
            opacity: 0.72;
            transform: translate3d(var(--detail-swipe-commit-offset, -112%), 0, 0) scale(0.975);
          }
        }

        @keyframes drawerDetailTabEnter {
          from {
            opacity: 0.78;
            transform: translate3d(var(--detail-swipe-enter-offset, 100%), 0, 0) scale(0.985);
          }

          to {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
          }
        }

        .drawer-card.drawer-tabbed-detail #drawer-view-info.active {
          display: block;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }

        .drawer-card.drawer-tabbed-detail .detail-summary {
          padding: 0 18px 14px;
        }

        .drawer-card.drawer-tabbed-detail #drawer-main-title-static,
        .drawer-card.drawer-tabbed-detail #drawer-inline-title-trigger {
          display: none !important;
        }

        .drawer-card.drawer-tabbed-detail .detail-meta-line {
          gap: 8px 14px;
          color: var(--muted);
          font-size: 13px;
          font-weight: 400;
        }

        .drawer-card.drawer-tabbed-detail .detail-section {
          padding: 0 18px 16px;
        }

        .drawer-card.drawer-tabbed-detail #drawer-people-wrap > .detail-section-heading {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
        }

        .drawer-card.drawer-tabbed-detail #drawer-people-heading {
          color: var(--navy);
          font-size: 17px;
          font-weight: 600;
          line-height: 1.25;
        }

        .drawer-card.drawer-tabbed-detail .detail-section-heading {
          margin-bottom: 12px;
          padding: 0 0 12px;
          border-bottom: 1px solid #eef1f8;
        }

        .drawer-card.drawer-tabbed-detail #drawer-checklist-section > .detail-section-heading {
          margin-bottom: 14px;
          border-bottom-color: rgba(126, 136, 164, 0.14);
        }

        .drawer-card.drawer-tabbed-detail #drawer-checklist-heading {
          color: var(--navy);
          font-size: 17px;
          font-weight: 600;
          line-height: 1.25;
        }

        .drawer-card.drawer-tabbed-detail #drawer-expenses-section > .detail-section-heading {
          margin-bottom: 14px;
          border-bottom-color: rgba(126, 136, 164, 0.14);
        }

        .drawer-card.drawer-tabbed-detail #drawer-expenses-heading {
          color: var(--navy);
          font-size: 17px;
          font-weight: 600;
          line-height: 1.25;
        }

        .drawer-card.drawer-tabbed-detail #drawer-schedule-section > .detail-section-heading {
          margin-bottom: 14px;
          border-bottom-color: rgba(126, 136, 164, 0.14);
        }

        .drawer-card.drawer-tabbed-detail #drawer-schedule-heading {
          color: var(--navy);
          font-size: 17px;
          font-weight: 600;
          line-height: 1.25;
        }

        .drawer-card.drawer-tabbed-detail #drawer-attachments-section > .detail-section-heading {
          margin-bottom: 14px;
          border-bottom-color: rgba(126, 136, 164, 0.14);
        }

        .drawer-card.drawer-tabbed-detail #drawer-attachments-heading {
          color: var(--navy);
          font-size: 17px;
          font-weight: 600;
          line-height: 1.25;
        }

        .drawer-card.drawer-tabbed-detail .detail-section-toggle {
          pointer-events: none;
        }

        .drawer-card.drawer-tabbed-detail .detail-section-count-badge,
        .drawer-card.drawer-tabbed-detail .detail-section-chevron,
        .drawer-card.drawer-tabbed-detail #drawer-people-heading-progress {
          display: none !important;
        }

        .drawer-card.drawer-tabbed-detail .detail-card,
        .drawer-card.drawer-tabbed-detail .detail-card.soft {
          border-radius: 22px;
          background: var(--white);
          box-shadow: 0 2px 12px rgba(35, 41, 67, 0.04);
        }

        .drawer-card.drawer-tabbed-detail #drawer-people-section .detail-card-header {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap: 0;
          padding: 16px 16px 12px;
        }

        .drawer-card.drawer-tabbed-detail #drawer-people-progress {
          display: none !important;
        }

        .drawer-card.drawer-tabbed-detail #drawer-people-section .detail-card-header {
          display: none !important;
        }

        .drawer-card.drawer-tabbed-detail .detail-people-names {
          padding: 16px 16px 0;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-section {
          gap: 12px;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-list {
          gap: 0;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-row {
          width: 100%;
          min-height: 60px;
          margin: 0;
          padding: 8px 0;
          border: 0;
          border-top: 1px solid #eef1f8;
          border-radius: 0;
          background: transparent;
          text-align: left;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-row:first-child {
          border-top: 0;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-person {
          gap: 12px;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-person .participant-avatar,
        .drawer-card.drawer-tabbed-detail .detail-assignment-person .participant-avatar-button,
        .drawer-card.drawer-tabbed-detail .detail-assignment-empty-avatar {
          width: 44px;
          height: 44px;
          flex: 0 0 44px;
          border-radius: 999px;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-person .participant-avatar {
          color: var(--white);
          background: linear-gradient(135deg, #cdb89e, #8b6f4f);
          box-shadow: 0 0 0 3px rgba(217, 223, 236, 0.4);
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-person .participant-avatar svg {
          width: 18px;
          height: 18px;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-copy strong {
          color: var(--navy);
          font-size: 14px;
          font-weight: 500;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-row-empty {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          cursor: pointer;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-empty-avatar {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: 2px dashed rgba(39, 185, 95, 0.58);
          color: #27b95f;
          background: rgba(237, 250, 242, 0.9);
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-empty-avatar svg {
          width: 25px;
          height: 25px;
        }

        .drawer-card.drawer-tabbed-detail .detail-more-people-button {
          width: 100%;
          min-height: 48px;
          border: 0;
          border-radius: 14px;
          padding: 0 16px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: var(--navy);
          background: rgba(227, 234, 247, 0.86);
          box-shadow: inset 0 0 0 1px rgba(126, 148, 184, 0.22);
          font-size: 14px;
          font-weight: 700;
          cursor: pointer;
        }

        .drawer-card.drawer-tabbed-detail .detail-more-people-button:hover,
        .drawer-card.drawer-tabbed-detail .detail-more-people-button:focus-visible {
          outline: none;
          background: rgba(216, 226, 244, 0.96);
          box-shadow:
            inset 0 0 0 1px rgba(47, 102, 223, 0.24),
            0 10px 20px rgba(31, 35, 63, 0.07);
        }

        .drawer-card.drawer-tabbed-detail #drawer-people-section > .detail-action {
          width: calc(100% - 44px);
          min-height: 52px;
          margin: 22px;
          border: 0;
          border-radius: 14px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: var(--white);
          background: var(--success-strong);
          font-size: 15px;
          font-weight: 600;
        }

        .drawer-card.drawer-tabbed-detail #drawer-people-section > .detail-action.negative {
          background: var(--danger-strong);
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-manage {
          padding-bottom: 18px;
        }

        .drawer-card.drawer-tabbed-detail #drawer-people-section {
          overflow: visible;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-form {
          grid-template-columns: minmax(0, 1fr) minmax(96px, 104px);
          gap: 8px;
          align-items: start;
        }

        .drawer-card.drawer-tabbed-detail .detail-assignment-assign-button {
          width: 100%;
          min-width: 0;
          height: 40px;
          color: var(--white);
          background: var(--navy);
          border-color: transparent;
          box-shadow: 0 8px 18px rgba(31, 35, 63, 0.14);
        }

        .drawer-card.drawer-tabbed-detail .detail-expense-card,
        .drawer-card.drawer-tabbed-detail #drawer-attachments {
          padding: 16px;
        }

        .drawer-card.drawer-tabbed-detail .detail-checklist-card {
          padding: 16px;
          gap: 0;
        }

        .drawer-card.drawer-tabbed-detail .detail-checklist-card-header {
          display: none !important;
        }

        .drawer-card.drawer-tabbed-detail .detail-checklist-list {
          gap: 8px;
        }

        .drawer-card.drawer-tabbed-detail .detail-expense-card {
          gap: 14px;
        }

        .drawer-card.drawer-tabbed-detail .detail-checklist-row {
          grid-template-columns: 22px minmax(0, 1fr) auto;
          align-items: center;
          column-gap: 12px;
          min-height: 38px;
          padding: 7px 0;
        }

        .drawer-card.drawer-tabbed-detail .detail-checklist-toggle {
          width: 22px;
          height: 22px;
          border-radius: 7px;
        }

        .drawer-card.drawer-tabbed-detail .detail-checklist-label {
          color: var(--navy);
          font-size: 15px;
          font-weight: 400;
          line-height: 1.35;
        }

        .drawer-card.drawer-tabbed-detail .detail-checklist-row.checked .detail-checklist-label {
          color: var(--muted);
          text-decoration: line-through;
        }

        .drawer-card.drawer-tabbed-detail .detail-checklist-actions {
          gap: 8px;
        }

        .drawer-card.drawer-tabbed-detail .detail-checklist-edit,
        .drawer-card.drawer-tabbed-detail .detail-checklist-remove {
          width: 30px;
          height: 30px;
        }

        .drawer-card.drawer-tabbed-detail .detail-checklist-add-row.has-items {
          grid-template-columns: 22px minmax(0, 1fr);
          column-gap: 12px;
          margin-top: 8px;
        }

        .drawer-card.drawer-tabbed-detail .detail-expense-list {
          gap: 8px;
        }

        .drawer-card.drawer-tabbed-detail .detail-expense-row {
          padding: 13px 14px;
          border: 1px solid rgba(126, 136, 164, 0.08);
          border-radius: 16px;
          background: rgba(248, 250, 254, 0.96);
        }

        .drawer-card.drawer-tabbed-detail .detail-expense-head {
          display: grid;
          grid-template-columns: minmax(0, 1fr) max-content;
          align-items: center;
          gap: 12px;
          justify-self: stretch;
          width: 100%;
        }

        .drawer-card.drawer-tabbed-detail .detail-expense-copy strong {
          color: var(--navy);
          font-size: 14px;
          font-weight: 600;
        }

        .drawer-card.drawer-tabbed-detail .detail-expense-value {
          color: var(--navy);
          font-size: 14px;
          font-weight: 700;
        }

        .drawer-card.drawer-tabbed-detail .detail-expense-toolbar {
          gap: 10px;
          padding: 6px 12px 6px 6px;
        }

        .drawer-card.drawer-tabbed-detail .detail-expense-composer {
          gap: 12px;
        }

        .drawer-card.drawer-tabbed-detail .detail-expense-receipt-row {
          padding-top: 2px;
        }

        .drawer-card.drawer-tabbed-detail .detail-expense-attach-button {
          flex: 0 0 auto;
        }

        .drawer-card.drawer-tabbed-detail .drawer-view.messages-view.active {
          margin: 14px 18px calc(96px + env(safe-area-inset-bottom));
          padding-bottom: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
          overflow: visible;
          display: flex;
          flex-direction: column;
          transition: margin 0.25s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .drawer-card.drawer-tabbed-detail .message-card-body {
          background: var(--white);
          border-radius: 22px;
          box-shadow: 0 2px 12px rgba(35, 41, 67, 0.04);
          overflow: hidden;
          display: flex;
          flex-direction: column;
          flex: 1 1 auto;
          min-height: 0;
          transition: border-radius 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .drawer-card.drawer-tabbed-detail .message-stage {
          min-height: 0;
          border-top: 0;
          background: transparent;
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
        }

        .drawer-card.drawer-tabbed-detail .message-thread {
          gap: 10px;
          padding: 16px 16px 12px;
        }

        .drawer-card.drawer-tabbed-detail .message-avatar {
          width: 28px;
          height: 28px;
          flex-basis: 28px;
          color: var(--white);
          background: linear-gradient(135deg, #cdb89e, #8b6f4f);
          box-shadow: none;
          font-size: 10px;
        }

        .drawer-card.drawer-tabbed-detail .message-row-stack {
          max-width: 82%;
          gap: 6px;
        }

        .drawer-card.drawer-tabbed-detail .message-bubble {
          max-width: 100%;
          padding: 9px 13px;
          border-radius: 14px 14px 14px 4px;
          background: var(--chat-bg);
          box-shadow: none;
        }

        .drawer-card.drawer-tabbed-detail .message-bubble.own {
          border-radius: 14px 14px 4px 14px;
          background: var(--chat-bubble-own);
          box-shadow: none;
        }

        .drawer-card.drawer-tabbed-detail .message-bubble p {
          color: var(--navy);
          font-size: 17px;
          line-height: 1.45;
        }

        .drawer-card.drawer-tabbed-detail .message-author-name {
          display: flex;
          margin-bottom: 3px;
          font-size: 12.5px;
          line-height: 1.2;
        }

        .drawer-card.drawer-tabbed-detail .message-bubble-footer {
          margin-top: 4px;
          color: var(--muted);
          font-size: 11.5px;
        }

        .drawer-card.drawer-tabbed-detail .message-composer {
          padding: 12px 12px 14px;
          border-top: 1px solid #eef1f8;
          background: var(--white);
          box-shadow: none;
        }

        .drawer-card.drawer-tabbed-detail .message-composer-row {
          min-height: 40px;
          gap: 8px;
        }

        .drawer-card.drawer-tabbed-detail .message-attach {
          width: 40px;
          height: 40px;
          min-width: 40px;
          margin: 0;
          border-radius: 999px;
          background: var(--chat-bg);
          color: var(--blue);
          transform: none;
        }

        .drawer-card.drawer-tabbed-detail .message-attach svg {
          width: 18px;
          height: 18px;
        }

        .drawer-card.drawer-tabbed-detail .message-composer textarea {
          min-height: 40px;
          padding: 10px 14px;
          border-radius: 12px;
          background: var(--chat-bg);
          color: var(--navy);
          font-size: 16.5px;
        }

        .drawer-card.drawer-tabbed-detail .message-send {
          width: 40px;
          height: 40px;
          min-width: 40px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: var(--success-strong);
          text-indent: 0;
        }

        .drawer-card.drawer-tabbed-detail .message-send::after {
          content: none;
        }

        .drawer-card.drawer-tabbed-detail .message-send svg {
          width: 17px;
          height: 17px;
        }

        .drawer-card.drawer-tabbed-detail .message-expand-button {
          width: 40px;
          height: 40px;
          min-width: 40px;
          border-radius: 999px;
          background: var(--chat-bg);
          color: var(--blue);
        }

        .drawer-card.drawer-tabbed-detail .message-expand-button svg {
          width: 17px;
          height: 17px;
        }

        .drawer-card.drawer-tabbed-detail.mobile-messages-active:not(.drawer-messages-expanded) .drawer-head {
          padding-bottom: 16px;
        }

        .drawer-card.drawer-tabbed-detail.mobile-messages-active:not(.drawer-messages-expanded) .drawer-head-left > div {
          max-height: none;
          margin: 18px 0 0;
          opacity: 1;
          overflow: visible;
          transform: none;
        }

        .drawer-card.drawer-tabbed-detail.mobile-messages-active:not(.drawer-messages-expanded) #drawer-title {
          display: block !important;
          color: var(--navy);
          font-size: 24px;
          font-weight: 700;
          line-height: 1.12;
          overflow-wrap: anywhere;
        }

        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .drawer-messages-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding: 0 0 12px;
          border-bottom: 1px solid #eef1f8;
          background: transparent;
          margin-bottom: 12px;
        }

        .drawer-messages-head-main {
          min-width: 0;
          display: inline-flex;
          align-items: center;
          gap: 10px;
        }

        .drawer-messages-head-icon {
          width: 34px;
          height: 34px;
          border-radius: 999px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: var(--success-strong);
          background: rgba(45, 191, 85, 0.12);
        }

        .drawer-messages-head-icon svg {
          width: 18px;
          height: 18px;
        }

        .drawer-messages-head h3 {
          margin: 0;
          color: var(--navy);
          font-size: 17px;
          font-weight: 600;
          line-height: 1.25;
        }

        .drawer-messages-head-count {
          flex: 0 0 auto;
          color: var(--navy-soft);
          font-size: 12px;
          font-weight: 500;
          line-height: 1;
          white-space: nowrap;
        }

        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .drawer-view.messages-view.active {
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
          min-height: 0;
          margin-top: 22px;
          padding-bottom: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }

        .drawer-card.drawer-tabbed-detail.drawer-general-chat-detail:not(.drawer-messages-expanded) .drawer-view.messages-view.active {
          margin-top: 14px;
          margin-right: 14px;
          margin-bottom: calc(96px + env(safe-area-inset-bottom));
          margin-left: 14px;
        }

        .drawer-card.drawer-general-chat-detail .drawer-head-left {
          padding: 14px 16px !important;
        }

        .drawer-card.drawer-general-chat-detail .drawer-head-left > div {
          margin: 0 !important;
        }

        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-stage {
          flex: 1 1 auto;
          min-height: 0;
          height: auto;
          background: var(--white);
        }

        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-composer-wrap {
          flex: 0 0 auto;
          align-self: end;
          margin-top: 0;
        }

        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-composer {
          padding: 10px 12px 12px;
        }

        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-composer-row {
          display: grid;
          grid-template-columns: 34px minmax(0, 1fr) 40px 40px;
          gap: 8px;
        }

        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-input-pill {
          height: 40px;
          min-height: 40px;
          padding: 0 12px;
          border-radius: 12px;
          background: var(--chat-bg);
          align-items: center;
        }

        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-composer textarea {
          min-height: 20px;
          height: 20px;
          max-height: 20px;
          padding: 0;
          background: transparent;
          line-height: 20px;
        }

        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-expand-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 999px;
          background: #eef3fb;
          color: var(--blue);
          transition: background-color 0.2s ease, transform 0.1s ease;
        }

        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-expand-button:active {
          transform: scale(0.95);
          background: #dbe5f7;
        }

        .drawer-card.drawer-tabbed-detail:not(.drawer-messages-expanded) .message-expand-button svg {
          width: 18px;
          height: 18px;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded {
          background: var(--white);
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .drawer-head {
          flex: 0 0 auto;
          padding: max(14px, calc(env(safe-area-inset-top) + 8px)) 18px 14px;
          border-bottom: 1px solid rgba(126, 136, 164, 0.14);
          background: var(--white);
          box-shadow: none;
        }

        .drawer-card.drawer-messages-expanded .drawer-head-left {
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          justify-content: flex-start !important;
          min-height: 34px;
          padding: 6px 12px !important;
          border-radius: 13px !important;
          background: linear-gradient(135deg, var(--event-context-color, var(--blue, #2f66df)), #1a2035) !important;
          box-shadow: 0 4px 10px rgba(35, 41, 67, 0.06) !important;
          margin-top: 8px !important;
        }

        .drawer-card.drawer-messages-expanded .drawer-back {
          width: auto;
          max-width: min(48vw, 180px);
          min-width: 78px;
          height: 38px;
          padding: 0 14px;
          border-radius: 14px;
          gap: 7px;
          background: var(--white);
          box-shadow: 0 2px 10px rgba(35, 41, 67, 0.04);
          font-size: 14px;
          line-height: 1;
        }

        .drawer-card.drawer-messages-expanded .drawer-back .back-button-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex: 0 0 auto;
          font-size: 18px;
          line-height: 1;
        }

        .drawer-card.drawer-messages-expanded .drawer-back .back-button-label {
          display: inline;
        }

        .drawer-card.drawer-messages-expanded .drawer-head-left > div {
          order: 0 !important;
          flex: 1 1 auto !important;
          margin: 0 !important;
          padding: 0 !important;
          max-height: none !important;
          opacity: 1 !important;
          transform: none !important;
          text-align: left !important;
          min-width: 0 !important;
        }

        .drawer-card.drawer-messages-expanded .drawer-home-logo-button,
        .drawer-card.drawer-messages-expanded .drawer-home-logo-image,
        .drawer-card.drawer-messages-expanded #drawer-subtitle,
        .drawer-card.drawer-messages-expanded .drawer-head-title-trigger {
          display: none !important;
        }

        .drawer-card.drawer-messages-expanded #drawer-title {
          display: flex !important;
          align-items: center !important;
          justify-content: flex-start !important;
          color: var(--white, #ffffff) !important;
          font-size: 13px;
          font-weight: 700;
          line-height: 1.2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 0 !important;
          padding: 0 !important;
          text-align: left !important;
        }

        .drawer-card.drawer-messages-expanded.drawer-general-chat-detail #drawer-title {
          color: var(--text, #24263d) !important;
        }

        .drawer-card.drawer-messages-expanded #drawer-title::before {
          content: "";
          display: inline-block;
          flex: 0 0 auto;
          width: 7px;
          height: 7px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.78);
          box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
          margin-right: 9px;
        }

        .drawer-card.drawer-messages-expanded.drawer-general-chat-detail #drawer-title::before {
          background: rgba(47, 102, 223, 0.68);
          box-shadow: 0 0 0 3px rgba(47, 102, 223, 0.14);
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .drawer-view.messages-view.active {
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
          min-height: 0;
          margin: 0;
          padding-bottom: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-card-body {
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
          min-height: 0;
          height: 100%;
          border-radius: 0;
          box-shadow: none;
          background: var(--white);
          overflow: hidden;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .drawer-event-context-bar {
          display: none !important;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .drawer-messages-head {
          display: none;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-stage {
          flex: 1 1 auto;
          min-height: 0;
          height: auto;
          background: var(--white);
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-composer-wrap {
          flex: 0 0 auto;
          align-self: end;
          margin-top: 0;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-thread {
          gap: 12px;
          padding: 18px 18px 22px;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-avatar {
          width: 28px;
          height: 28px;
          flex-basis: 28px;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-bubble {
          padding: 10px 13px 8px;
          border-radius: 14px 14px 14px 4px;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-bubble.own {
          border-radius: 14px 14px 4px 14px;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-bubble p {
          font-size: 18px;
          line-height: 1.45;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-composer {
          padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
          border-top: 0;
          background: var(--white);
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-composer-row {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 42px 42px;
          gap: 10px;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-attach {
          display: none;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-input-pill {
          min-height: 44px;
          padding: 0 14px;
          border-radius: 13px;
          background: var(--chat-bg);
          align-items: center;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-composer textarea {
          min-height: 20px;
          height: 20px;
          max-height: 20px;
          padding: 0;
          background: transparent;
          font-size: 17.5px;
          line-height: 20px;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-send {
          width: 42px;
          height: 42px;
          min-width: 42px;
        }

        .drawer-card.drawer-tabbed-detail.drawer-messages-expanded #drawer-primary-footer {
          display: none !important;
        }

        .drawer-card.drawer-tabbed-detail.drawer-more-active #drawer-view-info {
          opacity: 0.35;
        }

        .drawer-more-scrim.active {
          position: absolute;
          inset: 0;
          z-index: 111;
          display: block !important;
          background: rgba(32, 34, 61, 0.3);
          pointer-events: auto;
        }

        .drawer-more-sheet.active {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 112;
          display: block !important;
          padding: 14px 22px calc(24px + env(safe-area-inset-bottom));
          border-radius: 28px 28px 0 0;
          background: var(--white);
          box-shadow: 0 -10px 30px rgba(35, 41, 67, 0.14);
        }

        .drawer-more-handle {
          width: 56px;
          height: 5px;
          margin: 0 auto 18px;
          border-radius: 999px;
          background: rgba(31, 36, 64, 0.22);
        }

        .drawer-more-title {
          margin: 0 0 16px;
          color: var(--navy);
          font-size: 16px;
          font-weight: 500;
          text-align: center;
        }

        .drawer-more-row {
          width: 100%;
          min-height: 68px;
          margin: 0 0 10px;
          padding: 14px;
          border: 0;
          border-radius: 16px;
          display: flex;
          align-items: center;
          gap: 14px;
          color: inherit;
          background: #f7f9fd;
          text-align: left;
          cursor: pointer;
        }

        .drawer-more-icon {
          width: 40px;
          height: 40px;
          border-radius: 12px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex: 0 0 40px;
        }

        .drawer-more-icon.blue {
          color: var(--blue);
          background: var(--chat-bg);
        }

        .drawer-more-icon.amber {
          color: #d97a2b;
          background: #fdf2e7;
        }

        .drawer-more-icon.purple {
          color: #6e4ad9;
          background: #efe7fd;
        }

        .drawer-more-icon.teal {
          color: #158c7f;
          background: #e4f7f4;
        }

        .drawer-more-icon svg {
          width: 22px;
          height: 22px;
        }

        .drawer-more-copy {
          min-width: 0;
          flex: 1 1 auto;
          display: grid;
          gap: 3px;
        }

        .drawer-more-copy strong {
          color: var(--navy);
          font-size: 14px;
          font-weight: 500;
        }

        .drawer-more-copy span {
          color: var(--muted);
          font-size: 12px;
          line-height: 1.25;
        }

        .drawer-more-action {
          color: var(--blue);
          font-size: 23px;
          font-weight: 400;
          line-height: 1;
        }

        .drawer-more-cancel {
          width: 100%;
          min-height: 44px;
          border: 0;
          background: transparent;
          color: var(--muted);
          font-size: 14px;
          font-weight: 400;
          cursor: pointer;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head {
          gap: 8px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-detail-top-actions {
          order: 0;
        }

        .drawer-card.drawer-tabbed-detail .drawer-event-context-bar {
          order: 1;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head-left {
          order: 2;
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 8px;
          width: 100%;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head-left > div {
          order: 1;
          flex: 0 0 auto;
          margin: 0;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tabs {
          position: relative;
          left: auto;
          right: auto;
          bottom: auto;
          z-index: 2;
          order: 0;
          width: 100%;
          margin: 0;
          padding: 0;
          pointer-events: auto;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tabs::before {
          display: none;
        }

        .drawer-card.drawer-tabbed-detail .drawer-detail-tab-progress {
          height: 10px;
          margin: 0 auto 5px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-detail-tab-dot {
          width: 4px;
          height: 4px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-detail-tab-dot.active {
          width: 18px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tabs-inner {
          width: 100%;
          padding: 6px 5px;
          border-radius: 18px;
          box-shadow:
            inset 0 0 0 1px rgba(126, 136, 164, 0.08),
            0 8px 22px rgba(35, 41, 67, 0.06);
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab {
          min-height: 42px;
          height: 42px;
          border-radius: 12px;
          font-size: 9.5px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab-icon {
          width: 20px;
          height: 20px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab.active::after {
          bottom: -6px;
          width: 16px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-view {
          padding-bottom: calc(114px + env(safe-area-inset-bottom));
        }

        .drawer-primary-tabs-shell {
          z-index: 113;
        }

        .drawer-primary-tabs-shell::before {
          background: linear-gradient(180deg, rgba(231, 236, 246, 0) 0%, rgba(231, 236, 246, 0.96) 32%, rgba(231, 236, 246, 0.99) 100%);
        }

        .drawer-primary-tabs-shell .drawer-primary-tabs {
          pointer-events: auto;
        }

        .drawer-primary-tabs-shell .event-tab-progress {
          margin-bottom: 8px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head {
          gap: 10px;
          padding: max(16px, calc(env(safe-area-inset-top) + 8px)) 18px 0;
          background: var(--page);
        }

        .drawer-card.drawer-tabbed-detail .drawer-detail-top-actions {
          margin-bottom: 12px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-back {
          max-width: min(48vw, 180px);
          min-width: 78px;
          height: 38px;
          padding: 0 14px;
          border-radius: 14px;
          background: var(--white);
          color: var(--navy);
          font-size: 14px;
          font-weight: 400;
          box-shadow: 0 2px 10px rgba(35, 41, 67, 0.04);
        }

        .drawer-card.drawer-tabbed-detail .drawer-notifications-trigger {
          width: 38px;
          height: 38px;
          border-radius: 14px;
          background: var(--white);
          color: var(--navy);
          box-shadow: 0 2px 10px rgba(35, 41, 67, 0.04);
        }

        .drawer-card.drawer-tabbed-detail .drawer-event-context-bar {
          min-height: 32px;
          padding: 7px 12px;
          border-radius: 13px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-event-context-bar .event-context-bar-title {
          font-size: 13px;
          font-weight: 700;
          line-height: 1.15;
        }

        .drawer-card.drawer-tabbed-detail .drawer-event-context-bar .event-context-bar-dot {
          width: 7px;
          height: 7px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head-left {
          margin-top: 6px;
          padding: 16px 16px 4px;
          border-radius: 24px;
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 10px;
          background: rgba(255, 255, 255, 0.96);
          box-shadow: 0 18px 38px rgba(35, 41, 67, 0.08);
        }

        .drawer-card.drawer-tabbed-detail .drawer-head-left > div {
          order: 0;
          flex: 0 0 auto;
          margin: 0;
          padding: 0 26px 0;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head h2,
        .drawer-card.drawer-tabbed-detail .drawer-head-title-trigger {
          font-size: 19px;
          font-weight: 600;
          line-height: 1.25;
        }

        .drawer-card.drawer-tabbed-detail .drawer-head-title-trigger {
          grid-template-columns: minmax(0, 1fr) 30px;
          gap: 8px;
          align-items: center;
        }

        .drawer-card.drawer-tabbed-detail .detail-inline-edit-icon {
          width: 30px;
          height: 30px;
          margin-top: 0;
          border-radius: 999px;
        }

        .drawer-card.drawer-tabbed-detail .detail-inline-edit-icon svg {
          width: 15px;
          height: 15px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tabs {
          order: 1;
          width: 100%;
        }

        .drawer-card.drawer-tabbed-detail .drawer-detail-tab-progress {
          display: none;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tabs-inner {
          padding: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab {
          min-height: 50px;
          height: 50px;
          padding: 4px 2px 6px;
          border-radius: 12px;
          gap: 3px;
          color: var(--muted);
          font-size: 10.5px;
          font-weight: 500;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab.active {
          color: var(--navy);
          background: transparent;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab.active .drawer-tab-label {
          font-weight: 700;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab-icon {
          width: 18px;
          height: 18px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab.active::after {
          bottom: 1px;
          width: 20px;
          height: 3px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab-badge {
          top: 3px;
          right: 18%;
        }

        .drawer-card.drawer-tabbed-detail #drawer-view-info.active {
          padding-top: 22px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-view {
          padding-bottom: calc(136px + env(safe-area-inset-bottom));
        }

        .drawer-card.drawer-tabbed-detail .detail-summary {
          height: 0;
          min-height: 0;
          padding: 0 18px;
          overflow: visible;
        }

        .drawer-card.drawer-tabbed-detail .detail-summary > :not(.detail-inline-popup) {
          display: none !important;
        }

        .drawer-card.drawer-tabbed-detail .detail-inline-popup {
          position: fixed;
          z-index: 10000;
          margin: 0;
        }

        .drawer-card.drawer-tabbed-detail .detail-section {
          padding: 0 18px 18px;
        }

        .drawer-card.drawer-tabbed-detail .detail-card,
        .drawer-card.drawer-tabbed-detail .detail-card.soft,
        .drawer-card.drawer-tabbed-detail .detail-expense-card,
        .drawer-card.drawer-tabbed-detail #drawer-attachments {
          border-radius: 24px;
          box-shadow: 0 12px 28px rgba(35, 41, 67, 0.055);
        }
      }

      @media (max-width: 380px) {
        .drawer-card.drawer-tabbed-detail .drawer-tab {
          font-size: 9px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tab-icon {
          width: 20px;
          height: 20px;
        }

        .drawer-card.drawer-tabbed-detail .drawer-tabs-inner {
          padding-left: 4px;
          padding-right: 4px;
        }
      }

      @media (min-width: 1100px) {
        .drawer-card.desktop-split .detail-main-title-summary {
          max-width: 100%;
          flex: 1 1 auto;
        }

        .drawer-card.desktop-split .detail-main-title-button-text {
          min-width: 0;
          white-space: normal;
          overflow-wrap: anywhere;
        }

        .drawer-card.desktop-split {
          background: var(--page);
        }

        .drawer-card.desktop-split #drawer-view-info.active,
        .drawer-card.desktop-split #drawer-view-messages.active {
          background: var(--page);
        }

        .drawer-card.desktop-split .detail-card,
        .drawer-card.desktop-split .detail-card.soft {
          border-radius: 22px;
          background: var(--white);
          box-shadow: 0 2px 12px rgba(35, 41, 67, 0.04);
        }

        .drawer-card.desktop-split .message-send {
          text-indent: 0;
        }

        .drawer-card.desktop-split .message-send::after {
          content: none;
        }

        .drawer-card.desktop-split .message-send svg {
          width: 18px;
          height: 18px;
        }
      }

/* Event Home Redesign Cards */
.card {
  background: var(--white);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(35, 41, 67, 0.08);
}
.card.task-card,
.card.supply-card {
  padding: 0;
  margin-bottom: 0;
}
.overview-home-clickable-card {
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}
.overview-home-clickable-card:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 28px rgba(35, 41, 67, 0.11);
  transform: translateY(-1px);
}
.overview-home-clickable-card:active {
  box-shadow: 0 7px 20px rgba(35, 41, 67, 0.09);
  transform: translateY(0);
}
.overview-home-clickable-card:focus-visible {
  outline: 2px solid rgba(47, 102, 223, 0.32);
  outline-offset: 3px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.card-title .ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(47,102,223,0.1);
  border-radius: 7px;
  color: var(--blue);
  font-size: 12px;
}
.card-title .ico svg {
  width: 17px;
  height: 17px;
  display: block;
}
.card-action {
  font-size: 11px;
  color: var(--blue);
  font-weight: 500;
}
.card-body {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
}
.card-body p { margin: 0 0 6px; }
.card-body p:last-child { margin: 0; }

/* Activity card content */
.overview-activity-card .card-body {
  padding: 12px 0 0;
}

.overview-activity-card .card-title .ico {
  background: rgba(43, 181, 76, 0.1);
  color: var(--success-strong);
}

.overview-activity-scroll {
  min-width: 0;
  overflow-x: hidden;
}

.overview-activity-scroll.is-scrollable {
  max-height: var(--activity-scroll-max-height, 306px);
  overflow-y: auto;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
}

@media (max-width: 1099px) {
  .overview-activity-scroll.is-scrollable {
    max-height: none !important;
    overflow-y: visible !important;
  }
  .overview-activity-scroll .activity-row:nth-child(n+4) {
    display: none !important;
  }
}

.activity-empty {
  color: var(--muted);
  font-size: 14px;
}

.activity-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  min-width: 0;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.activity-row:first-child { border-top: none; padding-top: 5px; }
.activity-row-clickable {
  cursor: pointer;
  border-radius: 13px;
  transition: background 0.15s;
}
.activity-row-clickable:hover,
.activity-row-clickable:focus-visible {
  background: rgba(47, 102, 223, 0.06);
  outline: none;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: -6px;
  margin-right: -6px;
}
@keyframes message-highlight-flash {
  0% { background: rgba(47, 102, 223, 0.18); border-radius: 12px; }
  100% { background: transparent; border-radius: 12px; }
}
.message-row--highlight {
  animation: message-highlight-flash 1.4s ease-out forwards;
}
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b8c8e8 0%, #8aa0cf 100%);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
}
.avatar.b { background: linear-gradient(135deg, #e8c5b8 0%, #d49b8a 100%); }
.avatar.c { background: linear-gradient(135deg, #c5d8b8 0%, #9bc28a 100%); }
.avatar.d { background: linear-gradient(135deg, #d8b8e0 0%, #b58acf 100%); }
.avatar.e { background: linear-gradient(135deg, #f0d59b 0%, #d6b25e 100%); }
      .avatar.f { background: linear-gradient(135deg, #b8e0d8 0%, #8acfbf 100%); }

      .activity-avatar-image,
      .activity-avatar-placeholder,
      .participant-stack-avatar-placeholder {
        position: relative;
        padding: 0;
        color: var(--navy-soft);
        background: transparent;
        overflow: hidden;
      }

      .activity-avatar-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .activity-avatar-image .profile-photo-placeholder-initial,
      .activity-avatar-placeholder .profile-photo-placeholder-initial {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 9px;
      }

      .activity-notification-avatar {
        padding: 8px;
        color: var(--success-strong);
        background: rgba(43, 181, 76, 0.1);
        border: 1px solid rgba(43, 181, 76, 0.12);
      }

      .activity-notification-avatar svg {
        width: 18px;
        height: 18px;
        display: block;
      }

      .activity-text {
        flex: 1;
        min-width: 0;
        font-size: 15px;
  line-height: 1.35;
  color: var(--text);
}
.activity-row .avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
}
.activity-title {
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 15.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-text .name {
  font-weight: 600;
  color: var(--navy);
}

.activity-row-notification .activity-title {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.activity-row-notification.unread .activity-title::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--blue);
  vertical-align: 1px;
}
.activity-text .preview {
  color: var(--muted);
  display: -webkit-box;
  overflow: hidden;
  font-size: 16.5px;
  line-height: 1.4;
  margin-top: 4px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.activity-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 4px;
}
.activity-summary {
  font-size: 11.5px;
  color: var(--muted);
  padding: 8px 0 2px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

/* Voor jou card */
.overview-personal-card .card-header {
  margin-bottom: 9px;
}

.overview-personal-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.overview-personal-pill {
  min-width: 0;
  min-height: 58px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--navy);
  background: var(--white);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
}

.overview-personal-pill:hover,
.overview-personal-pill:focus-visible {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(47, 102, 223, 0.22);
  box-shadow: 0 8px 16px rgba(31, 35, 63, 0.05);
  outline: none;
}

.overview-personal-pill-value,
.overview-personal-pill-label {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-personal-pill-value {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
}

.overview-personal-pill-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.overview-personal-pill.tasks {
  background: rgba(47, 102, 223, 0.1);
  border-color: rgba(47, 102, 223, 0.2);
}

.overview-personal-pill.items {
  background: rgba(77, 171, 138, 0.13);
  border-color: rgba(77, 171, 138, 0.24);
}

.overview-personal-pill.costs {
  background: rgba(240, 213, 155, 0.25);
  border-color: rgba(214, 178, 94, 0.35);
}

.overview-personal-pill.tasks .overview-personal-pill-value {
  color: var(--blue);
}

.overview-personal-pill.items .overview-personal-pill-value {
  color: #2f8a64;
}

.overview-personal-pill.costs .overview-personal-pill-value {
  color: #9a7420;
}

/* Participant strip */
.participants-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.participants-stack {
  display: flex;
  align-items: center;
  isolation: isolate;
}
.participants-stack .avatar {
  width: 38px;
  height: 38px;
  margin-left: -10px;
  border: 2.5px solid var(--white);
  position: relative;
}
      .participants-stack .participant-stack-avatar {
        position: relative;
        overflow: hidden;
        padding: 0;
      }

      .participants-stack .participant-stack-avatar-placeholder .profile-photo-placeholder-initial {
        min-width: 17px;
        height: 17px;
        font-size: 9px;
      }

      .participants-stack .participant-stack-avatar img {
        width: 100%;
        height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.participants-stack .participant-stack-avatar-fallback {
  width: 100%;
  height: 100%;
  line-height: 33px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}
.participants-stack .avatar:first-child { margin-left: 0; }
.participants-stack .more {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(125,141,181,0.18);
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid var(--white);
  margin-left: -10px;
  position: relative;
  z-index: 0;
      }

.overview-participants-add {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #27b95f;
  background: rgba(237, 250, 242, 0.96);
  box-shadow:
    inset 0 0 0 1.5px rgba(39, 185, 95, 0.25),
    0 8px 18px rgba(31, 35, 63, 0.05);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.overview-participants-add:hover,
.overview-participants-add:focus-visible {
  background: rgba(229, 248, 236, 0.98);
  outline: none;
}
.strip-count {
  font-size: 12px;
  color: var(--navy);
  font-weight: 500;
}
.strip-link {
  font-size: 11px;
  color: var(--blue);
  font-weight: 500;
}

/* Beheer strip */
.beheer-strip {
  background: var(--white);
  border-radius: 18px;
  padding: 10px 8px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  box-shadow: 0 8px 24px rgba(35, 41, 67, 0.08);
}
.beheer-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  font-size: 10.5px;
  color: var(--navy);
  text-align: center;
  line-height: 1.2;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.beheer-icon {
  width: 28px;
  height: 28px;
  background: rgba(47,102,223,0.1);
  color: var(--blue);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}
.beheer-icon svg {
  width: 16px;
  height: 16px;
}

/* Attendance widget */
.attendance-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.day-pill {
  border: 1.5px solid var(--line);
  background: var(--white);
  border-radius: 12px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  color: var(--navy);
  font-family: inherit;
  cursor: pointer;
}
.day-pill .day-label { font-weight: 600; }
.day-pill .day-state {
  font-size: 10px;
  color: var(--muted);
}
.day-pill.yes {
  background: rgba(155,229,170,0.25);
  border-color: rgba(43,181,76,0.35);
}
.day-pill.yes .day-state { color: var(--success-strong); font-weight: 600; }
.day-pill.maybe {
  background: rgba(240,213,155,0.25);
  border-color: rgba(214,178,94,0.35);
}
.day-pill.maybe .day-state { color: #b88a2e; font-weight: 600; }
.day-pill.no {
  background: rgba(243,176,171,0.25);
  border-color: rgba(255,111,97,0.35);
}
.day-pill.no .day-state { color: var(--danger-strong); font-weight: 600; }

.overview-personal-stack {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.overview-personal-tabs-shell {
  z-index: 105;
}

.overview-event-tabs-shell {
  z-index: 105;
}

.overview-event-current-tab {
  display: none;
}

/*
.overview-event-desktop-shell > .event-subscreen-header > .event-topbar {
  display: none;
}
*/

.overview-personal-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.overview-personal-tabs .tab {
  height: 50px;
}

@media (min-width: 1100px) {
  .event-subscreen-header,
  .overview-expense-tools,
  .overview-personal-stack {
    width: min(100%, 980px);
    margin-left: auto;
    margin-right: auto;
  }

  .overview-personal-stack {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  .overview-event-stack {
    padding-bottom: 0;
  }

  .overview-personal-tabs-shell {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: min(420px, calc(100vw - 48px));
    z-index: 105;
    margin: 0;
    pointer-events: none;
    transform: translateX(-50%);
  }

  .overview-event-desktop-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header header"
      "sidebar main-content";
    gap: 16px 28px;
    align-items: start;
    width: 100%;
  }

  .overview-event-desktop-shell .event-subscreen-header {
    grid-area: header !important;
    display: flex !important;
    flex-direction: column !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-top: max(28px, env(safe-area-inset-top)) !important;
    padding-bottom: 8px !important;
    margin-top: calc(-1 * max(28px, env(safe-area-inset-top))) !important;
    margin-left: calc(-1 * max(30px, env(safe-area-inset-left))) !important;
    margin-right: calc(-1 * max(30px, env(safe-area-inset-right))) !important;
    padding-left: max(30px, env(safe-area-inset-left)) !important;
    padding-right: max(30px, env(safe-area-inset-right)) !important;
  }

  .overview-event-desktop-shell > .event-subscreen-header > .event-topbar {
    display: flex;
    position: static !important;
    margin-bottom: 12px !important;
  }

  .overview-event-desktop-shell .event-context-bar {
    width: 100%;
    max-width: 1428px;
    margin: 0;
    box-sizing: border-box;
  }

  .overview-event-desktop-shell .event-screen-meta-row {
    display: none;
  }

  .overview-event-desktop-shell > .overview-event-stack {
    grid-area: main-content;
    width: min(100%, 1120px);
  }

  .overview-event-tabs-shell {
    display: block;
    grid-area: sidebar;
    position: sticky;
    top: 176px !important;
    z-index: 99;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 0;
    pointer-events: auto;
    transform: none;
  }

  .overview-personal-tabs-shell::before {
    display: block;
  }

  .overview-event-tabs-shell::before {
    display: block;
  }

  .overview-personal-tabs-shell .overview-personal-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    width: 100%;
    max-height: none;
    padding: 10px 6px;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 -2px 10px rgba(35, 41, 67, 0.04), 0 14px 34px rgba(35, 41, 67, 0.12);
    pointer-events: auto;
  }

  .overview-event-tabs-shell .overview-event-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-x: visible;
    overflow-y: auto;
    width: 100%;
    max-height: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
  }

  .overview-personal-tabs-shell .tab {
    height: 50px;
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 3px 2px 0;
    border-radius: 12px;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    font-size: 10px;
    font-weight: 400;
  }

  .overview-event-tabs-shell .tab {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 16px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
    font-size: 15px;
    font-weight: 500;
  }

  .overview-personal-tabs-shell .tab-label {
    justify-content: center;
    text-align: center;
  }

  .overview-event-tabs-shell .tab-label {
    justify-content: flex-start;
    text-align: left;
    font-weight: 500;
  }

  .overview-personal-tabs-shell .tab.active {
    color: var(--navy);
    background: transparent;
  }

  .overview-event-tabs-shell .overview-event-home-tab.active {
    color: var(--navy);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
    font-weight: 500;
  }

  .overview-event-tabs-shell .overview-event-current-tab {
    display: flex;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(125, 137, 168, 0.16), 0 8px 20px -16px rgba(31, 35, 63, 0.28);
    font-weight: 600;
  }

  .overview-personal-tabs-shell .tab.active::after {
    display: block;
  }

  .overview-event-tabs-shell .tab.active::after {
    display: none;
  }
}

.plus,
.detail-action-plus,
.home-folder-add {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  font-size: 0 !important;
  line-height: 1;
}

.detail-action-plus {
  width: 20px;
  height: 20px;
}

.plus::before,
.plus::after,
.detail-action-plus::before,
.detail-action-plus::after,
.home-folder-add::before,
.home-folder-add::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.plus::before,
.detail-action-plus::before,
.home-folder-add::before {
  width: 52%;
  height: 2px;
}

.plus::after,
.detail-action-plus::after,
.home-folder-add::after {
  width: 2px;
  height: 52%;
}

.list-tools-toggle-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  order: 2;
}

.list-toggle-chip {
  border: 1px solid rgba(234, 238, 247, 0.8);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(251, 252, 255, 0.94);
  color: var(--navy-soft, #5b6e92);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 150ms ease;
  height: 38px;
  box-sizing: border-box;
}

.list-toggle-chip.active {
  background: var(--navy, #20223d);
  border-color: var(--navy, #20223d);
  color: var(--white, #fff);
  box-shadow: 0 4px 10px rgba(32, 34, 61, 0.2);
}

.list-toggle-chip:hover {
  background: rgba(234, 238, 247, 0.4);
}
.list-toggle-chip.active:hover {
  background: var(--navy, #20223d);
}

.list-toggle-chip .toggle-icon {
  font-weight: bold;
}

.pdf-download-btn {
  border: 1px solid rgba(234, 238, 247, 0.8);
  background: rgba(251, 252, 255, 0.94);
  color: var(--navy-soft, #5b6e92);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
  padding: 0;
  box-sizing: border-box;
}

.pdf-download-btn:hover {
  background: rgba(234, 238, 247, 0.4);
}

.pdf-download-btn svg.download-icon {
  width: 18px;
  height: 18px;
}

.pdf-download-btn.loading {
  cursor: not-allowed;
  opacity: 0.7;
}

.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--navy-soft, #5b6e92);
  border-radius: 50%;
  animation: spin-small-anim 0.8s linear infinite;
  display: inline-block;
}

.event-settings-save-button[disabled] {
  background: #8d8c9d;
  opacity: 1;
}

.event-settings-save-spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
}

@keyframes spin-small-anim {
  to { transform: rotate(360deg); }
}

@media (min-width: 1100px) {
  .list-tools-toggle-container {
    margin-right: auto;
  }
}

@media (max-width: 1099px) {
  .list-tools {
    flex-wrap: wrap;
  }
  .list-tools-main {
    order: 3;
  }
  .list-tools-main.search-open {
    flex: 1 1 100%;
    width: 100%;
  }
  .list-tools-main.search-open ~ .list-tools-toggle-container {
    display: none;
  }
}

.overview-download-copy {
  flex-grow: 1 !important;
}
.overview-download-actions {
  margin-left: auto !important;
}

/* New Notification Highlight Styling */
@keyframes notification-new-highlight {
  0% {
    transform: scale(1);
    background: rgba(251, 252, 255, 0.92);
    box-shadow: 0 10px 24px rgba(31, 35, 63, 0.045), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  }
  15% {
    transform: scale(1.025);
    background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
    box-shadow: 0 14px 32px rgba(47, 102, 223, 0.14), inset 0 0 0 1.5px rgba(47, 102, 223, 0.72);
  }
  35% {
    transform: scale(1.025);
    background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
    box-shadow: 0 14px 32px rgba(47, 102, 223, 0.14), inset 0 0 0 1.5px rgba(47, 102, 223, 0.72);
  }
  100% {
    transform: scale(1);
    background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
    box-shadow: 0 12px 28px rgba(47, 102, 223, 0.08), inset 0 0 0 1.5px rgba(47, 102, 223, 0.72);
  }
}

.communication-notification-list .chat-thread-card.new-highlight {
  background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%) !important;
  box-shadow: 0 12px 28px rgba(47, 102, 223, 0.08), inset 0 0 0 1.5px rgba(47, 102, 223, 0.72) !important;
  animation: notification-new-highlight 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Keep mobile task/item detail headers aligned with the event screen header. */
@media (max-width: 1099px) {
  .drawer-card.drawer-tabbed-detail.drawer-detail-task .drawer-head,
  .drawer-card.drawer-tabbed-detail.drawer-detail-supply .drawer-head {
    padding-top: max(0px, calc(18px - env(safe-area-inset-top)));
  }

  .drawer-card.drawer-tabbed-detail.drawer-detail-task .drawer-detail-top-actions,
  .drawer-card.drawer-tabbed-detail.drawer-detail-supply .drawer-detail-top-actions {
    margin-bottom: 2px;
  }
}

/* Laptop/desktop project bar adjustments */
@media (min-width: 1100px) {
  .event-screen {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "header header"
      "sidebar main-content" !important;
    gap: 16px 28px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .event-screen-nav {
    display: contents !important;
  }

  .event-header-panel {
    grid-area: header !important;
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .event-header-panel,
  .overview-event-desktop-shell .event-subscreen-header {
    isolation: isolate !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-bottom: 16px !important;
  }

  .event-header-panel::before,
  .overview-event-desktop-shell .event-subscreen-header::before {
    content: none !important;
  }

  .event-topbar {
    position: static !important;
    margin-bottom: 12px !important;
    width: min(100%, 1428px) !important;
  }

  .event-context-bar {
    width: 100% !important;
    max-width: 1428px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    padding: 9px 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background:
      linear-gradient(135deg, var(--event-context-color, #2f66df), #1f2749) !important;
    box-shadow:
      0 12px 30px rgba(31, 36, 64, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.17) !important;
  }

  .event-context-bar-title {
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .event-context-bar-dot {
    width: 8px !important;
    height: 8px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14) !important;
  }

  .event-context-overview-btn {
    min-height: 32px !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  }

  .event-context-overview-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
  }

  .event-screen[data-event-tab-layout="tasks"] .event-context-bar,
  .event-screen[data-event-tab-layout="supplies"] .event-context-bar {
    max-width: 1288px !important;
  }

  .tabs-shell {
    grid-area: sidebar !important;
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  .event-screen[data-event-tab-layout="overview"] .tabs-shell {
    top: auto !important;
  }

  .event-screen-main {
    grid-area: main-content !important;
  }

  .event-screen.event-notifications-inline-screen .event-header-panel {
    z-index: auto !important;
    background: transparent !important;
    padding-bottom: 8px !important;
  }

  .event-screen.event-notifications-inline-screen .event-context-bar {
    display: flex !important;
    position: relative !important;
  }
}

/* Event context overview button */
.event-context-overview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
}

.event-context-overview-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.event-context-overview-btn:active {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(1px);
}

.event-context-overview-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* On extremely small devices, hide text to keep layout clean */
@media (max-width: 360px) {
  .event-context-overview-btn {
    padding: 6px 8px;
  }
  .event-context-overview-btn-text {
    display: none;
  }
}

/* General Chat mobile top header alignment fix */
@media (max-width: 1099px) {
  .drawer:has(.drawer-general-chat-detail) {
    padding-top: 0 !important;
  }

  .drawer-card.drawer-general-chat-detail .drawer-head {
    padding-top: max(18px, env(safe-area-inset-top)) !important;
    padding-right: 18px !important;
    padding-bottom: 0 !important;
    padding-left: 18px !important;
    gap: 12px !important;
    background: var(--page) !important;
    overflow: visible !important;
  }

  .drawer-card.drawer-general-chat-detail .drawer-detail-top-actions {
    margin-bottom: 0 !important;
    order: 0 !important;
    overflow: visible !important;
  }

  .drawer-card.drawer-general-chat-detail .drawer-back,
  .drawer-card.drawer-general-chat-detail .drawer-notifications-trigger {
    background: rgba(251, 252, 255, 0.9) !important;
    box-shadow: 0 8px 18px rgba(35, 41, 67, 0.06) !important;
    border-radius: 14px !important;
    font-weight: 500 !important;
    overflow: visible !important;
  }

  .drawer-card.drawer-general-chat-detail .drawer-event-context-bar {
    order: 1 !important;
    margin: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 7px 12px !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 18px rgba(31, 36, 64, 0.08) !important;
  }

  .drawer-card.drawer-general-chat-detail .drawer-head-left {
    order: 2 !important;
    margin-top: 6px !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 18px 38px rgba(35, 41, 67, 0.08) !important;
    border-radius: 24px !important;
  }

  .drawer-card.drawer-general-chat-detail .drawer-head-left > div {
    padding: 0 !important;
    margin: 0 !important;
  }
}

#drawer-people-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

#drawer-people-subtitle[data-status="incomplete"] {
  color: var(--danger-strong);
}

#drawer-people-subtitle[data-status="complete"] {
  color: var(--success-strong);
  font-size: 12px;
  gap: 5px;
}

#drawer-people-subtitle[data-status="complete"]::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 999px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 12.5 3.8 3.8L18.5 7.7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 12.5 3.8 3.8L18.5 7.7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.drawer-messages-head-icon {
  display: none !important;
}

@media (max-width: 480px) {
  .home-signed-out-auth-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .home-signed-out-signup,
  .home-signed-out-login-link {
    width: 100% !important;
    flex: none !important;
  }
}

.chat-overview-composer.message-composer,
.drawer-card.desktop-split #drawer-view-messages .message-composer {
  border-top: 1px solid rgba(211, 218, 232, 0.9);
  background: rgba(255, 255, 255, 0.9);
}

.chat-overview-composer .message-composer-row,
.drawer-card.desktop-split #drawer-view-messages .message-composer-row {
  min-height: 54px;
  align-items: center;
}

.chat-overview-composer .message-input-pill,
.drawer-card.desktop-split #drawer-view-messages .message-input-pill {
  min-height: 46px;
  border-radius: 18px;
  background: rgba(238, 243, 251, 0.96);
  box-shadow: inset 0 0 0 1px rgba(198, 207, 224, 0.45);
}

.chat-overview-composer #chat-overview-message-input,
.drawer-card.desktop-split #drawer-view-messages .message-composer textarea {
  min-height: 24px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 18px;
  line-height: 1.25;
}

.chat-overview-composer #chat-overview-message-attach-button,
.chat-overview-composer .message-send,
.chat-overview-composer .message-expand-button,
.drawer-card.desktop-split #drawer-view-messages .message-attach,
.drawer-card.desktop-split #drawer-view-messages .message-send,
.drawer-card.desktop-split #drawer-view-messages .message-expand-button {
  align-self: center;
}

/* In-app fallback toast notifications */
#in-app-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  width: calc(100% - 32px);
  pointer-events: none;
}

.in-app-toast-item {
  background: rgba(251, 252, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line, #dde3f0);
  border-left: 4px solid var(--blue, #2f66df);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(35, 41, 67, 0.12);
  padding: 12px 16px;
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
  animation: toast-slide-in 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes toast-slide-in {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.in-app-toast-item.fade-out {
  transform: translateX(50px);
  opacity: 0;
  pointer-events: none;
}

.in-app-toast-title {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy, #20223d);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.in-app-toast-text {
  font-family: inherit;
  font-size: 12px;
  color: var(--navy-soft, #646c87);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Custom Modal style override for detail-expense-composer */
.detail-expense-composer {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 18px calc(18px + var(--keyboard-offset)) !important;
  background: rgba(20, 24, 40, 0.38) !important;
  z-index: 10000 !important;
  border: none !important;
  border-radius: 0 !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  animation: expense-backdrop-fade-in 0.25s ease-out forwards;
}

.detail-expense-composer.hidden {
  display: none !important;
}

.detail-expense-composer.modal-leaving {
  animation: expense-backdrop-fade-out 0.25s ease-in forwards !important;
}

.detail-expense-modal-card {
  position: relative;
  width: 100%;
  max-width: 450px;
  max-height: calc(var(--app-viewport-height) - var(--keyboard-offset) - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 22px 46px rgba(21, 24, 43, 0.24);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: expense-modal-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.detail-expense-modal-card.modal-leaving {
  animation: expense-modal-slide-down 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes expense-backdrop-fade-in {
  from {
    background: rgba(20, 24, 40, 0) !important;
  }
  to {
    background: rgba(20, 24, 40, 0.38) !important;
  }
}

@keyframes expense-backdrop-fade-out {
  from {
    background: rgba(20, 24, 40, 0.38) !important;
  }
  to {
    background: rgba(20, 24, 40, 0) !important;
  }
}

@keyframes expense-modal-slide-up {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes expense-modal-slide-down {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(30px);
    opacity: 0;
  }
}

.detail-expense-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(32, 34, 61, 0.08);
  padding-bottom: 12px;
}

.detail-expense-modal-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

.detail-expense-modal-close {
  background: transparent;
  border: none;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--navy-soft);
  cursor: pointer;
  padding: 0;
  margin: -6px -6px 0 0;
  transition: color 0.2s ease;
}

.detail-expense-modal-close:hover {
  color: var(--danger-strong, #ff6f61);
}

.detail-expense-modal-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-expense-modal-fields .detail-expense-label {
  display: block;
  margin-bottom: 6px;
  color: var(--navy-soft);
  font-weight: 600;
  font-size: 12px;
}

.detail-expense-modal-fields .detail-expense-input {
  box-shadow: inset 0 0 0 1px rgba(32, 34, 61, 0.12);
  background: #ffffff;
  transition: box-shadow 0.2s ease;
}

.detail-expense-modal-fields .detail-expense-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--blue);
}

.detail-expense-modal-fields .detail-expense-save {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  margin-top: 8px;
}

@media (min-width: 480px) {
  .detail-expense-composer {
    align-items: center !important;
    padding: 24px !important;
  }
}

/* Recovery polish: keep dense collaboration UI readable across widths. */
.event-card-main {
  box-sizing: border-box;
  padding-right: 48px;
}

.event-card-title-row {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 7px;
}

.event-card-title-row h3 {
  flex: 1 1 min(100%, 360px);
  min-width: min(100%, 220px);
  max-width: 100%;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.event-card-message-indicator {
  width: 36px;
  height: 36px;
  border-radius: 13px;
}

.event-role-badge {
  max-width: 100%;
  white-space: nowrap;
}

.chat-overview-message-stage .message-bubble,
.chat-overview-message-stage .message-bubble.own {
  max-width: min(560px, calc(100% - 54px), 76%);
}

.chat-overview-message-stage .message-bubble p,
.drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-bubble p,
.drawer-card.drawer-tabbed-detail .message-bubble p {
  font-size: 16px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.chat-overview-message-stage .message-author-name {
  font-size: 12.5px;
}

.chat-overview-composer .message-composer-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
}

.chat-overview-composer #chat-overview-message-attach-button,
.chat-overview-composer .message-send {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

.chat-overview-composer #chat-overview-message-input {
  min-height: 44px;
  max-height: 96px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(238, 243, 251, 0.96);
  font-size: 16px;
  line-height: 1.35;
  white-space: normal;
}

@media (max-width: 720px) {
  .list-tools-actions {
    width: min(232px, calc(100vw - 36px));
    min-width: 0;
    padding: 8px;
    gap: 3px;
    border-radius: 18px;
  }

  .list-tool-button.list-tool-menu-button {
    min-height: 44px;
    padding: 6px 10px 6px 7px;
    gap: 10px;
    border-radius: 13px;
  }

  .list-tool-button.list-tool-menu-button svg {
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 11px;
  }

  .list-tool-button-label {
    font-size: 13px;
    line-height: 1.15;
  }

  .event-card {
    padding: 16px 18px 16px 20px;
  }

  .event-card-main {
    padding-right: 42px;
  }

  .event-card-menu-wrap {
    top: 12px;
    right: 12px;
  }

  .event-card-title-row h3 {
    flex-basis: 100%;
    min-width: 0;
    font-size: 18px;
  }

  .event-card-message-indicator {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .event-role-badge {
    padding: 6px 9px;
    font-size: 11.5px;
  }

  .chat-overview-message-stage .message-thread {
    padding: 14px 12px 18px;
  }

  .chat-overview-message-stage .message-avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .chat-overview-message-stage .message-bubble,
  .chat-overview-message-stage .message-bubble.own {
    max-width: min(100%, 82%);
    padding: 9px 11px 7px;
    border-radius: 16px 16px 16px 6px;
  }

  .chat-overview-message-stage .message-bubble.own {
    border-radius: 16px 16px 6px 16px;
  }

  .chat-overview-message-stage .message-bubble p,
  .drawer-card.drawer-tabbed-detail.drawer-messages-expanded .message-bubble p,
  .drawer-card.drawer-tabbed-detail .message-bubble p {
    font-size: 15px;
  }

  .chat-overview-composer {
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .chat-overview-composer .message-composer-row {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .chat-overview-composer #chat-overview-message-attach-button,
  .chat-overview-composer .message-send {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }

  .chat-overview-composer #chat-overview-message-input {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 15.5px;
  }
}

@media (max-width: 390px) {
  .event-card-title-row {
    row-gap: 6px;
  }

  .event-card-message-indicator {
    width: 32px;
    height: 32px;
  }

  .event-card-message-indicator svg {
    width: 17px;
    height: 17px;
  }

  .chat-overview-conversation-panel {
    border-radius: 22px;
  }

  .chat-overview-message-stage .message-bubble,
  .chat-overview-message-stage .message-bubble.own {
    max-width: 84%;
  }
}

[contenteditable="plaintext-only"] {
  outline: none;
  cursor: text;
}
[contenteditable="plaintext-only"]:focus {
  outline: none;
  background: rgba(126, 136, 164, 0.12) !important;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(126, 136, 164, 0.2);
}

.card.is-drag-pending {
  transform: scale(0.97);
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 20px rgba(29, 37, 63, 0.14);
  z-index: 1;
  position: relative;
}

.card.is-list-drag-source {
  opacity: 0.25;
}

@keyframes list-drag-ghost-in {
  from {
    opacity: 0;
    filter: saturate(1.04) blur(1px);
  }
  to {
    opacity: 1;
    filter: saturate(1.06) blur(0px);
  }
}

.list-drag-ghost {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  margin: 0;
  transform-origin: top left;
  box-shadow: 0 24px 48px rgba(29, 37, 63, 0.36), 0 6px 16px rgba(29, 37, 63, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  will-change: transform;
  contain: layout style;
  animation: list-drag-ghost-in 180ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.list-dragging,
body.list-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  cursor: grabbing !important;
}

body.list-dragging #app,
body.list-dragging .phone {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

.card.is-drop-before::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 4px;
  background: var(--blue);
  border-radius: 2px;
  z-index: 10;
}

.card.is-drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: var(--blue);
  border-radius: 2px;
  z-index: 10;
}