/* The white label pictures' stylesheet: the section that rode in kit.css until 2026-10-22, moved here so only the
   pages that draw the pictures load it. inc/wl.php enqueues it through gs_wl_sprite_assets(), the assets of the
   wl-sprite component every such page prints once (/agencies/ and /white-label/), after the kit and before the
   bundle's own styles. */

/* ==== the sample agency's brand on the app: the white label pictures ============================================== */
/* The pictures /agencies/ and /white-label/ share (the umbrella's marketing/landing/prototypes/flightdeck/briefs/
   page-templates.md 3.6), each a theme component that prints a block's whole picture, figure.k-pic.k-wl:
   template-parts/wl-brand-page.php (the app, or its sign-in page, at the reseller's address), wl-sign-in-link.php (the
   sign-in link, then the sender profile Active), wl-plan.php (one plan split across the clients, or the Admin panel's
   Clients) and wl-mail.php (one email under the brand), with the glyphs of wl-sprite.php printed once a page. A page's
   own picture of the same family wears .k-wl too and takes these parts. Their own classes are .k-wl-*; the marks and
   statuses a page's other pictures use as well are .k-yb (the sample agency's tile), .k-gs (our mark on a screen that
   is ours), .k-sl (the slash in a window's title), .k-dot (a state with its dot), .k-ok (a done state in a pill) and
   .k-arr (the round arrow between two windows). The sample agency YourBrand wears its ink (#15171E) and its lime
   (#C8F051): an ink tile with the lime stroke and ink buttons with white words on a light ground, the lime tile with the
   ink stroke and lime buttons with ink words in dark, so the mark never sinks into the night. Its sign-in image sits on
   its own sign-in background, the ink, in both themes: that is the brand's data, not the page's. LinkedIn is a text
   chip, never a logo, and nothing moves. */
:root{
  --k-yb:#15171E;--k-lime:#C8F051;
  --k-yb-tile:var(--k-yb);--k-yb-glyph:var(--k-lime);--k-yb-btn:var(--k-yb);--k-on-yb-btn:#FFFFFF;
  --k-yb-price:var(--k-yb);--k-yb-price-line:color-mix(in srgb,var(--k-yb) 35%,transparent);--k-yb-price-bg:color-mix(in srgb,var(--k-lime) 22%,var(--panel));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --k-yb-tile:var(--k-lime);--k-yb-glyph:var(--k-yb);--k-yb-btn:var(--k-lime);--k-on-yb-btn:var(--k-yb);
    --k-yb-price:var(--k-lime);--k-yb-price-line:color-mix(in srgb,var(--k-lime) 45%,transparent);--k-yb-price-bg:color-mix(in srgb,var(--k-lime) 10%,var(--panel));
  }
}
:root[data-theme="dark"]{
  --k-yb-tile:var(--k-lime);--k-yb-glyph:var(--k-yb);--k-yb-btn:var(--k-lime);--k-on-yb-btn:var(--k-yb);
  --k-yb-price:var(--k-lime);--k-yb-price-line:color-mix(in srgb,var(--k-lime) 45%,transparent);--k-yb-price-bg:color-mix(in srgb,var(--k-lime) 10%,var(--panel));
}
.k-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* the marks and states the pictures share */
.k-yb{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px;box-shadow:inset 0 1px 1px rgba(255,255,255,.2);background:var(--k-yb-tile);color:var(--k-yb-glyph);font-style:normal}
.k-yb svg{display:block;flex:none;width:15px;height:15px}
.k-gs{display:block;flex:none;width:24px;height:24px}
.k-sl{display:block;flex:none;width:14px;height:14px;color:var(--k-faint)}
.k-dot{display:inline-flex;align-items:center;gap:6px;flex:none;font:500 13px/1 var(--sans);color:var(--k-ok-ink)}
.k-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.k-dot-off{color:var(--mute)}
.k-dot-off::before{background:var(--k-faint)}
.k-ok{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 9px;border-radius:999px;background:color-mix(in srgb,var(--ok) 13%,var(--panel));color:var(--k-ok-ink);font:600 14px/1 var(--sans)}
.k-ok svg{display:block;flex:none;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--ok);color:#FFFFFF}
.k-arr{display:grid;place-items:center;justify-self:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ai);box-shadow:var(--k-sh)}
.k-arr svg{display:block;flex:none;width:18px;height:18px}
/* inside a picture */
.k-wl svg{display:block;flex:none}
.k-wl i{font-style:normal}
:where(.k-wl) :where(p,ul,ol,li){margin:0;padding:0;list-style:none}
.k-wl .k-win-title span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* an email lifted over the corner of the window before it (the brand page with its mail, /white-label/'s sending
   domain) */
.k-wl-lift{display:flex;flex-direction:column;width:100%;max-width:600px}
.k-wl-lift>.k-wl-mail{position:relative;z-index:1;align-self:flex-end;margin-top:-40px}

/* ---- one email under the brand (wl-mail.php) ----------------------------------------------------------- */
.k-wl-mail{width:312px;padding:16px 18px 18px}
.k-wl-mail-from{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.k-wl-mail-from .k-yb{width:36px;height:36px;border-radius:10px}
.k-wl-mail-from .k-yb svg{width:20px;height:20px}
.k-wl-mail-from>span{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.k-wl-mail-from b{font:600 15px/1.2 var(--sans);color:var(--ink)}
.k-wl-mail-from small{overflow:hidden;font:400 12.5px/1.2 var(--mono);color:var(--mute);text-overflow:ellipsis;white-space:nowrap}
.k-wl-mail-i{width:18px;height:18px;color:var(--k-faint)}
.k-wl-mail-s{padding-top:14px;font:600 16px/1.3 var(--sans);color:var(--ink);text-wrap:balance}
.k-wl-mail-l{margin-top:6px;font:400 14px/1.4 var(--sans);color:var(--mute)}
.k-wl-mail-btn{display:flex;align-items:center;justify-content:center;height:40px;margin-top:14px;border-radius:11px;background:var(--k-yb-btn);color:var(--k-on-yb-btn);font:600 14px/1 var(--sans)}

/* ---- the brand page (wl-brand-page.php): the browser at the reseller's address ------------------------- */
.k-wl-bp{position:relative;width:100%;max-width:600px}
.k-wl-brw{width:100%}
/* the app: the brand's sidebar in its ink, the client's workspace open on its workflows */
.k-wl-bp-app .k-wl-brw{width:92%}
.k-wl-app{display:grid;grid-template-columns:172px minmax(0,1fr);min-height:312px}
.k-wl-side{display:flex;flex-direction:column;gap:14px;padding:18px 12px;background:var(--k-yb);color:#FFFFFF}
/* the agency's logo: the lockup of the dark ground, the lime tile and the word in white */
.k-wl-logo{display:flex;align-items:center;padding:0 6px;color:#FFFFFF}
.k-wl-logo svg{width:87.5px;height:24px}
.k-wl-ws{display:flex;align-items:center;gap:8px;height:38px;padding:0 8px;border-radius:10px;background:rgba(255,255,255,.12);font:600 14px/1 var(--sans)}
.k-wl-ws .k-sq{width:22px;height:22px;font-size:11px}
.k-wl-ws span{flex:1}
.k-wl-ws svg{width:15px;height:15px;opacity:.75}
.k-wl-nav{display:grid;gap:2px}
.k-wl-nav li{display:flex;align-items:center;gap:10px;height:36px;padding:0 9px;border-radius:9px;font:500 14px/1 var(--sans);color:rgba(255,255,255,.8)}
.k-wl-nav svg{width:17px;height:17px}
.k-wl-nav .k-wl-on{background:rgba(255,255,255,.16);color:#FFFFFF;font-weight:600}
.k-wl-main{display:flex;flex-direction:column;gap:10px;padding:18px 18px 22px;min-width:0}
.k-wl-main-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.k-wl-main-h b{font:600 18px/1.2 var(--sans);color:var(--ink)}
.k-wl-btn{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:9px;background:var(--k-yb-btn);color:var(--k-on-yb-btn);font:600 13px/1 var(--sans);white-space:nowrap}
.k-wl-wf{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:13px}
.k-wl-wf-n{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.k-wl-wf-n b{font:600 14.5px/1.25 var(--sans);color:var(--ink)}
.k-wl-chs{display:flex;flex-wrap:wrap;gap:6px}
/* the sign-in page: the browser's tab row over the kit's address bar, the brand's icon and name on the tab */
.k-wl-tabs{display:flex;align-items:flex-end;gap:16px;height:42px;padding:0 14px;background:color-mix(in srgb,var(--ink) 5%,var(--sunk))}
.k-wl-tabs .k-win-dots{align-self:center}
.k-wl-tab{display:flex;align-items:center;gap:8px;height:34px;padding:0 18px 0 10px;border-radius:10px 10px 0 0;background:var(--sunk);font:500 13.5px/1 var(--sans);color:var(--ink);white-space:nowrap}
.k-wl-tab .k-yb{width:18px;height:18px;border-radius:5px}
.k-wl-tab .k-yb svg{width:11px;height:11px}
.k-wl-si{display:grid;grid-template-columns:minmax(0,1fr) 40%;min-height:336px}
.k-wl-si-form{display:flex;flex-direction:column;min-width:0;padding:20px 24px 26px}
.k-wl-si-brand{display:flex;align-items:center;gap:9px;font:600 15.5px/1 var(--sans);color:var(--ink)}
.k-wl-si-brand .k-yb{width:26px;height:26px}
.k-wl-si-brand .k-yb svg{width:16px;height:16px}
.k-wl-si-h{margin-top:26px;font:700 20px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.k-wl-si-l{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font:500 13px/1 var(--sans);color:var(--k-text)}
.k-wl-si-link{font-weight:600;color:var(--k-yb-btn)}
.k-wl-si-in{display:flex;align-items:center;height:40px;margin-top:7px;padding:0 12px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--panel);font:400 14px/1 var(--sans);color:var(--ink);white-space:nowrap}
.k-wl-si-pw{letter-spacing:.14em;color:var(--k-text)}
.k-wl-si-btn{display:flex;align-items:center;justify-content:center;height:42px;margin-top:18px;border-radius:10px;background:var(--k-yb-btn);color:var(--k-on-yb-btn);font:600 14.5px/1 var(--sans)}
/* the brand's sign-in image on its sign-in background: its lockup for the dark ground */
.k-wl-si-art{display:grid;place-items:center;padding:24px 18px;background:var(--k-yb)}
.k-wl-si-art svg{width:100%;max-width:168px;height:auto;aspect-ratio:211/48;color:#FFFFFF}

/* ---- the sign-in link (wl-sign-in-link.php): the link on the sender profile, then the profile Active ------ */
.k-wl-pass{display:grid;grid-template-columns:minmax(0,1.18fr) 56px minmax(0,.82fr);align-items:stretch;width:100%;max-width:620px}
.k-wl-pass .k-win{display:flex;flex-direction:column}
.k-wl-pass .k-win-title{height:46px;padding:0 14px;gap:8px}
.k-wl-pass :is(.k-win-title,.k-card-h) .k-sq{width:22px;height:22px;font-size:11px}
.k-wl-pass .k-arr{align-self:center}
.k-wl-pass-in{display:flex;flex-direction:column;gap:14px;flex:1;padding:16px 14px 18px}
.k-wl-sp{display:flex;align-items:center;gap:12px}
.k-wl-sp>span{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.k-wl-sp b{font:600 15.5px/1.2 var(--sans);color:var(--ink)}
.k-wl-wait{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:color-mix(in srgb,var(--k-amber) 16%,var(--panel));color:var(--k-em-ink);font:500 12.5px/1 var(--sans);white-space:nowrap}
.k-wl-wait::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--k-amber)}
.k-wl-link{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--sunk)}
.k-wl-link-t{display:flex;align-items:center;gap:8px;font:600 14.5px/1.2 var(--sans);color:var(--ink)}
.k-wl-link-t svg{width:18px;height:18px;color:var(--ai)}
.k-wl-link-p{font:400 13.5px/1.45 var(--sans);color:var(--k-text);text-wrap:pretty}
.k-wl-copy{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:11px;background:var(--k-yb-btn);color:var(--k-on-yb-btn);font:600 14px/1 var(--sans)}
.k-wl-copy svg{width:16px;height:16px}
.k-wl-pass-done{align-items:center;justify-content:center;gap:16px;padding:24px 16px 26px;text-align:center}
.k-wl-pass-who{display:flex;flex-direction:column;align-items:center;gap:9px}
.k-wl-pass-who b{font:600 18px/1.2 var(--sans);color:var(--ink)}

/* ---- the plan (wl-plan.php): the Admin panel's Clients ---------------------------------------------------- */
.k-wl-cl{width:100%;max-width:620px}
.k-wl-cl .k-win-title span{color:var(--k-text)}
.k-wl-cl-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:300px}
.k-wl-cl-list{min-width:0;padding:16px 10px 16px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--sunk) 55%,var(--panel))}
.k-wl-cl-cap{display:flex;align-items:center;gap:8px;padding:0 8px;font:600 14px/1 var(--sans);color:var(--ink)}
.k-wl-cl-cap span{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font:500 12px/1 var(--mono);color:var(--mute)}
.k-wl-cl-win{margin-top:9px;padding:0 8px;font:400 13px/1.3 var(--mono);color:var(--mute);white-space:nowrap}
.k-wl-cl-list ul{display:grid;gap:2px;margin-top:12px}
.k-wl-cl-list li{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px}
.k-wl-cl-list li.k-wl-on{background:var(--k-ai-soft)}
:is(.k-wl-cl-list li,.k-wl-cl-who)>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.k-wl-cl-list b{font:600 14px/1.2 var(--sans);color:var(--ink)}
.k-wl-cl-list small{overflow:hidden;font:400 13px/1.2 var(--sans);color:var(--mute);text-overflow:ellipsis;white-space:nowrap}
/* a registrant's plate: the app's round plate with its user glyph, no face */
.k-wl-u{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--mute)}
.k-wl-u svg{width:16px;height:16px}
.k-wl-u-lg{width:44px;height:44px}
.k-wl-u-lg svg{width:22px;height:22px}
.k-wl-cl-det{display:flex;flex-direction:column;min-width:0;padding:18px 18px 20px}
.k-wl-cl-who{display:flex;align-items:center;gap:12px}
.k-wl-cl-who b{font:600 17px/1.2 var(--sans);color:var(--ink)}
.k-wl-cl-who small{overflow:hidden;font:400 13px/1.2 var(--mono);color:var(--mute);text-overflow:ellipsis;white-space:nowrap}
.k-wl-cl-sec{margin-top:22px;font:500 11.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.k-wl-cl-ws{margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:14px}
/* the workspace: its mark, its name and its state on one line, its share under them */
.k-wl-cl-ws-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 10px}
.k-wl-cl-ws-h b{min-width:0;font:600 14.5px/1.2 var(--sans);color:var(--ink)}
.k-wl-cl-ws-h small{grid-column:2/-1;font:400 13px/1.4 var(--sans);color:var(--k-text)}
.k-wl-cl-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.k-wl-cl-acts span{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:9px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font:600 13px/1 var(--sans);color:var(--ink);white-space:nowrap}

/* ---- the plan (wl-plan.php): the workspaces on this subscription, and the reseller's own invoice ---------- */
.k-wl-plan{position:relative;width:100%;max-width:620px;padding-top:168px}
.k-wl-split{width:88%}
.k-wl-tbl{width:100%;border-collapse:collapse;font:400 14px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.k-wl-tbl :is(th,td){height:44px;padding:0 12px;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap;color:var(--k-text)}
.k-wl-tbl :is(th,td):first-child{padding-left:16px}
.k-wl-tbl :is(th,td):last-child{padding-right:16px}
.k-wl-tbl thead :is(th,td){height:38px;font:500 11.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.k-wl-tbl thead .k-wl-tx-li{color:var(--k-li-ink)}
.k-wl-tbl thead .k-wl-tx-em{color:var(--k-em-ink)}
.k-wl-tbl tbody th{text-align:left;font-weight:500;color:var(--ink)}
.k-wl-wn{display:flex;align-items:center;gap:10px}
.k-wl-wn :is(.k-sq,.k-yb){width:22px;height:22px;font-size:11px}
.k-wl-wn .k-yb svg{width:14px;height:14px}
.k-wl-tbl tbody tr.k-wl-on{background:var(--k-ai-soft)}
.k-wl-tbl tbody tr.k-wl-on :is(th,td){color:var(--ink);font-weight:600}
.k-wl-tbl tfoot :is(th,td){height:48px;border-bottom:0;background:var(--sunk);font-weight:700;color:var(--ink)}
.k-wl-tbl tfoot th{text-align:left}
.k-wl-inv{position:absolute;top:0;right:0;z-index:1;width:212px;padding:18px 18px 20px;box-shadow:var(--k-sh-up)}
.k-wl-inv-h{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.k-wl-inv-h .k-yb{width:30px;height:30px;border-radius:9px}
.k-wl-inv-h .k-yb svg{width:17px;height:17px}
.k-wl-inv-h b{font:600 15px/1.2 var(--sans);color:var(--ink)}
.k-wl-inv-to{display:flex;align-items:center;gap:9px;margin-top:16px;font:600 14.5px/1 var(--sans);color:var(--ink)}
.k-wl-inv-to .k-sq{width:22px;height:22px;font-size:11px}
.k-wl-inv-l{margin-top:14px;font:400 14px/1.3 var(--sans);color:var(--mute)}
.k-wl-inv-p{display:flex;align-items:center;justify-content:center;height:46px;margin-top:12px;border:1.5px dashed var(--k-yb-price-line);border-radius:12px;background:var(--k-yb-price-bg);font:600 16px/1 var(--sans);color:var(--k-yb-price)}

@media (max-width:760px){
  /* the email tucks under the foot of the window before it */
  .k-wl-lift>.k-wl-mail{width:calc(100% - 22px);margin-top:-30px;padding:14px 15px 15px}
  .k-wl-mail-s{font-size:15.5px}
  /* the app: the sidebar becomes an ink band over the page, one workflow under it, room for the email at its foot */
  .k-wl-bp-app .k-wl-brw{width:100%}
  .k-wl-app{grid-template-columns:minmax(0,1fr);min-height:0}
  .k-wl-side{flex-direction:row;align-items:center;justify-content:space-between;padding:12px}
  .k-wl-ws{padding:0 10px 0 8px}
  .k-wl-ws span{flex:none}
  .k-wl-nav{display:none}
  .k-wl-main{padding:14px 12px 18px}
  .k-wl-bp-mail .k-wl-main{padding-bottom:46px}
  .k-wl-main-h b{font-size:16px}
  .k-wl-wf{padding:11px 12px}
  .k-wl-wf+.k-wl-wf{display:none}
  /* the sign-in page: the sign-in image goes under the form, a band on the brand's background */
  .k-wl-si{grid-template-columns:minmax(0,1fr);min-height:0}
  .k-wl-si-form{padding:16px 14px 20px}
  .k-wl-si-h{margin-top:20px;font-size:18px}
  .k-wl-si-art{padding:20px 18px}
  .k-wl-si-art svg{max-width:140px}
  /* the sign-in link: the two windows stack, the arrow points down */
  .k-wl-pass{grid-template-columns:minmax(0,1fr)}
  .k-wl-pass-done{padding:22px 18px 24px;gap:14px}
  .k-wl-pass .k-arr{margin:14px 0;transform:rotate(90deg)}
  /* the Clients: the registrations over the open one */
  .k-wl-cl-in{grid-template-columns:minmax(0,1fr);min-height:0}
  .k-wl-cl-list{padding:14px 8px;border-right:0;border-bottom:1px solid var(--line)}
  .k-wl-cl-det{padding:16px 14px 18px}
  /* the workspaces on this subscription: the invoice under the table */
  .k-wl-plan{display:flex;flex-direction:column;gap:14px;padding-top:0}
  .k-wl-split{width:100%}
  .k-wl-tbl{font-size:13px}
  .k-wl-tbl :is(th,td){padding:0 6px;height:42px}
  .k-wl-tbl tbody th{padding-top:6px;padding-bottom:6px;white-space:normal;line-height:1.25}
  .k-wl-tbl :is(th,td):first-child{padding-left:12px}
  .k-wl-tbl :is(th,td):last-child{padding-right:12px}
  .k-wl-tbl thead :is(th,td){font-size:10px;letter-spacing:0}
  .k-wl-wn{gap:8px}
  .k-wl-inv{position:relative;align-self:flex-end;width:82%}
}
/* the narrowest phones (320 to 360): the pictures take the last few pixels so no figure, address or title is cut (a
   page's own reset of the svg in its blocks, .pg-x .k-blk svg, must not bring the mail's glyph back) */
@media (max-width:360px){
  .k-wl .k-wl-mail .k-wl-mail-i{display:none}
  .k-wl-split .k-win-title{height:auto;min-height:50px;padding-top:12px;padding-bottom:12px;white-space:normal}
  .k-wl-split .k-win-title b{line-height:1.25}
  .k-wl-mail-from{gap:9px}
  .k-wl-mail-from .k-yb{width:32px;height:32px;border-radius:9px}
  .k-wl-mail-from small{font-size:11.5px}
  .k-wl-cl-list small{font-size:12px}
  .k-wl-u-lg{width:36px;height:36px}
  .k-wl-u-lg svg{width:19px;height:19px}
  .k-wl-cl-who small{font-size:12px}
  .k-wl-cl-ws-h small{grid-column:1/-1;font-size:12px}
  .k-wl-tbl{font-size:12.5px}
  .k-wl-tbl :is(th,td){padding:0 4px}
  .k-wl-tbl :is(th,td):first-child{padding-left:10px}
  .k-wl-tbl :is(th,td):last-child{padding-right:10px}
  .k-wl-tbl thead :is(th,td){font-size:9.5px}
  .k-wl-wn{gap:6px}
  .k-wl-wn :is(.k-sq,.k-yb){width:18px;height:18px;border-radius:5px;font-size:9.5px}
  .k-wl-wn .k-yb svg{width:11px;height:11px}
}