: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;
        --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;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        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: center;
        padding: 18px;
        -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-checklist-inline-cancel svg,
      .detail-inline-edit-icon svg,
      .detail-inline-popup-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-direction: column;
        width: min(100%, 390px);
        height: min(calc(100dvh - 36px), 844px);
        overflow: hidden;
        border-radius: 34px;
        background: var(--phone);
        box-shadow: var(--shadow);
      }

      .app {
        flex: 1 1 auto;
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 18px 18px calc(32px + var(--keyboard-offset));
      }

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

      .screen {
        display: none;
      }

      .hidden {
        display: none !important;
      }

      .screen.active {
        display: block;
      }

      .subitem-modal {
        position: absolute;
        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: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(20, 24, 40, 0.34);
        z-index: 130;
      }

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

      .dialog-modal-card {
        width: 100%;
        max-width: 340px;
        padding: 18px 18px 16px;
        border-radius: 24px;
        background: rgba(251, 252, 255, 0.98);
        box-shadow: 0 22px 46px rgba(21, 24, 43, 0.24);
      }

      .dialog-modal-head {
        display: grid;
        gap: 6px;
      }

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

      .dialog-modal-head h3 {
        margin: 0;
        color: var(--navy);
        font-size: 20px;
        font-weight: 600;
        line-height: 1.2;
      }

      .dialog-modal-body {
        display: grid;
        gap: 10px;
        margin-top: 14px;
      }

      .dialog-modal-body p {
        margin: 0;
        color: var(--text);
        font-size: 14px;
        line-height: 1.5;
      }

      .dialog-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 18px;
      }

      .dialog-modal-actions .secondary,
      .dialog-modal-actions .primary {
        width: auto;
        min-width: 108px;
        height: 44px;
        padding: 0 16px;
        font-size: 15px;
        font-weight: 600;
      }

      .subitem-modal-card {
        width: 100%;
        max-height: calc(100dvh - 36px - var(--keyboard-offset));
        overflow: auto;
        padding: 16px;
        border-radius: 24px;
        background: rgba(251, 252, 255, 0.98);
        box-shadow: 0 22px 46px rgba(21, 24, 43, 0.24);
      }

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

      .subitem-modal-head h3 {
        margin: 0;
        color: var(--navy);
        font-size: 18px;
        font-weight: 600;
        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 {
        width: 34px;
        height: 34px;
        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;
      }

      .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: 600;
      }

      .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: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        grid-template-areas:
          "home mark actions"
          "title title title";
        align-items: start;
        column-gap: 12px;
        row-gap: 18px;
        margin-bottom: 22px;
      }

      .title-row h1,
      .title-row h2 {
        margin: 0;
        color: var(--navy);
        font-size: 20px;
        font-weight: 600;
        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-copy {
        min-width: 0;
      }

      .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-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: 600;
  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-settings-head {
        justify-content: space-between;
        align-items: flex-start;
      }

      .event-settings-head .screen-head-copy {
        flex: 1 1 auto;
      }

      .event-settings-head .screen-head-copy h2,
      .event-settings-head .screen-head-copy p {
        max-width: 440px;
      }

      .event-settings-logo {
        width: 84px;
        height: 84px;
        flex: 0 0 auto;
        object-fit: contain;
        align-self: flex-start;
        margin-top: 4px;
        filter: drop-shadow(0 8px 18px rgba(31, 35, 63, 0.08));
      }

      .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: 600;
      }

      .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: 600;
      }

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

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

      .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: 700;
        line-height: 1.15;
        white-space: nowrap;
      }

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

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

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

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

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

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

      .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: 600;
        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: 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
      }

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

      .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: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .invite-hero h1 {
        margin: 0;
        color: var(--navy);
        font-size: 30px;
        font-weight: 600;
        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-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: 24px;
        font-weight: 600;
        line-height: 1.12;
      }

      .invite-event-kicker {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 700;
        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-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: 500;
        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-head {
        display: grid;
        gap: 4px;
      }

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

      .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: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
      }

      .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-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;
      }

      .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: 500;
        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;
      }

      .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: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 0 0 10px;
        margin-bottom: 12px;
        scrollbar-width: none;
      }

      .tabs-shell {
        position: relative;
        margin-bottom: 8px;
      }

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

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

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

      .tab {
        flex: 0 0 auto;
        min-width: 88px;
        height: 36px;
        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: 14px;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
      }

      .tab-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        line-height: 1;
      }

      .tab-icon {
        font-size: 15px;
        line-height: 1;
      }

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

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

      .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: 600;
        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: 600;
        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: 500;
      }

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

      .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: 600;
      }

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

      .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: 700;
      }

      .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: 500;
        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-actions {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

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

      .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;
      }

      .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-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: 600;
      }

      .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: 600;
        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: 500;
      }

      .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(--text);
        -webkit-text-fill-color: var(--text);
      }

      .panel p,
      .simple-list-item p {
        margin: 4px 0 0;
        color: var(--muted);
        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: 600;
}

.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: 700;
}

.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;
      }

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

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

      .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: 600;
        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: 8px;
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 500;
      }

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

      .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: 500;
      }

      .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: 500;
        line-height: 1;
        cursor: pointer;
        -webkit-text-fill-color: currentColor;
      }

      .inline-link-button {
        border: 0;
        padding: 0;
        color: var(--navy);
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
      }

      .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);
      }

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

      .create-event-action-row .primary,
      .create-event-action-row .secondary {
        min-width: 0;
        height: 56px;
        padding: 0 14px;
        font-size: 16px;
        font-weight: 600;
        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-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: 600;
        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-head {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
      }

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

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

      .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 {
        font-size: 15px;
        font-weight: 600;
      }

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

      .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: 500;
        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: 600;
        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);
      }

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

      .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: 600;
        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: 600;
        letter-spacing: -0.01em;
        text-align: left;
        cursor: pointer;
        transition: box-shadow 0.18s ease, transform 0.18s ease;
      }

      .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: 700;
        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: 700;
        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: 600;
        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 {
        color: rgba(105, 115, 147, 0.28);
        background: transparent;
        cursor: default;
      }

      .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: 500;
        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: 600;
      }

      .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: 700;
      }

      .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: 600;
      }

      .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: 700;
      }

      .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: 700;
        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: 600;
      }

      .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: 700;
      }

      .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: 600;
        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: 600;
        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: 600;
        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: 700;
        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: 600;
      }

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

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

      .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);
      }

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

      .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: 600;
        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: 600;
      }

      .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: 500;
      }

      .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: 500;
        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;
      }

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

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

      .overview-event-block {
        display: grid;
        gap: 12px;
      }

      .overview-event-head {
        display: grid;
        gap: 4px;
        padding: 0 4px;
      }

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

      .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: 10px;
      }

      .overview-summary-card {
        display: grid;
        gap: 4px;
        padding: 14px 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.12);
      }

      .overview-summary-label {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }

      .overview-summary-value {
        color: var(--navy);
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
      }

      .overview-summary-note {
        color: var(--navy-soft);
        font-size: 13px;
        line-height: 1.35;
      }

      .overview-action-grid {
        display: grid;
        gap: 10px;
        margin-top: 4px;
      }

      .overview-action-card {
        position: relative;
        overflow: hidden;
        width: 100%;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 16px;
        padding: 18px;
        border: none;
        border-radius: 24px;
        background:
          radial-gradient(circle at top right, rgba(255, 255, 255, 0.34), transparent 34%),
          linear-gradient(145deg, rgba(255, 214, 184, 0.98), rgba(255, 198, 158, 0.96) 62%, rgba(248, 184, 140, 0.94));
        color: var(--navy);
        box-shadow:
          0 18px 34px rgba(156, 110, 67, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.32),
          inset 0 0 0 1px rgba(255, 255, 255, 0.14);
        text-align: left;
        cursor: pointer;
      }

      .overview-action-card::after {
        content: "";
        position: absolute;
        inset: auto -18% -52% 40%;
        height: 120px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 68%);
        pointer-events: none;
      }

      .overview-action-card:disabled {
        opacity: 0.64;
        cursor: not-allowed;
        box-shadow:
          0 10px 24px rgba(156, 110, 67, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.12),
          inset 0 0 0 1px rgba(255, 255, 255, 0.06);
      }

      .overview-action-copy {
        position: relative;
        z-index: 1;
        min-width: 0;
        flex: 1 1 auto;
        display: grid;
        align-content: center;
        gap: 6px;
      }

      .overview-action-label {
        font-size: 17px;
        font-weight: 700;
        line-height: 1.18;
        letter-spacing: -0.01em;
      }

      .overview-action-description {
        max-width: 26ch;
        color: rgba(38, 48, 87, 0.78);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
      }

      .overview-action-side {
        position: relative;
        z-index: 1;
        min-width: 92px;
        display: grid;
        align-content: center;
        gap: 4px;
        justify-items: center;
        text-align: center;
        padding: 10px 12px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.3);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
        backdrop-filter: blur(10px);
      }

      .overview-action-side strong {
        font-size: 32px;
        font-weight: 800;
        line-height: 0.95;
        letter-spacing: -0.03em;
      }

      .overview-action-side span {
        color: rgba(38, 48, 87, 0.72);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
      }

      .home-header {
        display: grid;
        gap: 18px;
        margin-bottom: 18px;
      }

      .home-screen {
        position: relative;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        padding-bottom: calc(env(safe-area-inset-bottom) + 88px + var(--keyboard-offset));
      }

      .home-brand-row {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        min-height: 102px;
      }

      .home-brand-row h1 {
        margin: 0;
        color: var(--navy);
        font-size: 24px;
        font-weight: 700;
        line-height: 1.1;
      }

      .home-logo {
        display: none;
      }

      .home-brand-mark {
        display: block;
        width: auto;
        height: 104px;
        object-fit: contain;
        align-self: flex-start;
        margin-top: -12px;
        filter: drop-shadow(0 8px 18px rgba(31, 35, 63, 0.08));
      }

      .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: flex-start;
      }

      .event-header-home {
        grid-area: home;
      }

      .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: center;
        display: block;
        width: auto;
        height: 120px;
        object-fit: contain;
        filter: drop-shadow(0 8px 18px rgba(31, 35, 63, 0.08));
      }

      .event-header-title {
        grid-area: title;
        width: 100%;
        text-align: left;
      }

      .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: 600;
        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: 42px;
        height: 42px;
        color: #ffffff;
        background: var(--navy);
        box-shadow: 0 12px 20px rgba(32, 34, 61, 0.18);
      }

      .home-account-button svg {
        width: 20px;
        height: 20px;
      }

      .home-header h1 {
        margin: 0;
        color: var(--navy);
        font-size: 28px;
        font-weight: 600;
        line-height: 1.1;
      }

      .home-header p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
      }

      .home-section-head {
        display: grid;
        gap: 4px;
      }

      .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: 22px;
        font-weight: 700;
        line-height: 1.1;
      }

      .home-create-button {
        width: 100%;
        height: 44px;
        border: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: var(--white);
        background: var(--navy);
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
      }

      .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 {
        font-size: 28px;
        font-weight: 300;
        line-height: 1;
        margin-top: -2px;
      }

      .event-list {
        display: grid;
        gap: 12px;
        flex: 1 1 auto;
        align-content: start;
        padding-bottom: 10px;
      }

      .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%;
      }

      .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: grab;
        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;
      }

      .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: 2px 2px 0;
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-transform: uppercase;
      }

      .home-folder-toggle {
        flex: 1 1 auto;
        border: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: inherit;
        background: transparent;
        text-align: left;
        cursor: pointer;
      }

      .home-folder-menu-wrap {
        position: relative;
        flex: 0 0 auto;
      }

      .home-folder-head-spacer {
        width: 24px;
        min-width: 24px;
        min-height: 24px;
        flex: 0 0 auto;
      }

      .home-folder-menu-button {
        min-width: 24px;
        min-height: 24px;
        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: 13px;
        height: 13px;
      }

      .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.28;
      }

      .home-folder-chevron {
        margin-left: auto;
        font-size: 18px;
        line-height: 1;
        color: var(--navy-soft);
      }

      .home-folder-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 0 0 1px rgba(82, 89, 114, 0.12);
        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: 20px;
        height: 20px;
        padding: 0 6px;
        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: 700;
        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.16;
        transform: scale(0.92);
      }

      .home-drag-ghost {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        pointer-events: none;
        margin: 0;
        transform-origin: top left;
        transform: scale(0.8);
        box-shadow: 0 28px 52px rgba(29, 37, 63, 0.26);
        filter: saturate(1.04);
      }

      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;
      }

      .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 {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 156px;
        max-width: min(188px, calc(100vw - 92px));
      }

      .event-card-menu button {
        padding: 10px 12px;
        font-size: 13px;
      }

      .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: 24px;
        height: 24px;
        border-radius: 999px;
        background: rgba(47, 102, 223, 0.1);
        color: var(--blue);
        flex: 0 0 auto;
      }

      .event-card-message-indicator::after {
        content: "";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--danger-strong);
        box-shadow: 0 0 0 2px var(--white);
      }

      .event-card-message-indicator svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .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: 600;
        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: 500;
      }

      .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: 700;
        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;
      }

      .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: 600;
      }

      .attendance-status {
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 500;
      }

      .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: 500;
        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: 600;
        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: 8px 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: center;
        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);
      }

      .overview-compact-toggle {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 1.5px solid #aeb6ca;
        background: var(--white);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        cursor: pointer;
      }

      .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: 600;
        line-height: 1.2;
        color: var(--text);
        -webkit-text-fill-color: var(--text);
      }

      .overview-compact-card p {
        margin: 2px 0 0;
        font-size: 11px;
        line-height: 1.2;
      }

      .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: 600;
      }

      .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 {
        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.organizer {
        box-shadow: inset 0 0 0 2px rgba(214, 167, 59, 0.95);
      }

      .participant-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: translateZ(0);
        backface-visibility: hidden;
      }

      .participant-avatar svg {
        width: 18px;
        height: 18px;
      }

      .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-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-name {
        margin: 0;
        color: var(--navy);
        font-size: 17px;
        font-weight: 600;
        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;
      }

      .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: 600;
        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 {
        white-space: nowrap;
      }

      .participant-overview-attendance-list {
        margin-top: -2px;
      }

      .participant-overview-detail {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }

      .participant-overview-detail-copy {
        min-width: 0;
        flex: 1 1 auto;
      }

      .participant-overview-detail-copy h3 {
        font-size: 16px;
        line-height: 1.25;
      }

      .participant-overview-detail-meta {
        font-size: 12px;
        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: 600;
        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: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        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;
        flex: 1 1 auto;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
      }

      .expense-row-card p {
        flex: 0 0 auto;
        color: var(--navy);
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
      }

      .expense-row-copy {
        min-width: 0;
        flex: 1 1 auto;
        display: grid;
        gap: 4px;
      }

      .expense-row-meta {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.3;
      }

      .expense-row-side {
        display: grid;
        justify-items: end;
        gap: 6px;
        flex: 0 0 auto;
      }

      .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: 700;
        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: 600;
        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: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .expense-total-card {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        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: 700;
      }

      .expense-total-card p {
        color: var(--navy);
        font-size: 15px;
        font-weight: 800;
      }

      .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: 500;
      }

      .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: 600;
      }

      .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: 600;
        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: 600;
        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: 12px;
        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: 600;
        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: 600;
        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: 600;
        line-height: 1;
      }

      .communication-screen {
        display: grid;
        gap: 12px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
      }

      .communication-main,
      .communication-sidebar {
        display: grid;
        gap: 12px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      .communication-event-title h2 {
        margin: 0;
        color: var(--navy);
        font-size: 26px;
        font-weight: 700;
        line-height: 1.12;
      }

      .communication-tabs-inline {
        margin-bottom: 2px;
      }

      .chat-list {
        display: grid;
        gap: 10px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
      }

      .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: 700;
      }

      .chat-thread-group-head span {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
      }

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

      .notification-group + .notification-group {
        margin-top: 6px;
      }

      .notification-group-label {
        margin: 2px 4px 0;
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 700;
      }

      .chat-search-wrap {
        display: grid;
        gap: 10px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      .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: 48px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 0 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.14);
        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: 600;
      }

      .chat-thread-button,
      .chat-thread-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        display: grid;
        gap: 8px;
        align-content: start;
        border: 0;
        padding: 14px 15px;
        border-radius: 18px;
        text-align: left;
        color: var(--navy);
        background: rgba(249, 250, 255, 0.94);
        box-shadow: inset 0 0 0 1px rgba(126, 136, 164, 0.14);
        overflow: hidden;
      }

      .chat-thread-button {
        cursor: pointer;
      }

      .chat-thread-button.unread,
      .chat-thread-card.unread {
        box-shadow: inset 0 0 0 1px rgba(47, 102, 223, 0.22);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 245, 255, 0.92));
      }

      .chat-thread-button.active,
      .chat-thread-card.active {
        box-shadow: inset 0 0 0 1px rgba(67, 125, 231, 0.34);
        background: linear-gradient(180deg, rgba(236, 244, 255, 0.98), rgba(225, 237, 255, 0.95));
      }

      .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: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
      }

      .chat-thread-kicker {
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .chat-thread-top strong {
        color: var(--navy);
        font-size: 17px;
        font-weight: 600;
        line-height: 1.25;
      }

      .chat-thread-meta {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .chat-thread-time {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.2;
      }

      .chat-thread-preview {
        margin: 4px 0 0;
        color: var(--navy-soft);
        font-size: 17px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .chat-thread-preview-author {
        color: var(--message-sender-color, var(--navy));
        font-weight: 700;
      }

      .chat-thread-preview-text {
        color: inherit;
      }

      .chat-thread-action {
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
      }

      .chat-thread-dot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: var(--danger-strong);
        box-shadow: 0 0 0 3px rgba(255, 111, 97, 0.14);
      }

      .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: 600;
      }

      .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;
        min-height: 0;
        border-radius: 24px;
        overflow: hidden;
        background: rgba(247, 249, 253, 0.94);
        box-shadow:
          0 18px 36px rgba(31, 35, 63, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.82);
      }

      .chat-overview-conversation-panel.empty {
        align-items: center;
        background:
          radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), rgba(240, 244, 251, 0.92));
      }

      .chat-overview-conversation-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 20px 16px;
        border-bottom: 1px solid rgba(220, 226, 238, 0.92);
        background: rgba(255, 255, 255, 0.82);
      }

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

      .chat-overview-conversation-kicker {
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .chat-overview-conversation-copy h3 {
        margin: 0;
        color: var(--navy);
        font-size: 20px;
        font-weight: 700;
      }

      .chat-overview-conversation-copy p {
        margin: 0;
        color: var(--navy-soft);
        font-size: 13px;
        line-height: 1.45;
      }

      .chat-overview-message-stage {
        min-height: 0;
        overflow-anchor: none;
      }

      #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;
      }

      .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);
      }

      .communication-subtabs {
        margin-bottom: 14px;
      }

      .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: 700;
        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);
      }

      @media (max-width: 720px) {
        .list-reorder-button {
          width: 17px;
          height: 30px;
          font-size: 10px;
          opacity: 0.6;
        }

        .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 1px rgba(255, 255, 255, 0.62);
      }

      .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 1px rgba(255, 255, 255, 0.64);
      }

      .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 1px rgba(255, 255, 255, 0.64);
      }

      .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: 600;
        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-message-indicator {
        width: 28px;
        height: 28px;
        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 1px rgba(123, 219, 133, 0.36);
      }

      .card-message-indicator svg {
        width: 14px;
        height: 14px;
      }

      .card-message-indicator.has-dot {
        position: relative;
      }

      .card-message-indicator.has-dot::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 4px;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: #ff5e5e;
        box-shadow: 0 0 0 2px rgba(241, 244, 252, 0.96);
      }

      .card-delete-button {
        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 {
        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: 500;
      }

      .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-main {
        gap: 8px;
      }

      .task-card-side {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: flex-start;
        gap: 8px;
      }

      .task-card-metrics {
        display: grid;
        justify-items: end;
        gap: 1px;
        padding-top: 1px;
      }

      .task-card-progress {
        color: var(--navy);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
      }

      .task-card-time {
        color: var(--muted);
        font-size: 11px;
        line-height: 1.15;
        white-space: nowrap;
      }

      .task-card .task-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 {
        width: 18px;
        height: 18px;
        margin: -5px;
        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: relative;
        isolation: isolate;
      }

      .task-checkbox::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 4px;
        border: 1.5px solid #aeb6ca;
        background: var(--white);
        z-index: -1;
      }

      .task-checkbox.checked {
        color: var(--white);
      }

      .task-checkbox.checked::before {
        border-color: var(--navy);
        background: var(--navy);
      }

      .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: 500;
      }

      .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: 500;
        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: 600;
      }

      .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;
      }

      .invite-actions {
        display: flex;
        gap: 8px;
        margin-top: 8px;
      }

      .invite-actions button {
        flex: 1;
        min-width: 0;
      }

      .empty-inline-note {
        margin: 0;
        padding: 2px 2px 0;
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 500;
      }

      .empty-primary-add {
        min-height: 52px;
        font-size: 17px;
        font-weight: 600;
      }

      .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: 600;
      }

      .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: 700;
        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: 500;
        line-height: 1.25;
      }

      .card-context-line {
        margin: 0 0 4px;
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 700;
        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: 500;
      }

      .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: 500;
      }

      .supply-pick {
        margin-bottom: 2px;
      }

      .supply-checkbox {
        width: 18px;
        height: 18px;
        margin: -5px;
        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: relative;
        isolation: isolate;
      }

      .supply-checkbox::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 4px;
        border: 1.5px solid #aeb6ca;
        background: var(--white);
        z-index: -1;
      }

      .supply-checkbox.checked {
        color: var(--white);
      }

      .supply-checkbox.checked::before {
        border-color: var(--navy);
        background: var(--navy);
      }

      .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: 600;
      }

      .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: 500;
      }

      .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: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(32, 34, 61, 0.08);
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 700;
        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 {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: none;
        align-items: center;
        justify-content: center;
        padding:
          max(18px, env(safe-area-inset-top))
          18px
          calc(max(18px, env(safe-area-inset-bottom)) + var(--keyboard-offset))
          18px;
        background: rgba(237, 241, 247, 0.96);
      }

      .drawer.active {
        display: flex;
      }

      .drawer-card {
        position: relative;
        z-index: 101;
        display: flex;
        flex-direction: column;
        width: min(100%, 390px);
        height: min(calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px - var(--keyboard-offset)), 844px);
        overflow: hidden;
        border-radius: 34px;
        background: var(--phone);
        box-shadow: var(--shadow);
      }

      .drawer-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        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-head-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        min-width: 0;
      }

      .drawer-head-left > div {
        display: none;
      }

      .drawer-head h2 {
        margin: 0;
        color: var(--navy);
        font-size: 20px;
        font-weight: 600;
      }

      .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;
      }

      .drawer-tabs.hidden {
        display: none;
      }

      .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: 600;
        line-height: 1;
        cursor: pointer;
      }

      .drawer-tab-label {
        min-width: 0;
        white-space: nowrap;
      }

      .drawer-tab-meta {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-left: 6px;
        flex: 0 0 auto;
      }

      .drawer-tab-count {
        min-width: 16px;
        height: 16px;
        padding: 0 5px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #6d7898;
        background: rgba(92, 108, 156, 0.08);
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
      }

      .drawer-tab-unread-dot {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        display: inline-block;
        background: var(--danger-strong);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
      }

      .drawer-tab.active {
        color: var(--white);
        background: var(--navy);
        box-shadow: none;
      }

      .drawer-tab.active .drawer-tab-count {
        color: var(--navy);
        background: rgba(255, 255, 255, 0.82);
      }

      .drawer-tab.hidden {
        display: none;
      }

      .drawer-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 78px;
        height: 36px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        color: var(--navy);
        background: #edf0f7;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
      }

      .detail-section {
        padding: 0 18px 18px;
      }

      .detail-section h3 {
        margin: 0 0 10px;
        color: var(--navy);
        font-size: 15px;
        font-weight: 500;
      }

      .detail-section-heading {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 10px;
      }

      .detail-section-heading h3 {
        margin: 0;
      }

      .detail-section-heading span {
        color: var(--navy-soft);
        font-size: 14px;
        font-weight: 600;
      }

      .detail-progress-indicator {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0;
        border: 0;
        background: none;
        color: var(--navy-soft);
        font-size: 15px;
        font-weight: 800;
        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: 500;
      }

      .detail-topic strong {
        color: var(--danger-strong);
        font-weight: 500;
      }

      .detail-main-title {
        margin: 0 0 10px;
        color: var(--navy);
        font-size: 18px;
        line-height: 1.28;
        font-weight: 600;
      }

      .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-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: 600;
      }

      .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: 500;
      }

      .detail-meta-line span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .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: 600;
      }

      .detail-meta-chip:focus-visible {
        outline: 2px solid rgba(47, 102, 223, 0.45);
        outline-offset: 2px;
      }

      .detail-inline-popup {
        margin-top: 14px;
      }

      .detail-inline-popup.hidden {
        display: none;
      }

      .detail-inline-popup-card {
        display: grid;
        gap: 12px;
        padding: 14px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow:
          0 18px 34px rgba(31, 35, 63, 0.12),
          inset 0 0 0 1px rgba(255, 255, 255, 0.76);
      }

      .detail-inline-popup-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .detail-inline-popup-head strong {
        color: var(--navy);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.2;
      }

      .detail-inline-popup-close {
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 10px;
        background: rgba(47, 102, 223, 0.08);
        color: var(--navy-soft);
        cursor: pointer;
      }

      .detail-inline-popup-close svg {
        width: 14px;
        height: 14px;
      }

      .detail-inline-popup-fields {
        display: grid;
        gap: 10px;
      }

      .detail-inline-popup-field {
        display: grid;
        gap: 6px;
      }

      .detail-inline-popup-field > span {
        color: var(--navy-soft);
        font-size: 13px;
        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: 600;
        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: 0 0 auto;
        min-width: 120px;
        height: 40px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        color: var(--white);
        background: var(--navy);
        font-size: 14px;
        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: flex-end;
        gap: 10px;
      }

      .detail-inline-cancel-button {
        width: auto;
        min-width: 120px;
        height: 40px;
        padding: 0 18px;
        border-radius: 999px;
      }

      .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: 500;
        line-height: 1.2;
      }

      .detail-card-header strong {
        color: var(--navy);
        font-size: 14px;
        font-weight: 500;
      }

      .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-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: 600;
      }

      .detail-assignment-head span {
        display: inline-flex;
        align-items: center;
        color: var(--muted);
        font-size: 12px;
        font-weight: 500;
      }

      .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-person {
        min-width: 0;
        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: 600;
      }

      .detail-assignment-copy span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.4;
      }

      .detail-assignment-remove {
        flex: 0 0 auto;
        min-height: 24px;
        border: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--danger-strong);
        background: transparent;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
      }

      .detail-assignment-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        align-items: center;
        min-width: 0;
      }

      .detail-assignment-select {
        width: 100%;
        min-width: 0;
        height: 40px;
        background: rgba(255, 255, 255, 0.84);
      }

      .detail-assignment-assign-button {
        flex: 0 0 auto;
        min-width: 98px;
        height: 40px;
        border: 0;
        border-radius: 12px;
        padding: 0 14px;
        color: var(--white);
        background: var(--navy);
        font-size: 13px;
        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);
        }

        .detail-assignment-assign-button {
          width: 100%;
        }
      }

      .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: 500;
        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: 500;
        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: 8px 16px 8px 12px;
        display: grid;
        gap: 8px;
        overflow: visible;
      }

      .detail-checklist-list {
        display: grid;
        gap: 4px;
      }

      .detail-checklist-empty {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
      }

      .detail-checklist-row {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        align-items: flex-start;
        column-gap: 10px;
        row-gap: 6px;
        min-height: 28px;
        padding: 2px 2px 2px 0;
      }

      .detail-checklist-row.editing {
        grid-template-columns: 18px minmax(0, 1fr);
      }

      .detail-checklist-toggle {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 1.5px solid #aeb6ca;
        background: var(--white);
        color: transparent;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        cursor: pointer;
      }

      .detail-checklist-toggle.checked {
        background: rgba(235, 250, 239, 0.98);
        border-color: rgba(86, 182, 110, 0.95);
        color: rgba(64, 148, 86, 1);
      }

      .detail-checklist-toggle.locked {
        cursor: default;
      }

      .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: 14px;
        line-height: 1.2;
        text-align: left;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
      }

      .detail-checklist-text-button:disabled {
        cursor: default;
      }

      .detail-checklist-label {
        color: var(--text);
        font: inherit;
      }

      .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-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: 28px;
        height: 28px;
        border: 0;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 111, 97, 0.1);
        color: rgba(199, 84, 84, 0.95);
        flex: 0 0 auto;
        cursor: pointer;
      }

      .detail-checklist-actions {
        display: inline-flex;
        align-items: flex-start;
        gap: 6px;
        flex: 0 0 auto;
        position: relative;
        min-width: 0;
        padding-right: 2px;
      }

      .detail-checklist-edit {
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(47, 102, 223, 0.1);
        color: rgba(58, 92, 175, 0.95);
        flex: 0 0 auto;
        cursor: pointer;
      }

      .detail-checklist-edit.active {
        background: rgba(47, 102, 223, 0.18);
        color: rgba(32, 64, 140, 1);
      }

      .detail-checklist-edit svg,
      .detail-checklist-remove svg {
        width: 13px;
        height: 13px;
      }

      .detail-checklist-add-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin-top: 2px;
        width: 100%;
        overflow: hidden;
      }

      .detail-checklist-input {
        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;
      }

      .detail-checklist-add {
        width: 42px;
        min-width: 42px;
        height: 42px;
        border: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(47, 102, 223, 0.12);
        color: var(--navy);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        flex: 0 0 auto;
      }

      .detail-checklist-add.editing {
        width: auto;
        min-width: 88px;
        padding: 0 14px;
        font-size: 15px;
        font-weight: 600;
      }

      .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;
      }

      .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: 600;
      }

      .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;
        }
      }

      .detail-checklist-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 188px;
        padding: 8px;
        border-radius: 16px;
        display: grid;
        gap: 6px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 40px rgba(31, 41, 72, 0.16);
        z-index: 12;
      }

      .detail-checklist-menu button {
        width: 100%;
        min-height: 38px;
        border: 0;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 12px;
        color: var(--navy);
        background: rgba(245, 247, 255, 0.9);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
      }

      .detail-checklist-menu button:hover {
        background: rgba(232, 238, 255, 0.96);
      }

      .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: 600;
      }

      .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: 500;
        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: 600;
        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: 500;
        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: 600;
      }

      .organizer-assigned-remove {
        border: 0;
        border-radius: 10px;
        padding: 7px 10px;
        color: var(--danger-strong);
        background: rgba(255, 111, 97, 0.12);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
      }

      .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: 500;
      }

      .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: 700;
        line-height: 1;
        transform: none;
      }

      .detail-expense-card {
        position: relative;
        padding: 10px;
        display: grid;
        gap: 10px;
      }

      .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;
        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;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(32, 34, 61, 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(247, 249, 255, 0.98);
  border-color: rgba(47, 102, 223, 0.16);
  outline: none;
}
      .detail-expense-head {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
      }

      .detail-expense-side {
        flex: 0 0 auto;
        display: grid;
        justify-items: end;
        gap: 8px;
        min-width: fit-content;
      }

      .detail-expense-copy {
        min-width: 0;
        display: grid;
        gap: 4px;
      }

      .detail-expense-copy strong {
        font-size: 15px;
        line-height: 1.3;
      }

      .detail-expense-copy span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.35;
      }

      .detail-expense-value {
        color: var(--navy);
        font-size: 15px;
        font-weight: 800;
        white-space: nowrap;
      }

      .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: 13px;
        font-weight: 700;
      }

      .detail-expense-toggle {
        margin: 0;
      }

      .detail-expense-toolbar {
        padding: 0 10px 2px;
      }

      .detail-attachments-toolbar {
        padding: 0 10px 2px;
      }

      .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: 800;
        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: 700;
        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: 600;
        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: 700;
        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: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(32, 34, 61, 0.08);
      }

      .detail-expense-label,
      .detail-expense-receipt-label {
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 700;
      }

      .detail-expense-input {
        width: 100%;
        height: 44px;
        border: 1px solid rgba(32, 34, 61, 0.12);
        border-radius: 14px;
        padding: 0 14px;
        background: rgba(255, 255, 255, 0.96);
        color: var(--text);
        font-size: 15px;
      }

      .detail-expense-receipt-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
      }

      .detail-attachments-toolbar {
        padding: 10px 16px 8px;
      }

      .detail-expense-attach-button {
        margin: 0;
      }

      .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: 700;
      }

      .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: 700;
        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: 700;
        color: currentColor;
      }

      .detail-expense-receipt-subtitle {
        font-size: 11px;
        font-weight: 600;
        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: 800;
        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: 800;
        line-height: 1.2;
      }

      .detail-expense-saving-card p {
        margin: 0;
        color: var(--navy-soft);
        font-size: 13px;
        font-weight: 600;
        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-messages-head {
        display: none;
      }

      .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;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid var(--chat-line);
        background: linear-gradient(180deg, var(--chat-bg) 0%, var(--chat-bg-strong) 100%);
      }

      .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 {
        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: 12px 14px 10px;
        border-radius: 18px 18px 18px 10px;
        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: 18px 18px 10px 18px;
        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-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: 700;
      }


      .message-bubble.own .message-author-name {
        justify-content: flex-end;
      }

      .message-bubble p {
        margin: 0;
        color: var(--text);
        font-size: 17px;
        line-height: 1.45;
      }

      .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: 800;
        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: 600;
        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: 13px;
      }

      .message-bubble.own .message-bubble-footer {
        gap: 4px;
        color: rgba(73, 109, 81, 0.92);
      }

      .message-bubble-read-status {
        cursor: pointer;
        user-select: none;
      }

      .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: 700;
      }

      .message-read-sheet-head span {
        color: rgba(73, 109, 81, 0.9);
        font-size: 13px;
        font-weight: 700;
      }

      .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: 600;
      }

      .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;
      }

      .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: 800;
        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: 600;
        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: 600;
        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: 18px 18px 0 0;
        background: rgba(255, 255, 255, 0.74);
        box-shadow: inset 0 0 0 1px rgba(232, 223, 210, 0.88);
      }

      .message-composer-row {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
      }

      .message-attach {
        flex: 0 0 auto;
        width: 52px;
        height: 52px;
        border: 0;
        padding: 0;
        background: transparent;
        color: var(--navy-soft);
        font-size: 41px;
        font-weight: 500;
        line-height: 0.88;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }

      .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: 24px;
        max-height: 72px;
        border: 0;
        outline: 0;
        padding: 13px 0;
        resize: none;
        color: var(--text);
        background: transparent;
        font-size: 16px;
        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: 600;
        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: 500;
        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: 500;
      }

      .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: 600;
      }

      .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: 600;
        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(16px + env(safe-area-inset-bottom));
      }

      .attendance-list {
        display: grid;
        gap: 12px;
        padding-bottom: calc(124px + env(safe-area-inset-bottom));
      }

      .attendance-card {
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
        overflow: hidden;
      }

      .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-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 12px 14px 8px;
      }

      .attendance-head strong {
        display: block;
        font-size: 15px;
        font-weight: 600;
      }

      .attendance-head span {
        color: var(--muted);
        font-size: 12px;
      }

      .attendance-body {
        display: grid;
        gap: 10px;
        padding: 0 14px 14px;
      }

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

      .attendance-time-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .attendance-field {
        border-radius: 12px;
        background: var(--white);
        box-shadow: inset 0 0 0 1px #edf0f7;
        padding: 10px 12px;
      }

      .attendance-field label {
        display: block;
        margin-bottom: 4px;
        color: var(--navy-soft);
        font-size: 11px;
        font-weight: 500;
      }

      .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;
        color: var(--text);
        background: transparent;
        font-size: 15px;
        appearance: none;
        -webkit-appearance: none;
      }

      .attendance-field select:disabled {
        color: var(--muted);
      }

      .attendance-date-block {
        display: grid;
        gap: 2px;
      }

      .attendance-view-summary {
        display: grid;
        gap: 8px;
        padding-top: 2px;
      }

      .attendance-view-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
      }

      .attendance-view-row span {
        color: var(--navy-soft);
        font-size: 12px;
        font-weight: 600;
      }

      .attendance-view-row strong {
        min-width: 0;
        color: var(--navy);
        font-size: 14px;
        font-weight: 700;
        text-align: right;
      }

      .attendance-save-actions {
        display: grid;
        gap: 8px;
        position: sticky;
        bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 3;
        padding: 12px;
        border-radius: 20px;
        background: rgba(232, 236, 245, 0.94);
        box-shadow:
          0 10px 24px rgba(31, 35, 63, 0.1),
          inset 0 0 0 1px rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
      }

      .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) and (hover: hover) and (pointer: fine) {
        body {
          padding: 24px;
        }

        .phone {
          width: min(100%, 1440px);
          height: min(calc(100dvh - 48px), 980px);
          border-radius: 40px;
        }

        .app {
          padding: 28px 30px calc(44px + var(--keyboard-offset));
        }

        .attendance-save-actions {
          bottom: 16px;
        }

        .screen.active:not(.event-screen) {
          width: min(100%, 1040px);
          margin: 0 auto;
        }

        .home-screen {
          max-width: 1100px;
        }

        .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: auto;
          min-width: 220px;
          padding: 0 26px;
          justify-self: start;
        }

        .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%, 1260px);
        }

        .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: 16px;
        }

        .communication-screen.split {
          grid-template-columns: minmax(290px, 332px) minmax(0, 1fr);
          align-items: stretch;
          gap: 22px;
          height: calc(100vh - 230px);
          min-height: calc(100vh - 230px);
          max-height: calc(100vh - 230px);
          overflow: hidden;
        }

        .communication-screen .chat-list {
          grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
          gap: 14px;
        }

        .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: 12px;
          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 .communication-event-title {
          margin-bottom: 0;
        }

        .communication-screen.split .chat-search-wrap.split {
          grid-template-columns: minmax(0, 1fr) auto;
          grid-template-rows: auto minmax(0, 1fr);
          align-items: start;
          height: 100%;
          min-height: 0;
          overflow: hidden;
        }

        .communication-screen.split .communication-subtabs {
          margin-bottom: 0;
        }

        .communication-screen.split .chat-search-wrap.split .chat-search-field {
          grid-column: 1 / -1;
          grid-row: 1;
        }

        .communication-screen.split .chat-search-wrap.split .chat-search-toggle {
          grid-column: 2;
          grid-row: 1;
          justify-self: end;
          align-self: start;
          margin-top: 0;
        }

        .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 {
          border-radius: 20px;
        }

        .communication-screen.split .chat-thread-preview {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          white-space: normal;
          text-overflow: initial;
          overflow: hidden;
          line-height: 1.42;
        }

        .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: 18px 19px;
          border-radius: 22px;
        }

        .chat-thread-top strong {
          font-size: 18px;
        }

        .chat-thread-preview {
          font-size: 16px;
        }

        .chat-overview-conversation-head {
          padding: 20px 24px 18px;
        }

        .chat-overview-conversation-panel {
          height: 100%;
          min-height: 0;
          max-height: 100%;
        }

        .chat-overview-conversation-copy h3 {
          font-size: 22px;
        }

        .chat-overview-conversation-copy p {
          font-size: 14px;
        }

        .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: 22px 24px 30px;
          overflow-anchor: none;
        }

        .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: sticky;
          top: 0;
          align-self: start;
          padding: 8px 8px 10px 0;
        }

        .event-screen-main {
          display: grid;
          gap: 18px;
          align-content: start;
          justify-items: start;
          min-width: 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="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-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 {
          grid-template-columns: auto minmax(0, 1fr);
          grid-template-areas:
            "mark actions"
            "title title";
          column-gap: 12px;
          row-gap: 14px;
          margin-bottom: 18px;
        }

        .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-desktop-link {
          min-height: 50px;
          border-radius: 18px;
          padding: 0 18px;
          font-size: 16px;
          font-weight: 700;
        }

        .event-desktop-link.icon-only {
          width: 52px;
          min-width: 52px;
          min-height: 52px;
          padding: 0;
          justify-self: start;
        }

        .tabs-shell {
          margin-bottom: 0;
        }

        .tabs {
          flex-direction: column;
          gap: 12px;
          overflow-x: visible;
          overflow-y: auto;
          padding: 0;
          margin-bottom: 0;
          max-height: calc(100dvh - 250px);
        }

        .tab {
          width: 100%;
          min-width: 0;
          min-height: 48px;
          justify-content: flex-start;
          padding: 0 18px;
          border-radius: 16px;
          font-size: 15px;
        }

        .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: 700;
        }

        .overview-action-grid {
          grid-template-columns: repeat(2, minmax(280px, 360px));
          justify-content: start;
          gap: 12px;
          margin-top: 0;
        }

        .overview-action-card {
          width: min(100%, 360px);
          min-height: 96px;
          align-items: center;
          gap: 12px;
          padding: 14px 16px;
          border-radius: 20px;
        }

        .overview-action-card::after {
          inset: auto -26% -70% 52%;
          height: 88px;
        }

        .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: 16px;
        }

        .overview-action-side strong {
          font-size: 26px;
        }

        .overview-action-side span {
          font-size: 11px;
        }

        .drawer {
          padding:
            max(24px, env(safe-area-inset-top))
            24px
            calc(max(24px, env(safe-area-inset-bottom)) + var(--keyboard-offset))
            24px;
        }

        .drawer-card {
          width: min(100%, 1380px);
          height: min(calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 48px - var(--keyboard-offset)), 960px);
          border-radius: 40px;
        }

        .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;
        }

        .drawer-card.desktop-split .drawer-head-left > div {
          display: none;
        }

        .drawer-head-left {
          width: 100%;
          align-items: center;
          justify-content: flex-start;
          gap: 14px;
        }

        .drawer-head-left > div {
          display: block;
          min-width: 0;
          margin-left: auto;
          text-align: right;
        }

        .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: 12px;
        }

        .drawer-card.desktop-split #drawer-people-wrap,
        .drawer-card.desktop-split #drawer-checklist-section {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .drawer-card.desktop-split #drawer-people-wrap {
          grid-column: 1;
          grid-row: 3;
          min-width: 0;
        }

        .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-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: 5;
        }

        .drawer-card.desktop-split #drawer-view-info > .hidden {
          display: none !important;
        }

        .detail-main-title {
          font-size: 28px;
        }

        .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;
        }

        .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 #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 > h3 {
          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-attachments-section .detail-card {
          height: 100%;
          min-width: 0;
        }

        .drawer-card.desktop-split #drawer-checklist-section .detail-card {
          margin-top: 2px;
        }

        .detail-card-header {
          padding: 18px 20px 12px;
        }

        .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-attachments-section .detail-card.soft {
          min-height: 160px;
        }

        .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;
          background: linear-gradient(180deg, rgba(236, 241, 250, 0.86) 0%, rgba(232, 238, 249, 0.94) 100%);
        }

        .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 h3 {
          margin: 0;
          color: var(--navy);
          font-size: 18px;
          font-weight: 700;
        }

        .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 #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-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;
        }

        .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: 520px;
          padding: 22px 22px 18px;
          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;
        }
      }