/* BLAQPLOYMENT live command-centre preview. Scoped so existing product pages stay unchanged. */
.cc-main{
  --cc-bg:#050b16;--cc-panel:rgba(8,20,38,.76);--cc-panel-strong:#09182b;
  --cc-line:rgba(128,179,255,.16);--cc-text:#edf6ff;--cc-muted:#8298b7;
  --cc-blue:#31a7ff;--cc-cyan:#43e4ff;--cc-violet:#8868ff;--cc-green:#45e7aa;
  --cc-amber:#f4bd63;--cc-red:#ff6f91;
  width:calc(100% - 238px);max-width:none;min-height:100vh;padding:24px clamp(18px,2.2vw,36px) 64px;
  color:var(--cc-text);background:
    radial-gradient(circle at 55% -10%,rgba(31,113,255,.22),transparent 31%),
    radial-gradient(circle at 94% 34%,rgba(110,66,255,.13),transparent 26%),
    linear-gradient(180deg,#06101f 0,#040a13 62%,#050912 100%);
  overflow:hidden;
}
.cc-main:before{content:"";position:fixed;inset:0 0 0 238px;pointer-events:none;opacity:.18;
  background-image:linear-gradient(rgba(100,163,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(100,163,255,.05) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 72%)}
.cc-shell{position:relative;z-index:1;max-width:1540px;margin:0 auto}
.cc-shell *{box-sizing:border-box}
.cc-kicker{display:block;color:#6e9edf;font-size:10px;line-height:1.2;font-weight:850;letter-spacing:.18em;text-transform:uppercase}
.cc-hero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:18px 4px 24px}
.cc-hero h1{margin:8px 0 8px;color:white;font-size:clamp(30px,4vw,57px);line-height:.98;letter-spacing:-.055em}
.cc-hero p{max-width:780px;margin:0;color:#9aacc5;font-size:14px;line-height:1.65}
.cc-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cc-btn{display:inline-flex;align-items:center;gap:14px;min-height:42px;padding:0 15px;border:1px solid var(--cc-line);border-radius:10px;
  color:#cfe2fa;text-decoration:none;font-size:12px;font-weight:760;background:rgba(10,28,52,.58);transition:.2s ease}
.cc-btn:hover{border-color:rgba(87,175,255,.55);transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,80,190,.16)}
.cc-btn.primary{color:#06101d;background:linear-gradient(135deg,#74d7ff,#6088ff);border-color:transparent}
.cc-live-badge{align-self:flex-start;display:flex;align-items:center;gap:8px;margin-top:6px;padding:8px 11px;border:1px solid rgba(69,231,170,.24);border-radius:999px;background:rgba(34,130,96,.1);color:#7df1c4;font-size:10px;font-weight:850;letter-spacing:.12em}
.cc-live-badge i{width:7px;height:7px;border-radius:50%;background:var(--cc-green);box-shadow:0 0 0 5px rgba(69,231,170,.09),0 0 16px var(--cc-green);animation:cc-pulse 2s infinite}
.cc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:11px}
.cc-stat{position:relative;min-height:112px;padding:17px 18px;border:1px solid var(--cc-line);border-radius:14px;background:linear-gradient(145deg,rgba(15,34,61,.84),rgba(7,17,31,.76));overflow:hidden;transition:.2s ease}
.cc-stat:after{content:"";position:absolute;right:-22px;bottom:-36px;width:104px;height:104px;border-radius:50%;filter:blur(2px);opacity:.24;background:var(--cc-blue)}
.cc-stat.violet:after{background:var(--cc-violet)}.cc-stat.cyan:after{background:var(--cc-cyan)}.cc-stat.green:after{background:var(--cc-green)}
.cc-stat:hover{transform:translateY(-2px);border-color:rgba(104,178,255,.38)}
.cc-stat-label{display:block;color:#768fab;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.cc-stat strong{position:relative;z-index:1;display:block;margin-top:5px;color:#fff;font-size:28px;line-height:1.2;letter-spacing:-.04em}
.cc-stat small{position:relative;z-index:1;color:#7387a2;font-size:10px}
.cc-upper-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(285px,.65fr);gap:11px;margin-bottom:11px}
.cc-visual-panel,.cc-panel{position:relative;border:1px solid var(--cc-line);border-radius:16px;background:linear-gradient(145deg,rgba(9,24,44,.85),rgba(5,14,27,.82));box-shadow:0 18px 50px rgba(0,0,0,.18);overflow:hidden}
.cc-visual-panel{height:430px;background:
  radial-gradient(circle at 50% 42%,rgba(28,115,255,.13),transparent 37%),
  linear-gradient(160deg,rgba(8,25,49,.92),rgba(4,11,23,.9))}
.cc-globe{position:absolute;inset:0;width:100%;height:100%;display:block}
.cc-visual-panel:after{content:"";position:absolute;inset:auto 6% 0;height:1px;background:linear-gradient(90deg,transparent,rgba(65,165,255,.55),transparent)}
.cc-visual-copy{position:absolute;left:19px;bottom:17px;z-index:3;display:grid;gap:3px;padding:10px 12px;border:1px solid rgba(116,181,255,.15);border-radius:10px;background:rgba(5,14,28,.66);backdrop-filter:blur(12px)}
.cc-visual-copy strong{font-size:13px}.cc-visual-copy small{color:#7f95af;font-size:10px}
.cc-orbit{position:absolute;z-index:2;border:1px solid rgba(58,157,255,.17);border-radius:50%;pointer-events:none;animation:cc-orbit 14s linear infinite}
.cc-orbit-a{width:64%;height:27%;left:18%;top:39%;transform:rotate(-8deg)}.cc-orbit-b{width:52%;height:52%;left:24%;top:23%;transform:rotate(64deg);animation-duration:19s;animation-direction:reverse}
.cc-panel{padding:18px}
.cc-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}
.cc-panel h2{margin:4px 0 0;color:#eff7ff;font-size:15px;letter-spacing:-.02em}
.cc-pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:4px 8px;border:1px solid rgba(133,167,207,.14);border-radius:999px;background:rgba(126,156,194,.06);color:#899db8;font-size:9px;font-weight:800;text-transform:capitalize}
.cc-pill i,.cc-status-dot{width:6px;height:6px;border-radius:50%;background:#7a91af;box-shadow:0 0 10px currentColor}
.cc-pill.ok{color:#65eab9;background:rgba(57,209,153,.08);border-color:rgba(57,209,153,.16)}.cc-pill.ok i,.cc-status-dot.ok{background:var(--cc-green)}
.cc-pill.warn{color:#f3c36b;background:rgba(244,189,99,.08);border-color:rgba(244,189,99,.16)}.cc-pill.warn i,.cc-status-dot.warn{background:var(--cc-amber)}
.cc-pill.bad{color:#ff819c;background:rgba(255,111,145,.08);border-color:rgba(255,111,145,.16)}.cc-pill.bad i,.cc-status-dot.bad{background:var(--cc-red)}
.cc-machine-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:11px 0;border-top:1px solid rgba(122,166,218,.09)}
.cc-machine-row:first-of-type{border-top:0}.cc-machine-name{display:grid;min-width:0}.cc-machine-name strong{overflow:hidden;text-overflow:ellipsis;color:#dcecff;font-size:11px;white-space:nowrap}.cc-machine-name small{color:#607896;font-size:9px}.cc-latency{color:#65809e;font-size:9px;white-space:nowrap}
.cc-text-link{display:inline-flex;align-items:center;gap:6px;color:#6ebaff;text-decoration:none;font-size:10px;font-weight:750}.cc-text-link:hover{color:#9ed0ff}
.cc-machines>.cc-text-link{margin-top:11px}
.cc-empty{padding:21px 8px;text-align:center;color:#6f85a0;font-size:10px}.cc-empty.good{color:#62cfa9}
.cc-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:11px}
.cc-action{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:76px;padding:13px 14px;border:1px solid var(--cc-line);border-radius:13px;background:rgba(9,22,40,.78);color:inherit;text-decoration:none;transition:.2s ease}
.cc-action:hover{transform:translateY(-2px);border-color:rgba(108,177,255,.38);box-shadow:0 13px 34px rgba(0,0,0,.18)}
.cc-action>b{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:rgba(110,89,255,.12);color:#9d8aff;font-size:18px}
.cc-action.blue>b{background:rgba(49,167,255,.1);color:#5bc1ff}.cc-action.green>b{background:rgba(69,231,170,.09);color:#60eeb8}.cc-action.amber>b{background:rgba(244,189,99,.09);color:#f4c876}
.cc-action span{display:grid}.cc-action strong{font-size:11px}.cc-action small{color:#6f829d;font-size:9px}.cc-action>i{font-style:normal;color:#6683a2}
.cc-lower-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:11px;align-items:stretch}
.cc-projects{grid-row:span 2}.cc-usage{grid-column:span 2}
.cc-project-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid rgba(122,166,218,.09);color:inherit;text-decoration:none}
.cc-project-row:hover .cc-project-name strong{color:#79c5ff}.cc-project-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:rgba(76,135,220,.12);color:#8cbcff;font-size:10px;font-weight:900}
.cc-project-icon.ok{background:rgba(69,231,170,.11);color:#60ebb7}.cc-project-icon.bad{background:rgba(255,111,145,.11);color:#ff819d}
.cc-project-name{display:grid;min-width:0}.cc-project-name strong{overflow:hidden;text-overflow:ellipsis;color:#dce9f7;font-size:11px;white-space:nowrap;transition:.2s}.cc-project-name small{color:#637994;font-size:9px}
.cc-arrow{color:#587594;font-size:12px}
.cc-health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.cc-health-item{display:grid;justify-items:center;gap:5px;text-align:center}.cc-health-item>strong{font-size:9px}.cc-health-item>small{max-width:92px;color:#617994;font-size:8px;line-height:1.35}
.cc-health-ring{position:relative;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#55e9b4 0 94%,rgba(94,129,166,.16) 94%)}
.cc-health-ring:before{content:"";position:absolute;inset:5px;border-radius:50%;background:#08182a}.cc-health-ring b{position:relative;z-index:2;color:#dffbef;font-size:10px}.cc-health-ring.warn{background:conic-gradient(#f1bd65 0 66%,rgba(94,129,166,.16) 66%)}
.cc-event-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:start;padding:10px 0;border-top:1px solid rgba(122,166,218,.09)}
.cc-event-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:rgba(86,111,145,.11);color:#7b92af;font-size:10px;font-weight:900}.cc-event-icon.warn{background:rgba(244,189,99,.1);color:#f4c36e}
.cc-event-copy{display:grid;min-width:0}.cc-event-copy strong{overflow:hidden;text-overflow:ellipsis;color:#d7e7f8;font-size:10px;white-space:nowrap}.cc-event-copy small{overflow:hidden;text-overflow:ellipsis;color:#617792;font-size:8px;white-space:nowrap}.cc-event-row time{color:#58718f;font-size:8px;white-space:nowrap}
.cc-gauge{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:8px 11px;align-items:center;margin:10px 0}.cc-gauge-head{display:grid}.cc-gauge-head span{color:#6d83a0;font-size:9px}.cc-gauge-head strong{font-size:11px}.cc-gauge small{color:#5f7692;font-size:8px;text-align:right}
.cc-gauge-track{width:100%;height:7px;border:0;border-radius:99px;background:rgba(118,153,194,.1);overflow:hidden;appearance:none}
.cc-gauge-track::-webkit-progress-bar{background:rgba(118,153,194,.1);border-radius:99px}
.cc-gauge-track::-webkit-progress-value{background:linear-gradient(90deg,#665cff,#3fc9ff);border-radius:99px;box-shadow:0 0 14px rgba(69,176,255,.45)}
.cc-gauge-track::-moz-progress-bar{background:linear-gradient(90deg,#665cff,#3fc9ff);border-radius:99px;box-shadow:0 0 14px rgba(69,176,255,.45)}
.cc-wave{height:72px;display:flex;align-items:flex-end;gap:3px;margin-top:13px;padding:8px;border:1px solid rgba(122,166,218,.08);border-radius:9px;background:linear-gradient(180deg,rgba(44,101,178,.05),transparent)}
.cc-wave i{flex:1;min-height:3px;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,rgba(65,197,255,.92),rgba(103,75,255,.16));animation:cc-bars 3.4s ease-in-out infinite alternate}
.cc-wave-0{height:28%}.cc-wave-1{height:52%}.cc-wave-2{height:38%}.cc-wave-3{height:74%}.cc-wave-4{height:61%}.cc-wave-5{height:84%}.cc-wave-6{height:46%}
.cc-wave i:nth-child(3n){animation-delay:-1.3s}.cc-wave i:nth-child(4n){animation-delay:-2.1s}
@keyframes cc-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.62;transform:scale(.82)}}
@keyframes cc-orbit{to{transform:rotate(352deg)}}
@keyframes cc-bars{from{transform:scaleY(.62);opacity:.62}to{transform:scaleY(1);opacity:1}}
@media(max-width:1180px){
  .cc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-lower-grid{grid-template-columns:1fr 1fr}.cc-projects{grid-row:auto}.cc-usage{grid-column:span 2}
}
@media(max-width:900px){
  .cc-main{width:100%;margin:0;padding:20px 18px 54px}.cc-main:before{inset:58px 0 0}
  .cc-upper-grid{grid-template-columns:1fr}.cc-visual-panel{height:390px}
}
@media(max-width:640px){
  .cc-main{padding:16px 12px 48px}.cc-hero{display:block}.cc-live-badge{position:absolute;right:2px;top:4px}
  .cc-hero h1{max-width:84%;font-size:34px}.cc-hero p{font-size:12px}
  .cc-stats{grid-template-columns:1fr 1fr;gap:7px}.cc-stat{min-height:94px;padding:13px}.cc-stat strong{font-size:23px}
  .cc-upper-grid{gap:8px}.cc-visual-panel{height:330px}.cc-action-grid{grid-template-columns:1fr;gap:7px}.cc-action{min-height:65px}
  .cc-lower-grid{display:flex;flex-direction:column;gap:8px}.cc-usage{order:4}
  .cc-health-grid{grid-template-columns:repeat(2,1fr);gap:12px}.cc-gauge{grid-template-columns:76px minmax(0,1fr);}.cc-gauge small{display:none}
  .cc-machine-row{grid-template-columns:10px minmax(0,1fr) auto}.cc-machine-row .cc-latency{display:none}
}
@media(max-width:390px){
  .cc-stats{grid-template-columns:1fr}.cc-hero h1{font-size:31px}.cc-visual-panel{height:290px}
  .cc-project-row{grid-template-columns:auto minmax(0,1fr) auto}.cc-project-row .cc-arrow{display:none}
}
@media(prefers-reduced-motion:reduce){
  .cc-live-badge i,.cc-orbit,.cc-wave i{animation:none!important}.cc-btn,.cc-stat,.cc-action{transition:none!important}
}

/* Accessibility/readability certification adjustments. */
.cc-kicker,.cc-live-badge,.cc-stat-label,.cc-stat small,.cc-visual-copy small,
.cc-pill,.cc-machine-name small,.cc-latency,.cc-text-link,.cc-empty,
.cc-action small,.cc-project-name small,.cc-health-item>strong,.cc-health-item>small,
.cc-event-copy strong,.cc-event-copy small,.cc-event-row time,.cc-gauge-head span,.cc-gauge small{
  font-size:11px;
}
.cc-machine-name strong,.cc-action strong,.cc-project-name strong,.cc-gauge-head strong{font-size:12px}
.cc-stat-label,.cc-stat small,.cc-visual-copy small,.cc-machine-name small,.cc-latency,.cc-empty,
.cc-action small,.cc-project-name small,.cc-health-item>small,.cc-event-copy small,.cc-event-row time,
.cc-gauge-head span,.cc-gauge small{color:#93a9c5}
.cc-health-item>strong,.cc-event-copy strong{color:#dcecff}
.cc-pill{color:#a8bad0}
.cc-text-link{font-size:12px}
@media(max-width:640px){
  .cc-hero p{font-size:13px}
  .cc-kicker,.cc-live-badge,.cc-stat-label,.cc-stat small,.cc-pill,
  .cc-machine-name small,.cc-latency,.cc-action small,.cc-project-name small,
  .cc-health-item>strong,.cc-health-item>small,.cc-event-copy strong,.cc-event-copy small,
  .cc-event-row time,.cc-gauge-head span,.cc-gauge small{font-size:11px}
}

/* Command actions glow on hover without moving under the pointer. */
.cc-btn:hover,.cc-action:hover{transform:none}