[hidden] { display: none !important; }

:root {
  --canvas:      #F7F6FB;
  --surface-2:   #F4F2FA;
  --line:        #ECEAF2;
  --line-strong: #DAD6E6;
  --ink-2:       #535866;
  --radius:      10px;
  --radius-sm:   7px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(40,26,90,.04), 0 1px 1px rgba(40,26,90,.02);
  --shadow-lift: 0 8px 24px -10px rgba(40,26,90,.18), 0 2px 6px -2px rgba(40,26,90,.06);
  --btn: var(--accent);
  --btn-hover: var(--accent-hover);
  --on-btn: #fff;
  --ease: cubic-bezier(.2,.8,.2,1);
}

.eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.rail-group { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.page-title { font-weight: 650; letter-spacing: -.025em; }

.btn { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-primary { box-shadow: 0 1px 2px rgba(78,34,184,.25), inset 0 1px 0 rgba(255,255,255,.12); }

.card { transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease); }
a.card:hover, .app-tile:hover, .server-card:hover, .kpi:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }

.navlink { transition: background-color .15s, color .15s; }
.navlink.is-active { box-shadow: inset 2px 0 0 var(--accent); }

.tabbar { position: relative; }
.tab-btn { border-bottom-color: transparent !important; transition: color .2s; }
.tab-btn.is-active { color: var(--accent); }
.tab-indicator { position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); opacity: 0;
  transition: transform .35s var(--ease), width .35s var(--ease), opacity .2s; pointer-events: none; }
.tab-indicator.is-instant { transition: none; }

.settings-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 1024px) { .settings-shell { grid-template-columns: 210px minmax(0, 1fr); gap: 2rem; } }
.settings-nav { display: flex; flex-wrap: wrap; gap: 2px; }
@media (min-width: 1024px) { .settings-nav { flex-direction: column; flex-wrap: nowrap; position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; } }
.settings-link { text-align: left; font-size: 13.5px; font-weight: 500; color: var(--ink-2); padding: .45rem .7rem; border-radius: var(--radius-sm); transition: background-color .15s, color .15s; }
.settings-link:hover { background: var(--surface-2); color: var(--ink); }
.settings-link.is-active { background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.settings-sub { display: none; flex-direction: column; margin: 2px 0 6px .7rem; padding-left: .6rem; border-left: 1px solid var(--line); }
@media (min-width: 1024px) { .settings-link.is-active + .settings-sub:not(:empty) { display: flex; } }
.settings-sub a { font-size: 12.5px; color: var(--ink-3); padding: .28rem .5rem; border-radius: 6px; transition: color .15s, background-color .15s; }
.settings-sub a:hover { color: var(--ink); background: var(--surface-2); }
.settings-sub a.is-active { color: var(--accent); font-weight: 600; }
.settings-sub a.is-danger { color: var(--down); }
.with-section-nav.is-nested { grid-template-columns: minmax(0, 1fr); }
.with-section-nav.is-nested > .section-nav { display: none; }
.subtabs { display: none; }

.skeleton { display: grid; gap: .6rem; padding: 1rem 0; }
.skeleton span { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--surface-2) 25%, #FBFAFE 40%, var(--surface-2) 60%); background-size: 300% 100%; animation: ry-shimmer 1.2s ease-in-out infinite; }
.skeleton span:nth-child(1) { width: 92%; } .skeleton span:nth-child(2) { width: 74%; } .skeleton span:nth-child(3) { width: 58%; }

[data-tabs-target="panel"]:not([hidden]) { animation: ry-enter .28s var(--ease) both; }
turbo-frame[complete] > :first-child { animation: ry-enter .3s var(--ease) both; }
.rtable tbody tr { transition: background-color .15s; }
@supports (transition-behavior: allow-discrete) {
  .rtable tbody tr { transition: background-color .15s, opacity .35s var(--ease), transform .35s var(--ease); }
  @starting-style { .rtable tbody tr { opacity: 0; transform: translateY(-4px); } }
}
.actions-menu-pop, .team-menu-pop { transform-origin: top; animation: ry-pop .18s var(--ease) both; }
.palette-panel { animation: ry-pop .2s var(--ease) both; }
.palette-overlay { animation: ry-fade .18s ease both; }
.flash { animation: ry-enter .3s var(--ease) both; }

.turbo-progress-bar { height: 2px; background: var(--accent); }
.rail { view-transition-name: rail; }
::view-transition-old(root) { animation: ry-fade-out .14s ease both; }
::view-transition-new(root) { animation: ry-enter .26s var(--ease) both; }
::view-transition-group(rail) { animation: none; }

@keyframes ry-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ry-pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ry-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ry-fade-out { to { opacity: 0; } }
@keyframes ry-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

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

.fieldset-title, .rtable thead th, .team-menu-caption, .cost-group-head, .canvas-section, .theme-menu-group {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500;
}
.card-ok.card-pad { padding: .55rem .75rem .55rem 1rem; }
.card-ok { background: color-mix(in srgb, var(--ok-wash) 45%, var(--surface)); }

.shell-nav { display: contents; }
.mobilebar, .nav-backdrop { display: none; }
@media (max-width: 1099px) {
  .app-shell { flex-direction: column; align-items: stretch; }
  .mobilebar { display: flex; align-items: center; gap: .5rem; position: sticky; top: 0; z-index: 40; height: 52px; padding: 0 .6rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line); }
  .mobilebar .railbrand { margin-right: auto; }
  .mobilebar-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); color: var(--ink-2); transition: background-color .15s, color .15s; }
  .mobilebar-btn:hover, .mobilebar-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
  .mobilebar-btn svg { width: 20px; height: 20px; }
  .rail { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(288px, 86vw); height: 100dvh;
    transform: translateX(-102%); transition: transform .32s var(--ease), box-shadow .32s; box-shadow: none; view-transition-name: none; }
  .nav-open .rail { transform: none; box-shadow: 0 20px 60px -10px rgba(30,20,70,.35); }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(24,18,48,.32); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .nav-open, .nav-open body { overflow: hidden; }
  .palette-trigger { display: flex; }
}

:root { --chart-2: #0EA5E9; --chart-3: #F59E0B; --chart-4: #10B981; --chart-5: #EC4899; }
[data-chart] .u-legend { font: 12px var(--font-body); color: var(--ink-2); text-align: left; margin-top: .5rem; }
[data-chart] .u-legend .u-series > * { padding: 2px 6px; }
[data-chart] .u-legend .u-marker { width: 9px; height: 9px; border-radius: 50%; border-width: 2px !important; margin-right: 6px; }
[data-chart] .u-legend .u-series:first-child .u-marker { display: none; }
[data-chart] .u-legend .u-label { font-weight: 500; color: var(--ink-3); }
[data-chart] .u-legend .u-value { color: var(--ink); font-variant-numeric: tabular-nums; }
[data-chart] .u-cursor-x, [data-chart] .u-cursor-y { border-color: var(--line-strong) !important; }
[data-chart] .u-cursor-y { display: none; }

.meter-row { grid-template-columns: 52px 1fr 40px; }
.meter-key { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; color: var(--ink-3); }
.meter-track { height: 6px; border-radius: 999px; }
.meter-fill { border-radius: 999px; transition: width .6s var(--ease); }

.rtable td:first-child a.link-accent { color: var(--ink); font-weight: 600; transition: color .15s; }
.rtable td:first-child a.link-accent:hover { color: var(--accent); }
.rtable tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.row-accent-ok td:first-child { box-shadow: none; }
.row-accent-warn td:first-child, .row-accent-down td:first-child, .row-accent-live td:first-child { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--row-accent) 75%, transparent); }
.dlog-preset { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; padding: 4px 10px; transition: border-color .15s, background-color .15s, color .15s; }

select.input, select:not([class]) { padding-right: 2rem !important; background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52% !important; }

summary:is(:not([class]), .cursor-pointer):not(.card-head) { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
summary:is(:not([class]), .cursor-pointer):not(.card-head)::-webkit-details-marker { display: none; }
summary:is(:not([class]), .cursor-pointer):not(.card-head)::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease); opacity: .7; flex: none; }
details[open] > summary:is(:not([class]), .cursor-pointer):not(.card-head)::before { transform: rotate(45deg); }

:root {
  --l-bg: #FCFBFE; --l-bar: #F4F2FA; --l-line: #E8E5F0; --l-ink: #2B2C38; --l-dim: #8A8F9B; --l-mute: #B4B7C3;
  --l-err: #C2362C; --l-err-bg: rgba(207,70,60,.07); --l-warn: #9A6206; --l-warn-bg: rgba(178,117,9,.08);
  --l-acc: #5B2BD1; --l-ok: #0E8C5A; --l-hit: rgba(98,49,214,.12);
  --ansi-k: #6B7280; --ansi-r: #C2362C; --ansi-g: #0E8C5A; --ansi-y: #9A6206;
  --ansi-b: #2563EB; --ansi-m: #9333EA; --ansi-c: #0E7490; --ansi-w: #2B2C38;
}
.repobar { background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); padding: 5px; }
.repobar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.repobar-input { color: var(--ink); }
.repobar-input::placeholder { color: var(--ink-3); }

.rtable .btn-danger, .rtable .btn-warn { background: transparent; border-color: transparent; color: var(--ink-3); }
.rtable tr:hover .btn-danger { color: var(--down); }
.rtable .btn-danger:hover { background: var(--down-wash); border-color: color-mix(in srgb, var(--down) 30%, transparent); color: var(--down); }
.rtable tr:hover .btn-warn { color: var(--warn); }
.rtable .btn-warn:hover { background: var(--warn-wash); color: var(--warn); }

.meters-compact .meter-row { grid-template-columns: 1fr auto; row-gap: 5px; }
.meters-compact .meter-row .meter-track { grid-column: 1 / -1; grid-row: 2; }

.app-content--auth ~ .app-foot { max-width: 460px; text-align: center; }

.code-editor { --code-font: 12.5px/20px var(--font-mono); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  height: min(62vh, 560px); min-height: 18rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #FDFCFF; overflow: hidden;
  transition: border-color .15s, box-shadow .15s; }
.code-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.code-gutter { display: flex; flex-direction: column; padding: 12px 10px 12px 14px; font: var(--code-font); color: var(--ink-3); text-align: right;
  background: var(--surface-2); border-right: 1px solid var(--line); user-select: none; min-width: 3rem; will-change: transform; }
.code-gutter span { position: relative; padding-left: 12px; }
.code-gutter span.is-current { color: var(--ink); font-weight: 600; }
.code-gutter span.is-bad { color: var(--down); }
.code-gutter span.is-bad::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--down); }
.code-body { position: relative; overflow: hidden; }
.code-hl, .code-input { margin: 0; padding: 12px 16px; font: var(--code-font); tab-size: 2; white-space: pre; letter-spacing: 0; }
.code-hl { position: absolute; inset: 0 auto auto 0; min-width: 100%; color: var(--ink); pointer-events: none; will-change: transform; }
.code-input { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; border: 0; outline: 0; background: transparent;
  color: transparent; caret-color: var(--accent); overflow: auto; }
.code-input::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: transparent; }
.code-status { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.code-status-state { font-weight: 600; }
.code-status-state.is-ok { color: var(--ok); }
.code-status-state.is-bad { color: var(--down); }
.code-status-keys { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.code-status-keys kbd { font: 11px var(--font-mono); padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink-2); }
@media (max-width: 640px) { .code-status-keys { display: none; } }
.code-problems { margin-top: 10px; display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--down) 30%, var(--line)); border-radius: var(--radius); overflow: hidden; }
.code-problem { display: grid; grid-template-columns: 4.5rem minmax(0, max-content) 1fr; gap: 10px; align-items: baseline; padding: 7px 12px;
  font-size: 12.5px; color: var(--ink); text-align: left; background: color-mix(in srgb, var(--down-wash) 60%, var(--surface)); border-top: 1px solid var(--line); }
.code-problem:first-child { border-top: 0; }
button.code-problem:hover { background: var(--down-wash); }
.code-problem-line { font: 12px var(--font-mono); color: var(--down); font-weight: 600; }
.code-problem .mono { color: var(--ink-2); font-size: 12px; }
.mplan-head { background: var(--surface-2); }
.mplan-row { grid-template-columns: 5rem minmax(9rem, max-content) 1fr auto 1fr; animation: ry-enter .25s var(--ease) both; }
.mplan-kind { font-size: 11px; font-weight: 600; text-transform: capitalize; padding: 1px 7px; border-radius: 999px; justify-self: start; }
.mplan-row.is-added .mplan-kind { color: var(--ok); background: var(--ok-wash); }
.mplan-row.is-changed .mplan-kind { color: var(--warn); background: var(--warn-wash); }
.mplan-row.is-removed .mplan-kind { color: var(--down); background: var(--down-wash); }
.mplan-row.is-added .mplan-to, .mplan-row.is-removed .mplan-from { grid-column: 3 / -1; }
.mplan-row.is-removed .mplan-from { color: var(--down); }
@media (max-width: 640px) {
  .mplan-row { grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 8px; }
  .mplan-path { grid-column: 2 / -1; overflow-wrap: anywhere; }
  .mplan-row .mplan-arrow { display: inline; }
  .mplan-row.is-added .mplan-to, .mplan-row.is-removed .mplan-from { grid-column: 1 / -1; }
  .code-problem { grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; }
  .code-problem .mono { overflow-wrap: anywhere; }
  .code-problem > span:last-child { grid-column: 2; }
}
.y-secret { color: var(--ink-3); font-style: italic; }

.canvas-node .cn-ic svg { width: 15px; height: 15px; }
.cn-ic-database { color: var(--link-private); }
.cn-ic-addon { color: var(--warn); }
.cn-ic-domain { color: var(--ok); }
.cn-ic-bucket { color: var(--live); }
.cn-ic-volume, .cn-ic-cgroup, .cn-ic-empty { color: var(--ink-2); }
.cn-vols { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.cn-vol { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px 2px 4px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); font: 500 11px/16px var(--font-mono); transition: border-color .15s, color .15s; }
.cn-vol:hover { border-color: var(--accent); color: var(--accent); }
.canvas-node .cn-vol .cn-ic { width: 16px; height: 16px; background: none; color: inherit; }
.canvas-node .cn-vol .cn-ic svg { width: 12px; height: 12px; }
.cn-vol > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-node .cn-quick { position: absolute; top: -15px; right: 10px; margin: 0; padding: 3px; gap: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease); z-index: 3; }
.canvas-node:hover .cn-quick, .canvas-node.is-selected .cn-quick, .canvas-node:focus-within .cn-quick { opacity: 1; transform: none; pointer-events: auto; }
.cn-far { display: none; }
.canvas-world.is-far .cn-far { display: flex; position: absolute; inset: 0; z-index: 2; align-items: center; gap: clamp(8px, calc(7px / var(--k)), 18px);
  padding: 0 clamp(12px, calc(10px / var(--k)), 26px); background: var(--surface); border-radius: inherit; color: var(--ink); font-weight: 600;
  font-size: max(calc(7px / var(--k)), min(clamp(13px, calc(11px / var(--k)), 34px), calc((100cqi - 64px) / (var(--chars, 10) * .6)))); line-height: 1.15; letter-spacing: -.01em; }
.canvas-world.is-far .canvas-node.small .cn-far { font-size: max(calc(6px / var(--k)), min(clamp(11px, calc(9px / var(--k)), 26px), calc((100cqi - 96px) / (var(--chars, 10) * .6)))); }
.cn-far-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-world.is-far .canvas-node { container-type: inline-size; }
.canvas-world.is-far .cn-far .cn-dot { width: clamp(8px, calc(9px / var(--k)), 22px); height: clamp(8px, calc(9px / var(--k)), 22px); box-shadow: none; }
.canvas-world.is-far .cn-far .cn-ic { width: clamp(26px, calc(22px / var(--k)), 56px); height: clamp(26px, calc(22px / var(--k)), 56px); }
.canvas-world.is-far .cn-far .cn-ic svg { width: 58%; height: 58%; }
.canvas-world.is-far :is(.cn-quick, .cn-port), .canvas-world.is-far .canvas-edges text { display: none; }
.canvas-world.is-far .canvas-group-head { transform: scale(clamp(1, calc(.75 / var(--k)), 2.6)); transform-origin: left bottom; }
@media (max-width: 640px) {
  .canvas-toolbar { flex-wrap: wrap; align-items: flex-start; }
  .canvas-toolbar > div:first-child { flex: 1 1 100%; }
  .canvas-toolbar > div:last-child { flex-wrap: wrap; }
  .canvas-toolbar :is([data-action="canvas#zoomOut"], [data-action="canvas#zoomIn"], [data-action="canvas#openPalette"]) { display: none; }
  .canvas-minimap { display: none; }
}
.canvas-panel .cn-ic { width: 26px; height: 26px; border-radius: var(--radius); display: grid; place-items: center; background: var(--surface-2); flex-shrink: 0; }
.canvas-panel .cn-ic svg { width: 15px; height: 15px; }
.canvas-avatars:empty { display: none; }
.canvas-panel .cn-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }