/* Дві теми на змінних. Жодного кольору поза цим блоком: інакше світла тема ламається в одному місці з двадцяти й помічається вже в проді. */ :root { --bg:#12151a; --card:#1a1f27; --side-bg:#141821; --head:#171c24; --hover:#202632; --line:#2a3140; --line2:#3b4557; --tx:#e6e9ef; --dim:#8b96a8; --acc:#5b9dff; /* Кнопки за роллю (artifacts/decisions/admin-buttons.md): фон, текст, рамка, наведення. */ --b-pri-bg:rgba(91,157,255,.16); --b-pri-fg:#8fbcff; --b-pri-bd:rgba(91,157,255,.38); --b-pri-hv:rgba(91,157,255,.26); --b-sec-fg:#8fbcff; --b-sec-bd:#5b9dff; --b-sec-hv:rgba(91,157,255,.12); --b-warn-bg:rgba(224,160,60,.16); --b-warn-fg:#f2bd63; --b-warn-bd:rgba(224,160,60,.4); --b-warn-hv:rgba(224,160,60,.26); --b-ok-bg:rgba(63,191,127,.15); --b-ok-fg:#6fd6a2; --b-ok-bd:rgba(63,191,127,.38); --b-ok-hv:rgba(63,191,127,.24); --ok:#3fbf7f; --warn:#e0a03c; --bad:#e5636b; --dot-1:#4ade80; --dot-2:#fbbf24; --dot-3:#f87171; --shadow:none; --side:236px; } html.light { --bg:#f6f7f9; --card:#ffffff; --side-bg:#ffffff; --head:#f8f9fb; --hover:#f2f5f9; --line:#e3e6ea; --line2:#c3c9d2; --tx:#1d2430; --dim:#5f6a7a; --acc:#0b64d0; --b-pri-bg:#e8f1fd; --b-pri-fg:#0b5bc0; --b-pri-bd:#c3d9f6; --b-pri-hv:#dbe9fc; --b-sec-fg:#0b5bc0; --b-sec-bd:#0b64d0; --b-sec-hv:#eef4fd; --b-warn-bg:#fdf1dc; --b-warn-fg:#8a5200; --b-warn-bd:#f0d3a0; --b-warn-hv:#fbe7c4; --b-ok-bg:#e4f5ec; --b-ok-fg:#11713e; --b-ok-bd:#bfe5cf; --b-ok-hv:#d6f0e2; --ok:#17864a; --warn:#9a5b00; --bad:#c0353d; --dot-1:#22c55e; --dot-2:#f59e0b; --dot-3:#ef4444; --shadow:0 1px 2px rgba(16,24,40,.06); } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--tx); font:14px/1.5 -apple-system, BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; } a { color:var(--acc); text-decoration:none; } a:hover { text-decoration:underline; } .shell { display:flex; min-height:100vh; } aside { width:var(--side); flex:0 0 var(--side); border-right:1px solid var(--line); background:var(--side-bg); padding:14px 12px; transition:width .15s, flex-basis .15s; } aside .brand { font-size:15px; font-weight:600; padding:4px 8px 14px; white-space:nowrap; overflow:hidden; } /* Рамка є в кожного пункта (прозора), а не лише в активного: інакше активний ставав на 2px вищим і впритул до сусіда під курсором — підсвітки наїжджали (15.10). */ aside nav a { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; border:1px solid transparent; color:var(--tx); white-space:nowrap; overflow:hidden; } aside nav a.on { background:var(--hover); border-color:var(--line); } aside nav a:hover { background:var(--hover); text-decoration:none; } aside .ico { width:18px; flex:0 0 18px; display:inline-flex; align-items:center; justify-content:center; color:var(--dim); } aside nav a.on .ico, aside nav a:hover .ico { color:var(--acc); } /* Іконки лініями, як у дашборді Cloudflare: колір успадковується від тексту, товщина одна на всі, розмір один. Emoji тут не тримались стилю взагалі. */ svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block; } /* Група це продукт. Заголовок тримає значок продукту, пункти всередині лишились такими, як були, і зсунуті лінією — вона показує вкладеність без відступу порожнечею. */ aside .grp + .grp { margin-top:10px; } aside .ghead { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border:0; border-radius:8px; cursor:pointer; background:none; color:var(--dim); font:inherit; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; overflow:hidden; } aside .ghead:hover { background:var(--hover); color:var(--tx); } /* Активна сторінка всередині згорнутої групи: заголовок бере підсвітку на себе, щоб згортання не ховало позначку місця. */ aside .grp.off > .ghead.on { color:var(--acc); } /* Довга назва групи («Администрирование») виштовхувала шеврон за край меню, і overflow його зрізав (15.10). Назва стискається з трикрапкою, шеврон — ніколи. */ aside .ghead .label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:left; } /* Довгі назви пунктів і підгруп теж обрізаються трикрапкою — повна назва в підказці (admin.js). */ aside nav a .label { min-width:0; overflow:hidden; text-overflow:ellipsis; } aside .ghead .ico { flex:none; } aside .ghead .chev { margin-left:auto; flex:none; display:inline-flex; transition:transform .15s; } aside .ghead .chev svg { width:15px; height:15px; } aside .grp.off .chev { transform:rotate(-90deg); } aside .grp.off .gbody { display:none; } aside .gbody { margin:3px 0 0 19px; padding-left:9px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:2px; } /* margin-top: підсвітка заголовка групи не впирається в перший пункт */ /* Підгрупа всередині групи: тихий підпис без значка й без згортання — вкладеність видно, а меню не стає глибшим. */ aside .gsub { padding:8px 10px 3px; color:var(--dim); font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } aside .gbody > .gsub:first-child { padding-top:2px; } /* Пункти підгрупи — окрема гілка зі своєю лінією (15.10): без неї підгрупи зливались. Лінія помітніша за лінію групи (--line2), щоб рівні читались. */ aside .gsubbody { margin-left:10px; padding-left:8px; border-left:1px solid var(--line2); display:flex; flex-direction:column; gap:2px; } aside .gsubbody + .gsub { margin-top:8px; } aside .gsub { color:var(--tx); opacity:.62; } html.side-off aside .gsub { display:none; } html.side-off aside .gsubbody { margin:0; padding:0; border:0; } /* Вкладений пункт (24.10): «Видачі PRO» під «Користувачами», гілкою як у підгрупи. */ aside .gbody a.child { margin-left:18px; position:relative; } aside .gbody a.child::before { content:""; position:absolute; left:-9px; top:-4px; bottom:50%; border-left:1px solid var(--line2); border-bottom:1px solid var(--line2); width:7px; } html.side-off aside .gbody a.child { margin-left:0; } html.side-off aside .gbody a.child::before { display:none; } /* Розгорнутий перелік людей видачі (24.10). */ table.grants button.who { background:none; border:0; padding:0; color:var(--acc); cursor:pointer; font:inherit; } table.grants tr.people td { background:var(--bg2, transparent); } table.grants tr.people ul { margin:0; padding:0; list-style:none; columns:3 220px; } table.grants tr.people li { padding:2px 0; break-inside:avoid; } table.grants tr.people .tag { margin-left:6px; } html.side-off aside { width:54px; flex-basis:54px; } html.side-off aside .brand, html.side-off aside .label { display:none; } /* Згорнуте меню це стовпчик іконок, і вони мусять стояти по центру смуги. Без цього іконка лишається там, де була при розгорнутому меню, тобто притиснутою до лівого краю, і стовпчик виглядає збитим набік. */ html.side-off aside nav a { justify-content:center; gap:0; padding:9px 0; } /* Рельса теж показує групи, тільки іншими засобами: значок продукту стоїть угорі в плашці, нижче його розділи, між продуктами — риска (див. нижче). Шеврон зникає: згортати нічого, підписів усе одно немає. А клік по значку продукту розгортає меню — у рельсі це єдиний спосіб прочитати назви. */ html.side-off aside .chev { display:none; } html.side-off aside .ghead { justify-content:center; gap:0; padding:3px 0; } html.side-off aside .ghead:hover { background:none; } /* Група в рельсі завжди розкрита: згорнута вона лишила б самотній значок продукту без жодного розділу, і смуга виглядала б зламаною. */ html.side-off aside .gbody { display:flex; margin:4px 0 0; padding:0; border-left:0; } /* Рельса (15.10): значок продукту — у плашці, щоб відрізнявся від значків розділів; риска стоїть між продуктами, а не між продуктом і його розділами. */ html.side-off aside .grp + .grp { margin-top:8px; padding-top:8px; border-top:1px solid var(--line); } html.side-off aside .ghead .ico { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:var(--b-pri-bg); color:var(--b-pri-fg); opacity:1; } html.side-off aside .ghead:hover .ico, html.side-off aside .ghead.on .ico { background:var(--b-pri-hv); color:var(--b-pri-fg); } .content { flex:1; min-width:0; } header { display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--side-bg); } header form { margin:0; } .burger, .theme { background:none; border:1px solid var(--line); color:var(--dim); border-radius:9px; width:36px; height:36px; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .burger:hover, .theme:hover { color:var(--tx); } .i-moon { display:none; } html.light .i-sun { display:none; } html.light .i-moon { display:block; } .burger:hover, .theme:hover { border-color:var(--acc); } .langs { display:flex; gap:2px; margin-left:auto; } /* Кнопка інструкції (#221): стоїть перед мовами й забирає їхній відступ вправо. */ .help-btn { margin-left:auto; height:30px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:none; color:var(--dim); font-size:12.5px; cursor:pointer; } .help-btn:hover { color:var(--tx); border-color:var(--acc); } .help-btn + .langs { margin-left:0; } .langs a { padding:4px 8px; border:1px solid var(--line); border-radius:7px; font-size:12px; color:var(--dim); } .langs a.on { color:var(--tx); border-color:var(--acc); } main { padding:20px; max-width:1560px; } /* 13 колонок таблиці */ h1 { font-size:19px; margin:0; font-weight:600; } h2 { font-size:15px; margin:26px 0 10px; color:var(--dim); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } /* Карточки однакової висоти і з фіксованими місцями під назву, число і уточнення: назва до двох рядків, уточнення до трьох, далі обрізається. Без цього довший переклад розсував сусідів і текст вилазив за рамку. */ .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; align-items:stretch; } .card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); } /* Картки-посилання — це фільтри (03.10): курсор-рука, рамка при наведенні, обрана підсвічена */ /* Стани вибору — одні на всю панель (15.10): наведення — піднята картка з помітнішою рамкою; вибрана — мʼякий акцент ролі «головна» (той самий, що в кнопки pri) і число в кольорі акценту. Наведення на вибрану її не гасить. */ a.card { color:inherit; text-decoration:none; cursor:pointer; position:relative; transition:border-color .12s, background .12s, transform .12s, box-shadow .12s; } a.card:hover { border-color:var(--line2); background:var(--hover); transform:translateY(-1px); box-shadow:0 4px 14px rgba(16,24,40,.14); } a.card:focus-visible { outline:2px solid var(--b-sec-bd); outline-offset:2px; } a.card.on, a.card.active { background:var(--b-pri-bg); border-color:var(--b-pri-bd); box-shadow:inset 0 0 0 1px var(--b-pri-bd); } a.card.on:hover, a.card.active:hover { background:var(--b-pri-hv); } a.card.on .n, a.card.active .n { color:var(--b-pri-fg); } a.card.on .t, a.card.active .t { color:var(--b-pri-fg); } @media (prefers-reduced-motion: reduce) { a.card, a.card:hover { transition:none; transform:none; } } .card .l { color:var(--dim); font-size:12px; margin-bottom:3px; } /* картка юзера */ .card .t, .card .s { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; } /* Назви карток «Звʼязку» це ті самі рядки, що й теги в таблиці, а тег пишеться з маленької. Велика перша літера тільки в картці. */ .card .t::first-letter { text-transform:uppercase; } .card .t { color:var(--tx); font-size:12px; font-weight:500; line-height:1.3; min-height:32px; -webkit-line-clamp:2; } .card .n { font-size:27px; font-weight:600; line-height:1.05; margin:7px 0 5px; } /* Уточнення: місце під два рядки завжди, третій дозволений розкладу PRO. */ .card .s { color:var(--dim); font-size:12px; line-height:1.35; margin-top:auto; min-height:33px; -webkit-line-clamp:3; } /* Панель фільтрів: усі елементи однієї висоти і по одній лінії, інакше нативний select на macOS вибивається і з висоти, і з кольору. */ .bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:18px 0 12px; } .bar label { color:var(--dim); font-size:12px; align-self:center; } .field { position:relative; display:inline-flex; align-items:center; } input[type=search], input[type=email], input[type=number], select, button { height:36px; box-sizing:border-box; font:13px/1 -apple-system,BlinkMacSystemFont, "Segoe UI",system-ui,sans-serif; background:var(--card); color:var(--tx); border:1px solid var(--line); border-radius:9px; padding:0 12px; transition:border-color .12s; } input[type=search]:hover, input[type=number]:hover, select:hover, button:hover { border-color:var(--line2); } input[type=search]:focus, input[type=email]:focus, input[type=number]:focus, select:focus, button:focus-visible { outline:none; border-color:var(--acc); } input[type=search] { min-width:230px; } /* Порог «рефералів від» це два-три знаки. Без вузького поля числовий ввід виглядає як другий пошук і тягне на себе увагу, якої не заслуговує. */ input.mini { width:78px; min-width:0; padding:0 8px; } /* Позначка «знайдено серед рефералів» стоїть поруч з іменем реферера і не має конкурувати з ним за розмір. */ .muted.sm { font-size:11px; margin-left:7px; } input[type=email] { width:100%; height:40px; font-size:14px; } select { -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:32px; text-align:left; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%238b96a8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; } /* Однакова ширина обох списків: інакше вони різні на вигляд, а при виборі довшого значення поле ще й стрибає. */ .bar select { min-width:186px; } /* Список питань: сім фільтрів і кнопка в один рядок (#220). */ .bar.tight select { min-width:140px; } .bar.tight button[type=submit] { margin-left:auto; } /* «Застосувати» і «скинути» праворуч, і коли переносяться на новий рядок */ .bar.tight input[type=search] { flex:1 1 220px; } /* пошук забирає решту рядка: фільтри доходять до правого краю, як кнопки під ними */ select:hover { background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23e6e9ef' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Стрілка списку це картинка, а в картинку змінну не підставити: світлій темі потрібен свій файл, інакше стрілка зникає на білому. */ html.light select { background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%235f6a7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } html.light select:hover { background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%231d2430' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Список, що випадає, малює операційна система: колір і фон їй все ж задати можна. */ select option { background:var(--card); color:var(--tx); } button { cursor:pointer; font-weight:500; } button:hover { border-color:var(--acc); } button:disabled { cursor:not-allowed; opacity:.45; border-color:var(--line); } /* неактивна — видно, що не натиснеш (03.10) */ .link-reset { color:var(--dim); font-size:12px; align-self:center; } .chk { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--dim); font-size:13px; cursor:pointer; user-select:none; } .chk:hover { border-color:var(--line2); color:var(--tx); } .chk input { accent-color:var(--acc); margin:0; cursor:pointer; } .wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:var(--shadow); } table { border-collapse:collapse; width:100%; } /* Тринадцять колонок мусять вміститись у ноутбучний екран, тому відступи тісніші за звичні: інакше «Статус» і посилання праворуч ідуть за край. */ th, td { text-align:left; padding:8px 9px; border-bottom:1px solid var(--line); white-space:nowrap; font-size:13px; } th { color:var(--dim); font-weight:600; font-size:11px; text-transform:uppercase; background:var(--head); letter-spacing:.02em; } tbody tr:hover { background:var(--hover); } tbody tr:last-child td { border-bottom:none; } /* Числова колонка центрується разом зі своїм заголовком (08.09.2026, за зауваженням власника). При вирівнюванні праворуч число тікало до правого краю широкої колонки і візуально відривалось від назви, під якою стоїть: у таблиці з шести нулів було не видно, який нуль до чого. Цифри лишаються табличними, тому стовпчик однакових чисел усе одно стоїть рівно. */ td.num, th.num { text-align:center; } td.num { font-variant-numeric:tabular-nums; } td.id { color:var(--dim); font-variant-numeric:tabular-nums; font-size:12px; } /* Довге значення обрізається, а не розтягує таблицю. Повне видно в підказці. */ td.cut { max-width:150px; overflow:hidden; text-overflow:ellipsis; } /* Історія вмикань промокоду (#225): дрібно, щоб не розпирала рядок коду. */ td.hist { font-size:12px; color:var(--dim); white-space:nowrap; } /* «Що ми робили» (#225): службові колонки вузькі, «Деталі» забирають решту. */ table.acts td:nth-child(-n+5), table.acts th:nth-child(-n+5) { width:1%; white-space:nowrap; } table.acts td:nth-child(5) { text-align:right; } table.acts td:nth-child(6) { width:100%; } td.act { text-align:right; } th.pick, td.pick { width:26px; padding-right:0; } th.pick input, td.pick input { accent-color:var(--acc); cursor:pointer; margin:0; } /* Людський текст у таблиці: переноситься, але без моноширинного шрифту — він читається як дамп даних. */ td.said { white-space:normal; max-width:520px; line-height:1.4; } td.wide { white-space:normal; max-width:520px; font-family:ui-monospace,SFMono-Regular,monospace; font-size:12px; color:var(--dim); } /* Заголовок-сортування: уся клітинка це посилання, стрілка показує напрямок. Неактивна колонка має бліду стрілку, щоб було видно, що по ній теж можна. */ th a.sort { display:inline-flex; align-items:center; gap:5px; color:inherit; } th a.sort:hover { color:var(--tx); text-decoration:none; } th .arr { font-size:10px; opacity:.35; } th a.sort.on { color:var(--tx); } th a.sort.on .arr { opacity:1; color:var(--acc); } /* Підказка своя, не нативний title. Нативний браузер показує з затримкою майже в секунду, а всередині .wrap із overflow він ще й не завжди зʼявляється взагалі. Тому елемент лежить у body з position:fixed: так його не ріже жоден контейнер зі скролом. */ [data-hint] { cursor:help; } /* Значок «i» з підказкою (04.10): замість довгих пояснень текстом біля кнопок і полів */ .ihint { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; border:1px solid var(--line2); color:var(--dim); font:italic 600 11px/1 Georgia, serif; vertical-align:middle; margin-left:4px; text-transform:none; letter-spacing:0; user-select:none; } .ihint:hover, .ihint:focus { color:var(--acc); border-color:var(--acc); outline:none; } #tip { position:fixed; z-index:60; max-width:290px; padding:8px 11px; background:var(--card); color:var(--tx); border:1px solid var(--line2); border-radius:9px; font-size:12px; line-height:1.45; text-transform:none; letter-spacing:normal; font-weight:400; white-space:normal; box-shadow:0 8px 24px rgba(0,0,0,.4); pointer-events:none; opacity:0; transform:translateY(-3px); transition:opacity .12s, transform .12s; } html.light #tip { box-shadow:0 8px 24px rgba(16,24,40,.16); } #tip.on { opacity:1; transform:none; } /* Підказка меню (15.10): напівпрозора, щоб не відрізала сторінку поруч, і виїжджає вбік. */ #tip.side { background:color-mix(in srgb, var(--card) 55%, transparent); backdrop-filter:blur(8px) saturate(1.2); -webkit-backdrop-filter:blur(8px) saturate(1.2); border-color:color-mix(in srgb, var(--line2) 70%, transparent); box-shadow:0 4px 14px rgba(0,0,0,.18); padding:5px 9px; border-radius:7px; transform:translateX(-3px); } #tip.side.on { transform:none; } /* Заголовок із підказкою підсвічується при наведенні: іконки-позначки більше немає, і без цього ніщо не каже, що тут є що дивитись. */ th[data-hint]:hover a.sort, th[data-hint]:hover { color:var(--tx); } .tag { display:inline-block; padding:1px 7px; border-radius:20px; font-size:11px; border:1px solid var(--line); } .tag.paid { color:var(--ok); border-color:var(--ok); } .tag.promo, .tag.gift, .tag.manual { color:var(--warn); border-color:var(--warn); } .tag.free { color:var(--dim); } /* Позначка «новий»: перший тиждень зелена, другий жовта. Далі її немає — постійна позначка перестає бути сигналом. */ .tag.fresh { color:var(--ok); border-color:var(--ok); } .tag.aging { color:var(--warn); border-color:var(--warn); } /* Дві позначки в одній клітинці не злипаються. */ td.badges { white-space:nowrap; } td.badges .tag + .tag { margin-left:5px; } /* Стан промокода і статус оплати фарбуються тим самим набором: працює зеленим, не працює жовтим, решта тьмяним. */ .tag.pending { color:var(--warn); border-color:var(--warn); } /* Точки складності (17.10): колір рівня лише на закрашених, порожні сірі. */ .dots .off { color:var(--dim); } .dots.d-easy .on { color:var(--dot-1); } .dots.d-medium .on { color:var(--dot-2); } .dots.d-hard .on { color:var(--dot-3); } .tag.active { color:var(--ok); border-color:var(--ok); } .tag.off, .tag.expired, .tag.used_up { color:var(--dim); } .box { max-width:380px; margin:9vh auto; padding:0 16px; } .box p { color:var(--dim); } /* Підказка перевірки поля (forms.js, 17.10): замість браузерної, мовою панелі. */ .vbad, input.vbad:focus, textarea.vbad:focus { border-color:var(--bad) !important; } .vbubble { position:relative; margin:8px 0 0; padding:8px 12px; border-radius:9px; font-size:13px; line-height:1.4; color:var(--bad); background:var(--card); border:1px solid var(--bad); box-shadow:var(--shadow); animation:v-in .14s ease-out; } .vbubble::before { content:""; position:absolute; top:-6px; left:18px; width:10px; height:10px; background:var(--card); border-left:1px solid var(--bad); border-top:1px solid var(--bad); transform:rotate(45deg); } @keyframes v-in { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:none; } } /* Вхід (17.10): картка по центру, за нею — контур Польщі з кабинету (konto/_poland.svg). Спершу малюється межа, потім заливка, далі спалахують 16 міст з воєводськими ужондами. */ .login { position:relative; z-index:1; min-height:100vh; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; } .login-card { width:100%; max-width:400px; box-sizing:border-box; padding:28px 28px 24px; border-radius:16px; background:color-mix(in srgb, var(--card) 88%, transparent); border:1px solid var(--line); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:var(--shadow); } .login-card .mark { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--tx); color:var(--bg); font:700 17px/1 Arial,sans-serif; margin-bottom:14px; } .login-card h1 { font-size:22px; margin:0 0 6px; } .login-card p { color:var(--dim); font-size:14px; line-height:1.5; margin:0 0 16px; } .login-card .note { padding:10px 12px; border-radius:10px; background:var(--hover); color:var(--tx); } .login-card p.err { padding:10px 12px; border-radius:10px; background:var(--hover); color:var(--bad); } .login-card form button { width:100%; height:40px; margin-top:12px; font-size:14px; } .login-card .again { font-size:14px; } .login .langs { margin:18px 0 0; } .backdrop { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:0; overflow:hidden; --map:var(--acc); --city:var(--bad); } .backdrop .pl-map { width:min(1040px, 100vw); height:auto; flex:none; } /* height — інакше глобальне svg {17px} стискає карту в смужку */ .backdrop .border { fill:var(--map); fill-opacity:.05; stroke:var(--map); stroke-opacity:.3; stroke-width:2.5; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; animation:pl-draw 6s cubic-bezier(.45,0,.25,1) .3s both, pl-fill 2s ease 5.6s both; } .city { --at:calc(6.6s + var(--i) * .2s); } .city circle { transform-box:fill-box; transform-origin:center; } .city .dot { fill:var(--city); fill-opacity:.7; animation:pl-pop .9s cubic-bezier(.34,1.56,.64,1) var(--at) both; } .city.cap .dot { fill-opacity:.85; } .city .halo { fill:none; stroke:var(--city); stroke-width:1.5; opacity:0; animation:pl-pulse 4.8s ease-out calc(var(--at) + .8s) infinite; } @keyframes pl-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } } @keyframes pl-fill { from { fill-opacity:0; } to { fill-opacity:.05; } } @keyframes pl-pop { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } } @keyframes pl-pulse { 0% { opacity:.55; transform:scale(1); } 70%, 100% { opacity:0; transform:scale(3.2); } } /* Телефон: картка закриває центр, тож карта — вгору, на всю ширину (як у кабинеті, 08.10). */ @media (max-width:640px) { .backdrop { align-items:flex-start; padding-top:24px; } .backdrop .pl-map { width:100vw; } .login { justify-content:flex-end; padding-bottom:40px; } } @media (prefers-reduced-motion: reduce) { .backdrop .border, .city .dot, .city .halo, .vbubble { animation:none; } } .err { color:var(--warn); } .muted { color:var(--dim); font-size:12px; } /* «Не збереглось» замість прочерку: прочерк не розрізняє дефект даних і свідомо порожнє значення (H-1). */ .none { color:var(--dim); font-size:11px; font-style:italic; cursor:help; border-bottom:1px dotted var(--line2); } /* Id на місці відсутнього ніка: тьмяніше за справжній нік, але не курсивом — це справжній ідентифікатор, а не позначка «даних немає». */ .dimid { color:var(--dim); font-variant-numeric:tabular-nums; font-size:12px; cursor:help; } .count { display:flex; justify-content:space-between; gap:12px; color:var(--dim); font-size:12px; margin:0 0 8px; } .count.after { margin:8px 0 0; } /* Футер реєстру (N-5): одна результуюча панель замість трьох підписів у різних місцях. Три зони — зліва склад вибірки, по центру сторінки, справа розмір сторінки і дії над вибраним. */ .foot { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; margin:10px 0 0; padding:9px 12px; background:var(--card); border:1px solid var(--line); border-radius:10px; color:var(--dim); font-size:12px; box-shadow:var(--shadow); } .foot .f-l, .foot .f-c, .foot .f-r { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; } .foot .f-r { margin-left:auto; } .foot .pgs { display:inline-flex; gap:4px; } .foot .pgs a, .foot a.ref { padding:2px 8px; border:1px solid var(--line); border-radius:7px; color:var(--dim); } .foot .pgs a:hover, .foot a.ref:hover { color:var(--tx); border-color:var(--line2); text-decoration:none; } .foot .pgs a.on { color:var(--tx); border-color:var(--acc); } .foot .ago.stale { color:var(--warn); } /* Воронка (N-3): стадії згруповані рядами, клік по стадії відкриває тих, хто на ній застряг. Це навігація по розділу, а не звіт. */ .fun { display:flex; flex-direction:column; gap:10px; margin:0 0 14px; } .fun .row { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; } .fun .gl { color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.03em; min-width:96px; align-self:center; } .fun a.st { display:flex; flex-direction:column; gap:2px; min-width:132px; padding:9px 11px; background:var(--card); border:1px solid var(--line); border-radius:10px; color:var(--tx); box-shadow:var(--shadow); } .fun a.st:hover { border-color:var(--line2); text-decoration:none; } .fun a.st.on { border-color:var(--acc); } .fun a.st .t { color:var(--dim); font-size:11px; line-height:1.3; } .fun a.st .n { font-size:19px; font-weight:600; line-height:1.1; } .fun a.st .d { color:var(--warn); font-size:11px; } .fun a.st .d.warn { color:var(--warn); font-weight:600; cursor:help; } /* Гілка збоку і ознака — не сходинки, тому тьмяніші за ступені: інакше око читає ряд як послідовність, якою він не є. */ .fun a.st.branch, .fun a.st.flag { background:transparent; } .fun a.st.flag .n { font-weight:500; color:var(--dim); } /* Блоки карточки людини (03.09.2026). Розділи стояли одним потоком, і на довгій карточці не було видно, де кінчається один і починається інший. Кожен окремо, з тонкою рискою, і згортається кліком по заголовку. Стан згорнутості це звичка оператора, тому localStorage, як у групах меню. */ .blk { border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:var(--shadow); margin:14px 0; } .blk .bhead { display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; background:none; border:0; border-radius:10px; cursor:pointer; color:var(--tx); font:inherit; text-align:left; } .blk .bhead .t { display:flex; align-items:center; gap:8px; color:var(--dim); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; } .blk .bhead:hover .t { color:var(--tx); } /* Зведення поруч із назвою: згорнутий блок мусить казати, що в ньому. */ .blk .bhead .sum { margin-left:8px; color:var(--dim); font-weight:500; text-transform:none; letter-spacing:0; } .blk .bhead:hover .sum { color:var(--dim); } .blk .chev { display:flex; margin-left:auto; color:var(--dim); transition:transform .15s; } .blk .chev svg { width:15px; height:15px; } .blk.off .chev { transform:rotate(-90deg); } .blk .bbody { padding:14px; border-top:1px solid var(--line); } .blk.off .bbody { display:none; } /* Усередині блока рамка вже є, тому вкладені форми і лента її не малюють: дві рамки поспіль читаються як два різні блоки. */ .blk .new, .blk .chat { background:transparent; border:0; box-shadow:none; padding:0; margin:0 0 10px; } .blk .bbody > .wrap { margin:0; } .blk .bbody > p:last-child { margin-bottom:0; } /* Скільком не відповіли. Показується тільки коли є кого: контрол, який завжди каже нуль, перестає читатись як сигнал. */ aside .badge { margin-left:auto; min-width:18px; padding:1px 6px; border-radius:9px; background:var(--acc); color:var(--bg); font-size:11px; font-weight:700; text-align:center; } html.side-off aside .badge { display:none; } /* Переписка з людиною однією лентою: вихідне праворуч, вхідне ліворуч. До 03.09.2026 те, що ми написали, і те, що написала людина, лежали на двох різних екранах, і розмову доводилось складати в голові. */ .chat { display:flex; flex-direction:column; gap:5px; margin:8px 0 8px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; box-shadow:var(--shadow); } .chat .msg { max-width:min(70%, 620px); } .chat .msg.us { align-self:flex-end; text-align:right; } .chat .msg.them { align-self:flex-start; } .chat .msg .b { white-space:pre-wrap; word-break:break-word; font-size:12.5px; line-height:1.4; padding:6px 10px; border-radius:9px; border:1px solid var(--line); background:var(--bg); } .chat .msg.us .b { background:var(--acc); border-color:var(--acc); color:var(--bg); } .chat .msg .m { margin-top:1px; color:var(--dim); font-size:10.5px; } /* Форма відправки: розкривається під рядком, а не окремою сторінкою — інакше втрачається те, заради чого пишеш саме цій людині. */ .send { display:none; margin:10px 0 0; } .send.on { display:block; } .send textarea { width:100%; min-height:92px; padding:10px 12px; resize:vertical; background:var(--card); color:var(--tx); border:1px solid var(--line); border-radius:10px; font:inherit; font-size:13px; } .send textarea:focus { outline:none; border-color:var(--acc); } .send .btns { display:flex; gap:8px; align-items:center; margin-top:8px; } /* Форма створення промокода. Підпис над полем, а не збоку: полів шість, і в один рядок вони або злипаються, або тікають за екран. */ .new { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; align-items:end; background:var(--card); padding:14px; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); margin:12px 0 8px; } .new .f { display:flex; flex-direction:column; gap:5px; min-width:0; } .new .f > span { color:var(--dim); font-size:12px; } /* Текст повідомлення людині в колонці 160px не читається, тому на всю ширину сітки. */ .new .f.wide { grid-column:1 / -1; } .new select { min-width:0; width:100%; } .new input[type=text] { height:36px; box-sizing:border-box; min-width:0; font:13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--tx); border:1px solid var(--line); border-radius:9px; padding:0 12px; } .new input[type=text]:focus { outline:none; border-color:var(--acc); } .new textarea { box-sizing:border-box; width:100%; min-width:0; resize:vertical; font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--tx); border:1px solid var(--line); border-radius:9px; padding:9px 12px; } .new textarea:focus { outline:none; border-color:var(--acc); } .new textarea::placeholder { color:var(--dim); opacity:.75; } .new input[type=text]::placeholder { color:var(--dim); opacity:.75; } /* Помилка форми і підтвердження стоять на місці одна одної, тому однакової форми: інакше сторінка стрибає між станами. */ .flash { border-radius:9px; padding:9px 12px; font-size:13px; margin:12px 0 0; border:1px solid var(--line); background:var(--card); } .flash.bad { border-color:var(--warn); color:var(--warn); } .flash.good { border-color:var(--ok); color:var(--ok); } /* Кнопка-іконка в клітинці таблиці (06.09.2026). Текстова кнопка «копіювати» була ширша за сам код, і перша колонка стрибала від рядка до рядка: код короткий — кнопка ліворуч, код довгий — кнопка праворуч. */ .cell { display:flex; align-items:center; gap:6px; } .ibtn { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; flex:0 0 24px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; } .ibtn:hover { color:var(--tx); border-color:var(--dim); } .ibtn svg { width:14px; height:14px; } .ibtn.on { color:var(--ok); border-color:var(--ok); } /* Попередження про код, що світить ресурс: значок того ж розміру, що кнопка, інакше рядок із ним вищий за сусідні. */ .iwarn { display:inline-flex; align-items:center; color:var(--warn); flex:0 0 16px; } .iwarn svg { width:16px; height:16px; } /* Маркер «тут є пояснення». Без нього підказка на заголовку невидима: про неї знає тільки той, хто випадково навів мишу. */ th .q { display:inline-block; margin-left:4px; width:13px; height:13px; line-height:13px; border-radius:50%; border:1px solid var(--line); color:var(--dim); font-size:9px; text-align:center; font-weight:600; cursor:help; vertical-align:1px; } th:hover .q { color:var(--tx); border-color:var(--dim); } /* Вкладки розділу (07.09.2026). Заняття, а не фільтр: підпис називає, чим людина зараз зайнята, і тому без чисел. Активна тримається лінією знизу, а не заливкою: заливка в цій панелі означає дію, а вкладка нічого не робить. */ .tabs { display:flex; gap:2px; margin:14px 0 0; border-bottom:1px solid var(--line); overflow-x:auto; } .tabs .tab { padding:8px 14px; font-size:13px; color:var(--dim); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; } .tabs .tab:hover { color:var(--tx); } .tabs .tab.on { color:var(--tx); border-bottom-color:var(--tx); font-weight:600; } /* Панелі всіх вкладок лежать на сторінці одразу, видима одна. Правило явне, щоб майбутнє `display:` на .tabpanel не показало три вкладки разом. */ .tabpanel[hidden] { display:none; } /* Розкритий рядок запрошувача: підтаблиця живе в клітинці на всю ширину і тому не ламає розмітку основної таблиці. */ tr.sub > td { padding:0; background:var(--bg); } tr.sub table { margin:0; font-size:12.5px; } tr.sub td, tr.sub th { padding-top:6px; padding-bottom:6px; } tr.host { cursor:pointer; } tr.host .chev { display:inline-flex; color:var(--dim); transition:transform .15s; } tr.host .chev svg { width:13px; height:13px; } tr.host[aria-expanded="true"] .chev { transform:rotate(180deg); } /* Код кампанії: колонка не тягнеться, значення моноширинне — його звіряють очима з тим, що стоїть у публікації. */ td.code { width:1%; } td.code b { font-weight:600; font-family:ui-monospace,SFMono-Regular,monospace; font-size:12.5px; } td.act form { display:inline; } td.act button { height:28px; padding:0 9px; font-size:12px; } /* Три кнопки в рядку замість однієї: написати, відкласти, не пишемо (A20). */ td.act button + button { margin-left:5px; } .send #state-note { width:100%; margin-top:8px; height:36px; padding:0 12px; background:var(--card); color:var(--tx); border:1px solid var(--line); border-radius:9px; font:inherit; font-size:13px; } .send input[type=date] { height:36px; padding:0 10px; background:var(--card); color:var(--tx); border:1px solid var(--line); border-radius:9px; font:inherit; font-size:13px; } /* Прострочене й вимкнене тьмяніє: рядок лишається читабельним, але не конкурує оком із тим, що працює. */ tr.dim td { color:var(--dim); } /* Попап видачі PRO вибраним (#211). Секції «кому → строк → причина → повідомлення» в порядку, в якому їх заповнюють; строк — перемикачем, і під ним лише поле вибраного варіанта. */ .dlg { width:min(520px, calc(100vw - 32px)); padding:0; background:var(--card); color:var(--tx); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.35); } .dlg.help { width:min(780px, calc(100vw - 32px)); } /* Інструкція (#221, доробка 17.10): кроки, пари «позначка → що значить», жовта плашка. */ .help-q { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:10px; border-radius:50%; background:var(--b-pri-bg); color:var(--b-pri-fg); font-size:13px; vertical-align:1px; } .help-b { max-height:min(74vh, 760px); overflow-y:auto; padding:4px 24px 24px; scroll-padding-top:12px; } .help-intro { margin:0 0 14px; padding:12px 14px; border-left:3px solid var(--acc); border-radius:0 10px 10px 0; background:var(--b-pri-bg); font-size:14px; line-height:1.55; } .help-toc { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; } .help-toc button { padding:4px 11px; border:1px solid var(--line2); border-radius:20px; background:none; color:var(--tx); font-size:12px; cursor:pointer; } .help-toc button:hover { border-color:var(--acc); color:var(--acc); } .help-toc button.warn { color:var(--b-warn-fg); border-color:var(--b-warn-bd); } .help-s { margin-top:16px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; } .help-s h4 { margin:0; font-size:15px; font-weight:600; } .help-why { margin:3px 0 12px; color:var(--dim); font-size:13px; } .help-path { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; } .help-path .arr { color:var(--dim); } .help-path .tag { font-size:12px; padding:2px 10px; } .tag.dim { color:var(--dim); } .tag.acc { color:var(--acc); border-color:var(--acc); } .tag.ok { color:var(--ok); border-color:var(--ok); } .help-steps { list-style:none; margin:0; padding:0; } .help-steps li { position:relative; display:flex; gap:12px; padding-bottom:14px; } .help-steps li:not(:last-child)::before { content:""; position:absolute; left:13px; top:28px; bottom:0; border-left:2px solid var(--line); } .help-steps .n { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--acc); color:var(--card); font-size:13px; font-weight:700; } .help-steps .st { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:28px; } .help-steps b { font-size:14px; } .help-steps p { margin:2px 0 0; font-size:13.5px; line-height:1.5; } .help-btnlike, .help-terms .k.btn { padding:3px 10px; border:1px solid var(--b-pri-bd); border-radius:7px; background:var(--b-pri-bg); color:var(--b-pri-fg); font-size:12px; font-weight:600; } .help-at, .help-terms .k.block { padding:3px 10px; border:1px dashed var(--line2); border-radius:7px; color:var(--tx); font-size:12px; } .help-terms { display:grid; grid-template-columns:minmax(150px, max-content) 1fr; gap:9px 16px; margin:0; align-items:baseline; } .help-terms dt { margin:0; } .help-terms dd { margin:0; font-size:13.5px; line-height:1.5; } .help-terms .k { display:inline-block; font-size:12px; } .help-terms .k.card { padding:4px 10px; border:1px solid var(--line2); border-radius:8px; background:var(--hover); font-weight:600; } .help-terms .k.col, .help-terms .k.field { font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); } .help-terms .k.tag { padding:1px 9px; border:1px solid var(--line2); border-radius:20px; color:var(--dim); } .help-terms .k.warn { padding:1px 9px; border:1px solid var(--warn); border-radius:20px; color:var(--warn); } .help-s.note { background:var(--b-warn-bg); border-color:var(--b-warn-bd); } .help-s.note h4 { color:var(--b-warn-fg); } .help-s.note ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:7px; } .help-s.note li { font-size:13.5px; line-height:1.5; } @media (max-width:600px) { .help-terms { grid-template-columns:1fr; gap:3px 0; } .help-terms dd { margin-bottom:8px; } } .dlg::backdrop { background:rgba(10,12,16,.55); backdrop-filter:blur(2px); } .dlg form { display:flex; flex-direction:column; } .dlg-h { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 22px 14px; border-bottom:1px solid var(--line); } .dlg-h h3 { margin:0; font-size:17px; font-weight:600; } .dlg-sub { margin:4px 0 0; color:var(--dim); font-size:12.5px; } .dlg-x { width:32px; height:32px; padding:0; border:0; background:none; color:var(--dim); font-size:22px; line-height:1; border-radius:8px; } .dlg-x:hover { background:var(--hover); color:var(--tx); } .dlg-s { padding:14px 22px 0; display:flex; flex-direction:column; gap:8px; } .dlg-l { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); } .dlg-l em { font-style:normal; font-weight:400; text-transform:none; letter-spacing:0; margin-left:6px; opacity:.85; } .dlg-n { display:inline-block; min-width:20px; padding:1px 7px; margin-left:4px; border-radius:10px; background:var(--acc); color:#fff; font-size:11px; text-align:center; letter-spacing:0; } .chips { display:flex; flex-wrap:wrap; gap:6px; max-height:104px; overflow-y:auto; padding:2px 4px 2px 0; } .chip { display:inline-flex; align-items:center; gap:2px; padding:3px 4px 3px 10px; border-radius:14px; background:var(--hover); border:1px solid var(--line); font-size:12.5px; } .chip-x { width:20px; height:20px; padding:0; border:0; border-radius:50%; background:none; color:var(--dim); font-size:15px; line-height:1; } .chip-x:hover { background:var(--line); color:var(--tx); } .seg { display:inline-flex; padding:3px; gap:3px; background:var(--bg); border:1px solid var(--line); border-radius:10px; align-self:flex-start; } .seg label { cursor:pointer; } .seg input { position:absolute; opacity:0; pointer-events:none; } .seg span { display:block; padding:7px 16px; border-radius:7px; font-size:13px; color:var(--dim); transition:background .12s, color .12s; } .seg input:checked + span { background:var(--card); color:var(--tx); box-shadow:0 1px 3px rgba(0,0,0,.18); font-weight:500; } .seg input:focus-visible + span { outline:2px solid var(--acc); outline-offset:1px; } .term { display:flex; flex-direction:column; gap:6px; } .dlg form:has(input[name=term][value=plan]:checked) .term-until, .dlg form:has(input[name=term][value=until]:checked) .term-plan { display:none; } .dlg input[type=date], .dlg input[type=text], .dlg textarea, .dlg select { width:100%; box-sizing:border-box; height:38px; padding:0 12px; background-color:var(--bg); color:var(--tx); border:1px solid var(--line); border-radius:9px; font:13.5px -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; } .dlg select { padding-right:32px; } .dlg textarea { height:auto; min-height:76px; padding:9px 12px; resize:vertical; } .dlg input:focus, .dlg textarea:focus, .dlg select:focus { outline:none; border-color:var(--acc); } .dlg-hint { margin:0; color:var(--dim); font-size:12px; line-height:1.45; } .dlg-f { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; padding:14px 22px; border-top:1px solid var(--line); background:var(--head); border-radius:0 0 14px 14px; } .dlg-btns { display:flex; gap:8px; } /* Колір кнопки = її роль (15.10, artifacts/decisions/admin-buttons.md): pri — головна дія, sec — другорядна, warn — оборотне «стоп», ok — оборотне «так», danger — незворотне. М'які заливки замість яскравої: на темній темі суцільний синій кричав. */ button.pri, a.btn.pri { background:var(--b-pri-bg); color:var(--b-pri-fg); border-color:var(--b-pri-bd); font-weight:600; } button.pri:hover, a.btn.pri:hover { background:var(--b-pri-hv); border-color:var(--b-pri-bd); } button.sec { background:transparent; color:var(--b-sec-fg); border:1px solid var(--b-sec-bd); } button.sec:hover { background:var(--b-sec-hv); border-color:var(--b-sec-bd); } button.warn { background:var(--b-warn-bg); color:var(--b-warn-fg); border-color:var(--b-warn-bd); } button.warn:hover { background:var(--b-warn-hv); border-color:var(--b-warn-bd); } button.ok { background:var(--b-ok-bg); color:var(--b-ok-fg); border-color:var(--b-ok-bd); } button.ok:hover { background:var(--b-ok-hv); border-color:var(--b-ok-bd); } /* Неактивна кольорова кнопка — сіра, але читається: напівпрозорий колір ролі з opacity .45 зливався з фоном (15.10, «Написати вибраним (0)»). Роль видно, щойно кнопка оживає. */ button.pri:disabled, button.sec:disabled, button.warn:disabled, button.ok:disabled { background:transparent; color:var(--dim); border-color:var(--line2); opacity:1; } .dlg-l label { cursor:pointer; } .dlg-l .ihint, .dlg-hint .ihint { vertical-align:-3px; margin-left:4px; text-transform:none; } .seg span[data-hint] { cursor:pointer; } .dlg-warn { margin:0; padding:8px 11px; border-radius:8px; font-size:12.5px; color:var(--warn); border:1px solid var(--warn); background:var(--bg); } .dlg-warn[hidden] { display:none; } .dlg .msg { display:flex; flex-direction:column; gap:6px; } .dlg form:has(input[name=msg][value=tpl]:not(:checked)) .msg-tpl, .dlg form:has(input[name=msg][value=text]:not(:checked)) .msg-text, .dlg form:has(input[name=msg][value=none]:not(:checked)) .msg-none { display:none; } .seg input:disabled + span { opacity:.45; cursor:not-allowed; } .tpl-view { white-space:pre-wrap; padding:10px 12px; border-radius:9px; font-size:13px; line-height:1.5; background:var(--bg); border:1px dashed var(--line2); max-height:140px; overflow-y:auto; } .lng { display:inline-block; margin-left:4px; padding:0 6px; border-radius:6px; font-size:11px; border:1px solid var(--line); color:var(--dim); text-decoration:line-through; } .lng.on { color:var(--ok); border-color:var(--ok); text-decoration:none; } /* Опис стадії праворуч від полів шаблона (13.10.2026) */ .stage-info { grid-column:span 2; flex:1 1 280px; align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:8px 12px; border-radius:9px; border:1px solid var(--line); border-left:3px solid var(--acc); background:var(--card); font-size:12.5px; line-height:1.45; } .stage-info .who { color:var(--tx); font-weight:500; } .stage-info .where { color:var(--dim); } /* Шаблони: рядок шаблона і мовні версії під ним (13.10.2026) */ tr.tgrp { cursor:pointer; } tr.tgrp:hover td { background:var(--hover); } tr.tgrp.open td { background:var(--head); } .tg { height:22px; width:22px; padding:0; margin-right:6px; border:0; background:none; color:var(--dim); vertical-align:middle; } .tg .chev { display:inline-block; transition:transform .15s; } .tg[aria-expanded=true] .chev { transform:rotate(90deg); color:var(--acc); } tr.tver td { background:var(--bg); font-size:12.5px; } tr.tver td.ind { padding-left:40px; color:var(--dim); } .lng.off { color:var(--warn); border-color:var(--warn); text-decoration:none; } .clip { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } /* Карточка людини: шапка з діями, рядок рефералки, підтвердження (#212) */ .uhead { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; } .uhead .acts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .uhead .acts form.int { margin:0; } .uhead .acts .chk { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:13px; } button.danger { color:var(--bad); border-color:var(--bad); background:none; } button.danger:hover { background:var(--bad); color:#fff; } .facts { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; margin:10px 0 16px; padding:9px 14px; border:1px solid var(--line); border-radius:10px; font-size:13px; } .facts .fl { font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); } .dlg-kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:13.5px; } .dlg-kv dt { color:var(--dim); } .dlg-kv dd { margin:0; } .dlg .chk { display:inline-flex; align-items:center; gap:6px; font-size:13px; } /* Вікна з прокруткою в карточці: переписка і події (13.10.2026) */ .chat { max-height:55vh; overflow-y:auto; position:relative; } .chat .older { align-self:center; font-size:12px; padding:2px 10px; margin-bottom:4px; border:1px solid var(--line); border-radius:12px; color:var(--dim); text-decoration:none; } .chat .older:hover { color:var(--tx); background:var(--hover); } .wrap.scroll { max-height:55vh; overflow-y:auto; } .wrap.scroll th { position:sticky; top:0; background:var(--head); z-index:1; } /* Навчання в карточці (#213): зведення і тренування рядками */ .study-sum { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; font-size:13px; } .study { padding:4px 0; } .study .srow { border-bottom:1px solid var(--line); font-size:13px; } .study .srow:last-child { border-bottom:0; } .study .srow > summary, .study div.srow { display:grid; grid-template-columns:140px 1fr auto 64px; gap:12px; align-items:center; padding:7px 12px; } .study .srow > summary { cursor:pointer; list-style:none; } .study .srow > summary::-webkit-details-marker { display:none; } .study .srow > summary:hover { background:var(--hover); } .study details.srow > summary .sl::before { content:"▸ "; color:var(--dim); } .study details.srow[open] > summary .sl::before { content:"▾ "; } .study .sw, .study .sd { color:var(--dim); font-size:12px; } .study .sd { text-align:right; } .study .ev .sl { color:var(--dim); } .study .unk .sl { color:var(--tx); } .study div.srow.ev { grid-template-columns:140px 1fr; } .study .swrong { padding:2px 12px 10px 164px; font-size:12.5px; } .study .swrong ul { margin:4px 0 0; padding-left:18px; } .study .steps { margin:0; padding:2px 12px 10px 164px; list-style:none; font-size:12.5px; display:flex; flex-direction:column; gap:8px; } .study .steps li { display:grid; grid-template-columns:16px 1fr; gap:6px; } .study .steps .mk { font-weight:700; } .study .steps .ok .mk, .study .steps .ok .chose { color:var(--ok); } .study .steps .bad .mk, .study .steps .bad .chose { color:var(--bad); } .study .steps .right { color:var(--ok); } .study .steps .qt { color:var(--tx); } @media (max-width:640px) { .study .srow > summary, .study div.srow { grid-template-columns:1fr auto; } .study .sw { grid-column:1 / -1; } .study .swrong, .study .steps { padding-left:12px; } } /* ── Доступ (#215 етап 2) ─────────────────────────────────────────────── */ .forbidden { max-width:520px; margin:48px auto; text-align:center; } .forbidden h1 { font-size:20px; margin:0 0 8px; } form.inline { display:inline-flex; align-items:center; gap:6px; margin:0; } table.acc td { vertical-align:middle; } .role-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 12px; } .role-tabs a { display:inline-flex; gap:6px; align-items:center; height:32px; padding:0 12px; border:1px solid var(--line); border-radius:8px; color:var(--tx); text-decoration:none; font-size:13px; } .role-tabs a.on { border-color:var(--acc); color:var(--acc); } .role-tabs input[type=text] { height:32px; box-sizing:border-box; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--tx); font:inherit; font-size:13px; min-width:170px; } .role-tabs input[type=text]:focus { outline:none; border-color:var(--acc); } table.matrix td.num input, .colall input { accent-color:var(--acc); cursor:pointer; } table.matrix tr.grp td { color:var(--dim); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; background:var(--hover); } .colall { display:inline-flex; align-items:center; gap:5px; cursor:pointer; } .matrix-acts { display:flex; align-items:center; gap:12px; margin:12px 0; } /* ── База питань (#215 етап 3) ─────────────────────────────────────────── */ .card.warn .t { color:var(--warn); } table.qtable td.qtext { white-space:normal; min-width:280px; max-width:560px; } table.qtable td.qtext a { color:var(--tx); text-decoration:none; } table.qtable td.qtext a:hover { color:var(--acc); } .qflags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; } .qhead { margin:4px 0 14px; } .qhead h1 { font-size:20px; margin:6px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .qgrid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:14px; align-items:start; } .qmain, .qside { display:flex; flex-direction:column; gap:14px; min-width:0; } .qcard { background:var(--card); border:1px solid var(--line); border-radius:10px; } .qcard-h { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); } .qcard-h .sum { text-transform:none; letter-spacing:0; font-weight:500; color:var(--tx); } .qcard-b { padding:12px 14px; font-size:13px; } .qcard-h .langs { display:flex; gap:4px; } .qcard-h .langs a { padding:2px 7px; border:1px solid var(--line); border-radius:6px; color:var(--dim); text-decoration:none; text-transform:none; } .qcard-h .langs a.on { border-color:var(--acc); color:var(--acc); } .tgmsg { background:var(--hover); border:1px solid var(--line); border-radius:12px 12px 12px 4px; padding:10px 12px; max-width:520px; font-size:13px; line-height:1.45; } .tgmsg code { font-size:11px; } /* Екрани бота по черзі (15.10): текст і кнопки — з функцій самого бота. Кнопки під повідомленням, як у Telegram: рядами, однакової ширини в ряду. */ .tg-grp { margin:4px 0 8px; color:var(--dim); font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; } .tg-grp ~ .tg-grp { margin-top:18px; padding-top:12px; border-top:1px solid var(--line); } .tgscreens { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; align-items:start; } .tgscr { margin:0; min-width:0; } .tgscr figcaption { font-size:12px; color:var(--dim); margin-bottom:6px; } .tgscr figcaption .n { display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:9px; background:var(--line); color:var(--tx); font-size:11px; font-weight:600; margin-right:4px; } .tgscr .tg-text { white-space:pre-wrap; overflow-wrap:anywhere; } .tg-kb { display:flex; flex-direction:column; gap:4px; margin-top:4px; max-width:520px; } .tg-row { display:flex; gap:4px; } .tg-b { flex:1 1 0; min-width:0; text-align:center; padding:6px 4px; border-radius:8px; background:var(--card); border:1px solid var(--line); font-size:12px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } a.tg-b { color:var(--acc); text-decoration:none; } .qans h4 { margin:12px 0 4px; font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--dim); } .qans h4:first-child { margin-top:0; } .qans h4 .muted { text-transform:none; letter-spacing:0; font-weight:400; } .qtxt { white-space:pre-wrap; line-height:1.5; } .qvars { margin:0; padding-left:20px; } .quse { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .quse li { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; } .quse .mk { width:14px; flex:none; font-weight:700; } .quse li.on .mk { color:var(--ok); } .quse li.no { color:var(--dim); } .quse li.no b { font-weight:500; } .qhead-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .qacts { display:flex; gap:8px; } .qacts a.btn { display:inline-flex; align-items:center; height:36px; padding:0 12px; border:1px solid var(--line); border-radius:9px; font-size:13px; text-decoration:none; box-sizing:border-box; } button.link { height:auto; padding:0 4px; border:0; background:none; color:var(--acc); font-size:12px; } button.link:hover { text-decoration:underline; } .qrev { padding:8px 0; border-top:1px solid var(--line); } .qrev:first-child { border-top:0; padding-top:0; } .qrev details summary { cursor:pointer; font-size:12px; margin-top:4px; } table.qdiff { width:100%; border-collapse:collapse; margin-top:6px; font-size:12.5px; } table.qdiff th, table.qdiff td { border-top:1px solid var(--line); padding:6px; text-align:left; vertical-align:top; white-space:pre-wrap; overflow-wrap:anywhere; } table.qdiff th { font-weight:600; width:24%; } table.qdiff td.was { color:var(--bad); text-decoration:line-through; text-decoration-color:rgba(127,127,127,.5); width:38%; } table.qdiff td.now { color:var(--ok); width:38%; } .dlg-wide { width:min(860px, calc(100vw - 32px)); } .dlg-wide .dlg-s { max-height:55vh; overflow:auto; } /* Форма правки питання (#215 етап 4). */ .qe .qe-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 14px; } .qe .qe-f { display:flex; flex-direction:column; gap:4px; } .qe .qe-l { font-size:12px; color:var(--dim); display:flex; gap:6px; align-items:center; } .qe .qe-l b { color:var(--tx); text-transform:uppercase; font-size:11px; } .qe input[type=text], .qe textarea { width:100%; box-sizing:border-box; background:var(--bg); color:var(--tx); border:1px solid var(--line); border-radius:9px; padding:8px 10px; font:13px/1.45 -apple-system,BlinkMacSystemFont, "Segoe UI",system-ui,sans-serif; } .qe input[type=text] { height:36px; } .qe textarea { resize:vertical; } .qe textarea.qe-grow { min-height:64px; overflow:hidden; resize:none; font-size:14px; line-height:1.55; padding:10px 12px; } .qe-tabs .langs button { height:24px; padding:0 9px; border-radius:6px; font-size:12px; color:var(--dim); text-transform:uppercase; position:relative; } .qe-tabs .langs button.on { border-color:var(--acc); color:var(--acc); } .qe-tabs .langs button.empty::after { content:""; position:absolute; top:3px; right:3px; width:5px; height:5px; border-radius:50%; background:var(--warn); } .qe-tabs .qcard-h .sum { color:var(--dim); font-weight:400; } .qe input:focus, .qe textarea:focus { outline:none; border-color:var(--acc); } .qe .qe-opt { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--line); } .qe .qe-opt:first-child { border-top:0; padding-top:0; } .qe .qe-right { display:flex; align-items:center; gap:4px; height:36px; font-weight:600; flex:none; width:44px; cursor:pointer; } .qe .qe-right:has(input:checked) { color:var(--ok); } .qe .qe-opt-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; } .qe .qe-opt-b details summary { cursor:pointer; font-size:12px; } .qe .qe-opt-b details .qe-grid { margin-top:6px; grid-template-columns:repeat(3, minmax(0, 1fr)); } .qe .qe-side { display:flex; flex-direction:column; gap:12px; } .qe .qe-chk { display:flex; gap:6px; align-items:center; font-size:13px; cursor:pointer; } /* Вид нового питання (#215 етап 5б): тест або питання консула — вкладки, вибране мʼяким акцентом pri. */ .qe-kinds { display:flex; gap:6px; margin:8px 0 4px; } .qe-kinds a { padding:5px 12px; border:1px solid var(--line); border-radius:8px; color:var(--dim); font-size:13px; } .qe-kinds a:hover { border-color:var(--line2); background:var(--hover); } .qe-kinds a.on { background:var(--b-pri-bg); border-color:var(--b-pri-bd); color:var(--b-pri-fg); } .qe-actions { display:flex; justify-content:flex-end; align-items:center; gap:14px; margin:14px 0 6px; } @media (max-width: 700px) { .qe .qe-grid, .qe .qe-opt-b details .qe-grid { grid-template-columns:1fr; } } .qopts { list-style:none; padding:0; margin:0 0 8px; display:flex; flex-direction:column; gap:4px; } .qopts li.right { color:var(--ok); font-weight:600; } .qexpl { color:var(--tx); line-height:1.5; } table.picks { width:100%; border-collapse:collapse; } table.picks td { border:0; padding:4px 6px; font-size:12.5px; } table.picks td.pt { white-space:normal; } table.picks td.bar { width:30%; } table.picks td.bar span { display:block; height:8px; border-radius:4px; background:var(--line2); min-width:2px; } table.picks tr.right td:first-child { color:var(--ok); font-weight:600; } table.picks tr.right td.bar span { background:var(--ok); } table.picks tr.trap td.bar span { background:var(--bad); } table.picks tr.trap td:first-child { color:var(--bad); font-weight:600; } .qticket { border-top:1px solid var(--line); padding:8px 0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .qticket > div { flex-basis:100%; white-space:pre-wrap; } @media (max-width: 900px) { .qgrid { grid-template-columns:1fr; } } /* ── Випадні списки замість системного