:root {
  --swatch-custom: conic-gradient(from 90deg, var(--accent), var(--cover-garden), var(--cover-rain), var(--cover-wind), var(--accent));
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --button-text: #f7fbf8;
  --text: #151d1a;
  --text-muted: #66736d;
  --text-on-dark: #f7fbf8;
  --surface: rgba(251, 253, 250, 0.84);
  --surface-strong: #f9fbf8;
  --surface-subtle: #e9f0e9;
  --border: rgba(31, 50, 40, 0.13);
  --accent: #4e8068;
  --accent-weak: #dcebdc;
  --danger: #b84646;
  --cover-wind: #7a9f91;
  --cover-garden: #d09b75;
  --cover-rain: #9a788b;
  --login-shadow: #172d26;
  --login-mid: #547967;
  --login-light: #efd1aa;
  --brand-highlight: #f2c494;
  --avatar-from: #c2837d;
  --avatar-to: #6f425d;
  --dark: #151d1a;
  --atmosphere-light: rgba(255, 255, 255, 0.52);
  --atmosphere-shadow: rgba(11, 35, 27, 0.68);
  --atmosphere-lines: rgba(255, 255, 255, 0.2);
  --hero-overlay: rgba(10, 25, 19, 0.3);
  --nav-hover: rgba(255, 255, 255, 0.18);
  --control-border-on-dark: rgba(255, 255, 255, 0.22);
  --control-surface-on-dark: rgba(255, 255, 255, 0.1);
  --work-shadow: 0 4px 14px color-mix(in srgb, var(--accent), transparent 92%);
  --shadow-card: 0 18px 60px color-mix(in srgb, var(--accent), transparent 76%);
  --shadow-float: 0 8px 20px color-mix(in srgb, var(--accent), transparent 84%);
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 32px;
  --layer-background: 0;
  --layer-overlay: 1;
  --layer-surface: 2;
  --layer-content: 3;
  --layer-navigation: 10;
  --layer-popover: 20;
  --layer-modal: 30;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); font-family: var(--font-sans); background: var(--surface-subtle); }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.is-hidden { display: none !important; }
.surface { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); backdrop-filter: blur(20px); }
.login-screen { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; padding: 24px; isolation: isolate; }
.atmosphere, .profile-hero { position: absolute; inset: 0; z-index: var(--layer-background); background: linear-gradient(125deg, var(--login-shadow) 0%, var(--login-mid) 42%, var(--login-light) 100%); }
.atmosphere::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 25%, var(--atmosphere-light), transparent 25%), radial-gradient(ellipse at 20% 100%, var(--atmosphere-shadow), transparent 44%); }
.atmosphere::after { content: ""; position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(120deg, transparent 48%, var(--atmosphere-lines) 49%, transparent 50%); background-size: 120px 120px; }
.login-card { position: relative; z-index: var(--layer-content); width: min(100%, 438px); padding: clamp(28px, 7vw, 54px); border-radius: var(--radius-l); text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: .76rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow svg { width: 16px; height: 16px; color: var(--accent); }
h1, h2, p { margin-top: 0; }
.login-card h1 { margin: 16px 0 12px; font-size: clamp(2rem, 7vw, 3.1rem); letter-spacing: -.065em; line-height: .98; }
.login-card p { color: var(--text-muted); line-height: 1.55; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 19px; border: 0; border-radius: 999px; cursor: pointer; font-weight: 750; }


.button svg { width: 20px; height: 20px; }
.button-primary { width: 100%; margin-top: 17px; color: var(--button-text); background: var(--dark); }
.button-dark { border: 1px solid var(--dark); color: var(--button-text); background: var(--dark); }
.login-message { min-height: 24px; margin: 16px 0 0 !important; font-size: .88rem; }
.login-message.is-error { color: var(--danger); font-weight: 650; }

.profile-screen { position: relative; min-height: 100svh; padding-bottom: 56px; overflow: hidden; }
.profile-hero { height: 360px; z-index: var(--layer-background); overflow: hidden; isolation: isolate; background-image: var(--profile-background-image, linear-gradient(130deg, var(--login-shadow) 0%, var(--accent) 46%, var(--cover-garden) 100%)); background-position: var(--background-x, 50%) var(--background-y, 50%); background-size: var(--background-scale, 100%); }
.profile-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--hero-overlay), transparent 60%, var(--surface-subtle)); }
.topbar { position: relative; z-index: var(--layer-navigation); display: flex; align-items: center; width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0; color: var(--text-on-dark); }
.brand, .nav-item, .icon-button { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.brand { font-weight: 800; }
.brand svg { color: var(--brand-highlight); }
.topbar nav { position: absolute; left: 50%; display: flex; gap: 5px; transform: translateX(-50%); }
.topbar > .icon-button { margin-left: auto; }
.nav-item, .icon-button { border: 0; border-radius: 999px; padding: 9px 12px; background: transparent; cursor: pointer; }
.nav-item.is-active, .nav-item:hover, .icon-button:hover { background: var(--nav-hover); }
.nav-item svg, .icon-button svg { width: 20px; height: 20px; }
.profile-card { position: relative; width: min(1120px, calc(100% - 32px)); margin: 172px auto 0; padding: clamp(24px, 4vw, 38px); border-radius: var(--radius-l); }
.identity-row { display: flex; align-items: flex-start; gap: 20px; }
.avatar-wrap { position: relative; flex: 0 0 auto; }
.avatar { display: grid; flex: 0 0 auto; width: 144px; height: 144px; place-items: center; overflow: hidden; border: 4px solid var(--surface-strong); border-radius: 50%; color: var(--text-on-dark); font-size: 3rem; font-weight: 800; background-image: var(--avatar-image, linear-gradient(145deg, var(--avatar-from), var(--avatar-to))); background-position: var(--avatar-x, 50%) var(--avatar-y, 50%); background-size: var(--avatar-scale, cover); box-shadow: var(--shadow-float); }
.profile-screen.is-editing .avatar, .profile-screen.is-editing .profile-hero { cursor: pointer; }
.avatar.has-image { color: transparent; }
.avatar-edit, .background-edit { display: grid; place-items: center; border: 1px solid var(--border); color: var(--text); background: var(--surface-strong); cursor: pointer; box-shadow: var(--shadow-float); }
.avatar-edit { position: absolute; z-index: var(--layer-navigation); right: 2px; bottom: 2px; width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.avatar-edit svg { width: 18px; height: 18px; }
.frame-page-layer { position: absolute; pointer-events: none; }.profile-screen.is-editing .frame-page-layer { pointer-events: auto; }.avatar-frame-overlay { position: absolute; z-index: calc(var(--layer-content) + 1); display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transform: translate(var(--frame-x, 0px), var(--frame-y, 0px)) scale(var(--frame-scale, 1)) rotate(var(--frame-rotate, 0deg)); }.profile-screen.is-editing .avatar-frame-overlay { cursor: grab; pointer-events: auto; touch-action: none; }.profile-screen.is-editing .avatar-frame-overlay.is-dragging { cursor: grabbing; }.profile-screen:has(.frame-page-layer:not(.is-hidden)) .avatar { border-color: transparent; }
.frame-composite-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }.profile-screen.is-editing .frame-composite-canvas { pointer-events: auto; touch-action: none; cursor: grab; }
.profile-screen:not(.is-editing) .background-edit { display: none; }
.background-edit { position: absolute; z-index: var(--layer-navigation); top: 82px; right: max(16px, calc((100% - 1120px) / 2)); width: 40px; height: 40px; border-radius: 50%; }
.background-edit svg { width: 18px; height: 18px; }
.avatar-wrap[data-shape="rounded"] .avatar { border-radius: var(--radius-m); }


.avatar-wrap[data-frame="glow"] .avatar { border-color: transparent; box-shadow: 0 0 0 4px var(--accent-weak), 0 0 24px var(--accent); }
.avatar-wrap[data-frame="orbit"]::before { position: absolute; z-index: -1; inset: -6px; border-radius: 50%; background: conic-gradient(var(--accent), var(--cover-garden), var(--accent)); content: ""; animation: orbit 3.5s linear infinite; }
.online-label { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; color: var(--accent); font-size: .83rem; font-weight: 700; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent), transparent 75%); }
.identity-copy h1 { margin-bottom: 4px; font-size: clamp(1.75rem, 4vw, 2.45rem); letter-spacing: -.055em; }
.identity-copy p { margin-bottom: 15px; color: var(--text-muted); }
.role-list { display: flex; flex-wrap: wrap; gap: 8px; }
.role-chip { padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--surface-strong); cursor: pointer; font-size: .83rem; font-weight: 680; }
.role-chip.is-selected { border-color: transparent; color: var(--text-on-dark); background: var(--accent); }
.profile-actions { position: absolute; top: 38px; right: clamp(24px, 4vw, 38px); }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 32px; border-top: 1px solid var(--border); padding-top: 22px; }
.metric { display: grid; gap: 4px; padding: 0 20px; border-left: 1px solid var(--border); }
.metric:first-child { padding-left: 0; border-left: 0; }
.metric strong { font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: -.04em; text-transform: lowercase; }
.metric span { color: var(--text-muted); font-size: .83rem; }
.works-section { position: relative; width: min(1120px, calc(100% - 32px)); margin: 44px auto 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.section-heading h2 { margin: 7px 0 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.05em; }
.text-button { display: inline-flex; align-items: center; gap: 5px; border: 0; color: var(--accent); background: transparent; cursor: pointer; font-weight: 750; }
.text-button svg { width: 16px; }
.work-list { display: grid; gap: 12px; }
.work-row { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; min-height: 100px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-strong); box-shadow: var(--work-shadow); }
.cover-fade { align-self: stretch; background: linear-gradient(90deg, var(--cover) 0%, color-mix(in srgb, var(--cover), var(--surface-strong) 55%) 63%, var(--surface-strong) 100%); }
.work-copy { padding: 16px 0; }
.work-title-line, .work-time { display: flex; align-items: center; gap: 7px; }
.work-title { color: var(--text); font-weight: 800; text-decoration: none; }
.work-chapter, .work-details { color: var(--text-muted); font-size: .86rem; }
.work-details { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; }
.work-details svg { width: 16px; height: 16px; }
.work-time { justify-self: end; color: var(--text-muted); font-size: .86rem; white-space: nowrap; }
.work-time svg { width: 20px; height: 20px; flex: 0 0 auto; }
.result-button { display: inline-flex; align-items: center; gap: 7px; margin-right: 16px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--surface); cursor: pointer; font-weight: 700; white-space: nowrap; }
.result-button svg { width: 16px; }
.edit-panel { display: grid; gap: 18px; margin-top: 32px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-subtle); }
.edit-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.edit-panel h2 { margin: 6px 0 0; font-size: 1.15rem; letter-spacing: -.025em; }
.edit-hint { color: var(--text-muted); font-size: .83rem; }
.edit-controls { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, .9fr); gap: 10px; }
.edit-choice, .select-choice { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-s); color: var(--text); background: var(--surface-strong); font-weight: 700; }
.edit-choice { cursor: pointer; text-align: left; }
.edit-choice:hover { border-color: var(--accent); }
.edit-choice svg, .select-choice svg { width: 18px; height: 18px; color: var(--accent); }
.select-choice { position: relative; display: grid; grid-template-columns: 18px 1fr; }
.select-choice select { grid-column: 2; width: 100%; border: 0; outline: 0; color: var(--text-muted); background: transparent; font: inherit; font-size: .83rem; }
.upload-status { grid-column: span 4; margin: -2px 0 0; color: var(--text-muted); font-size: .8rem; }
.custom-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-s); color: var(--text); background: var(--surface-strong); }
.custom-palette legend { padding: 0 5px; color: var(--text-muted); font-size: .83rem; font-weight: 700; }
.custom-palette label { display: grid; gap: 6px; color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.custom-palette input { width: 100%; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-s); background: transparent; cursor: pointer; }
.range-choice { display: grid; gap: 6px; min-height: 50px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-strong); color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.range-choice input { accent-color: var(--accent); }
.asset-controls { margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-strong); }.asset-controls h3 { margin: 0 0 10px; color: var(--text-muted); font-size: .83rem; font-weight: 700; }.asset-controls p { margin: 0 0 10px; color: var(--text-muted); font-size: .8rem; }.asset-list { display: grid; gap: 7px; margin-top: 10px; }.asset-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 36px; gap: 8px; align-items: center; }.asset-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 700; }.asset-blend { min-height: 34px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); color: var(--text); }.asset-delete { height: 34px; border: 0; border-radius: var(--radius-s); background: var(--danger); color: var(--text-on-dark); cursor: pointer; }
.asset-row-sticker { grid-template-columns: minmax(0, 1fr) 140px 140px 36px; }
.sticker-layer { position: absolute; inset: 0; pointer-events: none; }
.sticker { position: absolute; width: var(--sticker-size, 80px); height: var(--sticker-size, 80px); touch-action: none; user-select: none; }
.sticker-art { position: absolute; z-index: calc(var(--layer-content) + 1); inset: 0; display: block; pointer-events: none; transform: rotate(var(--sticker-rotate, 0deg)); }
.sticker[data-layer="background"] .sticker-art { z-index: var(--layer-background); }
.sticker[data-layer="under-buttons"] .sticker-art { z-index: var(--layer-content); }
.sticker[data-layer="top"] .sticker-art { z-index: var(--layer-popover); }
.sticker img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sticker-hit-area { position: absolute; z-index: var(--layer-navigation); inset: 0; display: none; cursor: grab; pointer-events: auto; }
.profile-screen.is-editing .sticker-hit-area { display: block; }
.sticker-hit-area { inset: -10px; }
.transform-box { position: absolute; z-index: var(--layer-modal); inset: -7px; display: none; border: 2px solid var(--dark); pointer-events: none; }.sticker .transform-box { transform: rotate(var(--sticker-rotate, 0deg)); }.profile-screen.is-editing .frame-page-layer.is-selected:not(.is-hidden) .frame-tools, .profile-screen.is-editing .sticker.is-selected .transform-box { display: block; }.resize-handle { position: absolute; display: grid; width: 14px; height: 14px; place-items: center; border: 2px solid var(--dark); border-radius: 0; background: var(--surface-strong); pointer-events: auto; cursor: nwse-resize; }.resize-nw { top: -8px; left: -8px; }.resize-ne { top: -8px; right: -8px; }.resize-sw { bottom: -8px; left: -8px; }.resize-se { right: -8px; bottom: -8px; }.rotate-handle, .object-delete { position: absolute; display: grid; width: 20px; height: 20px; place-items: center; border: 0; padding: 0; color: var(--dark); background: transparent; pointer-events: auto; cursor: pointer; }.rotate-handle { top: -31px; left: 50%; transform: translateX(-50%); }.object-delete { top: -31px; right: -6px; }.rotate-handle svg, .object-delete svg { width: 17px; height: 17px; }
.profile-screen.is-editing .sticker.is-dragging .sticker-hit-area { cursor: grabbing; }
.profile-actions { z-index: var(--layer-navigation); }.role-list { position: relative; z-index: var(--layer-navigation); }.topbar, .background-edit { z-index: var(--layer-navigation); }
.edit-actions { display: flex; justify-content: end; gap: 9px; }
.button-secondary { border: 1px solid var(--border); color: var(--text); background: var(--surface-strong); }
@media (max-width: 680px) {
  .topbar nav span { display: none; }
  .topbar nav { position: static; gap: 0; margin-left: auto; transform: none; }
  .profile-hero { height: 284px; }
  .avatar { width: 84px; height: 84px; font-size: 2rem; }
  .avatar-edit { right: -2px; bottom: -2px; width: 30px; height: 30px; }
  .avatar-edit svg { width: 15px; height: 15px; }
  .avatar-frame-overlay { inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }
  .background-edit { top: 76px; }
  .profile-card { margin-top: 126px; }
  .profile-actions { position: static; margin-top: 21px; }
  .button-dark { width: 100%; }
  .metrics { grid-template-columns: 1fr; gap: 16px; }
  .metric, .metric:first-child { padding: 0; border: 0; }
  .work-row { grid-template-columns: 76px minmax(0, 1fr); gap: 0 14px; }
  .cover-fade { grid-row: span 3; }
  .work-copy { padding-bottom: 7px; }
  .work-time { justify-self: start; padding-bottom: 6px; }
  .result-button { width: max-content; margin: 0 0 13px; }
  .edit-panel-heading { display: grid; }
  .edit-controls { grid-template-columns: 1fr; }
  .upload-status { grid-column: auto; }
  .custom-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-row-sticker { grid-template-columns: 1fr 1fr 36px; }.asset-row-sticker span { grid-column: span 3; }
}
.visually-hidden { position: fixed; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }
.cosmetics-off .profile-hero { background-image: linear-gradient(130deg, var(--login-shadow) 0%, var(--accent) 46%, var(--cover-garden) 100%); }
.cosmetics-off .avatar.has-image { color: var(--text-on-dark); background-image: linear-gradient(145deg, var(--avatar-from), var(--avatar-to)); }
.cosmetics-off .avatar-wrap[data-frame]::before { display: none; }
@keyframes orbit { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Рамка аватара: служебная рамка с ручками двигается, растёт и вращается вместе с картинкой. */
.frame-tools.transform-box { inset: auto; left: 50%; top: 50%; width: calc(100% * var(--frame-scale, 1) + 14px); height: calc(100% * var(--frame-scale, 1) + 14px); transform: translate(-50%, -50%) translate(var(--frame-x, 0px), var(--frame-y, 0px)) rotate(var(--frame-rotate, 0deg)); }
/* Курсоры уголков смотрят туда, куда тянем. */
.resize-ne, .resize-sw { cursor: nesw-resize; }

/* === Слои стикеров ===
   фон шапки (0) → стикеры «На фоне» (0) → подложки карточек (2) → стикеры «Под кнопками» (3)
   → содержимое карточек: роли, кнопки, статистика, главы (4) → стикеры «Поверх всего» (20).
   Чтобы стикер мог встать между подложкой и содержимым, подложка карточки рисуется отдельным слоем. */
.profile-card.surface { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
.profile-card::before { content: ""; position: absolute; inset: 0; z-index: var(--layer-surface); border: 1px solid var(--border); border-radius: inherit; background: var(--surface); box-shadow: var(--shadow-card); backdrop-filter: blur(20px); pointer-events: none; }
.profile-card > :not(.profile-actions), .works-section > .section-heading, .work-row > :not(.cover-fade) { position: relative; z-index: calc(var(--layer-content) + 1); }
.work-row { z-index: auto; }

/* Наведение в режиме редактирования: стикер и рамка полупрозрачные, видно, что под ними. */
.profile-screen.is-editing .sticker:hover .sticker-art, .profile-screen.is-editing .sticker.is-dragging .sticker-art,
.profile-screen.is-editing .frame-page-layer:hover .avatar-frame-overlay, .profile-screen.is-editing .frame-page-layer:hover .frame-composite-canvas { opacity: .5; }
.sticker-art, .avatar-frame-overlay { transition: opacity .12s ease; }
@media (prefers-reduced-motion: reduce) { .sticker-art, .avatar-frame-overlay { transition: none; } }

/* Свернуть панель: страница выглядит как обычно, внизу остаётся маленькая плашка. */
.edit-heading-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.edit-collapse { min-height: 38px; padding: 0 14px; font-size: .85rem; }
.edit-panel.is-collapsed { position: absolute; z-index: var(--layer-modal); top: var(--collapse-top); right: var(--collapse-right); left: auto; margin: 0; padding: 0; border: 0; background: none; display: block; }
.edit-panel.is-collapsed > :not(.edit-panel-heading), .edit-panel.is-collapsed .edit-panel-heading > :not(.edit-heading-side), .edit-panel.is-collapsed .edit-hint { display: none; }
.edit-panel.is-collapsed .edit-panel-heading, .edit-panel.is-collapsed .edit-heading-side { display: block; }
.edit-panel.is-collapsed .edit-collapse { opacity: .45; }
.edit-panel.is-collapsed .edit-collapse:hover, .edit-panel.is-collapsed .edit-collapse:focus-visible { opacity: 1; }

/* Аватар и фон: превью картинки + удалить. */
.media-choice { display: flex; align-items: stretch; min-height: 50px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-strong); overflow: hidden; }
.media-choice:hover { border-color: var(--accent); }
.media-pick { display: flex; flex: 1; align-items: center; gap: 10px; padding: 8px 12px; border: 0; color: var(--text); background: transparent; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.media-thumb { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--thumb, linear-gradient(145deg, var(--avatar-from), var(--avatar-to))) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--border); }
.media-thumb-wide { width: 48px; border-radius: var(--radius-s); background: var(--thumb, linear-gradient(130deg, var(--login-shadow) 0%, var(--accent) 46%, var(--cover-garden) 100%)) center / cover no-repeat; }
.media-clear { display: grid; width: 40px; place-items: center; padding: 0; border: 0; border-left: 1px solid var(--border); color: var(--text-muted); background: transparent; cursor: pointer; }
.media-clear:hover { color: var(--danger); }
.media-clear svg { width: 16px; height: 16px; }
.media-clear[disabled] { opacity: .35; cursor: default; }

/* Ползунки: аватар и фон — каждый на своей строке. */
.range-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; order: 2; }

/* Палитра градиентами. */
.palette-picker { grid-column: span 4; order: 1; display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-strong); }
.palette-picker + .select-choice { order: 1; }
.palette-label { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; }
.palette-label svg { width: 18px; height: 18px; color: var(--accent); }
.palette-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.palette-swatch { width: 36px; height: 36px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-s); background: var(--swatch); background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; }
.palette-swatch[aria-checked="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) { .range-row { grid-template-columns: 1fr; } .palette-picker { grid-column: 1 / -1; } }

/* Карандаш аватара вынесен наверх страницы, чтобы его не перекрывали рамка и стикеры. */
.avatar-edit.is-floating { position: absolute; right: auto; bottom: auto; z-index: calc(var(--layer-popover) + 5); }
/* Аватар и фон двигаются перетаскиванием. */
.profile-screen.is-editing .avatar, .profile-screen.is-editing .profile-hero { cursor: grab; touch-action: none; }
.avatar.is-panning, .profile-hero.is-panning { cursor: grabbing !important; }
/* Блок рамки: превью, наложение, удалить. */
.frame-inline { display: flex; align-items: stretch; }
.frame-inline:empty { display: none; }
.frame-blend { width: 104px; min-width: 0; padding: 0 6px; border: 0; border-left: 1px solid var(--border); color: var(--text-muted); background: transparent; font: inherit; font-size: .8rem; }
.media-thumb-frame { border-radius: var(--radius-s); background: var(--thumb, repeating-conic-gradient(var(--surface-subtle) 0 25%, var(--surface-strong) 0 50%) 0 0 / 10px 10px) center / contain no-repeat; }
.media-pick { min-width: 0; }
.media-pick > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 980px) { .edit-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } .palette-picker { grid-column: 1 / -1; } }

.media-pick { gap: 8px; padding: 8px 10px; }
.media-clear { width: 32px; }
.frame-blend { width: 92px; }

.edit-actions { align-items: center; }
.edit-actions .edit-hint { margin-right: auto; color: var(--text-muted); font-size: .83rem; }
.edit-actions .button { width: auto; min-width: 140px; }
.edit-collapse[aria-pressed="true"] { opacity: .45; }
.edit-collapse[aria-pressed="true"]:hover, .edit-collapse[aria-pressed="true"]:focus-visible { opacity: 1; }

/* === Шрифты: одна видимая высота букв и одна высота строк для любого шрифта === */
html { font-size-adjust: ex-height 0.5; }
body { line-height: 1.4; }
.font-single-weight body, .font-single-weight body * { font-synthesis: none; }

/* === Иконки: только Lucide, 16px в подписях, 20px у самостоятельных кнопок === */
.edit-panel svg, .media-clear svg, .palette-label svg { width: 16px !important; height: 16px !important; }
.icon-button svg, .avatar-edit svg, .rotate-handle svg, .object-delete svg { width: 20px !important; height: 20px !important; }
.avatar-edit.is-floating svg { width: 16px !important; height: 16px !important; }

/* Стрелка у выпадающих списков — Lucide chevron-down вместо системной. */
.select-choice select, .frame-blend, .asset-blend { appearance: none; -webkit-appearance: none; padding-right: 22px; cursor: pointer; }
.select-choice, .select-wrap { position: relative; }
.select-wrap { display: flex; }
.select-choice::after, .select-wrap::after { content: ""; position: absolute; right: 10px; bottom: 14px; width: 16px; height: 16px; background: var(--text-muted); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.select-wrap::after { right: 6px; top: 50%; bottom: auto; transform: translateY(-50%); }
.select-choice.visually-hidden::after { display: none; }
.select-choice.visually-hidden { position: fixed; }
.select-wrap > select { flex: 1; width: 100%; min-width: 0; }

/* Ар-деко слишком тонкий — утолщаем линии. */
html.font-poiret body { -webkit-text-stroke: .45px currentColor; }
/* У пиксельного строчные буквы высокие, как заглавные, поэтому общее выравнивание его сильно уменьшало. */
html.font-pixel { font-size-adjust: ex-height 0.62; }

/* Стикер ловит мышь только на своём слое: «На фоне» и «Под кнопками» не перехватывают клики
   по карточке, кнопкам и панели — схватить их можно там, где они действительно видны. */
.sticker[data-layer="background"] .sticker-hit-area { z-index: var(--layer-background); }
.sticker[data-layer="under-buttons"] .sticker-hit-area { z-index: var(--layer-content); }
.sticker[data-layer="top"] .sticker-hit-area { z-index: var(--layer-popover); }

/* Выбранный стикер (с рамкой выделения) хватается везде, где он есть, даже поверх кнопок. */
.sticker.is-selected .sticker-hit-area { z-index: var(--layer-modal); }
/* В режиме редактирования перетаскивание не выделяет текст кнопок. */
.profile-screen.is-editing { -webkit-user-select: none; user-select: none; }
.profile-screen.is-editing input, .profile-screen.is-editing textarea { -webkit-user-select: text; user-select: text; }
.asset-row-sticker > span:first-child { cursor: pointer; }
.asset-row-sticker.is-selected > span:first-child { color: var(--accent); }

/* Сложность: три черепушки, включённые — цветом акцента. */
.level-icons { display: inline-flex; gap: 4px; align-items: center; min-height: 1.2em; }
.level-step { display: inline-grid; color: var(--border); }
.level-step svg { width: 24px; height: 24px; }
.level-step.is-on { color: var(--text); }
/* Статус не в сети — приглушённый. */
.online-label.is-offline { color: var(--text-muted); }
.online-label.is-offline .status-dot { background: var(--text-muted); box-shadow: none; }

/* Своя палитра — сразу под палитрой, три группы. */
.custom-palette { grid-column: 1 / -1; order: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 14px 14px; background: var(--surface-strong); }
.custom-palette legend { float: left; width: 100%; margin-bottom: 4px; padding: 0; color: var(--text); font-size: .9rem; }
.custom-palette legend + * { clear: both; }
.palette-group { display: grid; gap: 8px; align-content: start; }
.palette-group h4 { margin: 0; color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.custom-palette label { grid-template-columns: 36px 1fr; align-items: center; gap: 10px; color: var(--text); font-size: .83rem; }
.custom-palette input[type="color"] { order: -1; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; -webkit-appearance: none; appearance: none; }
.custom-palette input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.custom-palette input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius-s) - 1px); }
.custom-palette input[type="color"]::-moz-color-swatch { border: 0; border-radius: calc(var(--radius-s) - 1px); }
@media (max-width: 720px) { .custom-palette { grid-template-columns: 1fr; } }

/* Палитра + обращение + шрифт в одной строке. */
.palette-picker { grid-column: span 3; }
.palette-picker ~ .select-choice { order: 1; }

/* Шапка на светлом фоне — тёмный текст. */
.topbar.is-on-light { color: var(--text); }
.topbar.is-on-light .nav-item.is-active, .topbar.is-on-light .nav-item:hover, .topbar.is-on-light .icon-button:hover { background: color-mix(in srgb, var(--text), transparent 90%); }
.custom-palette legend { grid-column: 1 / -1; }

.save-toast { position: fixed; z-index: var(--layer-modal); left: 50%; bottom: 20px; max-width: min(520px, calc(100% - 32px)); padding: 12px 18px; border: 1px solid var(--border); border-radius: var(--radius-m); color: var(--text); background: var(--surface-strong); box-shadow: var(--shadow-float); font-weight: 700; transform: translateX(-50%); display: none; }
.save-toast.is-visible { display: block; }
.save-toast.is-error { color: var(--danger); }

/* Аватар: картинка считается от внешнего края круга (вместе с ободком) и не повторяется —
   иначе под ободком вылезали полоски от повтора картинки при сдвиге. */
.avatar { background-origin: border-box; background-clip: border-box; background-repeat: no-repeat; }

/* ================= Мои работы ================= */
.my-works, .assignment-drawer { display: none; }
.profile-screen[data-view="works"] .my-works { display: block; }
.profile-screen[data-view="works"] :is(.profile-card, .works-section, .sticker-layer, .frame-page-layer, .avatar-edit.is-floating) { display: none !important; }
.profile-screen[data-view="works"] .profile-hero { height: 220px; }
.my-works { position: relative; z-index: calc(var(--layer-content) + 1); width: min(1120px, calc(100% - 32px)); margin: 72px auto 0; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-card); backdrop-filter: blur(20px); }
.back-button { padding: 0; font-weight: 700; }
.back-button svg { width: 16px; height: 16px; }
.my-works-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 0 16px; }
.my-works-title-row h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -.04em; }
.view-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-strong); }
.icon-toggle { display: grid; width: 38px; height: 34px; place-items: center; border: 0; border-radius: 999px; color: var(--text-muted); background: transparent; cursor: pointer; }
.icon-toggle svg { width: 20px; height: 20px; }
.icon-toggle[aria-pressed="true"] { color: var(--button-text); background: var(--dark); }
.status-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip-count { margin-left: 4px; opacity: .65; font-weight: 600; }

.assignments[data-layout="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px 18px; }
.assignments[data-layout="list"] { display: grid; gap: 10px; }
.assignment { display: grid; gap: 10px; padding: 0; border: 0; color: var(--text); background: none; font: inherit; text-align: left; cursor: pointer; }
.assignment-cover { position: relative; display: grid; aspect-ratio: 2 / 3; place-items: center; overflow: hidden; border-radius: var(--radius-m); background: linear-gradient(160deg, var(--cover), color-mix(in srgb, var(--cover), var(--dark) 45%)); box-shadow: var(--shadow-card); }
.assignment-initial { color: var(--text-on-dark); font-size: 3rem; font-weight: 800; opacity: .55; }
.assignment:hover .assignment-cover, .assignment:focus-visible .assignment-cover { outline: 2px solid var(--accent); outline-offset: 3px; }
.role-badges { position: absolute; top: 8px; right: 8px; display: grid; gap: 6px; }
.role-badge { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--text); background: var(--surface-strong); box-shadow: var(--shadow-float); }
.role-badge svg { width: 16px; height: 16px; }
.assignment-info { display: grid; gap: 4px; min-width: 0; }
.assignment-title { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.assignment-chapter { color: var(--text-muted); font-size: .83rem; }
.assignment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.status-pill { padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 750; color: var(--text); background: var(--surface-subtle); }
.status-pill.tone-accent { color: var(--button-text); background: var(--accent); }
.status-pill.tone-danger { color: var(--button-text); background: var(--danger); }
.status-pill.tone-done { color: var(--text-muted); background: transparent; border: 1px solid var(--border); }
.due { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: .8rem; }
.due svg { width: 16px; height: 16px; }
.due.is-soon { color: var(--text); font-weight: 700; }
.due.is-late { color: var(--danger); font-weight: 700; }

/* Список */
.assignments[data-layout="list"] .assignment { grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-strong); }
.assignments[data-layout="list"] .assignment-cover { border-radius: var(--radius-s); box-shadow: none; }
.assignments[data-layout="list"] .assignment-initial { font-size: 1.3rem; }
.assignments[data-layout="list"] .role-badges { display: none; }
.assignments[data-layout="list"] .assignment-info { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.assignments[data-layout="list"] .assignment-meta { grid-column: 2; grid-row: 1 / span 2; margin: 0; justify-content: flex-end; }
.assignments[data-layout="list"] .assignment:hover { border-color: var(--accent); }
.assignments[data-layout="list"] .assignment:hover .assignment-cover { outline: 0; }
.empty-state { color: var(--text-muted); }

/* Карточка работы — выезжает справа */
.assignment-drawer.is-open { display: block; position: fixed; inset: 0; z-index: var(--layer-modal); }
.drawer-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--dark), transparent 55%); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); overflow-y: auto; padding: 28px; color: var(--text); background: var(--surface-strong); box-shadow: var(--shadow-float); }
.drawer-close { position: absolute; top: 16px; right: 16px; color: var(--text); }
.drawer-close:hover { background: var(--surface-subtle); }
.drawer-cover { display: grid; width: 120px; aspect-ratio: 2 / 3; place-items: center; margin-bottom: 16px; border-radius: var(--radius-m); background: linear-gradient(160deg, var(--cover), color-mix(in srgb, var(--cover), var(--dark) 45%)); }
.drawer-panel h2 { margin: 4px 0 8px; font-size: 1.5rem; letter-spacing: -.03em; }
.drawer-subtitle { margin: 24px 0 10px; color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.my-tasks { display: grid; gap: 8px; }
.my-task { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-s); }
.my-task .role-badge { box-shadow: none; background: var(--surface-subtle); }
.my-task-name { flex: 1; font-weight: 700; }
.drawer-actions { display: flex; gap: 8px; margin-top: 16px; }
.drawer-actions .button { flex: 1; width: auto; min-height: 44px; padding: 10px 14px; font-size: .9rem; }
.drawer-actions .button:disabled { opacity: .5; cursor: not-allowed; }
.drawer-actions svg { width: 16px; height: 16px; }
.drawer-note { margin: 8px 0 0; color: var(--text-muted); font-size: .78rem; }
.stage-line { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.stage-line li { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--text-muted); }
.stage-line li svg { width: 16px; height: 16px; }
.stage-line li.is-mine { color: var(--text); font-weight: 800; }
@media (max-width: 680px) { .assignments[data-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .assignments[data-layout="list"] .assignment-info { grid-template-columns: 1fr; } .assignments[data-layout="list"] .assignment-meta { grid-column: 1; grid-row: auto; justify-content: flex-start; } }
.assignment { align-content: start; align-items: start; }
.assignments[data-layout="list"] .assignment { align-items: center; }

/* --- Мои работы v2 --- */
/* Начинаются на той же высоте, что и карточка профиля: шапка не прыгает при переходах. */
.profile-screen[data-view="works"] .profile-hero { height: 360px; }
.my-works { margin-top: 172px; }

/* Все плашки статуса одного размера. */
.status-pill { display: inline-flex; box-sizing: border-box; min-width: 116px; height: 24px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid transparent; line-height: 1; white-space: nowrap; }
.status-pill.tone-done { border-color: var(--border); background: var(--surface-strong); }

/* Обложки: статус лежит на самой обложке внизу, под обложкой — название, глава и срок отдельной строкой. */
.assignment-cover .status-pill { position: absolute; left: 8px; bottom: 8px; box-shadow: var(--shadow-float); }
.assignment-cover .status-pill.tone-neutral { background: var(--surface-strong); }
.assignment-info { gap: 3px; }
.assignment-info .due { margin-top: 3px; height: 20px; }

/* Список: справа ровная колонка — статус сверху, срок под ним. */
.assignment-side { display: none; }
.assignments[data-layout="list"] .assignment { grid-template-columns: 56px minmax(0, 1fr) 160px; }
.assignments[data-layout="list"] .assignment-cover .status-pill, .assignments[data-layout="list"] .assignment-info .due { display: none; }
.assignments[data-layout="list"] .assignment-side { display: grid; justify-items: end; gap: 6px; }
.assignments[data-layout="list"] .assignment-side .due { height: 20px; }
@media (max-width: 680px) { .assignments[data-layout="list"] .assignment { grid-template-columns: 56px minmax(0, 1fr); } .assignments[data-layout="list"] .assignment-side { grid-column: 2; justify-items: start; } }
.assignments[data-layout="list"] .assignment-info { grid-template-columns: 1fr; }

/* --- Мои работы v3 --- */
/* Полоса прокрутки всегда занимает место: страницы разной длины не сдвигают карточку вбок. */
html { scrollbar-gutter: stable; }
/* Те же отступы, что у карточки профиля. */
.my-works { padding: clamp(24px, 4vw, 38px); }
/* «Перейти к работам» и «Вернуться в профиль» стоят в одной точке и одного размера. */
.profile-actions .button { min-width: 232px; }
.my-works-actions { position: absolute; top: 38px; right: clamp(24px, 4vw, 38px); }
.my-works h1 { margin: 6px 0 22px; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -.04em; }
.my-works-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.my-works-toolbar .status-filters { margin: 0; }
@media (max-width: 680px) { .my-works-actions { position: static; margin-bottom: 16px; } .my-works-toolbar { flex-wrap: wrap; } }

/* --- v4 --- */
/* Подложка карточки профиля рисуется по внешнему краю, как и у «Моих работ» — одинаковый размер. */
.profile-card::before { inset: -1px; }
/* Срок: обычным начертанием, жирным только просрочка. В списке — по центру под плашкой статуса. */
.due.is-soon { color: var(--text-muted); font-weight: 400; }
.assignments[data-layout="list"] .assignment-side { justify-items: stretch; width: 116px; justify-self: end; }
.assignments[data-layout="list"] .assignment-side .due { justify-content: center; }
/* Переключатель вида: ровные круги внутри овала. */
.view-toggle { gap: 2px; }
.icon-toggle { width: 34px; height: 34px; padding: 0; line-height: 0; }

/* --- Палитры / обращение / шрифт --- */
.palette-picker { grid-column: span 4; }
.select-stack { order: 1; display: grid; gap: 10px; }
.select-stack .select-choice { min-height: 0; padding: 8px 12px; }
.palette-swatches { gap: 8px; }

/* Шрифт: кнопка + список с образцами */
.font-choice { position: relative; }
.font-picker-button { grid-column: 2; width: 100%; padding: 0 22px 0 0; border: 0; color: var(--text-muted); background: transparent; font: inherit; font-size: .9rem; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.font-popover { position: absolute; z-index: var(--layer-popover); top: calc(100% + 6px); right: 0; width: 300px; max-height: 380px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-strong); box-shadow: var(--shadow-float); }
.font-popover[hidden] { display: none; }
.font-option { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-s); color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.font-option:hover { background: var(--surface-subtle); }
.font-option[aria-selected="true"] { background: var(--accent-weak); }
.font-sample { font-size: 1.15rem; line-height: 1.3; }
.font-name { color: var(--text-muted); font-family: var(--font-sans); font-size: .75rem; font-weight: 700; }

/* Декоративный шрифт — только для заголовков и имени */
:root { --font-display: var(--font-sans); }
h1, h2, .metric strong, .assignment-title, .work-title, .brand span { font-family: var(--font-display); }
.font-display-single-weight :is(h1, h2, .metric strong, .assignment-title, .work-title, .brand span) { font-synthesis: none; }
.profile-card > .edit-panel { z-index: calc(var(--layer-content) + 3); }
.select-stack select { font-size: .8rem; }
.metric strong { text-transform: none; }

/* --- Палитры семействами --- */
.palette-swatches { display: grid; gap: 10px; }
.palette-families { display: flex; flex-wrap: wrap; gap: 8px; }
.palette-swatch.is-open { outline: 2px dashed var(--accent); outline-offset: 2px; }
.palette-swatch[aria-checked="true"] { outline-style: solid; }
.palette-variants { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border-radius: var(--radius-s); background: var(--surface-subtle); }
.palette-variant { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--surface-strong); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.palette-variant span { width: 24px; height: 24px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px var(--border); }
.palette-variant[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Шрифт: компактный список, названия написаны своими шрифтами, без прокрутки */
.font-popover { width: 220px; max-height: none; overflow: visible; padding: 4px; }
.font-popover.opens-up { top: auto; bottom: calc(100% + 6px); }
.font-option { display: block; padding: 7px 12px; font-size: 1rem; line-height: 1.25; }

/* Цвета в «Своей палитре» не сливаются с подложкой */
.custom-palette input[type="color"] { border: 1px solid color-mix(in srgb, var(--text), transparent 65%); }
.profile-card > .edit-panel { z-index: calc(var(--layer-navigation) + 1); }

/* Шапка: цвет подбирается под фон из цветов палитры (см. setTopbarTone) */
.topbar, .topbar.is-on-light { color: var(--topbar-fg, var(--text-on-dark)); }
.topbar .nav-item.is-active, .topbar .nav-item:hover, .topbar .icon-button:hover,
.topbar.is-on-light .nav-item.is-active, .topbar.is-on-light .nav-item:hover, .topbar.is-on-light .icon-button:hover { background: color-mix(in srgb, var(--topbar-fg, var(--text-on-dark)), transparent 82%); }
.topbar .brand svg { color: inherit; }

/* Окно «Закрыть без сохранения?» */
.leave-dialog { position: fixed; inset: 0; z-index: calc(var(--layer-modal) + 5); display: grid; place-items: center; padding: 16px; }
.leave-dialog[hidden] { display: none; }
.leave-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--login-shadow), transparent 50%); }
.leave-card { position: relative; width: min(500px, 100%); padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-l); color: var(--text); background: var(--surface-strong); box-shadow: var(--shadow-float); }
.leave-card h2 { margin: 0 0 8px; font-size: 1.25rem; }
.leave-card p { margin: 0 0 20px; color: var(--text-muted); }
.leave-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.leave-actions .button { width: auto; min-height: 44px; padding: 10px 16px; font-size: .9rem; }
.leave-actions [data-leave="stay"] { margin-right: auto; }

/* Список шрифтов: фиксированно под карточкой «Шрифт» (координаты ставит placeFontPopover) */
.font-popover { position: fixed; z-index: calc(var(--layer-modal) + 1); right: auto; bottom: auto; }

/* Псевдоним: карандаш рядом с именем, поле ввода тех же размеров */
.nickname-row { display: flex; align-items: center; gap: 8px; }
.nickname-row[hidden] { display: none; }
.nickname-edit { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); background: var(--surface-strong); cursor: pointer; }
.nickname-edit:hover { color: var(--text); border-color: var(--accent); }
.nickname-edit svg { width: 16px; height: 16px; }
.nickname-form { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.nickname-form[hidden] { display: none; }
.nickname-form input { width: min(320px, 100%); padding: 2px 10px; border: 1px solid var(--accent); border-radius: var(--radius-s); color: var(--text); background: var(--surface-strong); font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.04em; }
.nickname-form .icon-toggle { border: 1px solid var(--border); color: var(--text); }
.nickname-ok { color: var(--button-text) !important; background: var(--dark) !important; }
.tg-line span[title] { cursor: help; }
#nick-text b { color: var(--text); }

.tg-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor, transparent 60%); text-underline-offset: 3px; }
.tg-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.tg-id { padding: 0; border: 0; color: inherit; background: none; font: inherit; cursor: copy; }
.tg-id:hover { color: var(--text); }

/* Имя и поле ввода имени занимают одинаковую высоту — карточка не прыгает */
.nickname-row, .nickname-form { box-sizing: border-box; height: 60px; margin: 0; }
.nickname-row h1 { margin: 0; line-height: 1.15; }
.nickname-form input { height: 52px; }
.tg-id { cursor: pointer; }

/* Фокус и выделение текста — цветом темы, а не системным синим */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.nickname-form input:focus { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 65%); }
::selection { color: var(--text); background: color-mix(in srgb, var(--accent), transparent 60%); }
input, textarea { accent-color: var(--accent); caret-color: var(--accent); }

/* Псевдоним редактируется на месте: без рамки и сдвигов — только курсор и тонкое подчёркивание цвета темы */
.nickname-btn { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); background: var(--surface-strong); cursor: pointer; }
.nickname-btn[hidden] { display: none; }
.nickname-btn svg { width: 16px; height: 16px; }
.nickname-btn:hover { color: var(--text); border-color: var(--accent); }
.nickname-ok { color: var(--button-text); border-color: var(--dark); background: var(--dark); }
.nickname-ok:hover { color: var(--button-text); }
#nickname { outline: 0; border-radius: 4px; }
.nickname-row.is-editing #nickname { cursor: text; text-decoration: underline 2px var(--accent); text-underline-offset: 6px; caret-color: var(--accent); }

/* Строка оттенков всегда на месте — блок палитры не меняет высоту */
.palette-variants { min-height: 52px; align-items: center; }
.palette-variants.is-placeholder { color: var(--text-muted); font-size: .8rem; font-weight: 700; padding-left: 14px; }

/* «Нужны правки»: текст на красном — светлый цвет из палитры (подложка), а не тёмный цвет кнопок.
   В тёмных темах подложка тёмная, а красный там светлый — контраст тоже сохраняется. */
:root { --on-danger: var(--surface-strong); }
.status-pill.tone-danger { color: var(--on-danger); }

/* Центровка текста в плашках по заглавным буквам (оптическая), как принято в вёрстке:
   отступ над заглавной = отступу под строкой букв. */
.status-pill { line-height: 1; }
@supports (text-box: trim-both cap alphabetic) {
  .status-pill { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .status-pill { padding-top: .12em; }
}

/* Формы аватара: SVG-маски (гладкие края), своя форма — чёрно-белый трафарет */
.avatar-wrap[data-shape="squircle"] .avatar { border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 1C89 1 99 11 99 50C99 89 89 99 50 99C11 99 1 89 1 50C1 11 11 1 50 1Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 1C89 1 99 11 99 50C99 89 89 99 50 99C11 99 1 89 1 50C1 11 11 1 50 1Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.avatar-wrap[data-shape="heart"] .avatar { border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 92C47 89 4 62 4 32C4 16 16 6 29 6C39 6 46 12 50 20C54 12 61 6 71 6C84 6 96 16 96 32C96 62 53 89 50 92Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 92C47 89 4 62 4 32C4 16 16 6 29 6C39 6 46 12 50 20C54 12 61 6 71 6C84 6 96 16 96 32C96 62 53 89 50 92Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.avatar-wrap[data-shape="flower"] .avatar { border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='32'/%3E%3Ccircle cx='79.00' cy='50.00' r='19'/%3E%3Ccircle cx='70.51' cy='70.51' r='19'/%3E%3Ccircle cx='50.00' cy='79.00' r='19'/%3E%3Ccircle cx='29.49' cy='70.51' r='19'/%3E%3Ccircle cx='21.00' cy='50.00' r='19'/%3E%3Ccircle cx='29.49' cy='29.49' r='19'/%3E%3Ccircle cx='50.00' cy='21.00' r='19'/%3E%3Ccircle cx='70.51' cy='29.49' r='19'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='32'/%3E%3Ccircle cx='79.00' cy='50.00' r='19'/%3E%3Ccircle cx='70.51' cy='70.51' r='19'/%3E%3Ccircle cx='50.00' cy='79.00' r='19'/%3E%3Ccircle cx='29.49' cy='70.51' r='19'/%3E%3Ccircle cx='21.00' cy='50.00' r='19'/%3E%3Ccircle cx='29.49' cy='29.49' r='19'/%3E%3Ccircle cx='50.00' cy='21.00' r='19'/%3E%3Ccircle cx='70.51' cy='29.49' r='19'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.avatar-wrap[data-shape="hexagon"] .avatar { border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6L88 28V72L50 94L12 72V28Z' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6L88 28V72L50 94L12 72V28Z' stroke='black' stroke-width='10' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.avatar-wrap[data-shape="star"] .avatar { border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.0%2C5.0 64.1%2C33.6 95.7%2C38.2 72.8%2C60.4 78.2%2C91.8 50.0%2C77.0 21.8%2C91.8 27.2%2C60.4 4.3%2C38.2 35.9%2C33.6' stroke='black' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.0%2C5.0 64.1%2C33.6 95.7%2C38.2 72.8%2C60.4 78.2%2C91.8 50.0%2C77.0 21.8%2C91.8 27.2%2C60.4 4.3%2C38.2 35.9%2C33.6' stroke='black' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.avatar-wrap[data-shape="arch"] .avatar { border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M6 99V46A44 44 0 0 1 94 46V99Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M6 99V46A44 44 0 0 1 94 46V99Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.avatar-wrap[data-shape="custom"] .avatar { border-radius: 0; -webkit-mask: var(--avatar-mask) center / contain no-repeat; mask: var(--avatar-mask) center / contain no-repeat; mask-mode: luminance; }
.avatar-wrap[data-shape="custom"] .avatar, .avatar-wrap[data-shape="heart"] .avatar, .avatar-wrap[data-shape="flower"] .avatar, .avatar-wrap[data-shape="hexagon"] .avatar, .avatar-wrap[data-shape="star"] .avatar, .avatar-wrap[data-shape="arch"] .avatar, .avatar-wrap[data-shape="squircle"] .avatar { border-color: transparent; }

/* Красивые выпадающие списки */
.pretty-hidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.pretty-select-button { grid-column: 2; width: 100%; min-width: 0; padding: 0 22px 0 0; border: 0; color: var(--text-muted); background: transparent; font: inherit; font-size: .83rem; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.font-picker-button { font-size: .83rem; font-weight: 600; }
.pretty-select-button:focus-visible, .font-picker-button:focus-visible { outline: 0; text-decoration: underline 2px var(--accent); text-underline-offset: 4px; }
.select-choice select:focus { outline: 0; }
.choice-popover { position: fixed; z-index: calc(var(--layer-modal) + 1); }
.choice-popover[hidden] { display: none; }
.choice-popover .font-option { font-size: .92rem; }
/* Блок «Рамка»: «Режим» сверху, значение снизу — как у Формы и Обводки */
.mode-wrap { flex-direction: column; justify-content: center; gap: 2px; width: 120px; padding: 0 12px; border-left: 1px solid var(--border); }
.mode-wrap .mini-label { color: var(--text); font-size: .83rem; font-weight: 700; }
.mode-wrap .pretty-select-button { padding-right: 18px; }
.mode-wrap::after { right: 10px; top: auto; bottom: 12px; transform: none; }
.asset-row .select-wrap { align-items: center; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-strong); min-height: 34px; }

/* ================= Аватар v2: формы, ободок и эффекты повторяют форму ================= */
.avatar-wrap[data-shape="circle"] { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/svg%3E"); }
.avatar-wrap[data-shape="rounded"] { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='15'/%3E%3C/svg%3E"); }
.avatar-wrap[data-shape="squircle"] { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C90 0 100 10 100 50C100 90 90 100 50 100C10 100 0 90 0 50C0 10 10 0 50 0Z'/%3E%3C/svg%3E"); }
.avatar-wrap[data-shape="heart"] { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 93C47 90 3 62 3 31C3 15 15 5 29 5C39 5 46 11 50 19C54 11 61 5 71 5C85 5 97 15 97 31C97 62 53 90 50 93Z'/%3E%3C/svg%3E"); }
.avatar-wrap[data-shape="flower"] { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='32'/%3E%3Ccircle cx='79.00' cy='50.00' r='19'/%3E%3Ccircle cx='70.51' cy='70.51' r='19'/%3E%3Ccircle cx='50.00' cy='79.00' r='19'/%3E%3Ccircle cx='29.49' cy='70.51' r='19'/%3E%3Ccircle cx='21.00' cy='50.00' r='19'/%3E%3Ccircle cx='29.49' cy='29.49' r='19'/%3E%3Ccircle cx='50.00' cy='21.00' r='19'/%3E%3Ccircle cx='70.51' cy='29.49' r='19'/%3E%3C/svg%3E"); }
.avatar-wrap[data-shape="hexagon"] { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5L89 27.5V72.5L50 95L11 72.5V27.5Z' stroke='black' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.avatar-wrap[data-shape="star"] { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50.0%2C5.0 64.1%2C33.6 95.7%2C38.2 72.8%2C60.4 78.2%2C91.8 50.0%2C77.0 21.8%2C91.8 27.2%2C60.4 4.3%2C38.2 35.9%2C33.6' stroke='black' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.avatar-wrap[data-shape="arch"] { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M4 100V48A46 46 0 0 1 96 48V100Z'/%3E%3C/svg%3E"); }
.avatar-wrap { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/svg%3E"); position: relative; isolation: isolate; filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--accent), transparent 82%)); }
.avatar-wrap[data-shape="custom"] { --shape-mask: var(--avatar-mask); }
/* Размер: от строки «онлайн» до низа ролей */
.avatar { width: 156px; height: 156px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  -webkit-mask: var(--shape-mask) center / contain no-repeat !important; mask: var(--shape-mask) center / contain no-repeat !important; mask-mode: alpha !important; }
/* Ободок цвета подложки — у всех форм одинаковый */
.avatar-wrap::after { content: ""; position: absolute; z-index: -1; inset: -5px; background: var(--surface-strong);
  -webkit-mask: var(--shape-mask) center / contain no-repeat; mask: var(--shape-mask) center / contain no-repeat; pointer-events: none; }
.profile-screen:has(.frame-page-layer:not(.is-hidden)) .avatar-wrap::after { display: none; }
/* Кольцо эффекта — тоже по форме, чуть шире ободка */
.avatar-wrap::before { content: ""; position: absolute; z-index: -2; inset: -11px; display: none; border-radius: 0 !important; animation: none; transform: none !important;
  -webkit-mask: var(--shape-mask) center / contain no-repeat; mask: var(--shape-mask) center / contain no-repeat; pointer-events: none; }
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fx-spin { to { --fx-angle: 360deg; } }
@keyframes fx-neon { 50% { opacity: .35; } }
.avatar-wrap[data-frame="shadow"] { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent), transparent 30%)); }
.avatar-wrap[data-frame="sweep"]::before { display: block; background: conic-gradient(from var(--fx-angle), transparent 0 50%, color-mix(in srgb, var(--accent), transparent 85%) 70%, var(--accent) 99%, transparent 100%); animation: fx-spin 2.4s linear infinite; }
.avatar-wrap[data-frame="orbit"]::before { display: block; background: conic-gradient(from var(--fx-angle), var(--accent), var(--cover-garden), var(--accent-weak), var(--accent)); animation: fx-spin 3.5s linear infinite; }
.avatar-wrap[data-frame="neon"]::before { display: block; background: var(--accent); animation: fx-neon 1.8s ease-in-out infinite; }
.avatar-wrap[data-frame="neon"] { filter: drop-shadow(0 0 12px var(--accent)); }

/* Частицы */
.avatar-fx { position: absolute; z-index: 2; inset: -26px; overflow: visible; pointer-events: none; }
.avatar-fx span { position: absolute; top: 0; left: var(--x); font-size: calc(14px * var(--s)); line-height: 1; color: var(--accent); animation: fx-fall var(--t) linear var(--d) infinite; opacity: 0; }
@keyframes fx-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(10px, 100px) rotate(160deg); } 90% { opacity: .8; } 100% { transform: translate(-6px, 205px) rotate(320deg); opacity: 0; } }
.avatar-wrap[data-frame="hearts"] .avatar-fx span { color: color-mix(in srgb, var(--accent), var(--danger) 35%); animation-name: fx-rise; }
@keyframes fx-rise { 0% { transform: translate(0, 200px) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(8px, -10px) scale(1.1); opacity: 0; } }
.avatar-wrap[data-frame="bubbles"] .avatar-fx span { width: calc(12px * var(--s)); height: calc(12px * var(--s)); border: 1.5px solid color-mix(in srgb, var(--accent), white 30%); border-radius: 50%; background: color-mix(in srgb, var(--surface-strong), transparent 70%); animation-name: fx-rise; }
.avatar-wrap[data-frame="snow"] .avatar-fx span { color: color-mix(in srgb, var(--surface-strong), var(--accent) 25%); text-shadow: 0 0 4px color-mix(in srgb, var(--accent), transparent 50%); }
.avatar-wrap[data-frame="petals"] .avatar-fx span { width: calc(10px * var(--s)); height: calc(14px * var(--s)); border-radius: 80% 0 80% 0; background: color-mix(in srgb, var(--accent-weak), var(--cover-garden) 40%); }
.avatar-wrap[data-frame="stars"] .avatar-fx span { color: var(--cover-garden); animation-name: fx-twinkle; top: var(--y); }
.avatar-wrap[data-frame="sparkle"] .avatar-fx span { width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation-name: fx-twinkle; top: var(--y); }
@keyframes fx-twinkle { 0%, 100% { transform: scale(.3); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .avatar-wrap::before, .avatar-fx span { animation: none !important; } .avatar-fx span { opacity: .7; } }

/* Карандаш на аватарке — как у ника: тот же значок, обводка, подсветка при наведении */
.avatar-edit.is-floating { width: 32px; height: 32px; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface-strong); box-shadow: var(--shadow-float); }
.avatar-edit.is-floating:hover { color: var(--text); border-color: var(--accent); }

/* ================= Панель по разделам ================= */
.edit-section { display: grid; gap: 10px; }
.edit-section + .edit-section { padding-top: 18px; border-top: 1px solid var(--border); }
.edit-section-title { margin: 0; color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.edit-controls-avatar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
.edit-controls-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.edit-controls-colors { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.edit-controls .range-row { order: 0; }
@media (max-width: 860px) { .edit-controls-avatar, .edit-controls-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .frame-choice { grid-column: 1 / -1; } }

/* ================= Карточка: непрозрачность, стекло, скругление ================= */
.profile-card, .my-works { border-radius: var(--card-radius, var(--radius-l)); }
.profile-card::before { background: color-mix(in srgb, var(--surface-strong) var(--card-alpha, 86%), transparent); backdrop-filter: blur(var(--card-blur, 20px)); -webkit-backdrop-filter: blur(var(--card-blur, 20px)); }
.my-works { background: color-mix(in srgb, var(--surface-strong) var(--card-alpha, 86%), transparent); backdrop-filter: blur(var(--card-blur, 20px)); }

/* ================= Эффекты карточки (под кнопками) ================= */
.card-fx { position: absolute; inset: 0; z-index: var(--layer-content); overflow: hidden; border-radius: inherit; pointer-events: none; }
.card-fx-inner { position: absolute; inset: -45%; transform: rotate(var(--fx-rot, 0deg)); }
.card-fx span { position: absolute; left: var(--x); top: -4%; font-size: calc(14px * var(--s)); line-height: 1; color: var(--accent); opacity: 0;
  animation: card-fall calc(var(--fx-dur, 12s) * var(--k)) linear infinite; }
@keyframes card-fall { 0% { top: -4%; transform: translateX(0) rotate(0); opacity: 0; } 6% { opacity: .9; } 50% { transform: translateX(16px) rotate(180deg); } 94% { opacity: .8; } 100% { top: 104%; transform: translateX(-10px) rotate(360deg); opacity: 0; } }
@keyframes card-rise { 0% { top: 104%; transform: translateX(0) scale(.7); opacity: 0; } 8% { opacity: .9; } 100% { top: -4%; transform: translateX(14px) scale(1.1); opacity: 0; } }
.card-fx[data-kind="hearts"] span { color: color-mix(in srgb, var(--accent), var(--danger) 35%); animation-name: card-rise; }
.card-fx[data-kind="bubbles"] span { width: calc(16px * var(--s)); height: calc(16px * var(--s)); border: 1.5px solid color-mix(in srgb, var(--accent), var(--surface-strong) 20%); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--surface-strong), transparent 10%) 0 18%, color-mix(in srgb, var(--accent), transparent 85%) 45%, transparent 70%); animation-name: card-rise; }
.card-fx[data-kind="snow"] span { color: color-mix(in srgb, var(--accent), var(--surface-strong) 35%); }
.card-fx[data-kind="petals"] span { width: calc(10px * var(--s)); height: calc(14px * var(--s)); border-radius: 80% 0 80% 0; background: color-mix(in srgb, var(--accent-weak), var(--cover-garden) 45%); }
/* Звёзды: аккуратные четырёхлучевые, мягко мерцают и медленно плывут */
.card-fx[data-kind="stars"] span { top: var(--y); width: calc(18px * var(--s)); height: calc(18px * var(--s));
  background: linear-gradient(135deg, var(--surface-strong), var(--accent) 60%, var(--cover-garden));
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 4px var(--accent)); animation: card-star calc(4s * var(--k)) ease-in-out infinite; }
@keyframes card-star { 0%, 100% { transform: scale(.35) rotate(0); opacity: .15; } 50% { transform: scale(1) rotate(45deg) translate(var(--dx1), var(--dy1)); opacity: 1; } }
/* Блёстки: хаотично носятся и вспыхивают */
.card-fx[data-kind="sparkle"] span { top: var(--y); width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent), 0 0 12px color-mix(in srgb, var(--accent), transparent 50%);
  animation: card-glitter calc(3.2s * var(--k)) ease-in-out infinite; }
@keyframes card-glitter { 0% { transform: translate(0, 0) scale(.4); opacity: .2; } 25% { transform: translate(var(--dx1), var(--dy1)) scale(1); opacity: 1; } 50% { transform: translate(var(--dx2), var(--dy2)) scale(.6); opacity: .5; } 75% { transform: translate(var(--dx3), var(--dy3)) scale(1.1); opacity: 1; } 100% { transform: translate(0, 0) scale(.4); opacity: .2; } }
.card-fx[data-kind="stars"] span, .card-fx[data-kind="sparkle"] span { animation-delay: calc(-4s * var(--d) * -1) !important; }
@media (prefers-reduced-motion: reduce) { .card-fx span { animation: none !important; opacity: .6; top: var(--y) !important; } }
.profile-card > .card-fx { position: absolute; inset: 0; z-index: var(--layer-content); }

/* Сброс раздела */
.edit-section-head { display: flex; align-items: center; justify-content: space-between; }
.section-reset { font-size: .78rem; font-weight: 700; }
.section-reset svg { width: 16px; height: 16px; }
.fx-row { order: 0; }
/* Затемнение под окнами — мягче */
.leave-scrim { background: color-mix(in srgb, var(--login-shadow), transparent 66%); }
.drawer-scrim { background: color-mix(in srgb, var(--dark), transparent 70%); }
/* Полоса прокрутки в цвет темы */
html { scrollbar-color: color-mix(in srgb, var(--accent), transparent 35%) var(--surface-subtle); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface-subtle); }
::-webkit-scrollbar-thumb { border: 3px solid var(--surface-subtle); border-radius: 999px; background: color-mix(in srgb, var(--accent), transparent 35%); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* Свои курсоры */
html.has-custom-cursor, html.has-custom-cursor body, html.has-custom-cursor * { cursor: var(--cursor) !important; }
html.has-custom-cursor :is(a, button, label, select, [role="button"], [role="option"], .sticker-hit-area, .media-pick, .palette-swatch) { cursor: var(--cursor-pointer) !important; }
html.has-custom-cursor :is(input[type="text"], input:not([type]), textarea, [contenteditable="true"], [contenteditable="plaintext-only"]) { cursor: text !important; }

/* ================= Все работы (история) ================= */
.profile-screen[data-view="history"] .history-page { display: block; }
.profile-screen[data-view="history"] :is(.profile-card, .works-section, .sticker-layer, .frame-page-layer, .avatar-edit.is-floating, .my-works:not(.history-page)) { display: none !important; }
.profile-screen:not([data-view="history"]) .history-page { display: none !important; }
.history-summary { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 24px; padding: 16px 0; border-block: 1px solid var(--border); }
.history-summary .metric:first-child { padding-left: 0; border-left: 0; }
.history-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.history-search { display: flex; align-items: center; gap: 8px; min-width: 220px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); background: var(--surface-strong); }
.history-search svg { width: 16px; height: 16px; }
.history-search input { width: 100%; height: 36px; border: 0; outline: 0 !important; color: var(--text); background: transparent; font: inherit; font-size: .88rem; }
.history-group { position: sticky; top: 0; z-index: 1; margin: 22px 0 8px; padding: 6px 0; color: var(--text-muted); background: color-mix(in srgb, var(--surface-strong) var(--card-alpha, 86%), transparent); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.history-list { display: grid; }
.history-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.history-row:last-child { border-bottom: 0; }
.history-cover { display: grid; width: 40px; height: 56px; place-items: center; border-radius: 8px; color: var(--text-on-dark); background: linear-gradient(160deg, var(--cover), color-mix(in srgb, var(--cover), var(--dark) 45%)); font-weight: 800; opacity: .95; }
.history-main { display: grid; gap: 4px; min-width: 0; }
.history-title { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.history-chapter { color: var(--text-muted); font-weight: 600; }
.history-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-muted); font-size: .8rem; }
.history-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.history-meta svg { width: 16px; height: 16px; }
.role-tag { color: var(--text); font-weight: 700; }
.late-tag { color: var(--danger); font-weight: 700; }
.history-when { color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
.history-row .result-button { margin: 0; }
@media (max-width: 680px) { .history-summary { grid-template-columns: repeat(2, 1fr); gap: 14px; } .history-row { grid-template-columns: 40px minmax(0, 1fr); } .history-when, .history-row .result-button { grid-column: 2; justify-self: start; } }

/* ================= Шапка-навигация как карточка профиля ================= */
.topbar { box-sizing: border-box; margin: 12px auto; padding: 6px 8px 6px 18px; border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) var(--card-alpha, 86%), transparent); backdrop-filter: blur(var(--card-blur, 20px)); -webkit-backdrop-filter: blur(var(--card-blur, 20px));
  box-shadow: var(--shadow-float); color: var(--text) !important; }
.topbar .nav-item, .topbar .icon-button { color: var(--text-muted); }
.topbar .nav-item:hover, .topbar .icon-button:hover, .topbar.is-on-light .nav-item:hover, .topbar.is-on-light .icon-button:hover { color: var(--text); background: var(--surface-subtle) !important; }
.topbar .nav-item.is-active, .topbar.is-on-light .nav-item.is-active { color: var(--button-text); background: var(--dark) !important; }
.topbar .brand { color: var(--text); }
/* Текст в пунктах — оптически по центру (по заглавной) */
.nav-item span, .brand span, .role-chip { line-height: 1; }
@supports (text-box: trim-both cap alphabetic) { .nav-item span, .brand span { text-box: trim-both cap alphabetic; } }
.nav-item { align-items: center; }
/* «Просрок» в истории — красная плашка */
.late-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; color: var(--on-danger) !important; background: var(--danger); font-size: .72rem; font-weight: 750; line-height: 1; }

/* ================= Дедлайны ================= */
.profile-screen[data-view="deadlines"] .deadlines-page { display: block; }
.profile-screen[data-view="deadlines"] :is(.profile-card, .works-section, .sticker-layer, .frame-page-layer, .avatar-edit.is-floating, .my-works:not(.deadlines-page)) { display: none !important; }
.profile-screen:not([data-view="deadlines"]) .deadlines-page { display: none !important; }
.dl-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; }
.dl-nav, .dl-modes { display: flex; align-items: center; gap: 6px; }
.dl-nav .icon-toggle { border: 1px solid var(--border); color: var(--text); background: var(--surface-strong); }
.dl-range { min-width: 210px; text-align: center; font-weight: 800; }
.dl-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--cover); border-radius: var(--radius-s); color: var(--text); background: var(--surface-strong); font: inherit; text-align: left; cursor: pointer; }
.dl-item:hover { border-color: var(--accent); border-left-color: var(--cover); }
.dl-item-time { color: var(--text-muted); font-size: .82rem; font-weight: 700; }
.dl-item-title { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.dl-item-ch { color: var(--text-muted); font-weight: 600; }
.dl-item-roles { display: flex; gap: 10px; color: var(--text-muted); font-size: .8rem; }
.dl-item-roles .role-tag { display: inline-flex; align-items: center; gap: 4px; }
.dl-item-roles svg { width: 16px; height: 16px; }
/* список по дням */
.dl-day { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.dl-day:last-child { border-bottom: 0; }
.dl-date { display: grid; align-content: start; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--radius-s); color: var(--text-muted); background: var(--surface-subtle); font-size: .72rem; font-weight: 700; }
.dl-date strong { color: var(--text); font-size: 1.4rem; line-height: 1.1; }
.dl-day.is-today .dl-date { color: var(--button-text); background: var(--dark); }
.dl-day.is-today .dl-date strong { color: var(--button-text); }
.dl-day-items { display: grid; gap: 8px; }
/* неделя */
.dl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden; }
.dl-col { min-height: 320px; border-left: 1px solid var(--border); }
.dl-col:first-child { border-left: 0; }
.dl-col-head { padding: 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .8rem; }
.dl-col-head strong { color: var(--text); font-size: 1rem; }
.dl-col.is-today { background: color-mix(in srgb, var(--accent-weak), transparent 50%); }
.dl-col.is-today .dl-col-head strong { color: var(--accent); }
.dl-col-items { display: grid; gap: 6px; padding: 8px; }
.dl-item.is-compact { grid-template-columns: 1fr; gap: 4px; padding: 8px; }
.dl-item.is-compact .dl-item-title { white-space: normal; font-size: .82rem; }
.dl-item.is-compact .status-pill { min-width: 0; justify-self: start; height: 20px; font-size: .68rem; }
.dl-empty { color: var(--border); text-align: center; }
/* месяц */
.dl-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden; }
.dl-month-head { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.dl-cell { display: grid; align-content: start; gap: 3px; min-height: 104px; padding: 6px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.dl-cell:nth-child(7n + 8) { border-left: 0; }
.dl-cell.is-out { opacity: .45; }
.dl-cell-day { color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.dl-cell.is-today .dl-cell-day { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--button-text); background: var(--dark); }
.dl-chip { overflow: hidden; padding: 3px 7px; border: 0; border-radius: 6px; color: var(--text); background: var(--surface-subtle); font: inherit; font-size: .72rem; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.dl-chip.tone-accent { color: var(--button-text); background: var(--accent); }
.dl-chip.tone-danger { color: var(--on-danger); background: var(--danger); }
.dl-chip.tone-done { color: var(--text-muted); text-decoration: line-through; }
.dl-more { color: var(--text-muted); font-size: .7rem; font-weight: 700; padding-left: 4px; }
@media (max-width: 760px) { .dl-week { grid-template-columns: 1fr; } .dl-col { min-height: 0; border-left: 0; border-top: 1px solid var(--border); } .dl-item { grid-template-columns: 52px minmax(0, 1fr); } .dl-item-roles, .dl-item .status-pill { grid-column: 2; } }
.topbar { margin: 19px auto; }
.topbar { margin: 19px auto 26px; }
.topbar { margin: 26px auto 19px; }

/* ================= Жёлтый «Нужны правки», красный «Не готово» ================= */
:root { --warning: hsl(42 90% 55%); --on-warning: hsl(35 70% 14%); }
.status-pill.tone-warn { color: var(--on-warning); background: var(--warning); }
.dl-chip.tone-warn { color: var(--on-warning); background: var(--warning); }
.assignment-cover .status-pill.tone-warn { background: var(--warning); }

/* ================= Дедлайны: статус под названием, не скачет ================= */
.dl-item { grid-template-columns: 52px minmax(0, 1fr); align-items: start; }
.dl-item-time { padding-top: 2px; }
.dl-item-body { display: grid; gap: 6px; min-width: 0; }
.dl-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--text-muted); font-size: .8rem; }
.dl-item-meta .role-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-weight: 600; }
.dl-item-meta svg { width: 16px; height: 16px; }
.dl-item-meta .status-pill { min-width: 104px; }
.dl-item.is-compact .dl-item-time { padding: 0; }
/* Сегодня в неделе: и число, и день недели — одним цветом и жирно */
.dl-col.is-today .dl-col-head, .dl-col.is-today .dl-col-head strong { color: var(--accent); font-weight: 800; }

/* ================= Маленький сброс в углу каждой настройки ================= */
.range-choice, .select-choice { position: relative; }
.mini-reset { position: absolute; top: 6px; right: 6px; display: none; width: 22px; height: 22px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--text-muted); background: transparent; cursor: pointer; }
.mini-reset:hover { color: var(--text); background: var(--surface-subtle); }
.is-changed > .mini-reset { display: grid; }
.select-choice > .mini-reset { top: 6px; right: 6px; }

/* ================= Главная «Команда» ================= */
.profile-screen[data-view="home"] .home-page { display: block; }
.profile-screen[data-view="home"] :is(.profile-card, .works-section, .sticker-layer, .frame-page-layer, .avatar-edit.is-floating, .my-works:not(.home-page)) { display: none !important; }
.profile-screen:not([data-view="home"]) .home-page { display: none !important; }
.topbar .brand { border: 0; padding: 9px 12px; border-radius: 999px; background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
.topbar .brand.is-active { color: var(--button-text); background: var(--dark); }
.team-search { position: relative; display: flex; align-items: center; gap: 10px; margin: 6px 0 20px; padding: 0 18px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); background: var(--surface-strong); }
.team-search svg { width: 20px; height: 20px; }
.team-search input { width: 100%; height: 50px; border: 0; outline: 0 !important; color: var(--text); background: transparent; font: inherit; }
.team-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 75%); }
.team-suggest { position: absolute; z-index: var(--layer-popover); top: calc(100% + 6px); left: 0; right: 0; max-height: 420px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-strong); box-shadow: var(--shadow-float); }
.team-suggest[hidden] { display: none; }
.suggest-group { padding: 8px 12px 4px; color: var(--text-muted); font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.suggest-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--radius-s); color: var(--text); background: transparent; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.suggest-item:hover { background: var(--surface-subtle); }
.suggest-item > span:last-child:not(.member-avatar):not(.history-cover) { margin-left: auto; color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.suggest-item svg { width: 16px; height: 16px; }
.suggest-item.is-vacation, .suggest-item.is-left { opacity: .55; }
.suggest-empty { padding: 12px; color: var(--text-muted); }
.history-cover.mini { width: 22px; height: 30px; font-size: .7rem; border-radius: 5px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; }
.home-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.home-head h2 { margin: 0; font-size: 1.1rem; }
.home-filter { display: flex; gap: 6px; }
.filter-clear { font-size: .78rem; }
.team-who { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 700; }
.member-avatar { display: inline-grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: hsl(var(--hue) 40% 98%); background: linear-gradient(145deg, hsl(var(--hue) 55% 62%), hsl(var(--hue) 45% 38%)); font-size: .75rem; font-weight: 800; }
.member-list { display: grid; }
.member-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.member-row .member-avatar { width: 38px; height: 38px; font-size: 1rem; }
.member-main { display: grid; gap: 3px; min-width: 0; }
.member-nick { font-weight: 800; }
.member-badge { margin-left: 6px; padding: 2px 8px; border-radius: 999px; color: var(--text-muted); background: var(--surface-subtle); font-size: .68rem; font-weight: 700; }
.member-roles { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: .8rem; }
.member-roles svg { width: 16px; height: 16px; }
.member-roles a { margin-left: 4px; color: inherit; }
.member-row.is-vacation, .member-row.is-left { opacity: .5; }
.member-row.is-left .member-nick { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor, transparent 50%); }
@media (max-width: 860px) { .home-grid { grid-template-columns: 1fr; } }

/* ================= Текст в кнопках — по высоте заглавной (оптически) ================= */
:is(.button, .role-chip, .result-button, .text-button, .nav-item, .brand, .palette-variant, .edit-choice, .media-pick, .suggest-item, .dl-chip) { line-height: 1.1; }
@supports (text-box: trim-both cap alphabetic) {
  :is(.button, .role-chip, .result-button, .palette-variant, .dl-chip) { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  /* Firefox: подталкиваем текст на долю кегля вниз — визуально по центру заглавной */
  :is(.button, .role-chip, .result-button, .nav-item, .brand, .palette-variant) { padding-top: calc(var(--btn-pad-top, 0px) + .12em); }
  .button { padding-bottom: 12px; }
  .status-pill { padding-top: .14em; }
}
.topbar { box-sizing: border-box; height: 42px; margin: 16px auto 19px; padding-top: 0; padding-bottom: 0; }
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; }

/* ================= Главная: плитки ================= */
.home-page { position: relative; z-index: calc(var(--layer-content) + 1); width: min(1120px, calc(100% - 32px)); margin: 172px auto 0; }
.profile-screen[data-view="home"] .home-page { display: block; }
.profile-screen[data-view="home"] :is(.profile-card, .works-section, .sticker-layer, .frame-page-layer, .avatar-edit.is-floating, .my-works) { display: none !important; }
.bento { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "titles members tg" "titles members stats" "feed feed feed"; gap: 16px; }
.tile { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: var(--card-radius, var(--radius-l));
  background: color-mix(in srgb, var(--surface-strong) var(--card-alpha, 86%), transparent); backdrop-filter: blur(var(--card-blur, 20px)); -webkit-backdrop-filter: blur(var(--card-blur, 20px)); box-shadow: var(--shadow-card); }
.tile-titles { grid-area: titles; } .tile-members { grid-area: members; } .tile-tg { grid-area: tg; } .tile-stats { grid-area: stats; } .tile-feed { grid-area: feed; }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tile-head h1 { margin: 4px 0 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.04em; }
.tile-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; }
.tile-head h2 svg { width: 20px; height: 20px; color: var(--accent); }
/* полка тайтлов */
.title-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 14px; }
.shelf-item { display: grid; gap: 4px; padding: 0; border: 0; color: var(--text); background: none; font: inherit; text-align: left; cursor: pointer; }
.shelf-item .assignment-cover { border-radius: var(--radius-s); }
.shelf-item .assignment-cover .status-pill { min-width: 0; height: 22px; font-size: .68rem; }
.shelf-item:hover .assignment-cover, .shelf-item.is-selected .assignment-cover { outline: 2px solid var(--accent); outline-offset: 3px; }
.shelf-item .assignment-title { font-size: .88rem; }
/* участники */
.tile-members .member-list { max-height: 520px; overflow-y: auto; margin-right: -8px; padding-right: 8px; }
.tile-members .member-row .member-avatar { width: 34px; height: 34px; }
/* статистика */
.tile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; align-content: center; }
.tile-stats .metric { padding: 0; border: 0; }
.tile-stats .metric strong { font-size: 1.6rem; }
/* Telegram */
.tg-links { display: grid; gap: 8px; }
.tg-channel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-s); color: var(--text); background: var(--surface-strong); text-decoration: none; }
.tg-channel:hover { border-color: var(--accent); }
.tg-channel > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.tg-channel b { font-size: .88rem; }
.tg-channel small { overflow: hidden; color: var(--text-muted); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.tg-channel svg { width: 16px; height: 16px; color: var(--text-muted); }
.tg-channel-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: var(--button-text) !important; background: var(--accent); }
.tg-channel-icon svg { color: var(--button-text); }
.tg-posts { display: grid; gap: 8px; margin-top: 14px; }
.tg-posts-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.demo-mark { padding: 2px 8px; border-radius: 999px; background: var(--surface-subtle); letter-spacing: 0; text-transform: none; }
.tg-post { padding: 10px 12px; border-radius: 4px var(--radius-s) var(--radius-s) var(--radius-s); background: var(--accent-weak); }
.tg-post p { margin: 0 0 4px; color: var(--text); font-size: .82rem; line-height: 1.35; }
.tg-post span { color: var(--text-muted); font-size: .7rem; }
.tile-feed .history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "titles titles" "members tg" "members stats" "feed feed"; } .tile-feed .history-list { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; grid-template-areas: "titles" "members" "tg" "stats" "feed"; } }

/* ================= Поиск в шапке ================= */
.nav-search { position: relative; width: 210px; height: 32px; margin: 0 6px 0 auto; padding: 0 12px; gap: 8px; transition: width .2s ease; }
.nav-search:focus-within { width: 320px; }
.nav-search svg { width: 16px; height: 16px; }
.nav-search input { height: 30px; font-size: .84rem; }
.nav-search .team-suggest { left: auto; right: 0; width: 360px; }
.topbar > .icon-button { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .nav-search { transition: none; } }
@media (max-width: 860px) { .nav-search { width: 40px; } .nav-search input::placeholder { color: transparent; } }

/* ================= Отдельные страницы команды ================= */
.team-page { display: none; }
.profile-screen[data-view="members"] .team-page[data-page="members"],
.profile-screen[data-view="titles"] .team-page[data-page="titles"],
.profile-screen[data-view="team-history"] .team-page[data-page="team-history"] { display: block; }
.profile-screen:is([data-view="members"], [data-view="titles"], [data-view="team-history"]) :is(.profile-card, .works-section, .sticker-layer, .frame-page-layer, .avatar-edit.is-floating, .home-page, .my-works:not(.team-page)) { display: none !important; }
.team-page h1 { margin: 6px 0 20px; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -.04em; }

/* Участники в плитке — на всю высоту плитки */
.tile-members { display: flex; flex-direction: column; min-height: 0; }
.tile-members .member-list { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; }
.tile-head .text-button { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.tile-head .text-button svg { width: 16px; height: 16px; }

/* Фильтр профессий значками */
.role-filter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.role-icon-btn { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); background: var(--surface-strong); cursor: pointer; }
.role-icon-btn svg { width: 16px; height: 16px; }
.role-icon-btn:hover { color: var(--text); border-color: var(--accent); }
.role-icon-btn.is-selected { color: var(--button-text); border-color: var(--dark); background: var(--dark); }

/* Строка участника: ник → @ и ID → профессии */
.member-row { align-items: flex-start; }
.member-main { gap: 2px; }
.member-id { color: var(--text-muted); font-size: .76rem; }
.member-id a { color: inherit; }
.member-roles { gap: 4px; margin-top: 3px; }
.role-mini { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--text); background: var(--surface-subtle); }
.role-mini svg { width: 14px; height: 14px; }
/* Онлайн — точка на аватарке */
.member-avatar { position: relative; }
.member-avatar.is-online::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 8px; min-height: 8px; border: 2px solid var(--surface-strong); border-radius: 50%; background: var(--accent); }

/* Сводка — кликабельная */
.metric-link { display: grid; gap: 4px; padding: 8px !important; margin: -8px; border: 0; border-radius: var(--radius-s); color: var(--text); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.metric-link:hover { background: var(--surface-subtle); }
.metric-link span { color: var(--text-muted); font-size: .83rem; }

/* Страница участников — карточки */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.member-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-strong); }
.member-card .member-row { padding: 0; border: 0; }
.member-card.is-vacation, .member-card.is-left { opacity: .55; }
.member-card .member-row.is-vacation, .member-card .member-row.is-left { opacity: 1; }
.member-stat { color: var(--text-muted); font-size: .78rem; }
.title-shelf-big { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; }
.shelf-item.is-finished .assignment-cover { filter: saturate(.6); }

/* Поиск: профессия — с людьми под ней */
.suggest-group-link { display: flex; align-items: center; justify-content: space-between; }
.suggest-group-link > span { display: inline-flex; align-items: center; gap: 6px; }
.suggest-group-link svg { width: 14px; height: 14px; }
.suggest-all { padding: 2px 8px; border: 0; border-radius: 999px; color: var(--accent); background: transparent; font: inherit; font-size: .72rem; font-weight: 750; letter-spacing: 0; text-transform: none; cursor: pointer; }
.suggest-all:hover { background: var(--surface-subtle); }
.sug-text { display: grid; gap: 1px; min-width: 0; }
.sug-text b { font-size: .9rem; }
.sug-text small { overflow: hidden; color: var(--text-muted); font-size: .74rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.suggest-item .member-avatar { width: 30px; height: 30px; }
.suggest-item > .sug-text { margin-left: 0 !important; color: var(--text) !important; font-size: inherit !important; text-align: left; }
.suggest-item.member-sug.is-vacation, .suggest-item.member-sug.is-left { opacity: .5; }

/* Профиль участника */
.profile-screen[data-view="member"] .team-page[data-page="member"] { display: block; }
.profile-screen[data-view="member"] :is(.profile-card, .works-section, .sticker-layer, .frame-page-layer, .avatar-edit.is-floating, .home-page, .my-works:not(.team-page)) { display: none !important; }
.mp-head { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 22px; }
.mp-avatar { width: 128px !important; height: 128px !important; font-size: 3rem !important; border: 4px solid var(--surface-strong); box-shadow: var(--shadow-float); }
.mp-avatar.is-online::after { width: 22px; height: 22px; border-width: 4px; right: 6px; bottom: 6px; }
.mp-copy h1 { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -.04em; }
.mp-copy .tg-line { margin: 0 0 12px; color: var(--text-muted); }
.mp-copy .role-chip { display: inline-flex; align-items: center; gap: 6px; }
.mp-copy .role-chip svg { width: 16px; height: 16px; }
.mp-subtitle { margin: 0 0 6px; font-size: 1.05rem; }
/* Кликабельные люди */
[data-open-member] { cursor: pointer; }
.member-row[data-open-member]:hover .member-nick, .team-who[data-open-member]:hover { color: var(--accent); }
.member-card[data-open-member]:hover { border-color: var(--accent); }
/* Список участников — сверху вниз, без растягивания */
.member-list { align-content: start; grid-auto-rows: max-content; }
/* Сортировка */
.tile-tools { display: inline-flex; align-items: center; gap: 10px; }
.sort-toggle { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-strong); }
.sort-toggle button { padding: 4px 10px; border: 0; border-radius: 999px; color: var(--text-muted); background: transparent; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.sort-toggle button.is-selected { color: var(--button-text); background: var(--dark); }
.history-toolbar .sort-toggle { margin-left: auto; }
.shelf-item.is-flash .assignment-cover { outline: 3px solid var(--accent); outline-offset: 4px; }
.sort-toggle button { white-space: nowrap; }
.tile-members .tile-head { flex-wrap: wrap; row-gap: 8px; }
.tile-members .tile-tools { width: 100%; justify-content: space-between; }

/* ===== Чужой профиль ===== */
[hidden] { display: none !important; }
.profile-screen:not(.is-member-view) .member-only { display: none !important; }
.profile-screen.is-member-view :is(.own-only, .avatar-edit, .nickname-btn, .works-section .text-button[data-view="history"]) { display: none !important; }
.profile-screen.is-plain .avatar-edit { display: none !important; }
.profile-screen.is-member-view .role-list .role-chip { cursor: default; }
.profile-screen.is-member-view .role-chip svg { width: 16px; height: 16px; }
.member-title-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.member-title { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.member-title:hover { border-color: var(--accent); }
.member-title-cover { flex: none; display: grid; place-items: center; width: 44px; height: 56px; border-radius: 10px; background: var(--cover); color: var(--text-on-dark); font-weight: 700; }
.member-title-copy { display: grid; gap: 4px; min-width: 0; flex: 1; }
.member-title-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-title-roles { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-muted); font-size: .85rem; align-items: center; }
.member-title-roles svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.member-title-count { flex: none; color: var(--text-muted); font-size: .85rem; }

/* ===== Настройки ===== */
.settings-pop { position: fixed; z-index: 1000; width: min(340px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); color: var(--text); box-shadow: 0 16px 40px color-mix(in srgb, var(--dark), transparent 78%); }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; }
.switch-row:hover { background: color-mix(in srgb, var(--text), transparent 94%); }
.switch-row > svg { flex: none; width: 20px; height: 20px; color: var(--text-muted); }
.switch-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.switch-title { font-weight: 600; }
.switch-hint { color: var(--text-muted); font-size: .8rem; line-height: 1.3; }
.switch { flex: none; appearance: none; position: relative; width: 42px; height: 24px; margin: 0; border-radius: 999px; background: color-mix(in srgb, var(--text), transparent 80%); cursor: pointer; transition: background .2s; }
.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-strong, var(--surface)); box-shadow: 0 1px 3px color-mix(in srgb, var(--dark), transparent 70%); transition: transform .2s; }
.switch:checked { background: var(--accent); }
.switch:checked::before { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Без эффектов ===== */
html.fx-off .card-fx { display: none !important; }
html.fx-off .avatar-wrap::before, html.fx-off .avatar-wrap::after { animation: none !important; }

/* ===== Страница тайтла, задачи, предложения ===== */
.profile-screen[data-view="title"] .team-page[data-page="title"],
.profile-screen[data-view="task"] .team-page[data-page="task"],
.profile-screen[data-view="proposals"] .team-page[data-page="proposals"],
.profile-screen[data-view="propose"] .team-page[data-page="propose"] { display: block; }
.profile-screen:is([data-view="title"], [data-view="task"], [data-view="proposals"], [data-view="propose"]) :is(.profile-card, .works-section, .sticker-layer, .frame-page-layer, .avatar-edit.is-floating, .home-page, .my-works:not(.team-page)) { display: none !important; }
html:not(.is-curator) .curator-only { display: none !important; }
.tile-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-strong); color: var(--text); font: inherit; font-size: .83rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
.tile-link svg { width: 16px; height: 16px; }
.tile-link.is-strong { border-color: transparent; background: var(--accent); color: var(--button-text); }
.tile-link:hover { border-color: var(--accent); }
.title-page-links { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 18px; }
.page-lead { max-width: 640px; margin: -10px 0 18px; color: var(--text-muted); }

.tp-head { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 24px; padding-right: 250px; }
.tp-cover { flex: none; display: grid; place-items: center; width: 168px; aspect-ratio: 3 / 4; border-radius: 18px; background: var(--cover); color: var(--text-on-dark); font-size: 3rem; font-weight: 750; box-shadow: 0 10px 28px color-mix(in srgb, var(--dark), transparent 80%); }
.tp-cover.small { width: 84px; border-radius: 12px; font-size: 1.6rem; }
.tp-copy { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.tp-copy h1 { margin: 0; }
.tp-original { margin: -6px 0 0; color: var(--text-muted); font-size: 1.05rem; }
.tp-genres { display: flex; flex-wrap: wrap; gap: 6px; }
.genre-tag { padding: 3px 10px; border-radius: 999px; background: var(--surface-subtle); color: var(--text); font-size: .8rem; font-weight: 600; }
.tp-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-strong); color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.tp-chip svg { width: 16px; height: 16px; color: var(--accent); }
.tp-chip:hover { border-color: var(--accent); }
.tp-chip.is-empty { cursor: default; color: var(--text-muted); border-style: dashed; }
.tp-chip.is-empty svg { color: var(--text-muted); }
.tp-note { margin: 0; max-width: 640px; color: var(--text-muted); white-space: pre-wrap; }
.tp-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 14px; background: var(--surface-subtle); width: max-content; max-width: 100%; }
.tp-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); font: inherit; font-weight: 650; cursor: pointer; }
.tp-tab svg { width: 16px; height: 16px; }
.tp-tab.is-active { background: var(--surface-strong); color: var(--text); box-shadow: 0 1px 3px color-mix(in srgb, var(--dark), transparent 85%); }

.chapter-list { display: grid; gap: 8px; }
.chapter { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.chapter-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.chapter-head > svg { width: 20px; height: 20px; color: var(--text-muted); transition: transform .2s; }
.chapter.is-open .chapter-head > svg { transform: rotate(180deg); }
.chapter-n { font-weight: 700; min-width: 90px; }
.chapter-when { margin-left: auto; color: var(--text-muted); font-size: .85rem; }
.chapter-stages { display: grid; padding: 0 8px 8px; }
.stage-row { display: grid; grid-template-columns: 170px 1fr auto 20px; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.stage-row:hover, .stage-row:focus-visible { background: var(--surface-subtle); outline: none; }
.stage-row > svg { width: 16px; height: 16px; color: var(--text-muted); }
.stage-role { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 600; }
.stage-role svg { width: 16px; height: 16px; }
.person-link { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 2px 10px 2px 2px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-weight: 650; cursor: pointer; }
.person-link:hover { background: color-mix(in srgb, var(--accent), transparent 85%); }
.person-link .member-avatar { width: 28px; height: 28px; font-size: .8rem; }
.staff-list { display: grid; gap: 8px; }
.staff-row { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.staff-role { display: inline-flex; align-items: center; gap: 8px; min-width: 170px; color: var(--text-muted); font-weight: 600; }
.staff-role svg { width: 16px; height: 16px; }

.lore-toolbar { display: flex; gap: 10px; margin-bottom: 12px; }
.lore-toolbar input, .lore-form input, .lore-form select, .field input, .field textarea, .task-comment-form textarea, .link-row input { box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-strong); color: var(--text); font: inherit; }
.lore-toolbar input { flex: 1; }
.lore-form { display: grid; grid-template-columns: 140px 1fr 1fr 1.4fr auto; gap: 8px; margin-bottom: 12px; }
.lore-form.is-hidden { display: none; }
.lore-list { display: grid; gap: 6px; }
.lore-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.lore-kind { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-subtle); color: var(--accent); }
.lore-kind svg { width: 20px; height: 20px; }
.lore-main { flex: 1; min-width: 0; }
.lore-orig { color: var(--text-muted); }
.lore-main small { display: block; margin-top: 2px; color: var(--text-muted); }
.lore-del { opacity: .5; }
.lore-del:hover { opacity: 1; }

.task-crumb { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-weight: 600; cursor: pointer; }
.task-crumb:hover { color: var(--text); }
.task-page h1 { display: flex; align-items: center; gap: 12px; }
.task-page h1 svg { width: 24px; height: 24px; color: var(--accent); }
.task-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.task-fact { display: grid; gap: 8px; justify-items: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.task-fact > span:first-child { color: var(--text-muted); font-size: .8rem; }
.task-files { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.task-file { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 16px; }
.task-file svg { width: 24px; height: 24px; color: var(--accent); }
.task-file small { display: block; color: var(--text-muted); }
.task-actions { display: flex; gap: 10px; margin-bottom: 8px; }
.task-comments { display: grid; gap: 8px; margin-bottom: 12px; }
.task-comment { padding: 10px 14px; border-radius: 14px; background: var(--surface-subtle); }
.task-comment span { color: var(--text-muted); font-size: .8rem; }
.task-comment p { margin: 4px 0 0; white-space: pre-wrap; }
.task-comment-form { display: flex; gap: 10px; align-items: flex-end; }
.task-comment-form textarea { flex: 1; resize: vertical; }

.mode-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 14px; background: var(--surface-subtle); }
.mode-switch button { padding: 8px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); font: inherit; font-weight: 650; cursor: pointer; }
.mode-switch button.is-selected { background: var(--surface-strong); color: var(--text); }
.propose-form { display: flex; gap: 28px; align-items: flex-start; }
.propose-cover { display: grid; place-items: center; width: 180px; aspect-ratio: 3 / 4; border: 2px dashed var(--border); border-radius: 18px; background: var(--cover-img) center / cover, var(--surface-subtle); color: var(--text-muted); cursor: pointer; }
.propose-cover.has-image { border-style: solid; }
.propose-cover.has-image .propose-cover-empty { opacity: 0; }
.propose-cover:hover { border-color: var(--accent); }
.propose-cover-empty { display: grid; justify-items: center; gap: 6px; font-weight: 600; }
.propose-fields { flex: 1; display: grid; gap: 16px; min-width: 0; }
.field { display: grid; gap: 6px; }
.field > span { font-size: .85rem; font-weight: 650; color: var(--text-muted); }
.field textarea { resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
[data-page="propose"]:not(.is-create) .create-only { display: none; }
.genre-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.genre-chips .role-chip.is-selected { background: var(--accent); color: var(--button-text); border-color: transparent; }
.link-list { display: grid; gap: 6px; }
.link-row { display: flex; align-items: center; gap: 8px; }
.link-row > svg { width: 16px; height: 16px; color: var(--text-muted); }
.link-row input { flex: 1; }
.add-link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.add-link svg { width: 16px; height: 16px; }
.drop-zone { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px; border: 2px dashed var(--border); border-radius: 16px; color: var(--text-muted); cursor: pointer; }
.drop-zone:hover, .drop-zone.is-over { border-color: var(--accent); color: var(--text); }
.file-list { display: flex; flex-wrap: wrap; gap: 6px; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 10px; background: var(--surface-subtle); font-size: .85rem; }
.file-chip svg { width: 16px; height: 16px; }
.file-chip small { color: var(--text-muted); }
.file-chip button { display: grid; place-items: center; padding: 2px; border: 0; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; }
.propose-actions { display: flex; justify-content: flex-end; gap: 10px; }

.proposal-list { display: grid; gap: 12px; }
.proposal { display: flex; gap: 18px; align-items: flex-start; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.proposal-main { flex: 1; display: grid; gap: 8px; min-width: 0; }
.proposal-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.proposal-top h3 { margin: 0; }
.proposal-by { margin: 0; color: var(--text-muted); font-size: .8rem; }
.proposal-actions { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 760px) {
  .tp-head, .propose-form { flex-direction: column; padding-right: 0; }
  .tp-head { margin-top: 56px; }
  .stage-row { grid-template-columns: 1fr auto; }
  .stage-row > .person-link { grid-column: 1; }
  .stage-row > svg { display: none; }
  .task-facts, .task-files, .field-row, .lore-form { grid-template-columns: 1fr; }
  .proposal { flex-wrap: wrap; }
}
.tile-actions { margin: 4px 0 14px; }

/* ===== v45: навигация, меню, заявки, архив ===== */
.profile-screen[data-view="works"] .team-page { display: none !important; }
.profile-screen[data-view="archive"] .team-page[data-page="archive"],
.profile-screen[data-view="requests"] .team-page[data-page="requests"] { display: block; }
.profile-screen:is([data-view="archive"], [data-view="requests"]) :is(.profile-card, .works-section, .sticker-layer, .frame-page-layer, .avatar-edit.is-floating, .home-page, .my-works:not(.team-page)) { display: none !important; }
.topbar .nav-search { margin-left: auto; }
.topbar > .icon-button { margin-left: 0; position: relative; }
.topbar .nav-profile { margin-left: 6px; }
.topbar .icon-button.is-active { background: var(--nav-hover); color: var(--text); }
.menu-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.menu-pop { position: fixed; z-index: 1000; display: grid; gap: 2px; min-width: 220px; padding: 6px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); color: var(--text); box-shadow: 0 16px 40px color-mix(in srgb, var(--dark), transparent 78%); }
.menu-pop[hidden] { display: none; }
.menu-pop button { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.menu-pop button svg { width: 20px; height: 20px; color: var(--text-muted); }
.menu-pop button:hover, .menu-pop button:focus-visible { background: color-mix(in srgb, var(--text), transparent 93%); outline: none; }
.menu-pop button.is-active { background: color-mix(in srgb, var(--accent), transparent 85%); }
.menu-pop button.is-active svg { color: var(--accent); }

.titles-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: -6px 0 14px; }
.titles-head-row .mode-switch, .team-page > .mode-switch { margin-bottom: 0; }
.team-page > .mode-switch { margin-bottom: 18px; }
.mode-switch button { display: inline-flex; align-items: center; gap: 4px; }
.mode-switch button.is-selected { box-shadow: 0 1px 3px color-mix(in srgb, var(--dark), transparent 85%); }

.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.check-row span { display: grid; gap: 2px; }
.check-row small { color: var(--text-muted); }
[data-page="propose"].is-create .propose-only { display: none; }

.proposal-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rate-label { font-size: .85rem; font-weight: 650; color: var(--text-muted); }
.stars { display: inline-flex; }
.star { display: grid; place-items: center; padding: 2px; border: 0; background: none; color: color-mix(in srgb, var(--text), transparent 70%); cursor: pointer; }
.star svg { width: 20px; height: 20px; }
.star.is-on { color: var(--warning); }
.star.is-on svg { fill: currentColor; }
.stars:hover .star:not(:disabled) { color: var(--warning); }
.stars .star:hover ~ .star:not(:disabled) { color: color-mix(in srgb, var(--text), transparent 70%); }
.star:disabled { cursor: default; }
.rate-avg { font-size: .85rem; color: var(--text-muted); }
.anon-who { color: var(--text-muted); }
.thread-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.thread-toggle svg { width: 16px; height: 16px; }
.proposal-actions { flex: none; }
.proposal-actions:empty { display: none; }

.work-req-list { display: grid; gap: 8px; margin-bottom: 8px; }
.work-req { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.work-req-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-subtle); color: var(--accent); }
.work-req-icon svg { width: 20px; height: 20px; }
.work-req-main { display: grid; gap: 3px; flex: 1; min-width: 0; }
.work-req-main > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.work-req-main > span svg { width: 16px; height: 16px; }
.work-req-main small { color: var(--text-muted); }
.work-req-side { display: flex; align-items: center; gap: 10px; flex: none; }
.work-req-btns { display: inline-flex; gap: 6px; }
.work-form { display: grid; gap: 14px; padding: 16px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.work-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.work-type { display: grid; gap: 4px; justify-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-strong); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.work-type svg { width: 20px; height: 20px; color: var(--text-muted); }
.work-type small { color: var(--text-muted); font-size: .8rem; }
.work-type.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.work-type.is-selected svg { color: var(--accent); }
.field-row.three { grid-template-columns: 2fr 1fr 1fr; }
.field select { box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-strong); color: var(--text); font: inherit; }
.field.is-hidden { visibility: hidden; }

.tp-linkgrid { display: grid; gap: 6px; margin: -8px 0 22px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.tp-linkrow { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.tp-linkkind { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; color: var(--text-muted); font-weight: 600; font-size: .9rem; }
.tp-linkkind svg { width: 16px; height: 16px; }
.tp-linkitems { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; }
.tp-none { color: var(--text-muted); font-size: .85rem; }
.tp-chip-wrap { display: inline-flex; align-items: center; }
.chip-x { display: grid; place-items: center; padding: 3px; margin-left: 2px; border: 0; border-radius: 8px; background: none; color: var(--text-muted); cursor: pointer; opacity: .6; }
.chip-x svg { width: 16px; height: 16px; }
.chip-x:hover { opacity: 1; background: var(--surface-subtle); }
.add-small { padding: 5px 8px; }
.inline-add { display: inline-flex; gap: 6px; flex: 1; min-width: 220px; }
.inline-add input { flex: 1; min-width: 0; padding: 7px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-strong); color: var(--text); font: inherit; }
.author-tab { display: grid; gap: 14px; }
.author-head { display: flex; align-items: center; gap: 12px; }
.author-name { flex: 1; max-width: 420px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-strong); color: var(--text); font: inherit; font-weight: 700; }
.author-socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.social-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; }
.social-card:hover { border-color: var(--accent); }
.social-card > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.social-card small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-card > svg { width: 16px; height: 16px; color: var(--text-muted); }
.social-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-subtle); color: var(--accent); }
.social-icon svg { width: 20px; height: 20px; }
.page-lead.small { font-size: .85rem; margin: 0; }

@media (max-width: 900px) {
  .topbar nav .nav-item span { display: none; }
  .work-types { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .work-req { flex-wrap: wrap; }
  .field-row.three { grid-template-columns: 1fr; }
  .tp-linkrow { flex-wrap: wrap; }
}
@media (min-width: 1100px) { .topbar nav { position: absolute; left: 50%; margin: 0; transform: translateX(-50%); } }