:root {
  --ink:#282631;
  --muted:#77717f;
  --line:#eae7ef;
  --canvas:#f8f8fa;
  --surface:#fff;
  --purple:#7760dc;
  --purple-dark:#6550c4;
  --purple-light:#f1edfc;
  --green:#298663;
  --green-light:#edf8f2;
  --red:#b5474d;
  --sidebar:#191924;
  --font:'DM Sans',sans-serif;
  --heading:'Manrope',sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font);
  font-size:13px;
  line-height:1.55
}

button,input,select {
  font:inherit
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer;
  color:inherit
}

button:disabled {
  cursor:wait;
  opacity:.55
}

a {
  color:inherit;
  text-decoration:none
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-family:var(--heading)
}

[hidden] {
  display:none!important
}

svg.icon {
  width:19px;
  height:19px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

[data-icon] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}

button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #a38ae9;
  outline-offset:3px
}

.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  z-index:100;
  background:var(--sidebar);
  padding:12px 20px;
  color:#fff;
  border-radius:8px
}

.skip-link:focus {
  top:12px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.shell {
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  min-height:100vh
}

.sidebar {
  position:sticky;
  top:0;
  height:100vh;
  min-height:640px;
  padding:29px 20px 18px;
  background:var(--sidebar);
  color:#aaa8b7;
  display:flex;
  flex-direction:column;
  z-index:20
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font:800 31px var(--heading);
  letter-spacing:-1.6px;
  padding:0 8px
}

.brand-logo {
  display:block;
  width:44px;
  height:44px;
  flex-shrink:0;
  object-fit:contain;
  border-radius:9px;
  background:#030a14;
  border:1px solid #1b394c;
}

.hero.logo-hero {
  background:#edf4fc;
  border-color:#dfeaf5;
}

.hero.logo-hero h2 {
  color:#26354b;
}

.logo-hero .hero-visual {
  padding:18px;
  background:radial-gradient(ellipse at center,#082345,#02060d 80%);
  margin:0;
  transform:none;
  min-width:0;
  min-height:280px;
}

.brand-artwork {
  display:block;
  width:min(100%,260px);
  height:260px;
  object-fit:contain;
  border-radius:8px;
}

@media(max-width:760px) {
  .logo-hero .hero-visual { padding:14px; }
  .brand-artwork { height:230px; }
}

@media(max-width:440px) {
  .hero.logo-hero { grid-template-columns:1fr; }
  .hero.logo-hero .hero-visual {
    position:relative;
    right:auto;
    bottom:auto;
    opacity:1;
    min-height:210px;
    padding:14px;
  }
  .brand-artwork { width:200px; height:200px; }
}

.brand-mark {
  width:31px;
  height:36px;
  color:#c3b4ff
}

.brand-mark .icon {
  width:32px;
  height:32px;
  stroke-width:1.8
}

.brand-period {
  color:#ae95f1
}

.brand-label {
  font:600 8px var(--font);
  letter-spacing:1.8px;
  padding:4px 6px;
  border:1px solid #3b394b;
  border-radius:4px;
  margin-left:4px;
  color:#b1aebe
}

.workspace {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #353340;
  border-radius:8px;
  padding:12px 10px;
  margin:30px 0 27px;
  background:#21212e
}

.workspace-symbol {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  background:#363044;
  color:#d1b9fa;
  border-radius:6px;
  font:700 12px var(--heading)
}

.workspace div {
  display:grid;
  gap:1px
}

.workspace strong {
  color:#eeecf4;
  font-size:12px;
  font-weight:550
}

.workspace small {
  font-size:10px;
  color:#aaa6bb
}

.workspace-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#86c5a0;
  margin-left:auto
}

.nav-caption {
  padding:0 11px;
  margin-bottom:10px;
  font-size:9px;
  letter-spacing:1.6px;
  color:#9994aa;
  font-weight:650
}

nav {
  display:grid;
  gap:5px
}

.nav-link {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  transition:background .2s,color .2s
}

.nav-link [data-icon] {
  color:#9b96ac
}

.nav-link:hover {
  background:#252433;
  color:#fff
}

.nav-link.active {
  background:#343046;
  color:#ede6ff;
  box-shadow:inset 2px 0 #ad91ef
}

.nav-link.active [data-icon] {
  color:#c8b3fb
}

.nav-count {
  font-size:10px;
  background:#474056;
  color:#dacbfa;
  border-radius:4px;
  padding:0 6px;
  margin-left:auto
}

.second-caption {
  margin-top:30px
}

.sidebar-spacer {
  flex:1;
  min-height:30px
}

.sidebar-note {
  padding:17px 13px;
  border:1px solid #373344;
  background:linear-gradient(130deg,#2c263d,#242332);
  border-radius:8px
}

.note-icon {
  color:#c1a3f1;
  margin-bottom:11px
}

.sidebar-note strong {
  display:block;
  font-size:12px;
  color:#e1d7f0;
  font-weight:550
}

.sidebar-note p {
  font-size:11px;
  line-height:1.7;
  color:#b6adc8;
  margin:7px 0 13px
}

.sidebar-note a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:#c6b0e8
}

.sidebar-note a .icon {
  width:14px;
  height:14px
}

.sidebar-help {
  display:flex;
  gap:9px;
  align-items:center;
  width:100%;
  padding:16px 8px;
  border:0;
  background:transparent;
  color:#b8b1c9;
  font-size:11px
}

.sidebar-help [data-icon]:last-child {
  margin-left:auto
}

.sidebar-help .icon {
  width:16px;
  height:16px
}

.user-row {
  border-top:1px solid #32313f;
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 8px 0
}

.avatar,.small-avatar {
  display:grid;
  place-items:center;
  background:#dfd5f0;
  color:#64517a;
  font-weight:700;
  border-radius:50%
}

.profile-logo {
  display:block;
  object-fit:contain;
  border-radius:7px;
  border:1px solid #173954;
  background:#030a14;
}

.avatar {
  width:32px;
  height:32px;
  font-size:10px
}

.user-row div {
  display:grid;
  gap:2px
}

.user-row strong {
  font-size:11px;
  color:#e4dfed;
  font-weight:500
}

.user-row small {
  font-size:10px;
  color:#b0a8c2
}

.user-indicator {
  margin-left:auto;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7bb197
}

.workspace-body {
  min-width:0
}

.topbar {
  height:72px;
  padding:0 38px;
  border-bottom:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.topbar-left,.topbar-actions {
  display:flex;
  align-items:center;
  gap:17px
}

.workspace-breadcrumb {
  font-size:12px;
  color:#8b8495
}

.workspace-breadcrumb span {
  margin:0 14px;
  color:#b4aabd
}

.workspace-breadcrumb strong {
  font-weight:500;
  color:#4c4956
}

.connection-pill {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  color:#48785e
}

.connection-pill i,.tiny-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:#4c9f78;
  border-radius:50%
}

.connection-pill.offline {
  color:var(--red)
}

.connection-pill.offline i {
  background:var(--red)
}

.topbar-divider {
  width:1px;
  height:18px;
  background:var(--line)
}

.small-avatar {
  width:29px;
  height:29px;
  font-size:9px
}

.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:6px;
  width:34px;
  height:34px;
  background:#fff;
  color:#888492
}

.icon-button:hover {
  background:var(--purple-light);
  color:var(--purple)
}

.icon-button .icon {
  width:16px;
  height:16px
}

.mobile-menu {
  display:none
}

main {
  padding:32px 38px 0;
  max-width:1700px;
  margin:0 auto
}

.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:26px
}

.eyebrow {
  font-size:9px;
  font-weight:650;
  letter-spacing:1.65px;
  color:#807188;
  display:block;
  margin-bottom:6px
}

h1 {
  font-size:31px;
  font-weight:750;
  letter-spacing:-1.2px;
  line-height:1.35
}

.heading-dot {
  color:var(--purple)
}

.subtitle {
  font-size:12px;
  color:var(--muted);
  margin-top:5px
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  padding:10px 15px;
  border-radius:6px;
  font-size:12px;
  line-height:1.5;
  font-weight:550;
  transition:background .18s,box-shadow .18s;
  min-height:38px
}

.btn .icon {
  width:15px;
  height:15px
}

.btn.primary {
  color:#fff;
  background:var(--purple);
  box-shadow:0 3px 7px #7760dc18
}

.btn.primary:hover {
  background:var(--purple-dark);
  box-shadow:0 4px 12px #7760dc25
}

.btn.ghost {
  background:#fff;
  border-color:#e3dfe9;
  color:#66616e
}

.btn.ghost:hover {
  background:#f6f3fb
}

.btn.danger {
  background:#fff3f3;
  border-color:#f0d4d6;
  color:var(--red)
}

.btn.danger:hover {
  background:#f8e2e4
}

.connection-alert {
  padding:12px 16px;
  background:#fff2e8;
  border:1px solid #efceb2;
  border-radius:7px;
  color:#935e39;
  margin-bottom:18px;
  font-size:12px
}

.hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  min-height:267px;
  border:1px solid #e6e0ef;
  border-radius:12px;
  background:#eee9f4;
  overflow:hidden;
  position:relative;
  margin-bottom:24px
}

.hero-copy {
  position:relative;
  z-index:1;
  padding:30px 33px
}

.hero-eyebrow {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:8px;
  letter-spacing:1.6px;
  color:#7a678b;
  font-weight:650;
  margin-bottom:15px
}

.hero-eyebrow i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#8a70b8
}

.hero h2 {
  font-size:33px;
  font-weight:650;
  line-height:1.28;
  letter-spacing:-1.05px;
  color:#3b2f4e
}

.hero p {
  font-size:12px;
  color:#756681;
  line-height:1.8;
  margin-top:12px
}

.hero-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:600;
  color:#685281;
  margin-top:18px
}

.hero-link .icon {
  width:15px;
  height:15px
}

.hero-link:hover {
  color:#493064
}

.hero-visual {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:255px;
  background:radial-gradient(ellipse at 55% 64%,#c9b9e252,transparent 70%)
}

.orbit {
  position:absolute;
  width:280px;
  height:128px;
  border:1px solid #c6b8d96b;
  border-radius:50%;
  transform:rotate(-25deg);
  top:98px;
  left:calc(50% - 140px)
}

.orbit-two {
  width:340px;
  height:190px;
  top:66px;
  left:calc(50% - 170px)
}

.orbit-three {
  width:400px;
  height:245px;
  top:40px;
  left:calc(50% - 200px);
  opacity:.6
}

.storage-stack {
  position:relative;
  width:186px;
  height:166px;
  transform:rotate(-13deg);
  margin-top:6px;
  filter:drop-shadow(7px 18px 17px #76668e25)
}

.stack-layer {
  position:absolute;
  left:0;
  width:186px;
  height:60px;
  border-radius:11px;
  border:1px solid #ab9bc78a;
  background:linear-gradient(160deg,#fff,#dad0ea);
  box-shadow:0 13px 0 #b9a9d4,0 14px 0 #a393be;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 21px;
  transform:skewY(8deg)
}

.layer-top {
  top:0;
  z-index:3;
  background:linear-gradient(125deg,#faf7ff,#e5dcf3)
}

.layer-middle {
  top:47px;
  z-index:2
}

.layer-bottom {
  top:94px;
  z-index:1
}

.layer-top>[data-icon] .icon {
  width:31px;
  height:31px;
  color:#8d75b1
}

.stack-lights {
  display:flex;
  gap:5px
}

.stack-lights i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#a78dc8
}

.stack-lights i:last-child {
  background:#6d9f86
}

.stack-lines {
  width:41px;
  height:18px;
  background:repeating-linear-gradient(0deg,transparent 0 5px,#a592bd8c 5px 6px);
  border-radius:3px
}

.hero-chip {
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #ffffffd9;
  border-radius:7px;
  background:#ffffffb8;
  backdrop-filter:blur(8px);
  box-shadow:0 7px 15px #6554740b;
  padding:10px 13px;
  font-size:10px;
  font-weight:500;
  color:#756180;
  z-index:4
}

.hero-chip .icon {
  width:14px;
  height:14px
}

.chip-top {
  top:49px;
  right:22px
}

.chip-bottom {
  bottom:35px;
  left:15px
}

.chip-dot {
  width:5px;
  height:5px;
  background:#5e997c;
  border-radius:50%
}

.floating-dot {
  position:absolute;
  width:6px;
  height:6px;
  background:#bba7d5;
  border-radius:50%
}

.dot-one {
  top:48px;
  left:52px
}

.dot-two {
  bottom:43px;
  right:48px;
  width:4px;
  height:4px
}

.metric-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:25px
}

.metric-card {
  padding:18px 19px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  min-width:0
}

.metric-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#77717f;
  font-size:11px
}

.metric-icon {
  width:27px;
  height:27px;
  background:#f7f5fa;
  color:#8b789d;
  border-radius:6px
}

.metric-icon .icon {
  width:15px;
  height:15px
}

.metric-number {
  font:650 29px var(--heading);
  line-height:1.3;
  letter-spacing:-1px;
  display:block;
  margin:11px 0 14px
}

.metric-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:20px;
  font-size:10px;
  color:#7b7184
}

.metric-foot b {
  font-weight:500;
  color:#67616f
}

.metric-foot .icon {
  width:13px;
  height:13px
}

.metric-pill {
  border-radius:4px;
  background:var(--green-light);
  color:var(--green);
  font-size:9px;
  padding:2px 6px;
  white-space:nowrap
}

.metric-pill.warning {
  color:#91632b;
  background:#fff5e5
}

.panel {
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  min-width:0
}

.catalog-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:20px;
  align-items:start;
  margin-bottom:24px
}

.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px 17px
}

.panel-heading h2 {
  font-size:15px;
  font-weight:650;
  letter-spacing:-.35px;
  display:flex;
  align-items:center;
  gap:8px
}

.panel-heading p {
  font-size:11px;
  color:#7b7184;
  margin-top:5px
}

.count-badge {
  display:inline-block;
  font:500 10px var(--font);
  background:#f2eef8;
  color:#82669d;
  padding:1px 6px;
  border-radius:4px
}

.text-link {
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  font-size:11px;
  color:#806395
}

.text-link .icon {
  width:13px;
  height:13px
}

.catalog-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid #f4f2f7;
  padding:11px 20px
}

.filter-tabs {
  display:flex;
  align-items:center;
  gap:2px
}

.filter-tab {
  border:0;
  background:transparent;
  color:#7d6f88;
  padding:7px 9px;
  border-radius:5px;
  font-size:10px;
  white-space:nowrap;
  min-height:32px
}

.filter-tab.active {
  background:#f1edfa;
  color:#725092;
  font-weight:600
}

.filter-tab:hover {
  background:#f8f5fc
}

.search {
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid #e6e0ec;
  border-radius:5px;
  max-width:180px;
  padding:7px 8px
}

.search [data-icon] {
  color:#94829f
}

.search .icon {
  width:13px;
  height:13px
}

.search input {
  border:0;
  background:transparent;
  font-size:10px;
  outline:none;
  width:100%;
  min-width:0;
  color:#61566f
}

.search:focus-within {
  border-color:#b499df;
  outline:2px solid #ded2f2;
  outline-offset:2px
}

.search input::placeholder {
  color:#807188
}

.table-scroll {
  overflow-x:auto
}

table {
  border-collapse:collapse;
  width:100%;
  text-align:left;
  font-size:11px
}

th {
  background:#faf9fc;
  color:#807188;
  font-size:10px;
  font-weight:500;
  padding:10px 13px;
  white-space:nowrap;
  border-top:1px solid #f0edf4;
  border-bottom:1px solid #f0edf4
}

th:first-child,td:first-child {
  padding-left:22px
}

th:last-child,td:last-child {
  padding-right:20px
}

td {
  padding:14px 13px;
  border-bottom:1px solid #f3f0f6;
  color:#786a85;
  white-space:nowrap
}

tbody tr:last-child td {
  border-bottom:0
}

tbody tr:hover {
  background:#fcfbfe
}

.object-name {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:180px;
  max-width:280px
}

.object-file-icon {
  display:grid;
  place-items:center;
  background:#f3effa;
  border:1px solid #ebe3f5;
  border-radius:6px;
  width:29px;
  height:33px;
  color:#9b7ab7;
  flex-shrink:0
}

.object-file-icon .icon {
  width:16px;
  height:16px
}

.object-file-icon.media {
  background:#eef4fa;
  color:#6688a2;
  border-color:#e4ecf3
}

.object-file-icon.code {
  background:#edf6f1;
  color:#5b896f;
  border-color:#e0ede6
}

.object-file-icon.archive {
  background:#fbf3e8;
  color:#a07c4c;
  border-color:#f2e7d4
}

.object-name strong {
  font-size:11px;
  font-weight:550;
  color:#61506d;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:195px
}

.object-name small {
  font-size:9px;
  color:#807188;
  display:block;
  margin-top:2px
}

.storage-tag {
  font-size:9px;
  border-radius:4px;
  background:#fbf0e5;
  color:#946f3e;
  padding:3px 6px
}

.storage-tag.cold {
  background:#edf3fb;
  color:#54739a
}

.health-tag {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:9px;
  padding:3px 6px;
  border-radius:4px;
  color:#437958;
  background:#f0f8f2
}

.health-tag i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor
}

.health-tag.degraded {
  color:#926e36;
  background:#fff6e9
}

.health-tag.unavailable {
  color:#a04a55;
  background:#fff0f1
}

.download-link {
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:5px;
  color:#8c719e
}

.download-link .icon {
  width:15px;
  height:15px
}

.download-link:hover {
  color:var(--purple);
  background:var(--purple-light)
}

.object-actions {
  display:flex;
  align-items:center;
  gap:4px
}

.object-action {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex-shrink:0;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#705686;
  cursor:pointer
}

.object-action .icon {
  width:16px;
  height:16px
}

.object-action:hover {
  color:var(--purple);
  background:var(--purple-light)
}

.delete-action:hover {
  color:#a52b43;
  background:#fff0f1
}

.object-action:disabled {
  opacity:.45;
  cursor:wait
}

#preview-dialog {
  width:min(800px,calc(100% - 32px))
}

.preview-content {
  padding:clamp(18px,4vw,28px)
}

#preview-title,#preview-key,#confirm-description {
  overflow-wrap:anywhere
}

.preview-metadata {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  padding:14px 0;
  border-block:1px solid #eee7f5;
  font-size:12px
}

.preview-metadata dt {
  color:var(--muted);
  margin-bottom:4px
}

.preview-metadata dd {
  margin:0;
  font-weight:600
}

.preview-status {
  font-size:12px;
  line-height:1.6;
  margin:16px 0;
  color:#655575
}

.preview-body {
  max-height:50dvh;
  overflow:auto;
  border-radius:8px;
  background:#f6f4f9
}

.preview-body img {
  display:block;
  width:auto;
  max-width:100%;
  max-height:50dvh;
  object-fit:contain;
  margin:auto
}

.preview-body pre {
  margin:0;
  padding:18px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:12px/1.7 ui-monospace,Consolas,monospace
}

.catalog-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:#7b7184;
  padding:12px 21px;
  border-top:1px solid #f1edf5;
  gap:12px
}

.catalog-footer>span:last-child {
  display:flex;
  align-items:center;
  gap:6px
}

.empty-state {
  text-align:center;
  padding:30px 20px 34px
}

.empty-state.hidden {
  display:none
}

.empty-icon {
  margin-bottom:12px;
  width:43px;
  height:43px;
  background:var(--purple-light);
  border-radius:10px;
  color:var(--purple)
}

.empty-state h3 {
  font-size:15px;
  font-weight:600
}

.empty-state p {
  font-size:12px;
  color:var(--muted);
  margin:6px 0 17px
}

.empty-state .btn {
  font-size:11px
}

.storage-aside {
  display:grid;
  gap:16px
}

.policy-card .panel-heading {
  padding:20px 19px 9px;
  align-items:start
}

.policy-card .panel-heading h2 {
  font-size:14px;
  line-height:1.5;
  max-width:160px
}

.policy-card .eyebrow {
  font-size:8px
}

.policy-shield {
  color:#9473ae;
  background:#f5f0fb;
  border-radius:6px;
  width:28px;
  height:28px
}

.policy-shield .icon {
  width:16px;
  height:16px
}

.policy-visual {
  padding:13px 19px 16px;
  display:flex;
  align-items:center;
  gap:14px
}

.replica-group {
  display:flex
}

.replica-group>[data-icon] {
  width:32px;
  height:36px;
  background:#f4edf9;
  color:#9675b0;
  border:3px solid #fff;
  border-radius:7px;
  margin-left:-5px
}

.replica-group>[data-icon]:first-child {
  margin:0
}

.replica-group .icon {
  width:18px;
  height:18px
}

.policy-type {
  font-size:11px;
  color:#8a6f9e
}

.policy-list {
  margin:0;
  padding:0 19px 16px;
  display:grid;
  gap:11px
}

.policy-list>div {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:10px
}

.policy-list dt {
  color:#85728f
}

.policy-list dd {
  margin:0;
  color:#725780;
  font-weight:500
}

.policy-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 19px;
  font-size:10px;
  color:#866198;
  border-top:1px solid #f0e9f5
}

.policy-link .icon {
  width:13px;
  height:13px
}

.quick-tip {
  display:flex;
  gap:11px;
  padding:16px 15px;
  border:1px solid #e8e4ef;
  border-radius:8px;
  background:#f2eff7;
  color:#8f77a3
}

.quick-tip .icon {
  width:16px;
  height:16px
}

.quick-tip strong {
  font-size:11px;
  font-weight:550;
  color:#776183
}

.quick-tip p {
  font-size:10px;
  line-height:1.8;
  margin:6px 0 8px;
  color:#81718e
}

.quick-tip a {
  font-size:10px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#826495
}

.quick-tip a .icon {
  width:12px;
  height:12px
}

.infrastructure-panel {
  margin-bottom:24px
}

.subtle-label {
  font:400 10px var(--font);
  color:#85788f;
  margin-left:5px
}

.legend {
  display:flex;
  gap:12px;
  font-size:9px;
  color:#85748f;
  white-space:nowrap
}

.legend span {
  display:flex;
  align-items:center;
  gap:5px
}

.legend i {
  width:5px;
  height:5px;
  border-radius:50%
}

.healthy-dot {
  background:#78b899
}

.warn-dot {
  background:#d7ae75
}

.down-dot {
  background:#d28c96
}

.node-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:0 22px 20px
}

.zone-column {
  padding:13px 12px;
  background:#faf9fc;
  border:1px solid #f0edf5;
  border-radius:7px
}

.zone-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:11px;
  font-size:10px;
  color:#867096
}

.zone-heading strong {
  font-weight:550;
  color:#796183
}

.zone-heading span {
  font-size:9px
}

.zone-nodes {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}

.node-card {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  border:1px solid #e0e9df;
  border-radius:4px;
  padding:6px 7px;
  background:#f2f8f3;
  color:#4d775d;
  cursor:default
}

.node-card .icon {
  width:11px;
  height:11px
}

.node-card.offline {
  color:#a25768;
  background:#fff0f3;
  border-color:#f2dde3
}

.node-card.partitioned {
  color:#98743f;
  background:#fff8eb;
  border-color:#f0e3cd
}

.infra-footer {
  border-top:1px solid #f1edf5;
  padding:11px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:10px;
  color:#7b7184
}

.infra-footer>span:first-child {
  display:flex;
  gap:6px;
  align-items:center
}

.infra-footer .icon {
  width:12px;
  height:12px
}

.maintenance-section {
  margin-bottom:24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff
}

.maintenance-section summary {
  padding:15px 20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:#7c6d8a
}

.maintenance-section summary .icon {
  width:15px;
  height:15px
}

.maintenance-content {
  padding:0 20px 20px
}

.maintenance-content>p {
  font-size:12px;
  color:var(--muted);
  margin:3px 0 16px
}

.maintenance-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.activity-panel {
  margin-bottom:25px
}

.live-label {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:#85788f
}

.timeline {
  padding:0 22px 9px
}

.event {
  display:grid;
  grid-template-columns:28px 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-top:1px solid #f3eff6
}

.event-icon {
  display:grid;
  place-items:center;
  background:#f2eef8;
  border-radius:6px;
  color:#9376aa;
  width:28px;
  height:28px
}

.event-icon .icon {
  width:14px;
  height:14px
}

.event.failure .event-icon,.event.corruption .event-icon {
  color:#a46970;
  background:#fff2f2
}

.event strong {
  display:block;
  font-size:11px;
  font-weight:500;
  color:#705a7e
}

.event small {
  font-size:10px;
  color:#7b7184;
  display:block;
  margin-top:2px;
  overflow-wrap:anywhere
}

.event time {
  font-size:10px;
  color:#7b7184;
  white-space:nowrap
}

.page-footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  border-top:1px solid var(--line);
  padding:20px 0 25px;
  color:#7b7184;
  font-size:10px
}

.footer-brand {
  font:750 13px var(--heading);
  letter-spacing:-.7px;
  margin-right:9px;
  color:#85669c
}

.plans-intro {
  padding:23px 0 30px;
  max-width:570px
}

.plans-intro h2 {
  font-size:37px;
  line-height:1.3;
  letter-spacing:-1.5px;
  font-weight:650;
  color:#665474
}

.plans-intro p {
  font-size:12px;
  color:#81718e;
  margin-top:14px;
  line-height:1.8
}

.plans-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:23px;
  margin-bottom:35px
}

.plan-card {
  padding:30px;
  border:1px solid #e9e1f0;
  border-radius:12px;
  background:#fff
}

.plan-icon {
  display:flex;
  width:43px;
  height:43px;
  border-radius:9px;
  background:#f5ecfb;
  color:#9370af;
  margin-bottom:20px
}

.plan-label {
  font-size:9px;
  letter-spacing:1.6px;
  color:#887097
}

.plan-card h3 {
  font-size:25px;
  letter-spacing:-.7px;
  color:#7c5d94;
  margin:8px 0
}

.plan-card>p {
  font-size:12px;
  color:#81718e;
  max-width:330px;
  line-height:1.8
}

.plan-number {
  font:600 37px var(--heading);
  color:#8d69a8;
  letter-spacing:-1.5px;
  margin:23px 0
}

.plan-number span {
  font:400 11px var(--font);
  letter-spacing:0;
  margin-left:10px;
  color:#85718f
}

.plan-card ul {
  padding-left:17px;
  display:grid;
  gap:12px;
  color:#81718e;
  font-size:12px;
  margin:0 0 30px
}

.plan-card li::marker {
  color:#b597ca
}

.cold-plan {
  background:#f7f5fc
}

.cold-plan .plan-icon {
  background:#eae7f8;
  color:#8c85b4
}

dialog {
  width:min(485px,calc(100% - 32px));
  max-height:calc(100dvh - 40px);
  overflow:auto;
  border:1px solid #eee7f5;
  border-radius:12px;
  padding:0;
  background:#fff;
  color:var(--ink);
  box-shadow:0 30px 120px #20173140
}

dialog::backdrop {
  background:#1715236b;
  backdrop-filter:blur(4px)
}

dialog form,.guide-content,.confirm-content {
  padding:28px
}

.dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:15px;
  margin-bottom:23px
}

.dialog-head h2 {
  font-size:21px;
  letter-spacing:-.7px;
  font-weight:650
}

.dialog-head p {
  font-size:12px;
  color:var(--muted);
  margin-top:6px
}

.field-label {
  display:block;
  font-size:12px;
  font-weight:550;
  margin:16px 0 7px
}

#object-key,dialog select {
  width:100%;
  border:1px solid #e5dfec;
  border-radius:6px;
  padding:10px 12px;
  font-size:12px;
  background:#fff;
  color:#78678b
}

.field-help {
  display:block;
  font-size:10px;
  color:#81718e;
  margin-top:6px
}

.drop-zone {
  display:grid;
  justify-items:center;
  gap:8px;
  border:1px dashed #d3c3e0;
  border-radius:8px;
  padding:24px 12px;
  background:#fcfaff;
  margin-top:21px;
  position:relative;
  cursor:pointer
}

.drop-zone input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer
}

.drop-zone:focus-within {
  outline:3px solid #b99edb;
  outline-offset:3px
}

.upload-icon {
  width:38px;
  height:38px;
  border-radius:8px;
  background:#f3edf9;
  color:#9673ad;
  margin-bottom:5px
}

.drop-zone strong {
  font-size:12px;
  font-weight:500;
  color:#8961a0
}

.drop-zone strong span {
  font-weight:400;
  color:#81718e
}

.drop-zone small {
  font-size:10px;
  color:#81718e
}

.drop-zone.dragging {
  border-color:#a27bc0;
  background:#f0e5f9
}

.advanced-policy {
  border-top:1px solid #f0eaf6;
  margin-top:18px;
  padding-top:12px
}

.advanced-policy summary {
  font-size:11px;
  color:#887197;
  cursor:pointer
}

.advanced-policy fieldset {
  padding:13px 0 0;
  border:0;
  margin:0
}

.policy-inputs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}

.policy-inputs label {
  font-size:10px;
  color:#877196
}

.policy-inputs select {
  margin-top:6px;
  font-size:11px;
  padding:8px
}

.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  border-top:1px solid #f0ebf5;
  padding-top:17px;
  margin-top:20px
}

.upload-status {
  font-size:11px;
  color:#8b69a1;
  margin-top:15px
}

.confirm-icon {
  color:#b17a86;
  background:#fff1f3;
  width:39px;
  height:39px;
  border-radius:9px;
  margin-bottom:14px
}

.confirm-content h2 {
  font-size:20px;
  letter-spacing:-.5px
}

.confirm-content>p {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  margin-top:12px
}

.guide-content>p {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  margin-top:15px
}

.guide-content>p strong {
  font-weight:600;
  color:#7e5c97
}

.guide-status {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:11px;
  color:#81718e;
  margin:20px 0;
  padding:12px;
  background:#faf5fc;
  border-radius:6px
}

.guide-content>.btn {
  margin-top:5px
}

.toast-region {
  position:fixed;
  bottom:24px;
  right:24px;
  display:grid;
  gap:10px;
  z-index:100
}

.toast {
  display:flex;
  gap:12px;
  align-items:start;
  padding:15px 18px;
  max-width:min(390px,calc(100vw - 40px));
  border:1px solid #ded2ec;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 40px #48315824;
  color:#9580a4;
  animation:toast-in .2s ease
}

.toast>span {
  color:#6f9a83;
  font-size:15px
}

.toast strong {
  font-size:12px;
  font-weight:600;
  display:block;
  color:#7a568a
}

.toast small {
  font-size:11px;
  color:#8d749b;
  display:block;
  overflow-wrap:anywhere;
  margin-top:3px
}

.toast.error {
  border-color:#eccfd4
}

.toast.error>span {
  color:#ba7884
}

.sidebar-overlay {
  display:none
}

@keyframes toast-in {
  from {
    transform:translateY(10px);
    opacity:0
  }
  to {
    transform:translateY(0);
    opacity:1
  }
}

@media(min-width:1600px) {
  main {
    padding-left:55px;
    padding-right:55px
  }
  .hero {
    min-height:290px
  }
  .hero-copy {
    padding:35px 40px
  }
  .hero h2 {
    font-size:37px
  }
  .hero-visual {
    min-height:290px
  }
}

@media(max-width:1200px) {
  .shell {
    grid-template-columns:210px minmax(0,1fr)
  }
  .sidebar {
    padding-inline:15px
  }
  main {
    padding:27px 26px 0
  }
  .topbar {
    padding-inline:26px
  }
  .catalog-layout {
    grid-template-columns:minmax(0,1fr) 235px;
    gap:16px
  }
  .catalog-toolbar {
    flex-wrap:wrap
  }
  .search {
    max-width:none;
    flex:1;
    min-width:130px
  }
  .metric-grid {
    gap:12px
  }
  .metric-card {
    padding:15px
  }
  .metric-foot {
    flex-wrap:wrap;
    gap:3px
  }
  .hero h2 {
    font-size:28px
  }
  .hero-copy {
    padding:28px
  }
  .chip-top {
    right:8px
  }
  .hero-chip {
    font-size:9px;
    padding:7px 8px
  }
}

@media(max-width:1000px) {
  .catalog-layout {
    grid-template-columns:minmax(0,1fr)
  }
  .storage-aside {
    grid-template-columns:1fr 1fr
  }
  .policy-card .panel-heading h2 {
    max-width:none
  }
  .metric-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .hero h2 {
    font-size:26px
  }
  .hero-visual {
    transform:scale(.9);
    transform-origin:center
  }
  .hero-copy {
    padding:26px
  }
  .infra-footer {
    flex-wrap:wrap
  }
  .subtle-label {
    display:none
  }
  .legend {
    gap:8px
  }
  .node-grid {
    gap:8px;
    padding-inline:16px
  }
  .zone-column {
    padding:10px 8px
  }
  .node-card {
    flex:1;
    justify-content:center
  }
  .plans-grid {
    gap:15px
  }
  .plan-card {
    padding:23px
  }
}

@media(max-width:760px) {
  .shell {
    display:block
  }
  .sidebar {
    position:fixed;
    left:0;
    top:0;
    width:238px;
    min-height:0;
    height:100dvh;
    transform:translateX(-100%);
    transition:transform .2s
  }
  .sidebar.open {
    transform:translateX(0)
  }
  .sidebar-overlay:not([hidden]) {
    display:block;
    position:fixed;
    inset:0;
    border:0;
    background:#17152366;
    z-index:19
  }
  .mobile-menu {
    display:inline-flex
  }
  .topbar {
    height:60px;
    padding:0 18px
  }
  .topbar-left,.topbar-actions {
    gap:10px
  }
  .workspace-breadcrumb {
    font-size:11px
  }
  .workspace-breadcrumb span {
    margin:0 7px
  }
  .topbar-divider {
    display:none
  }
  main {
    padding:23px 18px 0
  }
  .page-heading {
    gap:12px;
    margin-bottom:20px
  }
  h1 {
    font-size:27px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.2px
  }
  .subtitle {
    font-size:11px;
    max-width:210px
  }
  .page-heading>.btn {
    padding:9px 10px;
    font-size:11px;
    white-space:nowrap
  }
  .hero {
    grid-template-columns:1fr .8fr;
    min-height:245px
  }
  .hero-copy {
    padding:24px 20px
  }
  .hero h2 {
    font-size:25px
  }
  .hero p {
    font-size:11px
  }
  .hero-visual {
    transform:scale(.78);
    min-width:190px;
    margin-left:-20px
  }
  .hero-chip {
    display:none
  }
  .hero-eyebrow {
    font-size:7px
  }
  .hero-link {
    font-size:10px
  }
  .metric-grid {
    gap:10px;
    margin-bottom:20px
  }
  .metric-number {
    font-size:26px
  }
  .metric-head {
    font-size:10px
  }
  .metric-foot {
    font-size:9px
  }
  .catalog-layout {
    margin-bottom:20px
  }
  .panel-heading {
    padding:17px 16px
  }
  .panel-heading h2 {
    font-size:14px
  }
  .catalog-toolbar {
    padding:10px 13px
  }
  .filter-tabs {
    gap:0
  }
  .filter-tab {
    font-size:10px;
    padding:7px
  }
  .search {
    min-width:135px
  }
  .table-scroll table {
    min-width:630px
  }
  .catalog-footer {
    padding:12px 16px
  }
  .node-grid {
    grid-template-columns:1fr;
    padding:0 16px 16px;
    gap:10px
  }
  .zone-nodes {
    flex-wrap:nowrap
  }
  .node-card {
    font-size:9px;
    padding:7px 6px
  }
  .legend {
    font-size:9px
  }
  .infrastructure-panel .panel-heading {
    flex-wrap:wrap;
    gap:11px
  }
  .zone-heading {
    font-size:11px
  }
  .zone-heading span {
    font-size:10px
  }
  .infra-footer {
    padding:12px 16px;
    font-size:10px
  }
  .event {
    gap:8px;
    grid-template-columns:24px minmax(0,1fr) auto
  }
  .event strong {
    overflow-wrap:anywhere
  }
  .timeline {
    padding-inline:16px
  }
  .storage-aside {
    gap:10px
  }
  .quick-tip {
    padding:14px 12px
  }
  .page-footer {
    flex-wrap:wrap;
    font-size:9px
  }
  .plans-grid {
    grid-template-columns:1fr
  }
  .plans-intro h2 {
    font-size:30px
  }
  .plan-card {
    padding:25px
  }
  .sidebar-note {
    display:none
  }
  .connection-pill {
    font-size:10px
  }
  .maintenance-actions .btn {
    font-size:11px
  }
  .policy-list {
    padding-inline:15px
  }
  .policy-card .panel-heading {
    padding:17px 15px 9px
  }
  .policy-visual {
    padding-inline:15px;
    gap:8px
  }
  .policy-link {
    padding-inline:15px;
    font-size:10px
  }
}

@media(max-width:440px) {
  .hero {
    grid-template-columns:1fr;
    min-height:245px
  }
  .hero-copy {
    padding:25px
  }
  .hero-visual {
    position:absolute;
    right:-115px;
    bottom:-33px;
    opacity:.25;
    transform:scale(.8);
    pointer-events:none
  }
  .hero h2 {
    font-size:29px
  }
  .hero p {
    font-size:11px
  }
  .storage-aside {
    grid-template-columns:1fr
  }
  .hero-copy {
    max-width:340px
  }
  .panel-heading p {
    font-size:10px
  }
  .catalog-toolbar {
    display:block
  }
  .filter-tabs {
    margin-bottom:10px
  }
  .search {
    max-width:none;
    display:flex;
    width:100%
  }
  .node-card {
    font-size:8px;
    gap:4px;
    padding:7px 3px
  }
  .node-card .icon {
    width:10px;
    height:10px
  }
  .policy-inputs {
    gap:7px
  }
  .topbar .small-avatar {
    display:none
  }
  dialog form,.guide-content,.confirm-content {
    padding:22px
  }
  .dialog-head h2 {
    font-size:19px
  }
  .page-heading .btn [data-icon] {
    display:none
  }
}

/* Keep the accessible table caption and action label inside the scroll container. */
.table-scroll {
  position:relative
}

/* Closed mobile navigation must leave the tab order as well as the canvas. */
@media(max-width:760px) {
  .sidebar {
    display:none;
    transform:none
  }
  .sidebar.open {
    display:flex;
    transform:none
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}