/* Bloom / services. Adapted from the service-specific visual concepts supplied by the user.
   Decorative illustrations only: labels/statuses represent a demo, not live data.
   Animation runs only while the matching illustration is on screen. */

/* Shared visual containers for illustrative dashboard, API and Linux operations. */
.rd-page .detail-graphic.svc-graphic {
  min-width:0;min-height:336px;isolation:isolate;
  background:radial-gradient(circle at 55% 40%,#dce9d7,#eff2e6 75%);
  border-color:#bfd0bd;
  padding:22px 16px 37px;
}
.rd-page .detail-graphic.svc-graphic::before {pointer-events:none}
.rd-page .detail-graphic.svc-graphic > small {
  z-index:3;bottom:12px;left:15px;color:#536e5a;
}
.svc-dashboard,.svc-api,.svc-linux {position:relative;z-index:1;min-width:0;width:100%}

/* (1) Software: simplified example admin screen, animated scanner and workflow. */
.svc-dashboard {
  max-width:420px;min-height:264px;overflow:hidden;
  border:1px solid #aac7b4;border-radius:15px;
  background:#f9faf0;box-shadow:0 17px 35px #365b4530;
  display:flex;flex-direction:column;color:#264432;
}
.svc-dash-top {
  height:35px;flex:none;display:flex;align-items:center;gap:9px;
  padding:0 11px;border-bottom:1px solid #cedbce;
  background:#edf3e8;font:800 9px/1 'DM Sans',Arial,sans-serif;letter-spacing:.05em;
}
.svc-dash-dots{display:flex;gap:4px;margin-right:auto}
.svc-dash-dots i{display:block;width:7px;height:7px;background:#c8866f;border-radius:50%}
.svc-dash-dots i:nth-child(2){background:#d2ad74}
.svc-dash-dots i:nth-child(3){background:#84ad89}
.svc-dash-indicator{display:flex;align-items:center;gap:5px;margin-left:auto;font-size:8px;color:#568260}
.svc-dash-indicator i{display:block;width:7px;height:7px;background:#6b9d76;border-radius:50%}
.svc-dash-body{display:grid;grid-template-columns:44px minmax(0,1fr);flex:1;min-height:0}
.svc-dash-nav {
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:15px;padding-top:17px;background:#dfe9dc;border-right:1px solid #c8d9c8;
}
.svc-dash-nav > i {
  z-index:1;width:20px;height:20px;border-radius:6px;background:#a9c4ac;
  display:block;position:relative;
}
.svc-dash-nav > i::after{
  content:"";position:absolute;left:6px;top:6px;width:8px;height:8px;
  border:1px solid #eff9ed;border-radius:2px;
}
.svc-dash-nav > i:nth-child(2)::after{border-radius:50%}
.svc-dash-cursor{
  position:absolute;top:13px;left:8px;width:28px;height:28px;
  border:1px solid #ac6a50;border-radius:8px;background:#d19c7d36;
}
.svc-dash-content{min-width:0;display:flex;flex-direction:column;gap:11px;padding:14px 11px}
.svc-dash-summary{display:grid;grid-template-columns:minmax(70px,39%) minmax(0,1fr);gap:8px;min-height:105px}
.svc-dash-kpi,.svc-dash-chart,.svc-dash-user,.svc-dash-toast {
  border:1px solid #d2e0d2;border-radius:10px;background:#edf4eb;
}
.svc-dash-kpi{padding:10px 7px;display:flex;flex-direction:column;gap:7px}
.svc-dash-kpi > span,.svc-dash-chart > span{
  font:800 8px/1.3 'DM Sans',Arial,sans-serif;letter-spacing:.06em;color:#688572;
}
.svc-dash-kpi strong {font:800 24px/1 'DM Sans',Arial,sans-serif;color:#bd8268}
.rd-page .svc-dashboard small {position:static;left:auto;bottom:auto;display:block;color:#718978}
.svc-dash-kpi small{margin-top:auto;font:700 7px/1.2 'DM Sans',Arial,sans-serif;color:#69836d}
.svc-dash-chart{position:relative;overflow:hidden;padding:9px 8px;display:flex;flex-direction:column}
.svc-dash-bars{flex:1;display:flex;align-items:flex-end;gap:5px;padding-top:12px}
.svc-dash-bars i{
  flex:1;min-width:0;background:linear-gradient(0deg,#67957e,#c19a76);
  border-radius:4px 4px 0 0;transform-origin:bottom;
}
.svc-dash-bars i:nth-child(1){height:44%;animation-delay:-.2s}
.svc-dash-bars i:nth-child(2){height:81%;animation-delay:-.7s}
.svc-dash-bars i:nth-child(3){height:58%;animation-delay:-1.3s}
.svc-dash-bars i:nth-child(4){height:93%;animation-delay:-.4s}
.svc-dash-bars i:nth-child(5){height:66%;animation-delay:-1.1s}
.svc-dash-bars i:nth-child(6){height:72%;animation-delay:-.8s}
.svc-dash-scan {
  position:absolute;left:0;top:0;width:2px;height:100%;background:#bf816a;
  box-shadow:0 0 9px #bc806ba3;opacity:0;
}
.svc-dash-user{display:flex;align-items:center;gap:7px;padding:8px 9px;min-height:47px}
.svc-user-avatar{
  display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;
  background:#6b9579;color:white;font:800 9px 'DM Sans',Arial,sans-serif;
}
.svc-dash-user > span:nth-child(2){font:800 10px/1.1 'DM Sans',Arial,sans-serif}
.svc-dash-user small{display:block;font:600 9px/1.4 'DM Sans',Arial,sans-serif;color:#718978;margin-top:3px}
.svc-user-toggle{
  display:block;margin-left:auto;flex:none;width:30px;height:16px;
  background:#a3b5a5;border-radius:16px;position:relative;
}
.svc-user-toggle::after{
  content:"";position:absolute;left:3px;top:3px;width:10px;height:10px;
  border-radius:50%;background:#fffdf7;
}
.svc-dash-toast {
  display:flex;align-items:center;gap:7px;padding:6px 9px;
  margin-top:auto;font:800 8px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:.02em;
}
.svc-dash-toast > i{
  display:block;min-width:45px;height:5px;flex:1;border-radius:8px;
  overflow:hidden;background:#d1e0d2;
}
.svc-dash-toast b{display:block;width:35%;height:100%;border-radius:8px;background:#b9866a}
.svc-dashboard.is-active .svc-dash-cursor {animation:svc-nav 6s ease-in-out infinite}
.svc-dashboard.is-active .svc-dash-bars i {animation:svc-bars 2.7s ease-in-out infinite alternate}
.svc-dashboard.is-active .svc-dash-scan {animation:svc-scan 4s ease-in-out infinite}
.svc-dashboard.is-active .svc-user-toggle::after {animation:svc-toggle 5s ease-in-out infinite}
.svc-dashboard.is-active .svc-dash-toast b {animation:svc-progress 5s linear infinite}
.svc-dashboard.is-active .svc-dash-indicator i {animation:svc-blink 1.6s ease-in-out infinite}
@keyframes svc-nav {0%,25%,100%{top:13px}37%,57%{top:48px}72%,92%{top:83px}}
@keyframes svc-bars {to{transform:scaleY(.55)}}
@keyframes svc-scan {0%{left:0;opacity:0}12%,86%{opacity:.9}100%{left:98%;opacity:0}}
@keyframes svc-toggle {0%,38%,100%{transform:translateX(0)}48%,89%{transform:translateX(14px)}}
@keyframes svc-progress {0%,20%{width:7%}83%,100%{width:100%}}
@keyframes svc-blink {50%{opacity:.25}}

/* (2) API: central router, four service endpoints and packets on the wires. */
.svc-api {max-width:360px;width:100%;height:auto;aspect-ratio:320/260}
.svc-api-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.svc-wire {fill:none;stroke:#8aaca1;stroke-width:1.8;stroke-dasharray:6 7}
.svc-wire-pulse {fill:none;stroke:#c47c5f;stroke-width:3;stroke-dasharray:14 300;opacity:.65}
.svc-api-hub,.svc-api-node {position:absolute;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px #41675425}
.svc-api-hub {
  z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  width:82px;height:82px;border:2px solid #e5f1df;border-radius:22px;
  background:linear-gradient(145deg,#608a6f,#345f49);
  color:#fffdf3;flex-direction:column;gap:3px;
}
.svc-api-hub span {font:700 9px/1 'DM Sans',Arial,sans-serif;letter-spacing:.08em}
.svc-api-hub strong{font:800 21px/1 'DM Sans',Arial,sans-serif;letter-spacing:.03em}
.svc-api-node {
  min-width:81px;min-height:32px;gap:6px;padding:5px 7px;
  background:#f9faf0;border:1px solid #9fbba8;border-radius:9px;
  color:#46634e;font:800 9px/1.2 'DM Sans',Arial,sans-serif;
  transform:translate(-50%,-50%);z-index:1;white-space:nowrap;
}
.svc-api-node i {flex:none;width:7px;height:7px;background:#be8267;border-radius:50%}
.svc-node-webhook {left:17.8%;top:19.2%}
.svc-node-mail {left:82.2%;top:19.2%}
.svc-node-worker {left:17.8%;top:81.5%}
.svc-node-storage {left:82.2%;top:81.5%}
.svc-api.is-active .svc-wire-pulse {animation:svc-packets 3.2s linear infinite}
.svc-api.is-active .svc-api-hub {animation:svc-hub-pulse 3s ease-in-out infinite}
.svc-api.is-active .svc-api-node i {animation:svc-blink 1.8s ease-in-out infinite}
@keyframes svc-packets {to{stroke-dashoffset:-314}}
@keyframes svc-hub-pulse {
  0%,100%{box-shadow:0 10px 20px #41675425}
  50%{box-shadow:0 10px 22px #41675440,0 0 18px #c48f7440}
}

/* (3) Linux: illustrative terminal + rack of application services. */
.svc-linux {max-width:390px;display:grid;gap:15px}
.svc-linux-terminal{
  min-width:0;border-radius:12px;overflow:hidden;
  border:1px solid #739382;background:#20392f;color:#f2f8ec;
  box-shadow:0 11px 20px #355b4433;
}
.svc-linux-termbar {
  min-height:30px;display:flex;align-items:center;gap:10px;
  padding:0 12px;border-bottom:1px solid #6c8d792b;
  font:800 9px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.08em;
}
.svc-linux-termbar > span{display:flex;gap:4px}
.svc-linux-termbar i{display:block;width:6px;height:6px;border-radius:50%;background:#c18c70}
.svc-linux-termbar i:nth-child(2){background:#d9b07d}
.svc-linux-termbar i:nth-child(3){background:#8fba94}
.svc-linux-command {min-width:0;padding:12px 10px 7px;font:700 11px/1.4 monospace;white-space:nowrap;color:#e4ece3}
.svc-linux-command > span:first-child{color:#e9a685;margin-right:5px}
.svc-linux-caret{display:inline-block;width:6px;height:12px;margin-left:3px;vertical-align:middle;background:#c3e0bf}
.svc-linux-result{padding:0 10px 12px;color:#94bb9b;font:700 9px/1.4 monospace;letter-spacing:.02em}
.svc-linux-stack{
  display:grid;gap:9px;padding:13px;
  background:#e0eade;border:1px solid #a2bba6;border-radius:12px;
}
.svc-linux-unit{
  display:flex;align-items:center;gap:8px;min-height:37px;
  padding:7px 10px;border:1px solid #b2c9b4;border-radius:9px;
  background:#fafbf1;color:#40634a;box-shadow:0 2px 5px #547b6020;
}
.svc-linux-unit-led{
  width:8px;height:8px;flex:none;background:#6fa278;border-radius:50%;
}
.svc-linux-unit strong{font:800 11px/1.3 'DM Sans',Arial,sans-serif}
.svc-linux-unit > span:nth-of-type(2){margin-left:auto;font:700 8px/1 'DM Sans',Arial,sans-serif;letter-spacing:.04em;color:#729076}
.svc-linux-unit > i {
  display:block;flex:none;width:16px;height:7px;margin-left:2px;
  border:1px solid #89ae94;border-radius:4px;
  background:linear-gradient(90deg,#77a282 50%,transparent 50%);
}
.svc-linux.is-active .svc-linux-unit-led{animation:svc-blink 1.5s ease-in-out infinite}
.svc-linux.is-active .svc-linux-unit:nth-child(2) .svc-linux-unit-led{animation-delay:-.5s}
.svc-linux.is-active .svc-linux-unit:nth-child(3) .svc-linux-unit-led{animation-delay:-1s}
.svc-linux.is-active .svc-linux-caret{animation:svc-blink 1s steps(2,end) infinite}
.svc-linux.is-active .svc-linux-unit > i{animation:svc-rack 2.5s ease-in-out infinite}
@keyframes svc-rack {50%{opacity:.35}}

/* Phones / tablets: animations stay inside their original content columns. */
@media(max-width:650px) {
  .rd-page .detail-graphic.svc-graphic{min-height:300px;padding:18px 12px 34px}
  .svc-dashboard{min-height:246px}
  .svc-linux{gap:10px}
}
@media(max-width:365px) {
  .svc-dash-body{grid-template-columns:33px minmax(0,1fr)}
  .svc-dash-nav > i {width:17px;height:17px}
  .svc-dash-cursor{left:4px;width:25px;height:25px}
  .svc-dash-summary{grid-template-columns:minmax(67px,38%) minmax(0,1fr)}
  .svc-dash-content{padding:9px 6px;gap:8px}
  .svc-dashboard{min-height:235px}
  .svc-dash-chart{padding:7px 4px}
  .svc-dash-kpi strong{font-size:20px}
  .svc-api-node {min-width:65px;padding:4px 5px;font-size:8px}
  .svc-api-hub {width:68px;height:68px}
  .svc-linux-unit{padding-inline:7px;gap:5px}
  .svc-linux-command {font-size:10px}
}
@media(prefers-reduced-motion:reduce) {
  .svc-dashboard *, .svc-api *, .svc-linux * {
    animation:none!important;transition:none!important;
  }
}