/* ============================================================
   DDSOC design system — lifted VERBATIM from dashboard.html (<style> block).
   Do not edit here to restyle a page; add page rules to portal.css.
   Re-sync from dashboard.html if the design system of record changes.
============================================================ */
/* ============================================================
   1. DESIGN TOKENS
============================================================ */
:root{
  --bg:            #05070A;
  --bg-raised:     #0A0E14;
  --card:          #11161C;
  --card-hover:    #151B23;
  --accent:        #00FF88;
  --accent-dim:    rgba(0,255,136,.35);
  --accent-faint:  rgba(0,255,136,.08);
  --accent2:       #00D4FF;
  --accent2-dim:   rgba(0,212,255,.35);
  --accent2-faint: rgba(0,212,255,.08);
  --warn:          #FFB020;
  --warn-dim:      rgba(255,176,32,.35);
  --crit:          #FF3B4E;
  --crit-dim:      rgba(255,59,78,.35);
  --text:          #FFFFFF;
  --text-soft:     #C7D0DA;
  --muted:         #6C7A89;
  --muted-2:       #414D5B;
  --line:          rgba(255,255,255,.06);
  --line-strong:   rgba(255,255,255,.12);
  --glow:          0 0 24px rgba(0,255,136,.28);
  --glow-soft:     0 0 12px rgba(0,255,136,.18);
  --glass:         rgba(17,22,28,.72);
  --radius:        14px;
  --radius-sm:     10px;
  --font-display:  'Orbitron', sans-serif;
  --font-body:     'Roboto', sans-serif;
  --header-h:      88px;
  --easing:        cubic-bezier(.22,.9,.28,1);
}

/* ============================================================
   2. RESET / BASE
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
::selection{background:var(--accent-dim);color:#fff;}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#1C242E;border-radius:6px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#28323F;}

/* ============================================================
   3. ANIMATED BACKGROUND LAYERS
============================================================ */
.bg-stack{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}

/* 3a. Hex grid — pure CSS (SVG data-URI pattern), two layers for parallax */
.bg-hex{
  position:absolute;inset:-10%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16zM28 60.5 52 74.5v28' fill='none' stroke='%2300FF88' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 97px;
  will-change:transform;
  animation:hexDrift 90s linear infinite;
}
.bg-hex.layer2{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' viewBox='0 0 112 194'%3E%3Cpath d='M56 4 104 32v56L56 116 8 88V32z' fill='none' stroke='%2300D4FF' stroke-opacity='0.035' stroke-width='1'/%3E%3C/svg%3E");
  background-size:112px 194px;
  animation:hexDrift 140s linear infinite reverse;
}
@keyframes hexDrift{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-56px,-97px,0);}
}

/* 3b. Moving radial gradients */
.bg-orb{
  position:absolute;width:60vmax;height:60vmax;border-radius:50%;
  filter:blur(40px);opacity:.5;will-change:transform;
}
.bg-orb.g{
  background:radial-gradient(circle,rgba(0,255,136,.055) 0%,transparent 62%);
  top:-20vmax;left:-15vmax;
  animation:orbA 46s ease-in-out infinite alternate;
}
.bg-orb.c{
  background:radial-gradient(circle,rgba(0,212,255,.05) 0%,transparent 62%);
  bottom:-25vmax;right:-15vmax;
  animation:orbB 58s ease-in-out infinite alternate;
}
@keyframes orbA{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(18vw,10vh,0) scale(1.15);}
  100%{transform:translate3d(6vw,26vh,0) scale(.95);}
}
@keyframes orbB{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(-16vw,-12vh,0) scale(1.1);}
  100%{transform:translate3d(-4vw,-24vh,0) scale(1.05);}
}

/* 3c. Scanline */
.bg-scanline{
  position:absolute;left:0;right:0;top:-6%;height:22vh;
  background:linear-gradient(to bottom,transparent,rgba(0,255,136,.028) 45%,rgba(0,212,255,.02) 55%,transparent);
  will-change:transform;
  animation:scan 11s linear infinite;
}
@keyframes scan{
  from{transform:translate3d(0,-30vh,0);}
  to{transform:translate3d(0,130vh,0);}
}

/* 3d. Noise texture — SVG feTurbulence data-URI, very faint */
.bg-noise{
  position:absolute;inset:0;opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 3e. Mouse glow — JS drives --mx / --my, transform only */
.bg-cursor-glow{
  position:absolute;top:0;left:0;width:640px;height:640px;
  margin:-320px 0 0 -320px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,136,.05) 0%,rgba(0,212,255,.03) 34%,transparent 68%);
  transform:translate3d(var(--mx,50vw),var(--my,40vh),0);
  transition:transform .18s var(--easing);
  will-change:transform;
}

/* Vignette to keep edges quiet */
.bg-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(0,0,0,.5) 100%);
}

/* ============================================================
   4. LOADING SCREEN
============================================================ */
#loader{
  position:fixed;inset:0;z-index:1000;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  transition:opacity .8s ease,visibility .8s ease;
}
#loader.done{opacity:0;visibility:hidden;pointer-events:none;}

.loader-logo{position:relative;width:150px;height:150px;display:grid;place-items:center;}
.loader-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--accent);
  border-right-color:var(--accent-dim);
  animation:spin 1.6s linear infinite;
}
.loader-ring.r2{
  inset:14px;border-top-color:var(--accent2);border-right-color:var(--accent2-dim);
  animation:spin 2.3s linear infinite reverse;
}
.loader-ring.r3{
  inset:28px;border-top-color:rgba(0,255,136,.5);border-right-color:transparent;
  animation:spin 1.1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.loader-mark{
  font-family:var(--font-display);font-weight:900;font-size:30px;letter-spacing:2px;
  color:var(--accent);text-shadow:var(--glow);
  animation:markPulse 1.8s ease-in-out infinite;
}
@keyframes markPulse{
  0%,100%{opacity:.85;transform:scale(1);}
  50%{opacity:1;transform:scale(1.05);}
}

.loader-title{
  font-family:var(--font-display);font-size:14px;font-weight:600;
  letter-spacing:8px;color:var(--text-soft);text-transform:uppercase;
}

.loader-bar{
  width:min(360px,72vw);height:4px;border-radius:3px;overflow:hidden;
  background:rgba(255,255,255,.06);position:relative;
}
.loader-bar-fill{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:var(--glow-soft);
  transition:transform .45s var(--easing);
}
.loader-msg{
  font-family:var(--font-body);font-size:13px;color:var(--muted);
  letter-spacing:1.5px;text-transform:uppercase;min-height:20px;
  animation:fadeIn .4s ease;
}

/* ============================================================
   5. APP SHELL
============================================================ */
#app{
  position:relative;z-index:1;
  opacity:0;transform:translateY(12px);
  transition:opacity .9s ease .1s,transform .9s var(--easing) .1s;
}
#app.ready{opacity:1;transform:none;}

.shell{
  max-width:2200px;margin:0 auto;
  padding:0 clamp(16px,2.4vw,44px) 60px;
}

/* ============================================================
   6. HEADER
============================================================ */
header.top{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  background:linear-gradient(to bottom,rgba(5,7,10,.92),rgba(5,7,10,.72));
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:2200px;margin:0 auto;
  padding:16px clamp(16px,2.4vw,44px);
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:16px;min-width:0;}
.brand-mark{
  width:52px;height:52px;flex:none;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent-faint),var(--accent2-faint));
  border:1px solid rgba(0,255,136,.25);
  box-shadow:var(--glow-soft),inset 0 0 18px rgba(0,255,136,.06);
  animation:floatY 6s ease-in-out infinite;
}
.brand-mark svg{width:28px;height:28px;stroke:var(--accent);filter:drop-shadow(0 0 6px rgba(0,255,136,.6));}
@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
.brand-text h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(22px,2.2vw,32px);letter-spacing:6px;line-height:1;
  background:linear-gradient(90deg,#fff 0%,var(--accent) 55%,var(--accent2) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:titleSheen 7s ease-in-out infinite;
}
@keyframes titleSheen{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
.brand-text p{
  font-size:11px;letter-spacing:3.4px;text-transform:uppercase;
  color:var(--muted);margin-top:6px;font-weight:500;
}

.header-status{
  margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.6vw,30px);flex-wrap:wrap;
}
.hs-block{text-align:right;}
.hs-block .k{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);}
.hs-block .v{
  font-family:var(--font-display);font-size:15px;font-weight:600;
  color:var(--text-soft);letter-spacing:1.4px;margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.hs-block .v.accent{color:var(--accent);text-shadow:0 0 10px rgba(0,255,136,.4);}
.hs-divider{width:1px;height:34px;background:var(--line-strong);}

.online-pill{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;border-radius:999px;
  background:var(--accent-faint);
  border:1px solid rgba(0,255,136,.28);
  box-shadow:inset 0 0 14px rgba(0,255,136,.05);
}
.online-dot{
  width:9px;height:9px;border-radius:50%;background:var(--accent);position:relative;flex:none;
  box-shadow:0 0 8px var(--accent);
}
.online-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--accent);
  animation:ping 1.8s cubic-bezier(0,.6,.4,1) infinite;
}
@keyframes ping{
  0%{transform:scale(.6);opacity:.9;}
  100%{transform:scale(2);opacity:0;}
}
.online-pill span{
  font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:2.2px;color:var(--accent);white-space:nowrap;
}

/* ============================================================
   7. SEARCH BAR
============================================================ */
.search-wrap{padding:26px 0 8px;}
.search-box{
  position:relative;display:flex;align-items:center;
  background:var(--glass);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.search-box::before{ /* border sweep */
  content:"";position:absolute;top:0;left:-60%;width:45%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:sweep 4.5s linear infinite;
}
@keyframes sweep{
  0%{transform:translateX(0);}
  100%{transform:translateX(400%);}
}
.search-box:focus-within{
  border-color:rgba(0,255,136,.45);
  box-shadow:var(--glow-soft),0 8px 34px rgba(0,0,0,.45);
}
.search-box .icon{
  padding:0 16px 0 20px;display:grid;place-items:center;color:var(--muted);
}
.search-box:focus-within .icon{color:var(--accent);}
.search-box .icon svg{width:19px;height:19px;transition:color .3s;}
#search{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-family:var(--font-body);font-size:15px;
  padding:16px 8px;letter-spacing:.4px;
}
#search::placeholder{color:var(--muted);}
.search-kbd{
  display:flex;gap:8px;align-items:center;padding-right:16px;flex:none;
}
.kbd{
  font-family:var(--font-display);font-size:10px;font-weight:600;color:var(--muted);
  border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;
  padding:4px 9px;letter-spacing:1px;background:rgba(255,255,255,.02);
}
.search-count{
  font-size:12px;color:var(--muted);padding-right:14px;letter-spacing:.6px;white-space:nowrap;
}
.search-count b{color:var(--accent);font-weight:500;}

/* ============================================================
   8. MAIN GRID (content + sidebar)
============================================================ */
.layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(18px,2vw,32px);
  padding-top:18px;
  align-items:start;
}

/* ============================================================
   9. SECTIONS + CARDS
============================================================ */
section.zone{margin-bottom:38px;animation:rise .7s var(--easing) both;}
section.zone:nth-of-type(1){animation-delay:.05s;}
section.zone:nth-of-type(2){animation-delay:.14s;}
section.zone:nth-of-type(3){animation-delay:.23s;}
section.zone:nth-of-type(4){animation-delay:.32s;}
@keyframes rise{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:none;}
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.zone-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.zone-head h2{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:4px;text-transform:uppercase;color:var(--text-soft);white-space:nowrap;
}
.zone-head .tick{
  width:8px;height:8px;flex:none;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 8px rgba(0,255,136,.5);
  animation:tickPulse 2.6s ease-in-out infinite;
}
@keyframes tickPulse{
  0%,100%{box-shadow:0 0 6px rgba(0,255,136,.4);}
  50%{box-shadow:0 0 14px rgba(0,255,136,.85);}
}
.zone-head .rule{
  flex:1;height:1px;
  background:linear-gradient(90deg,var(--line-strong),transparent);
}
.zone-head .count{
  font-family:var(--font-display);font-size:10px;letter-spacing:2px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:4px 12px;white-space:nowrap;
}

.card-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
}

/* ---- Card ---- */
.card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  padding:22px 22px 18px;
  border-radius:var(--radius);
  background:linear-gradient(160deg,var(--card) 0%,#0C1117 100%);
  border:1px solid var(--line);
  overflow:hidden;isolation:isolate;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .35s var(--easing),border-color .35s ease,box-shadow .35s ease,background .35s ease;
  will-change:transform;
  animation:fadeIn .5s ease both;
}
.card:hover{
  transform:translateY(-6px);
  background:linear-gradient(160deg,var(--card-hover) 0%,#0D1219 100%);
  border-color:rgba(0,255,136,.32);
  box-shadow:0 18px 44px rgba(0,0,0,.55),var(--glow-soft);
}
.card:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}

/* animated border sweep along the top edge */
.card::before{
  content:"";position:absolute;top:0;left:-70%;width:50%;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--accent-dim),transparent);
  animation:sweep 6s linear infinite;animation-delay:var(--sweep-delay,0s);
}
/* holographic shine that travels across on hover */
.card::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(0,255,136,.06) 45%,rgba(0,212,255,.08) 52%,transparent 66%);
  transform:translateX(-120%);
  transition:transform .9s var(--easing);
}
.card:hover::after{transform:translateX(120%);}

.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;position:relative;z-index:2;}
.card-icon{
  width:46px;height:46px;flex:none;border-radius:12px;
  display:grid;place-items:center;
  background:var(--accent-faint);
  border:1px solid rgba(0,255,136,.22);
  transition:transform .35s var(--easing),box-shadow .35s ease;
}
.card-icon svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.card:hover .card-icon{
  transform:scale(1.08) rotate(-3deg);
  box-shadow:var(--glow-soft);
}
.card.alt .card-icon{background:var(--accent2-faint);border-color:rgba(0,212,255,.22);}
.card.alt .card-icon svg{stroke:var(--accent2);}
.card.alt:hover{border-color:rgba(0,212,255,.35);box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 12px rgba(0,212,255,.18);}

.card-arrow{
  width:32px;height:32px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line-strong);color:var(--muted);
  transition:transform .35s var(--easing),color .3s,border-color .3s,background .3s;
}
.card-arrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.card:hover .card-arrow{
  transform:translate(3px,-3px);
  color:var(--accent);border-color:rgba(0,255,136,.45);
  background:var(--accent-faint);
}
.card.alt:hover .card-arrow{color:var(--accent2);border-color:rgba(0,212,255,.45);background:var(--accent2-faint);}

.card h3{
  font-family:var(--font-display);font-size:15px;font-weight:600;
  letter-spacing:1.4px;color:var(--text);position:relative;z-index:2;
}
.card p{
  font-size:13px;color:var(--muted);line-height:1.6;position:relative;z-index:2;
}
.card-meta{
  margin-top:auto;display:flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:9px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--muted-2);position:relative;z-index:2;
}
.card-meta::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 6px var(--accent);
  animation:tickPulse 3s ease-in-out infinite;
}
.card.alt .card-meta::before{background:var(--accent2);box-shadow:0 0 6px var(--accent2);}

.card.hidden{display:none;}

/* click ripple */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:3;
  background:radial-gradient(circle,rgba(0,255,136,.35) 0%,transparent 65%);
  transform:scale(0);opacity:.9;
  animation:ripple .65s var(--easing) forwards;
}
@keyframes ripple{
  to{transform:scale(1);opacity:0;}
}

/* empty search state */
.no-results{
  display:none;padding:40px 20px;text-align:center;color:var(--muted);
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  font-size:14px;letter-spacing:.6px;
}
.no-results.show{display:block;animation:fadeIn .4s ease;}
.no-results b{color:var(--accent);font-weight:500;}

/* ============================================================
   10. RIGHT SIDEBAR
============================================================ */
aside.side{
  position:sticky;top:calc(var(--header-h) + 18px);
  display:flex;flex-direction:column;gap:16px;
  animation:rise .7s var(--easing) .28s both;
}
.widget{
  position:relative;overflow:hidden;
  padding:18px 20px;border-radius:var(--radius);
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:border-color .3s ease,transform .3s var(--easing);
}
.widget:hover{border-color:rgba(0,255,136,.25);transform:translateY(-2px);}
.widget::before{
  content:"";position:absolute;top:0;left:-70%;width:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent2-dim),transparent);
  animation:sweep 7s linear infinite;animation-delay:var(--sweep-delay,0s);
}
.widget .w-label{
  font-family:var(--font-display);font-size:10px;font-weight:600;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
}
.widget .w-label svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.w-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.w-value{
  font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:1px;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.w-value.green{color:var(--accent);text-shadow:0 0 14px rgba(0,255,136,.45);}
.w-value.cyan{color:var(--accent2);text-shadow:0 0 14px rgba(0,212,255,.45);}
.w-sub{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}

/* progress bar */
.w-bar{
  margin-top:12px;height:5px;border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.06);position:relative;
}
.w-bar-fill{
  height:100%;width:100%;border-radius:4px;transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:var(--glow-soft);
  animation:barBreathe 4s ease-in-out infinite;
}
@keyframes barBreathe{
  0%,100%{transform:scaleX(.985);opacity:.9;}
  50%{transform:scaleX(1);opacity:1;}
}
.w-bar-fill.queue{width:34%;background:linear-gradient(90deg,var(--accent2),var(--accent));animation:none;}

/* status chip */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:999px;
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:2px;
}
.chip .dot{width:7px;height:7px;border-radius:50%;flex:none;animation:tickPulse 2.2s ease-in-out infinite;}
.chip.ok{background:var(--accent-faint);border:1px solid rgba(0,255,136,.3);color:var(--accent);}
.chip.ok .dot{background:var(--accent);box-shadow:0 0 7px var(--accent);}
.chip.info{background:var(--accent2-faint);border:1px solid rgba(0,212,255,.3);color:var(--accent2);}
.chip.info .dot{background:var(--accent2);box-shadow:0 0 7px var(--accent2);}
.chip.low{background:rgba(0,255,136,.06);border:1px solid rgba(0,255,136,.22);color:var(--accent);}

/* mini equalizer for threat feed */
.eq{display:flex;align-items:flex-end;gap:3px;height:22px;}
.eq i{
  width:4px;border-radius:2px;background:linear-gradient(to top,var(--accent2),var(--accent));
  animation:eq 1s ease-in-out infinite;transform-origin:bottom;
}
.eq i:nth-child(1){height:100%;animation-delay:0s;}
.eq i:nth-child(2){height:70%;animation-delay:.15s;}
.eq i:nth-child(3){height:90%;animation-delay:.3s;}
.eq i:nth-child(4){height:55%;animation-delay:.45s;}
.eq i:nth-child(5){height:80%;animation-delay:.6s;}
@keyframes eq{
  0%,100%{transform:scaleY(.4);}
  50%{transform:scaleY(1);}
}

/* severity gauge dots */
.sev-dots{display:flex;gap:6px;margin-top:12px;}
.sev-dots i{
  flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.06);
}
.sev-dots i.on{
  background:var(--accent);box-shadow:0 0 8px rgba(0,255,136,.5);
  animation:tickPulse 2.4s ease-in-out infinite;
}

/* sensor pulse line (SVG heartbeat) */
.pulse-line{width:100%;height:36px;margin-top:8px;overflow:visible;}
.pulse-line polyline{
  fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(0,255,136,.6));
  stroke-dasharray:300;stroke-dashoffset:300;
  animation:pulseDraw 3.2s linear infinite;
}
@keyframes pulseDraw{
  0%{stroke-dashoffset:300;opacity:0;}
  8%{opacity:1;}
  60%{stroke-dashoffset:0;opacity:1;}
  85%{opacity:0;}
  100%{stroke-dashoffset:0;opacity:0;}
}

/* analog + digital clock widget */
.clock-widget{display:flex;align-items:center;gap:18px;}
.analog{width:84px;height:84px;flex:none;}
.analog .face{fill:rgba(255,255,255,.02);stroke:var(--line-strong);stroke-width:1;}
.analog .tickmark{stroke:var(--muted-2);stroke-width:1.4;}
.analog .tickmark.major{stroke:var(--muted);stroke-width:2;}
.analog .hand{stroke-linecap:round;transform-origin:50px 50px;}
.analog .hour{stroke:var(--text-soft);stroke-width:3.2;}
.analog .minute{stroke:var(--accent2);stroke-width:2.2;filter:drop-shadow(0 0 3px rgba(0,212,255,.6));}
.analog .second{stroke:var(--accent);stroke-width:1.3;filter:drop-shadow(0 0 3px rgba(0,255,136,.7));}
.analog .pin{fill:var(--accent);}
.clock-digits .big{
  font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:2px;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.clock-digits .big span{color:var(--accent);animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:.25;}}
.clock-digits .small{font-size:11px;color:var(--muted);letter-spacing:1.6px;margin-top:4px;font-variant-numeric:tabular-nums;}

/* ============================================================
   11. BOTTOM STATUS BAR / TICKER
============================================================ */
footer.statusbar{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:linear-gradient(to top,rgba(5,7,10,.96),rgba(5,7,10,.82));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  display:flex;align-items:stretch;height:44px;overflow:hidden;
}
.statusbar .sys-tag{
  flex:none;display:flex;align-items:center;gap:9px;
  padding:0 18px;border-right:1px solid var(--line);
  font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:2.4px;
  color:var(--accent);background:rgba(0,255,136,.04);white-space:nowrap;
}
.statusbar .sys-tag .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);animation:tickPulse 1.8s ease-in-out infinite;
}
.ticker-mask{
  flex:1;position:relative;overflow:hidden;display:flex;align-items:center;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.ticker-track{
  display:flex;gap:64px;white-space:nowrap;will-change:transform;
  animation:ticker 60s linear infinite;
  padding-left:24px;
}
.statusbar:hover .ticker-track{animation-play-state:paused;}
@keyframes ticker{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
.ticker-item{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:1.4px;color:var(--muted);
  font-family:var(--font-body);text-transform:uppercase;
}
.ticker-item::before{
  content:"";width:6px;height:6px;transform:rotate(45deg);flex:none;
  background:var(--accent2);opacity:.7;
}
.ticker-item.ok::before{background:var(--accent);}
.statusbar .utc-tag{
  flex:none;display:flex;align-items:center;padding:0 18px;
  border-left:1px solid var(--line);
  font-family:var(--font-display);font-size:11px;letter-spacing:1.8px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
body{padding-bottom:44px;}

/* ============================================================
   12. EASTER EGG OVERLAY
============================================================ */
#egg{
  position:fixed;inset:0;z-index:2000;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:18px;
  background:rgba(3,5,8,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#egg.show{display:flex;animation:fadeIn .3s ease;}
.egg-frame{
  position:relative;padding:56px clamp(30px,8vw,110px);
  border:1px solid rgba(0,255,136,.4);border-radius:16px;
  background:linear-gradient(160deg,rgba(0,255,136,.05),rgba(0,212,255,.04));
  box-shadow:0 0 60px rgba(0,255,136,.18),inset 0 0 40px rgba(0,255,136,.04);
  overflow:hidden;text-align:center;
  animation:eggIn .6s var(--easing);
}
@keyframes eggIn{
  from{transform:scale(.86);opacity:0;}
  to{transform:scale(1);opacity:1;}
}
.egg-frame::before{ /* holographic sheen */
  content:"";position:absolute;inset:-40%;
  background:linear-gradient(115deg,transparent 40%,rgba(0,255,136,.14) 48%,rgba(0,212,255,.16) 52%,transparent 60%);
  animation:holo 2.6s linear infinite;
}
@keyframes holo{
  from{transform:translateX(-55%);}
  to{transform:translateX(55%);}
}
.egg-frame::after{ /* scanlines */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,255,136,.045) 3px 4px);
}
.egg-title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(28px,5vw,56px);letter-spacing:10px;
  color:var(--accent);text-shadow:0 0 24px rgba(0,255,136,.8),0 0 70px rgba(0,255,136,.4);
  animation:eggFlicker 3s linear infinite;
}
@keyframes eggFlicker{
  0%,100%{opacity:1;}
  92%{opacity:1;}
  93%{opacity:.5;}
  94%{opacity:1;}
  97%{opacity:.7;}
  98%{opacity:1;}
}
.egg-sub{
  font-family:var(--font-display);font-size:clamp(12px,2vw,18px);
  letter-spacing:8px;color:var(--accent2);margin-top:16px;
  text-shadow:0 0 16px rgba(0,212,255,.7);
}
.egg-hint{font-size:12px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}

/* ============================================================
   13. RESPONSIVE
============================================================ */
@media (min-width:2560px){
  body{font-size:16px;}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
  .layout{grid-template-columns:minmax(0,1fr) 380px;}
}
@media (max-width:1200px){
  .layout{grid-template-columns:minmax(0,1fr) 280px;}
}
@media (max-width:1000px){
  .layout{grid-template-columns:1fr;}
  aside.side{
    position:static;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  }
}
@media (max-width:720px){
  .header-inner{gap:16px;}
  .header-status{width:100%;justify-content:flex-start;}
  .hs-divider{display:none;}
  .hs-block{text-align:left;}
  .search-kbd{display:none;}
  .statusbar .utc-tag{display:none;}
  .brand-text h1{letter-spacing:4px;}
}

/* ============================================================
   14. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .ticker-track{animation:none;}
}