/* ═══════════════════════════════════════════════════════════════ Ingat Design System (ig-*) Изолированный слой дизайн-системы из design/ingat-concept-v2.html. Все токены и классы имеют префикс ig-, чтобы не конфликтовать с существующим app.css. Тема переключается тем же атрибутом data-theme="dark" на , что и остальной сайт. ═══════════════════════════════════════════════════════════════ */ :root { --ig-bg: #F7F6F2; --ig-bg-soft: #EFEDE6; --ig-card: #FFFFFF; --ig-ink: #22262B; --ig-ink-soft: #4A5058; --ig-muted: #6E7681; --ig-line: #E6E3DB; --ig-line-strong: #D5D1C6; --ig-accent: #1E6E54; --ig-accent-dark: #175843; --ig-accent-soft: #E9F2EE; --ig-accent-line: #BFDACF; --ig-amber: #B45309; --ig-amber-soft: #FDF3E3; --ig-amber-line: #F0DCB8; --ig-red: #B3423A; --ig-red-soft: #FBECEA; --ig-red-line: #F1D3CF; --ig-blue: #2B5D8A; --ig-blue-soft: #E8F0F7; --ig-blue-line: #CBDDEC; --ig-violet: #6B4E8F; --ig-violet-soft: #F0EAF7; --ig-violet-line: #DCCFEB; --ig-track: #ECEAE3; --ig-focus-ring: #BFDACF; --ig-switch-off: #CCC9C0; --ig-btn-ink: #FFFFFF; --ig-radius: 14px; --ig-radius-sm: 9px; --ig-radius-lg: 20px; --ig-shadow: 0 1px 3px rgba(30, 40, 35, .07); --ig-shadow-lift: 0 6px 20px rgba(30, 40, 35, .10); } [data-theme="dark"] { --ig-bg: #141613; --ig-bg-soft: #1A1D19; --ig-card: #1D201C; --ig-ink: #EBEAE3; --ig-ink-soft: #C6C3BA; --ig-muted: #98968C; --ig-line: #2C302A; --ig-line-strong: #3D423B; --ig-accent: #3FA57C; --ig-accent-dark: #63C099; --ig-accent-soft: #22352C; --ig-accent-line: #31544A; --ig-amber: #E0A64E; --ig-amber-soft: #3A3120; --ig-amber-line: #584828; --ig-red: #E07A70; --ig-red-soft: #3A2523; --ig-red-line: #57352F; --ig-blue: #83AED4; --ig-blue-soft: #22303C; --ig-blue-line: #33495A; --ig-violet: #B79BDA; --ig-violet-soft: #2A2436; --ig-violet-line: #3F3654; --ig-track: #2E322C; --ig-focus-ring: #31544A; --ig-switch-off: #4A4E46; --ig-btn-ink: #0E1512; --ig-shadow: 0 1px 3px rgba(0, 0, 0, .4); --ig-shadow-lift: 0 8px 24px rgba(0, 0, 0, .45); } /* ── корневой контейнер страницы дизайн-системы ── */ .ig-root { color: var(--ig-ink); line-height: 1.55; /* длинные слова (названия словарей, ссылки) не должны раздвигать страницу */ overflow-wrap: break-word; } /* дети грид-контейнеров по умолчанию имеют min-width:auto и не дают колонке сжаться */ .ig-root .ig-cols > *, .ig-root .ig-grid2 > *, .ig-root .ig-metrics > *, .ig-root .ig-insights > *, .ig-root .ig-dicts > *, .ig-root .ig-mp-grid > * { min-width: 0; } .ig-root h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.015em; margin: 0; } .ig-root h2 { font-size: 1.18rem; font-weight: 650; letter-spacing: -.01em; margin: 0; } .ig-root h3 { font-size: 1rem; font-weight: 600; margin: 0; } /* Правило для НЕ задаёт цвет: селектор `.ig-root a` (0,1,1) перебил бы любой одиночный класс кнопки (0,1,0) и покрасил бы текст кнопки в цвет ссылки. Цвет задают сами компоненты (.ig-btn-*, .ig-mine, .ig-chunk), а для обычных ссылок есть .ig-link. */ .ig-root a { text-decoration: none; } .ig-link { color: var(--ig-accent); font-weight: 600; } .ig-link:hover { color: var(--ig-accent-dark); text-decoration: underline; text-underline-offset: 3px; } .ig-root :focus-visible { outline: 3px solid var(--ig-focus-ring); outline-offset: 2px; border-radius: 6px; } .ig-mono { font-variant-numeric: tabular-nums; } .ig-muted { color: var(--ig-muted); } .ig-small { font-size: .86rem; } .ig-tiny { font-size: .78rem; } .ig-row { display: flex; align-items: center; gap: 12px; } .ig-stack { display: flex; flex-direction: column; gap: 16px; } /* ── карточка ── */ .ig-card { background: var(--ig-card); border: 1px solid var(--ig-line); border-radius: var(--ig-radius); padding: 20px; box-shadow: var(--ig-shadow); } .ig-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 12px; } /* ── кнопки ── */ .ig-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 11px; font-weight: 600; font-size: .95rem; border: 1px solid transparent; transition: .14s; cursor: pointer; text-decoration: none; } .ig-btn-primary { background: var(--ig-accent); color: var(--ig-btn-ink); } .ig-btn-primary:hover { background: var(--ig-accent-dark); color: var(--ig-btn-ink); } .ig-btn-ghost { border-color: var(--ig-line-strong); color: var(--ig-ink-soft); background: var(--ig-card); } .ig-btn-ghost:hover { border-color: var(--ig-accent); color: var(--ig-accent); } .ig-btn-lg { padding: 15px 28px; font-size: 1.03rem; border-radius: 13px; } .ig-btn-sm { padding: 7px 13px; font-size: .85rem; border-radius: 9px; } .ig-btn-block { width: 100%; } /* ── пилюли ── */ .ig-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; border: 1px solid var(--ig-line); color: var(--ig-ink-soft); background: var(--ig-bg-soft); } .ig-pill-green { background: var(--ig-accent-soft); color: var(--ig-accent-dark); border-color: var(--ig-accent-line); } .ig-pill-amber { background: var(--ig-amber-soft); color: var(--ig-amber); border-color: var(--ig-amber-line); } .ig-pill-red { background: var(--ig-red-soft); color: var(--ig-red); border-color: var(--ig-red-line); } .ig-pill-blue { background: var(--ig-blue-soft); color: var(--ig-blue); border-color: var(--ig-blue-line); } .ig-pill-violet { background: var(--ig-violet-soft); color: var(--ig-violet); border-color: var(--ig-violet-line); } /* ── полосы прогресса ── */ .ig-bar { height: 8px; border-radius: 99px; background: var(--ig-track); overflow: hidden; } .ig-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--ig-accent); transition: width .5s ease; } .ig-bar-thin { height: 6px; } .ig-bar > i.ig-amber { background: var(--ig-amber); } .ig-bar > i.ig-blue { background: var(--ig-blue); } .ig-bar > i.ig-red { background: var(--ig-red); } /* ── цветные иконки-плашки ── */ .ig-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; } .ig-i-green { background: var(--ig-accent-soft); border: 1px solid var(--ig-accent-line); color: var(--ig-accent-dark); } .ig-i-blue { background: var(--ig-blue-soft); border: 1px solid var(--ig-blue-line); color: var(--ig-blue); } .ig-i-amber { background: var(--ig-amber-soft); border: 1px solid var(--ig-amber-line); color: var(--ig-amber); } .ig-i-red { background: var(--ig-red-soft); border: 1px solid var(--ig-red-line); color: var(--ig-red); } .ig-i-violet { background: var(--ig-violet-soft); border: 1px solid var(--ig-violet-line); color: var(--ig-violet); } /* ═══════════ ГЛАВНАЯ: две колонки ═══════════ */ .ig-page { max-width: 1160px; margin: 0 auto; padding: 24px 24px 64px; } .ig-cols { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 22px; align-items: start; } .ig-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; } /* ── карточка «план на сегодня» ── */ .ig-today { position: relative; overflow: hidden; padding: 24px; border-radius: var(--ig-radius-lg); background: var(--ig-card); border: 1px solid var(--ig-accent-line); box-shadow: var(--ig-shadow-lift); } .ig-today:before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 100% 0%, var(--ig-accent-soft) 0%, transparent 62%); pointer-events: none; } .ig-today > * { position: relative; } .ig-kicker { font-size: .8rem; font-weight: 600; color: var(--ig-accent-dark); letter-spacing: .04em; text-transform: uppercase; } .ig-today h1 { margin: 6px 0 4px; font-size: 1.7rem; } .ig-today-sub { color: var(--ig-ink-soft); font-size: .95rem; margin: 0; } .ig-chunks { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 18px; } .ig-chunk { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--ig-line); background: var(--ig-bg-soft); font-size: .87rem; font-weight: 500; color: var(--ig-ink); text-decoration: none; } .ig-chunk:hover { border-color: var(--ig-accent-line); color: var(--ig-ink); } .ig-chunk b { font-weight: 700; } .ig-chunk .ig-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ig-accent); display: inline-block; } .ig-chunk .ig-dot.b { background: var(--ig-blue); } .ig-chunk .ig-dot.r { background: var(--ig-red); } .ig-chunk .ig-dot.v { background: var(--ig-violet); } .ig-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .ig-note { font-size: .83rem; color: var(--ig-muted); margin: 12px 0 0; } /* ── серия ── */ .ig-streak-num { display: flex; align-items: center; gap: 12px; } .ig-flame { width: 52px; height: 52px; border-radius: 15px; background: var(--ig-amber-soft); border: 1px solid var(--ig-amber-line); display: grid; place-items: center; font-size: 1.5rem; } .ig-streak-val { font-size: 1.8rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; } .ig-week { display: flex; gap: 6px; margin-top: 16px; } .ig-wd { flex: 1; text-align: center; } .ig-wd .ig-box { height: 34px; border-radius: 9px; background: var(--ig-track); border: 1px solid transparent; display: grid; place-items: center; font-size: .8rem; color: var(--ig-muted); font-weight: 600; } .ig-wd.done .ig-box { background: var(--ig-amber-soft); border-color: var(--ig-amber-line); color: var(--ig-amber); } .ig-wd.today .ig-box { background: var(--ig-card); border: 2px dashed var(--ig-accent); color: var(--ig-accent); font-weight: 700; } .ig-wd .ig-lbl { font-size: .68rem; color: var(--ig-muted); margin-top: 4px; } .ig-hint-box { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--ig-blue-soft); border: 1px solid var(--ig-blue-line); font-size: .82rem; color: var(--ig-blue); margin-top: 14px; } .ig-hint-green { background: var(--ig-accent-soft); border-color: var(--ig-accent-line); color: var(--ig-accent-dark); } /* ── кольцо цели ── */ .ig-ring { position: relative; width: 104px; height: 104px; flex-shrink: 0; } .ig-ring svg { transform: rotate(-90deg); } .ig-ring .c-bg { stroke: var(--ig-track); } .ig-ring .c-fg { stroke: var(--ig-accent); stroke-linecap: round; transition: stroke-dashoffset .9s ease; } .ig-ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.15; } .ig-ring-center b { font-size: 1.4rem; font-weight: 700; } .ig-ring-center span { font-size: .7rem; color: var(--ig-muted); } /* ── лига ── */ .ig-league-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .ig-league-badge { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem; background: var(--ig-violet-soft); border: 1px solid var(--ig-violet-line); } .ig-lb-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; } .ig-lb-row + .ig-lb-row { margin-top: 2px; } .ig-lb-row.me { background: var(--ig-accent-soft); border: 1px solid var(--ig-accent-line); } .ig-lb-pos { width: 24px; text-align: center; font-weight: 700; color: var(--ig-muted); font-size: .88rem; } .ig-lb-row.me .ig-lb-pos { color: var(--ig-accent-dark); } .ig-lb-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); flex-shrink: 0; } .ig-lb-name { flex: 1; font-size: .92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ig-lb-xp { font-weight: 700; font-size: .88rem; color: var(--ig-ink-soft); } .ig-lb-cut { display: flex; align-items: center; gap: 9px; margin: 8px 2px; font-size: .72rem; color: var(--ig-accent-dark); font-weight: 600; letter-spacing: .02em; } .ig-lb-cut:before, .ig-lb-cut:after { content: ""; flex: 1; height: 1px; background: var(--ig-accent-line); } /* ── «продолжить своё» ── */ .ig-mine { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--ig-line); border-radius: var(--ig-radius); background: var(--ig-card); transition: .14s; text-decoration: none; color: var(--ig-ink); } .ig-mine:hover { border-color: var(--ig-accent-line); box-shadow: var(--ig-shadow); color: var(--ig-ink); } .ig-mine-body { flex: 1; min-width: 0; } .ig-mine-title { font-weight: 600; font-size: .97rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ig-mine-meta { font-size: .8rem; color: var(--ig-muted); margin-top: 2px; } .ig-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* ── календарь активности ── */ /* grid-auto-columns обязателен: без него 18 колонок берут ширину по содержимому и растягивают страницу шире экрана телефона */ .ig-heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); grid-auto-columns: minmax(0, 1fr); gap: 4px; width: 100%; } .ig-heat i { aspect-ratio: 1; border-radius: 3px; background: var(--ig-track); display: block; } .ig-heat i.l1 { background: var(--ig-accent-line); } .ig-heat i.l2 { background: var(--ig-accent); opacity: .55; } .ig-heat i.l3 { background: var(--ig-accent); opacity: .8; } .ig-heat i.l4 { background: var(--ig-accent); } .ig-heat-legend { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--ig-muted); margin-top: 10px; } .ig-heat-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--ig-track); display: inline-block; } /* ── достижения ── */ .ig-ach { display: flex; gap: 12px; align-items: center; } .ig-ach + .ig-ach { margin-top: 14px; } .ig-ach-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); flex-shrink: 0; } .ig-ach-ic.on { background: var(--ig-amber-soft); border-color: var(--ig-amber-line); } /* ── разминка ── */ .ig-warmup-word { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; } .ig-warmup-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; } .ig-wopt { padding: 12px 14px; border: 1px solid var(--ig-line-strong); border-radius: 11px; background: var(--ig-card); text-align: left; font-size: .95rem; font-weight: 500; color: var(--ig-ink); transition: .12s; cursor: pointer; } .ig-wopt:hover:not(:disabled) { border-color: var(--ig-accent); background: var(--ig-accent-soft); } .ig-wopt.ok { border-color: var(--ig-accent); background: var(--ig-accent-soft); color: var(--ig-accent-dark); font-weight: 600; } .ig-wopt.no { border-color: var(--ig-red-line); background: var(--ig-red-soft); color: var(--ig-red); } .ig-warmup-after { margin-top: 14px; padding: 13px 15px; border-radius: 11px; background: var(--ig-accent-soft); border: 1px solid var(--ig-accent-line); font-size: .9rem; } /* ═══════════ СЛОВАРИ ═══════════ */ .ig-dicts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; } .ig-dict { display: flex; flex-direction: column; gap: 13px; padding: 18px; border: 1px solid var(--ig-line); border-radius: var(--ig-radius); background: var(--ig-card); transition: .14s; cursor: pointer; } .ig-dict:hover { border-color: var(--ig-accent-line); box-shadow: var(--ig-shadow-lift); } .ig-dict.due { border-color: var(--ig-amber-line); } .ig-dict.picked { border-color: var(--ig-accent); box-shadow: 0 0 0 3px var(--ig-accent-soft); } .ig-dict.dimmed { opacity: .62; } .ig-dict-top { display: flex; align-items: flex-start; gap: 12px; } .ig-dict-name { font-weight: 650; font-size: 1.02rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .ig-dict-sub { font-size: .8rem; color: var(--ig-muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ig-dict-badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } /* сегментированный прогресс: освоено / в работе / не начато */ .ig-seg { display: flex; height: 9px; border-radius: 99px; overflow: hidden; background: var(--ig-track); } .ig-seg i { display: block; height: 100%; transition: width .5s ease; } .ig-seg-known { background: var(--ig-accent); } .ig-seg-learn { background: var(--ig-blue); } .ig-seg-new { background: var(--ig-line-strong); } .ig-seg-legend { display: flex; gap: 14px; font-size: .76rem; color: var(--ig-muted); flex-wrap: wrap; } .ig-seg-legend span { display: flex; align-items: center; gap: 5px; } .ig-seg-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .ig-dict-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; } .ig-dict-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; } .ig-icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ig-muted); display: grid; place-items: center; font-size: .9rem; cursor: pointer; transition: .12s; } .ig-icon-btn:hover { background: var(--ig-bg-soft); border-color: var(--ig-line); color: var(--ig-ink); } .ig-icon-btn.danger:hover { background: var(--ig-red-soft); border-color: var(--ig-red-line); color: var(--ig-red); } .ig-icon-btn.on { background: var(--ig-accent-soft); border-color: var(--ig-accent-line); color: var(--ig-accent-dark); } /* автоподборки */ .ig-smart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; margin-bottom: 22px; } .ig-smart { display: flex; gap: 12px; align-items: center; padding: 14px 15px; border-radius: var(--ig-radius); border: 1px dashed var(--ig-line-strong); background: var(--ig-bg-soft); transition: .14s; } .ig-smart:hover { border-style: solid; border-color: var(--ig-accent-line); background: var(--ig-card); } .ig-smart-body { flex: 1; min-width: 0; } /* панель инструментов над списком */ .ig-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .ig-empty { text-align: center; padding: 46px 20px; border: 1px dashed var(--ig-line-strong); border-radius: var(--ig-radius); background: var(--ig-bg-soft); } .ig-empty .ig-empty-ic { font-size: 2.4rem; } /* предупреждение о деградации */ .ig-warn { display: flex; gap: 13px; padding: 15px 17px; border-radius: var(--ig-radius); border: 1px solid var(--ig-amber-line); background: var(--ig-amber-soft); margin-bottom: 18px; } .ig-warn .ig-warn-title { font-weight: 650; color: var(--ig-amber); font-size: .95rem; } /* пагинация */ .ig-pager { display: flex; gap: 6px; justify-content: center; margin-top: 26px; flex-wrap: wrap; } .ig-pager-btn { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--ig-line); background: var(--ig-card); color: var(--ig-ink-soft); font-size: .9rem; font-weight: 500; cursor: pointer; } .ig-pager-btn:hover:not(:disabled) { border-color: var(--ig-accent); color: var(--ig-accent); } .ig-pager-btn.active { background: var(--ig-accent); border-color: var(--ig-accent); color: var(--ig-btn-ink); font-weight: 600; } .ig-pager-btn:disabled { opacity: .45; cursor: default; } /* ═══════════ МАРКЕТПЛЕЙС ═══════════ */ .ig-search { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-radius: 13px; border: 1px solid var(--ig-line-strong); background: var(--ig-card); box-shadow: var(--ig-shadow); } .ig-search input { flex: 1; min-width: 0; border: none; background: none; font: inherit; color: var(--ig-ink); outline: none; } .ig-search input::placeholder { color: var(--ig-muted); } .ig-search .ig-search-ic { color: var(--ig-muted); } .ig-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ig-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ig-line); background: var(--ig-card); font-size: .87rem; font-weight: 500; color: var(--ig-ink-soft); transition: .12s; cursor: pointer; } .ig-chip:hover { border-color: var(--ig-accent); color: var(--ig-accent); } .ig-chip.active { background: var(--ig-accent); border-color: var(--ig-accent); color: var(--ig-btn-ink); font-weight: 600; } .ig-chip-x { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; border-radius: 999px; border: 1px solid var(--ig-accent-line); background: var(--ig-accent-soft); color: var(--ig-accent-dark); font-size: .82rem; font-weight: 500; } .ig-chip-x button { border: none; background: none; color: inherit; cursor: pointer; opacity: .65; padding: 0 3px; } .ig-chip-x button:hover { opacity: 1; } .ig-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .ig-select { padding: 8px 12px; border-radius: 9px; border: 1px solid var(--ig-line-strong); background: var(--ig-card); font: inherit; font-size: .87rem; color: var(--ig-ink); cursor: pointer; } /* карточка товара */ .ig-mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; } .ig-mp { display: flex; flex-direction: column; gap: 11px; padding: 18px; border: 1px solid var(--ig-line); border-radius: var(--ig-radius); background: var(--ig-card); transition: .14s; cursor: pointer; height: 100%; } .ig-mp:hover { border-color: var(--ig-accent-line); box-shadow: var(--ig-shadow-lift); transform: translateY(-2px); } .ig-mp.mine { border-color: var(--ig-accent-line); background: linear-gradient(0deg, var(--ig-accent-soft), var(--ig-accent-soft)); } .ig-mp-top { display: flex; align-items: flex-start; gap: 11px; } /* min-height у заголовка и описания: без него карточки в одном ряду разъезжаются, когда у одной нет описания или название в одну строку */ .ig-mp-title { font-weight: 650; font-size: 1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; min-height: 2.6em; } .ig-mp-desc.empty { font-style: italic; opacity: .6; } .ig-mp-desc { font-size: .84rem; line-height: 1.45; color: var(--ig-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; } .ig-mp-langs { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ig-ink-soft); } .ig-mp-langs .ig-lang { padding: 3px 9px; border-radius: 7px; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); } /* социальное доказательство */ .ig-mp-social { display: flex; align-items: center; gap: 7px; font-size: .79rem; color: var(--ig-accent-dark); background: var(--ig-accent-soft); border: 1px solid var(--ig-accent-line); padding: 6px 10px; border-radius: 9px; } .ig-mp-stats { display: flex; gap: 13px; font-size: .79rem; color: var(--ig-muted); align-items: center; flex-wrap: wrap; } .ig-mp-foot { margin-top: auto; display: flex; gap: 8px; align-items: center; padding-top: 4px; } .ig-mp-author { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ig-muted); min-width: 0; } .ig-mp-author span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* модальное окно превью */ .ig-modal-overlay { position: fixed; inset: 0; z-index: 1080; background: rgba(20, 22, 19, .55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; } .ig-modal { width: 100%; max-width: 560px; max-height: min(86vh, 720px); display: flex; flex-direction: column; background: var(--ig-card); border: 1px solid var(--ig-line); border-radius: var(--ig-radius-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); overflow: hidden; } .ig-modal-head { display: flex; align-items: flex-start; gap: 13px; padding: 20px 20px 16px; border-bottom: 1px solid var(--ig-line); } .ig-modal-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; word-break: break-word; } .ig-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; } .ig-modal-foot { padding: 14px 20px 18px; border-top: 1px solid var(--ig-line); background: var(--ig-bg-soft); } /* пары слово — перевод */ .ig-words { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ig-word { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--ig-line); background: var(--ig-card); font-size: .88rem; line-height: 1.4; } .ig-word b { font-weight: 600; } .ig-word .ig-word-tr { color: var(--ig-accent-dark); } .ig-word .ig-word-dash { color: var(--ig-muted); margin: 0 5px; } @media (max-width: 560px) { .ig-words { grid-template-columns: 1fr; } .ig-modal { max-height: 92vh; } } /* блок публикации своего контента */ .ig-publish { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: var(--ig-radius); background: var(--ig-violet-soft); border: 1px solid var(--ig-violet-line); margin-top: 26px; } @media (max-width: 700px) { .ig-publish { flex-direction: column; align-items: flex-start; } .ig-mp-grid { grid-template-columns: 1fr; } } /* ═══════════ ВИТРИНА КОНТЕНТА (словарь и правило из маркетплейса) ═══════════ */ .ig-show-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: start; } .ig-show-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; } /* шапка карточки контента */ .ig-show-hero { position: relative; overflow: hidden; padding: 22px; border-radius: var(--ig-radius-lg); background: var(--ig-card); border: 1px solid var(--ig-accent-line); box-shadow: var(--ig-shadow-lift); margin-bottom: 16px; } .ig-show-hero:before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 100% 0%, var(--ig-accent-soft) 0%, transparent 62%); pointer-events: none; } .ig-show-hero > * { position: relative; } .ig-show-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; word-break: break-word; } /* карточка автора */ .ig-author { display: flex; align-items: center; gap: 12px; } .ig-author-name { font-weight: 650; font-size: 1rem; } /* пара «метрика — значение» в боковой панели */ .ig-facts { display: flex; flex-direction: column; gap: 2px; } .ig-fact { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ig-line); font-size: .88rem; } .ig-fact:last-child { border-bottom: none; } .ig-fact .ig-fact-label { color: var(--ig-muted); flex: 1; } .ig-fact b { font-variant-numeric: tabular-nums; } /* превью слов */ .ig-preview-words { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* форки */ .ig-fork { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--ig-line); background: var(--ig-card); } .ig-fork + .ig-fork { margin-top: 8px; } /* ── комментарии ── */ .ig-comment { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ig-line); } .ig-comment:last-child { border-bottom: none; } .ig-comment-body { flex: 1; min-width: 0; } .ig-comment-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .ig-comment-author { font-weight: 600; font-size: .92rem; } .ig-comment-date { font-size: .76rem; color: var(--ig-muted); } .ig-comment-text { font-size: .9rem; line-height: 1.55; color: var(--ig-ink-soft); margin-top: 5px; overflow-wrap: break-word; } /* выбор оценки звёздами */ .ig-stars { display: inline-flex; gap: 3px; } .ig-stars button { border: none; background: none; padding: 0; font-size: 1.35rem; line-height: 1; cursor: pointer; color: var(--ig-line-strong); transition: .12s; } .ig-stars button.on { color: var(--ig-amber); } .ig-stars button:hover { transform: scale(1.12); } .ig-stars-static { display: inline-flex; gap: 2px; font-size: .82rem; color: var(--ig-amber); } @media (max-width: 940px) { .ig-show-cols { grid-template-columns: 1fr; } .ig-show-side { position: static; } } @media (max-width: 700px) { .ig-show-hero { padding: 16px; } .ig-show-title { font-size: 1.3rem; } .ig-preview-words { grid-template-columns: 1fr; } } /* ═══════════ СТРАНИЦА СЛОВАРЯ ═══════════ */ /* плавающая кнопка: на телефоне форма добавления уезжает вверх за экран */ .ig-fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--ig-accent); color: var(--ig-btn-ink); font-size: 1.3rem; display: none; place-items: center; box-shadow: 0 6px 20px rgba(30, 40, 35, .25); cursor: pointer; z-index: 60; } .ig-fab:hover { background: var(--ig-accent-dark); } @media (max-width: 860px) { .ig-fab { display: grid; } } .ig-dict-hero { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-radius: var(--ig-radius-lg); background: var(--ig-card); border: 1px solid var(--ig-accent-line); box-shadow: var(--ig-shadow-lift); margin-bottom: 16px; } .ig-dict-hero:before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 100% 0%, var(--ig-accent-soft) 0%, transparent 62%); pointer-events: none; } .ig-dict-hero > * { position: relative; } .ig-dict-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } /* форма добавления слова */ .ig-add-word { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ig-add-word .full { grid-column: 1 / -1; } .ig-add-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; } /* ── таблица слов (широкий экран) ── */ .ig-words-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .ig-words-table th { text-align: left; padding: 9px 10px; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ig-muted); font-weight: 600; border-bottom: 1px solid var(--ig-line); white-space: nowrap; } .ig-words-table td { padding: 10px; border-bottom: 1px solid var(--ig-line); vertical-align: middle; } .ig-words-table tr:last-child td { border-bottom: none; } .ig-words-table tr.editing td { background: var(--ig-accent-soft); } .ig-words-table tr.sub td { border-bottom: none; padding-top: 0; } .ig-word-main { font-weight: 600; } .ig-word-tr { font-family: Georgia, "Times New Roman", serif; color: var(--ig-muted); font-size: .85rem; } .ig-word-img { width: 46px; height: 36px; border-radius: 6px; object-fit: cover; display: block; } .ig-word-actions { display: flex; gap: 4px; justify-content: flex-end; } /* точки уровня владения словом */ .ig-lvl { display: inline-flex; gap: 2px; vertical-align: middle; } .ig-lvl i { width: 5px; height: 5px; border-radius: 50%; background: var(--ig-line-strong); display: block; } .ig-lvl i.on { background: var(--ig-accent); } /* ── карточки слов (узкий экран) ── */ .ig-word-cards { display: none; flex-direction: column; gap: 10px; } .ig-word-card { padding: 13px; border-radius: var(--ig-radius); border: 1px solid var(--ig-line); background: var(--ig-card); } .ig-word-card.editing { border-color: var(--ig-accent-line); background: var(--ig-accent-soft); } .ig-word-card-top { display: flex; align-items: flex-start; gap: 10px; } .ig-word-card-body { flex: 1; min-width: 0; } .ig-word-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ig-line); } @media (max-width: 860px) { /* таблица с семью колонками на телефон не влезает — показываем карточки */ .ig-words-table-wrap { display: none; } .ig-word-cards { display: flex; } } @media (max-width: 700px) { .ig-dict-hero { padding: 16px; gap: 12px; flex-direction: column; } .ig-add-word { grid-template-columns: 1fr; } .ig-add-toolbar .ig-btn { flex: 1; } } /* ═══════════ ЛИГА ═══════════ */ .ig-league-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: var(--ig-radius-lg); background: var(--ig-card); border: 1px solid var(--ig-accent-line); box-shadow: var(--ig-shadow-lift); margin-bottom: 16px; } .ig-league-hero:before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 0% 0%, var(--ig-accent-soft) 0%, transparent 60%); pointer-events: none; } .ig-league-hero > * { position: relative; } .ig-tier-badge { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 2rem; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); flex-shrink: 0; } /* оттенок по уровню лиги — только рамка и фон значка, палитра остаётся одна */ .ig-tier-silver .ig-tier-badge { border-color: var(--ig-line-strong); } .ig-tier-gold .ig-tier-badge, .ig-tier-legend .ig-tier-badge { background: var(--ig-amber-soft); border-color: var(--ig-amber-line); } .ig-tier-diamond .ig-tier-badge { background: var(--ig-blue-soft); border-color: var(--ig-blue-line); } /* строка таблицы лидеров */ .ig-lb-list { display: flex; flex-direction: column; gap: 4px; } .ig-lb-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 13px 11px 16px; border-radius: 11px; border: 1px solid transparent; background: var(--ig-card); } /* полоска слева показывает зону: повышение, вылет или спокойная середина */ .ig-lb-item:before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; } .ig-lb-item.promo:before { background: var(--ig-accent); } .ig-lb-item.demo:before { background: var(--ig-red); } .ig-lb-item.me { background: var(--ig-accent-soft); border-color: var(--ig-accent-line); } .ig-lb-rank { width: 30px; text-align: center; font-weight: 700; font-size: .9rem; color: var(--ig-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; } .ig-lb-item.me .ig-lb-rank { color: var(--ig-accent-dark); } .ig-lb-info { flex: 1; min-width: 0; } .ig-lb-line { display: flex; align-items: baseline; gap: 8px; } .ig-lb-user { font-weight: 600; font-size: .94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ig-lb-points { margin-left: auto; font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .ig-lb-sub { display: flex; align-items: center; gap: 8px; margin-top: 5px; } .ig-lb-sub .ig-bar { flex: 1; height: 4px; } /* разделители зон */ .ig-zone-line { display: flex; align-items: center; gap: 9px; margin: 8px 2px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--ig-accent-dark); } .ig-zone-line:before, .ig-zone-line:after { content: ""; flex: 1; height: 1px; background: var(--ig-accent-line); } .ig-zone-line.demo { color: var(--ig-red); } .ig-zone-line.demo:before, .ig-zone-line.demo:after { background: var(--ig-red-line); } @media (max-width: 700px) { .ig-league-hero { padding: 16px; gap: 12px; } .ig-tier-badge { width: 52px; height: 52px; font-size: 1.6rem; } .ig-lb-item { padding: 10px 10px 10px 14px; gap: 9px; } .ig-lb-rank { width: 24px; } } /* ═══════════ РАЗБОР ОШИБОК ═══════════ */ .ig-mistake { padding: 18px; margin-bottom: 14px; } .ig-mistake-head { display: flex; align-items: flex-start; gap: 12px; } .ig-mistake-num { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); color: var(--ig-muted); font-size: .78rem; font-weight: 700; flex-shrink: 0; } .ig-mistake-word { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } /* что было введено и что ожидалось — рядом, чтобы разница читалась сразу */ .ig-answers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: .9rem; } .ig-answer-wrong { padding: 3px 10px; border-radius: 8px; background: var(--ig-red-soft); border: 1px solid var(--ig-red-line); color: var(--ig-red); text-decoration: line-through; text-decoration-thickness: 1px; } .ig-answer-right { padding: 3px 10px; border-radius: 8px; background: var(--ig-accent-soft); border: 1px solid var(--ig-accent-line); color: var(--ig-accent-dark); font-weight: 600; } /* блок объяснения от ИИ */ .ig-ai { display: flex; gap: 11px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--ig-line); background: var(--ig-bg-soft); margin-top: 10px; } .ig-ai-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .9rem; flex-shrink: 0; background: var(--ig-card); border: 1px solid var(--ig-line); } .ig-ai-body { flex: 1; min-width: 0; } .ig-ai-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ig-muted); font-weight: 600; margin-bottom: 3px; } .ig-ai-text { font-size: .9rem; line-height: 1.55; color: var(--ig-ink-soft); } .ig-ai-text p:last-child { margin-bottom: 0; } .ig-ai-text code { background: var(--ig-card); border: 1px solid var(--ig-line); border-radius: 5px; padding: 1px 5px; font-size: .86em; } /* акцентные разновидности блоков */ .ig-ai.main { background: var(--ig-blue-soft); border-color: var(--ig-blue-line); } .ig-ai.tip { background: var(--ig-accent-soft); border-color: var(--ig-accent-line); } .ig-ai.memo { background: var(--ig-amber-soft); border-color: var(--ig-amber-line); } .ig-mistake-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ig-line); } @media (max-width: 700px) { .ig-mistake { padding: 14px; } .ig-mistake-word { font-size: 1.05rem; } .ig-mistake-foot .ig-btn { flex: 1; } } /* ═══════════ ГРАММАТИКА: ДЕРЕВО НАВЫКОВ ═══════════ */ .ig-level-head { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; } .ig-level-head .ig-level-emoji { font-size: 1.2rem; } .ig-level-head h2 { flex: 1; min-width: 0; } .ig-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 12px; } .ig-skill { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 12px; border-radius: var(--ig-radius); border: 1px solid var(--ig-line); background: var(--ig-card); cursor: pointer; transition: .14s; color: var(--ig-ink); } .ig-skill:hover { border-color: var(--ig-accent-line); box-shadow: var(--ig-shadow-lift); transform: translateY(-2px); } /* освоено на 4–5: карточка «горит» зелёным */ .ig-skill.mastered { border-color: var(--ig-accent-line); background: var(--ig-accent-soft); } .ig-skill.started { border-color: var(--ig-blue-line); } .ig-skill.locked { opacity: .5; cursor: default; background: var(--ig-bg-soft); } .ig-skill.locked:hover { transform: none; box-shadow: none; border-color: var(--ig-line); } .ig-skill-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); } .ig-skill.mastered .ig-skill-ic { background: var(--ig-card); border-color: var(--ig-accent-line); } .ig-skill-title { font-size: .88rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ig-skill-stars { display: flex; gap: 2px; font-size: .72rem; letter-spacing: 1px; } .ig-star-fill { color: var(--ig-amber); } .ig-star-dim { color: var(--ig-line-strong); } .ig-skill-meta { font-size: .72rem; color: var(--ig-muted); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } /* точка «пора повторить» */ .ig-skill-due { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--ig-amber); box-shadow: 0 0 0 3px var(--ig-amber-soft); } /* баннер повторения */ .ig-due-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--ig-radius); border: 1px solid var(--ig-amber-line); background: var(--ig-amber-soft); cursor: pointer; transition: .14s; margin-bottom: 18px; } .ig-due-banner:hover { box-shadow: var(--ig-shadow-lift); } /* полоса освоения правил */ .ig-rules-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--ig-track); } .ig-rules-bar i { display: block; height: 100%; transition: width .5s ease; } @media (max-width: 700px) { .ig-skills { grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); gap: 10px; } .ig-skill { padding: 13px 9px; } .ig-skill-ic { width: 40px; height: 40px; font-size: 1.15rem; } .ig-due-banner { flex-wrap: wrap; } } /* ═══════════ ГОСТЕВОЙ ЭКРАН ═══════════ */ .ig-landing { max-width: 1000px; margin: 0 auto; } .ig-hero { position: relative; overflow: hidden; text-align: center; padding: 56px 28px 48px; border-radius: var(--ig-radius-lg); background: var(--ig-card); border: 1px solid var(--ig-accent-line); box-shadow: var(--ig-shadow-lift); } .ig-hero:before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, var(--ig-accent-soft) 0%, transparent 62%); pointer-events: none; } .ig-hero > * { position: relative; } .ig-hero-title { font-size: 2.4rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 0; } .ig-hero-title em { font-style: normal; color: var(--ig-accent); } .ig-hero-sub { font-size: 1.05rem; color: var(--ig-ink-soft); max-width: 560px; margin: 14px auto 0; line-height: 1.6; } .ig-hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; } .ig-hero-stats { display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--ig-line); } .ig-hero-stat b { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ig-hero-stat span { font-size: .8rem; color: var(--ig-muted); } /* как это работает */ .ig-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; margin-top: 22px; } .ig-step-card { padding: 20px; border-radius: var(--ig-radius); border: 1px solid var(--ig-line); background: var(--ig-card); } .ig-step-num { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--ig-accent-soft); border: 1px solid var(--ig-accent-line); color: var(--ig-accent-dark); font-weight: 700; font-size: .85rem; margin-bottom: 12px; } .ig-step-card h3 { margin-bottom: 6px; } .ig-step-card p { font-size: .87rem; color: var(--ig-muted); line-height: 1.55; margin: 0; } /* ── рекомендуемый контент ── */ .ig-featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; } .ig-feat { display: flex; flex-direction: column; gap: 9px; padding: 16px; border-radius: var(--ig-radius); border: 1px solid var(--ig-line); background: var(--ig-card); transition: .14s; color: var(--ig-ink); height: 100%; } .ig-feat:hover { border-color: var(--ig-accent-line); box-shadow: var(--ig-shadow-lift); transform: translateY(-2px); color: var(--ig-ink); } .ig-feat-title { font-weight: 650; font-size: .98rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .ig-feat-meta { margin-top: auto; display: flex; gap: 12px; font-size: .78rem; color: var(--ig-muted); flex-wrap: wrap; } @media (max-width: 700px) { .ig-hero { padding: 36px 18px 32px; } .ig-hero-title { font-size: 1.75rem; } .ig-hero-sub { font-size: .95rem; } .ig-hero-cta .ig-btn { width: 100%; } .ig-hero-stats { gap: 20px; margin-top: 26px; } .ig-hero-stat b { font-size: 1.3rem; } .ig-featured { grid-template-columns: 1fr; } } /* ═══════════ СТАТИСТИКА ═══════════ */ .ig-st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } /* вкладки: на телефоне прокручиваются, а не переносятся в три ряда */ .ig-st-tabs { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ig-st-tabs::-webkit-scrollbar { display: none; } .ig-st-tabs .ig-chip { flex-shrink: 0; } /* ── вывод: наблюдение + действие ── */ .ig-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 14px; margin-bottom: 24px; } .ig-insight { display: flex; gap: 13px; padding: 16px; border-radius: var(--ig-radius); border: 1px solid var(--ig-line); background: var(--ig-card); box-shadow: var(--ig-shadow); } .ig-insight.good { border-color: var(--ig-accent-line); background: var(--ig-accent-soft); } .ig-insight.warn { border-color: var(--ig-amber-line); background: var(--ig-amber-soft); } .ig-insight.bad { border-color: var(--ig-red-line); background: var(--ig-red-soft); } .ig-insight-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; background: var(--ig-card); border: 1px solid var(--ig-line); } .ig-insight-body { flex: 1; min-width: 0; } .ig-insight-title { font-weight: 650; font-size: .96rem; line-height: 1.35; } .ig-insight-text { font-size: .85rem; color: var(--ig-ink-soft); margin-top: 4px; line-height: 1.5; } .ig-insight-act { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--ig-accent-dark); cursor: pointer; background: none; border: none; padding: 0; } .ig-insight-act:hover { text-decoration: underline; text-underline-offset: 3px; } /* ── метрики ── */ .ig-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 14px; margin-bottom: 22px; } .ig-metric { padding: 16px; border-radius: var(--ig-radius); border: 1px solid var(--ig-line); background: var(--ig-card); box-shadow: var(--ig-shadow); } .ig-metric-label { font-size: .78rem; color: var(--ig-muted); } .ig-metric-val { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; font-variant-numeric: tabular-nums; line-height: 1.1; } .ig-metric-sub { font-size: .78rem; margin-top: 4px; } .ig-metric-sub.up { color: var(--ig-accent-dark); } .ig-metric-sub.down { color: var(--ig-red); } .ig-metric-sub.flat { color: var(--ig-muted); } /* ── блок с графиком ── */ .ig-chart-card { padding: 20px; border-radius: var(--ig-radius); border: 1px solid var(--ig-line); background: var(--ig-card); box-shadow: var(--ig-shadow); } .ig-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .ig-chart-note { font-size: .8rem; color: var(--ig-muted); margin: 0 0 14px; line-height: 1.5; } /* высота задаётся здесь: Chart.js с maintainAspectRatio:false тянется по контейнеру */ .ig-chart-box { position: relative; height: 220px; } .ig-chart-box.tall { height: 260px; } /* ── таблицы ── */ .ig-st-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ig-st-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 460px; } .ig-st-table th { text-align: left; padding: 9px 10px; font-size: .73rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ig-muted); font-weight: 600; border-bottom: 1px solid var(--ig-line); white-space: nowrap; } .ig-st-table td { padding: 12px 10px; border-bottom: 1px solid var(--ig-line); vertical-align: middle; } .ig-st-table tr:last-child td { border-bottom: none; } .ig-st-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ig-st-name { font-weight: 600; } .ig-st-sub { font-size: .76rem; color: var(--ig-muted); margin-top: 2px; } /* ── цепочки достижений ── */ .ig-chain { padding: 16px; border-radius: var(--ig-radius); border: 1px solid var(--ig-line); background: var(--ig-card); } .ig-chain-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .ig-chain-steps { display: flex; gap: 8px; flex-wrap: wrap; } .ig-step { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.05rem; border: 1px solid var(--ig-line); background: var(--ig-bg-soft); color: var(--ig-ink-soft); } .ig-step.done { background: var(--ig-accent-soft); border-color: var(--ig-accent-line); color: var(--ig-accent-dark); } .ig-step.next { border: 2px dashed var(--ig-accent); background: var(--ig-card); color: var(--ig-accent-dark); font-weight: 700; font-size: .8rem; } .ig-step.locked { opacity: .4; font-size: .8rem; } .ig-chain-progress { font-size: .8rem; color: var(--ig-muted); margin-top: 10px; } /* ── мобильные ── */ @media (max-width: 700px) { .ig-metrics { grid-template-columns: 1fr 1fr; gap: 10px; } .ig-metric { padding: 13px; } .ig-metric-val { font-size: 1.45rem; } .ig-insights { grid-template-columns: 1fr; gap: 10px; } .ig-chart-card { padding: 15px; } .ig-chart-box { height: 190px; } .ig-chart-box.tall { height: 210px; } .ig-st-head { align-items: stretch; flex-direction: column; } .ig-step { width: 38px; height: 38px; } } /* ═══════════ НАСТРОЙКИ ═══════════ */ .ig-set-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 26px; align-items: start; } .ig-set-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; } .ig-set-nav a { padding: 9px 13px; border-radius: 9px; font-size: .92rem; color: var(--ig-ink-soft); font-weight: 500; display: flex; align-items: center; gap: 9px; transition: .12s; } .ig-set-nav a:hover { background: var(--ig-bg-soft); color: var(--ig-ink); } .ig-set-nav a.active { background: var(--ig-accent-soft); color: var(--ig-accent-dark); font-weight: 600; } .ig-set-group { margin-bottom: 18px; scroll-margin-top: 20px; } .ig-set-group h2 { margin-bottom: 2px; } .ig-set-group .ig-set-hint { font-size: .85rem; color: var(--ig-muted); margin: 0 0 14px; } /* строка настройки: слева смысл, справа управление */ .ig-set-row { display: flex; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--ig-line); } .ig-set-row:last-child { border-bottom: none; padding-bottom: 0; } .ig-set-row:first-child { padding-top: 0; } .ig-set-row.stacked { flex-direction: column; align-items: stretch; gap: 12px; } .ig-set-label { flex: 1; min-width: 0; } .ig-set-label b { font-weight: 600; font-size: .96rem; display: block; } /* Подпись — не описание кнопки, а следствие выбора */ .ig-set-label span { font-size: .82rem; color: var(--ig-muted); display: block; margin-top: 2px; } .ig-set-value { flex-shrink: 0; display: flex; align-items: center; gap: 10px; } /* переключатель */ .ig-switch { width: 46px; height: 27px; border-radius: 99px; background: var(--ig-switch-off); position: relative; flex-shrink: 0; transition: .16s; cursor: pointer; border: none; padding: 0; } .ig-switch:after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: .16s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .ig-switch.on { background: var(--ig-accent); } .ig-switch.on:after { left: 22px; } /* Сегментированный переключатель. Имя намеренно не .ig-seg: так называется полоса прогресса словаря, и одинаковые селекторы перебивали друг друга. */ .ig-segmented { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); gap: 2px; flex-wrap: wrap; } .ig-segmented button { padding: 6px 13px; border-radius: 8px; font-size: .86rem; font-weight: 500; color: var(--ig-ink-soft); border: none; background: transparent; cursor: pointer; white-space: nowrap; } .ig-segmented button.active { background: var(--ig-card); color: var(--ig-ink); font-weight: 600; box-shadow: var(--ig-shadow); } /* пресеты дневной цели */ .ig-goal-picker { display: flex; gap: 8px; flex-wrap: wrap; } .ig-goal-opt { padding: 11px 15px; border-radius: 11px; border: 1px solid var(--ig-line-strong); background: var(--ig-card); text-align: center; min-width: 92px; cursor: pointer; transition: .12s; } .ig-goal-opt:hover { border-color: var(--ig-accent); } .ig-goal-opt.active { border-color: var(--ig-accent); background: var(--ig-accent-soft); } .ig-goal-opt b { display: block; font-size: 1.05rem; font-weight: 700; } .ig-goal-opt span { font-size: .75rem; color: var(--ig-muted); } /* ползунок */ .ig-range { display: flex; align-items: center; gap: 10px; min-width: 210px; } .ig-range input[type=range] { flex: 1; accent-color: var(--ig-accent); } .ig-range .ig-range-val { min-width: 40px; text-align: right; font-size: .84rem; color: var(--ig-muted); font-variant-numeric: tabular-nums; } /* поле ввода в настройках */ .ig-input { padding: 10px 13px; border-radius: 10px; border: 1px solid var(--ig-line-strong); background: var(--ig-card); font: inherit; font-size: .92rem; color: var(--ig-ink); outline: none; width: 100%; } .ig-input:focus { border-color: var(--ig-accent); box-shadow: 0 0 0 3px var(--ig-accent-soft); } textarea.ig-input { resize: vertical; min-height: 92px; line-height: 1.5; } .ig-danger { color: var(--ig-red); } @media (max-width: 940px) { .ig-set-layout { grid-template-columns: 1fr; } .ig-set-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; } .ig-set-nav a { white-space: nowrap; } } @media (max-width: 700px) { .ig-set-row { flex-direction: column; align-items: flex-start; gap: 10px; } .ig-set-value { width: 100%; } } /* ═══════════ СЕССИЯ: ОБЩИЙ КАРКАС ═══════════ */ .ig-sess { max-width: 680px; margin: 0 auto; } .ig-sess-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .ig-sess-top .ig-bar { flex: 1; } .ig-combo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--ig-accent-soft); border: 1px solid var(--ig-accent-line); color: var(--ig-accent-dark); font-weight: 700; font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .ig-combo.danger { background: var(--ig-red-soft); border-color: var(--ig-red-line); color: var(--ig-red); } .ig-sess-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--ig-muted); margin-bottom: 18px; flex-wrap: wrap; } /* индикатор мастерства слова в шапке */ .ig-star-on, .ig-star-off { font-size: .5rem; margin-right: 2px; vertical-align: middle; } .ig-star-on { color: var(--ig-accent); } .ig-star-off { color: var(--ig-line-strong); } .ig-sess-mode { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); font-weight: 600; color: var(--ig-ink-soft); } /* Карточка вопроса. Рамка намеренно контрастнее обычной: карточка белая, и на белом фоне страницы тонкая линия исчезает — слова «висят в воздухе». */ .ig-q { background: var(--ig-card); border: 1px solid var(--ig-line-strong); border-radius: var(--ig-radius-lg); padding: 30px 28px; box-shadow: 0 2px 4px rgba(30, 40, 35, .04), var(--ig-shadow-lift); text-align: center; /* @key на элементе пересоздаёт его при смене слова — анимация проигрывается заново */ animation: ig-card-in .3s cubic-bezier(.2, .7, .3, 1) both; } @keyframes ig-card-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } } .ig-q-src { font-size: .78rem; color: var(--ig-muted); margin-bottom: 14px; } .ig-q-word { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; word-break: break-word; } .ig-q-pos { display: inline-block; margin-top: 6px; font-size: .72rem; padding: 2px 9px; border-radius: 999px; background: var(--ig-violet-soft); border: 1px solid var(--ig-violet-line); color: var(--ig-violet); } .ig-q-tr { font-size: .85rem; color: var(--ig-muted); margin-top: 5px; } .ig-q-prompt { font-size: 1.05rem; color: var(--ig-ink-soft); margin-bottom: 4px; } .ig-q-img { max-width: 190px; max-height: 140px; border-radius: 12px; margin: 14px auto 0; display: block; object-fit: cover; } /* единая панель инструментов — одинакова во всех режимах */ .ig-tools { display: flex; justify-content: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; } .ig-tool { min-width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--ig-line); background: var(--ig-card); color: var(--ig-ink-soft); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: .95rem; transition: .12s; cursor: pointer; padding: 0; } .ig-tool:hover:not(:disabled) { border-color: var(--ig-accent); color: var(--ig-accent); background: var(--ig-accent-soft); } .ig-tool:disabled { opacity: .32; cursor: default; } .ig-tool.wide { padding: 0 14px; font-size: .85rem; font-weight: 600; } .ig-tool.on { border-color: var(--ig-accent-line); background: var(--ig-accent-soft); color: var(--ig-accent-dark); } .ig-tool-label { text-align: center; font-size: .72rem; color: var(--ig-muted); margin-top: 8px; } .ig-sess-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: .8rem; color: var(--ig-muted); gap: 12px; flex-wrap: wrap; } .ig-kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--ig-line-strong); background: var(--ig-bg-soft); font-size: .72rem; color: var(--ig-ink-soft); } /* ── варианты ответа ── */ .ig-opts { display: grid; gap: 10px; margin-top: 24px; text-align: left; } .ig-opt { padding: 14px 17px; border: 1px solid var(--ig-line-strong); border-radius: 12px; background: var(--ig-card); color: var(--ig-ink); font-size: 1rem; font-weight: 500; display: flex; align-items: center; gap: 12px; transition: .12s; width: 100%; text-align: left; cursor: pointer; } .ig-opt:hover:not(:disabled) { border-color: var(--ig-accent); background: var(--ig-accent-soft); } .ig-opt .ig-key { width: 24px; height: 24px; border-radius: 6px; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); display: grid; place-items: center; font-size: .72rem; color: var(--ig-muted); font-weight: 700; flex-shrink: 0; } .ig-opt.ok { border-color: var(--ig-accent); background: var(--ig-accent-soft); animation: ig-opt-ok .4s ease both; } @keyframes ig-opt-ok { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } } .ig-opt.ok .ig-key { background: var(--ig-accent); border-color: var(--ig-accent); color: var(--ig-btn-ink); } .ig-opt.no { border-color: var(--ig-red-line); background: var(--ig-red-soft); animation: ig-shake .32s ease both; } .ig-opt.no .ig-key { background: var(--ig-red); border-color: var(--ig-red); color: #fff; } .ig-opt.dim { opacity: .45; } /* ── поле ввода ── */ .ig-field { display: flex; gap: 10px; margin-top: 24px; } .ig-field input { flex: 1; min-width: 0; padding: 15px 18px; border-radius: 12px; border: 1px solid var(--ig-line-strong); background: var(--ig-card); font: inherit; font-size: 1.05rem; color: var(--ig-ink); outline: none; } .ig-field input:focus { border-color: var(--ig-accent); box-shadow: 0 0 0 3px var(--ig-accent-soft); } .ig-field input.ok { border-color: var(--ig-accent); background: var(--ig-accent-soft); } .ig-field input.no { border-color: var(--ig-red-line); background: var(--ig-red-soft); } /* сравнение ответа: две строки — что ввели и как правильно. Одной строкой смысл теряется: пропущенные буквы некуда поставить. */ .ig-diff { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; } .ig-diff-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 13px; border-radius: 11px; border: 1px solid var(--ig-line); background: var(--ig-bg-soft); } .ig-diff-label { font-size: .74rem; font-weight: 600; color: var(--ig-muted); text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; min-width: 54px; } .ig-diff-text { font-size: 1.05rem; line-height: 1.5; word-break: break-word; } .ig-diff-seg { border-radius: 4px; padding: 1px 0; } /* лишнее или неверное в вводе пользователя */ .ig-diff-seg.bad { background: var(--ig-red-soft); color: var(--ig-red); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ig-red); padding: 1px 2px; } /* то, что должно было стоять на этом месте */ .ig-diff-seg.fix { background: var(--ig-accent-soft); color: var(--ig-accent-dark); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ig-accent); padding: 1px 2px; } .ig-diff-row.correct { border-color: var(--ig-accent-line); background: var(--ig-accent-soft); } .ig-diff-row.correct .ig-diff-seg.fix { background: transparent; } /* ── разбор ответа ── */ .ig-verdict { margin-top: 22px; padding: 18px; border-radius: 14px; text-align: left; border: 1px solid var(--ig-accent-line); background: var(--ig-accent-soft); animation: ig-verdict-in .26s cubic-bezier(.2, .7, .3, 1) both; } @keyframes ig-verdict-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .ig-verdict-head .ig-mark { animation: ig-mark-pop .34s cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes ig-mark-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ig-verdict.bad { border-color: var(--ig-red-line); background: var(--ig-red-soft); } .ig-verdict-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; } .ig-verdict-head .ig-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ig-accent); color: var(--ig-btn-ink); font-size: .8rem; flex-shrink: 0; } .ig-verdict.bad .ig-verdict-head .ig-mark { background: var(--ig-red); color: #fff; } .ig-verdict-row { margin-top: 10px; font-size: .9rem; color: var(--ig-ink-soft); line-height: 1.5; } .ig-verdict-row b { color: var(--ig-ink); } .ig-next-in { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 11px; border-radius: 9px; background: var(--ig-card); border: 1px solid var(--ig-line); font-size: .8rem; color: var(--ig-muted); } /* ── самооценка с интервалами ── */ .ig-rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; } .ig-rate button { padding: 15px 8px; border-radius: 12px; border: 1px solid var(--ig-line-strong); background: var(--ig-card); display: flex; flex-direction: column; align-items: center; gap: 3px; transition: .12s; cursor: pointer; } .ig-rate button:hover { transform: translateY(-2px); box-shadow: var(--ig-shadow); } .ig-r-name { font-weight: 650; font-size: .9rem; } .ig-r-when { font-size: .72rem; color: var(--ig-muted); font-variant-numeric: tabular-nums; } .ig-r-key { font-size: .65rem; color: var(--ig-muted); opacity: .7; } .ig-rate .r1:hover { border-color: var(--ig-red); background: var(--ig-red-soft); } .ig-rate .r1 .ig-r-name { color: var(--ig-red); } .ig-rate .r2:hover { border-color: var(--ig-amber); background: var(--ig-amber-soft); } .ig-rate .r2 .ig-r-name { color: var(--ig-amber); } .ig-rate .r3:hover { border-color: var(--ig-accent); background: var(--ig-accent-soft); } .ig-rate .r3 .ig-r-name { color: var(--ig-accent-dark); } .ig-rate .r4:hover { border-color: var(--ig-blue); background: var(--ig-blue-soft); } .ig-rate .r4 .ig-r-name { color: var(--ig-blue); } /* ── аудирование ── */ .ig-audio-hero { position: relative; width: 92px; height: 92px; border-radius: 50%; margin: 6px auto 0; display: grid; place-items: center; background: var(--ig-accent-soft); border: 1px solid var(--ig-accent-line); color: var(--ig-accent-dark); font-size: 2rem; transition: .15s; cursor: pointer; } .ig-audio-hero:hover { transform: scale(1.04); } .ig-audio-hero:active { transform: scale(.96); } /* тихая пульсация — подсказывает, что кнопку можно нажать ещё раз */ .ig-audio-hero:before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--ig-accent-line); animation: ig-pulse-ring 2.6s ease-out infinite; } @keyframes ig-pulse-ring { 0% { opacity: .7; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.12); } } .ig-audio-speed { display: flex; justify-content: center; gap: 6px; margin-top: 14px; } .ig-speed { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ig-line); background: var(--ig-card); font-size: .8rem; color: var(--ig-ink-soft); font-weight: 500; cursor: pointer; } .ig-speed.active { background: var(--ig-accent-soft); border-color: var(--ig-accent-line); color: var(--ig-accent-dark); font-weight: 600; } /* ── пары ── */ .ig-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; } .ig-pair { padding: 13px 15px; border: 1px solid var(--ig-line-strong); border-radius: 11px; background: var(--ig-card); color: var(--ig-ink); font-size: .95rem; font-weight: 500; text-align: left; transition: .12s; cursor: pointer; } .ig-pair:hover:not(:disabled) { border-color: var(--ig-accent); background: var(--ig-accent-soft); } .ig-pair.picked { border-color: var(--ig-accent); background: var(--ig-accent-soft); font-weight: 600; } .ig-pair.done { opacity: .45; border-style: dashed; cursor: default; } .ig-pair.wrong { border-color: var(--ig-red); background: var(--ig-red-soft); animation: ig-shake .3s; } @keyframes ig-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .ig-pairs-progress { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--ig-muted); margin-top: 16px; } /* ── пропуск в предложении ── */ .ig-cloze { font-size: 1.25rem; line-height: 1.8; color: var(--ig-ink); text-align: left; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); border-radius: 12px; padding: 18px 20px; } .ig-gap { display: inline-block; min-width: 110px; border-bottom: 2px dashed var(--ig-accent); text-align: center; font-weight: 700; color: var(--ig-accent-dark); padding: 0 6px; } .ig-gap.filled { border-bottom-style: solid; } .ig-gap.bad { border-color: var(--ig-red); color: var(--ig-red); } /* ── сборка предложения из слов ── */ .ig-wo-bank { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } .ig-wo-line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-height: 58px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--ig-line-strong); background: var(--ig-bg-soft); } .ig-word-chip { padding: 9px 13px; border-radius: 10px; border: 1px solid var(--ig-line-strong); background: var(--ig-card); color: var(--ig-ink); font-size: .95rem; font-weight: 500; cursor: pointer; transition: .12s; display: inline-flex; align-items: center; gap: 6px; } .ig-word-chip:hover:not(:disabled) { border-color: var(--ig-accent); background: var(--ig-accent-soft); } .ig-word-chip.placed { border-color: var(--ig-accent-line); background: var(--ig-accent-soft); } .ig-word-chip.ok { border-color: var(--ig-accent); background: var(--ig-accent-soft); color: var(--ig-accent-dark); } .ig-word-chip.no { border-color: var(--ig-red-line); background: var(--ig-red-soft); color: var(--ig-red); } .ig-word-pos { font-size: .68rem; opacity: .6; font-variant-numeric: tabular-nums; } /* ── сопоставление половин ── */ .ig-match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .ig-match-col { display: flex; flex-direction: column; gap: 8px; } .ig-match-head { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ig-muted); font-weight: 600; margin-bottom: 2px; } @media (max-width: 700px) { .ig-match { gap: 8px; } .ig-wo-line { min-height: 48px; padding: 10px; } } /* ── Spelling Bee ── */ /* ячейки и есть поле ввода: настоящий input лежит поверх прозрачным слоем */ .ig-bee-wrap { position: relative; display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; } .ig-bee-word { display: inline-flex; gap: 7px; } .ig-bee-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; background: transparent; font-size: 16px; /* меньше 16px — iOS зумит страницу при фокусе */ cursor: text; z-index: 2; } .ig-bee { display: flex; justify-content: center; gap: 7px; margin-top: 22px; flex-wrap: wrap; } .ig-bee-cell { width: 42px; height: 52px; border-radius: 10px; border: 1px solid var(--ig-line-strong); background: var(--ig-card); display: grid; place-items: center; font-size: 1.35rem; font-weight: 700; color: var(--ig-ink); } .ig-bee-cell.filled { border-color: var(--ig-accent); background: var(--ig-accent-soft); color: var(--ig-accent-dark); animation: ig-cell-pop .16s ease-out both; } @keyframes ig-cell-pop { from { transform: scale(.86); } to { transform: scale(1); } } .ig-bee-cell.hinted { border-style: dashed; color: var(--ig-muted); } .ig-bee-cell.err { border-color: var(--ig-red); background: var(--ig-red-soft); color: var(--ig-red); } /* активная ячейка — курсор набора */ .ig-bee-cell.cursor { border-color: var(--ig-accent); box-shadow: 0 0 0 3px var(--ig-accent-soft); } .ig-bee-cell.cursor:after { content: ""; width: 2px; height: 24px; background: var(--ig-accent); border-radius: 2px; animation: ig-caret 1.05s step-end infinite; } @keyframes ig-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @media (max-width: 700px) { .ig-q { padding: 22px 16px; } .ig-q-word { font-size: 1.7rem; } .ig-rate { grid-template-columns: 1fr 1fr; } .ig-pair { padding: 11px 12px; font-size: .88rem; } .ig-bee-cell { width: 34px; height: 44px; font-size: 1.1rem; } .ig-diff span { min-width: 26px; height: 34px; font-size: .95rem; } } /* ═══════════ ИТОГИ СЕССИИ ═══════════ */ .ig-res { max-width: 660px; margin: 0 auto; padding: 8px 0 40px; } .ig-res-hero { text-align: center; padding: 30px 26px; background: var(--ig-card); border: 1px solid var(--ig-accent-line); border-radius: var(--ig-radius-lg); box-shadow: var(--ig-shadow-lift); } .ig-res-icon { font-size: 2.6rem; line-height: 1; } .ig-res-hero h1 { margin: 8px 0 4px; font-size: 1.55rem; } .ig-res-sub { color: var(--ig-muted); font-size: .9rem; margin: 0; } .ig-res-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 4px; } .ig-res-stat { padding: 14px 10px; border-radius: 12px; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); } .ig-res-stat b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ig-res-stat span { font-size: .78rem; color: var(--ig-muted); } /* строка-крючок: что случилось благодаря этой сессии */ .ig-res-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ig-line); background: var(--ig-card); text-align: left; margin-top: 10px; } .ig-res-row-body { flex: 1; min-width: 0; } .ig-res-row-title { font-size: .92rem; font-weight: 600; } .ig-res-row-meta { font-size: .78rem; color: var(--ig-muted); margin-top: 1px; } .ig-res-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; } .ig-res-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } /* детали сессии — второстепенный блок */ .ig-res-details { margin-top: 16px; } .ig-res-chips { display: flex; gap: 7px; flex-wrap: wrap; } .ig-res-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 9px; background: var(--ig-bg-soft); border: 1px solid var(--ig-line); font-size: .84rem; } .ig-res-chip.up { background: var(--ig-accent-soft); border-color: var(--ig-accent-line); color: var(--ig-accent-dark); } .ig-res-chip.miss { background: var(--ig-red-soft); border-color: var(--ig-red-line); color: var(--ig-red); } .ig-res-chip .ig-res-chip-tr { color: var(--ig-muted); } @media (max-width: 700px) { .ig-res-stats { grid-template-columns: 1fr 1fr; } .ig-res-hero { padding: 24px 16px; } .ig-res-actions .ig-btn { flex: 1; } } /* ── скелетон загрузки ── */ .ig-skel { border-radius: var(--ig-radius); background: var(--ig-track); animation: ig-pulse 1.4s ease-in-out infinite; } @keyframes ig-pulse { 0%, 100% { opacity: .55; } 50% { opacity: .9; } } /* ── адаптив ── */ @media (max-width: 1000px) { .ig-cols { grid-template-columns: 1fr; } .ig-side { position: static; } } @media (max-width: 700px) { .ig-page { padding: 16px 14px 56px; } .ig-grid2 { grid-template-columns: 1fr; } .ig-today h1 { font-size: 1.4rem; } .ig-warmup-opts { grid-template-columns: 1fr; } /* на телефоне клетки мельче — уменьшаем зазор, иначе он съедает половину ширины */ .ig-heat { gap: 2px; } .ig-heat-legend { font-size: .7rem; } } @media (prefers-reduced-motion: reduce) { .ig-root * { transition: none !important; animation: none !important; } } /* ═══════════════════════════════════════════════════════════════ Книжный режим: библиотека (/book-reader) и обвязка читалки Полотно текста намеренно НЕ описано здесь — у него собственные темы чтения (светлая/sepia/тёмная) в BookReaderPage.razor.css. ═══════════════════════════════════════════════════════════════ */ /* ── Карточка «продолжить чтение» ─────────────────────────────── */ .ig-book-hero { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; padding: 18px; border-radius: var(--ig-radius-lg); border: 1px solid var(--ig-accent-line); background: var(--ig-accent-soft); margin-bottom: 22px; } .ig-book-hero .ig-book-cover { margin: 0; } .ig-book-hero-body { min-width: 0; } .ig-book-hero-body h2 { font-size: 1.15rem; line-height: 1.3; margin: 2px 0 6px; overflow-wrap: anywhere; } /* ── Полка ────────────────────────────────────────────────────── */ .ig-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); gap: 16px; } .ig-book { display: flex; flex-direction: column; min-width: 0; background: var(--ig-card); border: 1px solid var(--ig-line); border-radius: var(--ig-radius); padding: 14px; transition: transform .14s, box-shadow .14s, border-color .14s; } .ig-book:hover { transform: translateY(-2px); box-shadow: var(--ig-shadow-lift); border-color: var(--ig-line-strong); } /* Обложка: корешок книги, цвет — из хеша названия (см. CoverClass) */ .ig-book-cover { position: relative; aspect-ratio: 3 / 4; max-height: 190px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; margin-bottom: 12px; overflow: hidden; /* корешок слева — узкая тёмная полоса, как у настоящей книги */ box-shadow: inset 9px 0 0 -6px rgba(0, 0, 0, .22); background: var(--ig-bg-soft); color: var(--ig-ink-soft); } .ig-cover-1 { background: linear-gradient(150deg, #DCE9E2, #B8D5C7); color: #1E6E54; } .ig-cover-2 { background: linear-gradient(150deg, #E7EEF6, #C4D8EA); color: #2B5D8A; } .ig-cover-3 { background: linear-gradient(150deg, #F6EAE0, #EBD3BC); color: #B45309; } .ig-cover-4 { background: linear-gradient(150deg, #EFE9F6, #D8CBEB); color: #6B4E8F; } .ig-cover-5 { background: linear-gradient(150deg, #F6E7E5, #EBC9C4); color: #B3423A; } [data-theme="dark"] .ig-cover-1 { background: linear-gradient(150deg, #24382F, #1B2A24); color: #63C099; } [data-theme="dark"] .ig-cover-2 { background: linear-gradient(150deg, #22303C, #1A252E); color: #83AED4; } [data-theme="dark"] .ig-cover-3 { background: linear-gradient(150deg, #3A3120, #2A2418); color: #E0A64E; } [data-theme="dark"] .ig-cover-4 { background: linear-gradient(150deg, #2A2436, #201C29); color: #B79BDA; } [data-theme="dark"] .ig-cover-5 { background: linear-gradient(150deg, #3A2523, #2A1B1A); color: #E07A70; } .ig-book-lang { position: absolute; top: 7px; right: 7px; padding: 2px 7px; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .02em; background: rgba(255, 255, 255, .82); color: #22262B; } [data-theme="dark"] .ig-book-lang { background: rgba(0, 0, 0, .45); color: #EBEAE3; } .ig-book-title { font-size: .95rem; font-weight: 650; line-height: 1.32; margin-bottom: 5px; overflow-wrap: anywhere; /* две строки — иначе карточки в ряду разъезжаются по высоте */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; } .ig-book-meta { font-size: .76rem; color: var(--ig-muted); line-height: 1.5; margin-bottom: 10px; } .ig-book-stat { display: flex; justify-content: space-between; gap: 8px; font-size: .73rem; color: var(--ig-muted); margin-bottom: 4px; } .ig-book-acts { display: flex; gap: 7px; margin-top: auto; padding-top: 12px; } .ig-book-acts .ig-btn { flex: 1; } /* квадратная кнопка под одну иконку — не растягивается в flex-ряду */ .ig-btn-icon { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; } .ig-btn-icon.ig-btn-sm { width: 31px; height: 31px; } .ig-btn-danger { border-color: var(--ig-red-line); color: var(--ig-red); background: var(--ig-card); } .ig-btn-danger:hover { background: var(--ig-red-soft); border-color: var(--ig-red); color: var(--ig-red); } /* ── Строка публичной библиотеки ──────────────────────────────── */ .ig-lib-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ig-line); } .ig-lib-row:last-child { border-bottom: none; } .ig-lib-info { flex: 1; min-width: 0; } .ig-lib-info b { display: block; font-size: .9rem; font-weight: 650; overflow-wrap: anywhere; } /* ── Зона загрузки файла ──────────────────────────────────────── */ .ig-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 26px 16px; border: 1.5px dashed var(--ig-line-strong); border-radius: var(--ig-radius); background: var(--ig-bg-soft); transition: border-color .15s, background .15s; } .ig-drop:hover { border-color: var(--ig-accent); } .ig-drop.filled { border-style: solid; border-color: var(--ig-accent-line); background: var(--ig-accent-soft); } .ig-drop-ic { font-size: 1.7rem; color: var(--ig-muted); line-height: 1; margin-bottom: 4px; } .ig-drop.filled .ig-drop-ic { color: var(--ig-accent); } .ig-drop-name { font-weight: 650; font-size: .9rem; overflow-wrap: anywhere; } /* input лежит поверх всей зоны — кликабельна вся площадь, а не только кнопка */ .ig-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* ═══ Обвязка читалки ═════════════════════════════════════════ */ .ig-brp { display: flex; flex-direction: column; min-height: 100vh; background: var(--ig-bg); color: var(--ig-ink); } /* ── Верхняя панель ───────────────────────────────────────────── */ .ig-brp-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--ig-card); border-bottom: 1px solid var(--ig-line); } .ig-brp-name { flex: 1; min-width: 0; font-size: .93rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ig-brp-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .ig-brp-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--ig-ink-soft); font-size: .95rem; cursor: pointer; transition: background .13s, color .13s, border-color .13s; } .ig-brp-ic:hover:not(:disabled) { background: var(--ig-bg-soft); color: var(--ig-ink); } .ig-brp-ic.on { background: var(--ig-accent-soft); border-color: var(--ig-accent-line); color: var(--ig-accent); } .ig-brp-ic:disabled { opacity: .45; cursor: not-allowed; } /* счётчик закладок/заметок поверх иконки */ .ig-brp-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--ig-accent); color: var(--ig-btn-ink); font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center; } .ig-brp-aa { font-weight: 700; font-size: .84rem; letter-spacing: -.02em; } /* ── Выпадающее меню редких действий ──────────────────────────── */ .ig-brp-wrap { position: relative; } .ig-brp-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 60; min-width: 218px; padding: 6px; background: var(--ig-card); border: 1px solid var(--ig-line); border-radius: var(--ig-radius); box-shadow: var(--ig-shadow-lift); } .ig-brp-mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; border-radius: 9px; background: none; color: var(--ig-ink); font: inherit; font-size: .87rem; text-align: left; cursor: pointer; transition: background .13s; } .ig-brp-mi:hover:not(:disabled) { background: var(--ig-bg-soft); } .ig-brp-mi:disabled { opacity: .45; cursor: not-allowed; } .ig-brp-mi i { width: 17px; text-align: center; color: var(--ig-muted); flex: 0 0 auto; } .ig-brp-mi.on i, .ig-brp-mi.on { color: var(--ig-accent); } .ig-brp-mi-tag { margin-left: auto; font-size: .72rem; color: var(--ig-muted); } .ig-brp-msep { height: 1px; margin: 5px 8px; background: var(--ig-line); } /* ── Полоса прогресса по книге ────────────────────────────────── */ .ig-brp-prog { height: 3px; background: var(--ig-track); } .ig-brp-prog i { display: block; height: 100%; background: var(--ig-accent); transition: width .25s; } /* ── Легенда слов ─────────────────────────────────────────────── */ .ig-brp-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; max-width: 1100px; width: 100%; margin: 12px auto 0; padding: 0 16px; font-size: .75rem; color: var(--ig-muted); } .ig-brp-lg { display: inline-flex; align-items: center; gap: 6px; } .ig-brp-dot { width: 22px; height: 0; border-bottom: 1px solid var(--ig-muted); } .ig-brp-dot.learn { border-bottom-style: dotted; border-bottom-color: var(--ig-amber); } .ig-brp-dot.neww { border-bottom-style: dashed; border-bottom-color: var(--ig-blue); } .ig-brp-dot.known { border-bottom-color: transparent; } /* ── Панель настроек чтения ───────────────────────────────────── */ /* fixed, а не absolute: шапка липкая, и панель должна оставаться под кнопкой «Aa» при прокрутке, а не уезжать вверх вместе с текстом. */ .ig-brp-panel { position: fixed; top: 54px; right: 12px; z-index: 55; width: min(320px, calc(100vw - 24px)); padding: 14px; background: var(--ig-card); border: 1px solid var(--ig-line); border-radius: var(--ig-radius); box-shadow: var(--ig-shadow-lift); } .ig-brp-prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; } .ig-brp-prow + .ig-brp-prow { border-top: 1px solid var(--ig-line); } .ig-brp-plabel { font-size: .82rem; color: var(--ig-ink-soft); flex-shrink: 0; } .ig-brp-pctl { display: flex; align-items: center; gap: 6px; } .ig-brp-step { width: 30px; height: 28px; border-radius: 8px; border: 1px solid var(--ig-line-strong); background: var(--ig-card); color: var(--ig-ink); font-size: .8rem; font-weight: 650; cursor: pointer; } .ig-brp-step:hover:not(:disabled) { background: var(--ig-bg-soft); } .ig-brp-step:disabled { opacity: .35; cursor: not-allowed; } .ig-brp-val { min-width: 54px; text-align: center; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--ig-muted); } /* сегменты «Serif / Sans / Mono» и тем чтения */ .ig-brp-segs { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .ig-brp-seg { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--ig-line-strong); background: var(--ig-card); color: var(--ig-ink-soft); font: inherit; font-size: .76rem; cursor: pointer; transition: background .13s, color .13s, border-color .13s; } .ig-brp-seg:hover { background: var(--ig-bg-soft); } .ig-brp-seg.on { background: var(--ig-accent); border-color: var(--ig-accent); color: var(--ig-btn-ink); } /* ── Навигация по страницам ───────────────────────────────────── */ .ig-brp-nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px 16px 30px; } .ig-brp-page { font-size: .84rem; color: var(--ig-muted); font-variant-numeric: tabular-nums; min-width: 72px; text-align: center; } .ig-brp-page b { color: var(--ig-ink); font-size: 1rem; } /* ── Попап слова ──────────────────────────────────────────────── */ /* Fixed, а не в потоке: слово кликают в любом месте длинной страницы, и перевод должен появляться в поле зрения, а не в конце документа. */ .ig-brp-pop { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 1010; width: min(460px, calc(100vw - 28px)); max-height: 62vh; overflow-y: auto; padding: 14px; background: var(--ig-card); border: 1px solid var(--ig-line-strong); border-radius: var(--ig-radius); box-shadow: var(--ig-shadow-lift); animation: ig-pop-in .16s ease-out; } /* Анимируем только прозрачность: transform занят центрированием (translateX(-50%)) — сдвиг в кейфрейме сбил бы позицию попапа. */ @keyframes ig-pop-in { from { opacity: 0; } } .ig-brp-pop-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .ig-brp-pop-word { font-size: 1.12rem; font-weight: 700; overflow-wrap: anywhere; } .ig-brp-ipa { font-size: .82rem; color: var(--ig-muted); font-family: "Segoe UI", system-ui, sans-serif; } .ig-brp-tr { padding: 9px 11px; border-radius: 10px; background: var(--ig-bg-soft); font-size: .92rem; line-height: 1.45; margin-bottom: 8px; overflow-wrap: anywhere; } .ig-brp-tr.ai { background: var(--ig-violet-soft); border: 1px solid var(--ig-violet-line); } .ig-brp-tr-alt { font-size: .8rem; color: var(--ig-muted); margin-top: 3px; } .ig-brp-pop-btns { display: flex; flex-wrap: wrap; gap: 7px; } /* ── Список словарей в модалке тренировки ─────────────────────── */ .ig-pick { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 13px; border: 1px solid var(--ig-line); border-radius: 11px; background: var(--ig-card); color: var(--ig-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .13s, background .13s; } .ig-pick:hover { border-color: var(--ig-accent-line); background: var(--ig-accent-soft); } .ig-pick + .ig-pick { margin-top: 7px; } .ig-pick-name { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; } @media (max-width: 640px) { .ig-book-hero { grid-template-columns: 74px 1fr; gap: 13px; padding: 14px; } .ig-shelf { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 12px; } .ig-book { padding: 11px; } .ig-book-cover { font-size: 1.6rem; margin-bottom: 9px; } .ig-brp-bar { padding: 8px 10px; gap: 5px; } .ig-brp-tools { gap: 3px; } .ig-brp-legend { padding: 0 12px; gap: 5px 10px; font-size: .7rem; } .ig-brp-panel { top: 50px; right: 8px; left: 8px; width: auto; } /* Листание прилипает к низу экрана: иначе до кнопок «Назад / Далее» на телефоне нужно домотать всю страницу текста. Отступ снизу — под фиксированную нижнюю навигацию сайта (≈58px). */ .ig-brp-nav { position: sticky; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 25; gap: 10px; padding: 9px 12px; background: var(--ig-card); border-top: 1px solid var(--ig-line); box-shadow: 0 -2px 10px rgba(0, 0, 0, .07); } .ig-brp-nav .ig-btn { flex: 1; } /* На телефоне — нижний лист во всю ширину, но выше липкого листания (≈50px) и нижней навигации сайта (≈58px), иначе перекроет кнопки. */ .ig-brp-pop { left: 0; right: 0; width: auto; transform: none; bottom: calc(108px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .2); max-height: 56vh; } } /* Второстепенная информация в узкой шапке: прячем раньше, чем ломается вёрстка */ @media (max-width: 900px) { .ig-hide-sm { display: none !important; } } /* ── Списки внутри модалок читалки ────────────────────────────── */ /* строка «перейти к странице»: закладка, пункт оглавления, находка */ .ig-jump { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--ig-line); border-radius: 11px; background: var(--ig-card); color: var(--ig-ink); font: inherit; font-size: .87rem; text-align: left; cursor: pointer; transition: border-color .13s, background .13s; } .ig-jump:hover { border-color: var(--ig-accent-line); background: var(--ig-accent-soft); } .ig-jump + .ig-jump { margin-top: 6px; } .ig-jump.here { border-color: var(--ig-accent); background: var(--ig-accent-soft); } .ig-jump-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; } .ig-jump-pg { flex: 0 0 auto; font-size: .75rem; color: var(--ig-muted); font-variant-numeric: tabular-nums; } /* находка поиска: страница сверху, отрывок снизу */ .ig-hit { display: block; line-height: 1.5; } .ig-hit-snip { color: var(--ig-ink-soft); font-size: .84rem; margin-top: 3px; } /* Подсветка найденного фрагмента. Имя не .ig-mark — этот класс уже занят значком ✓/✕ в разборе упражнений. */ .ig-hl { background: var(--ig-amber-soft); color: var(--ig-amber); border-radius: 3px; padding: 0 2px; font-weight: 650; } /* заметка к странице */ .ig-note-item { padding: 11px 12px; border: 1px solid var(--ig-line); border-radius: 11px; background: var(--ig-card); } .ig-note-item + .ig-note-item { margin-top: 8px; } .ig-note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .ig-note-pg { padding: 0; border: none; background: none; color: var(--ig-accent); font: inherit; font-size: .78rem; font-weight: 650; cursor: pointer; } .ig-note-pg:hover { text-decoration: underline; } .ig-note-text { font-size: .88rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } /* контекст-цитата в окне добавления слова */ .ig-quote { padding: 10px 12px; border-left: 3px solid var(--ig-accent-line); border-radius: 0 9px 9px 0; background: var(--ig-bg-soft); font-size: .85rem; line-height: 1.5; color: var(--ig-ink-soft); overflow-wrap: anywhere; } /* ═══════════════════════════════════════════════════════════════ Story Mode: выбор словаря, генерация, чтение с пропусками, глоссарий и разбор (/story-mode, /story-reader/{id}) ═══════════════════════════════════════════════════════════════ */ /* ── Шаг настройки: подпись с номером ─────────────────────────── */ .ig-setup-step { display: flex; align-items: center; gap: 9px; margin: 26px 0 12px; } .ig-setup-step:first-child { margin-top: 0; } .ig-setup-n { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px; display: grid; place-items: center; background: var(--ig-accent-soft); border: 1px solid var(--ig-accent-line); color: var(--ig-accent); font-size: .72rem; font-weight: 700; } .ig-setup-step h2 { font-size: 1.02rem; } /* ── Уровень сложности ────────────────────────────────────────── */ .ig-diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; } .ig-diff-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 13px 15px; border: 1px solid var(--ig-line-strong); border-radius: 12px; background: var(--ig-card); color: var(--ig-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .13s, background .13s; } .ig-diff-card:hover { border-color: var(--ig-accent); } .ig-diff-card.on { border-color: var(--ig-accent); background: var(--ig-accent-soft); } .ig-diff-ic { font-size: 1.3rem; line-height: 1; margin-bottom: 3px; } .ig-diff-name { font-weight: 650; font-size: .92rem; } .ig-diff-desc { font-size: .76rem; color: var(--ig-muted); } /* Карточка словаря как