:root{
  --kb-page:#efeff1;
  --kb-card:#ffffff;
  --kb-ink:#0b0b0d;
  --kb-ink-2:#45454c;
  --kb-ink-3:#66666e;
  --kb-line:#e8e8eb;
  --kb-line-2:#d6d6db;
  --kb-soft:#f2f2f4;
  --kb-soft-2:#e7e7ea;

  --kb-blue:#2450ff;
  --kb-blue-hover:#1b45f0;
  --kb-blue-press:#163bd6;
  --kb-on-blue:#ffffff;
  --kb-blue-text:#1f43e6;
  --kb-blue-soft:#e9eeff;
  --kb-blue-2:#9fb3ff;

  --kb-black:#0b0b0d;
  --kb-black-hover:#2a2a30;
  --kb-on-black:#ffffff;

  --kb-lime:var(--nw-lime, #b4e423);
  --kb-on-lime:var(--nw-on-lime, #0b0b0d);
  --kb-lime-text:var(--nw-lime-line, #446c00);
  --kb-lime-soft:var(--nw-lime-soft, #f0fad3);

  --kb-green:#137a3c;  --kb-green-bg:#e3f5e9;  --kb-green-dot:#22b358;
  --kb-red:#c62a2f;    --kb-red-bg:#fdeaea;    --kb-red-dot:#ef3b36;
  --kb-amber:#8f5600;  --kb-amber-bg:#fff0d4;  --kb-amber-dot:#f29d00;

  
  --kb-hero:#111114;
  --kb-hero-line:transparent;
  --kb-hero-ink:#ffffff;
  --kb-hero-ink-2:#a3a3ab;
  --kb-hero-track:#2b2b31;

  --kb-tip:#0b0b0d;
  --kb-tip-ink:#ffffff;
  --kb-tip-ink-2:#a3a3ab;
  --kb-hatch:rgba(11,11,13,.09);
  --kb-overlay:rgba(11,11,13,.38);
  --kb-lift:0 18px 40px -18px rgba(16,16,28,.22);
  --kb-pop:0 24px 64px -16px rgba(16,16,28,.28), 0 2px 8px rgba(16,16,28,.06);

  --kb-font:var(--font, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --kb-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --kb-r:24px; --kb-r-sm:16px; --kb-r-xs:12px;
  --kb-gap:16px;
  --kb-pad:24px;
  --kb-ease:cubic-bezier(.23,1,.32,1);
  --kb-ease-drawer:cubic-bezier(.32,.72,0,1);
}

:root[data-theme="dark"]{
  --kb-page:#09090b;
  --kb-card:#141416;
  --kb-ink:#f4f4f5;
  --kb-ink-2:#c9c9cf;
  --kb-ink-3:#9d9da6;
  --kb-line:#232327;
  --kb-line-2:#34343b;
  --kb-soft:#1e1e22;
  --kb-soft-2:#28282e;

  --kb-blue:#3a5bff;
  --kb-blue-hover:#4d6bff;
  --kb-blue-press:#2f4fef;
  --kb-blue-text:#9db1ff;
  --kb-blue-soft:#18204a;
  --kb-blue-2:#3c4d96;

  --kb-black:#f4f4f5;
  --kb-black-hover:#ffffff;
  --kb-on-black:#0b0b0d;

  --kb-green:#5ee08f;  --kb-green-bg:#11291b;  --kb-green-dot:#34c56a;
  --kb-red:#ff8a85;    --kb-red-bg:#3a1517;    --kb-red-dot:#ff5c57;
  --kb-amber:#ffc266;  --kb-amber-bg:#33240b;  --kb-amber-dot:#f5a524;

  --kb-hero:#1b1b20;
  --kb-hero-line:#2c2c33;
  --kb-hero-track:#2e2e36;

  --kb-tip:#f4f4f5;
  --kb-tip-ink:#0b0b0d;
  --kb-tip-ink-2:#55555c;
  --kb-hatch:rgba(255,255,255,.08);
  --kb-overlay:rgba(0,0,0,.6);
  --kb-lift:0 18px 40px -18px rgba(0,0,0,.7);
  --kb-pop:0 24px 64px -16px rgba(0,0,0,.75), 0 0 0 1px #26262b;
}


html:has(.kb-app), html:has(.kb-app) body{margin:0; background:var(--kb-page)}
html:has(.kb-app) body::before, html:has(.kb-app) body::after{display:none !important}
html:has(dialog.kb-drawer[open]), html:has(dialog.kb-modal[open]){overflow:hidden}
.kb-app, .kb-drawer, .kb-modal, .kb-tip, .kb-toast{font-family:var(--kb-font); font-size:15px; font-weight:400;
  line-height:1.45; color:var(--kb-ink); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
  -webkit-text-size-adjust:100%; text-size-adjust:100%}

:where(.kb-app, .kb-drawer, .kb-modal) *{box-sizing:border-box}
:where(.kb-app, .kb-drawer, .kb-modal) :where(button, input, select, textarea){font:inherit; color:inherit; margin:0}
:where(.kb-app, .kb-drawer, .kb-modal) :where(button){cursor:pointer; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
.kb-app [hidden], .kb-drawer [hidden], .kb-modal [hidden], .kb-toast[hidden], .kb-tip[hidden]{display:none !important}
.kb-app :focus-visible, .kb-drawer :focus-visible, .kb-modal :focus-visible{outline:2px solid var(--kb-blue); outline-offset:2px}
:where(.kb-app, .kb-drawer, .kb-modal) :where(h1, h2, h3, p){margin:0}
:where(.kb-app, .kb-drawer, .kb-modal) :where(h1, h2, h3){font-weight:600}
:where(.kb-app, .kb-drawer, .kb-modal) :where(a){color:inherit}

.kb-ico{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:middle}
.kb-ico-sm{width:16px; height:16px}
.kb-ico-lg{width:22px; height:22px}
.kb-mono{font-family:var(--kb-mono); font-variant-numeric:normal}
.kb-dim{color:var(--kb-ink-3)}
.kb-strong{font-weight:600}


.kb-app{min-height:100dvh; max-width:1520px; margin:0 auto;
  padding:0 24px calc(32px + env(safe-area-inset-bottom, 0px))}


.kb-top{position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:16px; padding:max(16px, env(safe-area-inset-top, 0px)) 0 16px;
  background:color-mix(in oklab, var(--kb-page) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px)}
.kb-brand{display:flex; align-items:center; gap:12px; min-width:0; color:var(--kb-ink); text-decoration:none}
.kb-brand-word{display:block; width:86px; height:20px; flex:none}
.kb-brand-name{padding-left:12px; border-left:1.5px solid var(--kb-line-2); font-size:17px; font-weight:600;
  line-height:20px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.kb-nav{display:flex; align-items:center; gap:2px; padding:5px; border-radius:999px; background:var(--kb-card);
  max-width:100%; overflow-x:auto; scrollbar-width:none}
.kb-nav::-webkit-scrollbar{display:none}
.kb-nav-item{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border:0; border-radius:999px;
  background:none; color:var(--kb-ink-2); font-size:15px; font-weight:500; white-space:nowrap; flex:none;
  transition:background-color .18s var(--kb-ease), color .18s var(--kb-ease)}
.kb-nav-item .kb-ico{display:none}
.kb-nav-item:hover{color:var(--kb-ink); background:var(--kb-soft)}
.kb-nav-item.on{background:var(--kb-black); color:var(--kb-on-black)}
.kb-nav-item.on .kb-ico{display:block}
.kb-nav-count{font-style:normal; font-size:13px; font-weight:600; min-width:22px; height:22px; padding:0 6px;
  display:inline-grid; place-items:center; border-radius:999px; background:var(--kb-soft); color:var(--kb-ink-2)}
.kb-nav-item.on .kb-nav-count{background:color-mix(in oklab, var(--kb-on-black) 18%, transparent); color:var(--kb-on-black)}
.kb-nav-count:empty{display:none}

.kb-top-right{display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0}


.kb-theme{display:inline-flex; align-items:center; gap:2px; height:48px; padding:4px; border:0; border-radius:999px;
  background:var(--kb-card); flex:none}
.kb-theme span{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--kb-ink-3);
  transition:background-color .25s var(--kb-ease), color .25s var(--kb-ease)}
:root:not([data-theme="dark"]) .kb-theme-sun, :root[data-theme="dark"] .kb-theme-moon{background:var(--kb-black); color:var(--kb-on-black)}

.kb-iconbtn{display:inline-grid; place-items:center; width:48px; height:48px; flex:none; border:0; border-radius:50%;
  background:var(--kb-card); color:var(--kb-ink); text-decoration:none;
  transition:background-color .18s var(--kb-ease), transform .13s var(--kb-ease)}
.kb-iconbtn:hover{background:var(--kb-soft-2)}
.kb-iconbtn:active{transform:scale(.95)}

.kb-me{display:flex; align-items:center; gap:10px; min-width:0}
.kb-me-text{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.kb-me-name{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kb-me-sub{font-size:13px; color:var(--kb-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kb-me-sub:empty{display:none}


.kb-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:4px 0 16px}
.kb-head-title{font-size:30px; font-weight:700; letter-spacing:-.025em; line-height:1.15}
.kb-head-sub{margin-top:4px; color:var(--kb-ink-3)}
.kb-head-acts{display:flex; align-items:center; gap:10px; flex-wrap:wrap}


.kb-grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--kb-gap); grid-auto-flow:row dense}
.kb-grid + .kb-grid, .kb-grid + .kb-card, .kb-card + .kb-grid, .kb-kpis + .kb-card, .kb-kpis + .kb-grid{margin-top:var(--kb-gap)}
.kb-w2{grid-column:span 2} .kb-w3{grid-column:span 3} .kb-w4{grid-column:span 4} .kb-w5{grid-column:span 5}
.kb-w6{grid-column:span 6} .kb-w7{grid-column:span 7} .kb-w8{grid-column:span 8} .kb-w12{grid-column:1 / -1}
.kb-stack{display:flex; flex-direction:column; gap:var(--kb-gap); min-width:0}
.kb-stack > .kb-grow{flex:1}

.kb-card{position:relative; min-width:0; padding:var(--kb-pad); border-radius:var(--kb-r); background:var(--kb-card);
  transition:transform .32s var(--kb-ease), box-shadow .32s var(--kb-ease)}
@media (hover:hover){
  .kb-card.kb-lift:hover{transform:translateY(-4px); box-shadow:var(--kb-lift)}
}
.kb-card-flush{padding:0; overflow:hidden}
.kb-card-head{display:flex; align-items:center; gap:14px; min-height:40px; margin-bottom:20px}
.kb-card-flush > .kb-card-head{margin:0; padding:var(--kb-pad) var(--kb-pad) 16px}
.kb-card-title{display:flex; flex-direction:column; min-width:0; flex:1}
.kb-card-title b{font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.25}
.kb-card-title small{font-size:14px; color:var(--kb-ink-3); line-height:1.35}
.kb-card-acts{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto;
  min-width:0; max-width:100%}


.kb-medal{display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%;
  background:var(--kb-soft); color:var(--kb-blue-text)}
.kb-medal.green{background:var(--kb-green-dot); color:#fff}
.kb-medal.red{background:var(--kb-red-dot); color:#fff}
.kb-medal.blue{background:var(--kb-blue); color:var(--kb-on-blue)}
.kb-medal.lime{background:var(--kb-lime); color:var(--kb-on-lime)}
.kb-medal.ink{background:var(--kb-black); color:var(--kb-on-black)}
.kb-medal-sm{width:36px; height:36px}
.kb-medal-sm .kb-ico{width:18px; height:18px}



.kb-big{display:block; font-size:56px; font-weight:700; line-height:1.02; letter-spacing:-.035em; white-space:nowrap}
.kb-big small, .kb-num small, .kb-mid small{font-size:.56em; font-weight:600; letter-spacing:-.01em; color:var(--kb-ink-3)}
.kb-mid{display:block; font-size:40px; font-weight:700; line-height:1.05; letter-spacing:-.03em; white-space:nowrap}
.kb-num{display:block; font-size:32px; font-weight:700; line-height:1.1; letter-spacing:-.025em; white-space:nowrap}
.kb-line-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; color:var(--kb-ink-2)}
.kb-note{font-size:14px; color:var(--kb-ink-3)}
.kb-pillnote{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 16px; border:1px solid var(--kb-line);
  border-radius:999px; font-size:14px; color:var(--kb-ink-2)}
.kb-pillnote b{font-weight:600; color:var(--kb-ink)}


.kb-delta{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px 0 4px; border-radius:999px;
  font-size:14px; font-weight:600; white-space:nowrap; background:var(--kb-soft); color:var(--kb-ink-2)}
.kb-delta i{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--kb-ink-3); color:#fff}
.kb-delta i .kb-ico{width:14px; height:14px; stroke-width:2.4}
.kb-delta.up{background:var(--kb-green-bg); color:var(--kb-green)}
.kb-delta.up i{background:var(--kb-green-dot)}
.kb-delta.down{background:var(--kb-red-bg); color:var(--kb-red)}
.kb-delta.down i{background:var(--kb-red-dot)}
.kb-delta.plain{padding-left:12px}


.kb-pair{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:auto; padding-top:20px}
.kb-pair > div{display:flex; flex-direction:column; gap:2px; padding-left:14px; border-left:3px solid var(--kb-blue); min-width:0}
.kb-pair > div + div{border-left-color:var(--kb-lime)}
.kb-pair span{font-size:14px; color:var(--kb-ink-3)}
.kb-pair b{font-size:22px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}


.kb-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 24px;
  border:1px solid transparent; border-radius:999px; font-size:15px; font-weight:600; white-space:nowrap;
  text-decoration:none; background:var(--kb-soft); color:var(--kb-ink); flex:none;
  transition:background-color .18s var(--kb-ease), color .18s var(--kb-ease), transform .13s var(--kb-ease), border-color .18s var(--kb-ease)}
.kb-btn:hover{background:var(--kb-soft-2)}
.kb-btn:active{transform:scale(.97)}
.kb-btn:disabled{opacity:.5; cursor:default; transform:none}
.kb-btn-blue{background:var(--kb-blue); color:var(--kb-on-blue)}
.kb-btn-blue:hover{background:var(--kb-blue-hover)}
.kb-btn-blue:active{background:var(--kb-blue-press)}
.kb-btn-black{background:var(--kb-black); color:var(--kb-on-black)}
.kb-btn-black:hover{background:var(--kb-black-hover)}
.kb-btn-lime{background:var(--kb-lime); color:var(--kb-on-lime)}
.kb-btn-lime:hover{background:color-mix(in oklab, var(--kb-lime) 90%, var(--kb-on-lime))}
.kb-btn-line{background:transparent; border-color:var(--kb-line-2)}
.kb-btn-line:hover{background:var(--kb-soft)}
.kb-btn-danger{color:var(--kb-red)}
.kb-btn-danger.kb-btn-solid, .kb-btn.kb-sure{background:var(--kb-red-dot); color:#fff; border-color:transparent}
.kb-btn-sm{height:40px; padding:0 18px; font-size:14px}
.kb-btn-xs{height:34px; padding:0 14px; font-size:14px}
.kb-btn-wide{flex:1; min-width:0}
.kb-btn.ok{background:var(--kb-green-bg); color:var(--kb-green)}


.kb-round{display:inline-grid; place-items:center; width:38px; height:38px; flex:none; padding:0; border:1px solid var(--kb-line-2);
  border-radius:50%; background:transparent; color:var(--kb-ink-2); text-decoration:none;
  transition:background-color .18s var(--kb-ease), color .18s var(--kb-ease), border-color .18s var(--kb-ease)}
.kb-round .kb-ico{width:17px; height:17px}
.kb-round:hover{background:var(--kb-soft); color:var(--kb-ink)}
.kb-round.ok{border-color:transparent; background:var(--kb-green-bg); color:var(--kb-green)}
.kb-round-plus{width:44px; height:44px; border:0; background:var(--kb-lime); color:var(--kb-on-lime)}
.kb-round-plus:hover{background:color-mix(in oklab, var(--kb-lime) 88%, var(--kb-on-lime)); color:var(--kb-on-lime)}


.kb-select{appearance:none; -webkit-appearance:none; height:40px; padding:0 38px 0 16px; border:1px solid var(--kb-line-2);
  border-radius:999px; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366666e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size:13px !important; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--kb-ink); cursor:pointer}
.kb-select:hover{border-color:var(--kb-ink-3)}
.kb-select option{text-transform:none; background:var(--kb-card); color:var(--kb-ink)}


.kb-chips{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.kb-chip{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 8px 0 16px; border:0; border-radius:999px;
  background:var(--kb-soft); color:var(--kb-ink-2); font-size:14px; font-weight:500; white-space:nowrap;
  transition:background-color .18s var(--kb-ease), color .18s var(--kb-ease)}
.kb-chip:hover{background:var(--kb-soft-2); color:var(--kb-ink)}
.kb-chip i{font-style:normal; min-width:26px; height:26px; padding:0 7px; display:inline-grid; place-items:center;
  border-radius:999px; background:var(--kb-card); color:var(--kb-ink-2); font-size:13px; font-weight:600}
.kb-chip.on{background:var(--kb-black); color:var(--kb-on-black)}
.kb-chip.on i{background:color-mix(in oklab, var(--kb-on-black) 20%, transparent); color:var(--kb-on-black)}
.kb-chip.plain{padding:0 16px}


.kb-seg{display:inline-flex; gap:2px; padding:4px; border-radius:999px; background:var(--kb-soft); flex:none; max-width:100%; overflow-x:auto; scrollbar-width:none}
.kb-seg::-webkit-scrollbar{display:none}
.kb-seg button, .kb-seg label > span{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border:0; border-radius:999px;
  background:none; color:var(--kb-ink-2); font-size:14px; font-weight:500; white-space:nowrap; cursor:pointer;
  transition:background-color .18s var(--kb-ease), color .18s var(--kb-ease)}
.kb-seg button:hover, .kb-seg label > span:hover{color:var(--kb-ink)}
.kb-seg button.on, .kb-seg button[aria-selected="true"], .kb-seg label > input:checked + span{background:var(--kb-black); color:var(--kb-on-black)}
.kb-seg button i{font-style:normal; font-size:12px; font-weight:600; opacity:.7}
.kb-seg label{display:inline-flex}
.kb-seg label > input{position:absolute; opacity:0; pointer-events:none}
.kb-seg label > input:focus-visible + span{outline:2px solid var(--kb-blue); outline-offset:2px}
.kb-seg-card{background:var(--kb-card)}


.kb-search{position:relative; display:flex; align-items:center; min-width:0}
.kb-search .kb-ico{position:absolute; left:16px; color:var(--kb-ink-3); pointer-events:none}
.kb-search input{width:280px; max-width:100%; height:48px; padding:0 18px 0 46px; border:1px solid var(--kb-line);
  border-radius:999px; background:var(--kb-card); outline:0; font-size:15px}
.kb-search input:focus{border-color:var(--kb-blue)}
.kb-search input::placeholder{color:var(--kb-ink-3)}
.kb-search input::-webkit-search-cancel-button{-webkit-appearance:none}


.kb-tag{display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; border:0; border-radius:999px;
  font-size:14px; font-weight:500; white-space:nowrap; background:var(--kb-soft); color:var(--kb-ink-2); flex:none}
.kb-tag::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.kb-tag.nodot::before{display:none}
.kb-tag-sm{height:24px; padding:0 9px; font-size:12px; gap:5px}
.kb-tag-sm::before{width:6px; height:6px}
.kb-tag.green{background:var(--kb-green-bg); color:var(--kb-green)}
.kb-tag.red{background:var(--kb-red-bg); color:var(--kb-red)}
.kb-tag.amber{background:var(--kb-amber-bg); color:var(--kb-amber)}
.kb-tag.blue{background:var(--kb-blue-soft); color:var(--kb-blue-text)}
.kb-tag.lime{background:var(--kb-lime-soft); color:var(--kb-lime-text)}
button.kb-tag{cursor:pointer; transition:filter .18s var(--kb-ease)}
button.kb-tag:hover{filter:brightness(.96)}
:root[data-theme="dark"] button.kb-tag:hover{filter:brightness(1.2)}


.kb-ava{display:inline-grid; place-items:center; width:42px; height:42px; flex:none; border-radius:50%;
  background:var(--kb-black); color:var(--kb-on-black); font-size:14px; font-weight:600; letter-spacing:.01em; text-transform:uppercase;
  -webkit-user-select:none; user-select:none}
.kb-ava[data-tone="blue"]{background:#2450ff; color:#fff}
.kb-ava[data-tone="green"]{background:#1d9a50; color:#fff}
.kb-ava[data-tone="red"]{background:#e0453f; color:#fff}
.kb-ava[data-tone="amber"]{background:#c76a00; color:#fff}
.kb-ava[data-tone="violet"]{background:#6b4fd8; color:#fff}
.kb-ava[data-tone="sky"]{background:#2f86d9; color:#fff}
.kb-ava[data-tone="lime"]{background:var(--kb-lime); color:var(--kb-on-lime)}
.kb-ava-sm{width:32px; height:32px; font-size:12px}
.kb-ava-lg{width:48px; height:48px; font-size:16px}
.kb-ava-xl{width:72px; height:72px; font-size:24px}


.kb-who{display:flex; align-items:center; gap:12px; min-width:0; border:0; background:none; padding:0; text-align:left; color:inherit}
.kb-who-text{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.kb-who-text b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kb-who-text small{font-size:13px; color:var(--kb-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}


.kb-table-wrap{overflow-x:auto; margin:0 calc(-1 * var(--kb-pad)); padding:0 var(--kb-pad); scrollbar-width:thin}
.kb-card-flush .kb-table-wrap{margin:0}
.kb-table{width:100%; border-collapse:collapse; border-spacing:0}
.kb-table th{height:44px; padding:0 14px; text-align:left; font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--kb-ink-3); white-space:nowrap; border-bottom:1px solid var(--kb-line)}
.kb-table td{height:64px; padding:8px 14px; border-bottom:1px solid var(--kb-line); white-space:nowrap; vertical-align:middle}
.kb-table th:first-child, .kb-table td:first-child{padding-left:4px}
.kb-table th:last-child, .kb-table td:last-child{padding-right:4px}
.kb-table tbody tr:last-child td{border-bottom:0}
.kb-table tfoot td{height:56px; border-top:1px solid var(--kb-line); border-bottom:0; font-weight:600}
.kb-table .kb-n{text-align:right}
.kb-table td.kb-n{font-weight:500}
.kb-table tbody tr[data-row]{cursor:pointer}
.kb-table tbody tr[data-row] td{transition:background-color .15s var(--kb-ease)}
@media (hover:hover){
  .kb-table tbody tr[data-row]:hover td{background:var(--kb-soft)}
  .kb-table tbody tr[data-row]:hover td:first-child{border-radius:16px 0 0 16px}
  .kb-table tbody tr[data-row]:hover td:last-child{border-radius:0 16px 16px 0}
}
.kb-th{display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:none; font:inherit;
  letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer}
.kb-th:hover{color:var(--kb-ink)}
th[aria-sort] .kb-th{color:var(--kb-ink)}
.kb-th .kb-ico{width:14px; height:14px; stroke-width:2.4}
.kb-n .kb-th{flex-direction:row-reverse}
.kb-acts{display:flex; align-items:center; justify-content:flex-end; gap:8px}
.kb-zero{color:var(--kb-ink-3); font-weight:400}


.kb-list{display:flex; flex-direction:column}
.kb-li{display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 0; border-bottom:1px solid var(--kb-line)}
.kb-li:last-child{border-bottom:0}
.kb-li-main{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.kb-li-main b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kb-li-main small{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--kb-ink-3)}
.kb-li-end{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:none; text-align:right}
.kb-li-end b{font-weight:600; white-space:nowrap}
.kb-li-end small{font-size:13px; color:var(--kb-ink-3); white-space:nowrap}
.kb-more{display:flex; align-items:center; justify-content:center; width:100%; height:48px; margin-top:12px; border:0; border-radius:999px;
  background:var(--kb-soft); color:var(--kb-ink); font-size:15px; font-weight:600}
.kb-more:hover{background:var(--kb-soft-2)}
.kb-plus{color:var(--kb-green)}
.kb-minus{color:var(--kb-red)}
.kb-struck{text-decoration:line-through; color:var(--kb-ink-3)}


.kb-kpis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--kb-gap)}
.kb-kpi{display:flex; flex-direction:column; gap:12px; min-width:0}
.kb-kpi-head{display:flex; align-items:center; gap:12px; min-width:0; font-weight:600; font-size:15px}
.kb-kpi-head > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kb-kpi-head .kb-delta{margin-left:auto}
.kb-kpi .kb-num{overflow:hidden; text-overflow:ellipsis}
.kb-kpi-sub{font-size:14px; color:var(--kb-ink-3); margin-top:-6px; min-height:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kb-kpi.accent{background:var(--kb-blue); color:var(--kb-on-blue)}
.kb-kpi.accent .kb-medal{background:color-mix(in oklab, #fff 18%, transparent); color:#fff}
.kb-kpi.accent .kb-kpi-sub, .kb-kpi.accent .kb-num small{color:color-mix(in oklab, #fff 72%, transparent)}


.kb-hero{background:var(--kb-hero); color:var(--kb-hero-ink); box-shadow:inset 0 0 0 1px var(--kb-hero-line)}
.kb-hero .kb-card-title small, .kb-hero .kb-note{color:var(--kb-hero-ink-2)}
.kb-hero .kb-big small, .kb-hero .kb-mid small{color:var(--kb-hero-ink-2)}
.kb-hero .kb-medal{background:color-mix(in oklab, #fff 10%, transparent); color:#fff}
.kb-hero .kb-medal.lime{background:var(--kb-lime); color:var(--kb-on-lime)}
.kb-ring{position:relative; display:grid; place-items:center; width:100%; max-width:236px; margin:4px auto 0; aspect-ratio:1}
.kb-ring svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.kb-ring .track{fill:none; stroke:var(--kb-hero-track); stroke-linecap:round}
.kb-ring .arc{fill:none; stroke:var(--kb-blue); stroke-linecap:round; transition:stroke-dashoffset .9s var(--kb-ease)}
.kb-ring .knob{fill:var(--kb-hero); stroke:#fff; stroke-width:4}
.kb-ring-mid{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:0 14%}
.kb-ring-mid span{font-size:14px; color:var(--kb-hero-ink-2)}
.kb-ring-mid b{font-size:clamp(24px, 3.2vw, 34px); font-weight:700; letter-spacing:-.03em; line-height:1.1; white-space:nowrap}
.kb-ring-mid b small{font-size:.6em; color:var(--kb-hero-ink-2)}
.kb-ring-mid em{display:inline-flex; align-items:center; gap:6px; font-style:normal; font-size:14px; color:var(--kb-hero-ink-2); white-space:nowrap}
.kb-ring-mid em .ok{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--kb-green-dot); color:#fff}
.kb-ring-mid em .ok .kb-ico{width:12px; height:12px; stroke-width:3}
.kb-hero-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px}


.kb-chart{position:relative; width:100%; height:260px; touch-action:pan-y; -webkit-user-select:none; user-select:none; outline-offset:6px}
.kb-chart svg{display:block; width:100%; height:100%; overflow:visible}
.kb-chart .grid{stroke:var(--kb-line); stroke-width:1; stroke-dasharray:3 5}
.kb-chart .vgrid{stroke:var(--kb-line); stroke-width:1}
.kb-chart .ax{fill:var(--kb-ink-3); font-size:12px; font-family:var(--kb-font)}
.kb-chart .line{fill:none; stroke:var(--kb-blue); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.kb-chart .area{fill:url(#kb-fill)}
.kb-chart .cursor{stroke:var(--kb-blue); stroke-width:2}
.kb-chart .dot{fill:var(--kb-card); stroke:var(--kb-blue); stroke-width:3}
.kb-chart-empty{position:absolute; inset:0; display:grid; place-content:center; gap:4px; text-align:center; padding:0 24px; color:var(--kb-ink-3)}
.kb-chart-empty b{color:var(--kb-ink-2); font-weight:600}
@media (hover:hover){ .kb-chart{cursor:crosshair} }
.kb-legend{display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--kb-ink-2)}
.kb-legend span{display:inline-flex; align-items:center; gap:7px}
.kb-legend span::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--c, var(--kb-blue))}


.kb-bars{position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:14px; align-items:end;
  height:230px; padding-top:44px}
.kb-bar{position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; height:100%;
  border:0; padding:0; background:none; min-width:0}
.kb-bar-col{position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:calc(100% - 30px)}
.kb-bar-fill{position:relative; min-height:34px; border-radius:20px; background:var(--kb-soft-2);
  transition:background-color .25s var(--kb-ease), height .6s var(--kb-ease)}
.kb-bar-lime{position:absolute; left:0; right:0; bottom:0; display:grid; place-items:center; height:min(46px, 100%); border-radius:20px;
  background:var(--kb-lime); color:var(--kb-on-lime); font-size:13px; font-weight:700; opacity:0; transition:opacity .2s var(--kb-ease)}
.kb-bar-lbl{height:30px; display:flex; align-items:flex-end; justify-content:center; font-size:13px; font-weight:500; color:var(--kb-ink-3); white-space:nowrap}
.kb-bar.on .kb-bar-fill{background:var(--kb-blue)}
.kb-bar.on .kb-bar-lime{opacity:1}
.kb-bar.on .kb-bar-lbl{color:var(--kb-ink); font-weight:700}
.kb-bar.future .kb-bar-fill{background:repeating-linear-gradient(135deg, var(--kb-hatch) 0 2px, transparent 2px 9px), var(--kb-soft);
  height:100% !important}
.kb-bar.future{cursor:default}
.kb-bar:not(.future):hover .kb-bar-fill{background:var(--kb-blue-2)}
.kb-bar.on:hover .kb-bar-fill{background:var(--kb-blue)}
.kb-bar-knob{position:absolute; left:50%; top:0; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  background:var(--kb-card); border:4px solid var(--kb-blue); opacity:0}
.kb-bar.on .kb-bar-knob{opacity:1}
.kb-bars-guide{position:absolute; left:0; right:0; z-index:2; height:0; border-top:1.5px dashed var(--kb-line-2); pointer-events:none}
.kb-bars-guide span{position:absolute; left:0; bottom:6px; padding:2px 8px; border-radius:999px; background:var(--kb-card);
  font-size:12px; font-weight:600; color:var(--kb-ink-2); white-space:nowrap; box-shadow:0 0 0 1px var(--kb-line)}


.kb-donut-wrap{display:grid; grid-template-columns:minmax(150px, 190px) minmax(0,1fr); gap:20px; align-items:center}
.kb-donut{position:relative; display:grid; place-items:center; aspect-ratio:1}
.kb-donut svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.kb-donut circle{fill:none; stroke-width:18; transition:stroke-width .2s var(--kb-ease), opacity .2s var(--kb-ease)}
.kb-donut circle.bg{stroke:var(--kb-soft)}
.kb-donut circle.on{stroke-width:22}
.kb-donut-mid{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; max-width:70%}
.kb-donut-mid b{font-size:32px; font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--kb-blue-text)}
.kb-donut-mid small{margin-top:4px; font-size:13px; color:var(--kb-ink-3); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kb-shares{display:flex; flex-direction:column; gap:2px; min-width:0}
.kb-share{display:flex; align-items:center; gap:10px; min-height:40px; padding:0 12px; border:0; border-radius:12px; background:none;
  text-align:left; min-width:0; transition:background-color .15s var(--kb-ease)}
.kb-share::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--c); flex:none}
.kb-share span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kb-share b{font-weight:600}
.kb-share:hover, .kb-share.on{background:var(--kb-soft)}
.kb-share.on span{font-weight:600}


.kb-funnel{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px 16px; align-items:center}
.kb-funnel > span{font-size:15px; color:var(--kb-ink-2); white-space:nowrap}
.kb-funnel-track{height:38px; border-radius:12px; background:var(--kb-soft); overflow:hidden}
.kb-funnel-bar{display:flex; align-items:center; height:100%; min-width:46px; padding:0 14px; border-radius:12px;
  background:var(--kb-blue); color:var(--kb-on-blue); font-size:14px; font-weight:600; white-space:nowrap;
  transition:width .7s var(--kb-ease)}
.kb-funnel-bar.b2{background:color-mix(in oklab, var(--kb-blue) 82%, var(--kb-card))}
.kb-funnel-bar.b3{background:color-mix(in oklab, var(--kb-blue) 64%, var(--kb-card))}
.kb-funnel > em{font-style:normal; font-size:14px; font-weight:500; color:var(--kb-ink-3); text-align:right; min-width:52px}
.kb-conv{display:flex; flex-direction:column; align-items:flex-end; line-height:1.2}
.kb-conv small{font-size:13px; color:var(--kb-ink-3)}
.kb-conv b{font-size:22px; font-weight:700; letter-spacing:-.02em}


.kb-top-list{display:flex; flex-direction:column; gap:6px}
.kb-top-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto; gap:8px 12px; align-items:center;
  padding:10px 12px; margin:0 -12px; border:0; border-radius:16px; background:none; text-align:left; color:inherit;
  transition:background-color .15s var(--kb-ease)}
.kb-top-row:hover{background:var(--kb-soft)}
.kb-top-row > b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kb-top-row > strong{font-weight:700; white-space:nowrap}
.kb-progress{grid-column:1 / -1; height:8px; border-radius:999px; background:var(--kb-soft); overflow:hidden}
.kb-top-row:hover .kb-progress{background:var(--kb-card)}
.kb-progress i{display:block; height:100%; border-radius:999px; background:var(--kb-blue); transition:width .7s var(--kb-ease)}
.kb-progress.lime i{background:var(--kb-lime)}


.kb-split{position:relative; margin-top:auto; padding-top:52px}
.kb-split-track{display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--kb-soft)}
.kb-split-track i{display:block; height:100%}
.kb-split-track i.a{background:var(--kb-black)}
.kb-split-track i.b{background:var(--kb-blue)}
.kb-split-mark{position:absolute; top:4px; transform:translateX(-50%); padding:6px 12px; border-radius:999px; background:var(--kb-blue);
  color:var(--kb-on-blue); font-size:13px; font-weight:700; white-space:nowrap}
.kb-split-mark::after{content:""; position:absolute; left:50%; bottom:-14px; height:12px; border-left:2px dashed var(--kb-blue)}
.kb-split .kb-legend{margin-top:14px}


.kb-cubes{display:grid; grid-auto-flow:column; grid-auto-columns:18px; gap:4px; align-items:end; height:112px}
.kb-cubes > div{display:flex; flex-direction:column-reverse; gap:4px}
.kb-cubes i{display:block; width:18px; height:15px; border-radius:4px; background:var(--kb-blue)}
.kb-cubes i.l{background:var(--kb-lime)}
.kb-cubes i.s{background:var(--kb-blue-2)}
.kb-cubes i.e{background:var(--kb-soft)}


.kb-field{display:flex; flex-direction:column; gap:8px; min-width:0}
.kb-label{font-size:14px; font-weight:500; color:var(--kb-ink-2)}
.kb-input{width:100%; height:52px; padding:0 18px; border:1px solid var(--kb-line-2); border-radius:16px; background:var(--kb-card);
  color:var(--kb-ink); font-size:16px; outline:0; transition:border-color .15s var(--kb-ease), box-shadow .15s var(--kb-ease)}
.kb-input:hover{border-color:var(--kb-ink-3)}
.kb-input:focus{border-color:var(--kb-blue); box-shadow:0 0 0 4px color-mix(in oklab, var(--kb-blue) 16%, transparent)}
.kb-input::placeholder{color:var(--kb-ink-3)}
.kb-input-big{height:64px; font-size:28px; font-weight:700; letter-spacing:-.02em}
select.kb-input{appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background:var(--kb-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2366666e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 16px center}
.kb-hint{font-size:14px; color:var(--kb-ink-3); line-height:1.45}
.kb-hint b{color:var(--kb-ink); font-weight:600}
.kb-error{font-size:14px; color:var(--kb-red); font-weight:500}
.kb-check{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:16px; background:var(--kb-soft); cursor:pointer}
.kb-check input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--kb-blue); flex:none}
.kb-switch{position:relative; display:inline-block; width:56px; height:32px; flex:none; cursor:pointer}
.kb-switch input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.kb-switch span{position:absolute; inset:0; border-radius:999px; background:var(--kb-soft-2); transition:background-color .2s var(--kb-ease)}
.kb-switch span::after{content:""; position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .25s var(--kb-ease)}
.kb-switch input:checked + span{background:var(--kb-blue)}
.kb-switch input:checked + span::after{transform:translateX(24px)}
.kb-switch input:focus-visible + span{outline:2px solid var(--kb-blue); outline-offset:2px}
.kb-switch input:disabled + span{opacity:.5}


.kb-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:40px 16px; text-align:center}
.kb-empty-sm{padding:24px 8px; color:var(--kb-ink-3)}
.kb-empty-title{font-size:18px; font-weight:600}
.kb-empty-text{max-width:420px; color:var(--kb-ink-3)}
.kb-empty .kb-medal{width:56px; height:56px}
.kb-state{max-width:480px; margin:8vh auto 0}
.kb-state-mark{width:56px; height:56px; color:var(--kb-ink)}


dialog.kb-drawer, dialog.kb-modal{padding:0; border:0; background:var(--kb-card); color:var(--kb-ink); box-shadow:var(--kb-pop); overflow:hidden}
dialog.kb-drawer::backdrop, dialog.kb-modal::backdrop{background:var(--kb-overlay); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
dialog.kb-drawer{position:fixed; inset:12px 12px 12px auto; width:min(640px, calc(100vw - 24px)); height:auto; max-width:none; max-height:none;
  margin:0; border-radius:28px; display:flex; flex-direction:column}
dialog.kb-drawer:not([open]){display:none}
dialog.kb-drawer[open]{animation:kb-in-right .42s var(--kb-ease-drawer)}
@keyframes kb-in-right{from{transform:translateX(calc(100% + 24px))}}
.kb-drawer-top{display:flex; align-items:center; gap:10px; padding:20px 20px 0 24px; flex:none}
.kb-drawer-top .kb-iconbtn{margin-left:auto; background:var(--kb-soft); width:44px; height:44px}
.kb-drawer-body{flex:1; min-height:0; overflow-y:auto; padding:16px 24px 24px; overscroll-behavior:contain}
.kb-drawer-head{display:flex; align-items:center; gap:16px; min-width:0}
.kb-drawer-name{display:block; font-size:28px; font-weight:700; letter-spacing:-.025em; line-height:1.15; outline:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kb-drawer-sub{display:block; margin-top:2px; color:var(--kb-ink-3)}
.kb-drawer-acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.kb-tabs{display:flex; margin:22px 0 16px}
.kb-tabs.kb-seg{display:flex; width:100%}
.kb-tabs.kb-seg button{flex:1; justify-content:center}
.kb-sec{padding:20px; border-radius:20px; background:var(--kb-soft)}
.kb-sec + .kb-sec, .kb-sec + .kb-block, .kb-block + .kb-block, .kb-block + .kb-sec{margin-top:16px}
.kb-sec-title{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:17px; font-weight:600}
.kb-sec-title small{font-size:14px; font-weight:400; color:var(--kb-ink-3)}
.kb-sec-title .kb-seg, .kb-sec-title .kb-btn{margin-left:auto}
.kb-sec .kb-input{background:var(--kb-card)}
.kb-mini{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.kb-mini > div{display:flex; flex-direction:column; gap:2px; padding:16px; border-radius:18px; background:var(--kb-soft); min-width:0}
.kb-mini > div.accent{background:var(--kb-blue); color:var(--kb-on-blue)}
.kb-mini > div.accent small{color:color-mix(in oklab, #fff 75%, transparent)}
.kb-mini small{font-size:13px; color:var(--kb-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kb-mini b{font-size:24px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kb-mini b small{font-size:.6em; color:inherit; opacity:.65}

dialog.kb-modal{position:fixed; inset:0; margin:auto; width:min(520px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); border-radius:28px}
dialog.kb-modal[open]{display:flex; flex-direction:column; animation:kb-pop .32s var(--kb-ease)}
@keyframes kb-pop{from{opacity:0; transform:translateY(12px) scale(.98)}}
dialog.kb-modal-wide{width:min(680px, calc(100vw - 24px))}
.kb-modal form{display:flex; flex-direction:column; min-height:0; flex:1}
.kb-modal-head{padding:26px 28px 6px; font-size:24px; font-weight:700; letter-spacing:-.02em}
.kb-modal-body{display:flex; flex-direction:column; gap:16px; padding:16px 28px; overflow-y:auto}
.kb-modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:12px 28px 26px}


.kb-toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:60; transform:translateX(-50%);
  max-width:calc(100vw - 32px); padding:14px 22px; border-radius:999px; background:var(--kb-tip); color:var(--kb-tip-ink);
  font-size:15px; font-weight:500; box-shadow:var(--kb-pop); animation:kb-pop .25s var(--kb-ease)}
.kb-tip{position:fixed; z-index:70; pointer-events:none; min-width:120px; padding:10px 14px; border-radius:14px;
  background:var(--kb-tip); color:var(--kb-tip-ink); font-size:13px; box-shadow:var(--kb-pop)}
.kb-tip > b{display:block; font-size:18px; font-weight:700; letter-spacing:-.01em; line-height:1.2}
.kb-tip > small{display:block; color:var(--kb-tip-ink-2)}
.kb-tip > div{display:flex; justify-content:space-between; gap:16px; color:var(--kb-tip-ink-2)}
.kb-tip > div.on{color:var(--kb-tip-ink); font-weight:600}


@media (max-width: 1240px){
  .kb-w3, .kb-w4, .kb-w5{grid-column:span 6}
  .kb-w6, .kb-w7, .kb-w8{grid-column:1 / -1}
  .kb-kpis{grid-template-columns:repeat(2, minmax(0,1fr))}
  .kb-me-text{display:none}
}
@media (max-width: 1060px){
  .kb-top{grid-template-columns:1fr auto; row-gap:12px}
  .kb-top > .kb-nav{grid-row:2; grid-column:1 / -1; justify-self:center}
  .kb-big{font-size:48px}
}
@media (max-width: 760px){
  :root{--kb-pad:20px; --kb-gap:12px}
  .kb-app{padding:0 12px calc(24px + env(safe-area-inset-bottom, 0px))}
  .kb-top{gap:10px; padding:max(12px, env(safe-area-inset-top, 0px)) 0 12px}
  .kb-top > .kb-nav{justify-self:stretch}
  .kb-nav-item{height:40px; padding:0 13px; font-size:14px}
  
  .kb-nav-item .kb-ico{display:block}
  .kb-nav-item:not(.on) > span{display:none}
  .kb-nav-item:not(.on) .kb-nav-count{display:none}
  .kb-nav{justify-content:space-between}
  .kb-brand-word{width:72px; height:17px}
  .kb-brand-name{font-size:15px; padding-left:10px}
  .kb-iconbtn{width:42px; height:42px}
  .kb-theme{height:42px; padding:3px}
  .kb-theme span{width:36px; height:36px}
  .kb-top-right{gap:6px}
  .kb-w2, .kb-w3, .kb-w4, .kb-w5, .kb-w6, .kb-w7, .kb-w8{grid-column:1 / -1}
  .kb-kpis{grid-template-columns:repeat(2, minmax(0,1fr))}
  .kb-kpi{gap:10px}
  .kb-kpi-head{font-size:14px; gap:10px}
  .kb-kpi .kb-medal{width:36px; height:36px}
  .kb-kpi .kb-medal .kb-ico{width:18px; height:18px}
  .kb-num{font-size:26px}
  .kb-big{font-size:clamp(36px, 11vw, 46px)}
  .kb-mid{font-size:32px}
  .kb-head-title{font-size:26px}
  .kb-card-head{margin-bottom:16px; gap:12px; flex-wrap:wrap}
  .kb-card-title{min-width:150px}
  .kb-card-title b{font-size:17px}
  .kb-medal{width:40px; height:40px}
  .kb-btn{height:48px; padding:0 20px}
  .kb-search{flex:1}
  .kb-search input{width:100%}
  .kb-bars{gap:8px; height:210px}
  .kb-donut-wrap{grid-template-columns:minmax(0,1fr); justify-items:center}
  .kb-donut{width:180px}
  .kb-shares{width:100%}
  .kb-chart{height:220px}
  dialog.kb-drawer{inset:auto 0 0 0; width:100%; max-height:calc(100dvh - 40px); border-radius:28px 28px 0 0}
  dialog.kb-drawer[open]{animation-name:kb-in-up}
  .kb-drawer-body{padding:12px 16px calc(20px + env(safe-area-inset-bottom, 0px))}
  .kb-drawer-top{padding:16px 16px 0 20px}
  .kb-drawer-name{font-size:24px}
  .kb-ava-xl{width:60px; height:60px; font-size:20px}
  dialog.kb-modal{inset:auto 0 0 0; width:100%; margin:0; border-radius:28px 28px 0 0; max-height:calc(100dvh - 24px)}
  .kb-modal-head{padding:22px 20px 4px}
  .kb-modal-body{padding:14px 20px}
  .kb-modal-foot{padding:10px 20px calc(18px + env(safe-area-inset-bottom, 0px))}
  .kb-modal-foot .kb-btn{flex:1}
  .kb-table td{height:60px}
}
@keyframes kb-in-up{from{transform:translateY(100%)}}
@media (max-width: 380px){
  .kb-brand-name{display:none}
  .kb-kpis{gap:10px}
}

@media (prefers-reduced-motion: reduce){
  .kb-card, .kb-card.kb-lift:hover{transition:none; transform:none}
  dialog.kb-drawer[open], dialog.kb-modal[open], .kb-toast{animation:none}
  .kb-ring .arc, .kb-funnel-bar, .kb-progress i, .kb-bar-fill{transition:none}
}