/* =========================================================
   SolarCompute Dashboard — Shared Shell (toggle sidebar)
   Sidebar (Host/Work toggle + collapse + search) + topbar
   + unified overview primitives.
   Load AFTER dashboard.css. Renders standalone too.
   ========================================================= */
:root{
  --zm-bg:#0b1220; --zm-bg-soft:#111a2a; --zm-surface:#1f2933; --zm-surface-2:#243244;
  --zm-panel:rgba(255,255,255,.035); --zm-panel-strong:rgba(255,255,255,.05);
  --zm-border:rgba(255,255,255,.08); --zm-border-strong:rgba(255,255,255,.14);
  --zm-text:#e5e7eb; --zm-muted:#9aa8b8; --zm-muted-2:#7f8da0;
  --zm-primary:#d89b2b; --zm-primary-strong:#f5b841; --zm-accent-blue:#3a8dff;
  --zm-danger:#f87171; --zm-financial-positive:#4ade80;
  --zm-shadow:0 18px 40px rgba(0,0,0,.22);
  --zm-container:1480px; --sc-rail-w:256px; --sc-rail-w-collapsed:72px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;color:var(--zm-text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top left,rgba(58,141,255,.08),transparent 28%),
    radial-gradient(circle at top right,rgba(216,155,43,.10),transparent 24%),
    linear-gradient(180deg,#071019 0%,#0b1220 100%)}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}.muted{color:var(--zm-muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* base components (mirror dashboard.css) */
.card{background:var(--zm-panel);border:1px solid var(--zm-border);border-radius:18px;padding:20px;backdrop-filter:blur(10px);box-shadow:var(--zm-shadow)}
.card h3,.stat-card h3{margin:0 0 10px;font-size:.9rem;color:var(--zm-muted);font-weight:500}
.card-value{font-size:2rem;font-weight:650;line-height:1.1;color:#fff;display:flex;align-items:baseline;gap:4px}
.card-value-small{font-size:1.2rem;line-height:1.3}
.card-note{margin-top:8px;color:var(--zm-muted);font-size:.84rem}
.card-suffix{font-size:.95rem;color:var(--zm-muted);margin-left:4px;font-weight:500}
.card-prefix{font-size:1.1rem;color:var(--zm-muted);font-weight:500}
.eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--zm-primary);font-weight:600}
.page-lead{color:var(--zm-muted);line-height:1.65}
.section-subtext{color:var(--zm-muted);font-size:.9rem;line-height:1.55;margin:4px 0 0}
.section-card{padding:22px}
.btn{appearance:none;border:1px solid transparent;border-radius:10px;padding:10px 14px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:8px}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--zm-primary),var(--zm-primary-strong));color:#071019;border-color:rgba(216,155,43,.28);box-shadow:0 10px 28px rgba(216,155,43,.22)}
.btn-ghost{background:rgba(255,255,255,.025);color:var(--zm-text);border-color:var(--zm-border)}
.btn-ghost:hover{background:rgba(255,255,255,.055);border-color:rgba(58,141,255,.20)}
.btn-small{padding:8px 12px;font-size:.82rem;border-radius:12px}
.status-pill{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:5px 10px;border-radius:999px;font-size:.76rem;font-weight:600;white-space:nowrap}
.status-pill::before{content:"";width:8px;height:8px;border-radius:999px;display:inline-block}
.status-queued,.status-pending,.status-validation{background:rgba(148,163,184,.12);color:#cbd5e1}
.status-queued::before,.status-pending::before,.status-validation::before{background:#94a3b8}
.status-assigned,.status-approved,.status-running{background:rgba(59,130,246,.12);color:#93c5fd}
.status-assigned::before,.status-approved::before,.status-running::before{background:#3b82f6}
.status-success,.status-active{background:rgba(34,197,94,.12);color:#86efac}
.status-success::before,.status-active::before{background:#22c55e}
.status-failed,.status-rejected,.status-offline{background:rgba(239,68,68,.12);color:#fca5a5}
.status-failed::before,.status-rejected::before,.status-offline::before{background:#ef4444}
.status-building,.status-warning,.status-cancel_requested{background:rgba(245,158,11,.12);color:#fcd34d}
.status-building::before,.status-warning::before,.status-cancel_requested::before{background:#f59e0b}
.status-cancelled{background:rgba(168,85,247,.15);color:#d8b4fe}.status-cancelled::before{background:#a855f7}
.dashboard-container{max-width:var(--zm-container);margin:0 auto;padding:26px 30px 44px;width:100%}
.dashboard-footer{border-top:1px solid var(--zm-border);margin-top:8px}
.dashboard-footer-inner{max-width:var(--zm-container);margin:0 auto;padding:22px 30px;color:var(--zm-muted);font-size:.85rem;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dashboard-footer-links{display:flex;gap:16px;flex-wrap:wrap}.dashboard-footer-links a:hover{color:#fff}

/* ---- shell layout ---- */
.sc-shell{display:grid;grid-template-columns:var(--sc-rail-w) 1fr;height:100vh;overflow:hidden;transition:grid-template-columns .18s ease}
.sc-shell.sc-collapsed{grid-template-columns:var(--sc-rail-w-collapsed) 1fr}
.sc-rail{height:100%;overflow:hidden;border-right:1px solid var(--zm-border);
  background:linear-gradient(180deg,#0c1626,#0a111e);padding:16px 14px 14px;display:flex;flex-direction:column;gap:4px}

/* rail head: brand + collapse + search icon */
.sc-railhead{display:flex;align-items:center;gap:6px;padding:0 2px 6px}
.sc-brand{display:flex;align-items:center;gap:11px;flex:1;min-width:0;padding:2px}
.sc-brand-mark{width:29px;height:29px;border-radius:9px;flex:none;
  background:radial-gradient(circle at 34% 30%,#ffd37a,var(--zm-primary) 46%,#b5771a);
  box-shadow:0 0 0 1px rgba(216,155,43,.35),0 6px 16px rgba(216,155,43,.25)}
.sc-brand-txt{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.sc-brand-name{font-size:.96rem;font-weight:700;letter-spacing:-.01em;color:#fff}
.sc-brand-sub{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--zm-muted-2)}
.sc-icon-btn{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;color:var(--zm-muted);border:1px solid transparent;background:transparent;cursor:pointer;transition:all .15s}
.sc-icon-btn:hover{color:#fff;background:rgba(255,255,255,.06)}
.sc-icon-btn svg{width:16px;height:16px}

/* Host/Work segmented toggle */
.sc-toggle{display:flex;gap:4px;background:rgba(255,255,255,.03);border:1px solid var(--zm-border);border-radius:12px;padding:4px;margin:2px 2px 8px}
.sc-toggle-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 8px;border-radius:9px;font-size:.82rem;font-weight:600;color:var(--zm-muted);cursor:pointer;border:1px solid transparent;background:transparent;transition:all .16s}
.sc-toggle-btn:hover{color:#fff}
.sc-toggle-btn.active{color:#071019;background:linear-gradient(135deg,var(--zm-primary),var(--zm-primary-strong));box-shadow:0 6px 16px rgba(216,155,43,.22)}
.sc-toggle-btn svg{width:15px;height:15px;flex:none}

/* search */
.sc-search{display:flex;align-items:center;gap:8px;margin:0 2px 8px;padding:8px 10px;border-radius:10px;border:1px solid var(--zm-border);background:rgba(255,255,255,.02);color:var(--zm-muted-2)}
.sc-search svg{width:15px;height:15px;flex:none}
.sc-search input{flex:1;background:transparent;border:none;outline:none;color:var(--zm-text);font-size:.82rem;min-width:0}
.sc-search input::placeholder{color:var(--zm-muted-2)}

/* nav list */
.sc-nav{display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1;min-height:0;padding-right:2px}
.sc-nav-item{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:9px;color:var(--zm-muted);font-size:.82rem;border:1px solid transparent;transition:all .16s;position:relative}
.sc-nav-item:hover{color:#fff;background:rgba(255,255,255,.04)}
.sc-nav-item.active{color:#fff;background:rgba(216,155,43,.10);border-color:rgba(216,155,43,.22);box-shadow:inset 0 -1px 0 rgba(216,155,43,.30)}
.sc-nav-item svg{width:15px;height:15px;flex:none;opacity:.9}
.sc-nav-item .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-nav-item .ext{margin-left:auto;font-size:.62rem;color:var(--zm-muted-2);opacity:.7}
.sc-nav-badge{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:.68rem;color:#9bc6ff;background:rgba(58,141,255,.14);padding:1px 8px;border-radius:20px}
.sc-nav-badge.live::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#3a8dff;margin-right:5px;vertical-align:middle;box-shadow:0 0 7px #3a8dff;animation:scpulse 1.8s infinite}
.sc-nav-empty{color:var(--zm-muted-2);font-size:.8rem;padding:10px 12px}
.sc-nav-group{font-family:"Space Grotesk",Inter,sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--zm-primary-strong,#d89b2b);opacity:.85;padding:11px 11px 4px;margin-top:2px;user-select:none}
.sc-nav-group:first-child{margin-top:0}
.sc-collapsed .sc-nav-group{display:none}

/* account */
.sc-rail-foot{margin-top:6px;padding-top:8px;border-top:1px solid var(--zm-border)}
.sc-rail-user{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:12px}
.sc-avatar{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--zm-primary-strong);background:linear-gradient(135deg,#1a2432,#243244)}
.sc-rail-user-meta{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sc-rail-user .who{font-size:.79rem;color:#fff;font-weight:500;word-break:break-all}
.sc-rail-user .role{font-size:.68rem;color:var(--zm-muted-2)}
.sc-rail-foot .sc-icon-btn{margin-left:auto}

/* subscribe / upgrade CTA */
.sc-upgrade{display:flex;align-items:center;gap:10px;margin:4px 2px 2px;padding:10px 11px;border-radius:12px;
  border:1px solid rgba(216,155,43,.30);background:linear-gradient(135deg,rgba(216,155,43,.10),rgba(245,184,65,.05));
  color:var(--zm-text);transition:all .16s}
.sc-upgrade:hover{border-color:rgba(216,155,43,.55);background:linear-gradient(135deg,rgba(216,155,43,.16),rgba(245,184,65,.08));transform:translateY(-1px)}
.sc-upgrade svg{width:18px;height:18px;flex:none;color:var(--zm-primary-strong)}
.sc-upgrade-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sc-upgrade-txt .t{font-size:.82rem;font-weight:650;color:#fff}
.sc-upgrade-txt .s{font-size:.68rem;color:var(--zm-muted-2)}
.sc-collapsed .sc-upgrade{justify-content:center;padding:10px}
.sc-collapsed .sc-upgrade-txt{display:none}

/* collapsed state */
.sc-collapsed .sc-brand-txt,.sc-collapsed .sc-search,.sc-collapsed .sc-toggle-btn .lbl,
.sc-collapsed .sc-nav-item .lbl,.sc-collapsed .sc-nav-item .ext,.sc-collapsed .sc-nav-badge,
.sc-collapsed .sc-rail-user-meta,.sc-collapsed .sc-railhead .sc-search-btn{display:none}
.sc-collapsed .sc-rail{padding:16px 10px}
.sc-collapsed .sc-railhead{flex-direction:column;gap:8px}
.sc-collapsed .sc-brand{flex:none;justify-content:center}
.sc-collapsed .sc-toggle{flex-direction:column;padding:3px}
.sc-collapsed .sc-toggle-btn{padding:9px}
.sc-collapsed .sc-nav-item{justify-content:center;padding:10px}
.sc-collapsed .sc-rail-user{justify-content:center;padding:8px 0}
.sc-collapsed .sc-rail-foot{display:flex;flex-direction:column;align-items:center;gap:6px}
.sc-collapsed .sc-rail-foot .sc-icon-btn{margin-left:0}

/* topbar */
.sc-main{min-width:0;display:flex;flex-direction:column;height:100vh;overflow-y:auto}
.sc-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;padding:13px 30px;border-bottom:1px solid var(--zm-border);background:rgba(8,18,32,.82);backdrop-filter:blur(14px)}
.sc-topbar .crumb{display:flex;flex-direction:column;gap:1px}
.sc-topbar .crumb .eyebrow{font-size:.66rem}
.sc-topbar h1{margin:0;font-size:1.02rem;font-weight:650;color:#fff;letter-spacing:-.01em}
.sc-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

/* unified compute/host dividers + workloads */
.sc-section-label{display:flex;align-items:center;gap:12px;margin:2px 2px}
.sc-section-label .t{font-size:1rem;font-weight:650;color:#fff}
.sc-section-label .s{color:var(--zm-muted);font-size:.85rem}
.sc-wl{display:flex;flex-direction:column}
.sc-wl-row{display:grid;grid-template-columns:1.7fr .9fr 1.5fr auto;gap:18px;align-items:center;padding:13px 8px;border-radius:10px;transition:background .15s}
.sc-wl-row:hover{background:rgba(255,255,255,.02)}
.sc-wl-row+.sc-wl-row{border-top:1px solid var(--zm-border)}
.sc-wl-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.sc-wl-name .nm{font-size:.9rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-wl-name .id{font-family:ui-monospace,Menlo,monospace;font-size:.7rem;color:var(--zm-muted-2)}
.sc-wl-node{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--zm-muted)}
.sc-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.sc-bar>span{position:absolute;inset:0 auto 0 0;border-radius:6px;background:linear-gradient(90deg,var(--zm-accent-blue),#7db8ff);transition:width .4s ease}
.sc-wl-pct{display:block;margin-top:5px;font-family:ui-monospace,Menlo,monospace;font-size:.7rem;color:var(--zm-muted)}
.sc-wl-status{justify-self:end}
.sc-wl-empty{padding:26px 14px;text-align:center;color:var(--zm-muted);font-size:.88rem}
.sc-compute-kpis .overview-stat-card .card-value{font-size:1.7rem}

@keyframes scpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
@media (max-width:1024px){
  .sc-shell,.sc-shell.sc-collapsed{grid-template-columns:1fr}
  .sc-rail{position:static;height:auto;overflow:visible}
  .sc-shell{height:auto;overflow:visible}.sc-main{height:auto;overflow:visible}
  .sc-nav{flex-direction:row;flex-wrap:wrap;overflow:visible}
  .sc-rail-foot,.sc-search,.sc-railhead .sc-icon-btn,.sc-upgrade{display:none}
  .sc-topbar{padding:12px 18px}.dashboard-container{padding:18px}
  .sc-wl-row{grid-template-columns:1.4fr auto;gap:10px}.sc-wl-node,.sc-wl-row .sc-bar-cell{display:none}
}
:focus-visible{outline:2px solid var(--zm-primary-strong);outline-offset:2px;border-radius:6px}

/* Temporarily unavailable Host navigation entries */
.sc-nav-item.disabled {
  cursor: not-allowed;
  opacity: 0.58;
  user-select: none;
}

.sc-nav-item.disabled:hover {
  color: var(--zm-muted);
  background: transparent;
}

.sc-nav-item.disabled svg {
  opacity: 0.65;
}

/* SolarCompute dashboard brand icon */
.sc-brand-mark {
  overflow: hidden;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.sc-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ==========================================================================
   Collapsible Work navigation groups
   ========================================================================== */

.sc-nav-section {
  display: block;
  min-width: 0;
}

.sc-nav-group-toggle {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 2px 0 1px;
  padding: 10px 10px 5px;
  border: 0;
  background: transparent;
  color: var(--zm-primary-strong, #d89b2b);
  cursor: pointer;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
  opacity: .86;
}

.sc-nav-group-toggle:hover {
  color: #f5b841;
  opacity: 1;
}

.sc-nav-group-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sc-nav-group-chevron {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--zm-muted-2);
  transition:
    transform .18s ease,
    color .18s ease;
}

.sc-nav-group-chevron svg {
  width: 12px;
  height: 12px;
}

.sc-nav-section.open .sc-nav-group-chevron {
  color: var(--zm-primary-strong, #d89b2b);
  transform: rotate(90deg);
}

.sc-nav-group-items {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition:
    grid-template-rows .18s ease,
    opacity .16s ease;
}

/*
 * An inner wrapper is not needed because navigation items are direct children.
 * max-height provides the animated visible area alongside the grid state.
 */
.sc-nav-section .sc-nav-group-items {
  max-height: 0;
}

.sc-nav-section.open .sc-nav-group-items {
  grid-template-rows: 1fr;
  max-height: 700px;
  opacity: 1;
}

.sc-nav-section.open .sc-nav-group-items > .sc-nav-item {
  min-height: 0;
}

/* Whole-rail icon-only mode: section headings are hidden, items remain visible. */
.sc-collapsed .sc-nav-group-toggle {
  display: none;
}

.sc-collapsed .sc-nav-section .sc-nav-group-items {
  display: flex;
  flex-direction: column;
  max-height: none;
  opacity: 1;
  overflow: visible;
}

/* Mobile navigation keeps group behaviour but gives headings more touch area. */
@media (max-width: 760px) {
  .sc-nav-section {
    width: 100%;
  }

  .sc-nav-group-toggle {
    padding-top: 11px;
    padding-bottom: 7px;
  }

  .sc-nav-section.open .sc-nav-group-items {
    display: flex;
    flex-wrap: wrap;
    max-height: 900px;
  }
}

/* Maximum-two Work accordion refinements */
.sc-nav-section:has(.sc-nav-item.active) .sc-nav-group-toggle {
  cursor: default;
}

.sc-nav-section:has(.sc-nav-item.active) .sc-nav-group-label::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--zm-primary-strong, #d89b2b);
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(216, 155, 43, .65);
}

/* Slightly smoother expansion and quicker collapse */
.sc-nav-group-items {
  transition:
    max-height .19s ease,
    opacity .16s ease;
}

/* ==========================================================================
   Renewable green upgrade call-to-action
   ========================================================================== */

.sc-upgrade {
  border-color: rgba(74, 197, 109, .34);
  background:
    linear-gradient(
      180deg,
      rgba(24, 42, 31, .58),
      rgba(14, 27, 23, .9)
    );
  box-shadow:
    inset 0 0 0 1px rgba(87, 214, 124, .035),
    0 8px 22px rgba(0, 0, 0, .12);
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.sc-upgrade > svg {
  color: #59d879;
  filter: drop-shadow(0 0 5px rgba(77, 210, 113, .28));
}

.sc-upgrade .t {
  color: #f4f8f5;
}

.sc-upgrade .s {
  color: #91a99a;
}

.sc-upgrade:hover {
  border-color: rgba(89, 216, 121, .58);
  background:
    linear-gradient(
      180deg,
      rgba(29, 52, 37, .7),
      rgba(16, 32, 26, .96)
    );
  box-shadow:
    0 0 0 1px rgba(89, 216, 121, .11),
    0 10px 28px rgba(24, 108, 52, .18);
  transform: translateY(-1px);
}

.sc-upgrade:hover > svg {
  color: #70e28d;
}

.sc-upgrade:focus-visible {
  outline: 2px solid rgba(89, 216, 121, .72);
  outline-offset: 2px;
}

/* Upgrade card current-plan indicator */
.sc-upgrade-txt {
  min-width: 0;
}

.sc-upgrade-plan {
  display: block;
  margin: 2px 0 3px;
  color: #91a0b3;
  font-size: .61rem;
  line-height: 1.25;
}

.sc-upgrade-plan b {
  display: inline-block;
  margin-left: 3px;
  padding: 1px 6px;
  border: 1px solid rgba(139, 157, 182, .28);
  border-radius: 999px;
  background: rgba(103, 121, 147, .12);
  color: #c2ccd9;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.sc-upgrade .s {
  line-height: 1.3;
}

/* Upgrade card current-plan indicator */
.sc-upgrade-txt {
  min-width: 0;
}

.sc-upgrade-plan {
  display: block;
  margin: 2px 0 3px;
  color: #91a0b3;
  font-size: .61rem;
  line-height: 1.25;
}

.sc-upgrade-plan b {
  display: inline-block;
  margin-left: 3px;
  padding: 1px 6px;
  border: 1px solid rgba(139, 157, 182, .28);
  border-radius: 999px;
  background: rgba(103, 121, 147, .12);
  color: #c2ccd9;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.sc-upgrade .s {
  line-height: 1.3;
}

/* Upgrade card current-plan indicator */
.sc-upgrade-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.sc-upgrade-plan {
  display: block;
  margin: 3px 0;
  color: #91a0b3;
  font-size: .61rem;
  line-height: 1.25;
}

.sc-upgrade-plan b {
  display: inline-block;
  margin-left: 3px;
  padding: 1px 6px;
  border: 1px solid rgba(139, 157, 182, .28);
  border-radius: 999px;
  background: rgba(103, 121, 147, .12);
  color: #c2ccd9;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.sc-upgrade .s {
  color: #91a99a;
  line-height: 1.3;
}


/* ==========================================================================
   Upgrade Compute - Neutral Status Card
   ========================================================================== */

.sc-upgrade{
  border:1px solid rgba(115,126,143,.28) !important;
  background:linear-gradient(
      180deg,
      rgba(30,36,47,.96),
      rgba(22,28,39,.98)
  ) !important;

  box-shadow:none !important;
}

.sc-upgrade:hover{
  border-color:rgba(150,162,180,.42) !important;
  background:linear-gradient(
      180deg,
      rgba(34,41,53,.98),
      rgba(24,30,42,1)
  ) !important;

  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}

.sc-upgrade > svg{
  color:#c9d2dd !important;
  filter:none !important;
}

.sc-upgrade .t{
  color:#ffffff;
}

.sc-upgrade-plan{
  color:#9ba7b6;
}

.sc-upgrade-plan b{
  color:#dbe3ed;
  background:rgba(95,107,123,.20);
  border:1px solid rgba(132,145,163,.28);
}

.sc-upgrade .s{
  color:#9aa6b6;
}

/* ==========================================================================
   Upgrade Compute - Neutral Status Card
   ========================================================================== */

.sc-upgrade{
  border:1px solid rgba(115,126,143,.28) !important;
  background:linear-gradient(
      180deg,
      rgba(30,36,47,.96),
      rgba(22,28,39,.98)
  ) !important;

  box-shadow:none !important;
}

.sc-upgrade:hover{
  border-color:rgba(150,162,180,.42) !important;
  background:linear-gradient(
      180deg,
      rgba(34,41,53,.98),
      rgba(24,30,42,1)
  ) !important;

  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}

.sc-upgrade > svg{
  color:#c9d2dd !important;
  filter:none !important;
}

.sc-upgrade .t{
  color:#ffffff;
}

.sc-upgrade-plan{
  color:#9ba7b6;
}

.sc-upgrade-plan b{
  color:#dbe3ed;
  background:rgba(95,107,123,.20);
  border:1px solid rgba(132,145,163,.28);
}

.sc-upgrade .s{
  color:#9aa6b6;
}