/* ════════════════════════════════════════════════════════════════════════ Личный кабинет: аватар + дропдаун, login-overlay (VK/Yandex), модалка кабинета. Тёмная тема — через [data-app-theme="dark"] на (пока охватывает Hub + поверхности кабинета; редактор остаётся светлым). ════════════════════════════════════════════════════════════════════════ */ :root { --acc-accent: #0071e3; --acc-accent-hover: #0a84ff; --acc-surface: #ffffff; --acc-text: #1d1d1f; --acc-muted: #6e6e73; --acc-border: rgba(0, 0, 0, 0.10); --acc-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); --vk: #0077ff; --ya: #fc3f1d; } /* ── Виджет аккаунта (аватар в шапке, справа) ──────────────────────────── */ .account-widget { position: fixed; top: 16px; right: 22px; z-index: 2500; } /* В редакторе своя шапка (ribbon) — аватар прячем, чтобы не перекрывать cmd-k. */ body[data-view="editor"] .account-widget { display: none !important; } .account-avatar-btn { margin: 0 !important; /* перебиваем глобальный button{margin-top:16px} */ padding: 2px !important; background: transparent !important; border: 0 !important; border-radius: 999px !important; cursor: pointer; line-height: 0; transition: transform 120ms ease, box-shadow 120ms ease; } .account-avatar-btn:hover { transform: translateY(-1px); } .account-avatar-btn:focus-visible { outline: 2px solid var(--acc-accent); outline-offset: 2px; } .account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: linear-gradient(135deg, #0071e3, #34c1ff); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); user-select: none; } .account-avatar img { width: 100%; height: 100%; object-fit: cover; } .account-avatar.lg { width: 46px; height: 46px; font-size: 17px; } .account-avatar.xl { width: 64px; height: 64px; font-size: 24px; } /* ── Дропдаун ──────────────────────────────────────────────────────────── */ .account-dropdown { position: absolute; top: 48px; right: 0; min-width: 248px; background: var(--acc-surface); border: 1px solid var(--acc-border); border-radius: 14px; box-shadow: var(--acc-shadow); padding: 8px; animation: acc-pop 120ms ease; } @keyframes acc-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .account-dd-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid var(--acc-border); margin-bottom: 6px; } .account-dd-id { min-width: 0; } .account-dd-name { font-weight: 600; font-size: 14px; color: var(--acc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-dd-email { font-size: 12px; color: var(--acc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-dd-item { margin: 0 !important; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px !important; background: transparent !important; border: 0 !important; border-radius: 9px !important; color: var(--acc-text) !important; font-size: 14px; text-align: left; cursor: pointer; transition: background 120ms ease; } .account-dd-item:hover { background: rgba(0, 0, 0, 0.05) !important; } .account-dd-item span { display: inline-flex; align-items: center; justify-content: center; width: 18px; opacity: 0.8; } .account-dd-item span svg.lucide { width: 16px; height: 16px; } .account-dd-item.danger { color: #d6342c !important; } /* ── Login overlay ─────────────────────────────────────────────────────── */ .login-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 50% 0%, #11314f 0%, #0a1626 60%, #060d16 100%); padding: 24px; } .login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); padding: 32px 28px; text-align: center; } .login-logo { font-weight: 800; font-size: 20px; color: var(--acc-accent); margin-bottom: 18px; letter-spacing: -0.01em; } .login-card h3 { margin: 0 0 4px; font-size: 22px; color: var(--acc-text); } .login-sub { margin: 0 0 22px; color: var(--acc-muted); font-size: 14px; } .login-providers { display: flex; flex-direction: column; gap: 12px; } .login-btn { margin: 0 !important; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 16px !important; border: 0 !important; border-radius: 12px !important; font-size: 15px; font-weight: 600; cursor: pointer; color: #fff !important; transition: filter 120ms ease, transform 120ms ease; } .login-btn:hover { filter: brightness(1.06); transform: translateY(-1px); } .login-btn .pi { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; border-radius: 5px; font-size: 13px; } .login-btn.vk { background: var(--vk) !important; } .login-btn.vk .pi { background: rgba(255, 255, 255, 0.22); } .login-btn.yandex { background: #000 !important; } .login-btn.yandex .pi { background: var(--ya); color: #fff; } .login-note { margin-top: 18px; font-size: 12px; color: var(--acc-muted); line-height: 1.45; } /* ── Модалка кабинета ──────────────────────────────────────────────────── */ .account-overlay { position: fixed; inset: 0; z-index: 3500; display: flex; align-items: center; justify-content: center; background: rgba(8, 14, 24, 0.55); backdrop-filter: blur(3px); padding: 24px; } .account-modal { width: 100%; max-width: 480px; background: var(--acc-surface); border-radius: 18px; box-shadow: var(--acc-shadow); overflow: hidden; animation: acc-pop 140ms ease; } .account-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--acc-border); } .account-modal-head h3 { margin: 0; font-size: 18px; color: var(--acc-text); } .account-modal-close { margin: 0 !important; padding: 4px 8px !important; background: transparent !important; border: 0 !important; color: var(--acc-muted) !important; font-size: 18px; cursor: pointer; border-radius: 8px !important; } .account-modal-close:hover { background: rgba(0, 0, 0, 0.06) !important; } .account-modal-close svg.lucide { width: 16px; height: 16px; display: block; } .account-tabs { display: flex; gap: 4px; padding: 12px 22px 0; } .account-tab { margin: 0 !important; padding: 8px 14px !important; background: transparent !important; border: 0 !important; border-radius: 9px !important; color: var(--acc-muted) !important; font-size: 14px; font-weight: 600; cursor: pointer; } .account-tab.active { background: rgba(0, 113, 227, 0.10) !important; color: var(--acc-accent) !important; } .account-pane { display: none; padding: 18px 22px 4px; } .account-pane.active { display: block; } .account-profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .account-provider-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); color: var(--acc-muted); } .account-provider-badge.vk { background: rgba(0, 119, 255, 0.12); color: var(--vk); } .account-provider-badge.yandex { background: rgba(252, 63, 29, 0.12); color: var(--ya); } /* ── Бейдж тарифа (у аватарки, в дропдауне, в кабинете) ────────────────── */ /* Угол-«полукруг»: аватар — якорь в углу, значок темы слева, пилюля тарифа — по дуге ВНИЗ от аватара (см. #account-plan-pill ниже), чтобы не налезать. */ .account-plan-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; background: rgba(0, 0, 0, 0.07); color: var(--acc-muted); white-space: nowrap; } .account-plan-pill.plan-author { background: rgba(0, 113, 227, 0.14); color: #0071e3; } .account-plan-pill.plan-studio { background: rgba(88, 86, 214, 0.16); color: #5856d6; } [data-app-theme="dark"] .account-plan-pill { background: rgba(255, 255, 255, 0.10); } [data-app-theme="dark"] .account-plan-pill.plan-author { color: #57a6ff; } [data-app-theme="dark"] .account-plan-pill.plan-studio { color: #a6a4f5; } /* пилюля у аватарки в хабе — плотнее, чтобы читалась на любом фоне */ #account-plan-pill { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: var(--acc-surface); border: 1px solid var(--acc-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); } #account-plan-pill.plan-author { color: #0071e3; } #account-plan-pill.plan-studio { color: #5856d6; } .account-dd-plan { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--acc-accent); } .account-admin-plan { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.04); border: 1px dashed var(--acc-border); } [data-app-theme="dark"] .account-admin-plan { background: rgba(255, 255, 255, 0.05); } .account-admin-plan-label { font-size: 12.5px; color: var(--acc-muted); } .account-admin-plan-btn { margin: 0 !important; padding: 5px 12px !important; font-size: 12.5px; border-radius: 8px !important; border: 1px solid var(--acc-border) !important; background: var(--acc-surface) !important; color: var(--acc-text) !important; cursor: pointer; } .account-admin-plan-btn:hover { border-color: var(--acc-accent) !important; color: var(--acc-accent) !important; } .account-pane label { display: block; font-size: 13px; font-weight: 600; color: var(--acc-muted); margin-bottom: 14px; } .account-pane input, .account-pane select { margin-top: 6px; width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--acc-text); background: #fff; border: 1px solid var(--acc-border); border-radius: 10px; box-sizing: border-box; } .account-pane input:focus, .account-pane select:focus { outline: none; border-color: var(--acc-accent); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); } .account-pane input:disabled { background: rgba(0, 0, 0, 0.04); color: var(--acc-muted); cursor: not-allowed; } .account-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; } .account-cancel, .account-save { margin: 0 !important; padding: 10px 20px !important; border-radius: 10px !important; font-size: 14px; font-weight: 600; cursor: pointer; border: 0 !important; } .account-cancel { background: rgba(0, 0, 0, 0.06) !important; color: var(--acc-text) !important; } .account-cancel:hover { background: rgba(0, 0, 0, 0.10) !important; } .account-save { background: var(--acc-accent) !important; color: #fff !important; } .account-save:hover { background: var(--acc-accent-hover) !important; } .account-save:disabled { opacity: 0.6; cursor: default; } [hidden] { display: none !important; } /* ════════════════════════════════════════════════════════════════════════ Тёмная тема — Hub + поверхности кабинета. Редактор пока светлый (отдельная большая задача); здесь не трогаем .editor-* чтобы не сломать его палитру. ════════════════════════════════════════════════════════════════════════ */ [data-app-theme="dark"] { --acc-surface: #1c1f26; --acc-text: #e8eaed; --acc-muted: #9aa0a6; --acc-border: rgba(255, 255, 255, 0.12); } [data-app-theme="dark"] body[data-view="hub"], [data-app-theme="dark"] body[data-view="auto"] { background: #0e1116 !important; color: #e8eaed; } [data-app-theme="dark"] body[data-view="hub"] header h1, [data-app-theme="dark"] body[data-view="auto"] header h1 { color: #e8eaed; } [data-app-theme="dark"] body[data-view="hub"] .hub-header h2 { color: #e8eaed; } [data-app-theme="dark"] body[data-view="hub"] .hub-subtitle, [data-app-theme="dark"] body[data-view="hub"] .subtitle { color: #9aa0a6; } [data-app-theme="dark"] body[data-view="hub"] .hub-header { background: #1c1f26 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important; } [data-app-theme="dark"] body[data-view="hub"] .hub-card { background: #1c1f26 !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #e8eaed; } [data-app-theme="dark"] body[data-view="hub"] .hub-card-title { color: #e8eaed; } [data-app-theme="dark"] body[data-view="hub"] .hub-search, [data-app-theme="dark"] body[data-view="hub"] .hub-sort { background: #1c1f26 !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #e8eaed !important; } [data-app-theme="dark"] .account-pane input, [data-app-theme="dark"] .account-pane select { background: #2a2e37; } [data-app-theme="dark"] .account-dd-item:hover { background: rgba(255, 255, 255, 0.08) !important; } /* ── Вкладка «Тарифы» (плашка тарифов) ────────────────────────────────── */ .account-modal:has([data-pane="tariffs"].active) { max-width: 900px; } .account-tariffs-lead { font-size: 13px; color: var(--acc-muted); margin: 0 0 14px; } .account-tariffs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); } /* Та же сетка карточек как вкладка хаба (#view-tariffs) — шире кабинета, поэтому ограничиваем ширину и центрируем, чтобы карточки не растягивались. */ .hub-tariffs { max-width: 1080px; margin: 0 auto; } .tariff-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--acc-border); border-radius: 14px; padding: 16px 16px 18px; background: var(--acc-surface); } .tariff-active { border-color: var(--acc-accent); box-shadow: 0 0 0 1px var(--acc-accent) inset; } .tariff-soon { opacity: 0.78; } .tariff-donate { background: linear-gradient(160deg, #fff8e1, #fff0c9); border-color: #f3d98a; } [data-app-theme="dark"] .tariff-card { background: #1c1f26; } [data-app-theme="dark"] .tariff-donate { background: linear-gradient(160deg, #2a2616, #221d10); border-color: #4a3f1a; } .tariff-badge { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 9px; background: var(--acc-accent); color: #fff; margin-bottom: 8px; } .tariff-badge-soon { background: #9aa0aa; } .tariff-badge-donate { background: transparent; font-size: 18px; padding: 0; } .tariff-name { margin: 0 0 2px; font-size: 17px; color: var(--acc-text); } .tariff-price { font-size: 14px; font-weight: 600; color: var(--acc-accent); margin-bottom: 10px; } .tariff-price-soon { color: var(--acc-muted); font-weight: 500; } .tariff-price-donate { color: #a07a00; } [data-app-theme="dark"] .tariff-price-donate { color: #ffe680; } .tariff-feats { list-style: none; margin: 0 0 14px; padding: 0; flex: 1; } .tariff-feats li { position: relative; padding-left: 18px; margin: 6px 0; font-size: 12.5px; color: var(--acc-text); line-height: 1.35; } .tariff-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--acc-accent); font-weight: 700; } .tariff-soon .tariff-feats li::before { color: #9aa0aa; } .tariff-donate-text { font-size: 12.5px; color: var(--acc-muted); line-height: 1.4; flex: 1; margin: 0 0 14px; } .tariff-btn { width: 100%; padding: 9px 12px; border-radius: 10px; border: 0; cursor: pointer; font: inherit; font-weight: 600; background: var(--acc-accent); color: #fff; } .tariff-btn:disabled { cursor: default; } .tariff-btn-current { background: #e8f0fe; color: var(--acc-accent); } [data-app-theme="dark"] .tariff-btn-current { background: #25304a; } .tariff-soon .tariff-btn { background: #eceef2; color: #9aa0aa; } [data-app-theme="dark"] .tariff-soon .tariff-btn { background: #2a2e37; } .tariff-btn-donate { background: linear-gradient(90deg, #ffe07a, #ffc83d); color: #7a5b00; } .tariff-btn-donate:hover { filter: brightness(1.04); } /* ── Согласие с офертой/политикой в окне входа ────────────────────────── */ .login-consent { font-size: 11.5px; color: var(--acc-muted); margin-top: 10px; line-height: 1.45; } .login-consent a { color: var(--acc-accent); text-decoration: none; } .login-consent a:hover { text-decoration: underline; } /* Реквизиты продавца (требование ЮKassa) — внизу страницы входа. */ .login-legal { font-size: 11px; color: var(--acc-muted); opacity: .8; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--acc-border, rgba(0,0,0,.08)); } /* Форма входа по паролю (проверяющие ЮKassa) — только по ссылке ?review. */ .login-review { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--acc-border, rgba(0,0,0,.08)); } .login-review-sep { font-size: 12px; color: var(--acc-muted); text-align: center; margin-bottom: 2px; } .login-review input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--acc-border, #d6dae2); background: var(--acc-card, #fff); color: var(--acc-text); font: inherit; font-size: 14px; } .login-review input:focus { outline: none; border-color: var(--acc-accent); } .login-review-btn { margin-top: 2px; background: var(--acc-accent); color: #fff; cursor: pointer; } /* ── Плашка о водяном знаке (хаб, free) ── */ .wm-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; color: #9a3412; font-size: 13px; } .wm-banner-ico { font-size: 18px; line-height: 1; } .wm-banner-text { flex: 1 1 auto; line-height: 1.4; } .wm-banner-btn { flex: 0 0 auto; cursor: pointer; border: 0; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; white-space: nowrap; background: #ea580c; color: #fff; } .wm-banner-btn:hover { background: #c2410c; } .wm-banner-x { flex: 0 0 auto; cursor: pointer; border: 0; background: transparent; color: #9a3412; font-size: 14px; opacity: 0.6; padding: 4px; line-height: 1; } .wm-banner-x:hover { opacity: 1; }