/* ════════════════════════════════════════════════════════════ LEXICORE — internal app design system Pillio-style: left sidebar + topbar + cards Palette matches landing: light cream/coral · dark navy/teal ════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap'); /* ── LIGHT (cream / coral) — default ── */ :root{ --bg:#F4E9DB; --bg-2:#EFE2D0; --surface:#FFFBF5; --surface-2:#FBF4EA; --ink:#2E2018; --text:#2E2018; --text-soft:#6E5A4C; --text-muted:#A8927F; --border:rgba(150,90,55,.14); --border-2:rgba(150,90,55,.24); /* коралл приглушён относительно прежнего #EC7E5E — мягче, без «кислотности» */ --accent:#D9805F; --accent-ink:#C26949; --accent-2:#EBB49E; /* мягкая подложка акцента (использовалась на страницах, но не была объявлена) */ --accent-soft:rgba(217,128,95,.13); /* текст поверх акцентной заливки/градиента (hero-плитки, кнопки) */ --on-accent:#3A1B0E; --on-accent-soft:rgba(58,27,14,.72); --grad:linear-gradient(120deg,#EBB49E,#D9805F 60%,#C26949); --glow:rgba(217,128,95,.28); --success:#4E9A6B; --success-soft:rgba(78,154,107,.14); --warning:#C9903F; --warning-soft:rgba(201,144,63,.16); --danger:#C75F55; --danger-soft:rgba(199,95,85,.14); --a-violet:#8B7BD8; --a-teal:#4CA79E; --a-green:#5FA87B; --a-orange:#DE8F63; --shadow-sm:0 1px 2px rgba(90,50,30,.05),0 6px 16px rgba(90,50,30,.07); --shadow-md:0 10px 26px rgba(90,50,30,.10),0 28px 56px rgba(90,50,30,.10); --r-lg:18px; --r:14px; --r-sm:11px; --side:252px; --tr:.4s cubic-bezier(.2,.8,.2,1); --trf:.2s cubic-bezier(.2,.8,.2,1); --fd:'Fraunces',Georgia,serif; --fb:'Hanken Grotesk',system-ui,sans-serif; /* Легаси-алиасы: в старых страницах остались имена из прежней системы. Без них радиусы схлопывались в 0, а цвета не применялись вовсе. Алиасы ссылаются на актуальные токены, поэтому темы переключаются корректно. */ --radius:var(--r); --radius-sm:var(--r-sm); --radius-lg:var(--r-lg); --text-sub:var(--text-soft); --text-dim:var(--text-muted); --red:var(--danger); --green:var(--success); --surface-3:var(--surface-2); } /* ════════ ТЁМНЫЕ ТЕМЫ ════════ Все тёмные темы задают один и тот же набор токенов — меняется только палитра. Основная: "ink" (Точечный акцент). Остальные — на выбор в переключателе тем. Общие для всех тёмных: тени. */ [data-theme="ink"]{ --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.4); --shadow-md:0 12px 28px rgba(0,0,0,.5),0 30px 60px rgba(0,0,0,.45); } /* ── INK ·«Точечный акцент»: холодный тёмно-синий, акцент только точками ── */ [data-theme="ink"]{ --bg:#0C1626; --bg-2:#0F1B2D; --surface:#122036; --surface-2:#1B2E48; --ink:#EDF3F9; --text:#EDF3F9; --text-soft:#A2B4C8; --text-muted:#8297AE; --border:rgba(150,180,215,.12); --border-2:rgba(150,180,215,.28); /* бирюза приглушена относительно прежней #4FD1C5 — чтобы не читалась как неон */ --accent:#5CB8AE; --accent-ink:#7FC9C1; --accent-2:#6E9FC4; --accent-soft:rgba(92,184,174,.13); /* В этой теме hero — не залитая акцентом плитка, а подложка с тонкой рамкой, поэтому «текст на акценте» здесь светлый (страницы задают его через --on-accent). */ --on-accent:#EDF3F9; --on-accent-soft:#A2B4C8; /* Градиент виден: он идёт в текст-заливки и логотип. Крупные акцентные плоскости (кнопка, hero) в этой теме переопределены ниже — в духе «точечного акцента». */ --grad:linear-gradient(120deg,#7FC9C1,#5CB8AE 60%,#4E9E96); --glow:rgba(92,184,174,.20); --success:#68B98A; --success-soft:rgba(104,185,138,.16); --warning:#D3AC6B; --warning-soft:rgba(211,172,107,.16); --danger:#D8796C; --danger-soft:rgba(216,121,108,.16); --a-violet:#9494D2; --a-teal:#5CB8AE; --a-green:#68B98A; --a-orange:#D2926C; } /* ── СВЕТЛАЯ: та же логика, что у «Точечного» — коралл идёт по контуру и в кнопки, а не заливает плитки целиком. Токены светлой живут в :root выше. ── */ [data-theme="light"] .tile.hero{background:var(--surface);border:1px solid var(--accent)} [data-theme="light"] .tile.hero,[data-theme="light"] .tile.hero .tile-h{color:var(--ink)} [data-theme="light"] .tile.hero .tile-sub{color:var(--text-soft)} [data-theme="light"] .nav-item.active{background:var(--surface-2);color:var(--ink); box-shadow:inset 2px 0 0 var(--accent)} [data-theme="light"] .nav-item.active .nav-icon svg{stroke:var(--accent)} [data-theme="light"] .nav-mode.on{background:var(--surface-2);color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent)} [data-theme="light"] .nav-mode.on .nav-icon svg{stroke:var(--accent)} /* кнопки остаются коралловыми — это единственная сплошная заливка акцентом */ [data-theme="light"] .btn-primary{background:var(--accent);color:#fff} [data-theme="light"] .dash-hero .cta{background:var(--accent);color:#fff} [data-theme="light"] .dash-hero .cta svg{stroke:#fff} /* текст «на акценте» внутри hero теперь на кремовой подложке — значит тёмный */ [data-theme="light"]{--on-accent:#2E2018; --on-accent-soft:#6E5A4C} /* «Точечный акцент»: крупных цветных плоскостей нет — главная кнопка светлая, hero и активный пункт держатся на подложке и тонкой акцентной полосе. */ [data-theme="ink"] .btn-primary{background:var(--ink);color:var(--bg)} [data-theme="ink"] .btn-primary:hover{background:#fff;box-shadow:none} [data-theme="ink"] .tile.hero{background:var(--surface);border:1px solid var(--accent)} [data-theme="ink"] .tile.hero,[data-theme="ink"] .tile.hero .tile-h{color:var(--ink)} [data-theme="ink"] .tile.hero .tile-sub{color:var(--text-soft)} /* призыв внутри hero на Главной: светлая плашка требует тёмного текста */ [data-theme="ink"] .dash-hero .cta{background:var(--accent);color:var(--on-accent-dark,#07201D)} [data-theme="ink"] .dash-hero .cta svg{stroke:var(--on-accent-dark,#07201D)} [data-theme="ink"] .nav-item.active{background:var(--surface-2);color:var(--ink); box-shadow:inset 2px 0 0 var(--accent)} [data-theme="ink"] .nav-item.active .nav-icon svg{stroke:var(--accent)} [data-theme="ink"] .nav-mode.on{background:var(--surface-2);color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent)} [data-theme="ink"] .nav-mode.on .nav-icon svg{stroke:var(--accent)} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* overflow-x:hidden убирает горизонтальную «резинку» на телефоне: любой элемент чуть шире экрана раньше давал болтанку при вертикальном скролле. */ html,body{overflow-x:hidden;max-width:100%} body{font-family:var(--fb);background:var(--bg);color:var(--text);min-height:100vh; -webkit-font-smoothing:antialiased;line-height:1.5;transition:background var(--tr),color var(--tr)} h1,h2,h3,h4{font-family:var(--fd);font-weight:600;letter-spacing:-.02em;line-height:1.1} a{color:inherit;text-decoration:none} button{font-family:var(--fb);cursor:pointer;border:none;background:none} input,select,textarea{font-family:var(--fb);color:var(--text)} ::selection{background:var(--accent);color:#fff} ::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:8px} /* ══════════ SIDEBAR ══════════ */ .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:50;display:flex;flex-direction:column; padding:22px 16px;background:var(--surface);border-right:1px solid var(--border);transition:transform var(--tr),width var(--tr)} .side-logo{display:flex;align-items:center;gap:11px;padding:6px 10px 22px} .side-logo .logo-mark{width:38px;height:38px;border-radius:12px;flex-shrink:0;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff} .side-logo .logo-mark svg{width:20px;height:20px} .side-logo .logo-text{font-family:var(--fd);font-weight:600;font-size:22px;letter-spacing:-.03em;color:var(--ink)} .side-nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto} .side-foot{padding-top:12px;border-top:1px solid var(--border);margin-top:8px} .nav-item{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:13px;color:var(--text-soft);font-weight:600;font-size:14.5px; transition:background var(--trf),color var(--trf);white-space:nowrap;width:100%;text-align:left} .nav-item:hover{background:var(--surface-2);color:var(--ink)} .nav-item.active{background:var(--accent);color:#fff} .nav-item.active .nav-icon svg{stroke:#fff} .nav-item.logout{color:var(--text-soft)}.nav-item.logout:hover{color:var(--danger)} /* Переключатель режимов сайдбара: Учёба · Общение · Аккаунт */ .nav-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--surface-2);border:1px solid var(--border); border-radius:13px;padding:4px;margin:14px 0 10px} .nav-mode{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;border-radius:9px;border:none; background:none;color:var(--text-muted);cursor:pointer;font-family:var(--fb);transition:background var(--trf),color var(--trf)} .nav-mode .nav-icon svg{width:18px;height:18px} .nav-mode-label{font-size:11px;font-weight:700;letter-spacing:.01em} .nav-mode:hover{color:var(--ink)} .nav-mode.on{background:var(--accent);color:#fff} .nav-mode.on .nav-icon svg{stroke:#fff} /* Группы внутри режима */ .nav-group{display:flex;flex-direction:column;gap:3px;margin-bottom:12px} .nav-group-title{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted); padding:6px 14px 4px} .nav-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0} .nav-icon svg{width:20px;height:20px;stroke:currentColor;fill:none} .side-toggle{display:none} /* ══════════ TOPBAR ══════════ */ .topbar{position:fixed;top:0;left:var(--side);right:0;height:70px;z-index:40;display:flex;align-items:center;gap:16px;padding:0 28px; background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);transition:left var(--tr)} .searchbar{display:flex;align-items:center;gap:10px;flex:1;max-width:440px;padding:11px 16px;border-radius:13px;background:var(--bg);border:1px solid var(--border)} .searchbar .s-ic svg{width:18px;height:18px;stroke:var(--text-muted);fill:none} .searchbar input{flex:1;border:none;background:none;outline:none;font-size:14.5px;color:var(--text)} .searchbar input::placeholder{color:var(--text-muted)} .topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px} /* Переключатель темы: нажимается ВСЯ пилюля целиком, а солнце/луна внутри — только индикаторы текущей темы (поэтому pointer-events:none, иначе клик мимо активной иконки не срабатывал бы). */ .theme-pill{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:3px; cursor:pointer;transition:border-color var(--trf)} .theme-pill:hover{border-color:var(--accent)} .theme-pill:active{transform:scale(.97)} .theme-opt{width:32px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--text-muted);transition:background var(--trf),color var(--trf)} .theme-opt svg{width:15px;height:15px;stroke:currentColor;fill:none} .theme-opt.active{background:var(--accent);color:#fff}.theme-opt.active svg{stroke:#fff} .user-chip{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:13px;cursor:pointer;background:var(--surface-2);border:1px solid var(--border);transition:transform var(--trf),box-shadow var(--trf)} .user-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)} .user-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px} .user-meta{display:flex;flex-direction:column;line-height:1.15} .user-name{font-size:13.5px;font-weight:700;color:var(--ink)} .role-badge{font-size:10.5px;font-weight:700;color:var(--text-muted)} .role-badge.teacher{color:var(--accent-ink)}.role-badge.admin{color:var(--danger)} /* ══════════ MAIN ══════════ */ .main-content{margin-left:var(--side);padding:96px 32px 48px;max-width:1320px;transition:margin var(--tr)} .page-header{margin-bottom:24px} .page-title{font-size:clamp(26px,3.4vw,38px);font-weight:600;color:var(--ink);margin-bottom:4px} .page-subtitle{color:var(--text-muted);font-size:15px;font-weight:500} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}} @media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} /* ══════════ CARD ══════════ */ /* .card — легаси-класс; выглядит идентично .tile, чтобы старые JS-рендеры (Блоки, Тесты, Общение, Репетиторы, Полезное) совпадали с бенто-плитками. */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px; transition:transform var(--trf),box-shadow var(--trf),border-color var(--trf)} .card:hover{border-color:var(--border-2);box-shadow:var(--shadow-sm)} .card-title{font-family:var(--fd);font-weight:600;font-size:16px;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px} /* ══════════ BENTO / TILE (направление A+B) ══════════ */ /* ── Сворачиваемые секции (заголовок .fold-h + data-fold) ── */ .fold-h{cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none} .fold-h:hover{color:var(--accent)} .fold-ar{margin-left:auto;font-size:12px;color:var(--text-muted);transition:transform .18s} .fold-h.closed .fold-ar{transform:rotate(-90deg)} .fold-h.closed{margin-bottom:0 !important} /* ── Превью наград в магазине монет ── */ /* Превью титула и пака эмодзи — НЕ круг: в 56px круг ни подпись, ни шесть смайлов не помещаются, они вылезали за плитку. Здесь широкая плашка. */ .cn-prev-title,.cn-prev-emo{width:auto;max-width:100%;height:auto;min-height:52px; border-radius:12px;background:var(--surface);border:1px dashed var(--border-2); margin:0 0 10px;padding:8px} .cn-prev-title{display:flex;align-items:center;justify-content:center} .cn-prev-title span{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase; color:var(--accent-ink);background:var(--accent-soft);border-radius:20px;padding:3px 10px; overflow-wrap:anywhere} .cn-prev-emo{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center;font-size:17px} /* титул рядом с именем — в чате, на форуме, в лидерборде */ .lx-title{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft); border-radius:20px;padding:1px 8px;margin-left:6px;vertical-align:middle} /* ── Смешанные тексты: русский текст со вшитыми англ. словами ── */ .mix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px} .mix-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r); padding:14px;cursor:pointer;transition:border-color var(--trf),transform var(--trf);position:relative} .mix-card:hover{border-color:var(--accent);transform:translateY(-2px)} .mix-card h4{font-size:15px;margin:6px 0 5px;color:var(--ink)} .mix-card p{font-size:12.5px;color:var(--text-muted);line-height:1.45;margin:0} .mix-lvl{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em; color:var(--accent-ink);background:var(--accent-soft);border-radius:6px;padding:2px 7px} .mix-n{position:absolute;right:12px;top:12px;font-size:11px;color:var(--text-muted)} .mix-body{font-size:16px;line-height:2.1;color:var(--text);margin:6px 0 16px} /* английское слово внутри русского текста — заметная, но не кричащая фишка */ .mix-w{display:inline-block;background:var(--accent-soft);border:1px solid var(--border-2); border-radius:8px;padding:1px 8px;margin:0 2px;cursor:pointer;font-weight:700; color:var(--accent-ink);transition:border-color var(--trf)} .mix-w:hover{border-color:var(--accent)} .mix-w.open{background:var(--surface-2)} .mix-w i{font-style:normal;font-weight:500;color:var(--text-soft);margin-left:7px; padding-left:7px;border-left:1px solid var(--border-2)} .mix-actions{display:flex;gap:9px;flex-wrap:wrap} .mix-q{padding:10px 0;border-bottom:1px solid var(--border)} .mix-q:last-of-type{border-bottom:none} .mix-q b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:7px} .mix-opts{display:flex;gap:7px;flex-wrap:wrap} .mix-opt{background:var(--surface-2);border:1px solid var(--border);border-radius:10px; padding:6px 12px;font-size:13.5px;color:var(--text-soft);cursor:pointer} .mix-opt:hover:not(:disabled){border-color:var(--accent);color:var(--accent)} .mix-opt.ok{border-color:var(--success);color:var(--success);background:var(--success-soft)} .mix-opt.bad{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)} .mix-score{margin-top:12px;font-size:14px;font-weight:700;color:var(--accent-ink)} .mix-keep{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:7px} .mix-keep-w{display:flex;align-items:center;gap:8px;background:var(--surface-2); border:1px solid var(--border);border-radius:10px;padding:7px 11px;cursor:pointer;font-size:13.5px} .mix-keep-w.on{border-color:var(--accent);background:var(--accent-soft)} .mix-keep-w b{color:var(--ink)} .mix-keep-w span{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mix-keep-hint{font-size:12px;color:var(--text-muted);margin-top:9px} /* ── Предпросмотр импорта карточек в блок ── */ .bl-prev{border:1px solid var(--border);border-radius:12px;padding:10px 13px;background:var(--surface-2)} .bl-prev-h{font-size:12.5px;font-weight:700;color:var(--accent-ink);margin-bottom:7px} .bl-prev-row{display:flex;gap:10px;font-size:13px;padding:3px 0;border-bottom:1px solid var(--border)} .bl-prev-row:last-child{border-bottom:none} .bl-prev-row b{color:var(--ink);min-width:110px} .bl-prev-row span{color:var(--text-muted)} .bl-prev-more{font-size:12px;color:var(--text-muted);margin-top:6px} /* ── Таблица тарифов на странице подписки ── */ .tf-hint{font-size:13.5px;color:var(--text-soft);margin-bottom:12px} /* Прокрутки вбок здесь нет намеренно: сравнивать тарифы, листая таблицу вправо-влево, невозможно. Не влезло — показываем карточки (класс narrow). */ .tf-scroll{overflow:visible} .tf-table{border-collapse:collapse;width:100%;font-size:13.5px} .tf-table th,.tf-table td{padding:11px 12px;text-align:center;border-bottom:1px solid var(--border); vertical-align:middle} .tf-table thead th{border-bottom:1px solid var(--border-2);vertical-align:top} .tf-corner{width:34%;min-width:190px} .tf-lbl{text-align:left;color:var(--text-soft)} .tf-name{font-weight:800;color:var(--ink);font-size:14px;margin-bottom:3px} .tf-price{font-family:var(--fd);font-size:17px;color:var(--accent-ink);font-weight:600} .tf-how{font-size:11px;color:var(--text-muted);margin-top:5px;line-height:1.35;font-weight:400} .tf-badge{margin-top:7px;display:inline-block;font-size:10.5px;letter-spacing:.06em; text-transform:uppercase;font-weight:800;color:var(--on-accent,#fff);background:var(--accent); border-radius:20px;padding:2px 9px} .tf-table th.now,.tf-table td.now{background:var(--accent-soft)} .tf-yes{color:var(--success);font-weight:800;font-size:15px} .tf-no{color:var(--text-muted)} .tf-val{color:var(--ink);font-weight:600} .tf-note{font-size:12.5px;color:var(--text-muted);margin-top:12px;line-height:1.55} /* ── «Ваш словарь»: разворачиваемые списки ── */ .wl-item{border-bottom:1px solid var(--border)} .wl-head{display:flex;align-items:center;gap:10px;padding:11px 0;cursor:pointer} .wl-head:hover .wl-caret{color:var(--accent)} .wl-caret{color:var(--text-muted);font-size:12px;width:12px;flex:0 0 auto;transition:color .15s} .wl-body{padding:0 0 12px 22px} .wl-load{font-size:13px;color:var(--text-muted);padding:6px 0} .wl-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px} .wl-w{display:flex;gap:8px;font-size:13px;background:var(--surface-2);border:1px solid var(--border); border-radius:9px;padding:6px 10px} .wl-w b{color:var(--ink);font-weight:700} .wl-w span{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── Уведомления от команды: всплывашка справа снизу и панель колокольчика ── */ /* Всплывашки — в правом верхнем углу, ПОД топбаром: там же, где выпадающий список колокольчика, и профиль сверху остаётся открытым. Топбар 70px. */ #lx-notice-host{position:fixed;right:18px;top:78px;z-index:900;display:flex; flex-direction:column;gap:10px;max-width:340px} .lx-notice{position:relative;background:var(--surface);border:1px solid var(--border-2); border-left:3px solid var(--accent);border-radius:14px;padding:14px 34px 14px 16px; box-shadow:var(--shadow-md);animation:lxNoticeIn .35s cubic-bezier(.2,.8,.2,1)} @keyframes lxNoticeIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}} @keyframes lxNoticeOut{to{opacity:0;transform:translateX(30px)}} /* Важное: жёлтая полоса и рамка, само не гаснет — закрывают руками. */ .lx-notice.important{border-left-color:var(--warning);border-color:var(--warning); box-shadow:0 10px 30px -12px var(--warning)} .lx-notice.important .tag{color:var(--warning)} .lx-notice.clickable{cursor:pointer} .lx-notice.clickable:hover{border-color:var(--accent)} /* цвет полосы слева подсказывает тип, не читая подпись */ .lx-notice.k-chat{border-left-color:var(--a-teal,var(--accent))} .lx-notice.k-forum{border-left-color:var(--a-violet,var(--accent))} .lx-notice .tag,.lx-nrow .tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase; font-weight:800;color:var(--text-muted);margin-bottom:5px} .lx-notice.k-chat .tag,.lx-nrow.k-chat .tag{color:var(--a-teal,var(--accent))} .lx-notice.k-forum .tag,.lx-nrow.k-forum .tag{color:var(--a-violet,var(--accent))} .lx-nrow.clickable{cursor:pointer} .lx-nrow.clickable:hover{background:var(--surface-2)} .lx-notice .go{margin-top:9px;font-size:13.5px;font-weight:700;color:var(--accent)} .lx-notice .t{font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:5px} .lx-notice .d{font-size:13.5px;line-height:1.5;color:var(--text-soft)} .lx-notice .go{display:inline-block;margin-top:9px;font-size:13.5px;font-weight:700; color:var(--accent);text-decoration:none} .lx-notice .go:hover{text-decoration:underline} .lx-notice .ok{display:block;margin-top:10px;background:var(--surface-2);border:1px solid var(--border); color:var(--text-soft);border-radius:9px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer} .lx-notice .ok:hover{border-color:var(--accent);color:var(--accent)} .lx-notice .x{position:absolute;top:8px;right:9px;background:none;border:none; color:var(--text-muted);font-size:14px;cursor:pointer;line-height:1;padding:3px} .lx-notice .x:hover{color:var(--ink)} .lx-npanel{position:fixed;right:18px;top:70px;z-index:901;width:330px;max-height:70vh; overflow-y:auto;background:var(--surface);border:1px solid var(--border-2); border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:6px} .lx-npanel .h{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700; color:var(--text-muted);padding:11px 12px 8px} .lx-npanel .h span{color:var(--accent);text-transform:none;letter-spacing:0} .lx-nrow{padding:10px 12px;border-top:1px solid var(--border)} .lx-nrow.new{background:var(--accent-soft)} .lx-nrow .t{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:3px} .lx-nrow .d{font-size:13px;line-height:1.5;color:var(--text-soft)} .lx-nrow .m{font-size:11.5px;color:var(--text-muted);margin-top:5px} .lx-nrow .m a{color:var(--accent);text-decoration:none} .lx-npanel .allread{width:100%;margin-top:6px;background:var(--surface-2);border:1px solid var(--border); color:var(--text-soft);border-radius:11px;padding:9px;font-size:13px;font-weight:700;cursor:pointer} .lx-npanel .allread:hover{border-color:var(--accent);color:var(--accent)} @media(max-width:520px){#lx-notice-host,.lx-npanel{left:12px;right:12px;max-width:none;width:auto}} /* ── Остаток по лимитам бесплатного тарифа ── */ .lx-quota{font-size:13px;color:var(--text-muted);background:var(--surface-2); border:1px solid var(--border);border-radius:12px;padding:9px 13px;margin-bottom:14px} .lx-quota b{color:var(--accent-ink)} .lx-quota.low{border-color:var(--warning);color:var(--text-soft)} .lx-quota.low b{color:var(--warning)} .lx-quota a{color:var(--accent);text-decoration:none;font-weight:700} .lx-quota a:hover{text-decoration:underline} /* ── Баннер-карусель на Главной: одна крупная карточка, автолистание ── */ .bn-hero{position:relative;border:1px solid var(--border);border-radius:var(--r-lg); overflow:hidden;background:var(--surface);margin-bottom:16px} .bn-slide{display:grid;grid-template-columns:280px 1fr;min-height:190px; text-decoration:none;color:inherit;animation:bnIn .45s cubic-bezier(.2,.8,.2,1)} @keyframes bnIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} .bn-hero-pic{background-size:cover;background-position:center;background-color:var(--surface-2)} .bn-hero-body{padding:26px 30px;display:flex;flex-direction:column;justify-content:center} .bn-hero-body h3{font-family:var(--fd);font-size:24px;font-weight:600;letter-spacing:-.02em; margin:0 0 8px;color:var(--ink)} .bn-hero-body p{font-size:14.5px;line-height:1.55;color:var(--text-soft);margin:0;max-width:62ch} .bn-more{margin-top:14px;font-size:14px;font-weight:700;color:var(--accent)} a.bn-slide:hover .bn-more{text-decoration:underline} .bn-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px; border-radius:50%;border:1px solid var(--border-2);background:var(--surface); color:var(--text-soft);font-size:19px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s} .bn-hero:hover .bn-arrow{opacity:1} .bn-arrow:hover{border-color:var(--accent);color:var(--accent)} .bn-arrow.prev{left:10px}.bn-arrow.next{right:10px} .bn-dots{position:absolute;right:16px;bottom:14px;display:flex;gap:6px} .bn-dots button{width:7px;height:7px;border-radius:50%;border:none;padding:0;cursor:pointer; background:var(--border-2);transition:background .2s,width .2s} .bn-dots button.on{background:var(--accent);width:18px;border-radius:4px} @media(max-width:760px){.bn-slide{grid-template-columns:1fr}.bn-hero-pic{min-height:130px} .bn-hero-body{padding:20px}.bn-arrow{display:none}} /* ── Баннеры списком (запас на другие страницы) ── */ .bn-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:16px} .bn-card{display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden; text-decoration:none;color:inherit;transition:transform var(--trf),border-color var(--trf)} a.bn-card:hover{border-color:var(--accent);transform:translateY(-2px)} .bn-card .bn-pic{height:120px;background-size:cover;background-position:center;background-color:var(--surface-2)} .bn-card .bn-body{padding:14px 16px 16px} .bn-card .bn-tag{display:inline-block;font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;font-weight:700;color:var(--text-muted);margin-bottom:7px} .bn-card .bn-tag.ad{color:var(--accent)} .bn-card h4{font-size:15.5px;font-weight:700;line-height:1.35;margin:0 0 6px} .bn-card p{font-size:13.5px;line-height:1.5;color:var(--text-soft);margin:0} /* align-items:start — плитки НЕ растягиваются по высоте самой большой в строке. Раньше рядом с высокой плиткой соседние получали по 200–300 px пустоты снизу, и страница выглядела недогрузившейся. */ .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px; grid-auto-rows:minmax(94px,auto);align-items:start} /* Плитка, которая занимает две строки, должна тянуться — иначе её нижняя половина повисает в воздухе. */ .bento .r2{align-self:stretch} .tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px; transition:transform var(--trf),border-color var(--trf),box-shadow var(--trf)} .tile:hover{transform:translateY(-2px);border-color:var(--border-2);box-shadow:var(--shadow-sm)} .tile-h{font-family:var(--fd);font-weight:600;font-size:15.5px;color:var(--ink)} .tile-sub{font-size:12.5px;color:var(--text-muted);margin-top:1px} .tile.hero{background:var(--grad);border:none;color:var(--on-accent);position:relative;overflow:hidden} .tile.hero .tile-h{color:var(--on-accent)} .tile.hero .tile-sub{color:var(--on-accent-soft)} .tile.flat{box-shadow:none} .c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4} .r2{grid-row:span 2} /* маленькая плитка-стат для сеток внутри бенто */ .tile-stat .tn{font-family:var(--fd);font-size:27px;font-weight:600;color:var(--ink);line-height:1;margin:8px 0 3px} .tile-stat .tl{font-size:12px;color:var(--text-muted)} .tile-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff} .tile-ic svg{width:17px;height:17px;stroke:#fff;fill:none} @media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.c3,.c4{grid-column:span 2}} @media(max-width:560px){.bento{grid-template-columns:1fr}.c2,.c3,.c4{grid-column:span 1}} /* ══════ HOVER: акцентная обводка с мягким «дыханием» ══════ Заливки не трогаем — при наведении появляется только контур акцента (коралл в светлой, бирюза в тёмных) и еле заметное свечение вокруг него. ВАЖНО: свечение живёт на ::after, а НЕ на самом элементе. У плиток есть анимация появления (.fade-up = opacity:0 + animation…forwards); если задать на :hover своё свойство animation, оно перебивает fadeUp, заливка forwards пропадает и элемент возвращается к opacity:0 — то есть исчезает с экрана. */ @keyframes accentBreath{ 0%,100%{box-shadow:0 0 0 1px var(--accent),0 0 14px -8px var(--glow)} 50% {box-shadow:0 0 0 1px var(--accent),0 0 24px -4px var(--glow)} } .tile,.card,.us-tile,.dash-act,.fr-node,.fr-trow,.tu-card,.bl-card,.wd-card, .tst-tile,.tst-lvlcard,.tst-rule,.cn-item,.q-type,.qtype{position:relative} .tile::after,.card::after,.us-tile::after,.dash-act::after,.fr-node::after, .fr-trow::after,.tu-card::after,.bl-card::after,.wd-card::after, .tst-tile::after,.tst-lvlcard::after,.tst-rule::after,.cn-item::after, .q-type::after,.qtype::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:0;transition:opacity var(--trf) } .tile:hover::after,.card:hover::after,.us-tile:hover::after,.dash-act:hover::after, .fr-node:hover::after,.fr-trow:hover::after,.tu-card:hover::after,.bl-card:hover::after, .wd-card:hover::after,.tst-tile:hover::after,.tst-lvlcard:hover::after,.tst-rule:hover::after, .cn-item:hover::after,.q-type:hover::after,.qtype:hover::after{ opacity:1;animation:accentBreath 2.4s ease-in-out infinite } /* пункты меню и кнопки — та же логика, но обводка вместо тени */ .nav-item:hover:not(.active){box-shadow:inset 2px 0 0 var(--accent)} .btn-secondary:hover,.btn-ghost:hover,.btn-back:hover{ border-color:var(--accent);box-shadow:0 0 12px -6px var(--glow) } @media(prefers-reduced-motion:reduce){ .tile:hover::after,.card:hover::after,.us-tile:hover::after,.dash-act:hover::after, .fr-node:hover::after,.fr-trow:hover::after,.tu-card:hover::after,.bl-card:hover::after, .wd-card:hover::after,.tst-tile:hover::after,.tst-lvlcard:hover::after,.tst-rule:hover::after, .cn-item:hover::after,.q-type:hover::after,.qtype:hover::after{ animation:none;box-shadow:0 0 0 1px var(--accent) } } /* ══════════ STAT CARD ══════════ */ .stat-card{display:flex;align-items:center;gap:15px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm); transition:transform var(--tr),box-shadow var(--tr)} .stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .stat-icon{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0;color:#fff} .stat-icon svg{width:24px;height:24px;stroke:#fff;fill:none} .stat-icon.violet{background:var(--a-violet)}.stat-icon.teal{background:var(--a-teal)} .stat-icon.green{background:var(--a-green)}.stat-icon.orange{background:var(--a-orange)} .stat-info{display:flex;flex-direction:column} .stat-value{font-family:var(--fd);font-weight:600;font-size:28px;color:var(--ink);line-height:1} .stat-label{font-size:13px;color:var(--text-muted);font-weight:500;margin-top:3px} /* ══════════ BUTTONS ══════════ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:13px; transition:transform var(--trf),box-shadow var(--trf),background var(--trf),color var(--trf),border-color var(--trf);white-space:nowrap} .btn:active{transform:scale(.97)} .btn-primary{background:var(--grad);color:#fff} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--glow)} .btn-secondary{background:var(--surface-2);color:var(--ink);border:1px solid var(--border-2)} .btn-secondary:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--text-soft);border:1px solid var(--border-2)} .btn-ghost:hover{background:var(--surface-2);color:var(--ink)} .btn-danger{background:var(--danger-soft);color:var(--danger);border:1px solid transparent} .btn-danger:hover{background:var(--danger);color:#fff} .btn-lime,.btn-full{background:var(--grad);color:#fff} .btn-full{width:100%} .btn-sm{padding:8px 15px;font-size:13.5px} .btn-lg{padding:14px 26px;font-size:16px} /* Единая кнопка «назад» — заметная, с крупной стрелкой. Используется во всех разделах. */ .btn-back{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;padding:9px 16px 9px 13px; border-radius:12px;background:var(--surface);border:1px solid var(--border-2);color:var(--text-soft); font-family:var(--fb);font-weight:600;font-size:14px;cursor:pointer;transition:all var(--trf);white-space:nowrap} .btn-back::before{content:"";width:17px;height:17px;flex:0 0 auto;background:currentColor; -webkit-mask:var(--ic-back) center/contain no-repeat;mask:var(--ic-back) center/contain no-repeat} .btn-back:hover{border-color:var(--accent);color:var(--accent);background:var(--surface-2);transform:translateX(-2px)} :root{--ic-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E")} /* ══════════ INPUTS ══════════ */ .input-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:560px){.input-row{grid-template-columns:1fr}} .input-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px} .input-label{font-size:12.5px;font-weight:600;color:var(--text-soft)} .input-field{padding:11px 15px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--border-2);font-size:14.5px;color:var(--text);transition:border-color var(--trf),box-shadow var(--trf);width:100%} .input-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)} .input-field::placeholder{color:var(--text-muted)} select.input-field{cursor:pointer} textarea.input-field{min-height:90px;resize:vertical} /* ══════════ BADGES ══════════ */ .badge{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 10px;border-radius:30px;background:var(--surface-2);color:var(--text-soft)} .badge-violet{background:color-mix(in srgb,var(--a-violet) 20%,transparent);color:var(--a-violet)} .badge-teal{background:color-mix(in srgb,var(--a-teal) 20%,transparent);color:var(--a-teal)} .badge-green{background:var(--success-soft);color:var(--success)} .badge-orange{background:var(--warning-soft);color:var(--warning)} .badge-red,.badge-danger{background:var(--danger-soft);color:var(--danger)} /* ══════════ TABLE ══════════ */ .word-table{width:100%;border-collapse:collapse;font-size:14px} .word-table th{text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:10px 12px;border-bottom:1px solid var(--border)} .word-table td{padding:12px;border-bottom:1px solid var(--border);color:var(--text)} .word-table tbody tr{transition:background var(--trf)} .word-table tbody tr:hover{background:var(--surface-2)} .row-check{width:16px;height:16px;accent-color:var(--accent);cursor:pointer} /* ══════════ BULK BAR ══════════ */ .bulk-bar{display:none;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);padding:12px 16px;margin-bottom:16px;box-shadow:var(--shadow-sm)} .bulk-bar.show{display:flex} .bulk-bar #bulk-count{font-weight:700;color:var(--ink);margin-right:6px} /* ══════════ PROGRESS ══════════ */ .progress-track{height:9px;border-radius:30px;background:var(--surface-2);overflow:hidden} .progress-fill{height:100%;border-radius:30px;background:var(--accent);width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)} .upload-progress{display:none;margin-top:14px} .upload-progress.show{display:block} .taskbar-progress{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:5px} .taskbar-strip{height:16px;border-radius:7px;background:var(--grad);width:0;transition:width .4s ease;box-shadow:0 0 14px var(--glow)} .taskbar-meta{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--text-soft);margin-top:6px;padding:0 2px} .taskbar-pct{color:var(--accent-ink)} /* ══════════ LISTS / CHIPS ══════════ */ .list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--border);margin-bottom:8px;transition:transform var(--trf)} .list-row:hover{transform:translateX(3px)} .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:30px;background:var(--surface-2);border:1px solid var(--border-2);font-size:13px;font-weight:600;color:var(--text-soft);cursor:pointer;transition:all var(--trf)} .chip:hover,.chip.active{background:var(--accent);color:#fff;border-color:transparent} /* ══════════ LOADING / SPINNER ══════════ */ .loading-overlay{display:flex;align-items:center;justify-content:center;gap:10px;padding:30px;color:var(--text-muted);font-size:14px} .spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--border-2);border-top-color:var(--accent);animation:spin .7s linear infinite;display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} /* ══════════ TOAST ══════════ */ #toast-container{position:fixed;right:22px;bottom:22px;z-index:600;display:flex;flex-direction:column;gap:10px} .toast{display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--border-2);box-shadow:var(--shadow-md);font-size:14px;font-weight:500;color:var(--ink);animation:slideIn .25s cubic-bezier(.2,.8,.2,1);min-width:220px} .toast.success{border-left:4px solid var(--success)}.toast.error{border-left:4px solid var(--danger)} .toast.warning{border-left:4px solid var(--warning)}.toast.info{border-left:4px solid var(--accent)} @keyframes slideIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}} @keyframes slideOut{to{opacity:0;transform:translateX(40px)}} /* ══════════ FADE-UP (page load anim) ══════════ */ .fade-up{opacity:0;transform:translateY(20px);animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) forwards} .fade-up-1{animation-delay:.08s}.fade-up-2{animation-delay:.16s}.fade-up-3{animation-delay:.24s}.fade-up-4{animation-delay:.32s} @keyframes fadeUp{to{opacity:1;transform:none}} /* ══════════ MODAL ══════════ */ .modal-back{position:fixed;inset:0;background:rgba(10,15,25,.55);backdrop-filter:blur(4px);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px} /* ══════════ QUIZ ══════════ */ .quiz-blur-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(8,14,26,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .quiz-blur-overlay.show{display:flex} .quiz-word-display{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15} .cheat-dot{transition:opacity var(--trf),background var(--trf)} /* ══════════ RESPONSIVE SIDEBAR ══════════ */ @media(max-width:1080px){ :root{--side:76px} .side-logo .logo-text,.nav-label{display:none} .side-logo{justify-content:center;padding:6px 0 22px} .nav-item{justify-content:center;padding:13px 0} } /* Затемнение под открытым мобильным меню: тап по нему закрывает меню, а body.nav-open блокирует прокрутку фона (иначе страница ездила под меню). */ .nav-backdrop{position:fixed;inset:0;background:rgba(6,12,22,.45);z-index:45; opacity:0;pointer-events:none;transition:opacity var(--tr)} @media(max-width:720px){ :root{--side:0px} body.nav-open{overflow:hidden} body.nav-open .nav-backdrop{opacity:1;pointer-events:auto} .sidebar{width:248px;transform:translateX(-100%);box-shadow:var(--shadow-md)} .sidebar.open{transform:none} .sidebar.open .side-logo .logo-text,.sidebar.open .nav-label{display:inline} .sidebar.open .side-logo{justify-content:flex-start;padding:6px 10px 22px} .sidebar.open .nav-item{justify-content:flex-start;padding:12px 14px} .topbar{left:0;padding:0 16px} .main-content{margin-left:0;padding:90px 16px 40px} .side-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border)} .side-toggle svg{width:20px;height:20px;stroke:var(--ink);fill:none} /* Шапка на телефоне. Раньше её содержимое занимало 747 px при экране 375 — монеты, колокольчик, тема и аватар просто уезжали за правый край и были недоступны. Поле поиска прячем (вместо него кнопка-лупа), у чипа пользователя оставляем только аватар. */ .searchbar{display:none} .only-narrow{display:inline-flex!important} .topbar{gap:8px;padding:0 12px} .topbar-right{gap:6px;margin-left:auto} .user-chip{padding:0;background:none;border:none} .user-meta{display:none} /* Переключатель темы на телефоне — одна иконка вместо двух. У основателя в шапке две лишние кнопки (модерация и поддержка), и с широкой пилюлей аватар всё равно уезжал за край на 19 px. */ .theme-opt{width:26px;height:26px} .theme-pill .theme-opt:not(.active){display:none} .theme-pill{padding:2px} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.fade-up{opacity:1;transform:none}} /* ── Свечение кнопки в бенто-плитке при наведении ────────────────────── Держим В КОНЦЕ файла намеренно: выше есть [data-theme="ink"] .btn-primary:hover с box-shadow:none, и при равной весомости побеждает то правило, что ниже. Целимся не только в .btn — в плитках кликают .cta и .dash-act. В тёмных темах ореол белый, в светлой — коралловый: белый на кремовом фоне попросту не виден. */ .tile .btn:hover, .tile .cta:hover, .tile .dash-act:hover, .card .btn:hover, .card .cta:hover, .bento .btn:hover, .bento .cta:hover, .bento .dash-act:hover, .bn-hero .btn:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.40), 0 0 20px 3px rgba(255,255,255,.30); } [data-theme="light"] .tile .btn:hover, [data-theme="light"] .tile .cta:hover, [data-theme="light"] .tile .dash-act:hover, [data-theme="light"] .card .btn:hover, [data-theme="light"] .card .cta:hover, [data-theme="light"] .bento .btn:hover, [data-theme="light"] .bento .cta:hover, [data-theme="light"] .bento .dash-act:hover, [data-theme="light"] .bn-hero .btn:hover{ box-shadow:0 0 0 1px rgba(217,128,95,.50), 0 0 20px 3px rgba(217,128,95,.38); } /* ── Редактор набора («Мои списки» → Изменить») ── */ .wl-edit-back{position:fixed;inset:0;z-index:9000;background:rgba(4,10,18,.55); display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)} .wl-edit{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg); width:min(560px,100%);max-height:82vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg,0 20px 60px rgba(0,0,0,.35))} .wl-edit-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding:16px 18px;border-bottom:1px solid var(--border)} .wl-edit-rows{padding:12px 18px;overflow-y:auto;flex:1} .wl-erow{display:flex;gap:8px;align-items:center;margin-bottom:8px} .wl-erow .input-field{padding:8px 11px;font-size:13.5px} .wl-erow .wl-en{flex:1;min-width:0} .wl-erow .wl-ru{flex:1.2;min-width:0} .wl-edit-f{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--border);flex-wrap:wrap} /* ── Просмотр документа студента с увеличением ── */ .sv-thumb{max-width:100%;max-height:420px;border:1px solid var(--border);border-radius:10px;cursor:zoom-in;display:block} .sv-zoom-back{position:fixed;inset:0;z-index:9500;background:rgba(4,10,18,.88);display:flex;flex-direction:column} .sv-zoom-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface); border-bottom:1px solid var(--border);flex:0 0 auto} .sv-zoom-bar #sv-zoom-val{min-width:56px;text-align:center;font-weight:700;font-size:13px;color:var(--text-soft); font-variant-numeric:tabular-nums} .sv-zoom-stage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab} .sv-zoom-stage:active{cursor:grabbing} .sv-zoom-stage img{max-width:92%;max-height:92%;transform-origin:center;user-select:none; transition:transform .06s linear;box-shadow:0 20px 60px rgba(0,0,0,.5);border-radius:8px} /* ── Тарифы: таблица на широком экране, карточки на узком ── */ .tf-cards{display:none;flex-direction:column;gap:12px} .tf-card{border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;background:var(--surface)} .tf-card.now{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .tf-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px; padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:10px} .tf-card .tf-how{font-size:12.5px;color:var(--text-muted);margin-bottom:10px;line-height:1.45} .tf-card-rows{display:flex;flex-direction:column;gap:7px} .tf-card-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13.5px} .tf-card-row>span:first-child{color:var(--text-soft);min-width:0} .tf-card-row.off>span:first-child{color:var(--text-muted)} /* Переключение решает JS по ширине КОНТЕЙНЕРА (subscription.js → tfFit): медиазапрос по ширине окна не учитывал боковое меню и на ноутбуке оставлял таблицу в раздавленном виде. */ .tf-wrap.narrow .tf-scroll{display:none} .tf-wrap.narrow .tf-cards{display:flex} .tf-sub{font-size:11.5px;color:var(--accent);font-weight:700;margin-top:2px} .tf-buy{margin-top:8px} .tf-price span{font-size:11px;font-weight:600;color:var(--text-muted)} /* «есть у всех» — свёрнуто: смысл таблицы в различиях, одинаковые строки их размывают */ .tf-common{margin-top:12px;border:1px solid var(--border);border-radius:var(--r); background:var(--surface-2);padding:10px 14px} .tf-common summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--text-soft)} .tf-common>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px} .tf-common>div span{font-size:12.5px;color:var(--text-soft);background:var(--surface); border:1px solid var(--border);border-radius:8px;padding:3px 9px} .tf-stub{border:1px solid var(--warning);background:color-mix(in srgb,var(--warning) 12%,transparent); border-radius:12px;padding:11px 14px;font-size:13.5px;color:var(--text-soft);margin-bottom:12px} .tf-loses{border:1px solid var(--border);background:var(--surface-2);border-radius:12px; padding:10px 14px;font-size:13px;color:var(--text-muted);margin-top:10px} .tf-loses b{color:var(--text-soft)} /* единая шапка раздела — та же, что в «Полезном» */ .sec-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px} .sec-head h3{font-family:var(--fd);font-size:19px;color:var(--ink);margin:0 0 4px} .sec-head p{margin:0;color:var(--text-soft);font-size:13.5px;max-width:62ch;line-height:1.5} /* ── Счётчик подписки в профиле ── */ .pf-sub{min-width:190px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r); background:var(--surface-2);text-align:left} .pf-sub.soon{border-color:var(--warning)} .pf-sub.over{border-color:var(--danger)} .pf-sub-lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700} .pf-sub-date{font-weight:800;font-size:15px;color:var(--ink);margin-top:3px} .pf-sub-left{font-size:12.5px;color:var(--text-soft);margin-top:2px;font-weight:600} .pf-sub.soon .pf-sub-left{color:var(--warning)} .pf-sub.over .pf-sub-left{color:var(--danger)} .pf-sub-bar{height:6px;border-radius:6px;background:var(--border);margin-top:9px;overflow:hidden} .pf-sub-bar i{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .4s} .pf-sub.soon .pf-sub-bar i{background:var(--warning)} .pf-sub.over .pf-sub-bar i{background:var(--danger)} /* ── Смешанные тексты: тест с ручным вводом перевода ── */ .mix-q{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);flex-wrap:wrap} .mix-q:last-of-type{border-bottom:none} .mix-q>b{min-width:130px;font-size:15px;color:var(--ink)} .mix-in{flex:1;min-width:160px;padding:8px 12px;font-size:14px} .mix-q.ok>b{color:var(--success)} .mix-q.bad>b{color:var(--danger)} .mix-ans{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0} .mix-given{font-size:14px;color:var(--text-soft)} .mix-given i{color:var(--text-muted)} .mix-mark{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; border-radius:20px;padding:3px 10px} .mix-mark.ok{color:var(--success);background:var(--success-soft)} .mix-mark.bad{color:var(--danger);background:var(--danger-soft)} .mix-right{font-size:13.5px;color:var(--success);font-weight:700} /* ── Ответ консультанта в «Письме» ── */ .wr-answer{border:1px solid var(--border);border-left:3px solid var(--accent); border-radius:12px;padding:13px 15px;background:var(--surface-2)} .wr-answer>b{display:block;font-size:13px;color:var(--text-muted);margin-bottom:7px;font-weight:700} .wr-answer>div{font-size:14px;line-height:1.6;color:var(--text)} /* ── Поиск по сайту (Ctrl + K) ───────────────────────────────────────── Одно окно на все страницы: ищет по разделам, правилам Памятки, Справке, своему словарю и нашей базе слов. Раньше поле в шапке было декорацией. */ .icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center; border-radius:11px;border:1px solid var(--border-2,var(--border));background:var(--surface-2); color:var(--text-soft);cursor:pointer} .icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none} .icon-btn:hover{border-color:var(--accent);color:var(--ink)} .only-narrow{display:none} #lx-search{display:none;position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.55); align-items:flex-start;justify-content:center;padding:12vh 16px 16px;backdrop-filter:blur(2px)} #lx-search.on{display:flex} .lxs-panel{width:100%;max-width:620px;background:var(--surface);border:1px solid var(--border); border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.45);overflow:hidden;display:flex;flex-direction:column;max-height:74vh} .lxs-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--border)} .lxs-ic svg{width:19px;height:19px;stroke:var(--text-muted);fill:none;display:block} #lxs-input{flex:1;border:none;background:none;outline:none;font-size:16px;color:var(--ink);font-family:inherit} #lxs-input::placeholder{color:var(--text-muted)} .lxs-esc{border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted); border-radius:8px;padding:4px 9px;font-size:11.5px;font-weight:700;cursor:pointer} .lxs-body{overflow:auto;padding:8px} .lxs-g{font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase; color:var(--text-muted);padding:12px 10px 6px} .lxs-row{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;border:none; background:none;padding:9px 10px;border-radius:11px;cursor:pointer;font-family:inherit} .lxs-row:hover,.lxs-row.on{background:var(--surface-2)} .lxs-row.on{box-shadow:inset 0 0 0 1px var(--accent)} .lxs-t{font-size:14.5px;font-weight:600;color:var(--ink);flex:0 0 auto} .lxs-s{font-size:12.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lxs-empty{padding:22px 14px;color:var(--text-muted);font-size:13.5px;line-height:1.6} .lxs-foot{padding:10px 16px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-muted)} @media(max-width:720px){ #lx-search{padding:6vh 10px 10px} .lxs-row{flex-direction:column;gap:2px} .lxs-foot{display:none} } /* Счётчик «повторить сегодня» у пункта «Проверка». */ .nav-item{position:relative} .nav-due{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:10px; background:var(--accent);color:var(--on-accent,#fff);font-size:11.5px;font-weight:800; display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .sidebar:not(.open) .nav-due{position:absolute;top:4px;right:4px;margin:0;min-width:16px;height:16px; padding:0 4px;font-size:10px} @media(min-width:721px){.sidebar .nav-due{position:static;margin-left:auto;min-width:22px;height:20px;padding:0 6px;font-size:11.5px}} /* ── Поле выбора файла ──────────────────────────────────────────────── Системный «Выберите файл | Файл не выбран» был единственным неоформленным элементом на странице словаря. Красим саму кнопку внутри поля средствами браузера — так работает и в Chrome, и в Firefox. */ input[type="file"].input-field{padding:8px 10px;line-height:1.4;cursor:pointer} input[type="file"].input-field::file-selector-button{ margin-right:12px;padding:7px 14px;border-radius:9px;cursor:pointer; border:1px solid var(--border-2,var(--border));background:var(--surface-2); color:var(--ink);font-weight:700;font-size:13px;font-family:inherit; transition:border-color var(--trf),color var(--trf)} input[type="file"].input-field::file-selector-button:hover{border-color:var(--accent);color:var(--accent-ink)} /* ── Переключатель из двух-трёх положений ───────────────────────────── Жил в