/* ============================================================================
   RIFTJAW: dashboard (app.css)
   Opmaak van de app-shell en alle panelen. Merkkleuren en fonts komen uit
   brand.css (tokens); hier staan de app-tokens (--kd-*) voor licht en donker.
   Opbouw: tokens > shell > basiscomponenten > panelen > responsive.
   ============================================================================ */

/* --- Tokens ---------------------------------------------------------------- */
.kd {
  --kd-bg: #F3F4F7;
  --kd-surface: #FFFFFF;
  --kd-surface-2: #F7F8FA;
  --kd-surface-3: #EEF0F4;
  --kd-border: #EAECF0;
  --kd-border-strong: #DDE1E7;
  --kd-text: #475467;
  --kd-text-strong: #101828;
  --kd-muted: #8A94A6;
  --kd-hover: rgba(16, 24, 40, .045);
  --kd-accent: var(--rj-red, #E0121B);
  --kd-accent-ink: #B30E16;
  --kd-accent-soft: #FDECEC;
  --kd-accent-2: #FF7A4D;
  --kd-accent-2-soft: #FFEDE5;
  --kd-good: #12B76A;
  --kd-good-ink: #067647;
  --kd-good-soft: #E6F7EE;
  --kd-bad: #F04438;
  --kd-bad-ink: #B42318;
  --kd-bad-soft: #FEECEB;
  --kd-warn: #F79009;
  --kd-warn-ink: #B54708;
  --kd-warn-soft: #FEF4E6;
  --kd-blue: #2E90FA;
  --kd-blue-ink: #175CD3;
  --kd-blue-soft: #EAF3FF;
  --kd-violet: #7A5AF8;
  --kd-violet-ink: #5925DC;
  --kd-violet-soft: #F1EDFF;
  --kd-teal: #15B79E;
  --kd-teal-ink: #107569;
  --kd-teal-soft: #E6F8F5;
  --kd-pink: #EE46BC;
  --kd-pink-ink: #C11574;
  --kd-pink-soft: #FDEEF8;
  --kd-grey-soft: #F2F4F7;
  --kd-grey-ink: #475467;
  --kd-r: 18px;
  --kd-r-sm: 12px;
  --kd-r-xs: 8px;
  --kd-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --kd-shadow-pop: 0 16px 40px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
  --kd-shadow-accent: 0 8px 20px rgba(224, 18, 27, .28);
  --kd-grad: linear-gradient(135deg, #FF7A4D 0%, #E0121B 55%, #A50E14 100%);
  --kd-side-w: 252px;
  --kd-ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

.kd[data-theme="dark"] {
  --kd-bg: #0B0D12;
  --kd-surface: #12151C;
  --kd-surface-2: #181C25;
  --kd-surface-3: #1F2430;
  --kd-border: #232834;
  --kd-border-strong: #2E3442;
  --kd-text: #B7BECB;
  --kd-text-strong: #F2F4F7;
  --kd-muted: #7D8698;
  --kd-hover: rgba(255, 255, 255, .05);
  --kd-accent-soft: rgba(255, 46, 46, .14);
  --kd-accent-2-soft: rgba(255, 122, 77, .14);
  --kd-good-soft: rgba(18, 183, 106, .15);
  --kd-good-ink: #47CD89;
  --kd-bad-soft: rgba(240, 68, 56, .16);
  --kd-bad-ink: #F97066;
  --kd-warn-soft: rgba(247, 144, 9, .16);
  --kd-warn-ink: #FDB022;
  --kd-blue-soft: rgba(46, 144, 250, .16);
  --kd-blue-ink: #84CAFF;
  --kd-violet-soft: rgba(122, 90, 248, .18);
  --kd-violet-ink: #BDB4FE;
  --kd-teal-soft: rgba(21, 183, 158, .16);
  --kd-teal-ink: #5FE9D0;
  --kd-pink-soft: rgba(238, 70, 188, .16);
  --kd-pink-ink: #FAA7E0;
  --kd-grey-soft: #1F2430;
  --kd-grey-ink: #B7BECB;
  --kd-shadow: none;
  --kd-shadow-pop: 0 18px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .kd[data-theme="system"] {
    --kd-bg: #0B0D12;
    --kd-surface: #12151C;
    --kd-surface-2: #181C25;
    --kd-surface-3: #1F2430;
    --kd-border: #232834;
    --kd-border-strong: #2E3442;
    --kd-text: #B7BECB;
    --kd-text-strong: #F2F4F7;
    --kd-muted: #7D8698;
    --kd-hover: rgba(255, 255, 255, .05);
    --kd-accent-soft: rgba(255, 46, 46, .14);
    --kd-accent-2-soft: rgba(255, 122, 77, .14);
    --kd-good-soft: rgba(18, 183, 106, .15);
    --kd-good-ink: #47CD89;
    --kd-bad-soft: rgba(240, 68, 56, .16);
    --kd-bad-ink: #F97066;
    --kd-warn-soft: rgba(247, 144, 9, .16);
    --kd-warn-ink: #FDB022;
    --kd-blue-soft: rgba(46, 144, 250, .16);
    --kd-blue-ink: #84CAFF;
    --kd-violet-soft: rgba(122, 90, 248, .18);
    --kd-violet-ink: #BDB4FE;
    --kd-teal-soft: rgba(21, 183, 158, .16);
    --kd-teal-ink: #5FE9D0;
    --kd-pink-soft: rgba(238, 70, 188, .16);
    --kd-pink-ink: #FAA7E0;
    --kd-grey-soft: #1F2430;
    --kd-grey-ink: #B7BECB;
    --kd-shadow: none;
    --kd-shadow-pop: 0 18px 50px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}

/* De pagina zelf: geen marges van het thema, volle breedte. */
body.rj-canvas:has(.kd) { margin: 0; background: #F3F4F7 !important; }
body.rj-canvas:has(.kd[data-theme="dark"]) { background: #0B0D12 !important; }

/* --- Shell ----------------------------------------------------------------- */
.kd {
  display: grid;
  grid-template-columns: var(--kd-side-w) minmax(0, 1fr);
  min-height: 100vh;
  width: 100%;
  background: var(--kd-bg);
  color: var(--kd-text);
  font-family: var(--rj-font);
  font-size: 14px;
  line-height: 1.5;
}
.kd *, .kd *::before, .kd *::after { box-sizing: border-box; }
.kd a { color: inherit; }
.kd button { font-family: inherit; }
.kd [hidden] { display: none !important; }
.kd h1, .kd h2, .kd h3, .kd h4 { font-family: var(--rj-font); color: var(--kd-text-strong); margin: 0; }
.kd p { margin: 0; }
.kd-ic { width: 20px; height: 20px; flex: none; display: block; }
.kd__muted { color: var(--kd-muted); }
.kd__pad { padding: 16px; }
.kd__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kd :focus-visible { outline: 2px solid var(--kd-accent); outline-offset: 2px; }

/* Sidebar */
.kd__side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  background: var(--kd-bg);
  overflow-y: auto;
  scrollbar-width: thin;
  z-index: 40;
}
.kd__brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 18px; }
.kd__mark { width: 34px; height: 34px; border-radius: 10px; background: #0B0D12; display: grid; place-items: center; overflow: hidden; flex: none; }
.kd__mark svg { width: 27px; height: 27px; display: block; color: #fff; }
.kd__mark--sm { width: 32px; height: 32px; }
.kd__brandword { font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; color: var(--kd-text-strong); }
.kd .kd__sideclose { margin-left: auto; display: none; }

.kd__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.kd__navlabel {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kd-muted);
  padding: 16px 12px 6px;
}
.kd__navlabel:first-child { padding-top: 4px; }
.kd__navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--kd-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.kd__navitem:hover { background: var(--kd-hover); color: var(--kd-text-strong); }
.kd__navitem.is-active { background: var(--kd-accent); color: #fff; box-shadow: var(--kd-shadow-accent); }
.kd__navic { display: grid; place-items: center; width: 20px; height: 20px; }
.kd__navtext { flex: 1; min-width: 0; }
.kd__navchev { display: grid; place-items: center; transition: transform .2s var(--kd-ease); opacity: .7; }
.kd__navchev .kd-ic { width: 16px; height: 16px; }
.kd__navgroup.is-open .kd__navchev { transform: rotate(180deg); }
.kd__navgroup.is-current > .kd__navitem { color: var(--kd-text-strong); font-weight: 600; }
.kd__navsub {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 4px 21px;
  border-left: 1.5px solid var(--kd-border-strong);
  padding-left: 10px;
}
.kd__navgroup.is-open .kd__navsub { display: flex; animation: kd-fade .2s ease; }
.kd__navsubitem {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--kd-text);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.kd__navsubitem:hover { background: var(--kd-hover); color: var(--kd-text-strong); }
.kd__navsubitem.is-active { background: var(--kd-accent-soft); color: var(--kd-accent); font-weight: 600; }
.kd__only-mobile { display: none !important; }

.kd__sidefoot { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 8px 0; border-top: 1px solid var(--kd-border); }
.kd__sideuser { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.kd__sideusertext { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.kd__sideusertext b { color: var(--kd-text-strong); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd__sideusertext span { color: var(--kd-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd__scrim { display: none; }

/* Main + topbar */
.kd__main { min-width: 0; padding: 16px 28px 48px 12px; display: flex; flex-direction: column; }
.kd__top { display: flex; align-items: center; gap: 12px; min-height: 60px; margin-bottom: 6px; position: relative; z-index: 30; }
.kd .kd__burger, .kd .kd__topbrand { display: none; }
.kd__search { position: relative; display: flex; align-items: center; gap: 8px; width: min(380px, 100%); height: 46px; padding: 0 10px 0 14px; background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 14px; box-shadow: var(--kd-shadow); }
.kd__search:focus-within { border-color: var(--kd-accent); box-shadow: 0 0 0 3px var(--kd-accent-soft); }
.kd__searchic { color: var(--kd-muted); display: grid; }
.kd__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--kd-text-strong); outline: none; padding: 0; }
.kd__search input::placeholder { color: var(--kd-muted); }
.kd__search input::-webkit-search-cancel-button { display: none; }
.kd__kbd { font: 600 11px var(--rj-font); color: var(--kd-text); background: var(--kd-surface-2); border: 1px solid var(--kd-border); border-radius: 7px; padding: 4px 7px; white-space: nowrap; }
.kd__searchdrop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 14px; box-shadow: var(--kd-shadow-pop); padding: 6px; max-height: 360px; overflow: auto; }
.kd__searchhit { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--kd-text); cursor: pointer; }
.kd__searchhit:hover, .kd__searchhit.is-on { background: var(--kd-hover); }
.kd__searchhit b { color: var(--kd-text-strong); font-weight: 600; display: block; font-size: 13.5px; }
.kd__searchhit span { font-size: 12px; color: var(--kd-muted); }
.kd__topright { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.kd__iconbtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--kd-text-strong);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  flex: none;
}
.kd__iconbtn:hover { background: var(--kd-hover); }
.kd__iconbtn--ring { background: var(--kd-surface); border: 1px solid var(--kd-border); box-shadow: var(--kd-shadow); }
.kd__iconbtn--ring:hover { background: var(--kd-surface-2); }
.kd__iconbtn--box { border-radius: 12px; background: var(--kd-surface); border: 1px solid var(--kd-border); width: 40px; height: 40px; }
.kd__iconbtn--sm { width: 32px; height: 32px; border-radius: 9px; }
.kd__iconbtn--sm .kd-ic { width: 17px; height: 17px; }
.kd__dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--kd-accent); box-shadow: 0 0 0 2px var(--kd-surface); }
.kd__dot--count { width: 16px; height: 16px; top: -4px; right: -4px; font-size: 10px; font-weight: 700; color: #fff; display: grid; place-items: center; }
.kd__theme-moon { display: none; }
.kd[data-theme="dark"] .kd__theme-sun { display: none; }
.kd[data-theme="dark"] .kd__theme-moon { display: block; }

.kd__avatarbtn { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.kd__avatar {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--kd-grad);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  flex: none;
  border: 2px solid var(--kd-surface);
  box-shadow: 0 0 0 1px var(--kd-border);
}
.kd__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kd__avatar--sm { width: 34px; height: 34px; font-size: 13px; }
.kd__avatar--lg { width: 72px; height: 72px; font-size: 26px; }

/* Popovers */
.kd__pop { position: relative; }
.kd__popmenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--kd-surface);
  border: 1px solid var(--kd-border);
  border-radius: 14px;
  box-shadow: var(--kd-shadow-pop);
  padding: 6px;
  z-index: 60;
  animation: kd-pop .16s var(--kd-ease);
}
.kd__popmenu--wide { width: min(380px, calc(100vw - 32px)); padding: 0; }
.kd__popmenu--right { right: 0; left: auto; }
.kd__popmenu--form { width: 280px; padding: 14px; }
@keyframes kd-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.kd__popitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; border: 0; background: none; color: var(--kd-text); text-decoration: none; font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: left; }
.kd__popitem:hover { background: var(--kd-hover); color: var(--kd-text-strong); }
.kd__popitem .kd-ic { width: 18px; height: 18px; color: var(--kd-muted); }
.kd__popitem--danger { color: var(--kd-bad-ink); }
.kd__popitem--danger .kd-ic { color: var(--kd-bad); }
.kd__popsep { height: 1px; background: var(--kd-border); margin: 5px 4px; }
.kd__popuser { padding: 8px 10px 10px; border-bottom: 1px solid var(--kd-border); margin-bottom: 4px; display: flex; flex-direction: column; }
.kd__popuser b { color: var(--kd-text-strong); font-size: 13.5px; }
.kd__popuser span { color: var(--kd-muted); font-size: 12px; }
.kd__pophead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--kd-border); }
.kd__pophead b { color: var(--kd-text-strong); }
.kd__poplist { max-height: 420px; overflow: auto; padding: 6px; }
.kd__linkbtn, .kd__textlink { background: none; border: 0; padding: 0; color: var(--kd-accent); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kd__textlink:hover, .kd__linkbtn:hover { color: var(--kd-accent-ink); }
.kd__iconlink { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--kd-muted); }
.kd__iconlink:hover { background: var(--kd-hover); color: var(--kd-text-strong); }
.kd__iconlink .kd-ic { width: 18px; height: 18px; }

.kd-notif { display: flex; gap: 12px; padding: 10px; border-radius: 10px; text-decoration: none; }
.kd-notif:hover { background: var(--kd-hover); }
.kd-notif.is-unread { background: var(--kd-accent-soft); }
.kd-notif__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.kd-notif__ic .kd-ic { width: 17px; height: 17px; }
.kd-notif__text { font-size: 13px; color: var(--kd-text); line-height: 1.4; min-width: 0; }
.kd-notif__text b { color: var(--kd-text-strong); font-weight: 600; }
.kd-notif__time { display: block; font-size: 11.5px; color: var(--kd-muted); margin-top: 2px; }

/* Content + panels */
.kd__content { flex: 1; min-width: 0; }
.kd__panel { animation: kd-fade .22s ease; }
@keyframes kd-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.kd__phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 10px 0 20px; }
.kd__phead--tight { align-items: center; }
.kd__phead--line { padding-bottom: 16px; border-bottom: 1px solid var(--kd-border); margin-bottom: 0; }
.kd__title { font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; color: var(--kd-text-strong); }
.kd__sub { margin-top: 4px; color: var(--kd-muted); font-size: 14px; }
.kd__pheadtools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kd__back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--kd-muted); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; margin-bottom: 6px; }
.kd__back:hover { color: var(--kd-text-strong); }
.kd__back .kd-ic { width: 16px; height: 16px; }

/* Selectpillen (Time: Last 30 days) */
.kd__selpill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 12px;
  background: var(--kd-surface);
  border: 1px solid var(--kd-border);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--kd-muted);
  box-shadow: var(--kd-shadow);
  text-decoration: none;
  white-space: nowrap;
}
.kd__selpill .kd-ic { width: 17px; height: 17px; color: var(--kd-text); }
.kd__selpill select { appearance: none; -webkit-appearance: none; border: 0; background: transparent 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='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; padding: 0 20px 0 0; font: 600 13.5px var(--rj-font); color: var(--kd-text-strong); cursor: pointer; outline: none; max-width: 200px; }
.kd__selpill select option { color: #101828; }
.kd__selpill--link { color: var(--kd-text-strong); font-weight: 600; }
.kd__selpill--link:hover { border-color: var(--kd-border-strong); background: var(--kd-surface-2); }

/* --- Basiscomponenten ------------------------------------------------------- */
.kd-card { background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: var(--kd-r); padding: 20px; box-shadow: var(--kd-shadow); min-width: 0; }
.kd-card--flush { padding: 0; overflow: hidden; }
.kd-card--soft { background: var(--kd-surface-2); box-shadow: none; }
.kd-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 30px; flex-wrap: wrap; }
.kd-card__head--pad { padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--kd-border); }
.kd-card__title { font-size: 15px; font-weight: 600; color: var(--kd-text-strong); letter-spacing: -.01em; }
.kd-card__sub { font-size: 13px; color: var(--kd-muted); margin-top: 2px; }

/* Buttons (aanvulling op brand.css) */
.kd .k-btn { font-family: var(--rj-font); border-radius: 12px; font-size: 14px; }
.kd .k-btn--sm { padding: 10px 16px; font-size: 13.5px; border-radius: 12px; }
.kd .k-btn--xs { padding: 6px 10px; font-size: 12.5px; border-radius: 9px; }
.kd .k-btn--primary { background: var(--kd-accent); box-shadow: 0 6px 16px rgba(224, 18, 27, .22); color: #fff; }
.kd .k-btn--primary:hover { background: var(--kd-accent-ink); transform: none; }
.kd .k-btn--dark { background: #101828; color: #fff; border-color: #101828; }
.kd .k-btn--dark:hover { background: #000; }
.kd[data-theme="dark"] .k-btn--dark { background: #F2F4F7; color: #101828; border-color: #F2F4F7; }
.kd .k-btn--outline { background: var(--kd-surface); color: var(--kd-text-strong); border-color: var(--kd-border-strong); }
.kd .k-btn--outline:hover { border-color: var(--kd-text-strong); color: var(--kd-text-strong); background: var(--kd-surface); }
.kd .k-btn--ghost { color: var(--kd-text); background: transparent; }
.kd .k-btn--ghost:hover { background: var(--kd-hover); color: var(--kd-text-strong); }
.kd .kd__btn-soft { background: var(--kd-surface); border: 1px solid var(--kd-border); color: var(--kd-accent); }
.kd .kd__btn-soft:hover { background: var(--kd-accent-soft); }
.kd .k-btn--danger { background: var(--kd-bad); color: #fff; }
.kd .k-btn--danger-soft { background: var(--kd-bad-soft); color: var(--kd-bad-ink); border-color: transparent; }
.kd .k-btn--danger-soft:hover { background: var(--kd-bad); color: #fff; }
.kd .k-btn--good { background: var(--kd-good); color: #fff; }
.kd .k-btn--good:hover { background: var(--kd-good-ink); }
.kd .k-btn--pill { border-radius: 999px; }
.kd .k-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.kd__btnic .kd-ic { width: 17px; height: 17px; }
.kd .k-btn .kd-ic { width: 17px; height: 17px; }

/* Formulieren */
.kd .k-input, .kd .k-select, .kd .k-textarea, .kd-input, .kd-select, .kd-textarea {
  width: 100%;
  font: 400 14px var(--rj-font);
  color: var(--kd-text-strong);
  background: var(--kd-surface);
  border: 1px solid var(--kd-border-strong);
  border-radius: 11px;
  padding: 10px 13px;
  transition: border-color .15s, box-shadow .15s;
}
.kd .k-select, .kd-select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.kd-select--sm { padding: 8px 32px 8px 11px; font-size: 13px; width: auto; }
.kd .k-textarea, .kd-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.kd .k-input:focus, .kd .k-select:focus, .kd .k-textarea:focus, .kd-input:focus, .kd-select:focus, .kd-textarea:focus { outline: none; border-color: var(--kd-accent); box-shadow: 0 0 0 3px var(--kd-accent-soft); }
.kd-input--fill, .kd-textarea--fill { background: var(--kd-surface-2); border-color: transparent; }
.kd-input:disabled, .kd .k-input:disabled { background: var(--kd-surface-2); color: var(--kd-muted); }
.kd .k-label, .kd-label { display: block; font-size: 13px; font-weight: 600; color: var(--kd-text-strong); margin: 0 0 6px; }
.kd-hint { font-size: 12.5px; color: var(--kd-muted); margin-top: 6px; }
.kd-field { margin-bottom: 16px; }
.kd-field:last-child { margin-bottom: 0; }
.kd-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kd .k-check, .kd-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--kd-text); cursor: pointer; }
.kd-check input, .kd .k-check input { margin: 3px 0 0; accent-color: var(--kd-accent); width: 16px; height: 16px; flex: none; }
.kd-check b { display: block; color: var(--kd-text-strong); font-weight: 600; font-size: 14px; }
.kd-check span { color: var(--kd-muted); font-size: 12.5px; }
.kd .k-muted { color: var(--kd-muted); }
.kd .k-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kd .k-h2 { font-size: 20px; font-weight: 700; color: var(--kd-text-strong); }
.kd .k-h3 { font-size: 15px; font-weight: 600; color: var(--kd-text-strong); }
.kd .k-note { background: var(--kd-warn-soft); color: var(--kd-warn-ink); border-radius: 10px; padding: 10px 12px; font-size: 13px; }

.kd-switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex: none; }
.kd-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.kd-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--kd-border-strong); transition: background .2s; }
.kd-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--kd-ease); }
.kd-switch input:checked + span { background: var(--kd-text-strong); }
.kd-switch input:checked + span::after { transform: translateX(18px); }
.kd-switch input:focus-visible + span { outline: 2px solid var(--kd-accent); outline-offset: 2px; }

.kd-searchbox { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 12px; min-width: 220px; box-shadow: var(--kd-shadow); }
.kd-searchbox .kd-ic { width: 17px; height: 17px; color: var(--kd-muted); }
.kd-searchbox input { border: 0; background: none; outline: none; font: 14px var(--rj-font); color: var(--kd-text-strong); width: 100%; min-width: 0; }
.kd-searchbox:focus-within { border-color: var(--kd-accent); box-shadow: 0 0 0 3px var(--kd-accent-soft); }
.kd-searchbox--sm { height: 38px; min-width: 200px; }

/* Tabs */
.kd-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px; }
.kd-tabs__btn { border: 0; background: none; padding: 7px 12px; border-radius: 9px; color: var(--kd-muted); font: 600 13.5px var(--rj-font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kd-tabs__btn:hover { color: var(--kd-text-strong); background: var(--kd-hover); }
.kd-tabs__btn.is-active { color: var(--kd-text-strong); background: var(--kd-surface); box-shadow: 0 0 0 1px var(--kd-border), var(--kd-shadow); }
.kd-tabs--line { margin-top: 0; gap: 18px; }
.kd-tabs--line .kd-tabs__btn { padding: 10px 0; border-radius: 0; background: none; box-shadow: none; position: relative; }
.kd-tabs--line .kd-tabs__btn:hover { background: none; }
.kd-tabs--line .kd-tabs__btn.is-active { color: var(--kd-text-strong); box-shadow: none; }
.kd-tabs--line .kd-tabs__btn.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--kd-accent); }
.kd-count { font-size: 11.5px; font-weight: 700; background: var(--kd-surface-3); color: var(--kd-text); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; }
.kd-tabs__btn.is-active .kd-count { background: var(--kd-accent-soft); color: var(--kd-accent); }

.kd-seg { display: inline-flex; padding: 4px; background: var(--kd-surface-3); border-radius: 12px; gap: 2px; flex-wrap: wrap; }
.kd-seg__btn { border: 0; background: none; padding: 7px 14px; border-radius: 9px; font: 500 13.5px var(--rj-font); color: var(--kd-text); cursor: pointer; white-space: nowrap; }
.kd-seg__btn:hover { color: var(--kd-text-strong); }
.kd-seg__btn.is-active { background: var(--kd-surface); color: var(--kd-text-strong); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }

/* Delta, badges, chips, avatars */
.kd-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; border-radius: 7px; padding: 2px 7px; vertical-align: middle; white-space: nowrap; }
.kd-delta .kd-ic { width: 13px; height: 13px; stroke-width: 2.4; }
.kd-delta.is-up { background: var(--kd-good-soft); color: var(--kd-good-ink); }
.kd-delta.is-down { background: var(--kd-bad-soft); color: var(--kd-bad-ink); }
.kd-delta.is-flat { background: var(--kd-grey-soft); color: var(--kd-grey-ink); }
.kd-delta--plain { background: none !important; padding: 0; }

.kd-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.kd-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kd-badge--plain::before { display: none; }
.kd-badge--good { background: var(--kd-good-soft); color: var(--kd-good-ink); }
.kd-badge--bad { background: var(--kd-bad-soft); color: var(--kd-bad-ink); }
.kd-badge--warn { background: var(--kd-warn-soft); color: var(--kd-warn-ink); }
.kd-badge--blue { background: var(--kd-blue-soft); color: var(--kd-blue-ink); }
.kd-badge--violet { background: var(--kd-violet-soft); color: var(--kd-violet-ink); }
.kd-badge--grey { background: var(--kd-grey-soft); color: var(--kd-grey-ink); }
.kd-badge--accent { background: var(--kd-accent-soft); color: var(--kd-accent); }

.kd-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.5; background: var(--kd-grey-soft); color: var(--kd-grey-ink); }
.kd-chip--red { background: var(--kd-accent-soft); color: var(--kd-accent); }
.kd-chip--orange, .kd-chip--amber { background: var(--kd-warn-soft); color: var(--kd-warn-ink); }
.kd-chip--green { background: var(--kd-good-soft); color: var(--kd-good-ink); }
.kd-chip--blue { background: var(--kd-blue-soft); color: var(--kd-blue-ink); }
.kd-chip--purple, .kd-chip--violet { background: var(--kd-violet-soft); color: var(--kd-violet-ink); }
.kd-chip--pink { background: var(--kd-pink-soft); color: var(--kd-pink-ink); }
.kd-chip--teal { background: var(--kd-teal-soft); color: var(--kd-teal-ink); }
.kd-chip--ember { background: var(--kd-accent-2-soft); color: #C2410C; }
.kd[data-theme="dark"] .kd-chip--ember { color: #FFB199; }
.kd-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.kd-av { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 700; font-size: 13.5px; flex: none; }
.kd-av--sm { width: 30px; height: 30px; font-size: 12px; }
.kd-av--lg { width: 56px; height: 56px; font-size: 20px; }
.kd-av--sq { border-radius: 10px; }
.kd-av--c0 { background: var(--kd-blue-soft); color: var(--kd-blue-ink); }
.kd-av--c1 { background: var(--kd-warn-soft); color: var(--kd-warn-ink); }
.kd-av--c2 { background: var(--kd-good-soft); color: var(--kd-good-ink); }
.kd-av--c3 { background: var(--kd-violet-soft); color: var(--kd-violet-ink); }
.kd-av--c4 { background: var(--kd-pink-soft); color: var(--kd-pink-ink); }
.kd-av--c5 { background: var(--kd-teal-soft); color: var(--kd-teal-ink); }
.kd-av--c6 { background: var(--kd-accent-soft); color: var(--kd-accent); }
.kd-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kd-who__text { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.kd-who__text b { color: var(--kd-text-strong); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-who__text span { color: var(--kd-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.kd-who { text-decoration: none; }
a.kd-who:hover b { color: var(--kd-accent); }

/* Tabellen */
.kd-tablewrap { width: 100%; overflow-x: auto; }
.kd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kd-table th { text-align: left; font-weight: 500; font-size: 13px; color: var(--kd-muted); padding: 14px 16px; border-bottom: 1px solid var(--kd-border); background: var(--kd-surface-2); white-space: nowrap; }
.kd-table td { padding: 14px 16px; border-bottom: 1px solid var(--kd-border); color: var(--kd-text-strong); vertical-align: middle; }
.kd-table tbody tr { transition: background .12s; }
.kd-table tbody tr:hover td { background: var(--kd-surface-2); }
.kd-table tbody tr:last-child td { border-bottom: 0; }
.kd-table tr.is-picked td { background: var(--kd-accent-soft) !important; }
.kd-table tr[data-open] { cursor: pointer; }
.kd-table--compact td { padding: 10px 16px; }
.kd-table--plain th { background: none; }
.kd-table .kd-num { text-align: right; font-variant-numeric: tabular-nums; }
.kd-table .kd-check-col { width: 44px; padding-right: 0; }
.kd-table .kd-check-col input { accent-color: var(--kd-accent); width: 16px; height: 16px; cursor: pointer; }
.kd-table .kd-act-col { width: 1%; white-space: nowrap; text-align: right; }
.kd-table .kd-date { white-space: nowrap; }
.kd-table .kd-date b { display: block; color: var(--kd-text-strong); font-weight: 600; }
.kd-table .kd-date span { color: var(--kd-muted); font-size: 12px; }
.kd-cellmuted { color: var(--kd-muted); }
.kd-empty { text-align: center; padding: 48px 24px; color: var(--kd-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kd-empty__ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--kd-accent-soft); color: var(--kd-accent); }
.kd-empty__ic .kd-ic { width: 24px; height: 24px; }
.kd-empty b { color: var(--kd-text-strong); font-size: 15px; }
.kd-empty p { max-width: 420px; }

.kd-pager { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 14px; flex-wrap: wrap; }
.kd-pager__info { margin-right: auto; color: var(--kd-muted); font-size: 13px; }
.kd-pager__btn { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--kd-text); font: 600 13px var(--rj-font); cursor: pointer; display: inline-grid; place-items: center; }
.kd-pager__btn .kd-ic { width: 16px; height: 16px; }
.kd-pager__btn:hover:not(:disabled) { background: var(--kd-surface); border-color: var(--kd-border); }
.kd-pager__btn.is-active { background: var(--kd-surface); border-color: var(--kd-border); color: var(--kd-text-strong); box-shadow: var(--kd-shadow); }
.kd-pager__btn:disabled { opacity: .4; cursor: default; }
.kd-pager--end { justify-content: flex-end; }
.kd-pager--box { background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 12px; padding: 4px; gap: 2px; margin-left: auto; width: max-content; }

.kd-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--kd-accent-soft); border-bottom: 1px solid var(--kd-border); }
.kd-bulk b { color: var(--kd-text-strong); font-size: 13.5px; margin-right: 4px; }
.kd-bulk .kd-select, .kd-bulk .kd-input { width: auto; min-width: 150px; padding-top: 7px; padding-bottom: 7px; font-size: 13px; }

/* Charts */
.kd-chart { position: relative; width: 100%; height: 240px; }
.kd-chart--tall { height: 280px; }
.kd-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kd-chart__grid { stroke: var(--kd-border); stroke-dasharray: 4 5; }
.kd-chart__axis { fill: var(--kd-muted); font-size: 11.5px; font-family: var(--rj-font); }
.kd-chart__cursor { stroke: var(--kd-border-strong); stroke-dasharray: 3 4; }
.kd-chart__tip { position: absolute; pointer-events: none; background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 12px; box-shadow: var(--kd-shadow-pop); padding: 10px 12px; font-size: 12.5px; color: var(--kd-text); min-width: 150px; transform: translate(-50%, calc(-100% - 14px)); z-index: 5; white-space: nowrap; }
.kd-chart__tip b { display: block; color: var(--kd-text-strong); font-size: 13px; margin-bottom: 4px; }
.kd-chart__tip span { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.kd-chart__tip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kd-chart__tip em { font-style: normal; font-weight: 700; color: var(--kd-text-strong); margin-left: auto; padding-left: 10px; }
.kd-chart__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--kd-muted); font-size: 13px; text-align: center; padding: 20px; }
.kd-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kd-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--kd-text); }
.kd-legend__dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.kd-legend__dot--a { background: var(--kd-accent); }
.kd-legend__dot--b { background: var(--kd-accent-2); }
.kd-legend__dot--grey { background: #C3C9D4; }

.kd-bars { display: flex; align-items: flex-end; gap: 5px; }
.kd-bars i { display: block; flex: 1; min-width: 6px; border-radius: 5px; background: var(--kd-accent); opacity: .35; transition: height .5s var(--kd-ease); }
.kd-bars i.is-top { opacity: 1; }
.kd-bars--mini { width: 110px; height: 44px; }
.kd-bars--mini i { max-width: 10px; background: var(--kd-accent-2); opacity: .55; }
.kd-bars--mini i.is-top { background: var(--kd-accent); opacity: 1; }
.kd-bars--health { width: 130px; height: 72px; gap: 8px; }
.kd-bars--health i { max-width: 14px; border-radius: 6px; }
.kd-spark { width: 110px; height: 44px; }
.kd-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Modal en drawer */
.kd__modalwrap { position: fixed; inset: 0; z-index: 100; background: rgba(11, 13, 18, .72); display: grid; place-items: center; padding: 16px; animation: kd-fade .15s ease; }
.kd-modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--kd-surface); border-radius: 20px; box-shadow: var(--kd-shadow-pop); animation: kd-pop .18s var(--kd-ease); }
.kd-modal--wide { width: min(760px, 100%); }
.kd-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 0; }
.kd-modal__head h2 { font-size: 18px; font-weight: 700; }
.kd-modal__body { padding: 18px 22px; }
.kd-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 20px; flex-wrap: wrap; align-items: center; }
.kd-modal__msg { margin-right: auto; font-size: 13px; color: var(--kd-bad-ink); }

.kd__drawerwrap { position: fixed; inset: 0; z-index: 90; background: rgba(16, 24, 40, .35); animation: kd-fade .15s ease; }
.kd-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--kd-surface); box-shadow: var(--kd-shadow-pop); overflow-y: auto; animation: kd-slide .25s var(--kd-ease); display: flex; flex-direction: column; }
@keyframes kd-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.kd-drawer__head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 16px; border-bottom: 1px solid var(--kd-border); position: sticky; top: 0; background: var(--kd-surface); z-index: 1; }
.kd-drawer__head h2 { font-size: 19px; font-weight: 700; line-height: 1.25; }
.kd-drawer__body { padding: 18px 22px 28px; display: flex; flex-direction: column; gap: 22px; }
.kd-drawer__sect h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--kd-muted); margin-bottom: 10px; }
.kd-dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 12px; font-size: 13.5px; }
.kd-dl dt { color: var(--kd-muted); }
.kd-dl dd { margin: 0; color: var(--kd-text-strong); word-break: break-word; }
.kd-dl a { color: var(--kd-accent); text-decoration: none; }

.kd-timeline { display: flex; flex-direction: column; gap: 14px; }
.kd-tl { display: flex; gap: 12px; }
.kd-tl__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.kd-tl__ic .kd-ic { width: 15px; height: 15px; }
.kd-tl__text { font-size: 13px; line-height: 1.45; }
.kd-tl__text b { color: var(--kd-text-strong); font-weight: 600; }
.kd-tl__text span { display: block; font-size: 12px; color: var(--kd-muted); }

.kd__toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.kd-toast { background: #101828; color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--kd-shadow-pop); font-size: 13.5px; max-width: 360px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: auto; display: flex; gap: 10px; align-items: center; }
.kd-toast.is-in { opacity: 1; transform: none; }
.kd-toast--bad { background: var(--kd-bad); }
.kd-toast .kd-ic { width: 17px; height: 17px; }
.kd[data-theme="dark"] .kd-toast { background: #F2F4F7; color: #101828; }

.kd-skel { background: linear-gradient(90deg, var(--kd-surface-2), var(--kd-surface-3), var(--kd-surface-2)); background-size: 200% 100%; animation: kd-skel 1.2s infinite; border-radius: 8px; min-height: 14px; }
@keyframes kd-skel { to { background-position: -200% 0; } }

/* --- Dashboard (home) ------------------------------------------------------ */
.kd-home { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kd-home__chart { grid-column: span 2; }
.kd-home__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kd-home__figure { display: flex; align-items: center; gap: 12px; margin: -2px 0 8px; }
.kd-home__figic { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--kd-border); display: grid; place-items: center; color: var(--kd-text-strong); flex: none; }
.kd-home__figic .kd-ic { width: 17px; height: 17px; }
.kd-home__big { font-size: 24px; font-weight: 700; color: var(--kd-text-strong); letter-spacing: -.02em; }
.kd-home__figsub { display: block; font-size: 13px; }

.kd-alert { background: var(--kd-grad); border: 0; color: #fff; position: relative; overflow: hidden; }
.kd-alert::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 65%); pointer-events: none; }
.kd-alert__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); }
.kd-alert__tag .kd-ic { width: 14px; height: 14px; }
.kd .kd-alert__title { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 14px 0 8px; letter-spacing: -.01em; }
.kd-alert__title em { font-style: normal; color: #FFE1D6; }
.kd-alert__text { font-size: 13.5px; opacity: .9; margin-bottom: 16px; }
.kd .kd-alert__btn { display: block; text-align: center; background: #fff; color: #101828; font-weight: 700; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; padding: 12px; border-radius: 999px; position: relative; z-index: 1; transition: transform .15s; }
.kd .kd-alert__btn:hover { transform: translateY(-1px); }

.kd-health__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kd-health__big { font-size: 34px; font-weight: 700; color: var(--kd-text-strong); letter-spacing: -.03em; line-height: 1.1; }
.kd-health__sub { font-size: 13px; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.kd-health__sub .kd-ic { width: 15px; height: 15px; }

.kd-sources { display: flex; flex-direction: column; gap: 10px; }
.kd-source { display: flex; align-items: center; gap: 10px; }
.kd-source__bar { position: relative; flex: 1; height: 30px; background: var(--kd-surface-2); border-radius: 8px; overflow: hidden; }
.kd-source__fill { position: absolute; inset: 0 auto 0 0; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; color: #fff; font-size: 12px; font-weight: 600; min-width: fit-content; transition: width .6s var(--kd-ease); white-space: nowrap; }
.kd-source__fill span { overflow: hidden; text-overflow: ellipsis; }
.kd-source__pct { font-size: 12px; font-weight: 700; margin-left: auto; }

.kd-feed { display: flex; flex-direction: column; gap: 14px; }
.kd-feed__item { display: flex; gap: 12px; align-items: flex-start; }
.kd-feed__text { font-size: 13.5px; line-height: 1.4; min-width: 0; }
.kd-feed__text b { color: var(--kd-text-strong); font-weight: 600; }
.kd-feed__text span { display: block; color: var(--kd-muted); font-size: 12px; margin-top: 2px; }

.kd-goal__row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--kd-text); }
.kd-goal__row b { color: var(--kd-text-strong); font-size: 14px; }
.kd-goal__label { display: inline-flex; align-items: center; gap: 8px; }
.kd-goal__label .kd-ic { width: 17px; height: 17px; color: var(--kd-text-strong); }
.kd-progress { height: 8px; border-radius: 999px; background: var(--kd-surface-3); overflow: hidden; margin: 10px 0 12px; }
.kd-progress i { display: block; height: 100%; border-radius: 999px; background: var(--kd-grad); transition: width .7s var(--kd-ease); }
.kd-goal__bars { display: flex; gap: 6px; align-items: center; height: 24px; margin-bottom: 14px; }
.kd-goal__bars i { flex: 1; height: 60%; border-radius: 7px; background: var(--kd-accent-2-soft); border: 1px solid rgba(255, 122, 77, .25); }
.kd-goal__bars i.is-on { background: var(--kd-accent-2); opacity: .55; height: 100%; }
.kd-goal__sep { border-top: 1px dashed var(--kd-border-strong); margin: 10px 0; }

.kd-home__pipe { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 16px; overflow-x: auto; padding-bottom: 4px; }
.kd-pipe__head { display: flex; align-items: center; gap: 10px; padding: 8px 4px 10px; border-bottom: 2px solid var(--kd-border); margin-bottom: 12px; }
.kd-pipe__label { font-weight: 600; font-size: 13px; padding: 4px 10px; border-radius: 8px; }
.kd-pipe__count { color: var(--kd-text-strong); font-weight: 600; font-size: 13.5px; }
.kd-pipe__more { margin-left: auto; }
.kd-pipe__cards { display: flex; flex-direction: column; gap: 10px; }
.kd-pcard { display: block; background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 14px; padding: 14px; text-decoration: none; box-shadow: var(--kd-shadow); transition: box-shadow .15s, transform .15s; cursor: pointer; }
.kd-pcard:hover { box-shadow: 0 8px 20px rgba(16, 24, 40, .08); transform: translateY(-1px); }
.kd-pcard__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kd-pcard b { display: block; color: var(--kd-text-strong); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-pcard span.kd-pcard__sub { display: block; color: var(--kd-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-pcard .kd-chips { margin-bottom: 8px; }

/* --- Audience overview ------------------------------------------------------ */
.kd-aud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, .9fr); grid-template-areas: "stats latest top" "eng eng top" "lib lib lib"; gap: 16px; }
.kd-aud__lib { grid-area: lib; }
.kd-aud__lib .kd-card__head { flex-wrap: wrap; gap: 12px; }
.kd-aud__stats { grid-area: stats; display: flex; flex-direction: column; gap: 16px; }
.kd-aud__latest { grid-area: latest; }
.kd-aud__top { grid-area: top; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--kd-accent-soft), var(--kd-surface) 45%); }
.kd-aud__engaged { grid-area: eng; }
.kd-stat { padding: 18px 20px; }
.kd-stat__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kd-stat__period { font-size: 12.5px; }
.kd-stat__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; }
.kd-stat__big { font-size: 30px; font-weight: 700; color: var(--kd-text-strong); letter-spacing: -.03em; line-height: 1.1; }
.kd-stat__hint { font-size: 12px; margin-top: 8px; }
.kd-people { display: flex; flex-direction: column; }
.kd-people__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--kd-border); text-decoration: none; }
.kd-people__row:last-child { border-bottom: 0; }
.kd-people__row:hover .kd-who__text b { color: var(--kd-accent); }
.kd-people__date { font-size: 12.5px; color: var(--kd-muted); white-space: nowrap; }
.kd-top__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--kd-surface); color: var(--kd-accent); box-shadow: var(--kd-shadow); margin: 0 auto 8px; border: 1px solid var(--kd-border); }
.kd-top__title { text-align: center; font-size: 16px; font-weight: 700; }
.kd-top__sub { text-align: center; font-size: 13px; margin: 4px 0 16px; }
.kd-top__list { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kd-topitem { display: block; background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 14px; padding: 12px 14px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.kd-topitem:hover { border-color: var(--kd-accent); box-shadow: 0 6px 16px rgba(224, 18, 27, .1); }
.kd-topitem__row { display: flex; align-items: center; gap: 10px; }
.kd-topitem__rank { font-size: 12px; font-weight: 800; color: var(--kd-muted); width: 16px; }
.kd-topitem__meta { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.kd-topitem__go { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--kd-accent); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.kd-topitem__go .kd-ic { width: 14px; height: 14px; }
.kd-top__all { margin-top: 14px; }

/* --- Contacts --------------------------------------------------------------- */
.kd-ctkind { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px 3px 7px; border-radius: 999px; white-space: nowrap; }
.kd-ctkind .kd-ic { width: 14px; height: 14px; }
.kd-ctkind--company { background: var(--kd-blue-soft); color: var(--kd-blue-ink); }
.kd-ctkind--person { background: var(--kd-violet-soft); color: var(--kd-violet-ink); }
.kd-mailed { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--kd-text-strong); white-space: nowrap; }
.kd-mailed .kd-ic { width: 15px; height: 15px; color: var(--kd-muted); }
.kd-filterform { display: flex; flex-direction: column; gap: 12px; }
.kd-filterform .kd-label { margin-bottom: 4px; font-size: 12px; }
.kd-filterform .kd-select { padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.kd-filterform__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }

.kd-segcard { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--kd-border); }
.kd-segcard:last-child { border-bottom: 0; }
.kd-segcard__main { flex: 1; min-width: 0; }
.kd-segcard__main b { color: var(--kd-text-strong); display: block; }
.kd-rule { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.kd-tagrow { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--kd-border); }
.kd-tagrow:last-child { border-bottom: 0; }
.kd-tagform { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--kd-border); }
.kd-tagform .kd-input { flex: 1; min-width: 180px; }
.kd-tagform .kd-select { width: auto; }

/* --- Campaigns ------------------------------------------------------------- */
.kd-listhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--kd-border); }
.kd-listhead .kd-searchbox { margin-bottom: 10px; }
.kd-cplist { display: flex; flex-direction: column; gap: 12px; }
.kd-cprow { display: grid; grid-template-columns: 48px minmax(0, 1.6fr) repeat(4, minmax(70px, .5fr)) 36px; align-items: center; gap: 16px; background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 16px; padding: 18px 20px; box-shadow: var(--kd-shadow); cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.kd-cprow:hover { box-shadow: 0 8px 22px rgba(16, 24, 40, .07); border-color: var(--kd-border-strong); }
.kd-cprow__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.kd-cprow__ic .kd-ic { width: 20px; height: 20px; }
.kd-cprow__name { min-width: 0; }
.kd-cprow__name b { display: block; font-size: 15px; font-weight: 600; color: var(--kd-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-cprow__name span { font-size: 12.5px; color: var(--kd-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.kd-cprow__name span strong { color: var(--kd-text); font-weight: 600; }
.kd-metric { display: flex; flex-direction: column; gap: 2px; }
.kd-metric small { font-size: 12px; color: var(--kd-muted); }
.kd-metric b { font-size: 15px; color: var(--kd-text-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.kd-cprow .kd__pop { justify-self: end; }
.kd-cprow__progress { grid-column: 2 / -1; height: 4px; border-radius: 999px; background: var(--kd-surface-3); overflow: hidden; margin-top: -6px; }
.kd-cprow__progress i { display: block; height: 100%; background: var(--kd-accent); border-radius: 999px; }

.kd-editor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.kd-editor__main { display: flex; flex-direction: column; gap: 16px; }
.kd-editor__side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.kd-step { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kd-step__n { width: 26px; height: 26px; border-radius: 50%; background: var(--kd-accent-soft); color: var(--kd-accent); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; flex: none; }
.kd-step h2 { font-size: 15px; font-weight: 600; }
.kd-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.kd-choice label { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--kd-border-strong); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.kd-choice label:hover { border-color: var(--kd-text); }
.kd-choice input { position: absolute; opacity: 0; }
.kd-choice b { font-size: 13.5px; color: var(--kd-text-strong); }
.kd-choice span { font-size: 12px; color: var(--kd-muted); }
.kd-choice label:has(input:checked) { border-color: var(--kd-accent); background: var(--kd-accent-soft); box-shadow: 0 0 0 1px var(--kd-accent); }
.kd-choice label:has(input:focus-visible) { outline: 2px solid var(--kd-accent); outline-offset: 2px; }
.kd-audcount { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--kd-surface-2); font-size: 13.5px; }
.kd-audcount b { font-size: 18px; color: var(--kd-text-strong); }
.kd-audcount .kd-ic { color: var(--kd-accent); }
.kd-phs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.kd-ph { border: 1px dashed var(--kd-border-strong); background: var(--kd-surface-2); color: var(--kd-text); font: 500 12px var(--rj-font-mono); padding: 3px 8px; border-radius: 7px; cursor: pointer; }
.kd-ph:hover { border-color: var(--kd-accent); color: var(--kd-accent); }
.kd-preview { border: 1px solid var(--kd-border); border-radius: 16px; overflow: hidden; background: var(--kd-surface-2); }
.kd-preview__bar { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; background: var(--kd-surface); border-bottom: 1px solid var(--kd-border); font-size: 12.5px; color: var(--kd-muted); }
.kd-preview__bar b { color: var(--kd-text-strong); font-weight: 600; }
.kd-preview__mail { margin: 16px; background: #fff; border-radius: 12px; padding: 22px; color: #1E293B; font-size: 14px; line-height: 1.6; box-shadow: 0 1px 3px rgba(16,24,40,.06); word-break: break-word; }
.kd-preview__mail p { margin: 0 0 12px; }
.kd-preview__btn { display: inline-block; background: #E0121B; color: #fff; font-weight: 600; padding: 11px 22px; border-radius: 10px; margin-top: 4px; text-decoration: none; }
.kd-preview__foot { text-align: center; font-size: 11.5px; color: #94A3B8; padding: 0 16px 16px; }
.kd-sendbox { display: flex; flex-direction: column; gap: 10px; }
.kd-sendprog { height: 10px; border-radius: 999px; background: var(--kd-surface-3); overflow: hidden; }
.kd-sendprog i { display: block; height: 100%; background: var(--kd-grad); border-radius: 999px; transition: width .4s var(--kd-ease); }

.kd-detail__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kd-mini { background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 14px; padding: 14px 16px; }
.kd-mini small { color: var(--kd-muted); font-size: 12.5px; display: block; }
.kd-mini b { color: var(--kd-text-strong); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.kd-mini span { font-size: 12px; color: var(--kd-muted); margin-left: 4px; }

/* --- Forms ----------------------------------------------------------------- */
.kd-formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.kd-fcard { display: flex; flex-direction: column; gap: 12px; }
.kd-fcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kd-fcard__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--kd-accent-soft); color: var(--kd-accent); }
.kd-fcard h3 { font-size: 15px; font-weight: 600; }
.kd-fcard p { font-size: 13px; color: var(--kd-muted); }
.kd-fcard__meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--kd-muted); flex-wrap: wrap; }
.kd-fcard__meta b { color: var(--kd-text-strong); }
.kd-fcard__foot { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.kd-fcard--new { align-items: center; justify-content: center; text-align: center; border-style: dashed; border-width: 1.5px; min-height: 190px; text-decoration: none; background: transparent; box-shadow: none; }
.kd-fcard--new:hover { border-color: var(--kd-accent); background: var(--kd-accent-soft); }

.kd-fb { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.kd-fb__main { background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.kd-fb__sect { background: var(--kd-surface-2); border-radius: 16px; padding: 18px 20px; }
.kd-fb__sect h2 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.kd-fb__sect .kd-input, .kd-fb__sect .kd-textarea, .kd-fb__sect .kd-select { background: var(--kd-surface-3); border-color: transparent; border-radius: 12px; }
.kd-fb__sect .kd-input:focus, .kd-fb__sect .kd-textarea:focus, .kd-fb__sect .kd-select:focus { background: var(--kd-surface); border-color: var(--kd-accent); }
.kd-radios { display: flex; gap: 18px; }
.kd-radios label { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.kd-radios input { accent-color: var(--kd-accent); width: 16px; height: 16px; margin: 0; }
.kd-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kd-tpl { text-align: left; border: 1px solid transparent; background: var(--kd-surface-3); border-radius: 14px; padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: inherit; }
.kd-tpl:hover { border-color: var(--kd-border-strong); }
.kd-tpl b { display: flex; align-items: center; gap: 8px; color: var(--kd-text-strong); font-size: 14.5px; font-weight: 600; }
.kd-tpl b .kd-ic { width: 18px; height: 18px; }
.kd-tpl span { color: var(--kd-muted); font-size: 13px; }
.kd-tpl.is-active { background: var(--kd-surface); border-color: var(--kd-accent); box-shadow: 0 0 0 1px var(--kd-accent); }
.kd-libsearch { margin-bottom: 12px; }
.kd-lib { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kd-libitem { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--kd-surface-3); border: 1px solid transparent; border-radius: 12px; cursor: grab; user-select: none; font-size: 14px; color: var(--kd-text-strong); font-weight: 500; text-align: left; font-family: inherit; }
.kd-libitem:hover { border-color: var(--kd-border-strong); background: var(--kd-surface); }
.kd-libitem:active { cursor: grabbing; }
.kd-libitem .kd-ic { width: 18px; height: 18px; color: var(--kd-text); }
.kd-libitem__add { margin-left: auto; opacity: 0; color: var(--kd-accent) !important; }
.kd-libitem:hover .kd-libitem__add { opacity: 1; }
.kd-canvas { min-height: 120px; border: 1.5px dashed var(--kd-border-strong); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, background .15s; }
.kd-canvas.is-over { border-color: var(--kd-accent); background: var(--kd-accent-soft); }
.kd-canvas__empty { display: grid; place-items: center; text-align: center; color: var(--kd-muted); font-size: 13.5px; padding: 24px 12px; }
.kd-ffield { background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.kd-ffield.is-dragging { opacity: .4; }
.kd-ffield.is-drop-before { box-shadow: 0 -3px 0 var(--kd-accent); }
.kd-ffield__grip { cursor: grab; color: var(--kd-muted); display: grid; place-items: center; }
.kd-ffield__grip .kd-ic { width: 18px; height: 18px; }
.kd-ffield__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kd-ffield__top { display: flex; align-items: center; gap: 8px; }
.kd-ffield__type { font-size: 11.5px; font-weight: 600; color: var(--kd-muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.kd-ffield__label { flex: 1; border: 0; background: transparent; font: 600 14px var(--rj-font); color: var(--kd-text-strong); padding: 4px 6px; border-radius: 7px; min-width: 0; }
.kd-ffield__label:focus { outline: none; background: var(--kd-surface-2); }
.kd-ffield__opts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--kd-muted); }
.kd-ffield__opts input[type="text"] { border: 1px solid var(--kd-border); background: var(--kd-surface-2); border-radius: 8px; padding: 5px 8px; font: 12.5px var(--rj-font); color: var(--kd-text-strong); min-width: 140px; flex: 1; }
.kd-ffield__opts label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.kd-ffield__opts input[type="checkbox"] { accent-color: var(--kd-accent); }
.kd-ffield__acts { display: flex; gap: 2px; }
.kd-fb__side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.kd-fb__summary { background: var(--kd-surface-2); border-radius: 16px; padding: 18px 20px; }
.kd-fb__summary h2 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.kd-sum { display: grid; grid-template-columns: 22px 90px 1fr; gap: 12px 8px; align-items: start; font-size: 13.5px; }
.kd-sum .kd-ic { width: 18px; height: 18px; color: var(--kd-muted); }
.kd-sum dt { color: var(--kd-muted); }
.kd-sum dd { margin: 0; color: var(--kd-text-strong); font-weight: 500; word-break: break-word; }
.kd-fb__publish h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.kd-fb__publish .kd-check { margin-bottom: 12px; }
.kd-tip { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--kd-accent-soft); border-radius: 16px; padding: 16px 18px; }
.kd-tip__row { display: flex; align-items: center; gap: 10px; }
.kd-tip__ic { width: 30px; height: 30px; border-radius: 50%; background: var(--kd-accent); color: #fff; display: grid; place-items: center; flex: none; }
.kd-tip__ic .kd-ic { width: 16px; height: 16px; }
.kd-tip b { color: var(--kd-text-strong); font-size: 15px; }
.kd-tip p { font-size: 13px; color: var(--kd-text); }
.kd-copy { display: flex; width: 100%; gap: 6px; margin-top: 4px; }
.kd-copy input { flex: 1; min-width: 0; font: 12.5px var(--rj-font-mono); padding: 8px 10px; border-radius: 9px; border: 1px solid var(--kd-border); background: var(--kd-surface); color: var(--kd-text-strong); }
.kd .kd-btn-publish { width: 100%; padding: 14px; border-radius: 999px; border: 0; background: var(--kd-grad); color: #fff; font: 700 14.5px var(--rj-font); cursor: pointer; box-shadow: 0 10px 24px rgba(224, 18, 27, .28), inset 0 1px 0 rgba(255,255,255,.25); }
.kd .kd-btn-publish:hover { filter: brightness(1.05); }
.kd .kd-btn-cancel { width: 100%; padding: 13px; border-radius: 999px; border: 1px solid var(--kd-border); background: var(--kd-surface); color: var(--kd-text-strong); font: 600 14px var(--rj-font); cursor: pointer; box-shadow: 0 4px 12px rgba(16, 24, 40, .06); }
.kd .kd-btn-cancel:hover { background: var(--kd-surface-2); }
.kd-pill-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.kd-pill-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Database ---------------------------------------------------------------- */
.kd-db-init { margin-bottom: 16px; background: var(--kd-surface-2); }
.kd-db-init__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kd-initcard { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 14px; padding: 16px; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.kd-initcard:hover { box-shadow: 0 8px 20px rgba(16, 24, 40, .08); border-color: var(--kd-border-strong); }
.kd-initcard b { color: var(--kd-text-strong); font-size: 14px; font-weight: 600; }
.kd-initcard span:not([class]) { color: var(--kd-muted); font-size: 12.5px; line-height: 1.45; }
.kd-initcard i { position: absolute; top: 14px; right: 12px; color: var(--kd-muted); }
.kd-initcard i .kd-ic { width: 16px; height: 16px; }
.kd-initcard__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 4px; }
.kd-initcard__ic .kd-ic { width: 18px; height: 18px; }
.kd-initcard__ic--a { background: var(--kd-blue-soft); color: var(--kd-blue-ink); }
.kd-initcard__ic--b { background: var(--kd-good-soft); color: var(--kd-good-ink); }
.kd-initcard__ic--c { background: var(--kd-violet-soft); color: var(--kd-violet-ink); }
.kd-initcard__ic--d { background: var(--kd-accent-soft); color: var(--kd-accent); }
.kd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: var(--kd-r); margin-bottom: 16px; overflow: hidden; }
.kd-kpi { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-right: 1px solid var(--kd-border); text-decoration: none; background: none; border-top: 0; border-bottom: 0; border-left: 0; text-align: left; font-family: inherit; cursor: pointer; }
.kd-kpi:last-child { border-right: 0; }
.kd-kpi:hover { background: var(--kd-surface-2); }
.kd-kpi__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.kd-kpi small { display: block; color: var(--kd-muted); font-size: 12.5px; }
.kd-kpi b { color: var(--kd-text-strong); font-size: 19px; font-weight: 700; }
.kd-kpi b span { font-size: 13px; color: var(--kd-muted); font-weight: 500; }
.kd-db__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 20px 0; border-bottom: 1px solid var(--kd-border); flex-wrap: wrap; }
.kd-db__tools { display: flex; align-items: center; gap: 8px; padding: 8px 0; flex-wrap: wrap; }
.kd-db__tools .kd-select { width: auto; }
.kd-db__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--kd-border); flex-wrap: wrap; }
.kd-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.kd-state--concept { background: var(--kd-warn-soft); color: var(--kd-warn-ink); }
.kd-state--active { background: var(--kd-good-soft); color: var(--kd-good-ink); }
.kd-state--archived { background: var(--kd-grey-soft); color: var(--kd-grey-ink); }
.kd-rowacts { display: inline-flex; gap: 4px; }
.kd-mapbox { padding: 16px 20px 20px; }
.kd-mapbox__map { height: 480px; border-radius: 14px; overflow: hidden; border: 1px solid var(--kd-border); background: var(--kd-surface-2); }
.kd-mapbox__legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--kd-text); align-items: center; }
.kd-mapdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.kd-files { padding: 8px 0; }
.kd-file { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--kd-border); }
.kd-file:last-child { border-bottom: 0; }
.kd-file__ic { width: 42px; height: 42px; border-radius: 12px; background: var(--kd-violet-soft); color: var(--kd-violet-ink); display: grid; place-items: center; }
.kd-file b { color: var(--kd-text-strong); display: block; }
.kd-file__fields { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.kd-file__fields .is-key { background: var(--kd-accent-soft); color: var(--kd-accent); }
.kd-file__count { text-align: right; }
.kd-file__count b { font-size: 16px; }
.kd-file__count span { font-size: 12px; color: var(--kd-muted); }
.kd-fieldsbox { grid-column: 1 / -1; background: var(--kd-surface-2); border-radius: 14px; padding: 14px; }
.kd-fieldrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.kd-fieldrow .kd-input, .kd-fieldrow .kd-select { padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.kd-leadform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }

/* --- Import / Scrape ------------------------------------------------------- */
.kd-src { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--kd-text-strong); white-space: nowrap; }
.kd-src .kd-ic { width: 16px; height: 16px; color: var(--kd-muted); }
.kd-wiz { display: flex; flex-direction: column; gap: 16px; }
.kd-wiz__steps { display: flex; gap: 0; background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: 16px; padding: 6px; overflow-x: auto; }
.kd-wiz__step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 11px; color: var(--kd-muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; border: 0; background: none; font-family: inherit; text-align: left; }
.kd-wiz__step i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; background: var(--kd-surface-3); color: var(--kd-text); flex: none; }
.kd-wiz__step.is-done i { background: var(--kd-good); color: #fff; }
.kd-wiz__step.is-done { color: var(--kd-text); cursor: pointer; }
.kd-wiz__step.is-current { background: var(--kd-accent-soft); color: var(--kd-text-strong); }
.kd-wiz__step.is-current i { background: var(--kd-accent); color: #fff; }
.kd-sources-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kd-srcpick { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; background: var(--kd-surface); border: 1px solid var(--kd-border-strong); border-radius: 16px; padding: 18px; cursor: pointer; font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s; }
.kd-srcpick:hover { border-color: var(--kd-text); }
.kd-srcpick.is-active { border-color: var(--kd-accent); box-shadow: 0 0 0 1px var(--kd-accent); background: var(--kd-accent-soft); }
.kd-srcpick b { color: var(--kd-text-strong); font-size: 15px; }
.kd-srcpick span { color: var(--kd-muted); font-size: 13px; }
.kd-srcpick__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 4px; }
.kd-srcpick__types { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.kd-srcpick__types em { font-style: normal; font: 600 10.5px var(--rj-font-mono); padding: 2px 6px; border-radius: 5px; background: var(--kd-surface-3); color: var(--kd-text); }
.kd-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; border: 1.5px dashed var(--kd-border-strong); border-radius: 16px; padding: 34px 20px; background: var(--kd-surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.kd-drop.is-over, .kd-drop:hover { border-color: var(--kd-accent); background: var(--kd-accent-soft); }
.kd-drop__ic { width: 48px; height: 48px; border-radius: 14px; background: var(--kd-surface); color: var(--kd-accent); display: grid; place-items: center; box-shadow: var(--kd-shadow); border: 1px solid var(--kd-border); }
.kd-drop b { color: var(--kd-text-strong); }
.kd-paste { font-family: var(--rj-font-mono) !important; font-size: 12.5px !important; min-height: 220px !important; }
.kd-wiz__foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.kd-wiz__foot .kd__muted { margin-right: auto; font-size: 13px; }
.kd-mapgrid { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--kd-border); border-radius: 14px; overflow: hidden; }
.kd-maprow { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--kd-border); }
.kd-maprow:last-child { border-bottom: 0; }
.kd-maprow.is-open { background: var(--kd-warn-soft); }
.kd-maprow b { color: var(--kd-text-strong); display: block; font-size: 13.5px; }
.kd-maprow span { color: var(--kd-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.kd-maprow__arrow { color: var(--kd-muted); }
.kd-maprow .kd-select { padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.kd-previewtable td, .kd-previewtable th { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.kd-conflict { border: 1px solid var(--kd-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; }
.kd-conflict__changes { font-size: 12.5px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.kd-conflict__changes del { color: var(--kd-bad-ink); }
.kd-conflict__changes ins { color: var(--kd-good-ink); text-decoration: none; }
.kd-derive { border: 1px solid var(--kd-border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.kd-derive__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kd-prefixes { display: flex; gap: 6px; flex-wrap: wrap; }
.kd-prefix { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--kd-border-strong); font-size: 12.5px; cursor: pointer; }
.kd-prefix input { accent-color: var(--kd-accent); margin: 0; }
.kd-prefix:has(input:checked) { border-color: var(--kd-accent); background: var(--kd-accent-soft); color: var(--kd-accent); }
.kd-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 20px; }
.kd-done__ic { width: 64px; height: 64px; border-radius: 50%; background: var(--kd-good-soft); color: var(--kd-good); display: grid; place-items: center; }
.kd-done__ic .kd-ic { width: 30px; height: 30px; stroke-width: 2.4; }

/* --- Analytics + Activities ------------------------------------------------ */
.kd-an { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.kd-an__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kd-an__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; }
.kd-an__line { grid-column: span 8; }
.kd-an__donut { grid-column: span 4; }
.kd-an__recent { grid-column: span 6; }
.kd-an__top { grid-column: span 6; }
.kd-kcard { padding: 18px 20px; }
.kd-kcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kd-kcard__head h3 { font-size: 14.5px; font-weight: 600; color: var(--kd-text-strong); display: inline-flex; align-items: center; gap: 6px; }
.kd-kcard__head h3 .kd-ic { width: 16px; height: 16px; color: var(--kd-muted); }
.kd-kcard__val { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.kd-kcard__val b { font-size: 26px; font-weight: 700; color: var(--kd-text-strong); letter-spacing: -.02em; }
.kd-kcard__arrow { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.kd-kcard__arrow .kd-ic { width: 12px; height: 12px; stroke-width: 2.6; }
.kd-kcard__arrow.is-up { background: var(--kd-good-soft); color: var(--kd-good-ink); }
.kd-kcard__arrow.is-down { background: var(--kd-bad-soft); color: var(--kd-bad-ink); }
.kd-kcard p { font-size: 12.5px; color: var(--kd-muted); margin-top: 4px; }
.kd-kcard--line .kd-kcard__val { padding-top: 12px; border-top: 1px solid var(--kd-border); }
.kd-donut { display: grid; place-items: center; position: relative; padding: 10px 0; }
.kd-donut svg { width: 210px; height: 210px; display: block; }
.kd-donut__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.kd-donut__center b { display: block; font-size: 26px; color: var(--kd-text-strong); font-weight: 700; line-height: 1.1; }
.kd-donut__center span { font-size: 12.5px; color: var(--kd-muted); }
.kd-donutlegend { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.kd-donutlegend div { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kd-donutlegend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.kd-donutlegend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kd-text); }
.kd-donutlegend b { color: var(--kd-text-strong); font-weight: 600; }
.kd-actbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px; }
.kd-dest { display: inline-flex; align-items: center; gap: 6px; color: var(--kd-text-strong); font-weight: 500; text-decoration: none; max-width: 260px; }
.kd-dest span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-dest .kd-ic { width: 15px; height: 15px; color: var(--kd-muted); flex: none; }
a.kd-dest:hover { color: var(--kd-accent); }
.kd-evtype { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.kd-evtype .kd-ic { width: 16px; height: 16px; }
.kd-evtype--click { color: var(--kd-accent); }
.kd-evtype--submit { color: var(--kd-good-ink); }
.kd-evtype--open { color: var(--kd-blue-ink); }
.kd-evtype--sent { color: var(--kd-muted); }
.kd-evtype--unsub { color: var(--kd-warn-ink); }
.kd-evtype--campaign, .kd-evtype--import, .kd-evtype--publish { color: var(--kd-violet-ink); }
.kd-evid { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--kd-text-strong); white-space: nowrap; }
.kd-evid i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.kd-evid i .kd-ic { width: 15px; height: 15px; }

/* --- Settings ---------------------------------------------------------------- */
.kd-set { display: grid; grid-template-columns: 220px minmax(0, 1fr); background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: var(--kd-r); margin-top: 20px; min-height: 560px; overflow: hidden; }
.kd-set__nav { border-right: 1px solid var(--kd-border); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.kd-set__label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kd-muted); padding: 10px 10px 6px; }
.kd-set__label:not(:first-child) { margin-top: 10px; border-top: 1px solid var(--kd-border); padding-top: 16px; }
.kd-set__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--kd-text); text-decoration: none; font-size: 14px; font-weight: 500; }
.kd-set__item .kd-ic { width: 18px; height: 18px; color: var(--kd-muted); }
.kd-set__item:hover { background: var(--kd-hover); color: var(--kd-text-strong); }
.kd-set__item.is-active { background: var(--kd-surface-3); color: var(--kd-text-strong); font-weight: 600; }
.kd-set__item.is-active .kd-ic { color: var(--kd-text-strong); }
.kd-set__body { padding: 26px 30px 34px; min-width: 0; }
.kd-set__sect { padding-bottom: 26px; }
.kd-set__sect + .kd-set__sect { padding-top: 4px; }
.kd-set__sect > h2 { font-size: 18px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--kd-border); margin-bottom: 18px; }
.kd-set__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.kd-set__row + .kd-set__row { border-top: 1px dashed var(--kd-border); }
.kd-set__rowtext b { display: block; color: var(--kd-text-strong); font-size: 14px; font-weight: 600; }
.kd-set__rowtext span { color: var(--kd-muted); font-size: 13px; }
.kd-set__field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; margin-bottom: 16px; }
.kd-set__field .kd-input { max-width: 460px; }
.kd-set__photo { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.kd-set__photo .kd-hint { flex-basis: 100%; margin: -6px 0 0 88px; }
.kd-set__danger b { color: var(--kd-bad-ink) !important; }
.kd-set__save { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.kd-plan { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border-radius: 16px; background: var(--kd-grad); color: #fff; flex-wrap: wrap; }
.kd-plan b { font-size: 22px; display: block; }
.kd-plan span { opacity: .9; font-size: 13.5px; }
.kd .kd-plan .k-btn { background: #fff; color: #101828; }
.kd-plan > div:first-child { min-width: 0; flex: 1 1 320px; }
.kd-plan > div:first-child > span { display: block; }
.kd-bill__badge { font-style: normal; margin-left: 6px; vertical-align: 1px; background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
.kd-bill__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.kd .kd-plan .kd-bill__ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.kd .kd-plan .kd-bill__ghost:hover { background: rgba(255, 255, 255, .12); }
.kd-bill__note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 16px; border-radius: 12px; background: var(--kd-warn-soft); color: var(--kd-warn-ink); font-size: 13.5px; }
.kd-bill__note .kd-ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.kd-bill__note a { color: inherit; font-weight: 600; }
.kd-bill__cycle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kd-bill__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kd-bill__plan { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 20px; border-radius: var(--kd-r); border: 1px solid var(--kd-border); background: var(--kd-surface); }
.kd-bill__plan b { font-size: 16px; color: var(--kd-text-strong); }
.kd-bill__plan p { margin: 0 0 8px; font-size: 13.5px; color: var(--kd-muted); flex: 1; }
.kd-bill__plan.is-current { border-color: var(--kd-border-strong); background: var(--kd-surface-2); }
.kd-bill__plan.is-picked { border-color: var(--kd-accent); box-shadow: 0 0 0 3px var(--kd-accent-soft); }
.kd-bill__price { font-size: 26px; font-weight: 700; color: var(--kd-text-strong); letter-spacing: -.02em; }
.kd-bill__price small { font-size: 12.5px; font-weight: 500; color: var(--kd-muted); letter-spacing: 0; }
.kd-bill__pick { position: absolute; top: -10px; left: 16px; padding: 2px 10px; border-radius: 999px; background: var(--kd-accent); color: #fff; font-size: 11.5px; font-weight: 600; }
.kd-bill__inv { overflow-x: auto; }
@media (max-width: 900px) {
  .kd-bill__plans { grid-template-columns: 1fr; }
}
/* Riftjaw updates: de tijdlijn komt kant-en-klaar uit nijland-stats (klassen rj-upd*,
   eigen inline-CSS met vaste lichte kleuren). Hier hangen we die aan de dashboard-
   tokens, zodat de merkkleuren en het donkere thema kloppen. */
.kd-upd__intro { margin: -4px 0 20px; max-width: 640px; font-size: 13.5px; color: var(--kd-muted); }
.kd-upd .kd-upd__tl { --upd-kleur: var(--kd-accent) !important; --upd-accent: var(--k-accent) !important; --upd-lijn: color-mix(in srgb, var(--upd-kleur) 26%, var(--kd-surface)); max-width: 760px; }
.kd-upd__tl .rj-upd__wanneer b, .kd-upd__tl .rj-upd__punten b { color: var(--kd-text-strong); font-weight: 600; }
.kd-upd__tl .rj-upd__klap > summary:hover .rj-upd__wanneer b { color: var(--kd-accent); }
.kd-upd__tl .rj-upd__tel { color: var(--kd-muted); }
.kd-upd__tl .rj-upd__pijl { border-color: var(--kd-muted); }
.kd-upd__tl .rj-upd__bol { background: var(--kd-surface); }
.kd-upd__tl .rj-upd__klap[open] .rj-upd__bol { box-shadow: 0 0 0 4px var(--kd-surface), 0 0 0 6px var(--upd-lijn); }
.kd-upd__tl .rj-upd__punten { background: var(--kd-surface); border-color: var(--kd-border); border-radius: var(--kd-r-sm); box-shadow: var(--kd-shadow); }
.kd-upd__tl .rj-upd__punten p { color: var(--kd-text); }
.kd-upd__tl .rj-upd__tag { justify-self: start; background: var(--kd-grey-soft); color: var(--kd-grey-ink); }
.kd-upd__tl .rj-upd__tag--nieuw { background: var(--kd-accent-soft); color: var(--kd-accent); }
.kd-upd__tl .rj-upd__tag--opgelost { background: var(--kd-good-soft); color: var(--kd-good-ink); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1280px) {
  .kd-aud { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stats latest" "top top" "eng eng" "lib lib"; }
  .kd-an__line, .kd-an__donut, .kd-an__recent, .kd-an__top { grid-column: 1 / -1; }
  .kd-db-init__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-cprow { grid-template-columns: 44px minmax(0, 1.4fr) repeat(4, minmax(60px, .5fr)) 32px; gap: 12px; }
}
@media (max-width: 1100px) {
  .kd-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kd-home__chart { grid-column: 1 / -1; }
  .kd-home__side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .kd-editor, .kd-fb { grid-template-columns: minmax(0, 1fr); }
  .kd-editor__side, .kd-fb__side { position: static; }
  .kd-an__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-detail__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet en telefoon: sidebar wordt een slide-out menu. */
@media (max-width: 1024px) {
  .kd { grid-template-columns: minmax(0, 1fr); }
  .kd__side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 86vw);
    height: 100%;
    background: var(--kd-surface);
    box-shadow: var(--kd-shadow-pop);
    transform: translateX(-104%);
    transition: transform .28s var(--kd-ease);
    z-index: 80;
  }
  .kd.is-drawer .kd__side { transform: none; }
  .kd.is-drawer .kd__scrim { display: block; position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 70; animation: kd-fade .2s ease; }
  .kd .kd__sideclose { display: inline-grid; }
  .kd__only-desktop { display: none !important; }
  .kd__only-mobile { display: block !important; }
  .kd .kd__burger, .kd .kd__topbrand { display: inline-grid; }
  .kd__topbrand { text-decoration: none; }
  .kd__main { padding: 10px 16px 40px; }
  .kd__kbd { display: none; }
  .kd__search { flex: 1; width: auto; }
  .kd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-kpi:nth-child(2) { border-right: 0; }
  .kd-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--kd-border); }
  .kd-set { grid-template-columns: minmax(0, 1fr); }
  .kd-set__nav { border-right: 0; border-bottom: 1px solid var(--kd-border); flex-direction: row; overflow-x: auto; padding: 8px; }
  .kd-set__label { display: none; }
  .kd-set__item { white-space: nowrap; }
}

@media (max-width: 760px) {
  .kd__title { font-size: 22px; }
  .kd__phead { margin: 6px 0 16px; align-items: flex-start; }
  .kd__pheadtools { width: 100%; }
  .kd__search { height: 42px; }
  .kd__topright { gap: 6px; }
  .kd__iconbtn--ring { width: 40px; height: 40px; }
  .kd__avatar { width: 40px; height: 40px; }
  .kd-home, .kd-home__side { grid-template-columns: minmax(0, 1fr); }
  .kd-home__pipe { grid-template-columns: repeat(4, minmax(250px, 80vw)); scroll-snap-type: x mandatory; }
  .kd-home__pipe > * { scroll-snap-align: start; }
  .kd-aud { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stats" "top" "latest" "eng" "lib"; }
  .kd-an__cards, .kd-an__cards--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kd-db-init__grid { grid-template-columns: minmax(0, 1fr); }
  .kd-sources-pick, .kd-choice { grid-template-columns: minmax(0, 1fr); }
  .kd-tpls, .kd-lib { grid-template-columns: minmax(0, 1fr); }
  .kd-row2, .kd-leadform, .kd-derive__grid { grid-template-columns: minmax(0, 1fr); }
  .kd-cprow { grid-template-columns: 40px minmax(0, 1fr) 32px; row-gap: 12px; padding: 14px; }
  .kd-cprow__ic { width: 40px; height: 40px; }
  .kd-cprow .kd-metric { grid-row: 2; }
  .kd-cprow__metrics { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .kd-cprow__progress { grid-column: 1 / -1; }
  .kd-detail__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-searchbox, .kd-searchbox--sm { min-width: 0; flex: 1; }
  .kd-set__body { padding: 20px 16px; }
  .kd-set__field { grid-template-columns: minmax(0, 1fr); }
  .kd-set__photo .kd-hint { margin-left: 0; }
  .kd-rule { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kd-fieldrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kd-file { grid-template-columns: 42px minmax(0, 1fr); }
  .kd-file__count, .kd-file__acts { grid-column: 2; text-align: left; }
  .kd-maprow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .kd-maprow__arrow { display: none; }
  .kd-mapbox__map { height: 380px; }
  .kd-listhead { flex-direction: column; align-items: stretch; }
  .kd-tabs--line { overflow-x: auto; flex-wrap: nowrap; }
  .kd-db__head { padding: 4px 12px 0; }
  .kd-table th, .kd-table td { padding: 12px; }
  .kd-dl { grid-template-columns: 100px 1fr; }
}
@media (max-width: 420px) {
  .kd-an__cards, .kd-an__cards--3 { grid-template-columns: minmax(0, 1fr); }
  .kd__selpill select { max-width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .kd *, .kd *::before, .kd *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.kd-table td.kd-nowrap, .kd-nowrap { white-space: nowrap; }
.kd-chips--nowrap { flex-wrap: nowrap; }

/* Telefoon: topbar binnen de breedte houden, zoekvelden op een eigen regel. */
@media (max-width: 760px) {
  .kd__top { gap: 8px; }
  .kd__search { min-width: 0; padding: 0 10px; }
  .kd__search input { font-size: 16px; }
  .kd [data-kd-theme-toggle] { display: none; }
  .kd__pheadtools .kd-searchbox { flex: 1 1 100%; order: -1; }
  .kd__pheadtools .kd__selpill { flex: 1 1 auto; }
  .kd-actbar .kd__pheadtools { width: 100%; }
}
@media (max-width: 380px) {
  .kd .kd__topbrand { display: none; }
}
.kd-tabs--line { max-width: 100%; min-width: 0; scrollbar-width: none; }
.kd-tabs--line::-webkit-scrollbar { display: none; }
.kd-listhead > *, .kd-db__head > * { max-width: 100%; min-width: 0; }
.kd-db { max-width: 100%; }
.kd-tablewrap, .kd-card, .kd__panel { position: relative; }

/* --- Inloggen en registreren (fullscreen) ----------------------------------- */
body.rj-canvas:has(.kd-login) { margin: 0; background: #0B0D12 !important; }
.kd-login {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  color: #C9CED9;
  font-family: var(--rj-font);
  background: #0B0D12;
}
.kd-login *, .kd-login *::before, .kd-login *::after { box-sizing: border-box; }
.kd-login [hidden] { display: none !important; }
.kd-login ul, .kd-login ol, .kd-login li { list-style: none !important; margin: 0; padding: 0; }
.kd-login li::marker { content: none; }
.kd-login .kd-ic { width: 18px; height: 18px; flex: none; }

.kd-login__pane { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: linear-gradient(180deg, #0E1117 0%, #0B0D12 100%); }
.kd-login__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 22px clamp(16px, 4vw, 44px); }
.kd-login__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.kd-login__mark { width: 38px; height: 38px; border-radius: 11px; background: #0B0D12; border: 1px solid #2C1519; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(224, 18, 27, .28); }
.kd-login__mark svg { width: 30px; height: 30px; display: block; color: #fff; }
.kd-login__word { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: #fff; }
.kd-login__word b { color: inherit; font-weight: 800; }
.kd-login__switch { margin: 0; font-size: 14px; color: #9AA3B2; }
.kd-login__switch .kd-login__link { font-size: 14px; margin-left: 4px; }

.kd-login__main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px 40px; }
.kd-login__box { width: 100%; max-width: 420px; }
.kd-login__form { display: flex; flex-direction: column; }
.kd-login__stepbox { display: flex; flex-direction: column; }
.kd-login__title { font: 800 clamp(24px, 3vw, 30px)/1.2 var(--rj-font); color: #F2F4F7; margin: 0 0 8px; letter-spacing: -.025em; }
.kd-login__sub { margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: #9AA3B2; }
.kd-login__sub b { color: #E7EAF0; font-weight: 600; word-break: break-all; }
.kd-login__sub .kd-login__link { margin-left: 6px; }

.kd-login__steps { display: flex; gap: 6px; margin: 0 0 26px !important; font-size: 12.5px; font-weight: 600; color: #6B7385; }
.kd-login__steps li { display: flex; align-items: center; gap: 7px; flex: 1; padding-top: 10px; border-top: 2px solid #232834; }
.kd-login__steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #1A1E27; color: #9AA3B2; flex: none; }
.kd-login__steps li.is-on { color: #F2F4F7; border-top-color: #FF2E2E; }
.kd-login__steps li.is-on span { background: #E0121B; color: #fff; }
.kd-login__steps li.is-done { color: #C9CED9; border-top-color: #7A1A1F; }
.kd-login__steps li.is-done span { background: #3A1519; color: #FF8A66; }

.kd-login__plan { display: flex; gap: 10px; align-items: flex-start; margin: -8px 0 20px; padding: 11px 13px; border-radius: 11px; background: rgba(255, 90, 44, .08); border: 1px solid rgba(255, 90, 44, .25); font-size: 13.5px; line-height: 1.5; color: #E7EAF0; }
.kd-login__plan .kd-ic { color: #FF8A66; margin-top: 1px; }

.kd-login__label { display: block; font-size: 13px; font-weight: 600; color: #E7EAF0; margin: 0 0 6px; }
.kd-login__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kd-login__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kd-login__input { width: 100%; font: 400 15px var(--rj-font); color: #F2F4F7; background: #12151C; border: 1px solid #2E3442; border-radius: 11px; padding: 13px 14px; margin-bottom: 16px; transition: border-color .15s, box-shadow .15s; }
.kd-login__input::placeholder { color: #5D6576; }
.kd-login__input:focus { outline: none; border-color: #FF2E2E; box-shadow: 0 0 0 3px rgba(255, 46, 46, .18); }
.kd-login__pass { position: relative; }
.kd-login__pass .kd-login__input { padding-right: 46px; }
.kd-login__eye { position: absolute; top: 7px; right: 6px; width: 36px; height: 34px; border: 0; background: none; color: #9AA3B2; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.kd-login__eye:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.kd-login__meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: -6px 0 12px; }
.kd-login__meter span { height: 4px; border-radius: 4px; background: #232834; transition: background .2s; }
.kd-login__meter[data-meter="1"] span:nth-child(-n+1) { background: #F04438; }
.kd-login__meter[data-meter="2"] span:nth-child(-n+2) { background: #F79009; }
.kd-login__meter[data-meter="3"] span:nth-child(-n+3) { background: #EAAA08; }
.kd-login__meter[data-meter="4"] span { background: #12B76A; }
.kd-login__rules { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0 0 18px !important; font-size: 12.5px; color: #7D8698; }
.kd-login__rules li { display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }
.kd-login__rules .kd-ic { width: 14px; height: 14px; margin-top: 1px; color: #3A4150; transition: color .15s; }
.kd-login__rules li.is-ok { color: #C9CED9; }
.kd-login__rules li.is-ok .kd-ic { color: #12B76A; }

.kd-login__check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #C9CED9; margin: 2px 0 20px; cursor: pointer; line-height: 1.45; }
.kd-login__check input { accent-color: #E0121B; width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
.kd-login__check a, .kd-login__terms a { color: #FF6A4D; }
.kd-login__btn { width: 100%; border: 0; border-radius: 12px; padding: 14px; font: 700 15px var(--rj-font); color: #fff; cursor: pointer; background: linear-gradient(120deg, #FF5A2C 0%, #E0121B 50%, #A50E14 100%); box-shadow: 0 12px 28px rgba(224, 18, 27, .35); transition: filter .15s, transform .15s; }
.kd-login__btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.kd-login__btn:focus-visible { outline: 2px solid #FF8A66; outline-offset: 3px; }
.kd-login__btn:disabled { opacity: .6; cursor: wait; transform: none; }
.kd-login__terms { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: #7D8698; text-align: center; }
.kd-login__safe { display: flex; gap: 8px; align-items: flex-start; justify-content: center; margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: #7D8698; }
.kd-login__safe .kd-ic { width: 15px; height: 15px; margin-top: 1px; color: #9AA3B2; }
.kd-login__link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; color: #FF6A4D; font: 600 13px var(--rj-font); cursor: pointer; }
.kd-login__link:hover { color: #FF8A66; text-decoration: underline; }
.kd-login__link .kd-ic { width: 15px; height: 15px; }
.kd-login__foot { text-align: center; font-size: 13.5px; color: #9AA3B2; margin: 20px 0 0; }
.kd-login__foot .kd-login__link { font-size: 13.5px; }
.kd-login__msg { margin: 16px 0 0; padding: 11px 14px; border-radius: 11px; font-size: 13.5px; background: rgba(240, 68, 56, .14); color: #FDA29B; border: 1px solid rgba(240, 68, 56, .3); }
.kd-login__msg.is-good { background: rgba(18, 183, 106, .12); color: #75E0A7; border-color: rgba(18, 183, 106, .3); }
.kd-login__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kd-login__legal { padding: 0 clamp(16px, 4vw, 44px) 22px; font-size: 12.5px; color: #7D8698; }
.kd-login__legal a { color: #9AA3B2; text-decoration: none; }
.kd-login__legal a:hover { color: #fff; }

.kd-login__aside {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px clamp(24px, 4vw, 64px);
  border-left: 1px solid #1B1F28;
  background:
    radial-gradient(700px 460px at 85% 0%, rgba(224, 18, 27, .32), transparent 60%),
    radial-gradient(640px 420px at 0% 100%, rgba(255, 90, 44, .16), transparent 60%),
    linear-gradient(160deg, #141018 0%, #0B0D12 70%);
}
.kd-login__aside::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%); pointer-events: none; }
.kd-login__asidein { position: relative; width: 100%; max-width: 560px; }
.kd-login__pitch { font: 800 clamp(26px, 2.6vw, 36px)/1.15 var(--rj-font); letter-spacing: -.03em; color: #F2F4F7; margin: 0 0 12px; }
.kd-login__pitchsub { font-size: 16px; line-height: 1.6; color: #A7AFBD; margin: 0 0 28px; max-width: 480px; }

.kd-login__win { background: #10131A; border: 1px solid #262B36; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 46, 46, .05); margin-bottom: 28px; }
.kd-login__winbar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid #20242E; font-size: 12px; color: #7D8698; }
.kd-login__winbar i { width: 9px; height: 9px; border-radius: 50%; background: #2A2F3A; }
.kd-login__winbar span { margin-left: 8px; font-weight: 600; color: #9AA3B2; }
.kd-login__wintools { display: flex; gap: 6px; padding: 12px 14px 4px; flex-wrap: wrap; }
.kd-login__wintools span { font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid #2A2F3A; color: #9AA3B2; }
.kd-login__wintools span.is-on { background: rgba(224, 18, 27, .16); border-color: rgba(255, 46, 46, .4); color: #FFB4A3; }
.kd-login__tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.kd-login__tbl th { text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6B7385; padding: 10px 14px 8px; border-bottom: 1px solid #20242E; }
.kd-login__tbl td { padding: 10px 14px; border-bottom: 1px solid #1A1E27; color: #C9CED9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-login__tbl td:first-child { color: #F2F4F7; font-weight: 600; }
.kd-login__tbl th:nth-child(1) { width: 32%; }
.kd-login__tbl th:nth-child(2) { width: 17%; }
.kd-login__tbl th:nth-child(4) { width: 20%; }
.kd-login__st { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.kd-login__st--new { background: rgba(154, 163, 178, .14); color: #C9CED9; }
.kd-login__st--sent { background: rgba(247, 144, 9, .14); color: #FEC84B; }
.kd-login__st--reply { background: rgba(18, 183, 106, .14); color: #75E0A7; }
.kd-login__winfoot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: 11.5px; color: #6B7385; }

.kd-login__trust { display: grid; gap: 14px; }
.kd-login__trust li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #A7AFBD; }
.kd-login__trust .kd-ic { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(224, 18, 27, .12); border: 1px solid rgba(255, 46, 46, .22); color: #FF8A66; }
.kd-login__trust b { color: #F2F4F7; font-weight: 600; }

@media (max-width: 1100px) {
  .kd-login__tbl th:nth-child(2), .kd-login__tbl td:nth-child(2) { display: none; }
}
@media (max-width: 960px) {
  .kd-login { grid-template-columns: 1fr; }
  .kd-login__pane { min-height: 0; }
  .kd-login__main { padding-top: 12px; }
  .kd-login__aside { position: relative; height: auto; border-left: 0; border-top: 1px solid #1B1F28; padding: 40px 16px 48px; }
  .kd-login__win { display: none; }
  .kd-login__pitch { font-size: 24px; }
}
@media (max-width: 480px) {
  .kd-login__top { padding: 16px; }
  .kd-login__input { font-size: 16px; }
  .kd-login__cols { grid-template-columns: 1fr; gap: 0; }
  .kd-login__rules { grid-template-columns: 1fr; }
  .kd-login__steps { font-size: 11.5px; }
}
.kd-fstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.kd-fstats__chart { margin-bottom: 12px; }
.kd-fstats__bars { height: 72px; margin-top: 14px; gap: 3px; }
.kd-fstats__bars i { min-width: 3px; }
.kd-fstats__camps { margin-bottom: 12px; }
.kd-fstats__camps ul { list-style: none; margin: 10px 0 0; padding: 0; }
.kd-fstats__camps li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--kd-border); font-size: 13.5px; }
.kd-fstats__camps li:first-child { border-top: 0; }
.kd-fstats__camps a { color: var(--kd-text-strong); font-weight: 500; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-fstats__camps a:hover { color: var(--kd-accent); }
.kd-fstats__h { font-size: 14.5px; font-weight: 600; color: var(--kd-text-strong); margin: 18px 0 10px; }
.kd-lib__h { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--kd-muted); }
.kd-lib__h:first-child { margin-top: 0; }
.kd-lib__h .kd-ic { width: 14px; height: 14px; }
.kd-lib__none { grid-column: 1 / -1; font-size: 13px; margin: 0 0 4px; }
.kd-libitem--ds { border: 1px dashed var(--kd-border-strong); cursor: pointer; }
@media (max-width: 900px) {
  .kd-fstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kd-an__tabs { margin: 0 0 16px; }
a.kd-seg__btn { display: inline-flex; align-items: center; text-decoration: none; }
.kd-an__full { grid-column: 1 / -1; }
.kd-funnel { display: flex; flex-direction: column; gap: 12px; }
.kd-funnel__row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 120px; align-items: center; gap: 14px; font-size: 13.5px; }
.kd-funnel__label { color: var(--kd-text); font-weight: 500; }
.kd-funnel__track { height: 14px; border-radius: 999px; background: var(--kd-surface-3); overflow: hidden; }
.kd-funnel__track i { display: block; height: 100%; border-radius: 999px; background: var(--kd-accent); transition: width .5s var(--kd-ease); }
.kd-funnel__track i.is-b { opacity: .75; }
.kd-funnel__track i.is-c { opacity: .55; }
.kd-funnel__track i.is-d { background: var(--kd-accent-2); }
.kd-funnel__val { text-align: right; color: var(--kd-muted); font-variant-numeric: tabular-nums; }
.kd-funnel__val b { color: var(--kd-text-strong); font-weight: 600; margin-right: 4px; }
.kd-rs__cell b { font-weight: 600; }
.kd-rs__pct { display: block; font-size: 12px; color: var(--kd-muted); }
@media (max-width: 640px) {
  .kd-funnel__row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .kd-funnel__track { grid-column: 1 / -1; grid-row: 2; }
  .kd-an__tabs .kd-seg { width: 100%; }
  .kd-an__tabs .kd-seg__btn { flex: 1; justify-content: center; }
}
.kd-choice--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kd-detail__stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kd-wiz__step[data-kd-wiz-next] { cursor: pointer; color: var(--kd-text); }
.kd-wiz__li { flex: 1; display: flex; }
.kd-wiz__foot[data-kd-sc-foot] { margin-top: 16px; }
.kd-sc__find { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 16px; }
.kd-sc__find .kd__muted { font-size: 13px; min-width: 0; }
.kd-sc { display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; padding-top: 16px; border-top: 1px solid var(--kd-border); }
.kd-sc[aria-busy="true"] .kd-sc__groups, .kd-sc[aria-busy="true"] .kd-sc__cols, .kd-sc[aria-busy="true"] .kd-sc__prev { opacity: .55; pointer-events: none; transition: opacity .15s; }
.kd-sc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-top: 6px; }
.kd-sc__head:first-child { margin-top: 0; }
.kd-sc__head .kd__muted { font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.kd-sc__h { font-size: 14.5px; font-weight: 600; color: var(--kd-text-strong); margin: 0; }
.kd-sc__h:focus { outline: none; }
.kd-sc__h:focus-visible { outline: 2px solid var(--kd-accent); outline-offset: 3px; border-radius: 4px; }
.kd-sc__groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.kd-sc__grp { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px 14px; text-align: left; font-family: inherit; color: var(--kd-text); background: var(--kd-surface); border: 1px solid var(--kd-border-strong); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.kd-sc__grp:hover { border-color: var(--kd-text); }
.kd-sc__grp.is-active { border-color: var(--kd-accent); background: var(--kd-accent-soft); box-shadow: 0 0 0 1px var(--kd-accent); }
.kd-sc__grp:focus-visible { outline: 2px solid var(--kd-accent); outline-offset: 2px; }
.kd-sc__grpic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--kd-surface-3); color: var(--kd-text); }
.kd-sc__grp.is-active .kd-sc__grpic { background: var(--kd-surface); color: var(--kd-accent); }
.kd-sc__grpic .kd-ic { width: 17px; height: 17px; }
.kd-sc__grptext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kd-sc__grptext b { font-size: 13.5px; font-weight: 600; color: var(--kd-text-strong); overflow-wrap: anywhere; }
.kd-sc__grptext span { font-size: 12px; color: var(--kd-muted); }
.kd-sc__adv { border: 1px solid var(--kd-border); border-radius: 12px; background: var(--kd-surface); }
.kd-sc__adv summary { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--kd-text-strong); cursor: pointer; }
.kd-sc__adv summary:focus-visible { outline: 2px solid var(--kd-accent); outline-offset: 2px; border-radius: 12px; }
.kd-sc__advbody { padding: 0 14px 14px; }
.kd-sc__selrow { display: flex; align-items: center; gap: 8px; }
.kd-sc__selrow .kd-input { flex: 1; min-width: 0; font-family: var(--rj-font-mono); font-size: 13px; }
.kd-sc__selrow .k-btn { flex: none; }
.kd-sc__cols { display: flex; flex-direction: column; border: 1px solid var(--kd-border); border-radius: 14px; overflow: hidden; }
.kd-sc__col { display: grid; grid-template-columns: 22px minmax(140px, 220px) 118px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--kd-border); }
.kd-sc__col:last-child { border-bottom: 0; }
.kd-sc__col.is-off .kd-sc__name, .kd-sc__col.is-off .kd-sc__fill, .kd-sc__col.is-off .kd-sc__sample { opacity: .5; }
.kd-sc__on { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kd-sc__on input { width: 16px; height: 16px; margin: 0; accent-color: var(--kd-accent); cursor: pointer; }
.kd-sc__name.kd-input { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.kd-sc__fill { font-size: 12.5px; color: var(--kd-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kd-sc__sample { min-width: 0; font-size: 12px; color: var(--kd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-sc__part { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 10px 14px 8px; font-size: 12px; color: var(--kd-muted); background: var(--kd-surface-2); border-bottom: 1px solid var(--kd-border); }
.kd-sc__part b { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kd-text); }
.kd-sc__prev { border: 1px solid var(--kd-border); border-radius: 12px; }
.kd-sc__none { padding: 14px; font-size: 13px; color: var(--kd-muted); }
.kd-sc__sum { margin: -6px 0 14px; }
.kd-sc__clip { position: fixed; top: 0; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kd-sc__hl { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 10px; background: var(--kd-surface-2); border: 1px solid var(--kd-border-strong); border-radius: 16px; }
.kd-sc__hl .kd-srcpick__ic { margin: 0; flex: none; }
.kd-sc__hltext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kd-sc__hltext b { font-size: 15px; color: var(--kd-text-strong); overflow-wrap: anywhere; }
.kd-sc__hltext span { font-size: 13px; color: var(--kd-muted); overflow-wrap: anywhere; }
.kd-hlcard { margin-top: 16px; }
.kd-hl__load { padding: 16px 20px; }
.kd-hltable tr[data-kd-hl-row] { cursor: pointer; }
.kd-hl__name { display: block; font-weight: 600; }
.kd-hl__sub { display: block; max-width: 320px; font-size: 12px; color: var(--kd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-hl__cols { display: block; max-width: 300px; font-size: 13px; color: var(--kd-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd .kd-hl__acts { gap: 4px; flex-wrap: nowrap; justify-content: flex-end; }
.kd-hl__view { max-height: 60vh; overflow: auto; border: 1px solid var(--kd-border); border-radius: 12px; }
@media (max-width: 900px) {
  .kd-detail__stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .kd-choice--2 { grid-template-columns: minmax(0, 1fr); }
  .kd-sc__groups { grid-template-columns: minmax(0, 1fr); }
  .kd-sc__selrow { flex-direction: column; align-items: stretch; }
  .kd-sc__col { grid-template-columns: 22px minmax(0, 1fr); gap: 6px 10px; padding: 10px 12px; }
  .kd-sc__fill, .kd-sc__sample { grid-column: 2; }
  .kd-sc__hl { align-items: flex-start; padding: 14px; }
  .kd-hltable, .kd-hltable tbody, .kd-hltable tr, .kd-hltable td { display: block; width: 100%; }
  .kd-hltable thead { display: none; }
  .kd-hltable tr { padding: 12px 16px; border-bottom: 1px solid var(--kd-border); }
  .kd-hltable tbody tr:last-child { border-bottom: 0; }
  .kd-hltable tbody tr:hover { background: var(--kd-surface-2); }
  .kd-hltable tbody tr:hover td { background: none; }
  .kd-hltable td, .kd-hltable td.kd-num, .kd-hltable .kd-act-col { width: 100%; padding: 2px 0; border: 0; text-align: left; white-space: normal; }
  .kd-hltable td[data-label="Rows"]::before, .kd-hltable td[data-label="Columns"]::before, .kd-hltable td[data-label="Date"]::before { content: attr(data-label) ": "; font-size: 12px; color: var(--kd-muted); }
  .kd-hltable .kd-date b, .kd-hltable .kd-date span { display: inline; margin-right: 6px; }
  .kd-hltable .kd-hl__cols, .kd-hltable .kd-hl__sub { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .kd-hltable .kd-hl__cols { display: inline; }
  .kd-hltable .kd-act-col { padding-top: 8px; }
  .kd .kd-hl__acts { justify-content: flex-start; flex-wrap: wrap; }
}

.kd-error { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--kd-bad-soft); border-radius: var(--kd-r-sm); background: var(--kd-bad-soft); color: var(--kd-text); font-size: 13.5px; line-height: 1.45; text-align: left; }
.kd-error > div { flex: 1 1 220px; min-width: 0; }
.kd-error b { display: block; color: var(--kd-text-strong); font-size: 14px; font-weight: 600; }
.kd-error p { margin-top: 2px; overflow-wrap: anywhere; }
.kd-error__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--kd-surface); color: var(--kd-bad-ink); }
.kd-error__ic .kd-ic { width: 18px; height: 18px; }
.kd-error .k-btn { flex: none; margin-left: auto; }

.kd-banner { position: sticky; top: 8px; z-index: 35; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 14px 12px 16px; border-radius: var(--kd-r-sm); font-size: 13.5px; line-height: 1.45; box-shadow: var(--kd-shadow-pop); }
.kd-banner p { flex: 1 1 240px; min-width: 0; font-weight: 600; }
.kd-banner__ic { display: grid; place-items: center; flex: none; }
.kd-banner__ic .kd-ic { width: 20px; height: 20px; }
.kd-banner .k-btn { flex: none; margin-left: auto; }
.kd-banner--warn { background: linear-gradient(var(--kd-warn-soft), var(--kd-warn-soft)), var(--kd-surface); color: var(--kd-warn-ink); border: 1px solid var(--kd-warn-soft); }

.kd .k-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.kd .kd__linkbtn[aria-busy="true"] { cursor: progress; }

.kd__poplist .kd-empty, .kd__searchdrop .kd-empty { padding: 24px 16px; gap: 8px; }
.kd__poplist .kd-empty__ic, .kd__searchdrop .kd-empty__ic, .kd-chart__empty .kd-empty__ic { width: 40px; height: 40px; border-radius: 12px; }
.kd__poplist .kd-empty__ic .kd-ic, .kd__searchdrop .kd-empty__ic .kd-ic, .kd-chart__empty .kd-empty__ic .kd-ic { width: 20px; height: 20px; }
.kd__poplist .kd-error, .kd__searchdrop .kd-error { margin: 4px; padding: 12px; }
.kd-chart__empty .kd-empty { padding: 14px 18px; gap: 6px; max-width: 100%; background: var(--kd-surface); border-radius: var(--kd-r-sm); }

@media (max-width: 760px) {
  .kd-banner { top: 6px; padding: 10px 12px; }
  .kd-error { padding: 12px; }
}

@media (max-width: 760px) {
  .kd-table:not(.kd-table--keep) { --tb-pad: 12px; --tb-lbl: min(36%, 140px); display: block; position: relative; width: 100%; }
  .kd-card:not(.kd-card--flush):not([style*="padding:0"]) .kd-table:not(.kd-table--keep), .kd-drawer .kd-table:not(.kd-table--keep), .kd-modal .kd-table:not(.kd-table--keep) { --tb-pad: 0px; }
  .kd-tablewrap:has(> .kd-table:not(.kd-table--keep)) { overflow-x: clip; }
  .kd-table:not(.kd-table--keep) > thead { display: block; }
  .kd-table:not(.kd-table--keep) > thead > tr { display: flex; justify-content: flex-end; }
  .kd-table:not(.kd-table--keep) > thead > tr > th { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .kd-table:not(.kd-table--keep) > thead > tr > th.kd-check-col:has(input) { position: static; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; width: auto; height: auto; margin: 0; padding: 12px calc(var(--tb-pad) + 15px) 0 12px; overflow: visible; clip: auto; clip-path: none; background: none; font-size: 13px; color: var(--kd-muted); cursor: pointer; }
  .kd-table:not(.kd-table--keep) > thead > tr > th.kd-check-col:has(input)::after { content: "Select all"; }
  .kd-table:not(.kd-table--keep) > thead .kd-check-col input { width: 20px; height: 20px; margin: 0; }
  .kd-table:not(.kd-table--keep) > tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: var(--tb-pad); }
  .kd-table:not(.kd-table--keep) > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 8px; padding: 14px; border: 1px solid var(--kd-border); border-radius: var(--kd-r-sm); background: var(--kd-surface); transition: background .12s, border-color .12s; }
  .kd-table:not(.kd-table--keep) > tbody > tr:hover > td { background: none; }
  .kd-table:not(.kd-table--keep) > tbody > tr[data-open]:active { background: var(--kd-surface-2); }
  .kd-table:not(.kd-table--keep) > tbody > tr.is-picked { background: var(--kd-accent-soft); border-color: var(--kd-accent); }
  .kd-table:not(.kd-table--keep) > tbody > tr.is-picked > td { background: none !important; }
  .kd-table:not(.kd-table--keep) > tbody > tr > td { display: block; position: relative; grid-column: 1 / -1; min-width: 0; width: auto; padding: 0; border: 0; background: none; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .kd-table:not(.kd-table--keep) > tbody > tr > td:where([data-label]:not([data-label=""])) { min-height: 20px; padding-left: var(--tb-lbl); }
  .kd-table:not(.kd-table--keep) > tbody > tr > td:where([data-label]:not([data-label=""]))::before { content: attr(data-label); position: absolute; top: 0; left: 0; width: calc(var(--tb-lbl) - 10px); font-size: 12px; font-weight: 500; line-height: 20px; color: var(--kd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kd-table:not(.kd-table--keep) > tbody > tr > td.kd-cell-title { grid-column: 1; grid-row: 1; padding-left: 0; font-size: 14px; font-weight: 600; color: var(--kd-text-strong); }
  .kd-table:not(.kd-table--keep) > tbody > tr > td.kd-cell-title::before { content: none; }
  .kd-table:not(.kd-table--keep) > tbody > tr:not(:has(> td.kd-cell-title)) > td:first-child:not(.kd-check-col), .kd-table:not(.kd-table--keep) > tbody > tr:not(:has(> td.kd-cell-title)) > td.kd-check-col:first-child + td { grid-column: 1; grid-row: 1; padding-left: 0; font-size: 14px; font-weight: 600; color: var(--kd-text-strong); }
  .kd-table:not(.kd-table--keep) > tbody > tr:not(:has(> td.kd-cell-title)) > td:first-child:not(.kd-check-col)::before, .kd-table:not(.kd-table--keep) > tbody > tr:not(:has(> td.kd-cell-title)) > td.kd-check-col:first-child + td::before { content: none; }
  .kd-table:not(.kd-table--keep) > tbody > tr > td :is(.kd-who__text span, .kd-cellmuted, .kd__muted, .kd-hl__sub) { font-weight: 400; }
  .kd-table:not(.kd-table--keep) > tbody > tr > td.kd-check-col { grid-column: 2; grid-row: 1; align-self: start; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -6px 0 8px; padding: 0; cursor: pointer; }
  .kd-table:not(.kd-table--keep) > tbody > tr > td.kd-check-col::before { content: none; }
  .kd-table:not(.kd-table--keep) > tbody > tr > td.kd-check-col input { width: 20px; height: 20px; margin: 0; }
  .kd-table:not(.kd-table--keep) > tbody > tr > td.kd-act-col { order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; padding: 10px 0 0; border-top: 1px solid var(--kd-border); }
  .kd-table:not(.kd-table--keep) > tbody > tr > td.kd-act-col::before { content: none; }
  .kd-table:not(.kd-table--keep) > tbody > tr > td.kd-act-col:empty { display: none; }
  .kd-table:not(.kd-table--keep) td.kd-act-col .k-row, .kd-table:not(.kd-table--keep) td.kd-act-col .kd-rowacts, .kd-table:not(.kd-table--keep) td.kd-act-col .kd-hl__acts { flex-wrap: wrap !important; justify-content: flex-start !important; }
  .kd-table:not(.kd-table--keep) .kd-who__text b, .kd-table:not(.kd-table--keep) .kd-who__text span { white-space: normal; overflow-wrap: anywhere; }
  .kd-table:not(.kd-table--keep) .kd-evid { white-space: normal; align-items: flex-start; }
  .kd-table:not(.kd-table--keep) .kd-chips--nowrap { flex-wrap: wrap; }
  .kd-table:not(.kd-table--keep) .kd-date b { display: inline; margin-right: 6px; }
  .kd-table:not(.kd-table--keep) .kd-rs__pct { display: inline; margin-left: 6px; }
  .kd-table:not(.kd-table--keep) .kd-dest { max-width: 100%; }
  .kd-table:not(.kd-table--keep) td :is(.kd-chip, .kd-badge, .kd-src, .kd-evtype, .kd-mailed, .kd-ctkind, .kd-state) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 760px) and (hover: hover) {
  .kd-table:not(.kd-table--keep) > tbody > tr:hover { background: var(--kd-surface-2); }
  .kd-table:not(.kd-table--keep) > tbody > tr.is-picked:hover { background: var(--kd-accent-soft); }
}

.kd-tablewrap:has(> .kd-table--keep) { overflow-x: auto; overscroll-behavior-x: contain; background: linear-gradient(to left, var(--kd-surface) 45%, transparent) right / 32px 100% no-repeat local, linear-gradient(to left, var(--kd-border-strong), transparent) right / 16px 100% no-repeat scroll; }

@media (max-width: 760px) {
  .kd__searchdrop { position: fixed; top: 76px; left: 8px; right: 8px; z-index: 60; max-height: 70vh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .kd__searchhit { align-items: flex-start; padding: 10px; }
  .kd__searchhit > span { flex: 1 1 auto; min-width: 0; }
  .kd__searchhit b { overflow-wrap: anywhere; }
  .kd__searchhit > span > span { display: block; word-break: break-all; }
  .kd__popmenu { max-width: calc(100vw - 16px); }
  .kd__popmenu--wide { position: fixed; top: 76px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; }
}

@media (max-width: 1024px), (pointer: coarse) {
  .kd input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), .kd select, .kd textarea { font-size: 16px !important; }
  .kd .kd-tabs__btn { min-height: 40px; min-width: 44px; justify-content: center; }
  .kd .kd-phs { gap: 8px; }
  .kd .kd-ph { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 10px; }
  .kd .k-btn--xs { min-height: 34px; }
  .kd [data-kd-cd-tags] { gap: 8px; }
  .kd [data-kd-cd-tags] > button.kd-chip { min-height: 34px; min-width: 34px; justify-content: center; padding: 6px 12px; }
  .kd .kd-seg { row-gap: 10px; }
  .kd .kd-ffield__acts { gap: 8px; }
  .kd .kd__textlink, .kd .kd__linkbtn, .kd .kd-ph, .kd .kd-seg__btn, .kd .k-btn--xs, .kd .kd__iconbtn--sm, .kd a.kd__iconlink { position: relative; }
  .kd .kd__textlink::after, .kd .kd__linkbtn::after, .kd .kd-ph::after, .kd .kd-seg__btn::after, .kd .k-btn--xs::after, .kd .kd__iconbtn--sm::after, .kd a.kd__iconlink::after { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 40px; min-height: 100%; transform: translateY(-50%); }
  .kd a.kd__iconlink::after { right: -5px; left: -5px; }
}

@media (max-width: 1024px) {
  html.kd-lock, html.kd-lock body { overflow: hidden; }
  html:has(.kd.is-drawer), html:has(.kd.is-drawer) body { overflow: hidden; }
  .kd__side { visibility: hidden; overscroll-behavior: contain; transition: transform .28s var(--kd-ease), visibility 0s linear .28s; }
  .kd.is-drawer .kd__side { visibility: visible; transition: transform .28s var(--kd-ease), visibility 0s linear 0s; }
  .kd.is-drawer .kd__scrim { touch-action: none; }
}

html.kd-paying, html.kd-paying body { overflow: hidden; }
.kd-pay { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; background: var(--kd-bg); color: var(--kd-text); font-family: var(--rj-font); font-size: 14px; line-height: 1.5; animation: kd-pay-in .18s ease; }
@keyframes kd-pay-in { from { opacity: 0; } to { opacity: 1; } }
.kd-pay__top { flex: none; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--kd-surface); border-bottom: 1px solid var(--kd-border); }
.kd-pay__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--kd-text-strong); min-width: 0; }
.kd-pay__steps { display: flex; gap: 4px; margin: 0 auto; padding: 0; list-style: none; }
.kd-pay__steps li { display: flex; }
.kd-pay__step { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 8px; border: 0; border-radius: 999px; background: none; color: var(--kd-muted); font: 600 13px var(--rj-font); white-space: nowrap; }
.kd-pay__step i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-style: normal; font-size: 12px; background: var(--kd-surface-3); color: var(--kd-text); }
.kd-pay__step i .kd-ic { width: 14px; height: 14px; }
.kd-pay__step.is-current { background: var(--kd-accent-soft); color: var(--kd-text-strong); }
.kd-pay__step.is-current i { background: var(--kd-accent); color: #fff; }
.kd-pay__step.is-done { color: var(--kd-text); cursor: pointer; }
.kd-pay__step.is-done:hover { background: var(--kd-hover); }
.kd-pay__step.is-done i { background: var(--kd-good); color: #fff; }
.kd-pay__step:disabled { cursor: default; }
.kd-pay__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 32px 20px 40px; }
.kd-pay__inner { width: min(640px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.kd-pay .kd-pay__h { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.kd-pay__sub { margin-top: 6px; color: var(--kd-muted); font-size: 14px; }
.kd-pay__card { background: var(--kd-surface); border: 1px solid var(--kd-border); border-radius: var(--kd-r); padding: 20px; box-shadow: var(--kd-shadow); }
.kd-pay .kd-pay__card h2 { font-size: 15px; margin-bottom: 16px; }
.kd-pay__plan { border-color: var(--kd-accent); box-shadow: 0 0 0 3px var(--kd-accent-soft); }
.kd-pay__planrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kd-pay__plantext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kd-pay__plantext b { font-size: 18px; color: var(--kd-text-strong); }
.kd-pay__plantext span { font-size: 13.5px; color: var(--kd-muted); }
.kd-pay__price { font-size: 28px; font-weight: 700; color: var(--kd-text-strong); letter-spacing: -.02em; white-space: nowrap; }
.kd-pay__price small { font-size: 13px; font-weight: 500; color: var(--kd-muted); letter-spacing: 0; }
.kd-pay__planbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--kd-border); }
.kd-pay__planbar .kd-hint { margin: 0; }
.kd-pay__planbar .kd__textlink { margin-left: auto; }
.kd-pay .kd-input[aria-invalid="true"], .kd-pay .kd-select[aria-invalid="true"] { border-color: var(--kd-bad); box-shadow: 0 0 0 3px var(--kd-bad-soft); }
.kd-pay__lines { display: grid; gap: 10px; }
.kd-pay__line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.kd-pay__line b { font-weight: 600; color: var(--kd-text-strong); white-space: nowrap; }
.kd-pay__line--total { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--kd-border); font-size: 16px; font-weight: 700; color: var(--kd-text-strong); }
.kd-pay__line--total b { font-weight: 700; }
.kd-pay__to { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--kd-border); font-size: 13.5px; }
.kd-pay__to span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--kd-text-strong); }
.kd-pay__to p { color: var(--kd-text); overflow-wrap: anywhere; }
.kd-pay__methods { margin: 0; padding: 0; border: 0; min-width: 0; }
.kd-pay__methods legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--kd-text-strong); }
.kd-pay__mlist { clear: both; display: grid; gap: 8px; }
.kd-pay__method { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 16px; border: 1px solid var(--kd-border-strong); border-radius: var(--kd-r-sm); background: var(--kd-surface); cursor: pointer; transition: border-color .15s, background .15s; }
.kd-pay__method:hover { border-color: var(--kd-text); }
.kd-pay__method input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--kd-accent); }
.kd-pay__method:has(input:checked) { border-color: var(--kd-accent); background: var(--kd-accent-soft); box-shadow: 0 0 0 1px var(--kd-accent); }
.kd-pay__method:has(input:focus-visible) { outline: 2px solid var(--kd-accent); outline-offset: 2px; }
.kd-pay__mic { width: 44px; height: 30px; display: grid; place-items: center; flex: none; border-radius: var(--kd-r-xs); background: #fff; border: 1px solid var(--kd-border); color: var(--kd-grey-ink); }
.kd-pay__mic img { display: block; max-width: 34px; max-height: 22px; }
.kd-pay__mic .kd-ic { width: 20px; height: 20px; }
.kd-pay__mtext { display: flex; flex-direction: column; min-width: 0; }
.kd-pay__mtext b { font-size: 14px; font-weight: 600; color: var(--kd-text-strong); }
.kd-pay__mtext span { font-size: 12.5px; color: var(--kd-muted); }
.kd-pay__safe { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--kd-muted); }
.kd-pay__safe .kd-ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.kd-pay__foot { flex: none; padding: 12px 20px; background: var(--kd-surface); border-top: 1px solid var(--kd-border); }
.kd-pay__footin { width: min(640px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.kd-pay__msg { margin-right: auto; font-size: 13px; }
.kd-pay__msg:not(:empty) { color: var(--kd-bad-ink); }
.kd-bill__note { flex-wrap: wrap; align-items: center; }
.kd-bill__note > span { flex: 1; min-width: 200px; }
.kd-bill__note--good { background: var(--kd-good-soft); color: var(--kd-good-ink); }
.kd-bill__note--info { background: var(--kd-surface-2); color: var(--kd-text); border: 1px solid var(--kd-border); }
.kd-set__sect[data-kd-bill-plans] { scroll-margin-top: 80px; }
.kd-set__sect[data-kd-bill-plans]:focus { outline: none; }
@media (max-width: 600px) {
  .kd-pay__top { gap: 8px; padding: 8px 12px; }
  .kd-pay__brand > span:last-child { display: none; }
  .kd-pay__step { padding: 6px 10px 6px 6px; }
  .kd-pay__step:not(.is-current) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kd-pay__body { padding: 20px 16px 28px; }
  .kd-pay .kd-pay__h { font-size: 22px; }
  .kd-pay__card { padding: 16px; }
  .kd-pay__price { font-size: 24px; }
  .kd-pay__planbar .kd__textlink { margin-left: 0; }
  .kd-pay__foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .kd-pay__msg { flex-basis: 100%; }
  .kd-pay__footin .k-btn { flex: 1; justify-content: center; }
}

.kd-pager--per .kd-pager__info { margin-right: 0; }
.kd-pager__per { position: relative; display: inline-flex; align-items: center; flex: none; margin: 0 auto 0 8px; padding-right: 6px; }
.kd-pager__per .kd-select { min-height: 34px; color: var(--kd-text-strong); }
@media (max-width: 1024px), (pointer: coarse) {
  .kd-pager__per .kd-select { min-height: 40px; }
}
@media (max-width: 600px) {
  .kd-pager--per { row-gap: 6px; column-gap: 2px; }
  .kd-pager--per::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .kd-pager--per .kd-pager__btn { order: 2; padding: 0 6px; }
  .kd-db__foot { padding-left: 16px; padding-right: 16px; }
  .kd-pager--per span.kd-pager__btn { min-width: 18px; padding: 0 2px; }
}

.kd__bnav { display: none; }
.kd-set__nav[hidden] { display: none !important; }
@media (max-width: 760px) {
  .kd__main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .kd__bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--kd-surface); border-top: 1px solid var(--kd-border); box-shadow: 0 -6px 20px rgba(16, 24, 40, .06); }
  .kd__bnavitem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 4px 2px; border-radius: 14px; color: var(--kd-muted); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .kd__bnavic { display: grid; place-items: center; width: 44px; height: 30px; border-radius: 999px; transition: background .15s, color .15s; }
  .kd__bnavic .kd-ic { width: 23px; height: 23px; }
  .kd__bnavtext { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1.2; }
  .kd__bnavitem.is-active { color: var(--kd-accent); }
  .kd__bnavitem.is-active .kd__bnavic { background: var(--kd-accent-soft); }
  .kd__bnavitem:focus-visible { outline: 2px solid var(--kd-accent); outline-offset: -2px; }
  .kd__toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 12px; left: 12px; align-items: stretch; }
  .kd__navlabel { font-size: 12px; padding: 18px 12px 8px; }
  .kd__navitem { font-size: 16px; gap: 14px; padding: 12px 14px; }
  .kd__navic { width: 22px; height: 22px; }
  .kd__navic .kd-ic { width: 22px; height: 22px; }
  .kd__navsubitem { font-size: 15.5px; padding: 10px 14px; }
  .kd__title { font-size: 26px; }
  .kd-set__sect > h2 { font-size: 20px; }
  .kd-card__title { font-size: 17px; }
  .kd .k-label, .kd-label { font-size: 15px; }
  .kd-set__rowtext b { font-size: 15.5px; }
  .kd-set__rowtext span { font-size: 14px; }
  .kd-set { grid-template-rows: auto minmax(0, 1fr); min-height: 0; align-content: start; }
  .kd-set__nav { align-self: start; align-items: center; gap: 6px; padding: 10px; scrollbar-width: none; }
  .kd-set__nav::-webkit-scrollbar { display: none; }
  .kd-set__item { flex: none; height: 44px; padding: 0 14px; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1; border-radius: 12px; }
  .kd-set__item.is-active { font-weight: 600; background: var(--kd-accent-soft); color: var(--kd-accent); }
  .kd-set__item.is-active .kd-ic { color: var(--kd-accent); }
}

.kd__backbar { display: flex; align-items: center; gap: 14px; min-height: 60px; margin-bottom: 8px; }
.kd__backbar[hidden] { display: none; }
.kd__backbar-btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px 0 10px; border-radius: 12px; border: 1px solid var(--kd-border); background: var(--kd-surface); color: var(--kd-text-strong); font-weight: 600; font-size: 14px; text-decoration: none; flex: none; }
.kd__backbar-btn:hover { border-color: var(--kd-text-strong); }
.kd__backbar-btn .kd-ic { width: 18px; height: 18px; }
.kd__backbar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kd__backbar-text small { font-size: 12px; font-weight: 600; color: var(--kd-muted); letter-spacing: .02em; }
.kd__backbar-text b { font-size: 16px; color: var(--kd-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd.has-back .kd__top { display: none; }
.kd.has-back .kd__panel .kd__back { display: none; }
@media (min-width: 1025px) {
  .kd[data-route]:not([data-route="dashboard"]) .kd__top { display: none; }
  .kd[data-route]:not([data-route="dashboard"]):not(.has-back) .kd__main { padding-top: 28px; }
}

.kd-home__side > .kd-health { flex: 1 1 auto; display: flex; flex-direction: column; }
.kd-home__side > .kd-health .kd-health__row { flex: 1 1 auto; align-items: flex-end; }

.kd-maprow__col { display: block; width: 100%; min-width: 0; text-align: left; background: none; border: 1px dashed transparent; border-radius: 10px; padding: 6px 8px; margin: -6px -8px; cursor: pointer; color: inherit; font: inherit; }
.kd-maprow__col:hover, .kd-maprow__col:focus-visible { border-color: var(--kd-border-strong, var(--kd-border)); background: var(--kd-surface); }
.kd-maprow__col em { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--kd-accent); margin-top: 2px; }
.kd-maprow.is-flash { animation: kd-mapflash 2.4s ease; }
@keyframes kd-mapflash { 0%, 30% { box-shadow: inset 0 0 0 2px var(--kd-accent); background: var(--kd-accent-soft); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.kd-colhead { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.kd-colhead__src { font-weight: 600; color: var(--kd-text-strong); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.kd-colhead__to { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--kd-good-ink); background: var(--kd-good-soft); border-radius: 999px; padding: 1px 8px 1px 4px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.kd-colhead__to .kd-ic { width: 12px; height: 12px; flex: none; }
.kd-colhead__q { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--kd-warn-soft); color: var(--kd-warn-ink); font-weight: 800; font-size: 13px; cursor: pointer; padding: 0; }
.kd-colhead__q:hover, .kd-colhead__q:focus-visible { background: var(--kd-accent); color: #fff; }
.kd-fulltable { max-height: 460px; overflow: auto; border: 1px solid var(--kd-border); border-radius: 12px; }
.kd-fulltable thead th { position: sticky; top: 0; z-index: 2; background: var(--kd-surface-2); vertical-align: top; }
.kd-fulltable td.is-skip { color: var(--kd-muted); background: var(--kd-surface-2); }
.kd-segline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--kd-border); border-radius: 12px; background: var(--kd-surface-2); font-size: 13.5px; color: var(--kd-text); }
.kd-segline > .kd-ic { width: 18px; height: 18px; color: var(--kd-muted); flex: none; }
.kd-segline > span { flex: 1 1 200px; min-width: 0; }
.kd-segline.is-open { background: var(--kd-warn-soft); border-color: transparent; }
.kd-colview { max-height: 60vh; overflow: auto; border: 1px solid var(--kd-border); border-radius: 12px; }
.kd-colview td { white-space: normal; word-break: break-word; }
@media (max-width: 760px) {
  .kd__backbar { min-height: 52px; gap: 10px; }
  .kd__backbar-btn { height: 40px; padding: 0 12px 0 8px; }
  .kd-fulltable { max-height: 380px; }
}
.kd-smtpnote { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 16px; border-radius: 16px; background: var(--kd-warn-soft); border: 1px solid transparent; }
.kd-smtpnote[hidden] { display: none; }
.kd-smtpnote.is-soft { background: var(--kd-surface); border-color: var(--kd-border); }
.kd-smtpnote__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--kd-surface); color: var(--kd-warn-ink); flex: none; }
.kd-smtpnote.is-soft .kd-smtpnote__ic { background: var(--kd-surface-2); color: var(--kd-text-strong); }
.kd-smtpnote__ic .kd-ic { width: 22px; height: 22px; }
.kd-smtpnote__text { flex: 1 1 auto; min-width: 0; }
.kd-smtpnote__text b { display: block; font-size: 15px; color: var(--kd-text-strong); }
.kd-smtpnote__text p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--kd-text); }
.kd-smtpnote .k-btn { flex: none; }
@media (max-width: 760px) {
  .kd-smtpnote { flex-wrap: wrap; align-items: flex-start; }
  .kd-smtpnote__text { flex-basis: calc(100% - 56px); }
  .kd-smtpnote .k-btn { width: 100%; justify-content: center; }
}
.kd-empty__ic, .kd-kpi__ic, .kd-smtpnote__ic, .kd-srcpick__ic, .kd-notif__ic, .kd-tl__ic, .kd-cprow__ic, .kd-fcard__ic, .kd-tip__ic, .kd-initcard__ic, .kd-file__ic, .kd-done__ic, .kd-error__ic, .kd-drop__ic, .kd-av.kd-kpi__ic, .kd-av.kd-srcpick__ic, .kd-av.kd-tl__ic, .kd-av.kd-av--sq:has(> .kd-ic), .kd-smtpnote.is-soft .kd-smtpnote__ic { background: none; border: 0; box-shadow: none; color: var(--kd-text-strong); }
.kd-srcpick__ic, .kd-fcard__ic, .kd-initcard__ic { width: auto; height: auto; place-items: start; }
.kd-srcpick__ic .kd-ic, .kd-fcard__ic .kd-ic, .kd-initcard__ic .kd-ic, .kd-kpi__ic .kd-ic, .kd-file__ic .kd-ic, .kd-cprow__ic .kd-ic { width: 24px; height: 24px; }
.kd__sideusertext a { display: flex; min-width: 0; color: inherit; text-decoration: none; }
.kd__sideusertext a:hover b, .kd__sideusertext a:hover span, .kd__sideusertext a:focus-visible b, .kd__sideusertext a:focus-visible span { text-decoration: underline; text-underline-offset: 2px; }
.kd__sideusertext a:hover span { color: var(--kd-text-strong); }