@import url("moyoTypography.css?v=20261017-stable-font-1");
@import url("commonAvatar.css?v=20261009-avatar-v1");
/* =========================================================
   MOYO Design Tokens
   - 이 파일의 :root 값을 MOYO 전체 UI의 공식 기준으로 사용한다.
   - 화면별 CSS에서는 가능한 한 이 값을 재정의하지 않는다.
   ========================================================= */
:root {
    --moyo-project-type-icon-color:#64748b;
    --moyo-content-menu-width: 184px;
    --moyo-content-menu-text: #526985;
    --moyo-content-menu-font-size: 13px;
    --moyo-content-menu-accent: var(--moyo-color-primary);

    --moyo-record-count-size: 11px;
    --moyo-record-count-icon-size: 15px;
    --moyo-record-count-color: #8a98ad;
    --moyo-record-tool-height: 68px;
    --moyo-record-tool-icon-size: 28px;
    --moyo-record-tool-gap: 2px;
    --moyo-record-tool-icon-box: 32px;
    /* Brand / scope colors */
    --moyo-color-primary: #4A90E2;
    --moyo-notification-badge-background: #D92D48;
    /* Conversation surfaces share the calendar's quiet mint/blue/violet identity. */
    --moyo-conversation-wash: linear-gradient(115deg, #e9fbf7 0%, #f3f9ff 54%, #f1edff 100%);
    --moyo-conversation-selected: linear-gradient(135deg, #e5f7f3 0%, #eaf2ff 56%, #eee9fc 100%);
    --moyo-conversation-canvas: #f8fbfe;
    /* Page atmosphere taken from the MOYO profile, shared by space landing pages. */
    --moyo-space-atmosphere: radial-gradient(circle at 12% 10%, rgba(73,218,203,.24), transparent 34%), radial-gradient(circle at 88% 6%, rgba(91,151,245,.20), transparent 31%), linear-gradient(180deg,#f8fbff 0%,#ffffff 54%,#f7fbff 100%);
    --moyo-color-primary-hover: #397FCA;
    --moyo-color-primary-strong: #2563EB;
    --moyo-color-personal: #4A90E2;
    --moyo-color-friend: #F6B642;
    --moyo-color-friend-strong: #D99A17;
    --moyo-color-group: #39CDB5;
    --moyo-color-project: #8B5CF6;
    --moyo-record-accent: var(--moyo-color-personal);
    --moyo-record-tool-background:linear-gradient(135deg,#55d5ce12,#4288ef0d 52%,#6b5cf612);
    --moyo-record-tool-selected-background:linear-gradient(135deg,#55d5ce26,#4288ef1c 52%,#6b5cf626);

    /* Compatibility token for branded controls; people use commonAvatar.css. */
    --moyo-avatar-gradient: var(--moyo-group-avatar-background);

    /* Official MOYO primary CTA gradient: top-left -> bottom-right */
    --moyo-primary-gradient: linear-gradient(135deg, #39CDB5 0%, #4A90E2 54%, #7358E8 100%);
    --moyo-primary-gradient-hover: linear-gradient(135deg, #32BFA9 0%, #3F82D4 54%, #6758E6 100%);

    /* Semantic colors */
    --moyo-color-danger: #EF5B67;
    --moyo-color-danger-hover: #DC4554;
    --moyo-color-success: #22A06B;
    --moyo-color-warning: #F59E0B;

    /* Text */
    --moyo-color-text: #1F2937;
    --moyo-color-text-soft: #667085;
    --moyo-color-text-muted: #98A2B3;
    --moyo-color-text-inverse: #FFFFFF;
    /* Schedule and record dialogs share the same reading hierarchy. */
    --moyo-modal-title-color: #26313E;
    --moyo-modal-meta-color: #728097;
    --moyo-modal-icon-color: #647B99;
    /* Explorer hierarchy: neutral controls, quieter metadata, semantic state accents. */
    --moyo-explorer-title: var(--moyo-modal-title-color);
    --moyo-explorer-control: var(--moyo-color-text-soft);
    --moyo-explorer-meta: var(--moyo-modal-meta-color);
    --moyo-explorer-selected: var(--moyo-color-primary);
    --moyo-explorer-selection-background: linear-gradient(135deg,#edf9f5 0%,#eef5ff 52%,#f3effc 100%);
    --moyo-explorer-danger: var(--moyo-color-danger);
    --moyo-explorer-liked: #DC527C;

    /* Surface / background */
    --moyo-color-surface: #FFFFFF;
    --moyo-color-surface-soft: #F8FAFC;
    --moyo-color-surface-hover: #F7FBFF;
    --moyo-color-page: #F7F9FC;

    /* Border */
    --moyo-border-color: #E5EBF1;
    --moyo-border-color-strong: #D8E1EA;
    --moyo-border-width: 1px;
    --moyo-border: var(--moyo-border-width) solid var(--moyo-border-color);
    --moyo-border-strong: var(--moyo-border-width) solid var(--moyo-border-color-strong);

    /* Radius */
    --moyo-radius-xs: 8px;
    --moyo-radius-sm: 9px;
    --moyo-radius-md: 12px;
    --moyo-radius-lg: 18px;
    --moyo-radius-xl: 20px;
    --moyo-radius-pill: 999px;

    /* Shadow */
    --moyo-shadow-xs: 0 2px 8px rgba(15, 23, 42, .05);
    --moyo-shadow-sm: 0 6px 14px rgba(15, 23, 42, .06);
    --moyo-shadow-md: 0 8px 24px rgba(15, 23, 42, .07);
    --moyo-shadow-lg: 0 24px 70px rgba(15, 23, 42, .22);
    --moyo-shadow-primary: 0 6px 14px rgba(74, 144, 226, .18);

    /* Typography */
    --moyo-font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --moyo-font-size-xs: 12px;
    --moyo-font-size-sm: 13px;
    --moyo-font-size-md: 14px;
    --moyo-font-size-lg: 16px;
    --moyo-font-size-xl: 20px;
    --moyo-font-weight-regular: 400;
    --moyo-font-weight-medium: 500;
    --moyo-font-weight-semibold: 700;
    --moyo-font-weight-bold: 800;
    --moyo-font-weight-heavy: 900;
    --moyo-line-height-body: 1.55;

    /* Control heights */
    --moyo-control-height-compact: 34px;
    --moyo-control-height: 40px;
    --moyo-control-height-large: 44px;
    --moyo-control-padding-x: 16px;

    /* Focus */
    --moyo-focus-ring: 0 0 0 4px rgba(74, 144, 226, .12);
    --moyo-interaction-hover: #edf4ff;
    --moyo-interaction-hover-gradient: linear-gradient(135deg,#39cdb512 0%,#4a90e20d 54%,#7358e812 100%);
    --moyo-interaction-color: #3478f6;
    --moyo-interaction-pressed: #d6e6ff;
    --moyo-interaction-focus: #78a8f8;
    --moyo-interaction-duration: .18s;

    /* -----------------------------------------------------
       Legacy aliases
       기존 화면을 깨지 않고 2단계부터 순차적으로 공식 토큰으로 전환한다.
       ----------------------------------------------------- */
    --moyo-primary: var(--moyo-color-primary);
    --moyo-primary-hover: var(--moyo-color-primary-hover);
    --moyo-blue: var(--moyo-color-personal);
    --moyo-blue-strong: var(--moyo-color-primary-strong);
    --moyo-mint: var(--moyo-color-group);
    --moyo-purple: var(--moyo-color-project);
    --moyo-personal: var(--moyo-color-personal);
    --moyo-friend: var(--moyo-color-friend);
    --moyo-friend-deep: var(--moyo-color-friend-strong);
    --moyo-group: var(--moyo-color-group);
    --moyo-project: var(--moyo-color-project);
    --moyo-danger: var(--moyo-color-danger);
    --moyo-danger-hover: var(--moyo-color-danger-hover);
    --moyo-text: var(--moyo-color-text);
    --moyo-text-soft: var(--moyo-color-text-soft);
    --moyo-text-muted: var(--moyo-color-text-muted);
    --moyo-line: var(--moyo-border-color);
    --moyo-line-strong: var(--moyo-border-color-strong);
    --moyo-surface: var(--moyo-color-surface);
    --moyo-surface-soft: var(--moyo-color-surface-soft);
    --moyo-shadow: var(--moyo-shadow-md);
    --moyo-focus: var(--moyo-focus-ring);
}

body,
button,
input,
select,
textarea {
    font-family: var(--moyo-font-family);
}

body { color: var(--moyo-text); }

/* 페이지별 제목과 안내 문구의 밀도 통일 */
body.moyo-app-sidebar-enabled h1,
body.moyo-app-sidebar-enabled h2,
body.moyo-app-sidebar-enabled h3,
body.moyo-app-sidebar-enabled h4 {
    color: var(--moyo-text);
    letter-spacing: -.035em;
}

body.moyo-app-sidebar-enabled .section-header h3,
body.moyo-app-sidebar-enabled .board-title h3,
body.moyo-app-sidebar-enabled .create-card-head h2,
body.moyo-app-sidebar-enabled .settings-card-head h2,
body.moyo-app-sidebar-enabled .note-hero-title h2,
body.moyo-app-sidebar-enabled .work-hero-title h2 {
    font-weight: 900;
}

body.moyo-app-sidebar-enabled .section-header p,
body.moyo-app-sidebar-enabled .create-card-head p,
body.moyo-app-sidebar-enabled .settings-card-head p,
body.moyo-app-sidebar-enabled .note-hero-title p,
body.moyo-app-sidebar-enabled .work-board-help,
body.moyo-app-sidebar-enabled .schedule-help,
body.moyo-app-sidebar-enabled .template-help {
    color: var(--moyo-text-soft);
    font-size: var(--moyo-font-size-sm);
    font-weight: var(--moyo-font-weight-medium);
    line-height: var(--moyo-line-height-body);
}

/* 입력 요소 */
body.moyo-app-sidebar-enabled input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not(:where(#mcfSearchInput, #projectTaskSearch, #moyoChatPanel .mc-search input, #moyoChatPanel .mc-compose input, .moyo-note-list-search input, .moyo-file-search input, .fresh-quick-date-input, .moyo-record-note-title, .moyo-note-audio__title, .moyo-photo-editor input[data-edit-title], .moyo-record-link-quick input, .moyo-record-place-quick input, .mcf-month-picker-year input, .personal-explorer .file-search input, .project-create-page .project-period-control input, .project-create-page .member-search input, .project-studio--settings .settings-period-control input)),
body.moyo-app-sidebar-enabled select,
body.moyo-app-sidebar-enabled textarea,
body.moyo-app-sidebar-enabled .modal-input,
body.moyo-app-sidebar-enabled .modal-select {
    border: 1px solid var(--moyo-line-strong);
    border-radius: var(--moyo-radius-md);
    background: var(--moyo-color-surface);
    color: var(--moyo-text);
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

body.moyo-app-sidebar-enabled input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not(:where(#mcfSearchInput, #projectTaskSearch, #moyoChatPanel .mc-search input, #moyoChatPanel .mc-compose input, .moyo-note-list-search input, .moyo-file-search input, .fresh-quick-date-input, .moyo-record-note-title, .moyo-note-audio__title, .moyo-photo-editor input[data-edit-title], .moyo-record-link-quick input, .moyo-record-place-quick input, .mcf-month-picker-year input, .personal-explorer .file-search input, .project-create-page .project-period-control input, .project-create-page .member-search input, .project-studio--settings .settings-period-control input)):focus,
body.moyo-app-sidebar-enabled select:focus,
body.moyo-app-sidebar-enabled textarea:focus,
body.moyo-app-sidebar-enabled .modal-input:focus,
body.moyo-app-sidebar-enabled .modal-select:focus {
    border-color: var(--moyo-primary);
    box-shadow: var(--moyo-focus);
}

/* 공통 버튼 높이, 모서리, 글자 굵기 통일 */
body.moyo-app-sidebar-enabled :is(
    .btn, .btn-save, .btn-submit, .submit-btn, .write-btn, .back-btn, .list-btn,
    .top-list-btn, .cancel-btn, .btn-cancel, .add-work-btn, .work-add-bottom-btn,
    .project-member-invite-btn, .poll-create-btn, .poll-open-create-btn,
    .project-setting-btn, .modal-btn, .task-ui-btn, .action-btn, .post-action-btn
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--moyo-control-height);
    padding: 0 var(--moyo-control-padding-x);
    border-radius: var(--moyo-radius-md);
    font-size: var(--moyo-font-size-sm);
    font-weight: var(--moyo-font-weight-bold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

body.moyo-app-sidebar-enabled :is(
    .btn.primary, .btn-primary, .btn-save, .btn-submit, .submit-btn,
    .write-btn, .add-work-btn, .work-add-bottom-btn, .project-member-invite-btn,
    .poll-create-btn, .poll-open-create-btn, .modal-btn.primary, .task-ui-btn.primary
) {
    border: 1px solid var(--moyo-primary);
    background: var(--moyo-primary);
    color: var(--moyo-color-text-inverse);
    box-shadow: var(--moyo-shadow-primary);
}

body.moyo-app-sidebar-enabled :is(
    .btn.primary, .btn-primary, .btn-save, .btn-submit, .submit-btn,
    .write-btn, .add-work-btn, .work-add-bottom-btn, .project-member-invite-btn,
    .poll-create-btn, .poll-open-create-btn, .modal-btn.primary, .task-ui-btn.primary
):hover {
    background: var(--moyo-primary-hover);
    border-color: var(--moyo-primary-hover);
    transform: translateY(-1px);
}

body.moyo-app-sidebar-enabled :is(
    .btn.ghost, .btn-cancel, .cancel-btn, .back-btn, .list-btn, .top-list-btn,
    .modal-btn.cancel, .task-ui-btn.ghost, .task-ui-btn.secondary,
    .action-btn.edit-btn, .post-action-btn:not(.danger)
) {
    border: 1px solid var(--moyo-line-strong);
    background: #fff;
    color: #596579;
    box-shadow: none;
}

body.moyo-app-sidebar-enabled :is(
    .btn.ghost, .btn-cancel, .cancel-btn, .back-btn, .list-btn, .top-list-btn,
    .modal-btn.cancel, .task-ui-btn.ghost, .task-ui-btn.secondary,
    .action-btn.edit-btn, .post-action-btn:not(.danger)
):hover {
    border-color: #bfd3e7;
    background: var(--moyo-color-surface-hover);
    color: var(--moyo-primary);
}

body.moyo-app-sidebar-enabled :is(
    .btn.danger, .modal-btn.danger, .task-ui-btn.danger, .action-btn.delete-btn,
    .post-action-btn.danger, .modal-danger-btn, .btn-delete-text,
    .existing-file-delete-btn, .file-delete-btn, .file-remove-btn
) {
    border: 1px solid #ffd5d9;
    background: #fff7f8;
    color: var(--moyo-danger);
}

body.moyo-app-sidebar-enabled :is(
    .btn.danger, .modal-btn.danger, .task-ui-btn.danger, .action-btn.delete-btn,
    .post-action-btn.danger, .modal-danger-btn, .btn-delete-text,
    .existing-file-delete-btn, .file-delete-btn, .file-remove-btn
):hover {
    border-color: var(--moyo-danger);
    background: var(--moyo-danger);
    color: var(--moyo-color-text-inverse);
}

body.moyo-app-sidebar-enabled button:disabled,
body.moyo-app-sidebar-enabled .btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 작은 텍스트 링크는 버튼처럼 과장하지 않음 */
body.moyo-app-sidebar-enabled :is(.section-more-link, .detail-link-text, .project-setting-text-btn) {
    color: var(--moyo-text-soft);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
body.moyo-app-sidebar-enabled :is(.section-more-link, .detail-link-text, .project-setting-text-btn):hover {
    color: var(--moyo-primary);
}

/* 모달 공통 외형 */
body.moyo-app-sidebar-enabled :is(.my-modal-overlay, .modal-backdrop-custom, .poll-modal) {
    backdrop-filter: none;
}

body.moyo-app-sidebar-enabled .my-modal-overlay,
body.moyo-app-sidebar-enabled .modal-backdrop-custom {
    background: rgba(15, 23, 42, .48);
}

body.moyo-app-sidebar-enabled :is(.my-modal-content, .poll-modal-dialog, .work-modal) {
    border: 1px solid var(--moyo-line);
    border-radius: var(--moyo-radius-xl);
    background: var(--moyo-color-surface);
    box-shadow: var(--moyo-shadow-lg);
}

body.moyo-app-sidebar-enabled :is(.modal-title-row, .poll-modal-header, .work-modal-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body.moyo-app-sidebar-enabled :is(.modal-title-row h2, .modal-title-row h3, .poll-modal-header h3, .work-modal-header h3) {
    margin: 0;
    color: var(--moyo-text);
    font-size: var(--moyo-font-size-xl);
    font-weight: var(--moyo-font-weight-heavy);
    letter-spacing: -.035em;
}

body.moyo-app-sidebar-enabled :is(.modal-close-btn, .poll-modal-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f2f5f8;
    color: #667085;
    font-size: 20px;
    cursor: pointer;
}

body.moyo-app-sidebar-enabled :is(.modal-close-btn, .poll-modal-close):hover {
    background: #eaf2fa;
    color: var(--moyo-primary);
}

body.moyo-app-sidebar-enabled :is(.modal-actions, .modal-footer, .modal-footer-actions, .button-row, .btn-area) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* 카드 외형의 공통 최소 기준 */
body.moyo-app-sidebar-enabled :is(
    .section-card, .create-card, .settings-card, .note-card,
    .board-card, .poll-card, .work-card
) {
    border-color: var(--moyo-line);
}

@media (max-width: 760px) {
    body.moyo-app-sidebar-enabled :is(.modal-actions, .modal-footer-actions, .button-row, .btn-area) {
        flex-wrap: wrap;
    }
    body.moyo-app-sidebar-enabled :is(
        .btn, .btn-save, .btn-submit, .submit-btn, .write-btn,
        .cancel-btn, .btn-cancel, .modal-btn, .task-ui-btn
    ) {
        min-height: 42px;
    }
}

/* ===== MOYO visual consistency: solid primary buttons and avatars ===== */
:root {
    --moyo-record-tool-gap: 2px;
    --moyo-record-tool-icon-box: 32px;
    --moyo-primary-soft: #eef6ff;
    --moyo-primary-border: #cfe2f7;
}

/* Primary actions use one solid blue. Gradients are reserved for branding only. */
body.moyo-app-sidebar-enabled :is(
    .note-write-link, .empty-note-write-link, .empty-write-link,
    .write-btn, .project-member-invite-btn, .poll-create-btn,
    .poll-open-create-btn, .add-work-btn, .work-add-bottom-btn,
    .submit-btn, .btn-submit, .btn-save, .btn-primary,
    .modal-btn.primary, .task-ui-btn.primary
) {
    background: var(--moyo-primary);
    background-image: none;
    border-color: var(--moyo-primary);
    color: var(--moyo-color-text-inverse);
    box-shadow: 0 6px 14px rgba(74, 144, 226, .18);
}

body.moyo-app-sidebar-enabled :is(
    .note-write-link, .empty-note-write-link, .empty-write-link,
    .write-btn, .project-member-invite-btn, .poll-create-btn,
    .poll-open-create-btn, .add-work-btn, .work-add-bottom-btn,
    .submit-btn, .btn-submit, .btn-save, .btn-primary,
    .modal-btn.primary, .task-ui-btn.primary
):hover {
    background: var(--moyo-primary-hover);
    border-color: var(--moyo-primary-hover);
}

/* Decorative pseudo-elements from the old gradient avatar are disabled. */
body.moyo-app-sidebar-enabled .moyo-member-avatar::before,
body.moyo-app-sidebar-enabled .moyo-member-avatar::after {
    display: none;
}

/* Small count badges keep the same blue family. */
body.moyo-app-sidebar-enabled :is(
    .project-member-count, .project-poll-title-count
) {
    background: var(--moyo-primary-soft);
    color: var(--moyo-primary);
    border: 1px solid var(--moyo-primary-border);
}

/* ===== MOYO SCOPE COLORS =====
   공통 규칙: 개인=메인 블루, 워크스페이스=민트, 프로젝트=보라
   노트/캘린더/사진/게시판/알림에서 같은 변수를 재사용한다. */
:root {
    --moyo-record-tool-gap: 2px;
    --moyo-record-tool-icon-box: 32px;
    --moyo-blue: #4f7df7;
    --moyo-blue-soft: #eef4ff;
    --moyo-blue-border: #cfe0ff;
    --moyo-mint: #65d8c8;
    --moyo-mint-soft: #effcf9;
    --moyo-mint-border: #b8eee6;
    --moyo-purple: #8b7cff;
    --moyo-purple-soft: #f4f2ff;
    --moyo-purple-border: #ddd8ff;

    --moyo-scope-color: var(--moyo-blue);
    --moyo-scope-soft: var(--moyo-blue-soft);
    --moyo-scope-border: var(--moyo-blue-border);
}

.moyo-scope-private,
.note-scope-private {
    --moyo-scope-color: var(--moyo-blue);
    --moyo-scope-soft: var(--moyo-blue-soft);
    --moyo-scope-border: var(--moyo-blue-border);
}

.moyo-scope-workspace,
.note-scope-workspace {
    --moyo-scope-color: var(--moyo-mint);
    --moyo-scope-soft: var(--moyo-mint-soft);
    --moyo-scope-border: var(--moyo-mint-border);
}

.moyo-scope-project,
.note-scope-project {
    --moyo-scope-color: var(--moyo-purple);
    --moyo-scope-soft: var(--moyo-purple-soft);
    --moyo-scope-border: var(--moyo-purple-border);
}

.moyo-scope-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--moyo-scope-color);
    box-shadow: 0 0 0 4px var(--moyo-scope-soft);
}

.moyo-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid var(--moyo-scope-border);
    background: var(--moyo-scope-soft);
    color: var(--moyo-scope-color);
    font-size: var(--moyo-font-size-sm);
    font-weight: 700;
    white-space: nowrap;
}

.moyo-scope-leftbar {
    border-left: 4px solid var(--moyo-scope-color);
}

.moyo-scope-topline {
    position: relative;
}

.moyo-scope-topline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--moyo-scope-color), rgba(101, 216, 200, .55));
}

/* ===== MOYO HEADER UPLOADED PROFILE IMAGE =====
   작은 헤더 아바타는 링 없이 업로드 이미지만 깔끔하게 표시한다. */
.moyo-header .user-avatar.is-uploaded-profile:not(.no-image),
body.moyo-app-sidebar-enabled .moyo-header .user-avatar.is-uploaded-profile:not(.no-image),
body.moyo-app-sidebar-enabled header.moyo-header .user-avatar.is-uploaded-profile:not(.no-image) {
    padding: 0;
    border: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
}

.moyo-header .user-avatar.is-uploaded-profile:not(.no-image) img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: transparent;
}

/* =====================================================================
   MOYO COMMON STATE TOKENS v1
   Same semantic state = same visual language across group/project UI.
   Layout stays owned by each component stylesheet.
   ===================================================================== */
:root {
    --moyo-record-tool-gap: 2px;
    --moyo-record-tool-icon-box: 32px;
    --moyo-state-surface: #fbfcfe;
    --moyo-state-border: #dce5ef;
    --moyo-state-text: #7f8da1;
    --moyo-state-text-strong: #56667b;
    --moyo-state-info-bg: #f5f9ff;
    --moyo-state-info-border: #d9e8fb;
    --moyo-state-info-text: #52739a;
    --moyo-state-success-bg: #f1fbf7;
    --moyo-state-success-border: #ccefe1;
    --moyo-state-success-text: #2f806b;
    --moyo-state-warning-bg: #fff9ef;
    --moyo-state-warning-border: #f5dfb8;
    --moyo-state-warning-text: #9a6a20;
    --moyo-state-danger-bg: #fff7f8;
    --moyo-state-danger-border: #f1d0d5;
    --moyo-state-danger-text: #ad5561;
    --moyo-state-skeleton-base: #edf2f7;
    --moyo-state-skeleton-shine: #f8fafc;
}

@keyframes moyo-state-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.moyo-state-skeleton {
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--moyo-state-skeleton-base) 25%,
        var(--moyo-state-skeleton-shine) 42%,
        var(--moyo-state-skeleton-base) 62%);
    background-size: 220% 100%;
    animation: moyo-state-shimmer 1.25s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .moyo-state-skeleton { animation: none; }
}

/* Shared mobile content creation action. */
@media (min-width:721px) {
    body .mcf-toolbar-actions button.moyo-create-fab {
        width:auto; min-width:var(--moyo-create-min-width,104px); height:36px; min-height:36px; flex:0 0 auto;
        display:inline-flex; align-items:center; justify-content:center; gap:6px;
        padding:0 13px; border:0; border-radius:12px;
        background:var(--moyo-create-background,linear-gradient(135deg,#38CDB6 0%,#4A90E2 56%,#7368F6 100%));
        color:#fff; box-shadow:0 4px 12px rgba(74,144,226,.20);
    }
    body .mcf-toolbar-actions button.moyo-create-fab .mcf-add-icon { display:flex; align-items:center; justify-content:center; width:18px; height:18px; transform:none; }
    body .mcf-toolbar-actions button.moyo-create-fab .moyo-create-label { display:block; font-size:12px; font-weight:700; line-height:1; white-space:nowrap; }
    body .mcf-toolbar-actions button.moyo-create-fab:hover { filter:brightness(1.04); }
}
    .moyo-create-mobile-icon { display:none; }
    @media (max-width:720px) {
        body button.moyo-create-fab:is(.mcf-add-button,.moyo-btn) { --moyo-radius-md:50%; --moyo-control-height:56px; }
        body button.moyo-create-fab:is(.mcf-add-button,.moyo-btn) { position:fixed; right:calc(20px + env(safe-area-inset-right, 0px)); bottom:calc(32px + env(safe-area-inset-bottom, 0px)); z-index:90; display:flex; align-items:center; justify-content:center; width:56px; height:56px; min-width:56px; min-height:56px; padding:0; border:0; border-radius:50%; background:var(--moyo-create-background,linear-gradient(135deg,#38CDB6 0%,#4A90E2 56%,#7368F6 100%)); color:#fff; box-shadow:0 8px 18px rgba(74,144,226,.20); }
        body button.moyo-create-fab:is(.mcf-add-button,.moyo-btn) .moyo-create-label,
        body button.moyo-create-fab:is(.mcf-add-button,.moyo-btn) .moyo-create-desktop-icon { display:none; }
        body button.moyo-create-fab:is(.mcf-add-button,.moyo-btn) .moyo-create-mobile-icon,
        body button.moyo-create-fab:is(.mcf-add-button,.moyo-btn) .mcf-add-icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px; margin:0; padding:0; transform:none; line-height:1; }
        body button.moyo-create-fab:is(.mcf-add-button,.moyo-btn):active { transform:scale(.95); }
        body button.moyo-create-fab:is(.mcf-add-button,.moyo-btn):focus-visible { outline:3px solid #a8c8ff; outline-offset:4px; }
        body .file-explorer:not(.personal-explorer) .file-explorer__shell { padding-bottom:100px; }
    }
@media (max-width:720px) {
    body button.moyo-create-fab:is(.mcf-add-button,.moyo-btn) svg { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
}

.moyo-create-fab .mcf-add-icon svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* Creation actions retain their brand color in interactive states. */
body .mcf-toolbar-actions button.moyo-create-fab:is(:hover,:focus,:active) { background:var(--moyo-create-background,linear-gradient(135deg,#38CDB6 0%,#4A90E2 56%,#7368F6 100%)); color:#fff; border:0; box-shadow:0 8px 18px rgba(74,144,226,.20); }

/* Shared circular icon actions. Opt in with moyo-icon-button and moyo-close-button. */
body button.moyo-icon-button {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; flex:0 0 34px; padding:0;
    border:0; border-radius:50%; background:transparent; color:#667085;
    box-shadow:none; cursor:pointer; transition:background-color .18s ease,color .18s ease;
}
body button.moyo-icon-button:focus-visible { background:var(--moyo-interaction-hover); color:var(--moyo-interaction-color); outline:2px solid var(--moyo-interaction-focus); outline-offset:2px; }
@media(hover:hover) and (pointer:fine) {
    body button.moyo-icon-button:not(:disabled):hover { color:var(--moyo-interaction-color); }
}
body button.moyo-icon-button.moyo-close-button { position:static; transform:none; width:var(--moyo-modal-close-size,34px); height:var(--moyo-modal-close-size,34px); flex-basis:var(--moyo-modal-close-size,34px); font-size:26px; line-height:1; }
@media(max-width:700px) {
    :root { --moyo-modal-close-size:44px; --moyo-modal-close-inset:20px; }
}
body button.moyo-icon-button > svg { width:18px; height:18px; }
@media(prefers-reduced-motion:reduce) { body button.moyo-icon-button { transition:none; } }

/* System-wide interaction foundation. Geometry and brand artwork stay local.
   New controls opt into moyo-action--icon, --menu or --plain.
   Local components consume the state variables rather than overriding states. */
body :where(button, a[role="button"], [role="button"][tabindex]) {
    transition:filter var(--moyo-interaction-duration) ease, background-color var(--moyo-interaction-duration) ease, color var(--moyo-interaction-duration) ease;
}
body :where(button, a[role="button"], [role="button"][tabindex]):focus-visible {
    outline:2px solid var(--moyo-interaction-focus);
    outline-offset:2px;
}
body :where(input, select, textarea):focus-visible {
    outline:2px solid var(--moyo-interaction-focus);
    outline-offset:2px;
}
body :where(button, a[role="button"], [role="button"][tabindex]):not(:disabled):not([aria-disabled="true"]):active {
    filter:brightness(.94);
}
body .moyo-action {
    background:var(--moyo-action-background,transparent);
    color:var(--moyo-action-color,inherit);
    cursor:pointer;
}
body .moyo-action--primary {
    --moyo-action-background:var(--moyo-primary-gradient);
    --moyo-action-hover-background:var(--moyo-primary-gradient-hover);
    --moyo-action-color:var(--moyo-color-text-inverse);
    --moyo-action-hover-color:var(--moyo-color-text-inverse);
    --moyo-interaction-pressed:var(--moyo-primary-gradient-hover);
}
body .moyo-action--icon {
    --moyo-action-radius:50%;
    border-radius:var(--moyo-action-radius);
}
body .moyo-action--record {
    --moyo-action-hover-background:linear-gradient(135deg,#55d5ce19,#4288ef14 52%,#6b5cf619);
}
/* Labelled icon actions highlight the circular icon, never the whole tile. */
body .moyo-action--icon-label { background:transparent; }
body .moyo-action--icon-label>i {
    border-radius:50%;
    background:var(--moyo-action-background,transparent);
    color:var(--moyo-action-color,inherit);
    transition:background-color var(--moyo-interaction-duration) ease,color var(--moyo-interaction-duration) ease;
}
body .moyo-action--icon:focus-visible,
body .moyo-action--icon:not(:disabled):active,
body .moyo-action--icon-label:focus-visible,
body .moyo-action--icon-label:not(:disabled):active {
    --moyo-action-color:var(--moyo-interaction-color);
}
body .moyo-action:focus-visible {
    --moyo-action-background:var(--moyo-action-hover-background,var(--moyo-interaction-hover));
    outline:2px solid var(--moyo-interaction-focus);
    outline-offset:2px;
}
body .moyo-action:not(:disabled):not([aria-disabled="true"]):active {
    --moyo-action-background:var(--moyo-interaction-pressed);
}
body .moyo-action--menu[aria-pressed="true"] {
    --moyo-action-background:var(--moyo-interaction-hover);
    font-weight:600;
}
@media(hover:hover) and (pointer:fine) {
    body :where(button, a[role="button"], [role="button"][tabindex]):not(:disabled):not([aria-disabled="true"]):not(:active):hover { filter:brightness(.97); }
    body .moyo-action:not(:disabled):not([aria-disabled="true"]):not(:active):hover {
        filter:none;
        --moyo-action-color:var(--moyo-action-hover-color,var(--moyo-interaction-color));

    }
    body .moyo-action--record:not(:disabled):not(:active):hover { filter:none; }
    body .moyo-action--icon:not(:disabled):not([aria-disabled="true"]):hover,
    body .moyo-action--icon-label:not(:disabled):hover { --moyo-action-color:var(--moyo-interaction-color); filter:none; }
}
body .moyo-action:disabled { cursor:not-allowed; }
/* Text links: keep the default text color; short names react without reflow. */
body a.moyo-text-link,
body a[href*="/users/profile"]:not(:has(img,svg,[class*="avatar"],[id*="Avatar"])) {
    text-decoration:none;
    transition:color var(--moyo-interaction-duration) ease,transform var(--moyo-interaction-duration) ease;
}
body a.moyo-text-link--short,
body a[href*="/users/profile"]:not(:has(img,svg,[class*="avatar"],[id*="Avatar"])) {
    display:inline-block;
    transform-origin:left center;
}
body a.moyo-text-link:focus-visible,
body a[href*="/users/profile"]:not(:has(img,svg,[class*="avatar"],[id*="Avatar"])):focus-visible {
    color:var(--moyo-interaction-color);
    text-decoration:none;
    outline:2px solid var(--moyo-interaction-focus);
    outline-offset:2px;
}
body a.moyo-text-link--short:focus-visible,
body a[href*="/users/profile"]:not(:has(img,svg,[class*="avatar"],[id*="Avatar"])):focus-visible { transform:scale(1.02); }
/* A profile's picture and name are both entry points, including default avatars. */
body a[href*="/users/profile"] :is(#freshItemDetailIdentityAvatar,.fresh-person-avatar),
body a.moyo-avatar-link,
body a[href*="/users/profile"]>.moyo-avatar,
body a[href*="/users/profile"]>img {
    border-radius:50%;
    transition:transform var(--moyo-interaction-duration) ease,box-shadow var(--moyo-interaction-duration) ease;
}
body a[href*="/users/profile"]:focus-visible :is(#freshItemDetailIdentityAvatar,.fresh-person-avatar),
body a.moyo-avatar-link:focus-visible,
body a[href*="/users/profile"]:focus-visible>.moyo-avatar,
body a[href*="/users/profile"]:focus-visible>img {
    transform:scale(1.04);
    box-shadow:0 2px 6px rgba(31,41,55,.16);
}
@media(hover:hover) and (pointer:fine) {
    body a.moyo-text-link:hover,
    body a[href*="/users/profile"]:not(:has(img,svg,[class*="avatar"],[id*="Avatar"])):hover { color:var(--moyo-interaction-color);text-decoration:none; }
    body a.moyo-text-link--short:hover,
    body a[href*="/users/profile"]:not(:has(img,svg,[class*="avatar"],[id*="Avatar"])):hover { transform:scale(1.02); }
    body a[href*="/users/profile"]:hover :is(#freshItemDetailIdentityAvatar,.fresh-person-avatar),
    body a.moyo-avatar-link:hover,
    body a[href*="/users/profile"]:hover>.moyo-avatar,
    body a[href*="/users/profile"]:hover>img { transform:scale(1.04);box-shadow:0 2px 6px rgba(31,41,55,.16); }
    body a[href*="/users/profile"]:hover .fresh-item-detail-person>span:last-child { color:var(--moyo-interaction-color); }
}
@media(prefers-reduced-motion:reduce) {
    body :where(button, a[role="button"], [role="button"][tabindex]) { transition:none; }
    body a.moyo-text-link,
    body a[href*="/users/profile"]:not(:has(img,svg,[class*="avatar"],[id*="Avatar"])) { transition:none;transform:none; }
    body a[href*="/users/profile"] :is(#freshItemDetailIdentityAvatar,.fresh-person-avatar),
    body a.moyo-avatar-link,
    body a[href*="/users/profile"]>.moyo-avatar,
    body a[href*="/users/profile"]>img { transition:none;transform:none; }
}

/* Profile navigation is a text link, not an icon button.
   The avatar and name share one destination; surrounding metadata is plain text. */
/* Profile navigation: avatar and name share one link, without button styling. */
body a.moyo-profile-link {
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-width:0;
    flex:0 0 auto;
    white-space:nowrap;
    padding:0;
    margin:0;
    border:0;
    border-radius:0;
    background:none;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}
body .moyo-profile-link__name,
body a.moyo-profile-link[href]:hover .moyo-profile-link__name,
body a.moyo-profile-link[href]:focus-visible .moyo-profile-link__name {
    color:inherit;
    text-decoration:none;
}
body a.moyo-profile-link:not([href]) { cursor:default; }
body a.moyo-profile-link:focus-visible {
    outline:2px solid var(--moyo-interaction-focus);
    outline-offset:3px;
}
/* No avatar enlargement, shadows, fades, background or typographic changes on hover. */
body a.moyo-profile-link[href] #freshItemDetailIdentityAvatar,
body a.moyo-profile-link[href]:hover #freshItemDetailIdentityAvatar,
body a.moyo-profile-link[href]:focus-visible #freshItemDetailIdentityAvatar,
body a.moyo-profile-link[href] #freshItemDetailIdentityAvatar > * {
    transform:none;
    box-shadow:none;
    filter:none;
    opacity:1;
}
@media(hover:hover) and (pointer:fine) {
    body a.moyo-profile-link[href]:hover {
        background:none;
        color:inherit;
        text-decoration:none;
        cursor:pointer;
    }
}

/* Shared role-based feedback: menu actions are commands, not navigation links. */
body button.moyo-action--menu:not(:disabled):not([aria-disabled="true"]) {
    border-radius:6px;
    transition:background-color var(--moyo-interaction-duration) ease,color var(--moyo-interaction-duration) ease;
}
@media(hover:hover) and (pointer:fine) {
    body button.moyo-action--menu:not(:disabled):not([aria-disabled="true"]):hover {
        filter:none;
    }
}
/* Inoperative actions must not suggest a click or receive hover emphasis. */
body button.moyo-action:disabled,
body button.moyo-action[aria-disabled="true"] {
    cursor:default;
    filter:none;
    opacity:.38;
    --moyo-action-background:transparent;
    --moyo-action-color:#7b899d;
}
@media(hover:hover) and (pointer:fine) {
    body button.moyo-action:disabled:hover,
    body button.moyo-action[aria-disabled="true"]:hover {
        filter:none;
        --moyo-action-background:transparent;
        --moyo-action-color:#7b899d;
    }
}
@media(prefers-reduced-motion:reduce) {
    body button.moyo-action--menu {transition:none;}
}
/* Consistent close glyph and 44px hit area across detail, records and history. */
body button.moyo-modal-close-action{width:28px;height:28px;min-width:28px;min-height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--moyo-action-color,#526985);cursor:pointer;}
body button.moyo-modal-close-action:before{content:"";position:absolute;inset:-8px;border-radius:50%;background:var(--moyo-action-background,transparent);pointer-events:auto;}
body button.moyo-modal-close-action>svg{position:relative;z-index:1;pointer-events:none;display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
body :where(button.moyo-modal-close-action){position:relative;}

/* Keep the page anchored until the last visible modal closes, including iOS Safari. */
html.moyo-overlay-scroll-locked {overflow:hidden;overscroll-behavior:none;}
html.moyo-overlay-scroll-locked body {position:fixed;top:var(--moyo-scroll-lock-top,0px);left:0;right:0;width:100%;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;padding-right:calc(var(--moyo-scroll-lock-padding,0px) + var(--moyo-scroll-lock-gutter,0px));}

/* Shared chat launcher for modal surfaces. */
.moyo-modal-inbox-button { position:fixed; top:var(--moyo-modal-inbox-top,16px); right:var(--moyo-modal-inbox-right,20px); z-index:14620; display:grid; place-items:center; box-sizing:border-box; width:44px; height:44px; padding:0; border:1px solid #e0e9f5; border-radius:50%; background:#fff; color:#4a83d8; font-size:19px; cursor:pointer; box-shadow:0 6px 24px #263b5726; transition:background .2s,color .2s,transform .2s; }
.moyo-modal-inbox-button[hidden] { display:none; }
.moyo-modal-inbox-button.is-open { background:#edf5ff; color:#346ffe; }
@media (hover:hover) { .moyo-modal-inbox-button:hover { background:#edf5ff; color:#346ffe; } }
.moyo-modal-inbox-button:active { transform:scale(.95); }
.moyo-modal-inbox-button:focus-visible { outline:2px solid #4a90e2; outline-offset:3px; }

/* Shared explorer surface motion. */
@keyframes moyo-surface-enter{from{opacity:0;transform:translateY(6px) scale(.99);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes moyo-overlay-enter{from{opacity:0;}to{opacity:1;}}
@media(prefers-reduced-motion:no-preference){
 .moyo-photo-library-flow[open],.moyo-photo-picker{animation:moyo-surface-enter .18s cubic-bezier(.2,.7,.2,1);}
 .moyo-photo-library-flow::backdrop,.moyo-photo-picker-backdrop,.is-locations-open .explorer-location-backdrop{animation:moyo-overlay-enter .18s ease-out;}
 .moyo-photo-image-adjustments:not([hidden]),.moyo-photo-editor:not([hidden]),.moyo-photo-side-panel:not([hidden]){animation:moyo-surface-enter .16s ease-out;}
 .moyo-camera video{transition:opacity .2s ease-out;}
 .moyo-camera[data-ready="false"] video{opacity:0;}
}

@keyframes moyo-overlay-exit{from{background-color:rgba(30,42,65,.36);backdrop-filter:blur(4px);}to{background-color:transparent;backdrop-filter:blur(0);}}
@media(prefers-reduced-motion:no-preference){.moyo-photo-library-flow[data-closing="true"]::backdrop{animation:moyo-overlay-exit .15s ease-out forwards;}}

/* Shared schedule/record badges retain their actual scope when mounted under body. */
[data-record-scope="PERSONAL"] {--moyo-record-accent:var(--moyo-color-personal);}
[data-record-scope="GROUP"] {--moyo-record-accent:var(--moyo-color-group);}
[data-record-scope="PROJECT"] {--moyo-record-accent:var(--moyo-color-project);}

/* Project content dialogs inherit the project accent even when mounted under body. */
.moyo-note-modal[data-content-scope="PROJECT"],.moyo-photo-library-flow[data-content-scope="PROJECT"]{--moyo-interaction-focus:#a486df;--moyo-interaction-hover:#f3edfc;--moyo-interaction-pressed:#e9def8;--moyo-content-menu-accent:#8561ce;}


/* Existing personal-calendar people display, shared with project and mini calendars. */
.mcf-event-avatar {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
    color: #fff;
    font-size: 9px;
    font-weight: 850;
}
.mcf-event-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
    background: transparent;
}
.mcf-event-avatar.is-fallback {
    background: var(--moyo-person-avatar-background);
    color: var(--moyo-person-avatar-color);
    box-shadow:none;
}
.mcf-event-people {
    height: 17px;
    display: inline-flex;
    align-items: center;
    padding-right: 1px;
    flex: 0 0 auto;
}
.mcf-event-people .mcf-event-avatar {
    position: relative;
    z-index: calc(4 - var(--mcf-event-avatar-index, 0));
    margin-left: calc(var(--mcf-event-avatar-index, 0) * -5px);
    box-shadow:none;
}
.mcf-event-people-more {
    min-width: 14px;
    height: 14px;
    margin-left: -2px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #806811;
    background: rgba(255, 241, 175, .94);
    font-size: 7px;
    font-weight: 900;
    box-shadow: 0 0 0 1px rgba(255,255,255,.96);
}
.mcf-event-avatar.is-friend {
    box-shadow:none;
}
@media(max-width:760px){.mcf-event-avatar{width:18px;height:18px;flex-basis:18px;font-size:10px;}}
.mcf-event-people.mcf-project-icon{color:inherit;font-size:14px;}
.moyo-calendar-item-kind{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;margin-left:auto;font-size:14px;line-height:1;}

/* Cover the layout area exposed below a keyboard-resized mobile modal. */
.moyo-mobile-keyboard-cover{position:fixed;left:0;right:0;bottom:0;z-index:2147482999;background:var(--moyo-color-surface,#fff);pointer-events:none}

.moyo-note-media-meta{display:flex;align-items:center;gap:6px;margin-top:0;color:#7b8ba4;font-size:10px;line-height:16px;}
.moyo-note-media-meta>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.moyo-note-media-meta svg{width:14px;height:14px;flex:0 0 14px;}

.moyo-note-list-heading{display:flex;align-items:center;gap:8px;width:100%;min-width:0;}
.moyo-note-list-heading>strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.moyo-note-list-heading>.moyo-note-media-meta,.moyo-record-note-list-title>.moyo-note-media-meta{flex:0 0 auto;margin-left:auto;}