/* ============================================================================
   PapilioHost client area - review round 11 (2026-09-24). Loads AFTER ca-r10.css for
   BOTH looks. Scope: (1) the notices rail - one row anatomy for every kind of notice,
   CTA right edges and dismiss discs pixel-aligned, phones stacked; (2) Gcore dashboard
   columns (wallet directly under "Answer in 60 sec"); (3) "Start with favorites" = the
   quickbar language (hairline tile, title, short line) in ONE stroked box with faded
   dividers, the Papilio quickbar gets the same stroke + dividers; (4) v2: the Papilio KPI
   strip gets its 09-22 per-cell colour and top accent back (r9 removed it), one box kept.
   Selectors use :is(#id, .class) on purpose: the older layers carry ID rules with
   !important (#nmTgBar, and console.css .pc-notices>#nmTgBar:has(>.x) = 1-4-1), so the
   notice selectors also double .pc-notices.pc-notices to stay one class ahead.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. notices */
html body.pc .pc-notices{gap:10px}
/* per-kind tone + glyph: defaults sit at low specificity, the per-kind rules below override them */
html body.pc .pc-notices>*{
  --tone:var(--accent,#38bdf8);
  --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4.5M12 16h.01'/%3E%3C/svg%3E");}
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert){
  position:relative !important;display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;gap:16px !important;
  min-height:60px !important;margin:0 !important;padding:12px 58px 12px 62px !important;box-sizing:border-box;
  border:1px solid var(--border) !important;border-radius:14px !important;box-shadow:none !important;
  background:
    linear-gradient(180deg,transparent,var(--tone) 30%,var(--tone) 70%,transparent) 0 0/2px 100% no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--tone) 11%,transparent),transparent 300px),
    var(--panel) !important;
  color:var(--text) !important;font-size:13px !important;line-height:1.45 !important;text-align:left;overflow:visible}
html body.pc .pl-content .pc-notices.pc-notices>:is(#pcOverdue,.alert.alert-warning){--tone:var(--amber,#e3a63b)}
html body.pc .pl-content .pc-notices.pc-notices>:is(#pcOverdue){
  --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E")}
html body.pc .pl-content .pc-notices.pc-notices>:is(.alert.alert-danger){--tone:var(--red,#ee5a63)}
html body.pc .pl-content .pc-notices.pc-notices>:is(.alert.alert-success){--tone:var(--green,#34c281)}
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar){
  --tone:var(--accent,#38bdf8);
  --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21.9 3.4 2.7 10.8c-1.3.5-1.3 1.9 0 2.3l4.9 1.5 1.9 5.9c.2.8 1.3 1 1.9.4l2.7-2.6 4.9 3.6c.7.5 1.7.1 1.9-.8l3.3-16.4c.3-1.1-.8-1.9-1.7-1.3Z'/%3E%3C/svg%3E")}
html body.pc .pl-content .pc-notices.pc-notices>:is(.verification-banner.email-verification){
  --tone:var(--violet,#9a8cf7);
  --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E")}
html body.pc .pl-content .pc-notices.pc-notices>:is(.verification-banner.user-validation){
  --tone:var(--amber,#e3a63b);
  --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='11' r='2.4'/%3E%3Cpath d='M5.8 16.5c.6-1.6 1.8-2.4 3.2-2.4s2.6.8 3.2 2.4M14.5 9.5h3.5M14.5 13h3.5'/%3E%3C/svg%3E")}

/* the icon: a tone disc (::before) with the glyph masked on top (::after) - same slot on every row */
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert)::before,
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert)::after{
  content:"" !important;display:block !important;position:absolute !important;inset:auto !important;margin:0 !important;padding:0 !important;
  pointer-events:none;border:0 !important;transform:translateY(-50%) !important;opacity:1 !important;animation:none !important}
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert)::before{
  left:14px !important;top:50% !important;width:34px !important;height:34px !important;border-radius:50% !important;
  background:color-mix(in srgb,var(--tone) 14%,transparent) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 32%,transparent) !important;
  -webkit-mask:none !important;mask:none !important}
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert)::after{
  left:23px !important;top:50% !important;width:16px !important;height:16px !important;border-radius:0 !important;box-shadow:none !important;
  background:var(--tone) !important;
  -webkit-mask:var(--glyph) center/contain no-repeat !important;mask:var(--glyph) center/contain no-repeat !important}
/* the old per-kind icons are replaced by the disc */
html body.pc .pl-content .pc-notices.pc-notices>:is(#pcOverdue)>svg,
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar)>.i,
html body.pc .pl-content .pc-notices.pc-notices>:is(.verification-banner) i:not(.fa-spinner),
html body.pc .pl-content .pc-notices.pc-notices>:is(.alert)>:is(i,svg,.icon,.ic){display:none !important}
/* WHMCS wraps the verification banner in container/row/col: flatten it into the row itself */
html body.pc .pl-content .pc-notices.pc-notices>:is(.verification-banner) :is(.container,.row,[class*="col-"]){
  display:contents !important}

/* text: one readable block, secondary line underneath */
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar)>.t,
html body.pc .pl-content .pc-notices.pc-notices>:is(.verification-banner) .text,
html body.pc .pl-content .pc-notices.pc-notices>:is(#pcOverdue,.alert)>:is(span,p,div):not(.close){
  display:block !important;flex:1 1 auto !important;min-width:0 !important;margin:0 !important;padding:0 !important;
  font-size:13px !important;font-weight:500 !important;line-height:1.45 !important;color:var(--text) !important;
  text-wrap:pretty;overflow:visible !important;-webkit-line-clamp:unset !important;max-height:none !important;white-space:normal !important}
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar)>.t br{display:none}
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar)>.t small{display:block !important;margin:2px 0 0 !important;font-size:12px !important;font-weight:400 !important;color:var(--dim) !important;opacity:1 !important}
html body.pc .pl-content .pc-notices.pc-notices>:is(.alert) p{margin:0 !important}

/* the action: one size for every row, right edges on one vertical line */
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar)>a.b,
html body.pc .pl-content .pc-notices.pc-notices>:is(.verification-banner) .btn-action,
html body.pc .pl-content .pc-notices.pc-notices>:is(#pcOverdue,.alert)>a:is(.pc-btn,.btn),
html body.pc .pl-content .pc-notices.pc-notices>:is(.alert)>.btn:not(.close){
  flex:0 0 196px !important;width:196px !important;max-width:none !important;height:36px !important;min-width:0 !important;
  margin:0 0 0 auto !important;padding:0 14px !important;box-sizing:border-box !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;
  font-family:inherit;font-size:12.5px !important;font-weight:600 !important;line-height:1 !important;letter-spacing:0;white-space:nowrap !important;
  border-radius:10px !important;text-decoration:none !important;float:none !important;box-shadow:none !important;
  background:transparent !important;border:1px solid var(--border-strong) !important;color:var(--accent-2,#7dd3fc) !important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,filter .18s ease !important}
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar)>a.b:hover,
html body.pc .pl-content .pc-notices.pc-notices>:is(.verification-banner) .btn-action:hover,
html body.pc .pl-content .pc-notices.pc-notices>:is(.alert)>a.btn:hover{
  background:color-mix(in srgb,var(--accent,#38bdf8) 10%,transparent) !important;border-color:color-mix(in srgb,var(--accent,#38bdf8) 55%,transparent) !important;color:var(--text) !important}
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar)>a.b :is(i,svg){display:none !important}
/* the money row keeps its solid accent button */
html body.pc .pl-content .pc-notices.pc-notices>:is(#pcOverdue)>a.pc-btn{
  background:linear-gradient(118deg,var(--accent-2,#7dd3fc),var(--accent,#38bdf8)) !important;border:0 !important;
  color:var(--accent-ink,#04121c) !important;box-shadow:0 8px 20px -12px rgba(56,189,248,.9) !important}
html body.pc .pl-content .pc-notices.pc-notices>:is(#pcOverdue)>a.pc-btn:hover{filter:brightness(1.08)}

/* dismiss: every row, same disc, same slot */
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert) :is(.x,.close,.pc-nclose){
  position:absolute !important;right:14px !important;top:50% !important;left:auto !important;bottom:auto !important;transform:translateY(-50%) !important;
  width:30px !important;height:30px !important;min-width:0 !important;margin:0 !important;padding:0 !important;float:none !important;
  display:grid !important;place-items:center !important;border:0 !important;border-radius:50% !important;background:transparent !important;
  color:var(--dim) !important;opacity:.7 !important;font-size:19px !important;font-weight:400 !important;line-height:1 !important;
  text-shadow:none !important;box-shadow:none !important;cursor:pointer;z-index:1;transition:opacity .15s ease,background .15s ease,color .15s ease}
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert) :is(.x,.close,.pc-nclose) span{display:block;line-height:1;font-size:inherit}
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert) :is(.x,.close,.pc-nclose):hover{opacity:1 !important;color:var(--text) !important;background:var(--raise,rgba(255,255,255,.06)) !important}
html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert) :is(.x,.close,.pc-nclose):focus-visible{outline:2px solid var(--accent,#38bdf8);outline-offset:1px}

/* light */
html.pl-light body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert){
  background:
    linear-gradient(180deg,transparent,var(--tone) 30%,var(--tone) 70%,transparent) 0 0/2px 100% no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--tone) 9%,#fff),#fff 300px) !important;
  border-color:var(--border) !important}
html.pl-light body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar)>a.b,
html.pl-light body.pc .pl-content .pc-notices.pc-notices>:is(.verification-banner) .btn-action,
html.pl-light body.pc .pl-content .pc-notices.pc-notices>:is(.alert)>a.btn{color:#0369a1 !important;border-color:rgba(2,132,199,.35) !important}
html.pl-light body.pc .pl-content .pc-notices.pc-notices>:is(#pcOverdue)>a.pc-btn{color:#04121c !important}

/* phones: icon + text on top, the action full width underneath, dismiss in the top corner */
@media(max-width:760px){
  html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert){
    flex-wrap:wrap !important;align-items:flex-start !important;gap:0 !important;min-height:0 !important;padding:13px 44px 14px 60px !important}
  html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert)::before{top:12px !important;left:14px !important;transform:none !important}
  html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert)::after{top:21px !important;left:23px !important;transform:none !important}
  html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar)>.t,
  html body.pc .pl-content .pc-notices.pc-notices>:is(.verification-banner) .text,
  html body.pc .pl-content .pc-notices.pc-notices>:is(#pcOverdue,.alert)>:is(span,p,div):not(.close){flex:1 1 100% !important;padding-top:1px !important;font-size:13px !important}
  html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar)>a.b,
  html body.pc .pl-content .pc-notices.pc-notices>:is(.verification-banner) .btn-action,
  html body.pc .pl-content .pc-notices.pc-notices>:is(#pcOverdue,.alert)>a:is(.pc-btn,.btn),
  html body.pc .pl-content .pc-notices.pc-notices>:is(.alert)>.btn:not(.close){
    flex:1 1 100% !important;width:auto !important;margin:11px -30px 0 0 !important;height:38px !important;font-size:13px !important}
  html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert) :is(.x,.close,.pc-nclose){top:9px !important;right:8px !important;transform:none !important}
  /* the v332 phone trick (font-size:0 + ::after short label) must not hide the real label here */
  html body.pc .pl-content .pc-notices.pc-notices>:is(#nmTgBar,#pcOverdue,.verification-banner,.alert) :is(a,.btn)::after{content:none !important;display:none !important}
}

/* ------------------------------------------- 2. Gcore dashboard: two column stacks */
html body.pc .pc-dash2.pc-dcols{align-items:start}
html body.pc .pc-dcols>.pc-dcol{display:flex;flex-direction:column;gap:24px;min-width:0}
html body.pc .pc-dcols>.pc-dcol>.pc-card{margin:0}
@media(max-width:1180px){
  /* one column: keep the phone order quick answers, servers, wallet, activity */
  html body.pc .pc-dcols{gap:24px}
  html body.pc .pc-dcols>.pc-dcol{display:contents}
  html body.pc .pc-dcols .pc-quick60{order:1}
  html body.pc .pc-dcols .pc-dservers{order:2}
  html body.pc .pc-dcols .pc-wallet{order:3}
  html body.pc .pc-dcols .pc-dactivity{order:4}
}
@media(max-width:760px){html body.pc .pc-dcols,html body.pc .pc-dcols>.pc-dcol{gap:16px}}

/* -------------------- 3. favourites bar (Gcore) + quickbar (Papilio): one stroked box */
html body.pc .pc-favbar,
html body.pc .pc-quickbar{
  position:relative;border:1px solid transparent !important;border-radius:16px !important;overflow:hidden;
  background:
    linear-gradient(180deg,var(--panel),var(--panel)) padding-box,
    linear-gradient(135deg,rgba(125,211,252,.46),rgba(56,189,248,.08) 36%,rgba(56,189,248,.08) 64%,rgba(125,211,252,.34)) border-box !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important}
html body.pc .pc-favbar::before,
html body.pc .pc-quickbar::before{
  content:"" !important;display:block !important;position:absolute;left:14%;right:14%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(191,238,255,.62),transparent) !important;box-shadow:0 0 14px rgba(56,189,248,.28)}
html body.pc .pc-quickbar::after{display:none !important}

/* favourites: the Papilio quickbar anatomy, 4 in one row */
html body.pc .pc-favs2{margin:0 0 24px}
html body.pc .pc-favs2>h2{font-size:18px;font-weight:600;margin:0 0 14px;color:var(--text)}
html body.pc .pc-favbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px}
html body.pc .pc-favbar>a{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:20px 12px 18px;border-radius:12px;text-align:center;color:var(--text);text-decoration:none !important;
  transition:background .2s ease}
html body.pc .pc-favbar .ic{
  width:42px;height:42px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--raise);box-shadow:inset 0 0 0 1px var(--border);color:var(--dim);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),color .2s ease,box-shadow .35s ease}
html body.pc .pc-favbar .ic svg{width:20px;height:20px;stroke-width:1.7}
html body.pc .pc-favbar .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
html body.pc .pc-favbar b{font-size:13.5px;font-weight:600;letter-spacing:-.005em;line-height:1.3;transition:color .2s ease}
html body.pc .pc-favbar small{font-size:12px;line-height:1.35;color:var(--faint)}
html body.pc .pc-favbar>a:hover{background:radial-gradient(90% 100% at 50% 0%,rgba(56,189,248,.13),transparent 72%)}
html body.pc .pc-favbar>a:hover .ic{color:var(--accent);transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(125,211,252,.35),0 12px 26px -12px rgba(56,189,248,.9)}
html body.pc .pc-favbar>a:hover b{color:var(--accent-2,#7dd3fc)}
html body.pc .pc-favbar>a:focus-visible{outline:2px solid var(--accent,#38bdf8);outline-offset:-2px}

/* one faded divider recipe for both bars */
html body.pc .pc-favbar>a+a::before,
html body.pc .pc-quickbar>a+a::before{content:"" !important;display:block !important;position:absolute !important;left:0 !important;top:14% !important;bottom:14% !important;width:1px !important;height:auto !important;pointer-events:none;
  background:linear-gradient(180deg,rgba(125,211,252,0),rgba(125,211,252,.30) 50%,rgba(125,211,252,0)) !important}
html body.pc .pc-quickbar>a{border:0 !important}

/* light */
html.pl-light body.pc .pc-favbar,
html.pl-light body.pc .pc-quickbar{
  background:linear-gradient(180deg,#fff,#f7fafd) padding-box,
    linear-gradient(135deg,rgba(2,132,199,.36),rgba(2,132,199,.07) 36%,rgba(2,132,199,.07) 64%,rgba(2,132,199,.28)) border-box !important}
html.pl-light body.pc .pc-favbar::before,html.pl-light body.pc .pc-quickbar::before{background:linear-gradient(90deg,transparent,rgba(2,132,199,.35),transparent) !important;box-shadow:none}
html.pl-light body.pc .pc-favbar>a+a::before,
html.pl-light body.pc .pc-quickbar>a+a::before{background:linear-gradient(180deg,rgba(2,132,199,0),rgba(2,132,199,.24) 50%,rgba(2,132,199,0)) !important}
html.pl-light body.pc .pc-favbar .ic{background:#f1f5fa;box-shadow:inset 0 0 0 1px #e3e7ee}
html.pl-light body.pc .pc-favbar>a:hover{background:radial-gradient(90% 100% at 50% 0%,rgba(14,165,233,.10),transparent 72%)}

/* narrow: 2 x 2, faded lines between columns and between rows */
@media(max-width:900px){
  html body.pc .pc-favbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body.pc .pc-favbar>a:nth-child(3)::before{display:none !important}
  html body.pc .pc-favbar>a:nth-child(n+3)::after{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;pointer-events:none;
    background:linear-gradient(90deg,rgba(125,211,252,0),rgba(125,211,252,.30) 50%,rgba(125,211,252,0))}
  html.pl-light body.pc .pc-favbar>a:nth-child(n+3)::after{background:linear-gradient(90deg,rgba(2,132,199,0),rgba(2,132,199,.24) 50%,rgba(2,132,199,0))}
}
@media(max-width:760px){
  html body.pc .pc-favs2{margin:0 0 16px}
  html body.pc .pc-favs2>h2{font-size:16px;margin:0 0 10px}
  html body.pc .pc-favbar{padding:4px}
  html body.pc .pc-favbar>a{gap:8px;padding:16px 8px 14px}
  html body.pc .pc-favbar .ic{width:38px;height:38px}
  html body.pc .pc-favbar .ic svg{width:18px;height:18px}
  html body.pc .pc-favbar b{font-size:13px}
  html body.pc .pc-favbar small{font-size:11.5px}
  /* quickbar 2 x 2 on phones: the faded vertical line only between columns, a faded rule between rows */
  html body.pc .pc-quickbar>a:nth-child(odd){border-right:0 !important}
  html body.pc .pc-quickbar>a:nth-child(-n+2){border-bottom:0 !important}
  html body.pc .pc-quickbar>a+a::before{display:none !important}
  html body.pc .pc-quickbar>a:nth-child(even)::before{display:block !important}
  html body.pc .pc-quickbar>a:nth-child(n+3)::after{content:"" !important;display:block !important;position:absolute !important;top:0 !important;left:12% !important;right:12% !important;height:1px !important;width:auto !important;pointer-events:none;
    background:linear-gradient(90deg,rgba(125,211,252,0),rgba(125,211,252,.30) 50%,rgba(125,211,252,0)) !important}
}

/* ------------------ 4. Papilio KPI strip: one box (r9) + the per-cell colour of 09-22 back */
html body.pc .pc-kpis.pc-kpis-art .pc-kpi{
  background:radial-gradient(120px 90px at calc(100% - 34px) 50%,rgba(var(--kh),.15),rgba(var(--kh),0) 72%) !important}
html body.pc .pc-kpis.pc-kpis-art .pc-kpi::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--kh),.95),rgba(var(--kh),.25) 55%,rgba(var(--kh),0));opacity:.6;transition:opacity .2s ease}
html body.pc .pc-kpis.pc-kpis-art .pc-kpi:hover{
  background:radial-gradient(120px 90px at calc(100% - 34px) 50%,rgba(var(--kh),.15),rgba(var(--kh),0) 72%),rgba(var(--kh),.05) !important}
html body.pc .pc-kpis.pc-kpis-art .pc-kpi:hover::before{opacity:1}
html.pl-light body.pc .pc-kpis.pc-kpis-art .pc-kpi{
  background:radial-gradient(120px 90px at calc(100% - 34px) 50%,rgba(var(--kh),.12),rgba(var(--kh),0) 72%) !important}
@media(max-width:760px){
  html body.pc .pc-kpis.pc-kpis-art .pc-kpi{
    background:radial-gradient(80px 70px at calc(100% - 25px) 24px,rgba(var(--kh),.15),rgba(var(--kh),0) 72%) !important}
}
/* no cut values: "€134,50 EUR" was ellipsised at 1440 - the value scales a little with the width instead */
html body.pc .pc-kpis.pc-kpis-art .pc-kpi .v{font-size:clamp(17px,1.28vw,21px);letter-spacing:-.02em;text-overflow:clip}