/* Timp 2026 "Green" design system — a modern skin over the legacy stylesheet (markup unchanged).
   Brand: the original Timp green gradient. Symmetric 8-pt grid, one radius scale, one shadow scale.
   <html data-appearance="light|dark" data-accent="green|blue|purple|orange|pink|teal" data-wallpaper="…"> (appearance.js). */

:root, html[data-appearance="light"] {
  --g-50: #ebf5ef; --g-100: #cfeadf; --g-200: #98d7c7; --g-500: #0b8e6a; --g-600: #0b7358; --g-700: #0a5c47; --g-800: #073f31; --g-900: #042d23;
  --accent: var(--g-500); --accent-strong: var(--g-600); --accent-soft: rgba(11,142,106,.12); --on-accent: #fff;
  --page: linear-gradient(180deg, #98d7c7 0%, #4fb093 46%, #0b7358 100%);
  --bar: #0a5c47; --bar-ink: #fff; --bar-ink2: rgba(255,255,255,.72);
  --card: #fff; --card-2: #f6faf8; --fill: #eef4f1; --line: rgba(4,45,35,.10);
  --text: #10231d; --text-2: #5b6f68; --text-3: #9aaba5; --heading-on-page: #fff;
  --radius-s: 10px; --radius: 14px; --radius-l: 18px;
  --shadow-1: 0 1px 2px rgba(4,45,35,.08), 0 2px 8px rgba(4,45,35,.06);
  --shadow-2: 0 8px 28px rgba(4,45,35,.16), 0 2px 6px rgba(4,45,35,.08);
  --space: 24px;
  --red: #e5484d;
  --bubble-in: #fff; --bubble-out: var(--accent);
}
html[data-appearance="dark"] {
  --page: linear-gradient(180deg, #123b30 0%, #0b2a22 50%, #061a15 100%);
  --bar: #06241c; --bar-ink: #e9f5f0; --bar-ink2: rgba(233,245,240,.65);
  --card: #13221d; --card-2: #182b25; --fill: #1d332c; --line: rgba(233,245,240,.10);
  --text: #e9f5f0; --text-2: #9fb8af; --text-3: #6a8179; --heading-on-page: #e9f5f0;
  --accent: #2fc394; --accent-strong: #26a87f; --accent-soft: rgba(47,195,148,.16);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 10px 30px rgba(0,0,0,.5);
  --bubble-in: #1d332c;
  color-scheme: dark;
}
/* Global themes: the theme key (data-accent, historical name) recolours the page, the top bar and the accent. */
html[data-accent="blue"] { --page: linear-gradient(180deg, #b6d3f7 0%, #5b93e6 46%, #1f56c4 100%); --bar: #163f8f; --accent: #2563eb; --accent-strong: #1d4ed8; --accent-soft: rgba(37,99,235,.12); }
html[data-appearance="dark"][data-accent="blue"] { --page: linear-gradient(180deg, #13254a 0%, #0b1830 50%, #060e1e 100%); --bar: #08142b; --accent: #4b8bff; --accent-strong: #3a78ee; --accent-soft: rgba(75,139,255,.16); }
html[data-accent="purple"] { --page: linear-gradient(180deg, #d3c8f8 0%, #9078ee 46%, #5a3ccc 100%); --bar: #3f2a91; --accent: #7c5cf2; --accent-strong: #6a48e0; --accent-soft: rgba(124,92,242,.12); }
html[data-appearance="dark"][data-accent="purple"] { --page: linear-gradient(180deg, #251a4a 0%, #170f30 50%, #0d081e 100%); --bar: #120a26; --accent: #9d84ff; --accent-strong: #8a6ff0; --accent-soft: rgba(157,132,255,.16); }
html[data-accent="orange"] { --page: linear-gradient(180deg, #fad6b0 0%, #f2a05a 46%, #c9620d 100%); --bar: #8f460a; --accent: #ea7a0c; --accent-strong: #d26a06; --accent-soft: rgba(234,122,12,.12); }
html[data-appearance="dark"][data-accent="orange"] { --page: linear-gradient(180deg, #3d230e 0%, #28160a 50%, #170c05 100%); --bar: #1e1007; --accent: #ff9a3c; --accent-strong: #ec8526; --accent-soft: rgba(255,154,60,.16); }
html[data-accent="pink"] { --page: linear-gradient(180deg, #f7cddc 0%, #ec85a9 46%, #c23a6d 100%); --bar: #8c2450; --accent: #e5467c; --accent-strong: #cf356a; --accent-soft: rgba(229,70,124,.12); }
html[data-appearance="dark"][data-accent="pink"] { --page: linear-gradient(180deg, #3f1626 0%, #2a0e19 50%, #18070e 100%); --bar: #200a13; --accent: #ff6b9b; --accent-strong: #ec5687; --accent-soft: rgba(255,107,155,.16); }
html[data-accent="teal"] { --page: linear-gradient(180deg, #b2e6ee 0%, #4cbfcf 46%, #087a8c 100%); --bar: #075a68; --accent: #0b9db3; --accent-strong: #098597; --accent-soft: rgba(11,157,179,.12); }
html[data-appearance="dark"][data-accent="teal"] { --page: linear-gradient(180deg, #0f3238 0%, #0a2226 50%, #051416 100%); --bar: #061a1d; --accent: #2bc3d9; --accent-strong: #1eaec3; --accent-soft: rgba(43,195,217,.16); }
/* 0.9.4.1: three more themes (the app also changes shapes/typefaces; the site follows the colours). */
html[data-accent="graphite"] { --page: linear-gradient(180deg, #e4e4e7 0%, #71717a 46%, #27272a 100%); --bar: #18181b; --accent: #18181b; --accent-strong: #09090b; --accent-soft: rgba(24,24,27,.10); }
html[data-appearance="dark"][data-accent="graphite"] { --page: linear-gradient(180deg, #1c1c1f 0%, #0f0f11 50%, #000 100%); --bar: #09090b; --accent: #a1a1aa; --accent-strong: #d4d4d8; --accent-soft: rgba(228,228,231,.14); }
html[data-accent="neon"] { --page: linear-gradient(180deg, #d9d2ff 0%, #8b5cf6 46%, #0e7490 100%); --bar: #2e1065; --accent: #7c3aed; --accent-strong: #6d28d9; --accent-soft: rgba(124,58,237,.12); }
html[data-appearance="dark"][data-accent="neon"] { --page: linear-gradient(180deg, #1a0b3b 0%, #0b0b2a 50%, #04152a 100%); --bar: #06061a; --accent: #22d3ee; --accent-strong: #06b6d4; --accent-soft: rgba(34,211,238,.16); }
html[data-accent="paper"] { --page: linear-gradient(180deg, #f3ebdd 0%, #d9c3a0 46%, #8b5e34 100%); --bar: #5c3d20; --accent: #8b5e34; --accent-strong: #74491f; --accent-soft: rgba(139,94,52,.12); }
html[data-appearance="dark"][data-accent="paper"] { --page: linear-gradient(180deg, #2a2216 0%, #1d1810 50%, #120e08 100%); --bar: #17130d; --accent: #d4a373; --accent-strong: #c08f5e; --accent-soft: rgba(212,163,115,.16); }

/* ================= base ================= */
html, body, button, input, textarea, select { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; -webkit-font-smoothing: antialiased; }
body { color: var(--text); background: var(--bar); }
#main, .center_right { background: var(--page) !important; background-attachment: fixed !important; }
#right { min-width: 0; }
a { color: var(--accent); }
::selection { background: var(--accent-soft); }
* { scrollbar-width: thin; scrollbar-color: rgba(4,45,35,.25) transparent; }

/* ================= top bar ================= */
.topMenu { background: var(--bar) !important; min-height: 56px !important; max-height: 56px !important; flex-basis: 56px !important;
  box-shadow: 0 4px 16px rgba(4,45,35,.25) !important; padding: 0 12px; gap: 4px; }
.topMenu > i, .topMenu .notifications > i, .topMenu__menuList i, .topMenu .tc-menu > i {
  color: var(--bar-ink2) !important; border-radius: 10px; transition: background .2s, color .2s; }
.topMenu > i:hover, .topMenu .notifications > i:hover, .topMenu__menuList i:hover, .topMenu .tc-menu > i:hover { color: var(--bar-ink) !important; background: rgba(255,255,255,.10); }
.topMenu .user__title { color: var(--bar-ink) !important; font-weight: 600; font-size: 16px; }
.topMenu .user__members { color: var(--bar-ink2) !important; font-size: 12px; }
.topMenu #leftMenu { background: rgba(255,255,255,.14) !important; border-radius: 10px !important; box-shadow: none !important; }
.topMenu [id*="install"], .topMenu [id*="install"] *, .topMenu [class*="install"], .topMenu [class*="install"] *, .topMenu a, .topMenu button { color: var(--bar-ink) !important; background: transparent; border: 0; }
.notifications__count { background: var(--red) !important; color: #fff !important; font-weight: 700; min-width: 18px; border-radius: 9px; box-shadow: 0 0 0 2px var(--bar); }
.lang img { border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }

/* ================= buttons & inputs ================= */
.btn { background: var(--accent) !important; color: var(--on-accent) !important; border: 0 !important; border-radius: var(--radius-s) !important;
  box-shadow: 0 1px 2px rgba(4,45,35,.18) !important; font-weight: 600 !important; transition: background .2s, transform .12s; }
.btn *, .btn p, .btn i { color: var(--on-accent) !important; }
.btn:hover { background: var(--accent-strong) !important; } .btn:active { transform: translateY(1px); }
.btn--light, .btn.btn--light { background: var(--fill) !important; color: var(--accent) !important; box-shadow: none !important; }
.btn--light *, .btn.btn--light * { color: var(--accent) !important; }
.form__input, #textarea, input.input_theme_title_edit, .user__editTitle, select {
  background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-s) !important; box-shadow: none !important; }
.formSearch__input { background: var(--fill) !important; color: var(--text) !important; border: 1px solid transparent !important; border-radius: var(--radius-s) !important; height: 40px; padding: 0 14px !important; box-shadow: none !important; }
.form__input:focus, .formSearch__input:focus, #textarea:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
::placeholder { color: var(--text-3) !important; }
.form__label { color: var(--text-2) !important; }
.toogleBox { background: var(--fill) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
input:checked + .toogleBox { background: var(--accent) !important; box-shadow: none !important; }
.toogleBox span { border: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
input[type=checkbox] { accent-color: var(--accent); }

/* ================= pinned project panel ================= */
.leftMenu, #left { background: var(--card) !important; box-shadow: 1px 0 0 var(--line), 8px 0 24px rgba(4,45,35,.08) !important;
  width: 300px !important; min-width: 300px !important; max-width: 300px !important; padding: 16px 0 12px; box-sizing: border-box; }
#left:not(.fixed):not(.show) { transform: translateX(-300px) translateZ(0) !important; }
.leftMenu__logo { padding: 4px 0 6px !important; }
.leftMenu__logo img { height: 48px; }
.leftMenu__link { color: var(--text-3) !important; font: 500 12px "Inter", sans-serif !important; text-decoration: none !important; margin-bottom: 12px !important; }
.leftMenu__link:hover { color: var(--accent) !important; }
.leftMenu__formSearch { padding: 0 16px !important; margin-bottom: 12px !important; }
.leftMenu__btn { display: flex !important; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 32px) !important; margin: 0 16px 16px !important; height: 40px; }
.leftMenu__tabsList, #theme_tabs .tabsBlock__list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 16px 12px !important; padding: 3px !important;
  background: var(--fill); border-radius: var(--radius-s); border: 0 !important; }
.tabsBlock__tabs { background: transparent !important; color: var(--text-2) !important; border-radius: 8px !important; margin: 0 !important; padding: 7px 4px !important;
  display: flex !important; align-items: center; justify-content: center; gap: 5px; font-weight: 600; font-size: 12.5px; white-space: nowrap; box-shadow: none !important; border: 0 !important; width: auto !important; min-width: 0; }
.tabsBlock__tabs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabsBlock__tabs--active { background: var(--card) !important; color: var(--text) !important; box-shadow: var(--shadow-1) !important; }
.tabsBlock__tabs--active * { color: var(--text) !important; }
.tabsBlock__count { background: var(--accent-soft) !important; color: var(--accent) !important; border: 0 !important; border-radius: 9px !important; min-width: 20px; padding: 0 6px !important; font-size: 11px; line-height: 18px; text-align: center; }
.themeList { padding: 0 8px; }
.projectCard { border-radius: var(--radius-s) !important; margin: 2px 0 !important; border: 0 !important; box-shadow: none !important; transition: background .15s; }
.projectCard:hover { background: var(--fill) !important; }
.projectCard--choice { background: var(--accent-soft) !important; box-shadow: inset 3px 0 0 var(--accent) !important; }
.projectArchive { background: var(--card) !important; }
#toogle_project_archive_btn { background: var(--fill) !important; box-shadow: none !important; }
#toogle_project_archive_btn, #toogle_project_archive_btn * { color: var(--text-2) !important; }
#fon { background: rgba(4,45,35,.35) !important; }

/* ================= home: symmetric 2-column dashboard ================= */
.home { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; grid-auto-rows: auto; gap: var(--space) !important;
  padding: var(--space) !important; max-width: 1440px; width: 100%; margin: 0 auto; box-sizing: border-box; align-content: start; }
.home__history { grid-area: 1 / 1 !important; display: flex; flex-direction: column; min-width: 0; }
.home__aside { grid-area: 1 / 2 !important; display: flex; flex-direction: column; min-width: 0; }
.home__column { grid-column: 1 / -1 !important; grid-row: auto !important; min-width: 0; }
.home__title { color: var(--heading-on-page) !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.01em;
  margin: 0 0 12px !important; text-shadow: 0 1px 2px rgba(4,45,35,.25); }
.home__notifications, .team { flex: 1; min-height: 240px; background: var(--card) !important; border-radius: var(--radius-l) !important; box-shadow: var(--shadow-2) !important; overflow: hidden; border: 0 !important; }
.home__notificationsBody { max-height: 360px !important; }
.home__cardDeck { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 16px !important; }
.home__cardDeck:empty { min-height: 88px; border-radius: var(--radius-l); border: 1.5px dashed rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
@media (max-width: 960px) {
  .home { grid-template-columns: minmax(0,1fr) !important; padding: 16px !important; gap: 16px !important; }
  .home__history, .home__aside { grid-area: auto !important; }
}
.home .notificMsg, .home .notifications__body > div { border-bottom: 1px solid var(--line) !important; padding: 12px 16px !important; background: transparent !important; }
.notificMsg__date { color: var(--text-3) !important; font-size: 12px !important; }
.team__item { padding: 14px 18px !important; border-bottom: 1px solid var(--line); }
.team__item--title { background: var(--card) !important; color: var(--text) !important; font-weight: 700 !important; font-size: 18px; }
.team__item--title * { color: var(--text) !important; }
.team__item--title i { color: var(--text-3) !important; }
.team__item--invite { background: var(--accent-soft) !important; color: var(--accent) !important; font-weight: 600; cursor: pointer; }
.team__item--invite *, .team__item--invite i { color: var(--accent) !important; }
.mainCard { background: var(--card) !important; border-radius: var(--radius-l) !important; box-shadow: var(--shadow-2) !important; overflow: hidden; border: 0 !important; transition: transform .15s, box-shadow .15s; }
.mainCard:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(4,45,35,.22) !important; }
.mainCard__title, .mainCard__title--darkPrimary, .mainCard__title--black { background: var(--card) !important; color: var(--text) !important; font-weight: 700 !important; font-size: 17px !important; padding: 16px 18px 6px !important; }
.mainCard__subtitleBlock, .mainCard__subtitleBlock--lightPrimary, .mainCard__subtitleBlock--grey { background: var(--card) !important; color: var(--text-2) !important; padding: 0 18px 12px !important; font-size: 13px; border-bottom: 1px solid var(--line); }
.mainCard__subtitleBlock * { color: var(--text-2) !important; }
.mainCard__item { padding: 8px 18px !important; color: var(--text-2) !important; }
.mainCard__item p:last-child { color: var(--text) !important; font-weight: 600; }

/* ================= tasks area ================= */
#tabs.tabContainer, .tabContainer { background: rgba(255,255,255,.94) !important; }
html[data-appearance="dark"] #tabs.tabContainer, html[data-appearance="dark"] .tabContainer { background: rgba(19,34,29,.94) !important; }
.tabContainer__tabList { border-bottom: 1px solid var(--line) !important; padding: 0 8px; }
.tabContainer__tab:after { background-color: var(--accent) !important; height: 3px !important; border-radius: 3px 3px 0 0; }
.tabContainer__tab i { color: var(--text-2) !important; }
.tabContainer__tab--active i, .tabContainer__tab i:hover { color: var(--text) !important; }
#addTask { border-radius: 20px !important; padding: 0 16px !important; }
.miniCard { border-radius: var(--radius) !important; box-shadow: var(--shadow-1) !important; border: 1px solid var(--line) !important; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.miniCard:hover { box-shadow: var(--shadow-2) !important; transform: translateY(-1px); }
.miniCard__date { background: var(--fill) !important; color: var(--text-2) !important; }
.miniCard__date--current { background: var(--accent) !important; color: #fff !important; }
.rectangle.dropZone { background: transparent !important; }
#filter_btn { background: var(--card) !important; border-radius: var(--radius-s); box-shadow: var(--shadow-1); }
#filter_btn i { color: var(--text-2) !important; }

/* ================= chat (on the brand gradient, like before) ================= */
.chatContainer, #chat_container { background: transparent !important; }
.chatContainer__msg { border-radius: 16px !important; box-shadow: var(--shadow-1) !important; border: 0 !important; }
.chatContainer__msg.other { background: var(--bubble-in) !important; color: var(--text) !important; border-bottom-left-radius: 6px !important; }
.chatContainer__msg.other .chatText, .chatContainer__msg.other p { color: var(--text) !important; font-style: normal !important; }
.chatContainer__msg.self { background: var(--bubble-out) !important; color: #fff !important; border-bottom-right-radius: 6px !important; }
.chatContainer__msg.self * { color: #fff !important; }
.chatContainer__msg .chatText { font-weight: 400 !important; line-height: 1.45 !important; }
.chatContainer__date, .chat_time, .chat_date { color: var(--text-3) !important; }
.chatContainer__msg.self .chatContainer__date, .chatContainer__msg.self .chat_time { color: rgba(255,255,255,.78) !important; }
.chatContainer__titleTask { background: var(--card) !important; border-radius: var(--radius-s); box-shadow: var(--shadow-1) !important; }
.bottom_menu { background: var(--card) !important; border-top: 1px solid var(--line); }
#textarea { border-radius: 22px !important; background: var(--fill) !important; border-color: transparent !important; }
.reply { background: var(--card) !important; border-radius: var(--radius-s); }
.tc-chatbtn { background: var(--card) !important; color: var(--accent) !important; box-shadow: var(--shadow-1) !important; }
.tc-chatbtn i { color: var(--accent) !important; }

/* ================= popups / settings / alerts ================= */
.popUpWindow__card, .settingsCard, .notifications__popup, #notify_windows, .dropList, .listUsers, #right_click_window, .contextMenu, .tc-panel {
  background: var(--card) !important; color: var(--text) !important; border-radius: var(--radius-l) !important; box-shadow: var(--shadow-2), 0 0 0 1px var(--line) !important; border: 0 !important; }
.landTabs ul, .settingsCard ul { background: var(--card-2) !important; padding: 12px 8px !important; border-right: 1px solid var(--line); }
.landTabs__tabs { color: var(--text) !important; border-radius: var(--radius-s) !important; margin: 2px 0 !important; border: 0 !important; box-shadow: none !important; font-weight: 500; }
.landTabs__tabs:hover { background: var(--fill) !important; }
.landTabs__tabs.active { background: var(--accent) !important; color: #fff !important; }
.landTabs__tabs.active *, .landTabs__tabs.active i { color: #fff !important; }
.landTabs__title { color: var(--text-2) !important; text-transform: uppercase; font-size: 12px !important; font-weight: 600; letter-spacing: .04em; }
.listUsers__item, .form__listUsers { background: transparent !important; border-radius: var(--radius-s); }
.listUsers__item:hover { background: var(--fill) !important; }
.swal2-popup { background: var(--card) !important; color: var(--text) !important; border-radius: var(--radius-l) !important; }
.swal2-title, .swal2-content, .swal2-html-container { color: var(--text) !important; }
.swal2-styled.swal2-confirm { background: var(--accent) !important; border-radius: var(--radius-s) !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel { background: var(--fill) !important; color: var(--text) !important; border-radius: var(--radius-s) !important; }
#timp-pwa-card { border-radius: var(--radius-l) !important; box-shadow: var(--shadow-2) !important; background: var(--card) !important; color: var(--text) !important; }
#timp-pwa-card button { background: var(--fill) !important; color: var(--accent) !important; border: 0 !important; border-radius: var(--radius-s) !important; font-weight: 600; }

/* ================= sign-in ================= */
#form_login, #form_reg, .landForm, .landForm__card { border-radius: var(--radius-l) !important; box-shadow: var(--shadow-2) !important; }
#login_btn, #reg_btn { background: var(--g-500) !important; border-radius: var(--radius-s) !important; box-shadow: none !important; }

/* ================= dark: legacy sheet hardcodes near-black text ================= */
html[data-appearance="dark"] body :is(p, span, label, li, td, th, h1, h2, h3, h4, h5, h6, div, b, strong, small) { color: var(--text); }
html[data-appearance="dark"] .material-icons { color: var(--text-2); }
html[data-appearance="dark"] .btn .material-icons, html[data-appearance="dark"] .landTabs__tabs.active * { color: #fff !important; }
html[data-appearance="dark"] .miniCard, html[data-appearance="dark"] .notificMsg, html[data-appearance="dark"] .listUsers__item { background-color: var(--card) !important; }
html[data-appearance="dark"] .miniCard[style*="background"] { filter: brightness(.55) saturate(1.15); }
html[data-appearance="dark"] .miniCard[style*="background"] * { color: #fff !important; }
html[data-appearance="dark"] img[src*="no_photo"] { filter: invert(.85); }

/* ================= appearance picker ================= */
.tp-appearance { margin: 6px 0 18px; }
.tp-seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--fill); border-radius: var(--radius-s); padding: 3px; max-width: 420px; }
.tp-seg button { border: 0; background: transparent; color: var(--text-2); padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.tp-seg button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-1); }
.tp-accents { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.tp-accents button { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; position: relative; transition: transform .15s; }
.tp-accents button:hover { transform: scale(1.08); }
.tp-accents button.on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--text-3); }
.tp-hint { color: var(--text-2); font-size: 12px; margin-top: 8px; }
.tp-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; margin-top: 12px; max-width: 560px; }
.tp-theme { border: 0; padding: 0; background: transparent; cursor: pointer; text-align: center; color: var(--text); font-size: 13px; font-weight: 600; }
.tp-theme__card { position: relative; height: 84px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-1); margin-bottom: 6px; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .15s, transform .15s; }
.tp-theme:hover .tp-theme__card { transform: translateY(-1px); }
.tp-theme.on .tp-theme__card { outline-color: var(--accent); }
.tp-theme__bar { position: absolute; left: 0; right: 0; top: 0; height: 16px; }
.tp-theme__b1, .tp-theme__b2 { position: absolute; height: 12px; border-radius: 6px; }
.tp-theme__b1 { left: 10px; top: 30px; width: 54%; background: #fff; }
.tp-theme__b2 { right: 10px; top: 50px; width: 46%; }
.tp-walls { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; margin-top: 12px; max-width: 560px; }
.tp-wall { border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--text-2); font-size: 12px; }
.tp-wall__tile { height: 96px; border-radius: 12px; margin-bottom: 4px; box-shadow: var(--shadow-1); background-size: 120px 120px, cover !important; outline: 3px solid transparent; outline-offset: 2px; display: flex; align-items: center; justify-content: center; }
.tp-wall.on .tp-wall__tile { outline-color: var(--accent); }
.tp-wall.on { color: var(--text); font-weight: 600; }
html[data-appearance="dark"] .leftMenu__logo img { filter: invert(1) hue-rotate(180deg) brightness(1.05); }

/* ================= push prompt ================= */
.tp-push-card { position: fixed; left: 24px; bottom: 24px; z-index: 10040; width: min(380px, calc(100% - 48px)); display: grid; grid-template-columns: 40px 1fr; gap: 12px;
  background: var(--card); color: var(--text); border-radius: var(--radius-l); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); padding: 16px; animation: tp-rise .35s cubic-bezier(.2,.9,.25,1); }
.tp-push-card__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent) !important; display: flex; align-items: center; justify-content: center; }
.tp-push-card__text b { display: block; font-size: 15px; margin-bottom: 2px; }
.tp-push-card__text span { color: var(--text-2); font-size: 13px; line-height: 1.4; }
.tp-push-card__btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-push-card__btns button { height: 38px; border: 0; border-radius: var(--radius-s); font-weight: 600; cursor: pointer; }
.tp-push-card .tp-later { background: var(--fill); color: var(--text); }
.tp-push-card .tp-on { background: var(--accent); color: #fff; }
.tp-push-setting { margin-bottom: 18px; }
@keyframes tp-rise { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ================= direct chats drawer (controllers/Main/dm.js) ================= */
.dm-menu { position: relative; display: flex; align-items: center; margin-right: 4px; }
#dm_btn { cursor: pointer; user-select: none; color: var(--bar-ink2) !important; padding: 8px; border-radius: 10px; font-size: 22px; }
#dm_btn:hover { color: var(--bar-ink) !important; background: rgba(255,255,255,.10); }
.dm-badge { display: none; position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bar); }
.dm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 10030; background: var(--card); color: var(--text);
  box-shadow: -1px 0 0 var(--line), -16px 0 40px rgba(4,45,35,.18); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .32s cubic-bezier(.2,.9,.25,1); }
.dm-drawer.dm-open { transform: none; }
.dm-head { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px; height: 56px; flex: none; border-bottom: 1px solid var(--line); }
.dm-head--chat { padding-left: 8px; }
.dm-title { flex: 1; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.dm-title--sm { font-size: 15px; font-weight: 600; flex: none; }
.dm-icon { border: 0; background: transparent; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); }
.dm-icon:hover { background: var(--fill); color: var(--text); }
.dm-icon--accent { color: var(--accent); }
.dm-who { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.dm-who__text { min-width: 0; }
.dm-search { display: flex; align-items: center; gap: 8px; margin: 12px 16px; padding: 0 12px; height: 40px; border-radius: var(--radius-s); background: var(--fill); }
.dm-search i { color: var(--text-3); font-size: 20px; }
.dm-search input { flex: 1; border: 0; background: transparent; outline: none; color: var(--text); font-size: 14px; }
.dm-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.dm-section { color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px; }
.dm-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); cursor: pointer; transition: background .15s; }
.dm-row:hover { background: var(--fill); }
.dm-row__text { flex: 1; min-width: 0; }
.dm-row__top, .dm-row__bottom { display: flex; align-items: center; gap: 8px; }
.dm-row__name { flex: 1; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row__time { color: var(--text-3); font-size: 12px; }
.dm-row__sub { flex: 1; color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dm-av { flex: none; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; background: var(--fill); }
.dm-av img { width: 100%; height: 100%; object-fit: cover; }
.dm-empty { color: var(--text-2); font-size: 14px; text-align: center; padding: 24px 16px; }
.dm-empty--big { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 64px; }
.dm-empty--big i { font-size: 44px; color: var(--accent); opacity: .7; }
.dm-empty--big b { color: var(--text); font-size: 16px; }
.dm-messages { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--card-2); }
.dm-day { align-self: center; margin: 10px 0 6px; padding: 3px 10px; border-radius: 10px; background: var(--fill); color: var(--text-2); font-size: 12px; font-weight: 600; }
.dm-bubble { max-width: 78%; padding: 7px 12px 5px; border-radius: 16px; font-size: 14.5px; line-height: 1.42; box-shadow: var(--shadow-1); word-wrap: break-word; white-space: pre-wrap; }
.dm-bubble--in { align-self: flex-start; background: var(--card); color: var(--text); border-bottom-left-radius: 6px; }
.dm-bubble--out { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.dm-time { font-size: 11px; opacity: .65; text-align: right; margin-top: 2px; }
.dm-quote { display: flex; flex-direction: column; border-left: 3px solid currentColor; padding: 2px 8px; margin-bottom: 4px; font-size: 12.5px; opacity: .85; min-width: 0; }
.dm-quote span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-composer { flex: none; border-top: 1px solid var(--line); padding: 8px 12px 12px; background: var(--card); }
.dm-reply { display: none; align-items: center; gap: 8px; color: var(--accent); padding: 4px 4px 8px; }
.dm-reply .dm-quote { flex: 1; }
.dm-composer__line { display: flex; align-items: flex-end; gap: 8px; }
.dm-composer textarea { flex: 1; resize: none; border: 0; outline: none; border-radius: 20px; background: var(--fill); color: var(--text); padding: 10px 14px; font-size: 14.5px; line-height: 1.35; max-height: 140px; }
.dm-send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dm-send i { color: #fff !important; }
.dm-blocked { flex: none; padding: 16px; text-align: center; color: var(--text-2); border-top: 1px solid var(--line); }
@media (max-width: 600px) { .dm-drawer { width: 100vw; } }

/* ================= chat wallpapers (per theme default, user override; same set in the Android app) ================= */
:root { --wall-pat-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.6'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M70 12v14M63 19h14'/%3E%3Crect x='92' y='50' width='14' height='14' rx='3' transform='rotate(20 99 57)'/%3E%3Cpath d='M14 84q8-10 16 0t16 0'/%3E%3Cpath d='M78 88l9 14h-18z'/%3E%3Ccircle cx='52' cy='56' r='2.5' fill='%23fff'/%3E%3Ccircle cx='104' cy='108' r='2' fill='%23fff'/%3E%3C/svg%3E"); --wall-pat-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.08'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M70 12v14M63 19h14'/%3E%3Crect x='92' y='50' width='14' height='14' rx='3' transform='rotate(20 99 57)'/%3E%3Cpath d='M14 84q8-10 16 0t16 0'/%3E%3Cpath d='M78 88l9 14h-18z'/%3E%3Ccircle cx='52' cy='56' r='2.5' fill='%23000'/%3E%3Ccircle cx='104' cy='108' r='2' fill='%23000'/%3E%3C/svg%3E"); --wall-pat-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.08'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M70 12v14M63 19h14'/%3E%3Crect x='92' y='50' width='14' height='14' rx='3' transform='rotate(20 99 57)'/%3E%3Cpath d='M14 84q8-10 16 0t16 0'/%3E%3Cpath d='M78 88l9 14h-18z'/%3E%3Ccircle cx='52' cy='56' r='2.5' fill='%23fff'/%3E%3Ccircle cx='104' cy='108' r='2' fill='%23fff'/%3E%3C/svg%3E"); }
html[data-appearance="dark"] { --wall-pat-w: var(--wall-pat-d); --wall-pat-i: var(--wall-pat-d); }
html[data-wallpaper="mint"] { --wall: var(--wall-pat-w), linear-gradient(160deg, #cfeedd 0%, #a6dcc4 100%); }
html[data-appearance="dark"][data-wallpaper="mint"] { --wall: var(--wall-pat-d), linear-gradient(160deg, #0f2a22 0%, #0a1d18 100%); }
html[data-wallpaper="ocean"] { --wall: var(--wall-pat-w), linear-gradient(160deg, #cfe3fb 0%, #9cc3f2 100%); }
html[data-appearance="dark"][data-wallpaper="ocean"] { --wall: var(--wall-pat-d), linear-gradient(160deg, #0e1f3d 0%, #08142a 100%); }
html[data-wallpaper="lavender"] { --wall: var(--wall-pat-w), linear-gradient(160deg, #e3dafb 0%, #c3b1f3 100%); }
html[data-appearance="dark"][data-wallpaper="lavender"] { --wall: var(--wall-pat-d), linear-gradient(160deg, #1d1538 0%, #120c25 100%); }
html[data-wallpaper="sunset"] { --wall: var(--wall-pat-w), linear-gradient(160deg, #fde3c4 0%, #f7b98a 100%); }
html[data-appearance="dark"][data-wallpaper="sunset"] { --wall: var(--wall-pat-d), linear-gradient(160deg, #33200f 0%, #1f130a 100%); }
html[data-wallpaper="sakura"] { --wall: var(--wall-pat-w), linear-gradient(160deg, #fbdde8 0%, #f2b3c9 100%); }
html[data-appearance="dark"][data-wallpaper="sakura"] { --wall: var(--wall-pat-d), linear-gradient(160deg, #33141f 0%, #200b13 100%); }
html[data-wallpaper="lagoon"] { --wall: var(--wall-pat-w), linear-gradient(160deg, #cdf0f3 0%, #93d6df 100%); }
html[data-appearance="dark"][data-wallpaper="lagoon"] { --wall: var(--wall-pat-d), linear-gradient(160deg, #0c2a2f 0%, #07191c 100%); }
html[data-wallpaper="night"] { --wall: var(--wall-pat-d), linear-gradient(160deg, #2b3350 0%, #141a2e 100%); }
html[data-appearance="dark"][data-wallpaper="night"] { --wall: var(--wall-pat-d), linear-gradient(160deg, #1c2238 0%, #0b0f1c 100%); }
html[data-wallpaper="sand"] { --wall: var(--wall-pat-i), linear-gradient(160deg, #f4ecdf 0%, #e8dcc6 100%); }
html[data-appearance="dark"][data-wallpaper="sand"] { --wall: var(--wall-pat-d), linear-gradient(160deg, #2a251d 0%, #1b1812 100%); }
html[data-wallpaper="graphite"] { --wall: var(--wall-pat-i), linear-gradient(160deg, #f5f5f5 0%, #e4e4e7 100%); }
html[data-appearance="dark"][data-wallpaper="graphite"] { --wall: var(--wall-pat-d), linear-gradient(160deg, #18181b 0%, #09090b 100%); }
html[data-wallpaper="neon"] { --wall: var(--wall-pat-w), linear-gradient(160deg, #e9e5ff 0%, #d5f3fb 100%); }
html[data-appearance="dark"][data-wallpaper="neon"] { --wall: var(--wall-pat-d), linear-gradient(160deg, #1a0b3b 0%, #04152a 100%); }
html[data-wallpaper="plain"] { --wall: var(--card-2); }
#chat_container.chatContainer, .dm-messages { background: var(--wall, var(--card-2)) !important; background-size: 120px 120px, cover !important; }
html[data-wallpaper="night"] .dm-day, html[data-wallpaper="night"] .chatContainer__date { color: rgba(255,255,255,.8) !important; }

/* ================= phones (2026-10-09) ================= */
/* iOS zooms the page into any focused field under 16px — that zoom pushed the chat sideways and cut off the send button. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select, .dm-composer textarea, .dm-search input, #textarea { font-size: 16px !important; }
}
.tc-perm { z-index: 10070; top: calc(12px + env(safe-area-inset-top)); bottom: auto; left: 50%; transform: translateX(-50%); }
.tc-perm__btns { grid-template-columns: 1fr; }
/* The drawer follows the visible area above the keyboard (dm.js sets top/height from visualViewport). */
.dm-drawer { padding-bottom: env(safe-area-inset-bottom); }
.dm-drawer.dm-kb { padding-bottom: 0; }
html.dm-lock, html.dm-lock body { overflow: hidden !important; overscroll-behavior: none; }
html.dm-lock .tp-push-card:not(.tc-perm) { display: none !important; }

/* ================= smart invite in «Участники проекта» (theme_members.js, 2026-10-10) ================= */
.listUsers__found:empty { display: none; }
.listUsers__found { margin: 4px 0 10px; padding: 8px; border-radius: var(--radius); background: var(--accent-soft); }
.listUsers__foundTitle { margin: 0 4px 6px; color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.listUsers__foundEmpty { margin: 4px; color: var(--text-2); font-size: 13px; }
.listUsers__person { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: var(--radius-s); }
.listUsers__person + .listUsers__person { border-top: 1px solid var(--line); }
.listUsers__person .listUsers__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; margin: 0 !important; }
.listUsers__person .listUsers__avatar img { width: 100%; height: 100%; object-fit: cover; }
.listUsers__avatar--mail { display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--accent) !important; font-size: 20px; }
.listUsers__personText { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.listUsers__personText b { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listUsers__personText span { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listUsers__personBtn { flex: none; min-width: 104px; height: 32px !important; padding: 0 12px !important; margin: 0 !important; font-size: 13px !important; }
.listUsers__personBtn:disabled { opacity: .6; cursor: default; }

/* ================= direct chats: photos, files, header menu (dm.js, 2026-10-10) ================= */
.dm-photo { display: block; margin: 2px -6px 4px; border-radius: 12px; overflow: hidden; max-width: 260px; background: rgba(0,0,0,.08); }
.dm-photo img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; }
.dm-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 2px -4px 4px; border-radius: 10px; background: rgba(127,127,127,.12); color: inherit !important; text-decoration: none; max-width: 260px; }
.dm-file__icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.dm-bubble--out .dm-file__icon { background: rgba(255,255,255,.25); }
.dm-file__icon i { color: #fff !important; font-size: 20px; }
.dm-file__text { min-width: 0; display: flex; flex-direction: column; }
.dm-file__text b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-file__text small { font-size: 11.5px; opacity: .7; }
.dm-attach { flex: none; align-self: center; }
.dm-pop { position: absolute; z-index: 5; min-width: 220px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px; display: flex; flex-direction: column; }
.dm-pop__item { border: 0; background: transparent; text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.dm-pop__item:hover { background: var(--fill); }
.dm-pop__item--danger { color: var(--red); }
.chatContainer__msg .tp-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(127,127,127,.14); color: inherit !important; text-decoration: none; }
.chatContainer__msg .tp-file i { font-size: 18px; }

/* ================= brand (logo v2, 2026-10-10) ================= */
.tp-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--accent-strong, #0b7358); }
.tp-brand img { height: 44px; width: 44px; object-fit: contain; }
.landTitle .tp-brand { font-size: 34px; color: #0b5c40; }
.landTitle .tp-brand img { height: 56px; width: 56px; }
html[data-appearance="dark"] .tp-brand { color: var(--text); }

/* ================= direct chats: ticks, reactions, voice, video notes, message menu (2026-10-10) ================= */
.dm-ticks { margin-left: 4px; letter-spacing: -3px; opacity: .75; }
.dm-ticks--read { opacity: 1; color: #9ff0d0; }
.dm-bubble--in .dm-ticks--read { color: var(--accent); }
.dm-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dm-react { border: 0; border-radius: 12px; padding: 2px 8px; font-size: 13px; cursor: pointer; background: rgba(127,127,127,.16); color: inherit; }
.dm-react--mine { background: rgba(255,255,255,.32); }
.dm-bubble--in .dm-react--mine { background: var(--accent-soft); color: var(--accent); }
.dm-voice { width: 240px; max-width: 100%; height: 36px; display: block; margin: 2px 0; }
.dm-bubble--note { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.dm-note { width: 240px; height: 240px; object-fit: cover; border-radius: 22px; display: block; background: #1c1c1e; }
.dm-bubble--note .dm-time { background: rgba(0,0,0,.45); color: #fff; display: inline-block; padding: 1px 7px; border-radius: 8px; margin-top: 4px; }
.dm-pop--msg { min-width: 240px; }
.dm-pop__reactions { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.dm-pop__reactions button { border: 0; background: transparent; font-size: 20px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.dm-pop__reactions button:hover { background: var(--fill); }

/* ================= hub: Проекты · Чаты · Звонки (controllers/Main/hub.js, 2026-10-11) ================= */
.hub-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 4px 16px 12px; padding: 3px; border-radius: 12px; background: var(--fill); }
.hub-seg button { position: relative; border: 0; background: transparent; border-radius: 9px; height: 32px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.hub-seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.hub-seg__badge { position: absolute; top: -5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; line-height: 18px; }
html.hub-other #left .leftMenu__formSearch, html.hub-other #left #add_theme_button, html.hub-other #left #theme_tabs, html.hub-other #left #theme_add_new,
html.hub-other #left .leftMenu__link, html.hub-other #left .leftMenu__pinHint { display: none !important; }
.hub-pane { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 16px; }
html.hub-other .hub-pane { display: flex; flex-direction: column; animation: hub-in .22s ease; }
@keyframes hub-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hub-search { display: flex; align-items: center; gap: 8px; margin: 0 8px 8px; padding: 0 12px; height: 38px; border-radius: 10px; background: var(--fill); cursor: text; }
.hub-search i { font-size: 20px; color: var(--text-3); }
.hub-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: 15px; }
.hub-list { display: flex; flex-direction: column; }
.hub-section { padding: 14px 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.hub-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 12px; text-align: left; cursor: pointer; color: var(--text);
  transition: background .15s ease, transform .1s ease; }
.hub-row:hover { background: var(--fill); }
.hub-row:active { transform: scale(.985); }
.hub-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hub-row__top, .hub-row__bottom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hub-row__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-row__pin { font-size: 14px !important; color: var(--text-3); transform: rotate(35deg); }
.hub-row__time { font-size: 12px; color: var(--text-3); flex: none; }
.hub-row__sub { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-row__sub--missed { color: var(--red); }
.hub-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.hub-act { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); transition: transform .12s ease; }
.hub-act:hover { transform: scale(1.08); }
.hub-act i { font-size: 18px !important; color: var(--accent) !important; }
.hub-av { flex: none; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; background: var(--fill); }
.hub-av img { width: 100%; height: 100%; object-fit: cover; }
.hub-empty { padding: 20px 16px; text-align: center; color: var(--text-2); font-size: 14px; }
.hub-empty--big { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 48px; }
.hub-empty--big i { font-size: 46px !important; color: var(--accent) !important; opacity: .7; }
.hub-empty--big b { color: var(--text); font-size: 16px; }

/* ---- phones: an app-like shell (bottom tab bar + full-screen lists) ---- */
.hub-tabbar, .hub-screen { display: none; }
@media (max-width: 760px) {
  .hub-seg, .hub-pane { display: none !important; }
  html.hub-ready .hub-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 10020;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); }
  html.hub-inner .hub-tabbar { transform: translateY(110%); }
  .hub-tabbar { transition: transform .25s cubic-bezier(.2,.9,.25,1); }
  .hub-tab { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0; color: var(--text-3); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .hub-tab.on { color: var(--accent); }
  .hub-tab__icon { position: relative; display: flex; }
  .hub-tab__icon i { font-size: 26px !important; color: inherit !important; transition: transform .15s ease; }
  .hub-tab:active .hub-tab__icon i { transform: scale(.88); }
  .hub-tab__label { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
  .hub-tab__badge { position: absolute; top: -4px; left: 18px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; box-shadow: 0 0 0 2px var(--card); }
  html.hub-other .hub-screen { display: block; position: fixed; inset: 0; z-index: 10010; overflow-y: auto; background: var(--card);
    padding: calc(env(safe-area-inset-top) + 8px) 8px calc(84px + env(safe-area-inset-bottom)); animation: hub-in .22s ease; }
  .hub-title { margin: 8px 12px 10px; font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
  .hub-row { padding: 10px 8px; }
  html.hub-ready:not(.hub-inner) #main, html.hub-ready:not(.hub-inner) #left { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
  html.hub-ready #left.show { width: 100vw !important; max-width: 100vw !important; }
}
@media (max-width: 760px) {
  /* Prompts float above the tab bar instead of covering it. */
  html.hub-ready .tp-push-card:not(.tc-perm), html.hub-ready #timp-pwa-card { bottom: calc(84px + env(safe-area-inset-bottom)) !important; left: 12px !important; right: 12px !important; width: auto !important; }
}
@media (max-width: 760px) {
  html.hub-ready #left .leftMenu__pinHint, html.hub-ready #left .leftMenu__link { display: none !important; }
  html.hub-ready #left .projectArchive { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  html.hub-ready #left .projectArchive__btn { margin-bottom: 0 !important; }
}

/* 0.9.1.2: clickable links in direct messages */
.dm-text .dm-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; word-break: break-all; }
.dm-bubble--in .dm-text .dm-link { color: var(--accent); }
.dm-text .dm-link:hover { text-decoration-thickness: 2px; }

/* 0.9.1.6: subproject label on project cards */
.projectCard__parent { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 0.9.4.4 (owner: «2+ фото на чате — правильно собрать»): photo albums. Personal chats (dm.js builds .dm-album) … */
.dm-album { display: grid; gap: 2px; margin: 2px -6px 4px; border-radius: 12px; overflow: hidden; width: 280px; max-width: 100%; }
.dm-album--2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
.dm-album--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 120px 120px; }
.dm-album--3 .dm-album__item:first-child { grid-row: 1 / 3; }
.dm-album--4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 138px; }
.dm-album--5 { grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 92px; }
.dm-album__item { display: block; background: rgba(0,0,0,.08); overflow: hidden; }
.dm-album__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* … and project/task chats (legacy markup: one <span class="tp-att"><a><img class="img_preview"></a></span> per photo): tiles when there are 2+. */
.tp-att { display: inline-block; vertical-align: top; }
.tp-att img.img_preview { max-width: 280px; max-height: 340px; object-fit: cover; border-radius: 10px; }
.tp-att:has(img.img_preview):has(~ .tp-att img.img_preview) img.img_preview,
.tp-att:has(img.img_preview) ~ .tp-att:has(img.img_preview) img.img_preview { width: 138px; height: 138px; margin: 1px; }