/* Интерфейс CKALIBRO ANALYTICS по UI-киту лендинга.
   Montserrat (текст) + Unbounded Black (заголовки), жёлтый #FDD706, графит #333, фон #F5F5F5.
   Радиусы: крупные блоки 40 · карточки 32 · вложенные 24 · кнопки и метки — пилюля.
   Движение: cubic-bezier(.2,.8,.2,1), 0.4–0.7 с; стрелка −45° → 0° при наведении.
   Действует только при html.kk (кука ui_theme=kk). */

html.kk {
  --y: #FDD706; --y2: #FFA600; --y-soft: #FFF6C4;
  --ink: #333333; --ink2: #3D3D3D; --black: #1A1B1D;
  --bg: #F5F5F5; --card: #FFFFFF; --muted: #5A5D61; --ph: #8A8D91;
  --line: #EEEEEE; --line2: #D6D6D6;
  --blue: #2B7BF3; --blue-bg: #E8F2FE; --green: #4BFF8F; --green-ink: #13843F; --red: #E5484D; --red-bg: #FFEDED;
  --ease: cubic-bezier(.2,.8,.2,1);
  --nav-w: 272px;
}
html.kk body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Montserrat, -apple-system, 'Segoe UI', Arial, sans-serif; font-weight: 400;
  -webkit-font-smoothing: antialiased; padding: 0;
}
html.kk *, html.kk *::before, html.kk *::after { box-sizing: border-box; }
/* атрибут hidden всегда скрывает (иначе display:flex у плашек и галочек его перебивал) */
html.kk [hidden] { display: none !important; }
html.kk button, html.kk input, html.kk select, html.kk textarea { font-family: inherit; }
html.kk a { color: var(--blue); text-decoration: none; }
html.kk ::selection { background: var(--y); color: var(--ink); }
html.kk .kk-ic { flex: none; display: block; }
html.kk .kk-over { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html.kk .kk-muted { color: var(--muted); }
html.kk .kk-hint { font-size: 12px; color: var(--muted); margin: 10px 4px 0; }

/* =================== Каркас =================== */
html.kk .kk-app { display: flex; min-height: 100vh; }
html.kk .kk-nav {
  position: sticky; top: 0; height: 100vh; width: var(--nav-w); flex: none;
  display: flex; flex-direction: column; gap: 22px; padding: 22px 16px;
  background: var(--ink); color: #F5F5F5; overflow-y: auto; z-index: 50;
}
html.kk .kk-brand { display: flex; align-items: center; gap: 12px; color: inherit; padding: 0 6px; }
html.kk .kk-brand:hover { text-decoration: none; }
html.kk .kk-logo {
  width: 44px; height: 44px; border-radius: 50%; background: var(--y); color: var(--ink); flex: none;
  display: grid; place-items: center;
}
html.kk .kk-logo svg { width: 64%; height: auto; display: block; }
html.kk .kk-brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
html.kk .kk-brand-txt b { font-family: Unbounded, sans-serif; font-weight: 900; font-size: 15px; letter-spacing: -.02em; }
html.kk .kk-brand-txt small { font-size: 10px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--y); margin-top: 2px; }
html.kk .kk-nav-proj { padding: 14px 16px; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 4px; }
html.kk .kk-nav-proj .kk-over { color: rgba(255,255,255,.5); font-size: 10px; }
html.kk .kk-nav-proj b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.kk .kk-nav-list { display: flex; flex-direction: column; gap: 4px; }
html.kk .kk-nav-list a {
  position: relative; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px;
  border-radius: 999px; color: rgba(255,255,255,.78); font-size: 14px; font-weight: 500;
  transition: background .3s, color .3s;
}
html.kk .kk-nav-list a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
html.kk .kk-nav-list a.active { background: var(--y); color: var(--ink); font-weight: 600; }
html.kk .kk-dot-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #FC455B; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
html.kk .kk-nav-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
html.kk .kk-user { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 10px; border-radius: 22px; background: rgba(255,255,255,.06); }
html.kk .kk-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--y); color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
html.kk .kk-avatar-sm { width: 32px; height: 32px; font-size: 12px; background: var(--bg); color: var(--ink); }
html.kk .kk-user-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: #fff; border-radius: 16px; }
html.kk .kk-user-link:hover { text-decoration: none; opacity: .85; }
html.kk .kk-avatar-img { object-fit: cover; background: var(--bg); padding: 0; }
html.kk .kk-avatar-xl { width: 112px; height: 112px; font-size: 34px; }
html.kk .kk-prof-ava { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
html.kk .kk-prof-ava-txt { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 220px; }
html.kk .kk-prof-ava label.kk-btn { cursor: pointer; }
html.kk .kk-uorg { font-size: 13px; color: var(--ink); }
html.kk .kk-field select, html.kk .kk-field .kk-occ + input { width: 100%; }
html.kk .kk-field .kk-occ + input { margin-top: 8px; }
html.kk .kk-form select { height: 60px; padding: 0 44px 0 26px; font-size: 16px; width: 100%; }
html.kk .kk-user-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
html.kk .kk-user-txt b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.kk .kk-user-txt small { font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.kk .kk-logout { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.7); transition: background .3s, color .3s; flex: none; }
html.kk .kk-logout:hover { background: rgba(255,255,255,.1); color: #fff; }

html.kk .kk-main { flex: 1; min-width: 0; padding: 36px clamp(16px, 3vw, 44px) 120px; display: flex; flex-direction: column; gap: 20px; }
html.kk .kk-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 4px 4px 14px; }
html.kk .kk-hero-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html.kk .kk-hero h1 {
  margin: 0; font-family: Unbounded, sans-serif; font-weight: 900; font-size: clamp(28px, 3.4vw, 48px);
  line-height: .98; letter-spacing: -.045em; color: var(--ink);
}
html.kk .kk-hero p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); font-weight: 400; max-width: 760px; }
html.kk .kk-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* =================== Кнопки =================== */
html.kk .kk-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 56px; padding: 0 7px 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: transform .4s var(--ease), background .3s, color .3s, border-color .3s;
}
html.kk .kk-btn:hover { text-decoration: none; }
html.kk .kk-arr { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; transform: rotate(-45deg); transition: transform .5s var(--ease); flex: none; }
html.kk .kk-btn:hover .kk-arr, html.kk a:hover > .kk-arr, html.kk .kk-card:hover .kk-arr { transform: rotate(0deg); }
html.kk .kk-btn-yellow { background: var(--y); color: var(--ink); }
html.kk .kk-btn-yellow .kk-arr { background: var(--ink); color: var(--y); }
html.kk .kk-btn-yellow:hover { transform: scale(1.03); color: var(--ink); }
html.kk .kk-btn-dark { background: var(--ink); color: #fff; }
html.kk .kk-btn-dark .kk-arr { background: var(--y); color: var(--ink); }
html.kk .kk-btn-dark:hover { background: var(--black); color: #fff; }
html.kk .kk-btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line2); padding: 0 24px; height: 48px; font-weight: 500; }
html.kk .kk-btn-outline:hover { border-color: var(--ink); color: var(--ink); }
html.kk .kk-btn-sm { height: 46px; font-size: 14px; padding-left: 20px; }
html.kk .kk-btn-sm .kk-arr { width: 34px; height: 34px; }
html.kk .kk-btn-outline.kk-btn-sm { height: 40px; padding: 0 18px; }
html.kk .kk-btn-ghost-danger { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .3s, color .3s; }
html.kk .kk-btn-ghost-danger:hover { background: var(--red-bg); color: var(--red); }

/* =================== Карточки =================== */
html.kk .kk-grid { display: grid; gap: 14px; }
html.kk .kk-grid-projects { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
html.kk .kk-grid-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 228px), 1fr)); }
html.kk .kk-grid-status { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
html.kk .kk-card {
  position: relative; display: flex; flex-direction: column; border-radius: 32px; padding: 28px; overflow: hidden; isolation: isolate;
  color: var(--ink); text-decoration: none; transition: transform .5s var(--ease);
}
html.kk a.kk-card:hover { transform: translateY(-6px); text-decoration: none; }
html.kk .kk-card-plain { background: var(--card); }
html.kk .kk-card-dark { background: var(--ink); color: #fff; }
html.kk .kk-card-light {
  background: radial-gradient(440px circle at var(--mx, -500px) var(--my, -500px), #FFB800 0%, color-mix(in oklch, #FDD706 85%, transparent) 22%, color-mix(in oklch, #FDD706 35%, transparent) 48%, transparent 72%), var(--card);
}
html.kk .kk-blob { position: absolute; right: -22%; top: -18%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #FFE55A 0%, #FDD706 45%, #FFA600 100%); filter: blur(30px); opacity: .8; pointer-events: none; z-index: -1; transition: opacity .6s, filter .6s; }
html.kk .kk-card:hover .kk-blob { opacity: 1; filter: blur(22px) saturate(1.25); }
html.kk .kk-glow { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 70%; background: radial-gradient(60% 60% at 50% 70%, color-mix(in oklch, #FDD706 55%, #333333) 0%, transparent 70%); pointer-events: none; z-index: -1; }
html.kk .kk-card h3 { margin: 0; font-family: Unbounded, sans-serif; font-weight: 900; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
html.kk .kk-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
html.kk .kk-card-dark p { color: rgba(255,255,255,.7); }
html.kk .kk-card-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
html.kk .kk-ic-round { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink); flex: none; }
html.kk .kk-card-dark .kk-ic-round { background: rgba(255,255,255,.1); color: var(--y); }
html.kk .kk-card-light .kk-ic-round { background: rgba(255,255,255,.75); }
html.kk .kk-ic-sm { width: 40px; height: 40px; }
html.kk .kk-card-project { min-height: 240px; gap: 18px; }
html.kk .kk-card-project .kk-card-bottom { gap: 18px; align-items: flex-start; }
html.kk .kk-card-project h3 { font-size: 26px; }
html.kk .kk-card-new { min-height: 240px; gap: 18px; }
html.kk .kk-tile { min-height: 210px; gap: 18px; }
html.kk .kk-tile .kk-card-bottom { gap: 8px; padding-right: 40px; }
html.kk .kk-tile h3 { font-size: clamp(17px, 1.5vw, 21px); overflow-wrap: anywhere; hyphens: auto; }
html.kk .kk-arr-corner { position: absolute; right: 22px; bottom: 22px; width: 42px; height: 42px; background: var(--ink); color: #fff; }
html.kk .kk-card-dark .kk-arr-corner { background: var(--y); color: var(--ink); }
html.kk .kk-chip { align-self: flex-start; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
html.kk .kk-chip-blue { background: var(--blue-bg); color: var(--blue); height: 28px; }

html.kk .kk-panel { gap: 16px; }
html.kk .kk-card > .kk-btn, html.kk .kk-card > a.kk-btn { align-self: flex-start; }
html.kk .kk-panel-head { display: flex; align-items: center; gap: 12px; }
html.kk .kk-panel-head h3 { font-size: 18px; }
html.kk .kk-stat { gap: 6px; justify-content: space-between; }
html.kk .kk-stat b { font-family: Unbounded, sans-serif; font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -.04em; margin-top: auto; }
html.kk .kk-stat small { font-size: 13px; color: var(--muted); }
html.kk .kk-online { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; padding: 10px 20px 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; }
html.kk .kk-online > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
html.kk .kk-online small { font-size: 11px; font-weight: 500; color: var(--green); }
html.kk .kk-online b { font-size: 14px; font-weight: 500; }
html.kk .kk-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: kkpulse 2s ease-in-out infinite; flex: none; }
@keyframes kkpulse { 50% { box-shadow: 0 0 2px var(--green); opacity: .7; } }

html.kk .kk-section { padding: 28px; gap: 18px; }
html.kk .kk-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
html.kk .kk-section-head > div { display: flex; flex-direction: column; gap: 6px; }
html.kk .kk-section h2 { margin: 0; font-family: Unbounded, sans-serif; font-weight: 900; font-size: 22px; letter-spacing: -.03em; }

/* Статусы-точки */
html.kk .kk-status { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
html.kk .kk-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
html.kk .kk-ok { background: #E4FBEC; color: var(--green-ink); }
html.kk .kk-run { background: var(--blue-bg); color: var(--blue); }
html.kk .kk-wait { background: var(--y-soft); color: #8A6D00; }
html.kk .kk-bad { background: var(--red-bg); color: var(--red); }

/* Автоматика */
html.kk .kk-auto { display: flex; flex-direction: column; gap: 8px; }
html.kk .kk-auto-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 22px; background: var(--bg); }
html.kk .kk-auto-row.bad { background: var(--red-bg); }
html.kk .kk-auto-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green-ink); box-shadow: 0 0 0 4px rgba(19,132,63,.15); flex: none; }
html.kk .kk-auto-row.bad .kk-auto-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(229,72,77,.18); }
html.kk .kk-auto-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.kk .kk-auto-name b { font-size: 14px; font-weight: 600; }
html.kk .kk-auto-name small { font-size: 12px; color: var(--red); }
html.kk .kk-auto-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
html.kk .kk-auto-meta small { font-size: 12px; color: var(--muted); }

/* Таблицы новых страниц */
html.kk .kk-table-wrap { overflow-x: auto; border-radius: 22px; border: 1px solid var(--line); }
html.kk .kk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
html.kk .kk-table th { text-align: left; padding: 12px 14px; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 0; }
html.kk .kk-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
html.kk .kk-table tbody tr { transition: background .2s; }
html.kk .kk-table tbody tr:hover { background: #FAFAFA; }
html.kk .kk-td-act { text-align: right; width: 1%; white-space: nowrap; }
html.kk .kk-td-act form { display: inline; margin: 0; }
/* таблицы: длинные имена и email переносятся, статус и кнопки — нет (иначе столбец кнопок уезжал за край) */
html.kk .kk-table td.kk-td-email { overflow-wrap: anywhere; min-width: 150px; }
html.kk .kk-table .kk-status, html.kk .kk-td-act { white-space: nowrap; overflow-wrap: normal; }
/* компактные кнопки в строках таблиц — одной высоты с «Убрать/Заблокировать» */
html.kk .kk-btn-xs { height: 34px; padding: 0 16px; gap: 6px; font-size: 13px; justify-content: center; }
html.kk .kk-btn-xs.kk-btn-yellow:hover { transform: none; filter: brightness(.97); }
html.kk .kk-btn-outline.kk-btn-xs { height: 34px; padding: 0 16px; }
html.kk .kk-person { display: inline-flex; align-items: center; gap: 10px; }

/* Формы */
html.kk .kk-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
html.kk .kk-inline-form input, html.kk .kk-inline-form select { flex: 1; min-width: 160px; }
html.kk .kk-card-new .kk-inline-form input { background: rgba(255,255,255,.08); color: #fff; }
html.kk .kk-card-new .kk-inline-form input::placeholder { color: rgba(255,255,255,.5); }
html.kk .kk-card-new .kk-inline-form input:focus { background: rgba(255,255,255,.12); box-shadow: 0 0 0 2px var(--y); }
html.kk .kk-alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: 22px; font-size: 14px; line-height: 1.45; }
html.kk .kk-alert-err { background: var(--red-bg); color: #B42318; }
html.kk .kk-alert-warn { background: var(--y-soft); color: #6B5500; }
html.kk .kk-check { display: flex; align-items: center; gap: 10px; padding: 4px 8px; font-size: 14px; cursor: pointer; }
html.kk .kk-check input { width: 18px; height: 18px; margin: 0; }

/* Поля ввода (общие) */
html.kk input[type=text], html.kk input[type=email], html.kk input[type=password], html.kk input[type=number],
html.kk input[type=date], html.kk input[type=search], html.kk input[type=tel], html.kk input:not([type]), html.kk select, html.kk textarea {
  height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; background: var(--bg);
  color: var(--ink); font-size: 14px; outline: none; margin: 0; transition: box-shadow .2s, background .2s;
}
html.kk textarea { height: auto; padding: 12px 18px; border-radius: 20px; }
html.kk select { padding-right: 38px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; }
html.kk select[multiple] { height: auto; border-radius: 18px; padding: 8px; background-image: none; }
html.kk input:focus, html.kk select:focus, html.kk textarea:focus { background-color: var(--card); box-shadow: 0 0 0 2px var(--ink); }
html.kk input::placeholder, html.kk textarea::placeholder { color: var(--ph); }
html.kk input[type=checkbox], html.kk input[type=radio] { accent-color: var(--ink); width: 16px; height: 16px; }

/* =================== Вход =================== */
html.kk .kk-auth-page { background: var(--bg); }
html.kk .kk-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; padding: 12px; }
html.kk .kk-auth-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 40px; background: var(--ink); color: #fff; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
html.kk .kk-auth-hero .kk-blob { right: -25%; top: auto; bottom: -35%; width: 90%; opacity: .55; filter: blur(60px); }
html.kk .kk-auth-hero-txt { display: flex; flex-direction: column; gap: 22px; max-width: 640px; }
html.kk .kk-auth-hero .kk-over { color: var(--y); }
html.kk .kk-auth-hero h1 { margin: 0; font-family: Unbounded, sans-serif; font-weight: 900; font-size: clamp(34px, 4.6vw, 68px); line-height: .96; letter-spacing: -.045em; }
html.kk .kk-auth-hero p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.72); font-weight: 300; max-width: 520px; }
html.kk .kk-tags { display: flex; flex-wrap: wrap; gap: 8px; }
html.kk .kk-tags span { height: 34px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); font-size: 13px; font-weight: 500; }
html.kk .kk-auth-form { display: grid; place-items: center; padding: 24px; }
html.kk .kk-form-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 18px; }
html.kk .kk-form-card h2 { margin: 0; font-family: Unbounded, sans-serif; font-weight: 900; font-size: 40px; letter-spacing: -.045em; line-height: 1; }
html.kk .kk-form { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 40px; background: var(--card); }
html.kk .kk-form input:not([type=checkbox]) { height: 60px; padding: 0 26px; font-size: 16px; }
html.kk .kk-form .kk-btn { height: 60px; }
html.kk .kk-form-foot { margin: 0; padding: 0 20px; font-size: 14px; color: var(--muted); }
html.kk .kk-form-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* =================== Пользователи: строки-карточки =================== */
html.kk .kk-ulist { padding: 24px 0 8px; gap: 8px; }
html.kk .kk-ulist .kk-section-head { padding: 0 28px; }
html.kk .kk-urow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 14px 28px; border-top: 1px solid var(--line); }
html.kk .kk-urow-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.kk .kk-urow-main b { font-size: 15px; }
html.kk .kk-urow-main .kk-muted { font-size: 13px; overflow-wrap: anywhere; }
html.kk .kk-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
html.kk .kk-acts form { margin: 0; display: inline-flex; }
html.kk .kk-acts-left { margin-left: 0; }
html.kk .kk-mailinfo { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--blue-bg); color: var(--blue); font-size: 12px; font-weight: 500; }
html.kk .kk-mailinfo:hover { text-decoration: none; filter: brightness(.97); }
html.kk .kk-mailinfo .kk-dot-count { margin-left: 2px; }
html.kk .kk-hero p .kk-status { vertical-align: middle; }

/* =================== Окно письма =================== */
html.kk .kk-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(26,27,29,.45); backdrop-filter: blur(4px); }
html.kk .kk-modal[hidden] { display: none; }
html.kk .kk-modal-card { width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 32px; background: var(--card); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
html.kk .kk-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
html.kk .kk-modal-head > div { display: flex; flex-direction: column; gap: 6px; }
html.kk .kk-modal-head h2 { margin: 0; font-family: Unbounded, sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -.03em; }
html.kk .kk-modal-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
html.kk .kk-modal-x:hover { background: #ECECEC; }
html.kk .kk-field { display: flex; flex-direction: column; gap: 6px; }
html.kk .kk-field > span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-left: 6px; }
html.kk .kk-field input { width: 100%; }
html.kk .kk-field textarea { width: 100%; min-height: 220px; resize: vertical; line-height: 1.5; }
html.kk .kk-field input[readonly] { color: var(--muted); }
html.kk .kk-modal textarea:disabled, html.kk .kk-modal input:disabled { opacity: .45; }
html.kk .kk-modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 4px; }

/* =================== Настройки почты =================== */
html.kk .kk-mailset { gap: 16px; }
html.kk .kk-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px 14px; }
html.kk .kk-details { border-radius: 22px; background: var(--bg); padding: 14px 18px; }
html.kk .kk-details summary { cursor: pointer; font-size: 14px; font-weight: 600; }
html.kk .kk-details[open] summary { margin-bottom: 12px; }
html.kk .kk-details input { background: var(--card); }
html.kk .kk-alert-ok { background: #E4FBEC; color: var(--green-ink); }
html.kk .kk-alert a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* =================== Уведомления и переписка =================== */
html.kk .kk-thread { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 -12px; border-radius: 22px; color: var(--ink); transition: background .2s; }
html.kk .kk-thread + .kk-thread { margin-top: 2px; }
html.kk .kk-thread:hover { background: var(--bg); text-decoration: none; }
html.kk .kk-thread.unread { background: var(--y-soft); }
html.kk .kk-thread-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html.kk .kk-thread-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html.kk .kk-thread-text { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.kk .kk-thread-text em { font-style: normal; color: var(--ink); font-weight: 500; }
html.kk .kk-thread-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
html.kk .kk-thread-meta small { font-size: 12px; color: var(--muted); }
/* инсайты */
html.kk .kk-ins-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
html.kk .kk-ins { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 22px; background: var(--bg); border-left: 4px solid var(--line2); }
html.kk .kk-ins-good { border-left-color: #13843F; }
html.kk .kk-ins-bad { border-left-color: #FC455B; }
html.kk .kk-ins-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.kk .kk-ins-chip { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html.kk .kk-ins-good .kk-ins-chip { background: #E6F9EE; color: #13843F; }
html.kk .kk-ins-bad .kk-ins-chip { background: #FFEDEF; color: #D92D43; }
html.kk .kk-ins-ch { font-size: 12px; color: var(--muted); }
html.kk .kk-ins h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ink); font-family: inherit; }
html.kk .kk-ins p { margin: 0; font-size: 14px; line-height: 1.5; }
html.kk .kk-ins .kk-ins-hint { font-size: 13px; color: var(--muted); }
html.kk .kk-ins-how summary { cursor: pointer; }
html.kk .kk-ins-how p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
/* вкладки (папки почты, фильтры уведомлений) */
html.kk .kk-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
html.kk .kk-tabs a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; }
html.kk .kk-tabs a:hover { text-decoration: none; background: #ECECEC; }
html.kk .kk-tabs a.active { background: var(--ink); color: #fff; }
html.kk .kk-tabs a i { font-style: normal; font-size: 12px; opacity: .6; }
html.kk .kk-tabs a i.kk-tab-new { opacity: 1; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #FC455B; color: #fff; font-weight: 700; display: grid; place-items: center; }
/* лента уведомлений */
html.kk .kk-note { display: block; margin: 0 -12px; border-radius: 22px; color: var(--ink); transition: background .2s; }
html.kk .kk-note + .kk-note { margin-top: 2px; }
html.kk a.kk-note, html.kk .kk-note > summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
html.kk .kk-note > summary::-webkit-details-marker { display: none; }
html.kk .kk-note:hover { background: var(--bg); text-decoration: none; }
html.kk .kk-note.unread { background: #FFF1F3; }
html.kk .kk-note[open] { background: var(--bg); }
html.kk .kk-note-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink); }
html.kk .kk-n-msg { background: var(--blue-bg); color: var(--blue); }
html.kk .kk-n-news { background: var(--y-soft); color: #8A6D00; }
html.kk .kk-n-insight { background: #E6F9EE; color: var(--green-ink); }
html.kk .kk-n-admin { background: var(--ink); color: #fff; }
html.kk .kk-note-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html.kk .kk-note-type { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html.kk .kk-note-text { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.kk .kk-note-dot { width: 10px; height: 10px; border-radius: 50%; background: #FC455B; }
html.kk .kk-note-body { padding: 0 16px 18px 70px; white-space: pre-wrap; line-height: 1.55; font-size: 14px; }
@media (max-width: 640px) { html.kk .kk-note-body { padding-left: 16px; } }
html.kk .kk-msgs { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
html.kk .kk-msg { max-width: min(680px, 88%); display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-radius: 22px; }
html.kk .kk-msg.in { align-self: flex-start; background: var(--bg); border-bottom-left-radius: 8px; }
html.kk .kk-msg.out { align-self: flex-end; background: var(--ink); color: #F5F5F5; border-bottom-right-radius: 8px; }
html.kk .kk-msg-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
html.kk .kk-msg-head small { font-size: 12px; color: var(--muted); }
html.kk .kk-msg.out .kk-msg-head small { color: rgba(255,255,255,.55); }
html.kk .kk-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; }

/* =================== Cookie =================== */
html.kk .kk-cookie { position: fixed; right: 16px; bottom: 16px; z-index: 1000; max-width: 560px; display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 22px; border-radius: 28px; background: rgba(51,51,51,.94); color: #F5F5F5; backdrop-filter: blur(10px); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
html.kk .kk-cookie[hidden] { display: none; }
html.kk .kk-cookie p { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.8); }
html.kk .kk-cookie button { flex: none; height: 44px; padding: 0 22px; border-radius: 999px; border: 0; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .3s; }
html.kk .kk-cookie button:hover { background: var(--y); }

/* =================== Встроенные страницы отчётов (старая разметка) =================== */
html.kk .kk-legacy-page .top, html.kk .kk-legacy-page .topbar { display: none !important; }
html.kk .kk-legacy { display: flex; flex-direction: column; gap: 0; min-width: 0; }
html.kk .kk-legacy .wrap, html.kk .kk-legacy .layout { width: 100%; max-width: none; margin: 0; padding: 0; }
html.kk .kk-legacy .layout { gap: 14px; }
html.kk .kk-legacy .wrap > .panel:first-child > h1:first-child { display: none; }
html.kk .kk-legacy .panel {
  background: var(--card); border: 0; border-radius: 32px; box-shadow: none; padding: 26px 28px; margin-bottom: 14px;
}
html.kk .kk-legacy h1, html.kk .kk-legacy h2 { font-family: Unbounded, sans-serif; font-weight: 900; letter-spacing: -.03em; color: var(--ink); }
html.kk .kk-legacy h1 { font-size: 24px; }
html.kk .kk-legacy h2 { font-size: 17px; margin-bottom: 12px; }
html.kk .kk-legacy h3, html.kk .kk-legacy .grp-title { font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
html.kk .kk-legacy .muted, html.kk .kk-legacy .hint, html.kk .kk-legacy .rtype, html.kk .kk-legacy .spinner { color: var(--muted); }

/* кнопки */
html.kk .kk-legacy .btn, html.kk .kk-legacy .btn-build {
  height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--y); color: var(--ink);
  font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .4s var(--ease), background .3s;
}
html.kk .kk-legacy .btn-build { height: 56px; padding: 0 34px; font-size: 16px; }
html.kk .kk-legacy .btn:hover, html.kk .kk-legacy .btn-build:hover { transform: scale(1.03); background: var(--y); }
html.kk .kk-legacy .btn:disabled, html.kk .kk-legacy .btn-build:disabled { opacity: .45; transform: none; }
html.kk .kk-legacy .btn-sec, html.kk .kk-legacy .icon-btn, html.kk .kk-legacy .quick button, html.kk .kk-legacy button.quick {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--card); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color .3s, background .3s, color .3s;
}
html.kk .kk-legacy .btn-sec:hover, html.kk .kk-legacy .icon-btn:hover, html.kk .kk-legacy .quick button:hover, html.kk .kk-legacy button.quick:hover { border-color: var(--ink); background: var(--card); }
html.kk .kk-legacy .quick button.activePeriod { background: var(--ink); color: #fff; border-color: var(--ink); }
html.kk .kk-legacy .quick { gap: 6px; }
/* иконки к кнопкам, у которых были смайлики */
html.kk .kk-legacy #saveBtn::before, html.kk .kk-legacy #editChannelsBtn::before, html.kk .kk-legacy #viewToggle::before, html.kk .kk-legacy #exportBtn::before {
  content: ''; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat;
}
html.kk .kk-legacy #saveBtn { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h11l3 3v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M7 3v5h8V3'/%3E%3Crect x='7' y='13' width='10' height='6' rx='1'/%3E%3C/svg%3E"); }
html.kk .kk-legacy #editChannelsBtn { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16Z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); }
html.kk .kk-legacy #viewToggle { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-5 3 3 5-7'/%3E%3C/svg%3E"); }
html.kk .kk-legacy #exportBtn { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E"); }
html.kk .kk-legacy .filter-row .fdel, html.kk .kk-legacy .ed-ch-del, html.kk .kk-legacy .ed-rule-del, html.kk .kk-legacy .gx-del {
  border: 0; background: transparent; color: var(--muted); border-radius: 999px; width: 32px; height: 32px; padding: 0; cursor: pointer; transition: background .3s, color .3s;
}
html.kk .kk-legacy .filter-row .fdel:hover, html.kk .kk-legacy .ed-ch-del:hover, html.kk .kk-legacy .ed-rule-del:hover, html.kk .kk-legacy .gx-del:hover { background: var(--red-bg); color: var(--red); }

/* сегменты и переключатель витрин — тёмная пилюля, активный жёлтый */
html.kk .kk-legacy .seg, html.kk .kk-legacy .vitrina {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border: 0; border-radius: 999px; background: var(--ink); overflow: visible;
}
html.kk .kk-legacy .vitrina { border-radius: 30px; }
html.kk .kk-legacy .seg.hidden { display: none; }
html.kk .kk-legacy .seg button, html.kk .kk-legacy .vitrina button {
  height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.78);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: background .3s, color .3s;
}
html.kk .kk-legacy .vitrina button { height: 42px; font-size: 14px; padding: 0 18px; }
html.kk .kk-legacy .seg button:hover, html.kk .kk-legacy .vitrina button:hover { color: #fff; }
html.kk .kk-legacy .seg button.active, html.kk .kk-legacy .vitrina button.active { background: var(--y); color: var(--ink); font-weight: 600; }

/* чипы, поля выбора, чекбоксы-строки */
html.kk .kk-legacy .chip { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); font-size: 13px; transition: border-color .3s, background .3s; }
html.kk .kk-legacy .chip:hover { border-color: var(--ink); }
html.kk .kk-legacy .chip:has(input:checked) { background: var(--y); border-color: var(--y); font-weight: 600; }
html.kk .kk-legacy .chip input { display: none; }
html.kk .kk-legacy .fld { border-radius: 16px; border: 1px solid var(--line); padding: 9px 12px; font-size: 13px; transition: border-color .3s, background .3s; }
html.kk .kk-legacy .fld:hover { border-color: var(--ink); }
html.kk .kk-legacy .fld.checked { background: var(--y-soft); border-color: var(--y); }
html.kk .kk-legacy .fld.disabled { background: var(--bg); }
/* списки галочек (группировки, метрики, конверсии) — облака чипов: выбранный жёлтый */
html.kk .kk-legacy .cols { flex-direction: column; gap: 24px; }
html.kk .kk-legacy .col { min-width: 0; flex: none; }
html.kk .kk-legacy .col:has(> label.opt), html.kk .kk-legacy .col > div:has(> label.chk) { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
html.kk .kk-legacy .col:has(> label.opt) > h3 { flex-basis: 100%; margin: 0 0 6px; }
html.kk .kk-legacy label.chk, html.kk .kk-legacy label.opt {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; margin: 0;
  border: 1px solid var(--line2); border-radius: 999px; background: var(--card); color: var(--ink);
  font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .25s, border-color .25s;
}
html.kk .kk-legacy label.chk:hover, html.kk .kk-legacy label.opt:hover { border-color: var(--ink); }
html.kk .kk-legacy label.chk:has(input:checked), html.kk .kk-legacy label.opt:has(input:checked) { background: var(--y); border-color: var(--y); font-weight: 600; }
html.kk .kk-legacy label.chk > input, html.kk .kk-legacy label.opt > input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
html.kk .kk-legacy .period label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px 6px; }

/* таблицы отчётов — плотные, читаемые */
html.kk .kk-legacy table { font-size: 13px; font-variant-numeric: tabular-nums; }
html.kk .kk-legacy th, html.kk .kk-legacy td { border-bottom: 1px solid var(--line); padding: 10px 14px; }
html.kk .kk-legacy th, html.kk .kk-legacy thead th {
  background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #E4E4E4;
}
html.kk .kk-legacy thead th:hover { color: var(--ink); }
html.kk .kk-legacy th.dragover { background: var(--y-soft); }
html.kk .kk-legacy tbody tr:hover td { background: #FAFAF7; }
html.kk .kk-legacy tr.total td, html.kk .kk-legacy tr.total { background: var(--y-soft); font-weight: 700; }
html.kk .kk-legacy tr.total td { border-bottom: 1px solid var(--y); }
html.kk .kk-legacy .tbl-scroll { border: 1px solid var(--line); border-radius: 22px; }
html.kk .kk-legacy table.cross-tbl th, html.kk .kk-legacy table.cross-tbl td { border-right: 1px solid #F0F0F0; }
html.kk .kk-legacy .arr, html.kk .kk-legacy .caret, html.kk .kk-legacy .ed-tw { color: var(--y2); }
html.kk .kk-legacy .rsz:hover, html.kk .kk-legacy .rsz.rsz-active { background: var(--y); }
html.kk .kk-legacy .pgsz:hover, html.kk .kk-legacy .pgnum:hover, html.kk .kk-legacy .pgnav:hover { background: var(--y-soft) !important; }

/* сообщения */
html.kk .kk-legacy .err { background: var(--red-bg); color: #B42318; border-radius: 20px; padding: 14px 18px; }
html.kk .kk-legacy .status { border-radius: 20px; padding: 12px 16px; }
html.kk .kk-legacy .status.ok { background: #E4FBEC; color: var(--green-ink); }
html.kk .kk-legacy .status.warn { background: var(--y-soft); color: #6B5500; }

/* поле выбора файла и кнопка рядом: при переносе на новую строку — с отступом, а не вплотную */
html.kk .kk-legacy input[type=file] { margin: 6px 10px 6px 0; vertical-align: middle; font-size: 13px; }
html.kk .kk-legacy input[type=file] + .btn { margin: 6px 0 !important; vertical-align: middle; }
html.kk .kk-legacy input[type=file]::file-selector-button { height: 36px; padding: 0 16px; margin-right: 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; }
html.kk .kk-legacy input[type=file]::file-selector-button:hover { border-color: var(--ink); }
/* серые вложенные блоки (загрузка файла и т.п.) — в стиле карточек */
html.kk .kk-legacy .panel div[style*="background:#fafafa"] { background: var(--bg) !important; border: 0 !important; border-radius: 22px !important; padding: 18px 20px !important; }
html.kk .kk-legacy .panel div[style*="background:#fafafa"] select, html.kk .kk-legacy .panel div[style*="background:#fafafa"] input[type=text] { background-color: var(--card); }
/* настройки: правая колонка не шире экрана — широкие таблицы разделов прокручиваются внутри карточки */
html.kk .kk-legacy .layout > .content { flex: 1; min-width: 0; }
html.kk .kk-legacy .sect > .panel { overflow-x: auto; }
/* настройки: внутреннее меню разделов */
html.kk .kk-legacy .sidebar { width: 250px; background: var(--card); border-radius: 32px; padding: 10px; align-self: flex-start; position: sticky; top: 20px; }
html.kk .kk-legacy .sidebar button { display: block; width: 100%; height: 44px; padding: 0 18px; margin: 0 0 4px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background .3s; }
html.kk .kk-legacy .sidebar button:hover { background: var(--bg); }
html.kk .kk-legacy .sidebar button.active { background: var(--ink); color: #fff; font-weight: 600; }
html.kk .kk-legacy .list { border: 1px solid var(--line); border-radius: 22px; }
html.kk .kk-legacy .row { border-bottom-color: var(--line); }

/* дерево меток и редактор каналов */
html.kk .kk-legacy .dimchip { border-radius: 999px; border: 1px solid var(--line2); background: var(--card); height: 42px; padding: 0 14px 0 8px; }
html.kk .kk-legacy .dimchip.on { background: var(--y-soft); border-color: var(--y); }
html.kk .kk-legacy .dimchip .ord { width: 26px; height: 26px; background: var(--ink); color: var(--y); }
html.kk .kk-legacy .dimchip .ord.off { background: #E4E4E4; color: var(--muted); }
html.kk .kk-legacy .ed-left, html.kk .kk-legacy .ed-ch { border: 1px solid var(--line); border-radius: 22px; }
html.kk .kk-legacy .ed-ch.ed-ch-over { border-color: var(--y); background: var(--y-soft); box-shadow: 0 0 0 3px rgba(253,215,6,.35); }
html.kk .kk-legacy .ed-rule { background: var(--bg); border-radius: 999px; padding: 6px 12px; }
html.kk .kk-legacy .ed-badge { background: var(--blue-bg); color: var(--blue); border-radius: 999px; padding: 2px 9px; }
html.kk .kk-legacy .ed-node { border-radius: 12px; }

/* =================== Адаптив =================== */
@media (max-width: 1100px) {
  html.kk .kk-grid-status { grid-template-columns: 1fr 1fr; }
  html.kk .kk-grid-status > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  html.kk .kk-app { flex-direction: column; }
  html.kk .kk-nav { position: static; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border-radius: 0 0 28px 28px; }
  html.kk .kk-nav-proj, html.kk .kk-brand-txt small, html.kk .kk-user-txt { display: none; }
  html.kk .kk-nav-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  html.kk .kk-nav-list a { flex: none; height: 40px; }
  html.kk .kk-nav-bottom { margin: 0; flex-direction: row; width: 100%; align-items: center; }
  html.kk .kk-auth { grid-template-columns: 1fr; }
  html.kk .kk-auth-hero { min-height: auto; }
  html.kk .kk-legacy .layout { flex-direction: column; }
  html.kk .kk-legacy .sidebar { width: 100%; position: static; }
}
@media (max-width: 600px) {
  html.kk .kk-urow { padding: 14px 18px; }
  html.kk .kk-acts { margin-left: 0; width: 100%; }
  html.kk .kk-modal-card { padding: 20px; border-radius: 24px; }
  /* таблицы новых страниц: строка — карточка, поля друг под другом, кнопка видна без прокрутки вбок */
  html.kk .kk-table thead { display: none; }
  html.kk .kk-table, html.kk .kk-table tbody, html.kk .kk-table tr, html.kk .kk-table td { display: block; width: 100%; }
  html.kk .kk-table tr { padding: 10px 0; border-top: 1px solid var(--line); }
  html.kk .kk-table tbody tr:first-child { border-top: 0; }
  html.kk .kk-table td { border: 0; padding: 3px 16px; }
  html.kk .kk-table td.kk-td-act { text-align: left; width: 100%; padding-top: 8px; }
  html.kk .kk-table td.kk-td-act:empty { display: none; }
  html.kk .kk-grid-status { grid-template-columns: 1fr; }
  html.kk .kk-cookie { left: 16px; flex-direction: column; align-items: stretch; }
}