/* Sections outside the calendar, measured against PostMyPost at the same unit (12/14/16px). */
:root { --pmp-field: #2c333a; --pmp-field-label: #a9b2bc; --pmp-field-text: #e2e5e9; --pmp-title: #eef0f2; --pmp-help: #21262b; --pmp-union: #2a3037; --pmp-union-hover: #2c333a; --pmp-union-active: #2f353d; --pmp-union-text: #a9b2bc; }
:root[data-theme=light] { --pmp-field: #e8e8e8; --pmp-field-label: #666; --pmp-field-text: #454545; --pmp-title: #000; --pmp-help: #fff; --pmp-union: #f5f5f5; --pmp-union-hover: #e8e8e8; --pmp-union-active: #dbdbdb; --pmp-union-text: #454545; }

/* Project colours in the PostMyPost palette and order. Stored names stay unchanged. */
.color-gray { background: #80868e; color: #fff; }
.color-orange { background: #fa7c3d; color: #fff; }
.color-yellow { background: #fbc156; color: #fff; }
.color-green { background: #73c657; color: #fff; }
.color-brown { background: #fa9e2e; color: #fff; }
.color-purple { background: #ef61b6; color: #fff; }
.color-red { background: #fb5b68; color: #fff; }
.color-pink { background: #d63359; color: #fff; }
.color-teal { background: #aec22e; color: #fff; }
.color-cyan { background: #a2cf4a; color: #fff; }
.color-indigo { background: #9a8fc7; color: #fff; }
.color-blue { background: #3a91e9; color: #fff; }
[data-theme=light] .color-gray { background: #b6babe; } [data-theme=light] .color-orange { background: #ff7a38; } [data-theme=light] .color-yellow { background: #ffc252; }
[data-theme=light] .color-green { background: #72c954; } [data-theme=light] .color-brown { background: #ff9f29; } [data-theme=light] .color-purple { background: #f35eb7; }
[data-theme=light] .color-red { background: #ff5765; } [data-theme=light] .color-pink { background: #da2f57; } [data-theme=light] .color-teal { background: #b1c62a; }
[data-theme=light] .color-cyan { background: #a4d246; } [data-theme=light] .color-indigo { background: #998dc8; } [data-theme=light] .color-blue { background: #3591ed; }

/* Titles live inside the page: the header keeps only the account avatar. */
.workspace:is([data-view=home],[data-view=accounts],[data-view=team],[data-view=settings],[data-view=projects]) #page-title { visibility: hidden; }
.workspace:is([data-view=home],[data-view=accounts],[data-view=team],[data-view=settings],[data-view=projects]) .page-header { border-bottom-width: 0; background: var(--bg); }
.pmp-page { padding: var(--ui) calc(2.15 * var(--ui)) var(--ui); }
.pmp-intro { max-width: calc(50 * var(--ui)); margin-bottom: calc(2 * var(--ui)); }
.pmp-title { margin: 0 0 var(--ui); font-size: calc(1.625 * var(--ui)); line-height: 1.2; font-weight: 700; color: var(--pmp-title); }
.pmp-subtitle { margin: 0 0 calc(2 * var(--ui)); font-size: calc(1.5 * var(--ui)); line-height: 1.2; font-weight: 700; color: var(--pmp-title); }
.pmp-text { margin: 0 0 var(--ui); font-size: var(--ui); line-height: 1.4; color: var(--ink); }
.pmp-actions-row { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--ui)); padding: calc(.25 * var(--ui)); }
.pmp-page .primary, .pmp-page .secondary { min-height: calc(2.625 * var(--ui)); padding: 0 calc(.5 * var(--ui)); border-radius: calc(.625 * var(--ui)); font-size: var(--ui); font-weight: 400; }
.pmp-page .primary > span, .pmp-page .secondary > span { padding: 0 calc(.5 * var(--ui)); }

/* Lists of accounts and members: 80 units, 53px rows, avatar 2.625 units. */
.pmp-list { max-width: calc(80 * var(--ui)); }
.pmp-list-item { display: flex; align-items: center; gap: calc(.5 * var(--ui)); min-height: calc(3.785714 * var(--ui)); padding: 0 calc(.5 * var(--ui)); margin-bottom: calc(.25 * var(--ui)); border-radius: calc(.625 * var(--ui)); }
.pmp-list-item:hover { background: var(--hover); }
.pmp-avatar { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: calc(2.625 * var(--ui)); height: calc(2.625 * var(--ui)); border-radius: 50%; font-size: var(--ui); font-weight: 400; }
.pmp-avatar:not([class*="color-"]) { color: #d0d5dc; background: #5f6872; }
.pmp-avatar.member { color: #fff; background: #b5b9be; }
.pmp-title-lg { margin-bottom: calc(2 * var(--ui)); }
.pmp-menu-space { flex: 0 0 calc(2.625 * var(--ui)); }
.pmp-list .project-row { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.pmp-list .project-row > .pmp-avatar-info { margin-left: 0; }
.pmp-avatar-service { position: absolute; right: calc(-.1 * var(--ui)); bottom: calc(-.1 * var(--ui)); display: grid; place-items: center; width: calc(1.3125 * var(--ui)); height: calc(1.3125 * var(--ui)); border-radius: 50%; color: #fff; background: #0080ff; }
.pmp-avatar-service.telegram, .pmp-avatar-service.telegram_chat { background: #3f9ed9; }
.pmp-avatar-service.discord { background: #5966f3; }
.pmp-avatar-service svg { width: calc(.714286 * var(--ui)); height: calc(.714286 * var(--ui)); }
.pmp-avatar-info { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: calc(.875 * var(--ui)); line-height: 1.2; }
.pmp-avatar-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pmp-avatar-description { line-height: 1.4; color: var(--pmp-icon); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pmp-list-item.padded { padding-left: var(--ui); }
.pmp-tags { display: flex; gap: calc(.1 * var(--ui)); margin-left: auto; }
.pmp-tag { font-size: calc(.85 * var(--ui)); line-height: 1.4; padding: .125em .375em; border-radius: .3125em; color: #fff; background: #b2b6bd; }
.pmp-tag.blue { background: #67bee9; }
.pmp-list-item .account-menu { margin-left: auto; }
.pmp-tags + .account-menu { margin-left: 0; }
.pmp-list-item .account-menu summary { display: grid; place-items: center; width: calc(2.625 * var(--ui)); height: calc(2.625 * var(--ui)); padding: 0; border-radius: calc(.625 * var(--ui)); color: var(--pmp-icon); }
.pmp-list-item .account-menu summary:hover { background: var(--button); }
.pmp-list-item .account-menu summary svg { width: calc(1.5 * var(--ui)); height: calc(1.5 * var(--ui)); }
.pmp-list-item .account-menu > div { top: calc(2.75 * var(--ui)); padding: calc(.75 * var(--ui)); border: 0; border-radius: calc(.75 * var(--ui)); background: var(--raised); box-shadow: 0 0 1em #0000004d; width: max-content; min-width: calc(14 * var(--ui)); }
.pmp-list-item .account-menu button { min-height: calc(2.625 * var(--ui)); padding: 0 calc(.75 * var(--ui)); border-radius: calc(.625 * var(--ui)); font-size: var(--ui); font-weight: 400; color: var(--ink); }
.pmp-list-item .account-menu button.danger { color: var(--red); }
.pmp-section-label { margin: calc(2 * var(--ui)) 0 var(--ui); font-size: var(--ui); font-weight: 600; color: var(--pmp-title); }

/* Fields with the label inside, as in PostMyPost forms. */
.pmp-form { max-width: calc(37.5 * var(--ui)); }
.pmp-form-row { margin-bottom: calc(1.25 * var(--ui)); }
.pmp-field { position: relative; display: block; padding: 2px; border-radius: calc(.625 * var(--ui)); background: var(--pmp-field); font-weight: 400; }
.pmp-field-label { position: absolute; z-index: 1; left: 2px; top: 2px; padding: calc(.4375 * var(--ui)) calc(.875 * var(--ui)); font-size: calc(.75 * var(--ui)); line-height: 1.4; color: var(--pmp-field-label); pointer-events: none; }
.pmp-field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) { display: block; width: 100%; height: calc(3.2125 * var(--ui)); min-height: 0; padding: calc(1.4375 * var(--ui)) calc(.875 * var(--ui)) calc(.375 * var(--ui)); border: 0; border-radius: calc(.482143 * var(--ui)); background: transparent; color: var(--pmp-field-text); font-size: var(--ui); line-height: 1.4; }
.pmp-field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select):focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }
.pmp-field select option { background: var(--raised); color: var(--ink); }
.pmp-colors { display: flex; flex-wrap: wrap; gap: calc(.375 * var(--ui)); border: 0; padding: 0; margin: 0 0 calc(1.25 * var(--ui)); }
.pmp-colors label { position: relative; display: grid; place-items: center; width: calc(2 * var(--ui)); height: calc(2 * var(--ui)); border-radius: 50%; cursor: pointer; }
.pmp-colors input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pmp-colors label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.pmp-colors svg { width: calc(1.25 * var(--ui)); height: calc(1.25 * var(--ui)); color: #fff; visibility: hidden; stroke-width: 2.5; }
.pmp-colors label:has(input:checked) svg { visibility: visible; }
.pmp-form-actions { display: flex; align-items: center; gap: calc(.5 * var(--ui)); padding-top: calc(.75 * var(--ui)); }
.pmp-form .error:empty { display: none; }
.pmp-form-actions > :last-child:not(:first-child) { margin-left: auto; }
.pmp-project-avatar { display: flex; align-items: center; gap: calc(.75 * var(--ui)); margin-bottom: calc(1.25 * var(--ui)); }
.pmp-project-avatar .project-avatar { width: calc(6 * var(--ui)); height: calc(6 * var(--ui)); font-size: calc(1.6 * var(--ui)); }
.pmp-group + .pmp-group { margin-top: calc(5.25 * var(--ui)); }

/* Settings sub-menu lives in the left menu, like the content sub-menu. */
.workspace .settings-subnav { padding: 0 0 calc(1.25 * var(--ui)) calc(.875 * var(--ui)); }

/* Header bell and user avatar, as in PostMyPost: 2.625 units, red counter, gray avatar. */
.page-header .user-avatar { margin-left: calc(-.375 * var(--ui)); padding: 0; border: 0; color: #fff; background: #b5b9be; font-weight: 400; cursor: pointer; }
.notify-wrap { position: relative; display: flex; }
.page-header .notify-button { position: relative; display: grid; place-items: center; width: calc(2.625 * var(--ui)); height: calc(2.625 * var(--ui)); min-height: 0; padding: 0; border-radius: calc(.625 * var(--ui)); color: var(--pmp-icon); line-height: 0; }
.page-header .notify-button > [data-icon] { display: grid; }
.notify-badge { position: absolute; top: 0; right: 0; min-width: calc(1.03125 * var(--ui)); padding: 0 calc(.19336 * var(--ui)); border-radius: 999px; color: #fff; background: #fb5050; font-size: calc(.6875 * var(--ui)); line-height: calc(1.03125 * var(--ui)); text-align: center; }
.notifications-backdrop { position: fixed; inset: 0; z-index: 84; background: rgb(0 0 0 / .7); }
.notifications-panel { position: fixed; z-index: 85; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(calc(28.125 * var(--ui)), 100vw); max-width: none; max-height: none; padding: 0; overflow: hidden; border-radius: 0; color: var(--ink); background: var(--bg); box-shadow: none; text-align: left; line-height: 1.4; }
.notifications-head { display: flex; align-items: center; gap: calc(.5 * var(--ui)); flex: 0 0 auto; height: calc(4.625 * var(--ui)); padding: var(--ui); background: var(--paper); }
.notifications-head h2 { margin: 0 auto 0 0; font-size: var(--ui); font-weight: 400; color: var(--ink); }
.notifications-clear { height: calc(2.625 * var(--ui)); padding: 0 calc(.5 * var(--ui)); border: 0; border-radius: calc(.625 * var(--ui)); color: var(--pmp-union-text); background: var(--pmp-union); font-size: var(--ui); }
.notifications-clear:hover { background: var(--pmp-union-hover); }
.notifications-head .notifications-close { width: calc(2.625 * var(--ui)); min-width: 0; min-height: calc(2.625 * var(--ui)); padding: 0; border-radius: 50%; color: var(--pmp-icon); }
.notifications-close svg { width: calc(1.5 * var(--ui)); height: calc(1.5 * var(--ui)); }
.notifications-body { flex: 1 1 auto; overflow-y: auto; padding: var(--ui); }
.notifications-filter { position: relative; margin-bottom: var(--ui); }
.notifications-kind { display: inline-flex; align-items: center; height: calc(2.625 * var(--ui)); padding: 0 calc(.25 * var(--ui)) 0 calc(.5 * var(--ui)); border: 0; border-radius: calc(.625 * var(--ui)); color: var(--pmp-union-text); background: var(--pmp-union-active); font-size: var(--ui); }
.notifications-kind [data-icon], .notifications-kind svg { width: calc(1.5 * var(--ui)); height: calc(1.5 * var(--ui)); }
.notifications-kinds { position: absolute; z-index: 2; top: calc(100% + 4px); left: 0; min-width: calc(12.15 * var(--ui)); padding: calc(.75 * var(--ui)); border-radius: calc(.75 * var(--ui)); background: var(--raised); box-shadow: 0 0 var(--ui) #0000004d; }
.notifications-kinds button { display: flex; align-items: center; justify-content: space-between; gap: var(--ui); width: 100%; min-height: calc(2.625 * var(--ui)); padding: 0 calc(.5 * var(--ui)); border: 0; border-radius: calc(.625 * var(--ui)); color: var(--ink); background: transparent; font-size: var(--ui); text-align: left; }
.notifications-kinds button:hover, .notifications-kinds button:focus-visible, .notifications-kinds [aria-checked=true] { background: var(--hover); }
.notifications-kinds span { color: var(--pmp-date); }
.notification-card { display: block; width: 100%; margin: 0 0 var(--ui); padding: calc(.75 * var(--ui)); border: 0; border-radius: calc(.625 * var(--ui)); color: var(--ink); background: var(--raised); font-size: var(--ui); text-align: left; }
.notification-card:hover, .notification-card:focus-visible { background: var(--hover); }
.notification-project { display: flex; align-items: center; gap: calc(.5 * var(--ui)); height: calc(1.5 * var(--ui)); color: var(--muted); font-size: calc(.875 * var(--ui)); }
.notification-project .project-avatar { width: calc(1.5 * var(--ui)); height: calc(1.5 * var(--ui)); color: #fff; font-size: calc(.5714 * var(--ui)); font-weight: 400; }
.notification-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #fb5050; }
.notification-line { display: flex; align-items: baseline; gap: var(--ui); margin-top: calc(1.25 * var(--ui)); }
.notification-line strong { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.notification-line time { flex: 0 0 auto; color: var(--pmp-icon); font-size: calc(.875 * var(--ui)); }
.notification-preview { display: flex; align-items: center; gap: calc(.5 * var(--ui)); margin-top: calc(.5 * var(--ui)); padding: calc(.375 * var(--ui)); border-radius: calc(.5 * var(--ui)); color: #97a3af; background: var(--pmp-union-active); font-size: calc(.875 * var(--ui)); }
[data-theme=light] .notification-preview { color: #666; }
.notification-preview > span { flex: 1 1 auto; display: -webkit-box; min-width: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.notification-thumb { flex: 0 0 auto; width: calc(1.716 * var(--ui)); height: calc(1.875 * var(--ui)); border-radius: 3px; object-fit: cover; }
.notifications-empty { margin: 0; padding: var(--ui) 0; color: var(--muted); }

/* Account order handle: 21px dots before the avatar. */
.pmp-order { flex: 0 0 auto; display: grid; place-items: center; width: calc(1.5 * var(--ui)); height: calc(2.625 * var(--ui)); padding: 0; border: 0; border-radius: calc(.625 * var(--ui)); background: transparent; color: var(--pmp-icon); cursor: grab; touch-action: none; }
.pmp-order svg { width: calc(1.5 * var(--ui)); height: calc(1.5 * var(--ui)); }
.pmp-list-item.dragging { background: var(--button); box-shadow: 0 0 1em #0000004d; }
.pmp-list-item.dragging .pmp-order { cursor: grabbing; }

/* Quick links in the left menu. */
.sidebar .quick-link { color: var(--ink); text-decoration: none; }
.sidebar .quick-link .nav-ico { display: inline-flex; align-items: center; justify-content: center; width: calc(2.625 * var(--ui)); height: calc(2.625 * var(--ui)); color: var(--muted); }
.sidebar .quick-link svg { width: calc(1.5 * var(--ui)); height: calc(1.5 * var(--ui)); }
.quick-link-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pmp-avatar svg { width: calc(1.25 * var(--ui)); height: calc(1.25 * var(--ui)); }

/* Content plan, UTM and short link forms. */
.pmp-avatar.slot-time { font-size: calc(.75 * var(--ui)); }
.pmp-radio-list { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.pmp-radio-list legend { margin-bottom: 10px; color: var(--muted); }
.pmp-radio-list .radio-label { margin: 0; }
.planning-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.planning-slot { min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--button); color: var(--ink); }
.planning-slot:hover { background: var(--hover); }

/* Composer: typograph, spelling, the «⋯» menu and the poll block. */
.composer-more { position: relative; display: inline-flex; }
.composer-tools .composer-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; margin: 0; min-width: calc(12 * var(--editor-unit)); padding: calc(.75 * var(--editor-unit)); border-radius: calc(.75 * var(--editor-unit)); background: var(--raised); box-shadow: 0 0 1em #0000004d; }
.composer-tools { position: relative; }
.composer-menu button { display: flex; align-items: center; gap: calc(.5 * var(--editor-unit)); width: 100%; min-height: calc(2.625 * var(--editor-unit)); padding: 0 calc(.5 * var(--editor-unit)); border: 0; border-radius: calc(.625 * var(--editor-unit)); background: transparent; color: var(--ink); font-size: var(--editor-unit); text-align: left; }
.composer-menu button:hover, .composer-menu button:focus-visible { background: var(--hover); }
.composer-menu svg { width: calc(1.5 * var(--editor-unit)); height: calc(1.5 * var(--editor-unit)); color: var(--muted); }
.composer-tools .spell-toggle[aria-pressed=true] { color: var(--brand); }
.poll-editor { display: grid; gap: calc(.5 * var(--editor-unit)); margin: calc(.75 * var(--editor-unit)) 0; padding: calc(.75 * var(--editor-unit)); border-radius: calc(.625 * var(--editor-unit)); background: var(--bg); }
.poll-head { display: flex; align-items: center; gap: calc(.5 * var(--editor-unit)); font-weight: 600; }
.poll-head svg { width: calc(1.25 * var(--editor-unit)); height: calc(1.25 * var(--editor-unit)); color: var(--muted); }
.poll-head .poll-remove { margin-left: auto; }
.poll-option { display: flex; gap: 6px; }
.poll-editor input:not([type=checkbox]) { min-height: calc(2.625 * var(--editor-unit)); }
.poll-editor .radio-label { margin: 0; font-weight: 400; }
.poll-editor .poll-add { justify-self: start; padding: 0; }
.preview-poll { display: grid; gap: 6px; margin: 0 15px 12px; }
.preview-poll small { color: var(--muted); }
.preview-poll-option { padding: 6px 10px; border-radius: 6px; background: #ffffff14; }
[data-theme=light] .preview-poll-option { background: #0000000f; }

/* Post history. */
.history-item { padding: var(--ui, 14px) 0; border-top: 1px solid var(--line); }
.history-item:first-child { border-top: 0; padding-top: 0; }
.history-head { display: flex; justify-content: space-between; gap: 12px; }
.history-head time { color: var(--muted); font-size: 12px; }
.history-version .detail-text { padding: 8px 0; }

/* Editor header: the "Предпросмотр" segment, panel arrow and close, as in PostMyPost. */
.editor-controls { display: flex; align-items: center; gap: calc(.5 * var(--editor-unit)); margin-left: auto; }
.editor-segment { display: flex; gap: 4px; border-radius: calc(.625 * var(--editor-unit)); background: var(--pmp-union); }
.editor-segment button { min-height: calc(2.625 * var(--editor-unit)); padding: 0 var(--editor-unit); border: 0; border-radius: calc(.625 * var(--editor-unit)); background: transparent; color: var(--muted); font-size: var(--editor-unit); line-height: 1.4; }
.editor-segment button.active { background: var(--button); }
.editor-dialog .editor-close { border-radius: 50%; }
.editor-dialog #preview-toggle { width: calc(2.5 * var(--editor-unit)); color: var(--pmp-icon); }
.editor-dialog .editor-close { margin-left: calc(.25 * var(--editor-unit)); color: var(--pmp-icon); }
.editor-dialog :is(#preview-toggle, .editor-close) svg { width: calc(1.5 * var(--editor-unit)); height: calc(1.5 * var(--editor-unit)); }
.preview-hidden #preview-toggle svg { transform: rotate(180deg); }

/* Platform picker: 50-unit list of 51px rows. */
.provider-dialog { background: var(--bg); --ui: 12px; font-size: var(--ui); }
@media (min-width: 1456px) { .provider-dialog { --ui: 14px; } }
@media (min-width: 2064px) { .provider-dialog { --ui: 16px; } }
.provider-dialog .dialog-header { height: calc(4.625 * var(--ui)); padding: 0 var(--ui); border: 0; background: var(--paper); }
.provider-dialog .dialog-header .project-avatar { width: calc(2.625 * var(--ui)); height: calc(2.625 * var(--ui)); color: #fff; font-size: var(--ui); font-weight: 400; }
.provider-dialog .provider-time { color: var(--pmp-icon); font-size: calc(.875 * var(--ui)); }
.provider-dialog .dialog-header .icon-button { width: calc(2.625 * var(--ui)); min-height: calc(2.625 * var(--ui)); border-radius: 50%; }
.provider-list { max-width: calc(50 * var(--ui)); padding: calc(2 * var(--ui)) 0; margin: 0 auto; }
.provider-list h2 { margin: 0 0 calc(2 * var(--ui)); font-size: calc(1.625 * var(--ui)); line-height: 1.2; font-weight: 700; color: var(--pmp-title); }
.provider-option { display: flex; align-items: center; gap: calc(.375 * var(--ui)); width: 100%; min-height: calc(3.625 * var(--ui)); padding: 0 calc(.5 * var(--ui)); margin: 0 0 calc(.75 * var(--ui)); border: 0; border-radius: calc(.625 * var(--ui)); background: var(--raised); font-size: var(--ui); cursor: default; }
.provider-option:hover { border-color: transparent; }
.provider-brand { display: grid; place-items: center; width: calc(2.625 * var(--ui)); height: calc(2.625 * var(--ui)); border-radius: 50%; color: #fff; background: #0080ff; }
.provider-brand.telegram, .provider-brand.telegram_chat { background: #3f9ed9; }
.provider-brand.discord { background: #5966f3; }
.provider-brand svg { width: calc(1.5 * var(--ui)); height: calc(1.5 * var(--ui)); }
.provider-option .provider-name { margin-left: 0; }
.provider-option .primary { margin-left: auto; min-height: calc(2.625 * var(--ui)); padding: 0 var(--ui); border-radius: calc(.625 * var(--ui)); font-size: var(--ui); font-weight: 400; }

/* Sign-in: a centred form like the PostMyPost login page. */
.login-screen { --ui: 12px; position: relative; display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: calc(4 * var(--ui)) var(--ui); background: var(--bg); font-size: var(--ui); }
@media (min-width: 1456px) { .login-screen { --ui: 14px; } }
@media (min-width: 2064px) { .login-screen { --ui: 16px; } }
.login-screen .login-logo { position: absolute; top: var(--ui); left: var(--ui); width: calc(2.625 * var(--ui)); height: calc(2.625 * var(--ui)); border-radius: 50%; font-size: calc(1.75 * var(--ui)); }
.login-screen .login-form { width: calc(26 * var(--ui)); max-width: 100%; align-self: center; text-align: center; }
.login-title { margin: 0 0 var(--ui); font-size: calc(1.625 * var(--ui)); line-height: 1.2; font-weight: 700; color: var(--pmp-title); }
.login-text { margin: 0 0 calc(1.75 * var(--ui)); font-size: var(--ui); line-height: 1.4; color: var(--ink); }
.login-screen .pmp-field { margin: 0 0 var(--ui); text-align: left; }
.login-screen .pmp-field input::placeholder { color: var(--pmp-field-label); opacity: .7; }
.login-screen .login-form .primary { width: auto; min-height: calc(2.625 * var(--ui)); margin: calc(.75 * var(--ui)) auto calc(2 * var(--ui)); padding: 0 var(--ui); border-radius: calc(.625 * var(--ui)); font-size: var(--ui); font-weight: 400; }
.login-note { margin: 0; font-size: calc(.875 * var(--ui)); color: var(--muted); }
.login-screen .login-theme { position: absolute; left: var(--ui); bottom: var(--ui); top: auto; right: auto; width: calc(2.625 * var(--ui)); min-height: calc(2.625 * var(--ui)); padding: 0; font-size: calc(1.25 * var(--ui)); }
.login-screen .error { margin: 0 0 var(--ui); text-align: left; }

@media (max-width: 600px) {
  .pmp-page { padding: 16px 12px; }
  .pmp-tags { display: none; }
}

/* Projects page as in PostMyPost: cards in two columns with a publications chart and the team. */
.pmp-page.project-page { max-width: none; padding: var(--ui) clamp(var(--ui), calc(-2.0968 * var(--ui) + 3.871vw), calc(4 * var(--ui))) var(--ui); }
.project-page-title { margin: 0 0 calc(2 * var(--ui)); font-size: calc(1.625 * var(--ui)); line-height: 1.2; font-weight: 700; color: var(--pmp-title); }
.project-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(30 * var(--ui))), 1fr)); gap: var(--ui); }
.project-card { display: flex; flex-direction: column; padding: var(--ui); border-radius: calc(.625 * var(--ui)); background: var(--raised); }
.project-card-head { display: flex; align-items: center; justify-content: space-between; height: calc(2.625 * var(--ui)); }
.project-card-name { display: inline-flex; align-items: center; gap: calc(.5 * var(--ui)); min-width: 0; padding: 0; border: 0; color: var(--ink); background: transparent; font-size: calc(.875 * var(--ui)); line-height: 1.2; text-align: left; cursor: pointer; }
.project-card-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card-name .project-avatar { width: calc(2.625 * var(--ui)); height: calc(2.625 * var(--ui)); color: #fff; font-size: var(--ui); font-weight: 400; }
.project-card-head .account-menu summary { width: calc(1.5 * var(--ui)); height: calc(1.5 * var(--ui)); }
/* Side room as in PostMyPost, where its slider arrows sit. */
.project-chart { display: flex; align-items: center; justify-content: space-between; gap: var(--ui); height: calc(6.375 * var(--ui)); margin-top: calc(.75 * var(--ui)); padding: 0 calc(2.057 * var(--ui)); }
.project-chart-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.project-chart-title, .project-chart-delta { font-size: calc(.75 * var(--ui)); line-height: 1.2; }
.project-chart-value { font-size: calc(1.25 * var(--ui)); line-height: 1.1; font-weight: 700; margin: 0 0 calc(.5 * var(--ui)); }
.project-chart-delta.down { color: #fb5050; }
.project-chart-delta.up { color: #2ac668; }
.project-chart-bars { flex: 0 0 auto; width: calc(10 * var(--ui)); height: calc(4.643 * var(--ui)); fill: #2ac668; }
.project-chart-bars .zero { fill: #373f48; }
[data-theme=light] .project-chart-bars .zero { fill: #e6e6e6; }
.project-card-team { display: flex; align-items: center; min-height: calc(2.296875 * var(--ui)); margin-top: calc(.75 * var(--ui)); }
.project-card-team .user-avatar { width: calc(2.296875 * var(--ui)); height: calc(2.296875 * var(--ui)); margin: 0 0 0 calc(-.65625 * var(--ui)); color: #fff; background: #b5b9be; font-size: calc(.875 * var(--ui)); font-weight: 400; box-shadow: 0 0 0 2px var(--raised); }
.project-card-team .user-avatar:first-child { margin-left: 0; }
.project-card-more { margin-left: calc(.3 * var(--ui)); color: #97a3af; font-size: calc(.875 * var(--ui)); font-weight: 500; }

/* VK login by QR: dark modules on white, the way the VK app scans best. */
.vk-qr { display: flex; flex-direction: column; align-items: center; gap: var(--ui); text-align: center; }
.vk-qr-code { padding: calc(.75 * var(--ui)); border-radius: calc(.75 * var(--ui)); background: #fff; line-height: 0; }
.vk-qr-code svg { width: min(260px, 70vw); height: auto; }
.vk-qr-code-form { display: flex; align-items: flex-end; gap: calc(.5 * var(--ui)); width: 100%; max-width: 360px; }
.vk-qr-code-form .pmp-field { flex: 1; margin: 0; }