/* Dashboard console shell (www.globestar.nl) — Scaleway-style left sidebar.
   Uses the site theme vars from app.css (--gs-panel/--gs-border/--gs-fg/--gs-muted), so dark navy
   and html.light both work. No inline styles (strict nonce CSP). */
:root { --gs-nav-h: 64px; --gs-dash-w: 15rem; --gs-dash-bar-h: 3rem; }

.gs-dash-sidebar {
  position: fixed; left: 0; top: var(--gs-nav-h); bottom: 0; z-index: 45;
  width: var(--gs-dash-w); overflow-y: auto; overscroll-behavior: contain;
  background: #0d2141; border-right: 1px solid var(--gs-border);
  padding: 1rem 0.75rem 2rem;
}
html.light .gs-dash-sidebar { background: #fff; }
.gs-dash-nav { display: flex; flex-direction: column; gap: 1.25rem; }
.gs-dash-section-title {
  margin: 0 0 0.35rem; padding: 0 0.75rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gs-muted);
}
.gs-dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gs-dash-link {
  display: flex; align-items: center; gap: 0.7rem; min-height: 2.5rem;
  padding: 0.45rem 0.75rem; border-radius: 0.6rem; border-left: 3px solid transparent;
  color: var(--gs-fg); font-size: 0.9rem; font-weight: 500; text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.gs-dash-link svg, .gs-dash-link i { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: var(--gs-muted); }
.gs-dash-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-dash-link:hover { background: rgba(59,130,246,.12); color: #fff; }
.gs-dash-link:hover svg { color: #60a5fa; }
.gs-dash-link.is-active { background: rgba(59,130,246,.2); border-left-color: #3b82f6; color: #fff; font-weight: 600; }
.gs-dash-link.is-active svg { color: #60a5fa; }
.gs-dash-link:focus-visible, .gs-dash-toggle:focus-visible, .gs-dash-close:focus-visible {
  outline: 2px solid #60a5fa; outline-offset: 2px;
}
html.light .gs-dash-link:hover { background: #eff6ff; color: #1d4ed8; }
html.light .gs-dash-link.is-active { background: #dbeafe; color: #1d4ed8; border-left-color: #2563eb; }
html.light .gs-dash-link:hover svg, html.light .gs-dash-link.is-active svg { color: #2563eb; }

/* Mobile bar + drawer controls (hidden on desktop) */
.gs-dash-bar {
  position: fixed; left: 0; right: 0; top: var(--gs-nav-h); z-index: 40;
  height: var(--gs-dash-bar-h); display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1rem; background: #0d2141; border-bottom: 1px solid var(--gs-border);
  min-width: 0;
}
html.light .gs-dash-bar { background: #fff; }
.gs-dash-toggle, .gs-dash-close {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto;
  min-height: 2.25rem; padding: 0.3rem 0.75rem; border-radius: 0.6rem;
  border: 1px solid var(--gs-border); background: transparent; color: var(--gs-fg);
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.gs-dash-toggle svg, .gs-dash-close svg { width: 1.1rem; height: 1.1rem; }
.gs-dash-toggle:hover, .gs-dash-close:hover { border-color: #3b82f6; }
.gs-dash-bar-current {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--gs-muted); font-size: 0.875rem;
}
.gs-dash-drawer-head { display: none; }
.gs-dash-backdrop {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--gs-nav-h); z-index: 44;
  background: rgba(2, 8, 23, .6);
}
.gs-dash-backdrop[hidden] { display: none; }

@media (min-width: 1024px) {
  body.gs-dash { padding-left: var(--gs-dash-w); }
  .gs-dash-bar, .gs-dash-backdrop { display: none !important; }
}
@media (max-width: 1023.98px) {
  body.gs-dash { padding-top: var(--gs-dash-bar-h); }
  .gs-dash-sidebar {
    width: min(18rem, 86vw); transform: translateX(-100%); visibility: hidden;
    transition: transform .2s ease-out, visibility 0s linear .2s;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,.5);
  }
  html.gs-dash-open .gs-dash-sidebar { transform: none; visibility: visible; transition: transform .2s ease-out; }
  html.gs-dash-open, html.gs-dash-open body { overflow: hidden; }
  .gs-dash-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0.25rem 0.75rem 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--gs-border);
  }
  .gs-dash-drawer-title { font-weight: 600; color: var(--gs-fg); }
}
@media (prefers-reduced-motion: reduce) {
  .gs-dash-sidebar, .gs-dash-link { transition: none !important; }
}

/* Overview cards */
.gs-dash-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.gs-dash-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; border-radius: 1rem; text-decoration: none; min-width: 0; }
.gs-dash-card-head { display: flex; align-items: center; gap: 0.6rem; }
.gs-dash-card-head svg { width: 1.25rem; height: 1.25rem; color: #60a5fa; flex: 0 0 auto; }
html.light .gs-dash-card-head svg { color: #2563eb; }
.gs-dash-card-title { font-size: 1.05rem; font-weight: 600; }
.gs-dash-card-body { font-size: 0.875rem; color: var(--gs-muted); }
.gs-dash-card:hover { border-color: rgba(59,130,246,.5) !important; }

/* Account opheffen (profile) — danger zone + accessible modal; no inline styles (strict CSP). */
.gs-close {
  margin-top: 2.5rem; padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  border: 1px solid rgba(248,113,113,.45) !important; min-width: 0;
}
.gs-close-text { flex: 1 1 18rem; min-width: 0; }
.gs-close-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
.gs-close-badge {
  display: inline-block; max-width: 100%; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere;
  color: #fcd34d; background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.45);
}
html.light .gs-close-badge { color: #92400e; background: #fef3c7; border-color: #f59e0b; }
.gs-close-warning { color: #fda4af; font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }
html.light .gs-close-warning { color: #be123c; }
.gs-close-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 0 0 auto;
  min-height: 2.5rem; padding: 0.55rem 1.1rem; border-radius: 0.75rem; cursor: pointer;
  font-size: 0.875rem; font-weight: 600; color: #fff; background: #dc2626; border: 1px solid #b91c1c;
}
.gs-close-btn svg { width: 1.05rem; height: 1.05rem; }
.gs-close-btn:hover { background: #b91c1c; }
.gs-close-btn:disabled { opacity: .6; cursor: progress; }
.gs-close-btn:focus-visible, .gs-close-cancel:focus-visible, .gs-close-x:focus-visible,
.gs-close-form input:focus-visible { outline: 2px solid #f87171; outline-offset: 2px; }
@media (max-width: 639.98px) {
  .gs-close { flex-direction: column; align-items: stretch; }
  .gs-close-text { flex-basis: auto; }
  .gs-close > .gs-close-btn { width: 100%; }
}
.gs-close-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(2,8,23,.7); }
.gs-close-backdrop[hidden], .gs-close-dialog[hidden] { display: none; }
.gs-close-dialog {
  position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(36rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 1.25rem; border-radius: 1rem; background: #0d2141; border: 1px solid rgba(248,113,113,.5);
  box-shadow: 0 25px 60px -10px rgba(0,0,0,.6); color: var(--gs-fg);
}
html.light .gs-close-dialog { background: #fff; }
html.gs-close-open, html.gs-close-open body { overflow: hidden; }
.gs-close-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.gs-close-x, .gs-close-cancel {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; padding: 0.3rem 0.8rem;
  border-radius: 0.6rem; border: 1px solid var(--gs-border); background: transparent; color: var(--gs-fg);
  font-size: 0.875rem; cursor: pointer; flex: 0 0 auto;
}
.gs-close-x { padding: 0.3rem 0.45rem; }
.gs-close-x svg { width: 1.1rem; height: 1.1rem; }
.gs-close-status { margin: 0.75rem 0; font-size: 0.875rem; color: var(--gs-muted); }
.gs-close-status[hidden] { display: none; }
.gs-close-alert { margin: 0.75rem 0; padding: 0.6rem 0.8rem; border-radius: 0.6rem; font-size: 0.875rem;
  color: #fecaca; background: rgba(127,29,29,.4); border: 1px solid rgba(248,113,113,.5); overflow-wrap: anywhere; }
html.light .gs-close-alert { color: #991b1b; background: #fee2e2; }
.gs-close-alert[hidden] { display: none; }
.gs-close-subtitle { margin: 1rem 0 0.5rem; font-size: 0.95rem; font-weight: 600; }
.gs-close-group { margin-bottom: 0.75rem; }
.gs-close-group-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gs-muted); margin-bottom: 0.25rem; }
.gs-close-list { list-style: disc; padding-left: 1.2rem; font-size: 0.875rem; overflow-wrap: anywhere; }
.gs-close-muted { font-size: 0.875rem; color: var(--gs-muted); }
.gs-close-grace { margin: 0.75rem 0; font-size: 0.85rem; color: #fcd34d; overflow-wrap: anywhere; }
html.light .gs-close-grace { color: #92400e; }
.gs-close-form { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.gs-close-form label { font-size: 0.85rem; color: var(--gs-muted); margin-top: 0.4rem; }
.gs-close-form input {
  width: 100%; min-width: 0; padding: 0.55rem 0.8rem; border-radius: 0.6rem; font-size: 0.9rem;
  background: #0f172a; color: #fff; border: 1px solid #374151;
}
html.light .gs-close-form input { background: #fff; color: #111827; border-color: #d1d5db; }
.gs-close-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
.gs-close-actions[hidden], #gs-close-otp-wrap[hidden], #gs-close-body[hidden] { display: none; }
#gs-close-otp-wrap { display: flex; flex-direction: column; gap: 0.35rem; }
@media (max-width: 420px) {
  .gs-close-actions { flex-direction: column-reverse; }
  .gs-close-actions > button { width: 100%; }
}

/* /account/support — current plan card + plan comparison (Scaleway "My Support" style).
   The comparison table scrolls inside .gs-sup-scroll, so the page itself never overflows at 375px. */
.gs-sup { min-width: 0; }
.gs-sup-current { padding: 1.5rem; margin-bottom: 2.5rem; min-width: 0; }
.gs-sup-current-top { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
.gs-sup-current-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 3rem; height: 3rem; border-radius: 0.9rem; background: rgba(59,130,246,.15); color: #60a5fa;
}
.gs-sup-current-icon svg { width: 1.5rem; height: 1.5rem; }
.gs-sup-current-text { min-width: 0; }
.gs-sup-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-muted); margin: 0; }
.gs-sup-current-name { font-size: 1.5rem; font-weight: 700; color: var(--gs-fg); margin: 0.15rem 0; overflow-wrap: anywhere; }
.gs-sup-muted { color: var(--gs-muted); font-size: 0.8rem; }
.gs-sup-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem 1rem;
  margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--gs-border);
}
.gs-sup-fact { min-width: 0; }
.gs-sup-fact dt { font-size: 0.75rem; color: var(--gs-muted); margin-bottom: 0.2rem; }
.gs-sup-fact dd { margin: 0; font-weight: 600; color: var(--gs-fg); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.gs-sup-scroll { overflow-x: auto; max-width: 100%; border-radius: 1rem; -webkit-overflow-scrolling: touch; }
.gs-sup-scroll:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.gs-sup-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.875rem; }
.gs-sup-table th, .gs-sup-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--gs-border); text-align: center; vertical-align: middle; }
.gs-sup-table tbody tr:last-child th, .gs-sup-table tbody tr:last-child td { border-bottom: 0; }
.gs-sup-table tbody th { text-align: left; font-weight: 500; color: var(--gs-fg); }
.gs-sup-table thead th { vertical-align: top; }
.gs-sup-featcol { text-align: left !important; vertical-align: bottom !important; font-size: 0.75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-muted); width: 28%; }
.gs-sup-plan.is-current, .gs-sup-table td.is-current { background: rgba(59,130,246,.08); }
.gs-sup-plan.is-current { box-shadow: inset 0 3px 0 #3b82f6; }
.gs-sup-plan-head { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-weight: 400; }
.gs-sup-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; min-height: 1.4rem; }
.gs-sup-badge {
  display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
  color: #93c5fd; background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.4);
}
.gs-sup-badge.is-popular { color: #fcd34d; background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.45); }
.gs-sup-plan-icon { display: inline-flex; color: #60a5fa; }
.gs-sup-plan-icon svg { width: 1.75rem; height: 1.75rem; }
.gs-sup-plan-name { font-size: 1rem; font-weight: 700; color: var(--gs-fg); }
.gs-sup-plan-price { font-size: 1.35rem; font-weight: 700; color: var(--gs-fg); white-space: nowrap; }
.gs-sup-per { font-size: 0.8rem; font-weight: 500; color: var(--gs-muted); }
.gs-sup-vat { margin-top: -0.3rem; }
.gs-sup-form { margin: 0.35rem 0 0; }
.gs-sup-select {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; min-width: 6rem;
  padding: 0.4rem 1rem; border-radius: 0.65rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  color: #fff; background: #2563eb; border: 1px solid #1d4ed8;
}
.gs-sup-select:hover { background: #1d4ed8; }
.gs-sup-select:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.gs-sup-select:disabled { opacity: .5; cursor: not-allowed; }
.gs-sup-select-wrap { display: inline-block; margin-top: 0.35rem; }
.gs-sup-current-mark {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; min-height: 2.25rem;
  font-size: 0.85rem; font-weight: 600; color: #34d399;
}
.gs-sup-current-mark svg { width: 1rem; height: 1rem; }
.gs-sup-yes { color: #34d399; width: 1.15rem; height: 1.15rem; display: inline-block; }
.gs-sup-no { color: #f87171; width: 1.15rem; height: 1.15rem; display: inline-block; }
.gs-sup-dash { color: var(--gs-muted); }
.gs-sup-val { font-weight: 600; color: var(--gs-fg); }
html.light .gs-sup-badge { color: #1d4ed8; background: #dbeafe; border-color: #93c5fd; }
html.light .gs-sup-badge.is-popular { color: #92400e; background: #fef3c7; border-color: #f59e0b; }
html.light .gs-sup-yes, html.light .gs-sup-current-mark { color: #047857; }
html.light .gs-sup-no { color: #b91c1c; }
/* keep the feature labels visible while the plan columns scroll sideways */
.gs-sup-table tbody th, .gs-sup-featcol { position: sticky; left: 0; z-index: 1; background: #0f2749; }
html.light .gs-sup-table tbody th, html.light .gs-sup-featcol { background: #fff; }
@media (max-width: 640px) {
  .gs-sup-current { padding: 1.1rem; }
  .gs-sup-table { min-width: 34rem; }
  .gs-sup-table th, .gs-sup-table td { padding: 0.65rem 0.6rem; }
  .gs-sup-table tbody th, .gs-sup-featcol { width: 7.5rem; min-width: 7.5rem; font-size: 0.8rem; }
}

/* /account/domains (Mijn domeinen). Table scrolls inside .gs-dom-scroll; the page never overflows at 375px. */
.gs-dom { min-width: 0; }
.gs-dom-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gs-dom-head-text { min-width: 0; }
.gs-dom-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; border-radius: 0.6rem;
  background: #2563eb; color: #fff !important; font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.gs-dom-btn svg { width: 1rem; height: 1rem; }
.gs-dom-btn:hover { background: #1d4ed8; }
.gs-dom-btn:focus-visible, .gs-dom-link:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.gs-dom-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 2.5rem 1.5rem; margin-bottom: 2.5rem; }
.gs-dom-illu { width: 10rem; height: 7.5rem; color: #60a5fa; }
.gs-dom-illu-accent { fill: #2563eb; }
.gs-dom-empty-title { font-size: 1.25rem; font-weight: 700; color: var(--gs-fg); margin: 0; }
.gs-dom-empty-body { color: var(--gs-muted); font-size: 0.9rem; max-width: 32rem; margin: 0 0 0.5rem; }
.gs-dom-scroll { overflow-x: auto; max-width: 100%; border-radius: 1rem; margin-bottom: 2.5rem; -webkit-overflow-scrolling: touch; }
.gs-dom-scroll:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.gs-dom-table { width: 100%; min-width: 56rem; border-collapse: collapse; font-size: 0.875rem; }
.gs-dom-table th, .gs-dom-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gs-border); text-align: left; vertical-align: top; }
.gs-dom-table thead th { font-size: 0.75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-muted); }
.gs-dom-table tbody tr:last-child th, .gs-dom-table tbody tr:last-child td { border-bottom: 0; }
.gs-dom-name { font-weight: 600; color: var(--gs-fg); overflow-wrap: break-word; word-break: break-word; position: sticky; left: 0; z-index: 1; background: #0f2749; }
html.light .gs-dom-name { background: #fff; }
.gs-dom-status { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--gs-border); color: var(--gs-fg); }
.gs-dom-status.is-registered { color: #6ee7b7; border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.12); }
.gs-dom-status.is-paid { color: #fcd34d; border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.12); }
.gs-dom-status.is-register-failed { color: #fca5a5; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.12); }
html.light .gs-dom-status.is-registered { color: #047857; background: #d1fae5; }
html.light .gs-dom-status.is-paid { color: #92400e; background: #fef3c7; }
html.light .gs-dom-status.is-register-failed { color: #b91c1c; background: #fee2e2; }
.gs-dom-soon { display: block; font-size: 0.75rem; color: #fcd34d; }
html.light .gs-dom-soon { color: #92400e; }
.gs-dom-sub { display: block; font-size: 0.75rem; color: var(--gs-muted); }
.gs-dom-dash { color: var(--gs-muted); }
.gs-dom-link { display: inline-flex; align-items: center; gap: 0.3rem; color: #60a5fa; font-weight: 600; text-decoration: none; white-space: nowrap; }
.gs-dom-link svg { width: 0.9rem; height: 0.9rem; }
.gs-dom-link:hover { text-decoration: underline; }
html.light .gs-dom-link { color: #1d4ed8; }
.gs-dash-card-count { font-size: 0.85rem; font-weight: 600; color: var(--gs-fg); }
@media (max-width: 640px) {
  .gs-dom-table { min-width: 50rem; }
  .gs-dom-table th, .gs-dom-table td { padding: 0.6rem 0.6rem; }
  .gs-dom-name { max-width: 10rem; min-width: 8.5rem; }
}

/* /account/domains/dns (DNS-beheer). Records table scrolls inside .gs-dom-scroll at 375px. */
.gs-dns-back { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--gs-muted); text-decoration: none; }
.gs-dns-back svg { width: 1rem; height: 1rem; }
.gs-dns-back:hover { color: var(--gs-fg); }
.gs-dns-zone { overflow-wrap: anywhere; }
.gs-dns-status:empty { display: none; }
.gs-dns-status { margin-bottom: 1rem; padding: .75rem 1rem; border-radius: .75rem; font-size: .875rem; border: 1px solid var(--gs-border); }
.gs-dns-status.is-ok { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.45); color: #a7f3d0; }
.gs-dns-status.is-error { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.45); color: #fecaca; }
.gs-dns-status.is-warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.45); color: #fde68a; }
html.light .gs-dns-status.is-ok { color: #065f46; } html.light .gs-dns-status.is-error { color: #991b1b; } html.light .gs-dns-status.is-warn { color: #92400e; }
.gs-dns-sync { padding: 1rem 1.25rem; margin-bottom: 1rem; }
.gs-dns-facts { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.gs-dns-lz { padding: 1.25rem; margin-bottom: 1.5rem; }
.gs-dns-lz-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.gs-dns-lz-field { flex: 1 1 14rem; min-width: 0; }
.gs-dns-label { display: block; font-size: .75rem; color: var(--gs-muted); margin-bottom: .3rem; }
.gs-dns-in { width: 100%; background: #0f172a; border: 1px solid #374151; color: #fff; border-radius: .5rem; padding: .4rem .55rem; font-size: .8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; min-width: 0; }
html.light .gs-dns-in { background: #fff; color: #0f172a; border-color: #cbd5e1; }
.gs-dns-in:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }
.gs-dns-in[aria-invalid="true"] { border-color: #ef4444; }
.gs-dns-type { width: 6rem; }
.gs-dns-num { width: 5.5rem; }
.gs-dns-val { min-width: 14rem; }
.gs-dns-table { min-width: 52rem; }
.gs-dns-table td { vertical-align: top; }
.gs-dns-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--gs-muted); }
.gs-dns-wrap { overflow-wrap: anywhere; word-break: break-all; }
.gs-dns-ro td { background: rgba(148,163,184,.05); }
.gs-dns-lock svg { width: 1rem; height: 1rem; color: var(--gs-muted); }
.gs-dns-del { display: inline-flex; padding: .35rem; border-radius: .5rem; background: none; border: 1px solid transparent; color: #fca5a5; cursor: pointer; }
.gs-dns-del svg { width: 1rem; height: 1rem; }
.gs-dns-del:hover { border-color: rgba(239,68,68,.45); }
.gs-dns-del:focus-visible, .gs-dns-add:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
html.light .gs-dns-del { color: #b91c1c; }
.gs-dns-err { margin: .35rem 0 0; padding: 0; list-style: none; font-size: .75rem; color: #fca5a5; }
html.light .gs-dns-err { color: #b91c1c; }
.gs-dns-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: -1.5rem; margin-bottom: 2rem; }
.gs-dns-add { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: .6rem; border: 1px solid var(--gs-border); background: none; color: var(--gs-fg); font-weight: 600; font-size: .9rem; cursor: pointer; }
.gs-dns-add svg { width: 1rem; height: 1rem; }
@media (max-width: 640px) { .gs-dns-table { min-width: 46rem; } }
/* /account/domains actions (KO /my/domains: two small outline buttons) + Verwijder dialog (reuses .gs-close-*) */
.gs-dom-actcol { text-align: right; }
.gs-dom-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.gs-dom-act { display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; background: transparent; line-height: 1.25rem; cursor: pointer; }
.gs-dom-act:hover { border-color: #38bdf8; color: #fff; }
.gs-dom-act.is-danger { border-color: #be123c; color: #fda4af; }
.gs-dom-act.is-danger:hover { border-color: #f43f5e; color: #ffe4e6; background: rgba(190,18,60,.15); }
.gs-dom-act:disabled { opacity: .45; cursor: not-allowed; }
.gs-dom-act:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
html.light .gs-dom-act { border-color: #9ca3af; color: #1f2937; }
html.light .gs-dom-act:hover { border-color: #0284c7; color: #0c4a6e; }
html.light .gs-dom-act.is-danger { border-color: #be123c; color: #be123c; }
html.light .gs-dom-act.is-danger:hover { background: #fff1f2; color: #9f1239; }
.gs-dom-flash:empty { display: none; }
.gs-dom-flash { margin-bottom: 1.25rem; padding: 0.8rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; overflow-wrap: anywhere;
  color: #a7f3d0; background: rgba(6,78,59,.4); border: 1px solid rgba(52,211,153,.45); }
.gs-dom-flash.is-error { color: #fecaca; background: rgba(127,29,29,.4); border-color: rgba(248,113,113,.5); }
html.light .gs-dom-flash { color: #065f46; background: #d1fae5; }
html.light .gs-dom-flash.is-error { color: #991b1b; background: #fee2e2; }
.gs-del-list { margin: 0.5rem 0 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; }
.gs-del-dialog .gs-close-btn:disabled { opacity: .5; cursor: not-allowed; }
.gs-del-dialog .gs-close-x, .gs-del-dialog .gs-close-cancel { text-decoration: none; }
/* /account/domains BastionMX column (switch = shared .bmx-toggle from period-toggle.css) */
.gs-bmx-col { white-space: nowrap; }
.gs-bmx-cell { display: flex; align-items: center; gap: 0.6rem; }
.gs-bmx-state { font-size: 0.8rem; color: var(--gs-muted); white-space: normal; max-width: 11rem; }
.gs-bmx-hint { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 0.75rem;
  font-size: 0.875rem; color: #bfdbfe; background: rgba(30,64,175,.25); border: 1px solid rgba(96,165,250,.4); }
.gs-bmx-hint svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: 0.1rem; }
html.light .gs-bmx-hint { color: #1e3a8a; background: #eff6ff; }
.gs-bmx-dialog { border-color: rgba(96,165,250,.5); }
.gs-bmx-body { font-size: 0.9rem; line-height: 1.5; margin: 0.4rem 0; overflow-wrap: anywhere; }
.gs-bmx-confirm { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.55rem 1.1rem;
  border-radius: 0.75rem; font-size: 0.875rem; font-weight: 600; color: #fff; background: #2563eb; border: 1px solid #1d4ed8; cursor: pointer; }
.gs-bmx-confirm.is-off { background: #475569; border-color: #334155; }
.gs-bmx-confirm:disabled { opacity: .5; cursor: not-allowed; }
.gs-bmx-confirm:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
/* /account/domains Landingzone column (inline select + save; state line per row) */
.gs-lz-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; max-width: 15rem; }
.gs-lz-select { max-width: 100%; min-width: 0; min-height: 2.25rem; background: #0f172a; border: 1px solid #374151; color: #fff;
  border-radius: .5rem; padding: .35rem .5rem; font-size: .8rem; }
html.light .gs-lz-select { background: #fff; color: #0f172a; border-color: #cbd5e1; }
.gs-lz-select:focus-visible, .gs-lz-save:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.gs-lz-select:disabled { opacity: .6; }
.gs-lz-save { min-height: 2.25rem; padding: .35rem .8rem; border-radius: .5rem; font-size: .8rem; font-weight: 600; color: #fff;
  background: #2563eb; border: 1px solid #1d4ed8; cursor: pointer; }
.gs-lz-save:disabled { opacity: .5; cursor: not-allowed; }
.gs-lz-state { flex: 1 1 100%; font-size: .75rem; color: var(--gs-muted); white-space: normal; }
.gs-lz-state:empty { display: none; }
.gs-lz-state.is-ok { color: #34d399; }
.gs-lz-state.is-error { color: #f87171; }
html.light .gs-lz-state.is-ok { color: #047857; }
html.light .gs-lz-state.is-error { color: #b91c1c; }
.gs-lz-none { display: inline-flex; align-items: center; gap: .5rem; }
/* Mobile: the domains table becomes cards (labels from data-label; the page never scrolls sideways) */
@media (max-width: 640px) {
  .gs-dom-scroll { overflow-x: visible; background: transparent; border: 0; box-shadow: none; }
  .gs-dom-table { min-width: 0; }
  .gs-dom-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .gs-dom-table, .gs-dom-table tbody, .gs-dom-table tr, .gs-dom-table th, .gs-dom-table td { display: block; width: 100%; }
  .gs-dom-table tbody tr { margin-bottom: 0.9rem; border: 1px solid var(--gs-border); border-radius: 1rem; padding: 0.4rem 0; background: rgba(15,39,73,.6); }
  html.light .gs-dom-table tbody tr { background: #fff; }
  .gs-dom-table tbody tr:last-child th, .gs-dom-table tbody tr:last-child td { border-bottom: 1px solid var(--gs-border); }
  .gs-dom-table tbody td:last-child, .gs-dom-table tbody tr:last-child td:last-child { border-bottom: 0; }
  .gs-dom-name { position: static; max-width: none; min-width: 0; background: transparent; font-size: 1rem; }
  html.light .gs-dom-name { background: transparent; }
  .gs-dom-table td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; }
  .gs-dom-table td[data-label]::before { content: attr(data-label); flex: 0 0 auto; text-align: left; font-size: 0.75rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--gs-muted); }
  .gs-dom-table td[data-label] > * { text-align: right; }
  .gs-bmx-cell { justify-content: flex-end; }
  .gs-lz-cell { justify-content: flex-end; max-width: 70%; }
  .gs-lz-state { text-align: right; }
  .gs-dom-actions { justify-content: stretch; }
  .gs-dom-actions > * { flex: 1 1 0; justify-content: center; min-height: 2.5rem; }
}

/* BastionMX: awaiting_payment actions + checkout block (period switch) in the confirm dialog */
.gs-bmx-pay { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.8rem; }
.gs-bmx-pay[hidden] { display: none; }
.gs-bmx-cancel { background: none; border: 0; padding: 0; color: #f87171; text-decoration: underline; cursor: pointer; font: inherit; }
.gs-bmx-cancel:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; border-radius: 2px; }
html.light .gs-bmx-cancel { color: #b91c1c; }
.gs-bmx-checkout { margin: 0.75rem 0 0; padding: 0.75rem; border: 1px solid var(--gs-border, #334155); border-radius: 0.75rem; }
.gs-bmx-checkout[hidden] { display: none; }
.gs-bmx-price { margin: 0.5rem 0 0; font-weight: 600; }

/* /account/kubernetes (Mijn Kubernetes). Cards: whole card links to the KO detail page via a stretched
   name link; tool badges and Verwijderen sit above it (no nested links). 1 column at 390px. */
.gs-k8s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.gs-k8s-card { position: relative; display: flex; flex-direction: column; gap: 0.7rem; padding: 1.15rem 1.2rem; border-radius: 1rem; min-width: 0;
  border: 1px solid var(--gs-border); transition: border-color .15s, box-shadow .15s, transform .15s; }
.gs-k8s-card:hover, .gs-k8s-card:focus-within { border-color: rgba(96,165,250,.6); box-shadow: 0 8px 28px rgba(37,99,235,.18); }
.gs-k8s-top { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.gs-k8s-ico { width: 1.35rem; height: 1.35rem; color: #60a5fa; flex: none; }
.gs-k8s-name { flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.gs-k8s-link { color: var(--gs-fg); text-decoration: none; }
.gs-k8s-link::after { content: ""; position: absolute; inset: 0; border-radius: 1rem; z-index: 0; }
.gs-k8s-link:focus-visible { outline: none; }
.gs-k8s-link:focus-visible::after { outline: 2px solid #60a5fa; outline-offset: 2px; }
.gs-k8s-card:hover .gs-k8s-link { color: #93c5fd; }
.gs-k8s-origin { flex: none; font-size: 0.65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px;
  border: 1px solid rgba(168,85,247,.5); color: #d8b4fe; background: rgba(168,85,247,.12); }
.gs-k8s-origin.is-internal { border-color: rgba(16,185,129,.5); color: #6ee7b7; background: rgba(16,185,129,.12); }
.gs-k8s-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; margin: 0; font-size: 0.85rem; color: var(--gs-muted); }
.gs-k8s-distro { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gs-fg); }
.gs-k8s-status.is-draft { color: #cbd5e1; border-color: rgba(148,163,184,.5); background: rgba(148,163,184,.12); }
.gs-k8s-status.is-paid { color: #6ee7b7; border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.12); }
.gs-k8s-price { margin: 0; font-size: 0.85rem; color: var(--gs-muted); }
.gs-k8s-amount { font-size: 1.2rem; font-weight: 700; color: var(--gs-fg); }
.gs-k8s-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-top: auto; flex-wrap: wrap; }
.gs-k8s-tools { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; min-width: 0; }
.gs-k8s-tool { display: inline-flex; align-items: center; line-height: 1.25; margin: 0; font-size: 0.65rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 0.35rem;
  color: #93c5fd; background: rgba(37,99,235,.2); box-shadow: 0 0 6px rgba(50,108,229,.4); text-decoration: none; }
.gs-k8s-tool:hover { background: rgba(37,99,235,.32); box-shadow: 0 0 10px rgba(50,108,229,.7); }
.gs-k8s-tool:focus-visible, .gs-k8s-del:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.gs-k8s-del { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; padding: 0.3rem 0.7rem; border-radius: 0.5rem;
  border: 1px solid rgba(244,63,94,.55); color: #fda4af; font-size: 0.8rem; font-weight: 600; text-decoration: none; background: transparent; }
.gs-k8s-del svg { width: 0.9rem; height: 0.9rem; }
.gs-k8s-del:hover { background: rgba(244,63,94,.14); }
html.light .gs-k8s-card:hover, html.light .gs-k8s-card:focus-within { border-color: #93c5fd; box-shadow: 0 8px 24px rgba(37,99,235,.12); }
html.light .gs-k8s-ico { color: #2563eb; }
html.light .gs-k8s-card:hover .gs-k8s-link { color: #1d4ed8; }
html.light .gs-k8s-origin { color: #7e22ce; background: #f3e8ff; }
html.light .gs-k8s-origin.is-internal { color: #047857; background: #d1fae5; }
html.light .gs-k8s-status.is-draft { color: #334155; background: #f1f5f9; }
html.light .gs-k8s-status.is-paid { color: #047857; background: #d1fae5; }
html.light .gs-k8s-tool { color: #1d4ed8; background: #dbeafe; box-shadow: 0 0 4px rgba(37,99,235,.2); }
html.light .gs-k8s-tool:hover { background: #bfdbfe; }
html.light .gs-k8s-del { color: #be123c; border-color: #fda4af; }
html.light .gs-k8s-del:hover { background: #ffe4e6; }
@media (max-width: 640px) {
  .gs-k8s-grid { grid-template-columns: 1fr; }
  .gs-k8s .gs-dom-head .gs-dom-btn { width: 100%; justify-content: center; }
}

/* /account/kubernetes/<id> (clusterdetail). Tables scroll inside .gs-k8d-scroll; meters are native <progress>
   (no inline width styles, no JS). Light + dark; at <=640px the secondary columns hide like the controller UI. */
.gs-k8d .gs-dns-back { margin-bottom: 1rem; }
.gs-k8d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.gs-k8d-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.65rem; min-width: 0; }
.gs-k8d-title h1 { overflow-wrap: anywhere; margin: 0; }
.gs-k8d-title .gs-k8s-ico { width: 1.75rem; height: 1.75rem; }
.gs-k8d-ext { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; border-radius: 0.6rem; border: 1px solid var(--gs-border);
  color: var(--gs-fg); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.gs-k8d-ext svg { width: 0.95rem; height: 0.95rem; }
.gs-k8d-ext:hover { border-color: #60a5fa; color: #93c5fd; }
.gs-k8d-ext:focus-visible, .gs-k8d-tab:focus-visible, .gs-k8d-sort:focus-visible, .gs-k8d-scroll:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.gs-k8d-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.25rem; margin: 0.25rem 0 1rem; }
.gs-k8d-counts { display: inline-flex; gap: 1.25rem; margin: 0; padding: 0.45rem 0.9rem; border-radius: 0.75rem; }
.gs-k8d-counts div { display: flex; align-items: baseline; gap: 0.45rem; }
.gs-k8d-counts dt { font-size: 0.68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gs-muted); }
.gs-k8d-counts dd { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--gs-fg); font-variant-numeric: tabular-nums; }
.gs-k8d-tools { margin-bottom: 1.25rem; }
.gs-k8d-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--gs-border); }
.gs-k8d-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border-radius: 0.65rem; font-size: 0.9rem; font-weight: 600;
  color: var(--gs-muted); text-decoration: none; border: 1px solid transparent; }
.gs-k8d-tab svg { width: 1rem; height: 1rem; }
.gs-k8d-tab:hover { color: var(--gs-fg); background: rgba(37,99,235,.12); }
.gs-k8d-tab[aria-current="page"] { background: #2563eb; color: #fff; }
.gs-k8d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.gs-k8d-panel { border-radius: 1rem; padding: 1.15rem 1.25rem; margin-bottom: 1rem; min-width: 0; }
.gs-k8d-h2 { font-size: 1.05rem; font-weight: 700; color: var(--gs-fg); margin: 0 0 0.35rem; }
.gs-k8d-sub { font-size: 0.78rem; color: var(--gs-muted); margin: 0; }
.gs-k8d-empty { color: var(--gs-muted); font-size: 0.9rem; margin: 0.25rem 0; }
.gs-k8d-note { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.82rem; color: var(--gs-muted); margin: 0 0 0.9rem;
  padding: 0.6rem 0.8rem; border-radius: 0.6rem; border: 1px dashed var(--gs-border); }
.gs-k8d-note svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.1rem; color: #fcd34d; }
/* meters (native progress) */
.gs-k8d-meter, .gs-k8d-pbar { -webkit-appearance: none; appearance: none; border: 0; display: block; overflow: hidden; background: rgba(16,185,129,.28); }
.gs-k8d-meter { width: 100%; height: 0.75rem; border-radius: 999px; margin-bottom: 0.45rem; }
.gs-k8d-meter::-webkit-progress-bar, .gs-k8d-pbar::-webkit-progress-bar { background: rgba(16,185,129,.28); border-radius: 999px; }
.gs-k8d-meter::-webkit-progress-value { background: #f43f5e; border-radius: 999px; }
.gs-k8d-meter::-moz-progress-bar { background: #f43f5e; border-radius: 999px; }
.gs-k8d-meter-row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.78rem; }
.gs-k8d-used { color: #fda4af; } .gs-k8d-tot { color: #6ee7b7; }
.gs-k8d-pm { display: inline-flex; align-items: center; gap: 0.45rem; }
.gs-k8d-pbar { width: 4.5rem; height: 0.45rem; border-radius: 999px; background: rgba(148,163,184,.25); }
.gs-k8d-pbar::-webkit-progress-bar { background: rgba(148,163,184,.25); }
.gs-k8d-pbar::-webkit-progress-value { background: #10b981; border-radius: 999px; }
.gs-k8d-pbar::-moz-progress-bar { background: #10b981; border-radius: 999px; }
.gs-k8d-pbar.is-warn::-webkit-progress-value { background: #f59e0b; } .gs-k8d-pbar.is-warn::-moz-progress-bar { background: #f59e0b; }
.gs-k8d-pbar.is-high::-webkit-progress-value, .gs-k8d-pbar.is-crit::-webkit-progress-value { background: #f43f5e; }
.gs-k8d-pbar.is-high::-moz-progress-bar, .gs-k8d-pbar.is-crit::-moz-progress-bar { background: #f43f5e; }
/* tables */
.gs-k8d-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; border-radius: 0.6rem; }
.gs-k8d-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.gs-k8d-table th, .gs-k8d-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--gs-border); text-align: left; vertical-align: middle; white-space: nowrap; }
.gs-k8d-table tbody tr:last-child th, .gs-k8d-table tbody tr:last-child td { border-bottom: 0; }
.gs-k8d-table thead th { font-size: 0.7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-muted); }
.gs-k8d-table tbody th { font-weight: 600; color: var(--gs-fg); }
.gs-k8d-table tbody tr:hover { background: rgba(37,99,235,.07); }
.gs-k8d-sort { display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; text-decoration: none; }
.gs-k8d-sort:hover { color: var(--gs-fg); }
.gs-k8d-ind { font-size: 0.65rem; min-width: 0.6rem; color: #60a5fa; }
.gs-k8d-num { font-variant-numeric: tabular-nums; }
.gs-k8d-muted { color: var(--gs-muted); }
.gs-k8d-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; }
.gs-k8d-claim { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.gs-k8d-cap { color: #6ee7b7; }
.gs-k8d-chip { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.7rem; background: rgba(148,163,184,.18); color: var(--gs-muted); }
.gs-k8d-chip.is-enc { background: rgba(16,185,129,.15); color: #6ee7b7; }
.gs-k8d-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; margin-right: 0.4rem; background: #94a3b8; vertical-align: middle; }
.gs-k8d-dot.is-ready, .gs-k8d-dot.is-ok { background: #10b981; }
.gs-k8d-dot.is-cordon, .gs-k8d-dot.is-warn { background: #f59e0b; }
.gs-k8d-dot.is-notready, .gs-k8d-dot.is-crit, .gs-k8d-dot.is-high { background: #f43f5e; }
.gs-k8d-num.is-ok { color: #6ee7b7; } .gs-k8d-num.is-warn { color: #fcd34d; } .gs-k8d-num.is-high, .gs-k8d-num.is-crit { color: #fda4af; }
.gs-k8d-rob { font-size: 0.68rem; color: var(--gs-muted); }
html.light .gs-k8d-tab[aria-current="page"] { color: #fff; }
html.light .gs-k8d-tab:hover { background: #eff6ff; color: #1d4ed8; }
html.light .gs-k8d-ext:hover { color: #1d4ed8; border-color: #93c5fd; }
html.light .gs-k8d-used { color: #be123c; } html.light .gs-k8d-tot, html.light .gs-k8d-cap { color: #047857; }
html.light .gs-k8d-meter, html.light .gs-k8d-meter::-webkit-progress-bar { background: #a7f3d0; }
html.light .gs-k8d-pbar, html.light .gs-k8d-pbar::-webkit-progress-bar { background: #e2e8f0; }
html.light .gs-k8d-chip { background: #f1f5f9; color: #475569; } html.light .gs-k8d-chip.is-enc { background: #d1fae5; color: #047857; }
html.light .gs-k8d-num.is-ok { color: #047857; } html.light .gs-k8d-num.is-warn { color: #b45309; } html.light .gs-k8d-num.is-high, html.light .gs-k8d-num.is-crit { color: #be123c; }
html.light .gs-k8d-table tbody tr:hover { background: #f8fafc; }
html.light .gs-k8d-ind { color: #2563eb; }
html.light .gs-k8d-note svg { color: #b45309; }
@media (max-width: 640px) {
  .gs-k8d-hide-sm { display: none; }
  .gs-k8d-head { flex-direction: column; }
  .gs-k8d-title h1 { font-size: 1.5rem; line-height: 2rem; }
  .gs-k8d-tab { flex: 1 1 auto; justify-content: center; padding: 0.5rem 0.6rem; font-size: 0.82rem; }
  .gs-k8d-table th, .gs-k8d-table td { padding: 0.5rem 0.45rem; }
  .gs-k8d-panel { padding: 1rem 0.9rem; }
  .gs-k8d-claim { white-space: normal !important; overflow-wrap: anywhere; max-width: 11rem; min-width: 8rem; }
}

/* ---- /account/kubernetes simple customer flow (simple_kubernetes.py) ---- */
.gs-k8x-admin { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; text-align: right; }
.gs-k8x-panel { padding: 1.25rem 1.5rem; margin: 0 0 1.25rem; }
.gs-k8x-h2 { font-size: 1.1rem; font-weight: 600; color: var(--gs-fg); margin: 0 0 .75rem; }
.gs-k8x-form { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.gs-k8x-inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; }
.gs-k8x-field { display: flex; flex-direction: column; gap: .35rem; border: 0; padding: 0; margin: 0; min-width: min(100%, 24rem); }
.gs-k8x-field label, .gs-k8x-field legend { font-size: .875rem; font-weight: 600; color: var(--gs-fg); }
.gs-k8x-field input[type=text], .gs-k8x select { background: transparent; color: var(--gs-fg); border: 1px solid var(--gs-border); border-radius: .6rem; padding: .5rem .75rem; font-size: .9rem; min-width: min(100%, 22rem); }
.gs-k8x select option { color: #111827; }
.gs-k8x-field input:focus-visible, .gs-k8x select:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.gs-k8x-choice { display: flex; gap: .5rem; align-items: baseline; font-weight: 400 !important; font-size: .875rem; color: var(--gs-muted); }
.gs-k8x-help { font-size: .8rem; color: var(--gs-muted); margin: .4rem 0 0; }
.gs-k8x-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .5rem 0 .25rem; }
.gs-k8x-state-body { font-size: .9rem; color: var(--gs-muted); margin: .75rem 0 1.25rem; }
.gs-k8x-state-body.is-error { color: #fca5a5; }
.gs-dom-status.gs-k8x-state.is-ready { color: #6ee7b7; border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.12); }
.gs-dom-status.gs-k8x-state.is-provisioning, .gs-dom-status.gs-k8x-state.is-installing, .gs-dom-status.gs-k8x-state.is-preparing { color: #93c5fd; border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.12); }
.gs-dom-status.gs-k8x-state.is-error { color: #fca5a5; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.12); }
html.light .gs-dom-status.gs-k8x-state.is-ready { color: #047857; background: #d1fae5; }
html.light .gs-dom-status.gs-k8x-state.is-provisioning, html.light .gs-dom-status.gs-k8x-state.is-installing, html.light .gs-dom-status.gs-k8x-state.is-preparing { color: #1d4ed8; background: #dbeafe; }
html.light .gs-dom-status.gs-k8x-state.is-error { color: #b91c1c; background: #fee2e2; }
html.light .gs-k8x select option { color: #111827; }
.gs-k8x-del { margin-top: .5rem; }
.gs-k8x .gs-dom-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Current plan (logged in): badge, highlighted column border, disabled "Huidig plan"; primary "Upgrade" */
.gs-sup-badge.is-current { color: #fff; background: #2563eb; border-color: #1d4ed8; }
.gs-sup-table th.gs-sup-plan.is-current { box-shadow: inset 0 3px 0 #3b82f6, inset 2px 0 0 #3b82f6, inset -2px 0 0 #3b82f6; }
.gs-sup-table td.is-current { box-shadow: inset 2px 0 0 #3b82f6, inset -2px 0 0 #3b82f6; }
.gs-sup-table tbody tr:last-child td.is-current { box-shadow: inset 2px 0 0 #3b82f6, inset -2px 0 0 #3b82f6, inset 0 -2px 0 #3b82f6; }
.gs-sup-select.is-current, .gs-sup-select.is-current:disabled { opacity: 1; cursor: default; color: #93c5fd;
  background: rgba(59,130,246,.12); border: 2px solid #3b82f6; }
.gs-sup-select.is-upgrade { background: #2563eb; border-color: #1d4ed8; box-shadow: 0 0 0 1px rgba(96,165,250,.35); }
html.light .gs-sup-select.is-current { color: #1d4ed8; background: #dbeafe; }

/* /wallet (wallet.py): balance card + ledger (reuses .gs-dom-table / .gs-dom-empty; mobile = cards via data-label) */
.gs-wal-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-muted); margin: 0 0 .25rem; }
.gs-wal-amount { font-size: 2rem; font-weight: 700; color: #60a5fa; margin: 0; font-variant-numeric: tabular-nums; }
html.light .gs-wal-amount { color: #1d4ed8; }
.gs-wal-pref { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .75rem 0 0; font-size: .875rem; color: var(--gs-muted); }
.gs-wal-pref strong { color: var(--gs-fg); }
.gs-wal-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; background: rgba(37,99,235,.15); color: #60a5fa; }
.gs-wal-empty-icon svg { width: 1.75rem; height: 1.75rem; }
.gs-wal-table { min-width: 40rem; }
.gs-wal-table .gs-wal-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gs-wal-table td:first-child { white-space: nowrap; }
.gs-wal-desc { overflow-wrap: anywhere; }
.gs-wal-credit { color: #34d399; font-weight: 600; }
.gs-wal-debit { color: #f87171; font-weight: 600; }
html.light .gs-wal-credit { color: #047857; }
html.light .gs-wal-debit { color: #b91c1c; }
.gs-wal-scroll { margin-bottom: 1rem; }
.gs-wal-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .875rem; margin-bottom: 2.5rem; }
.gs-wal-pageinfo { color: var(--gs-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .gs-wal-table { min-width: 0; }
  .gs-wal-table td:first-child { white-space: normal; }
  .gs-wal-table .gs-wal-num { text-align: right; }
  .gs-wal-pager { flex-wrap: wrap; }
}

/* /account/referral (referral.py): link + copy, stats, opt-in switch, terms (reuses gs-wal-* / gs-dom-table) */
.gs-ref-linkrow { display: flex; gap: .5rem; flex-wrap: wrap; margin: .25rem 0 1.25rem; }
.gs-ref-linkinput { flex: 1 1 18rem; min-width: 0; padding: .6rem .8rem; border-radius: .75rem; border: 1px solid rgba(148,163,184,.35); background: rgba(15,23,42,.5); color: var(--gs-fg); font-family: ui-monospace, monospace; font-size: .9rem; }
html.light .gs-ref-linkinput { background: #fff; color: #111827; }
.gs-ref-copy { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border-radius: .75rem; background: #2563eb; color: #fff; font-weight: 600; font-size: .875rem; }
.gs-ref-copy:hover { background: #3b82f6; }
.gs-ref-copy svg { width: 1rem; height: 1rem; }
.gs-ref-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 0; }
.gs-ref-stats dt { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-muted); }
.gs-ref-stats dd { margin: .2rem 0 0; font-size: 1.5rem; font-weight: 700; color: #60a5fa; font-variant-numeric: tabular-nums; }
html.light .gs-ref-stats dd { color: #1d4ed8; }
.gs-ref-sub { font-size: .75rem; color: var(--gs-muted); margin: .2rem 0 0; }
.gs-ref-how { list-style: decimal; padding-left: 1.25rem; display: grid; gap: .5rem; font-size: .9rem; color: var(--gs-fg); }
.gs-ref-badge { display: inline-block; margin-left: .5rem; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; vertical-align: middle; }
.gs-ref-badge.is-on { background: rgba(16,185,129,.18); color: #34d399; }
.gs-ref-badge.is-off { background: rgba(148,163,184,.18); color: var(--gs-muted); }
.gs-ref-switch { display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; font-size: .95rem; color: var(--gs-fg); }
.gs-ref-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gs-ref-track { position: relative; width: 2.75rem; height: 1.5rem; border-radius: 999px; background: rgba(148,163,184,.4); transition: background .15s; flex: none; }
.gs-ref-knob { position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #fff; transition: transform .15s; }
.gs-ref-switch input:checked + .gs-ref-track { background: #2563eb; }
.gs-ref-switch input:checked + .gs-ref-track .gs-ref-knob { transform: translateX(1.25rem); }
.gs-ref-switch input:focus-visible + .gs-ref-track { outline: 2px solid #60a5fa; outline-offset: 2px; }
.gs-ref-terms { border: 1px solid rgba(148,163,184,.25); border-radius: .75rem; padding: .75rem 1rem; }
.gs-ref-terms summary { cursor: pointer; font-weight: 600; color: var(--gs-fg); }
.gs-ref-terms-body { max-height: 22rem; overflow-y: auto; margin-top: .75rem; font-size: .85rem; color: var(--gs-muted); display: grid; gap: .6rem; white-space: pre-line; }
.gs-ref-st { font-size: .8rem; font-weight: 600; }
.gs-ref-st-paying { color: #34d399; }
.gs-ref-st-held { color: #fbbf24; }
.gs-ref-st-ended { color: #f87171; }
html.light .gs-ref-st-paying { color: #047857; }
/* /account/projects — Projecten met Globestar (phase 1) */
.gs-proj-kicker { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #38bdf8; margin: 0 0 .25rem; }
.gs-proj-tier { font-size: .8rem; color: var(--gs-muted); margin: .4rem 0 0; }
.gs-proj-admin { margin: 0 0 1rem; }
.gs-proj-form .gs-k8x-field { width: 100%; max-width: 40rem; }
.gs-proj textarea { background: transparent; color: var(--gs-fg); border: 1px solid var(--gs-border); border-radius: .6rem; padding: .5rem .75rem; font-size: .9rem; font-family: inherit; width: 100%; resize: vertical; min-height: 7rem; }
.gs-proj textarea:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.gs-proj-form .gs-k8x-field input[type=text] { width: 100%; }
.gs-proj-desc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; color: var(--gs-fg); margin: 0; }
.gs-proj-desc-short { font-size: .85rem; color: var(--gs-muted); margin: .5rem 0; overflow-wrap: anywhere; }
.gs-proj-upsell { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; margin: 0 0 1.25rem; }
.gs-proj-upsell-ico { width: 2rem; height: 2rem; flex: none; color: #38bdf8; }
.gs-proj-upsell-btn { margin-top: 1rem; text-decoration: none; }
.gs-proj-del { gap: .4rem; padding: .5rem 1rem; border: 1px solid; border-radius: .6rem; font-weight: 600; font-size: .9rem; }
.gs-proj-del svg { width: 1rem; height: 1rem; }
html.light .gs-proj-kicker, html.light .gs-proj-upsell-ico { color: #0369a1; }

/* /account/saas-deployments (saas_deployments.py): AI cards with n8n / Langflow instances */
.gs-saas-instances { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.gs-saas-inst { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
  padding-top: 0.65rem; border-top: 1px solid rgba(148,163,184,.18); }
.gs-saas-inst:first-child { border-top: 0; padding-top: 0; }
.gs-saas-empty { margin: 0.25rem 0 0; padding: 1rem 0.25rem 0.25rem; align-items: flex-start; text-align: left; }
.gs-saas-empty .gs-dom-empty-title { font-size: 1rem; }
.gs-saas-empty .gs-dom-btn { margin-top: 0.35rem; }
html.light .gs-saas-inst { border-top-color: rgba(148,163,184,.35); }

.gs-saas-lz { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.15rem; }
.gs-saas-lz-label { font-size: 0.75rem; font-weight: 600; color: var(--gs-muted, #94a3b8); letter-spacing: .02em; text-transform: uppercase; }
.gs-saas-lz-select { min-width: 11rem; }
.gs-saas-panel { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.35rem; }
.gs-saas-panel[hidden] { display: none !important; }
.gs-saas-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; }
.gs-saas-price-amount { font-size: 1.35rem; font-weight: 700; color: #fff; }
.gs-saas-price-unit, .gs-saas-price-excl { font-size: 0.8rem; color: var(--gs-muted, #94a3b8); }
html.light .gs-saas-price-amount { color: #0f172a; }
.gs-saas-eigen-free { margin: 0; }
.gs-saas-soon { margin: 0; }
/* simple cluster progress line (k8s_simple_detail.html, 2026-10-09) */
.gs-k8x-steps { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.gs-k8x-step { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--gs-muted); }
.gs-k8x-step-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 2px solid var(--gs-border); font-size: .8rem; font-weight: 700; }
.gs-k8x-step.is-done { color: var(--gs-fg); }
.gs-k8x-step.is-done .gs-k8x-step-dot { border-color: rgba(16,185,129,.6); background: rgba(16,185,129,.15); color: #6ee7b7; }
.gs-k8x-step.is-now { color: var(--gs-fg); font-weight: 600; }
.gs-k8x-step.is-now .gs-k8x-step-dot { border-color: #60a5fa; color: #93c5fd; animation: gs-k8x-pulse 1.6s ease-in-out infinite; }
.gs-k8x-step.is-error .gs-k8x-step-dot { border-color: rgba(239,68,68,.6); background: rgba(239,68,68,.12); color: #fca5a5; }
html.light .gs-k8x-step.is-done .gs-k8x-step-dot { color: #047857; background: #d1fae5; }
html.light .gs-k8x-step.is-now .gs-k8x-step-dot { color: #1d4ed8; }
html.light .gs-k8x-step.is-error .gs-k8x-step-dot { color: #b91c1c; background: #fee2e2; }
@keyframes gs-k8x-pulse { 50% { box-shadow: 0 0 0 4px rgba(96,165,250,.25); } }
@media (prefers-reduced-motion: reduce) { .gs-k8x-step.is-now .gs-k8x-step-dot { animation: none; } }
.gs-k8x-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .75rem; }
.gs-dom-status.gs-k8x-state.is-empty { color: var(--gs-muted); }
.gs-k8x-headacts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem; }

/* Empty-cluster wizard (templates/_k8s_wizard.html) — admin + customer Kubernetes detail */
.gs-k8w { padding: 1.5rem 1.75rem; margin: 0 0 1.5rem; border: 1px solid rgba(96,165,250,.35); }
.gs-k8w-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.25rem; }
.gs-k8w-intro { flex: 1 1 22rem; min-width: 0; }
.gs-k8w-title { display: flex; align-items: center; gap: .6rem; font-size: 1.5rem; font-weight: 700; color: var(--gs-fg); margin: 0 0 .35rem; }
.gs-k8w-title svg { color: #60a5fa; }
.gs-k8w-lead { color: var(--gs-muted); margin: 0 0 .6rem; max-width: 46rem; }
.gs-k8w-count { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; padding: .2rem .7rem; border-radius: 999px; background: rgba(96,165,250,.12); color: #93c5fd; margin: 0; }
.gs-k8w-count svg { width: 1rem; height: 1rem; }
.gs-k8w-add { font-size: 1.05rem; padding: .7rem 1.4rem; }
.gs-k8w-steps { margin-bottom: 1.25rem; }
.gs-k8w-steps .gs-k8x-step.is-now .gs-k8x-step-dot { animation: none; background: rgba(96,165,250,.15); }
.gs-k8w-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.gs-k8w-card { border: 1px solid var(--gs-border); border-radius: 1rem; padding: 1rem 1.25rem; background: rgba(255,255,255,.02); }
.gs-k8w-h3 { font-size: 1rem; font-weight: 700; color: var(--gs-fg); margin: 0 0 .5rem; }
.gs-k8w-list { margin: 0; padding-left: 1.1rem; list-style: disc; color: var(--gs-muted); font-size: .9rem; }
.gs-k8w-list li { margin: .25rem 0; }
.gs-k8w-advice { display: flex; gap: .75rem; align-items: flex-start; border-radius: 1rem; padding: .9rem 1.1rem; margin-bottom: 1rem; background: rgba(96,165,250,.10); border: 1px solid rgba(96,165,250,.35); }
.gs-k8w-advice svg { color: #fbbf24; flex: 0 0 auto; margin-top: .1rem; }
.gs-k8w-advice p { margin: .2rem 0 0; }
.gs-k8w-s3 { color: var(--gs-muted); font-size: .85rem; }
.gs-k8w-label { font-weight: 600; margin-right: .5rem; }
html.light .gs-k8w-count { color: #1d4ed8; }
html.light .gs-k8w-card { background: rgba(0,0,0,.02); }
/* cluster panel v2 (always shown; setup -> ready) */
.gs-k8w-headacts { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.gs-k8w-kc { display: inline-flex; align-items: center; gap: .35rem; }
.gs-k8w-count.is-ok { background: rgba(16,185,129,.15); color: #6ee7b7; }
.gs-k8w-sub { color: var(--gs-muted); font-weight: 400; font-size: .85em; }
.gs-k8w-steps.is-compact { margin-bottom: .75rem; font-size: .85rem; }
.gs-k8w.is-setup .gs-k8w-steps .gs-k8x-step.is-now .gs-k8x-step-dot { animation: gs-k8x-pulse 1.6s ease-in-out infinite; }
.gs-k8w-tips { border-radius: 1rem; padding: .9rem 1.1rem; margin: 0 0 1rem; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.3); }
.gs-k8w-tips .gs-k8w-h3 { display: flex; align-items: center; gap: .5rem; }
.gs-k8w-tips .gs-k8w-h3 svg { color: #fbbf24; width: 1.1rem; height: 1.1rem; }
.gs-k8w-tip.is-error { color: #fca5a5; }
.gs-k8w-tip.is-ok { color: #6ee7b7; }
.gs-k8w-nodes { margin: 0 0 1rem; }
.gs-k8w-tablewrap { overflow-x: auto; }
.gs-k8w-rm[disabled] { opacity: .55; cursor: not-allowed; }
.gs-k8w-soon { font-size: .75rem; padding: .05rem .4rem; border-radius: 999px; border: 1px solid var(--gs-border); }
.gs-k8w-act { margin: 0 0 1rem; }
.gs-k8w-storage { margin: 0 0 1rem; }
.gs-k8w-storage .gs-k8w-h3 { display: flex; align-items: center; gap: .5rem; }
.gs-k8w-explain > summary { cursor: pointer; margin: 0 0 .75rem; }
.gs-k8w-h4 { font-size: .95rem; font-weight: 700; color: var(--gs-fg); margin: 0 0 .4rem; }
html.light .gs-k8w-count.is-ok { color: #047857; background: #d1fae5; }
html.light .gs-k8w-tip.is-error { color: #b91c1c; }
html.light .gs-k8w-tip.is-ok { color: #047857; }
@media (prefers-reduced-motion: reduce) { .gs-k8w.is-setup .gs-k8w-steps .gs-k8x-step.is-now .gs-k8x-step-dot { animation: none; } }
.gs-k8w-busy { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; color: var(--gs-fg); }
.gs-k8w-busy svg { color: #60a5fa; width: 1.1rem; height: 1.1rem; }
.gs-dom-flash.is-info.gs-k8w-busy { display: block; padding: .75rem 1rem; border-radius: .75rem; background: rgba(96,165,250,.10); border: 1px solid rgba(96,165,250,.35); }
.gs-k8d-loading { display: flex; align-items: center; gap: .5rem; color: var(--gs-muted); padding: 1rem 0; }
.gs-k8d-loading svg { width: 1.1rem; height: 1.1rem; color: #60a5fa; }
/* six-step dot tracker (cluster + per node): now = green blinking, done = green, todo = grey, error = red */
.gs-k8t { margin: 0 0 1rem; }
.gs-k8t-h { margin-bottom: .5rem; }
.gs-k8t-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem .75rem; }
.gs-k8t-step { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .5rem; align-items: center; font-size: .85rem; }
.gs-k8t-step .gs-k8t-dot { grid-row: span 2; }
.gs-k8t-label { color: var(--gs-fg); font-weight: 600; line-height: 1.2; }
.gs-k8t-word { color: var(--gs-muted); font-size: .78rem; }
.gs-k8t-sub { grid-column: 2; color: var(--gs-fg); font-size: .78rem; opacity: .85; overflow-wrap: anywhere; }
.gs-k8t-step.is-error .gs-k8t-sub { color: #fca5a5; }
html.light .gs-k8t-step.is-error .gs-k8t-sub { color: #b91c1c; }
.gs-k8t-dot { display: inline-block; width: .85rem; height: .85rem; border-radius: 999px; background: #6b7280; flex: 0 0 auto; }
.gs-k8t-dot.is-done, .is-done > .gs-k8t-dot { background: #10b981; }
.gs-k8t-dot.is-now, .is-now > .gs-k8t-dot { background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: gs-k8t-blink 1.2s ease-in-out infinite; }
.gs-k8t-dot.is-error, .is-error > .gs-k8t-dot { background: #ef4444; }
.gs-k8t-dot.is-todo, .is-todo > .gs-k8t-dot { background: #6b7280; }
.gs-k8t-step.is-error .gs-k8t-word { color: #fca5a5; }
.gs-k8t-step.is-now .gs-k8t-word { color: #86efac; }
.gs-k8t-mini { display: inline-flex; gap: .3rem; align-items: center; }
.gs-k8t-mini .gs-k8t-dot { width: .7rem; height: .7rem; }
@keyframes gs-k8t-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 50% { opacity: .45; box-shadow: 0 0 0 .3rem rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .gs-k8t-dot.is-now, .is-now > .gs-k8t-dot { animation: none; } }
html.light .gs-k8t-step.is-error .gs-k8t-word { color: #b91c1c; }
html.light .gs-k8t-step.is-now .gs-k8t-word { color: #15803d; }

/* auto-HA: admin 'Maak master' (details/summary confirm, no inline JS) */
.gs-k8w-promote { display: inline-block; margin-right: .5rem; vertical-align: middle; }
.gs-k8w-promote > summary { cursor: pointer; list-style: none; display: inline-flex; gap: .35rem; align-items: center; font-size: .8rem; }
.gs-k8w-promote > summary::-webkit-details-marker { display: none; }
.gs-k8w-promote-form { margin-top: .5rem; max-width: 22rem; font-size: .8rem; display: grid; gap: .5rem; white-space: normal; }
.gs-k8w-flash { margin: 0 0 1rem; padding: .5rem .75rem; border-radius: .5rem; font-size: .85rem; }
.gs-k8w-flash.is-ok { background: rgba(16,185,129,.12); color: var(--gs-fg); }
.gs-k8w-flash.is-error { background: rgba(239,68,68,.12); color: var(--gs-fg); }
.gs-k8x-badge { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 600; background: rgba(163,230,53,.15); color: #a3e635; border: 1px solid rgba(163,230,53,.4); }
/* purchased SaaS tags on the cluster panel (2026-10-10) */
.gs-k8w-saas { margin: 0 0 1rem; }
.gs-k8w-saas-tags { list-style: none; padding: 0; margin: .25rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.gs-k8w-saas-tag { display: inline-flex; align-items: center; gap: .35rem; }
.gs-k8w-saas-tag a { color: inherit; text-decoration: none; }
.gs-k8w-saas-state { opacity: .75; font-size: .85em; }
.gs-k8w-saas-tag.is-installing .gs-k8w-saas-state { color: #86efac; opacity: 1; }
.gs-k8w-saas-tag.is-failed .gs-k8w-saas-state { color: #fca5a5; opacity: 1; }
html.light .gs-k8w-saas-tag.is-failed .gs-k8w-saas-state { color: #b91c1c; }
.gs-k8w-spin, .gs-k8w-saas-tag svg.lucide-loader { width: .9rem; height: .9rem; animation: gs-k8w-rot 1.2s linear infinite; }
@keyframes gs-k8w-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gs-k8w-spin, .gs-k8w-saas-tag svg.lucide-loader { animation: none; } }
/* Software card on the cluster page (Mark 2026-10-10) */
.gs-k8sw .gs-k8d-h2 { display: flex; align-items: center; gap: .45rem; }
.gs-k8sw-ico { width: 1.1rem; height: 1.1rem; color: var(--gs-accent, currentColor); }
.gs-k8sw .gs-k8w-saas-tag.is-installed { color: var(--gs-ok, #34d399); }
.gs-k8sw .gs-k8w-saas-tag.is-failed { color: var(--gs-warn, #fbbf24); }
.gs-k8d-disk-os { opacity: .55; cursor: help; }