:root {
    color-scheme: dark;
    --Background: #0b0708;
    --Sidebar: #100a0c;
    --Main: #130c0e;
    --Panel: #1f1317;
    --Raised: #2d1d22;
    --Border: #ffffff10;
    --SubtleBorder: #ffffff08;
    --Text: #f8ecf2;
    --Muted: #bfa8b4;
    --Faint: #9f8490;
    --Accent: #ec4899;
    --AccentDark: #3a1b2a;
    --Blue: #93adfa;
    --Amber: #e9bd79;
    --Danger: #ee9696;
    --Radius: 16px;
    --PanelSurface: linear-gradient(160deg, #201519 0%, #171012 100%);
    --CardShadow: inset 0 1px 0 #ffffff06, 0 2px 4px #00000018, 0 12px 28px #00000014;
    --ControlShadow: inset 0 1px 0 #ffffff0a, 0 2px 3px #00000026;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size: 14px;
    font-synthesis: none;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--Background);
    color: var(--Text);
}

button,input,select,textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button {
    color: inherit;
}

button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

button,a,input,select,textarea {
    outline-offset: 4px;
}

button:focus-visible,a:focus-visible {
    outline: 2px solid var(--Accent);
}

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

button .Icon {
    flex-shrink: 0;
}

button {
    border: 0;
}

input,select,textarea {
    color: var(--Text);
    background: var(--Main);
    border: 1px solid var(--Border);
    border-radius: 14px;
    min-height: 41px;
    padding: 8px 12px;
    outline: none;
}

input:focus,select:focus,textarea:focus {
    border-color: var(--Accent);
    box-shadow: 0 0 0 3px #ec489912;
}

select {
    cursor: pointer;
}

input::placeholder,textarea::placeholder {
    color: var(--Faint);
}

textarea {
    resize: vertical;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

th {
    font-size: 11px;
    text-transform: none;
    font-weight: 550;
    letter-spacing: 0;
    color: var(--Muted);
    padding: 16px 16px;
    border-bottom: 1px solid var(--Border);
    white-space: nowrap;
}

td {
    padding: 16px 16px;
    border-bottom: 1px solid var(--SubtleBorder);
    font-size: 12px;
    vertical-align: middle;
}

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

tbody tr:hover {
    background: #ffffff02;
}

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

h1 {
    font-size: 27px;
    letter-spacing: 0;
    font-weight: 550;
    line-height: 1.2;
}

h2 {
    font-size: 15px;
    font-weight: 550;
    letter-spacing: 0;
}

h3 {
    font-size: 14px;
    font-weight: 550;
}

small {
    font-size: 11px;
}

strong {
    font-weight: 550;
}

.Icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.Hidden {
    display: none!important;
}

.Muted {
    color: var(--Muted);
}

.Mono {
    font-family: "SFMono-Regular",Consolas,monospace;
    font-size: 11px;
    letter-spacing: 0;
}

.NoWrap {
    white-space: nowrap;
}

.Truncate {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.SkipLink {
    position: fixed;
    top: -60px;
    left: 20px;
    z-index: 20;
    padding: 12px;
    background: var(--Accent);
    color: #28141b;
    border-radius: 8px;
}

.SkipLink:focus {
    top: 10px;
}

.AppShell {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--Main);
}

.Sidebar {
    --SidebarSize: 256px;
    width: var(--SidebarSize);
    flex: 0 0 var(--SidebarSize);
    padding: 24px 12px 16px;
    background: linear-gradient(180deg, #130c0e 0%, #0d080a 100%);
    border-right: 1px solid var(--Border);
    box-shadow: inset -1px 0 0 #ffffff03, 8px 0 32px #0000000a;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ffffff18 transparent;
    transition: width 360ms var(--MotionEase), flex-basis 360ms var(--MotionEase), transform 360ms var(--MotionEase);
}

.Sidebar.Compact {
    --SidebarSize: 80px;
}

.SidebarHeader {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0 8px 32px;
    flex-shrink: 0;
}

.Brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    min-height: 44px;
    overflow: hidden;
    border-radius: 10px;
}

.BrandName {
    font-size: 20px;
    letter-spacing: 0;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

.BrandName>span {
    font-weight: 400;
    color: var(--Muted);
}

.BrandName small {
    display: block;
    font-size: 11px;
    letter-spacing: 0;
    color: var(--Faint);
    margin-top: 4px;
    font-weight: 400;
}

.Brand .SocrateLogo {
    width: 36px;
    height: 36px;
    box-shadow: 0 4px 12px #00000028;
    border-radius: 10px;
}

.IconButton.MobileSidebarClose {
    display: none;
}

.Sidebar nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ffffff18 transparent;
}

.NavSection + .NavSection {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--Border);
}

.NavLabel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 24px;
    font-size: 11px;
    letter-spacing: 0;
    color: var(--Faint);
    padding: 4px 16px;
    margin-bottom: 8px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
}

.NavLabel span {
    grid-area: 1 / 1;
}

.NavSectionShort {
    opacity: 0;
    transform: translateY(4px);
}

.NavEntry + .NavEntry {
    margin-top: 4px;
}

.NavigationItem {
    width: 100%;
    background: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--Muted);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.NavigationItem:hover {
    background: #ffffff06;
    color: var(--Text);
}

.NavigationItem.Active {
    background: #ffffff09;
    border-color: #ffffff08;
    color: var(--Text);
    box-shadow: inset 0 1px 0 #ffffff05, 0 2px 6px #00000018;
}

.NavigationItem.Active > .Icon {
    color: var(--Accent);
}

.NavigationText {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    line-height: 20px;
}

.NavigationMeta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.NavChevron {
    margin-left: auto;
    color: var(--Faint);
}

.NavChevron .Icon {
    width: 14px;
    height: 14px;
}

.NavChevron.Open .Icon {
    transform: rotate(90deg);
}

.NavCount {
    font-size: 11px;
    line-height: 16px;
    padding: 2px 6px;
    border-radius: 6px;
    min-width: 21px;
    text-align: center;
    background: #ffffff07;
    color: var(--Muted);
}

.NavigationItem.Active .NavCount {
    color: var(--Accent);
    background: #ec489912;
}

.SubNavigation {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-4px);
    transition: grid-template-rows 320ms var(--MotionEase), opacity var(--MotionBase) var(--MotionEase), transform 320ms var(--MotionEase);
}

.SubNavigation.Open {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}

.SubNavigationClip {
    min-height: 0;
    overflow: hidden;
}

.SubNavigationLinks {
    display: grid;
    gap: 4px;
    margin: 8px 0 12px 26px;
    padding-left: 12px;
    border-left: 1px solid var(--Border);
}

.SubNavigation button {
    background: none;
    text-align: left;
    position: relative;
    min-height: 36px;
    font-size: 12px;
    color: var(--Muted);
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
}

.SubNavigation button:hover {
    color: var(--Text);
    background: #ffffff04;
}

.SubNavigation button.Active {
    color: var(--Accent);
    background: #ec489908;
}

.SubNavigation button.Active:before {
    content: "";
    position: absolute;
    left: -15px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--Accent);
}

.SubNavigation button>span:first-child {
    flex: 1;
}

.SubNavigation .NavCount {
    background: transparent;
    color: inherit;
    font-size: 11px;
}

.SidebarBottom {
    padding-top: 24px;
    margin-top: auto;
    flex-shrink: 0;
}

.SidebarStatus {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 0;
    border-top: 1px solid var(--Border);
    font-size: 11px;
    color: var(--Faint);
    white-space: nowrap;
    min-height: 44px;
    overflow: hidden;
}

.SidebarStatus .StatusLight {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    margin: 0 6px;
}

.Version {
    margin-left: auto;
    font-size: 11px;
}

.BrandName,
.NavigationText,
.NavigationMeta,
.NavLabel span,
.SidebarStatusText,
.Version {
    transition: opacity 200ms var(--MotionEase), transform 320ms var(--MotionEase);
}

.Compact .BrandName,
.Compact .NavigationText,
.Compact .NavigationMeta,
.Compact .NavSectionName,
.Compact .SidebarStatusText,
.Compact .Version {
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
}

.Compact .NavLabel {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.Compact .NavSectionShort {
    opacity: 1;
    transform: translateY(0);
}

.SidebarToggle {
    display: inline-flex;
    flex-shrink: 0;
}

.StatusLight {
    height: 5px;
    width: 5px;
    background: var(--Faint);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.StatusLight.Connected {
    background: var(--Accent);
    box-shadow: none;
}

.MainColumn {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.Topbar {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 72px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--Border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 32px;
    background: #130c0eed;
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px #00000010;
}

.Breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--Muted);
    white-space: nowrap;
}

.Breadcrumb strong {
    color: #dad4d6;
}

.BreadcrumbSlash {
    color: #534b4e;
    padding: 0 4px;
}

.WorkspaceGlyph {
    color: var(--Accent);
}

.WorkspaceGlyph .Icon {
    width: 21px;
    height: 21px;
}

.HeaderRight {
    display: flex;
    align-items: center;
    gap: 16px;
}

.IconButton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--Muted);
}

.IconButton:hover {
    background: var(--Raised);
    color: var(--Text);
    border-color: var(--Border);
}

.IconButton .Icon {
    width: 17px;
    height: 17px;
}

.AccountButton {
    background: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 1px solid var(--Border);
    padding: 0 0 0 16px;
    text-align: left;
}

.Avatar {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border: 1px solid #513941;
    background: #39232a;
    color: #efcdd8;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

.AccountText strong {
    font-size: 11px;
    display: block;
}

.AccountText small {
    font-size: 11px;
    display: block;
    color: var(--Faint);
    margin-top: 4px;
}

.AccountButton>.Icon {
    width: 13px;
    color: var(--Faint);
    margin-left: 3px;
}

.MobileMenu {
    display: none;
}

.ConnectionBanner {
    margin: 20px 32px 0;
    padding: 12px 16px;
    border: 1px solid #7b5733;
    border-radius: 8px;
    background: #3e302118;
    color: var(--Amber);
    font-size: 11px;
}

.Page {
    padding: 32px 32px 24px;
    flex: 1;
    min-width: 0;
    outline: none;
}

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

.PageHeader p {
    font-size: 11px;
    line-height: 1.7;
    color: var(--Muted);
    margin-top: 9px;
}

.PageActions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--Border);
    border-radius: 999px;
    padding: 10px 16px;
    min-height: 40px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    background: #22272c;
    color: var(--Text);
    box-shadow: var(--ControlShadow);
}

.Button:hover {
    background: var(--Raised);
}

.Button:active {
    transform: translateY(1px);
}

.Button.Primary {
    background: var(--Accent);
    border-color: #f472b6;
    color: #2a0614;
    font-weight: 550;
    box-shadow: inset 0 1px 0 #ffffff38, 0 3px 8px #00000028;
}

.Button.Primary:hover {
    background: #f0609b;
}

.Button.Danger {
    color: var(--Danger);
    border-color: #ee969633;
    background: #ee969609;
}

.Button.Danger:hover {
    background: #ee969615;
}

.Button.Subtle {
    background: none;
    border-color: transparent;
    padding: 4px 0;
    color: var(--Muted);
    min-height: 20px;
}

.Button.Subtle:hover {
    color: var(--Accent);
}

.Button .Icon {
    height: 14px;
    width: 14px;
}

.Button.Small {
    min-height: 29px;
    padding: 8px 8px;
    font-size: 11px;
}

.Button.LinkButton {
    border: 0;
    background: none;
    color: var(--Accent);
    padding: 0;
    min-height: 20px;
}

.Footer {
    padding: 12px 32px 24px;
    display: flex;
    justify-content: space-between;
    color: var(--Faint);
    font-size: 11px;
    gap: 16px;
}

.FooterDivider {
    padding: 0 8px;
    color: #40383b;
}

.OverviewGrid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 286px;
    gap: 20px;
    align-items: start;
}

.OverviewPrimary,.OverviewAside {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.Stats {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}

.StatCard {
    background: var(--PanelSurface);
    border: 1px solid var(--Border);
    border-radius: var(--Radius);
    padding: 24px;
    min-width: 0;
    position: relative;
    overflow: hidden;
    box-shadow: var(--CardShadow);
}

.StatLabel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #aaa0a3;
}

.StatValue {
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: 0;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
    margin-top: 15px;
}

.StatNote {
    font-size: 11px;
    color: var(--Faint);
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.Panel {
    background: var(--PanelSurface);
    border: 1px solid var(--Border);
    border-radius: var(--Radius);
    min-width: 0;
    overflow: hidden;
    box-shadow: var(--CardShadow);
}

.PanelHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 24px 0;
}

.PanelHeader p {
    font-size: 11px;
    line-height: 1.7;
    color: var(--Faint);
    margin-top: 6px;
}

.PanelHeader .Button {
    font-size: 11px;
}

.PanelBody {
    padding: 24px;
}

.PanelFooter {
    padding: 12px 20px;
    border-top: 1px solid var(--Border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    color: var(--Faint);
}

.ChartLegend {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--Muted);
    align-items: center;
}

.LegendDot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--Accent);
    margin-right: 6px;
}

.LegendDot.Blue {
    background: var(--Blue);
}

.LegendDot.Amber {
    background: var(--Amber);
}

.LegendDot.Purple {
    background: #d49aad;
}

.LineChart {
    padding: 20px 16px 8px 12px;
    width: 100%;
    min-height: 0;
}

.LineChart svg {
    display: block;
    width: 100%;
    overflow: visible;
}

.ChartGrid {
    stroke: var(--Border);
    stroke-width: .7;
}

.ChartLabel {
    fill: #7c7275;
    font-family: inherit;
}

.ChartLine {
    stroke: var(--Accent);
    stroke-width: 2.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ChartLine.Secondary {
    stroke: var(--Blue);
    stroke-width: 2.5;
}

.ChartArea {
    fill: #ec489906;
    stroke: none;
}

.ChartPoint {
    fill: transparent;
    stroke: none;
    cursor: crosshair;
}

.ChartPoint:hover,.ChartPoint:focus {
    fill: var(--Accent);
    stroke: var(--Panel);
    stroke-width: 3;
    outline: none;
}

.PeriodSelect {
    background: var(--Raised);
    border: 1px solid var(--Border);
    font-size: 11px;
    min-height: 28px;
    border-radius: 8px;
    padding: 4px 8px;
    color: var(--Muted);
}

.OverviewTable td {
    padding: 16px 16px;
}

.OverviewTable th {
    padding: 16px 16px 12px;
}

.TableWrap {
    overflow: auto;
}

.TablePrimary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}

.LicenseAvatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 31px;
    border-radius: 8px;
    border: 1px solid #3d3538;
    background: #30272a;
    color: #d99ab0;
    font-size: 11px;
    flex-shrink: 0;
}

.Avatar1 {
    background: #282c35;
    border-color: #343c4c;
    color: #9faecb;
}

.Avatar2 {
    background: #342c2f;
    border-color: #4a393f;
    color: #c2a6af;
}

.Avatar3 {
    background: #342f27;
    border-color: #4b4231;
    color: #c3b18a;
}

.PrimaryText strong {
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.PrimaryText small {
    display: block;
    font-size: 11px;
    color: var(--Faint);
    margin-top: 4px;
}

.Badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid #ffffff0a;
    background: #ffffff04;
    white-space: nowrap;
    color: var(--Muted);
}

.BadgeDot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
}

.Badge.Active,.Badge.Clear,.Badge.Live {
    color: var(--Accent);
    border-color: #ec489920;
    background: #ec48990a;
}

.Badge.Expired,.Badge.Warning,.Badge.Suspicious {
    color: var(--Amber);
    border-color: #e9bd791a;
    background: #e9bd790a;
}

.Badge.Revoked,.Badge.Error {
    color: #d29494;
    border-color: #d294941a;
    background: #d2949409;
}

.Badge.Info {
    color: var(--Blue);
    border-color: #93adfa1a;
    background: #93adfa09;
}

.Badge.NotReported,.Badge.Unconfigured {
    color: var(--Muted);
}

.BoundStatus {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Muted);
    font-size: 11px;
    white-space: nowrap;
}

.BoundStatus .Icon {
    width: 12px;
    height: 12px;
    color: var(--Faint);
}

.EmptyState {
    padding: 48px 20px;
    text-align: center;
}

.EmptyIcon {
    width: 47px;
    height: 47px;
    background: #ec489906;
    border: 1px solid #ec489918;
    color: var(--Accent);
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    border-radius: 12px;
}

.EmptyState h3 {
    margin-bottom: 8px;
    font-size: 13px;
}

.EmptyState p {
    color: var(--Muted);
    font-size: 11px;
    line-height: 1.8;
    max-width: 330px;
    margin: auto;
}

.EmptyState .Button {
    margin-top: 18px;
}

.Heatmap {
    padding: 24px 20px 0;
}

.HeatmapGrid {
    display: grid;
    grid-template-columns: 33px repeat(7,1fr);
    gap: 4px;
    align-items: center;
}

.HeatLabel {
    font-size: 11px;
    color: var(--Faint);
    white-space: nowrap;
}

.HeatCell {
    aspect-ratio: 1;
    border-radius: 4px;
    background: #2b1b20;
    border: 1px solid #ec489905;
    transition: filter .15s;
}

.HeatCell:hover,.HeatCell:focus {
    outline: 1px solid var(--Accent);
    outline-offset: 1px;
    filter: brightness(1.25);
}

.Heat1 {
    background: #442932;
}

.Heat2 {
    background: #6c414f;
}

.Heat3 {
    background: #ab647c;
}

.Heat4 {
    background: #ec4899;
}

.HeatDay {
    font-size: 11px;
    color: var(--Faint);
    text-align: center;
    padding-top: 9px;
}

.HeatLegend {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 0 20px;
    color: var(--Faint);
    font-size: 11px;
}

.HeatLegend .HeatCell {
    width: 9px;
    height: 9px;
    aspect-ratio: unset;
    border-radius: 2px;
}

.HeatLegend>span:first-child {
    margin-right: 5px;
}

.HeatLegend>span:last-child {
    margin-left: 5px;
}

.Donut {
    display: block;
    width: 210px;
    max-width: 100%;
    margin: 0 auto;
}

.DonutTrack,.DonutSegment {
    fill: none;
    stroke-width: 21px;
}

.DonutTrack {
    stroke: var(--Raised);
}

.DonutSegment {
    transform: rotate(-90deg);
    transform-origin: center;
    stroke-linecap: butt;
}

.Segment0 {
    stroke: var(--Accent);
}

.Segment1 {
    stroke: var(--Amber);
}

.Segment2 {
    stroke: #d49aad;
}

.DonutNumber {
    fill: var(--Text);
    font-size: 29px;
    letter-spacing: 0;
    font-weight: 500;
    font-family: inherit;
}

.DonutCaption {
    fill: var(--Muted);
    font-size: 11px;
    font-family: inherit;
}

.DistributionLegend {
    display: grid;
    gap: 12px;
    padding: 0 24px 24px;
}

.DistributionRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--Muted);
}

.DistributionRow strong {
    font-size: 11px;
    color: var(--Text);
    font-variant-numeric: tabular-nums;
}

.DistributionRow small {
    font-size: 11px;
    color: var(--Faint);
    margin-left: 9px;
}

.ContentTabs {
    position: relative;
    display: flex;
    gap: 24px;
    align-items: center;
    border-bottom: 1px solid var(--Border);
    padding: 0 20px;
    overflow-x: auto;
}

.Tab {
    background: none;
    padding: 16px 0;
    color: var(--Faint);
    font-size: 11px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.Tab.Active {
    color: var(--Accent);
}

.TabIndicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--Accent);
    border-radius: 2px;
    pointer-events: none;
    transition: transform 360ms var(--MotionEase), width 360ms var(--MotionEase);
}

.Tab small {
    font-size: 11px;
    color: var(--Faint);
    background: #ffffff05;
    padding: 2px 4px;
    border-radius: 4px;
}

.TableToolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--Border);
}

.FilterGroup {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.FilterGroup label {
    color: var(--Faint);
    font-size: 11px;
}

.FilterGroup .DropdownTrigger {
    min-height: 32px;
    font-size: 11px;
    padding: 8px 8px;
    background: var(--Raised);
}

.TablePagination {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--Border);
    font-size: 11px;
    color: var(--Faint);
    gap: 12px;
}

.PaginationControls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.PageIndicator {
    padding: 0 8px;
    font-size: 11px;
}

.PageIndicator strong {
    color: var(--Text);
}

.Metadata {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    color: var(--Faint);
    margin-top: 7px;
}

.DetailGrid {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(280px,1fr);
    gap: 20px;
}

.Stack {
    display: grid;
    gap: 20px;
    align-content: start;
}

.MiniStats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.FieldList {
    padding: 4px 24px 16px;
}

.FieldRow {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--SubtleBorder);
    font-size: 11px;
}

.FieldRow:last-child {
    border-bottom: 0;
}

.FieldRow>span {
    color: var(--Muted);
}

.FieldRow>strong {
    font-weight: 400;
    text-align: right;
    font-size: 11px;
    max-width: 65%;
    overflow-wrap: anywhere;
}

.Notice {
    padding: 16px 16px;
    border: 1px solid var(--Border);
    background: #ffffff02;
    border-radius: 8px;
    font-size: 11px;
    color: var(--Muted);
    line-height: 1.8;
    display: flex;
    gap: 8px;
    align-items: start;
}

.Notice>.Icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--Faint);
}

.Notice.Warning {
    background: #e9bd7905;
    border-color: #e9bd7925;
    color: #c2ae90;
}

.Notice.Success {
    background: #ec489905;
    border-color: #ec489920;
    color: var(--Accent);
}

.Notice+p,.Notice+.Panel {
    margin-top: 20px;
}

.SettingsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.DomainCard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid var(--Border);
}

.DomainCard:last-child {
    border: 0;
}

.DomainCard .DomainIcon {
    width: 39px;
    height: 39px;
    border-radius: 8px;
    background: #ec489908;
    display: grid;
    place-items: center;
    color: var(--Accent);
    border: 1px solid #ec489916;
}

.DomainInfo {
    min-width: 0;
    flex: 1;
}

.DomainInfo strong {
    display: block;
    font-size: 12px;
    margin-bottom: 7px;
}

.DomainInfo p {
    font-size: 11px;
    color: var(--Faint);
    line-height: 1.5;
}

.DomainInfo .Mono {
    color: var(--Muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.FormFields {
    display: grid;
    gap: 16px;
}

.FormFields.TwoColumns {
    grid-template-columns: 1fr 1fr;
}

.FormField {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.FormField label,.FieldLabel {
    font-size: 11px;
    font-weight: 500;
}

.FormField input,.FormField select,.FormField textarea {
    width: 100%;
    font-size: 11px;
}

.FormField small {
    font-size: 11px;
    color: var(--Faint);
    line-height: 1.6;
    font-weight: 400;
}

.FormField.FullWidth {
    grid-column: 1/-1;
}

.FormActions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 23px;
    padding-top: 20px;
    border-top: 1px solid var(--Border);
}

.FormActions .Button {
    padding: 8px 16px;
}

.FormError {
    background: #ee96960a;
    color: var(--Danger);
    border: 1px solid #ee969627;
    font-size: 11px;
    padding: 12px;
    border-radius: 8px;
    margin: 16px 0;
    line-height: 1.7;
}

.ReadOnly {
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--Faint);
}

.ReadOnly .Icon {
    width: 11px;
    height: 11px;
}

.ReportSignals {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 7px;
}

.Signal {
    font-size: 11px;
    color: #baad94;
    padding: 4px 4px;
    border: 1px solid #e9bd7910;
    border-radius: 4px;
    background: #e9bd7905;
}

.EventMessage {
    max-width: 460px;
    line-height: 1.6;
    color: var(--Muted);
    font-size: 11px;
}

.AuditIcon {
    width: 30px;
    height: 30px;
    background: #ffffff03;
    border: 1px solid var(--Border);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--Faint);
}

.AuditIcon .Icon {
    width: 14px;
    height: 14px;
}

.AuditIcon.Activated {
    color: var(--Accent);
    background: #ec489907;
    border-color: #ec489916;
}

.AuditIcon.Issued {
    color: var(--Blue);
    background: #93adfa07;
    border-color: #93adfa16;
}

.JsonPreview {
    background: var(--Main);
    border: 1px solid var(--Border);
    border-radius: 8px;
    padding: 16px;
    font-size: 11px;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 400px;
    overflow: auto;
    color: #dcb9c5;
}

.Dialog {
    width: 500px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    overflow: auto;
    background: #1f1418;
    color: var(--Text);
    border: 1px solid #ffffff16;
    border-radius: 20px;
    padding: 0;
    box-shadow: inset 0 1px 0 #ffffff0a, 0 8px 24px #00000040, 0 40px 120px #00000080;
}

.Dialog.Wide {
    width: 650px;
}

.Dialog::backdrop {
    background: #07090cc2;
    backdrop-filter: blur(10px);
}

.DialogHeader {
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: 24px 24px 0;
    gap: 12px;
}

.DialogHeader h2 {
    font-size: 19px;
    letter-spacing: 0;
    margin-top: 3px;
}

.DialogHeader p {
    font-size: 11px;
    color: var(--Faint);
    line-height: 1.8;
    margin-top: 8px;
}

.DialogBody {
    padding: 24px 24px 24px;
}

.DialogFooter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 23px;
    padding-top: 18px;
    border-top: 1px solid var(--Border);
}

.DialogFooter .Button {
    padding: 8px 16px;
}

.DetailActions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.KeyReveal {
    border: 1px solid #ec489940;
    background: #ec489906;
    color: var(--Accent);
    text-align: center;
    padding: 28px 16px;
    border-radius: 12px;
    margin: 16px 0;
    font-family: "SFMono-Regular",Consolas,monospace;
    font-size: 30px;
    letter-spacing: 0;
}

.KeyCopy {
    width: 100%;
}

.ToastRegion {
    position: fixed;
    bottom: 28px;
    right: 29px;
    z-index: 30;
    display: grid;
    gap: 8px;
    max-width: 400px;
}

.Toast {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--Raised);
    border: 1px solid #ec489935;
    box-shadow: 0 8px 40px #0004;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 11px;
    color: var(--Text);
}

.Toast.Error {
    background: #302425;
    color: #e0b6b6;
    border-color: #ee969640;
}

.Toast .Icon {
    width: 15px;
    height: 15px;
    color: var(--Accent);
}

.Toast.Error .Icon {
    color: var(--Danger);
}


.SidebarBackdrop {
    position: fixed;
    inset: 0;
    background: #0008;
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 320ms var(--MotionEase), visibility 320ms;
}

.SidebarBackdrop.Open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media(max-width:1450px) {
    .Page {
        padding: 24px 24px 24px;
    }
    .Topbar {
        padding: 0 24px;
        height: 75px;
    }
    .OverviewGrid {
        grid-template-columns: minmax(0,1fr) 263px;
        gap: 16px;
    }
    .OverviewPrimary,.OverviewAside {
        gap: 16px;
    }
    .Stats {
        gap: 12px;
    }
    .StatCard {
        padding: 16px 16px;
    }
    .StatValue {
        font-size: 32px;
    }
    .StatNote {
        font-size: 11px;
    }
    .HeaderRight {
        gap: 12px;
    }
    .Breadcrumb {
        gap: 8px;
    }
    .AccountText {
        display: none;
    }
    .AccountButton {
        padding-left: 14px;
    }
    .OverviewTable td,.OverviewTable th {
        padding-left: 14px;
        padding-right: 14px;
    }
    .OverviewTable .TablePrimary {
        min-width: 125px;
    }
    .PanelHeader {
        padding: 20px 16px 0;
    }
    .Heatmap {
        padding-left: 17px;
        padding-right: 17px;
    }
    .HeatmapGrid {
        gap: 4px;
    }
    .Footer {
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media(max-width:1200px) {
    .OverviewGrid {
        grid-template-columns: minmax(0,1fr) 245px;
        gap: 16px;
    }
    .Page {
        padding: 24px 20px;
    }
    .Topbar {
        padding: 0 20px;
    }
    .Breadcrumb>span:nth-child(3) {
        display: none;
    }
    .Stats {
        gap: 8px;
    }
    .StatCard {
        padding: 16px 12px;
    }
    .StatLabel {
        font-size: 11px;
    }
    .StatValue {
        font-size: 30px;
    }
    .StatNote {
        white-space: normal;
        line-height: 1.7;
        min-height: 27px;
        margin-top: 10px;
    }
    .ChartLegend {
        gap: 8px;
    }
    .OverviewTable .IssuedColumn {
        display: none;
    }
    .OverviewTable .LicenseAvatar {
        display: none;
    }
    .PanelHeader h2 {
        font-size: 13px;
    }
    .TablePrimary {
        min-width: 125px;
    }
    .SettingsGrid {
        grid-template-columns: 1fr;
    }
    .DetailGrid {
        grid-template-columns: 1fr;
    }
    .PanelBody {
        padding: 20px;
    }
    .HeaderRight {
        gap: 8px;
    }
    .AccountButton>.Icon {
        display: none;
    }
}

@media(max-width:1000px) {
    .OverviewGrid {
        grid-template-columns: 1fr;
    }
    .OverviewAside {
        grid-template-columns: 1fr 1fr;
    }
    .OverviewTable .IssuedColumn {
        display: table-cell;
    }
    .OverviewTable .LicenseAvatar {
        display: grid;
    }
    .HeatmapGrid {
        gap: 8px;
    }
    .Donut {
        width: 190px;
    }
    .AccountText {
        display: none;
    }
    .Breadcrumb {
        font-size: 11px;
    }
    .PageHeader h1 {
        font-size: 25px;
    }
    .OverviewTable td {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .StatNote {
        min-height: 0;
        font-size: 11px;
    }
}

@media(max-width:780px) {
    .Sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 5;
        transform: translateX(-100%);
    }
    .Sidebar.Open {
        transform: translateX(0);
    }
    .MobileMenu {
        display: inline-flex;
    }
    .SidebarToggle {
        display: none;
    }
    .IconButton.MobileSidebarClose {
        display: inline-flex;
        flex-shrink: 0;
    }
    .Topbar {
        height: 65px;
        padding: 0 16px;
    }
    .Breadcrumb {
        gap: 8px;
    }
    .WorkspaceGlyph {
        display: none;
    }
    .Breadcrumb>span:nth-child(3),.BreadcrumbSlash {
        display: none;
    }
    .Page {
        padding: 24px 16px;
    }
    .PageHeader {
        align-items: flex-start;
        margin-bottom: 22px;
        gap: 12px;
    }
    .PageHeader p {
        max-width: 280px;
        font-size: 11px;
    }
    .PageActions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .PageActions>.Button:not(.Primary) {
        padding: 8px 8px;
    }
    .Stats {
        gap: 8px;
    }
    .StatCard {
        padding: 16px 12px;
    }
    .StatValue {
        font-size: 29px;
    }
    .StatNote {
        font-size: 11px;
    }
    .StatLabel {
        font-size: 11px;
    }
    .HeaderRight {
        gap: 8px;
    }
    .AccountButton {
        padding-left: 10px;
    }
    .Avatar {
        width: 29px;
        height: 29px;
        font-size: 11px;
    }
    .Footer {
        padding: 8px 16px 20px;
        line-height: 1.6;
    }
    .Footer>span:first-child {
        display: none;
    }
    .MiniStats {
        gap: 8px;
    }
    .TableToolbar {
        padding: 16px;
    }
    .PanelHeader {
        padding: 20px 16px 0;
    }
    .ChartLegend {
        font-size: 11px;
    }
    .OverviewTable .IssuedColumn {
        display: none;
    }
    .SettingsGrid {
        gap: 16px;
    }
    .PanelFooter {
        padding-left: 17px;
        padding-right: 17px;
    }
}

@media(max-width:520px) {
    .HeaderRight>.IconButton {
        display: none;
    }
    .Breadcrumb strong {
        font-size: 11px;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .PageHeader h1 {
        font-size: 25px;
    }
    .PageActions {
        gap: 8px;
    }
    .PageActions>.Button:not(.Primary) {
        display: none;
    }
    .PageActions>.Button.Primary {
        font-size: 11px;
        padding: 8px 8px;
    }
    .PageHeader p {
        max-width: 210px;
    }
    .Stats {
        grid-template-columns: repeat(3,1fr);
        gap: 8px;
    }
    .StatCard {
        padding: 16px 12px;
        border-radius: 12px;
    }
    .StatValue {
        font-size: 26px;
        margin-top: 11px;
    }
    .StatNote {
        margin-top: 9px;
        font-size: 11px;
    }
    .OverviewAside {
        grid-template-columns: 1fr;
    }
    .OverviewAside .Donut {
        width: 200px;
    }
    .OverviewTable .LicenseAvatar {
        display: none;
    }
    .PanelHeader p {
        font-size: 11px;
    }
    .OverviewTable th,.OverviewTable td {
        padding-left: 12px;
        padding-right: 12px;
    }
    .OverviewTable .BoundColumn {
        display: none;
    }
    .OverviewTable .TablePrimary {
        min-width: 140px;
    }
    .LineChart {
        padding-left: 5px;
        padding-right: 8px;
        min-height: 0;
    }
    .ChartLegend {
        gap: 8px;
        font-size: 11px;
    }
    .PanelHeader {
        gap: 8px;
    }
    .Heatmap {
        padding: 24px;
    }
    .HeatmapGrid {
        gap: 8px;
    }
    .PanelBody {
        padding: 16px;
    }
    .FormFields.TwoColumns {
        grid-template-columns: 1fr;
    }
    .FormField.FullWidth {
        grid-column: auto;
    }
    .TablePagination {
        font-size: 11px;
        padding: 12px 16px;
    }
    .PaginationControls {
        gap: 4px;
    }
    .PageIndicator {
        padding: 0 4px;
    }
    .TableToolbar {
        align-items: start;
    }
    .FilterGroup {
        gap: 8px;
    }
    .FilterGroup .DropdownTrigger {
        max-width: 125px;
        font-size: 11px;
    }
    .MiniStats {
        grid-template-columns: 1fr;
    }
    .MiniStats .StatCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .ToastRegion {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
    .DialogHeader {
        padding: 24px 20px 0;
    }
    .DialogBody {
        padding: 16px 20px 24px;
    }
    .FieldRow {
        gap: 12px;
        font-size: 11px;
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none!important;
        transition: none!important;
        scroll-behavior: auto!important;
    }
}

.StatCard {
    padding: 24px;
}

.StatLabel {
    font-size: 12px;
    color: var(--Muted);
}

.StatValue {
    margin-top: 16px;
    font-weight: 500;
}

.StatNote {
    color: var(--Faint);
    font-size: 11px;
    line-height: 1.6;
    white-space: normal;
    margin-top: 12px;
}

.PanelHeader p {
    font-size: 12px;
}

.PanelHeader h2 {
    font-size: 16px;
}

.PanelHeader .Button,.PanelFooter {
    font-size: 11px;
}

.PageHeader p {
    font-size: 13px;
    line-height: 1.7;
    max-width: 560px;
}

.KeyReveal {
    width: 100%;
    min-width: 0;
}

.PreviousIcon {
    transform: rotate(180deg);
}

.PrimaryText strong {
    font-size: 12px;
}

.Badge {
    font-size: 11px;
}

.ChartLabel {
    fill: var(--Faint);
    font-family: "SFMono-Regular",Consolas,monospace;
}

.ChartGrid {
    stroke: var(--Border);
}

.LineChart {
    min-height: 0;
}

.FieldRow,.FieldRow>strong,.FormField label,.FormField input,.FormField select,.FormField textarea {
    font-size: 12px;
}

.Avatar1,.Avatar2,.Avatar3 {
    background: #2b2628;
    border-color: var(--Border);
    color: var(--Muted);
}

.ChartLine.Secondary {
    stroke: #a5aab3;
}

.LegendDot.Blue {
    background: #a5aab3;
}

@media(min-width:781px) {
    .Topbar {
        height: 64px;
    }
    .Page {
        padding: 32px;
    }
    .PanelHeader {
        padding: 24px 24px 0;
    }
}

@media(max-width:1100px) and (min-width:781px) {
    .OverviewGrid {
        grid-template-columns: 1fr;
    }
    .OverviewAside {
        grid-template-columns: 1fr 1fr;
    }
    .Page {
        padding: 24px;
    }
}

@media(max-width:780px) {
    .Page {
        padding: 24px 16px;
    }
    .StatCard {
        padding: 16px;
    }
    .PageHeader p {
        font-size: 12px;
    }
    .StatValue {
        font-size: 28px;
    }
    .StatNote {
        font-size: 11px;
    }
    .PageHeader {
        flex-wrap: wrap;
    }
    .PageActions {
        justify-content: flex-start;
    }
    .PageHeader h1 {
        font-size: 28px;
    }
}

@media(max-width:520px) {
    .Stats {
        grid-template-columns: 1fr;
    }
    .Stats .StatCard {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px 16px;
        align-items: center;
    }
    .Stats .StatValue {
        grid-column: 2;
        grid-row: 1/3;
        margin: 0;
    }
    .Stats .StatNote {
        grid-column: 1;
        margin: 0;
    }
    .ChartLegend {
        font-size: 11px;
    }
    .StatCard {
        border-radius: 12px;
    }
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.SocrateLogo {
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

.DialogFields:disabled {
    opacity: 0.6;
}

:root {
    --MotionEase: cubic-bezier(0.22, 1, 0.36, 1);
    --MotionFast: 160ms;
    --MotionBase: 260ms;
    --MotionSlow: 420ms;
}

.Button,
.IconButton,
.NavigationItem,
.SubNavigation button,
.AccountButton,
.TextButton,
.Tab {
    transition: background-color var(--MotionFast) var(--MotionEase), color var(--MotionFast) var(--MotionEase), border-color var(--MotionFast) var(--MotionEase), opacity var(--MotionFast) var(--MotionEase), transform var(--MotionFast) var(--MotionEase);
}

input,
select,
textarea {
    transition: background-color var(--MotionFast) var(--MotionEase), border-color var(--MotionFast) var(--MotionEase), box-shadow var(--MotionFast) var(--MotionEase), opacity var(--MotionFast) var(--MotionEase);
}

.Panel,
.StatCard,
.Badge,
.LicenseAvatar,
.Avatar,
.Notice,
.StatusLight,
.Signal,
.ProtocolNode > .Icon,
.ProtocolLease {
    transition: background-color var(--MotionBase) var(--MotionEase), border-color var(--MotionBase) var(--MotionEase), color var(--MotionBase) var(--MotionEase), opacity var(--MotionBase) var(--MotionEase);
}

.HeatCell {
    transition: background-color var(--MotionBase) var(--MotionEase), border-color var(--MotionFast) var(--MotionEase), filter var(--MotionFast) var(--MotionEase);
}

tbody tr {
    transition: background-color var(--MotionFast) var(--MotionEase);
}

.Icon,
.SocrateLogo,
.NavChevron .Icon {
    transition: transform var(--MotionBase) var(--MotionEase), opacity var(--MotionFast) var(--MotionEase), color var(--MotionFast) var(--MotionEase);
}

.DonutSegment {
    transition: stroke-dasharray 500ms var(--MotionEase), stroke-dashoffset 500ms var(--MotionEase), stroke var(--MotionBase) var(--MotionEase);
}

@media (prefers-reduced-motion: no-preference) {
    .SignInLayout {
        animation: SurfaceEnter var(--MotionSlow) var(--MotionEase) both;
    }

    .Brand,
    .SignInBrand,
    .SessionLoading,
    .Footer,
    .SignInFooter,
    .ProtocolFooter {
        animation: FadeEnter var(--MotionSlow) var(--MotionEase) both;
    }

    .PageContent {
        animation: SurfaceEnter var(--MotionBase) var(--MotionEase) both;
    }

    .Panel,
    .StatCard,
    .EmptyState,
    .ConnectionBanner,
    .FormError,
    .Notice {
        animation: FadeEnter var(--MotionSlow) var(--MotionEase) both;
    }

    .StatCard:nth-child(2),
    .OverviewAside > .Panel:nth-child(2) {
        animation-delay: 40ms;
    }

    .StatCard:nth-child(3) {
        animation-delay: 80ms;
    }

    .ContentTabs .Tab,
    tbody tr {
        animation: FadeEnter var(--MotionBase) var(--MotionEase) both;
    }

    tbody tr:nth-child(2) { animation-delay: 16ms; }
    tbody tr:nth-child(3) { animation-delay: 32ms; }
    tbody tr:nth-child(4) { animation-delay: 48ms; }
    tbody tr:nth-child(5) { animation-delay: 64ms; }
    tbody tr:nth-child(6) { animation-delay: 80ms; }
    tbody tr:nth-child(7) { animation-delay: 96ms; }
    tbody tr:nth-child(n+8) { animation-delay: 112ms; }

    .Button:not(:disabled):hover,
    .IconButton:not(:disabled):hover,
    .AccountButton:hover {
        transform: translateY(-1px);
    }

    .Button:not(:disabled):active,
    .IconButton:not(:disabled):active,
    .AccountButton:active {
        transform: translateY(0) scale(0.98);
    }

    .NavigationItem:active,
    .SubNavigation button:active {
        transform: scale(0.985);
    }

    .Button:hover .lucide-arrow-right,
    .TextButton:hover .lucide-arrow-right {
        transform: translateX(2px);
    }

    .ChartLine {
        stroke-dasharray: 1;
        animation: ChartDraw 600ms var(--MotionEase) both;
    }

    .ChartArea,
    .Donut,
    .HeatmapGrid {
        animation: FadeEnter 500ms var(--MotionEase) both;
    }

    .PageActions .Button:disabled .lucide-refresh-cw {
        animation: RefreshSpin 800ms linear infinite;
    }

    .Dialog {
        animation: DialogEnter var(--MotionBase) var(--MotionEase) both;
    }

    .Dialog::backdrop {
        animation: FadeEnter var(--MotionFast) var(--MotionEase) both;
    }

    .Dialog.Closing {
        pointer-events: none;
        animation: DialogExit 160ms var(--MotionEase) both;
    }

    .Dialog.Closing::backdrop {
        animation: FadeExit 160ms var(--MotionEase) both;
    }

    .DialogBody {
        animation: SurfaceEnter var(--MotionBase) var(--MotionEase) both;
    }

    .Toast {
        animation: ToastTimeline 4800ms var(--MotionEase) both;
    }

    .SignInContent,
    .ProtocolHeading {
        animation: SurfaceEnter var(--MotionSlow) var(--MotionEase) both;
    }

    .SignInFields > .FormField,
    .SignedInAs,
    .SignInOptions,
    .SignInSubmit,
    .SignInHelp {
        animation: SurfaceEnter var(--MotionSlow) var(--MotionEase) both;
    }

    .SignInFields > :nth-child(2) { animation-delay: 40ms; }
    .SignInFields > :nth-child(3) { animation-delay: 80ms; }
    .SignInFields > :nth-child(n+4) { animation-delay: 120ms; }

    .ProtocolNode,
    .ProtocolCenter,
    .ProtocolLease {
        animation: SurfaceEnter 440ms var(--MotionEase) both;
    }

    .DeviceNode { animation-delay: 80ms; }
    .ProtocolCenter { animation-delay: 160ms; }
    .ProtocolLease { animation-delay: 240ms; }
    .ProtocolLines { animation: FadeEnter 500ms var(--MotionEase) 160ms both; }
}

@keyframes FadeEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes FadeExit {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes SurfaceEnter {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes DialogEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes DialogExit {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes ChartDraw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes RefreshSpin {
    to { transform: rotate(360deg); }
}

@keyframes ToastTimeline {
    0% { opacity: 0; translate: 0 8px; }
    5%, 94% { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 0 8px; }
}

html,
body,
#Root {
    min-height: 100%;
}

.Breadcrumb {
    font-size: 12px;
}

.AccountButton {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 6px 10px;
}

.AccountButton:hover {
    background: #ffffff04;
    border-color: var(--Border);
}

.Avatar {
    box-shadow: inset 0 1px 0 #ffffff0a, 0 2px 6px #00000020;
}

.PageContent {
    width: 100%;
    max-width: none;
}

.PageHeader {
    margin-bottom: 32px;
    gap: 24px;
}

.PageHeader h1 {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.PageHeader p {
    margin-top: 10px;
    color: var(--Muted);
}

.OverviewGrid,
.OverviewPrimary,
.OverviewAside {
    gap: 24px;
}

.StatValue {
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.8px;
}

.Panel,
.StatCard {
    transition: border-color var(--MotionBase) var(--MotionEase), box-shadow 320ms var(--MotionEase), transform 320ms var(--MotionEase), background-color var(--MotionBase) var(--MotionEase);
}

.PanelFooter {
    background: #00000009;
    padding-top: 16px;
    padding-bottom: 16px;
}

.PanelHeader h2 {
    font-weight: 500;
}

.Button,
.IconButton,
.AccountButton,
input,
select,
textarea {
    transition: background-color var(--MotionFast) var(--MotionEase), border-color var(--MotionFast) var(--MotionEase), color var(--MotionFast) var(--MotionEase), box-shadow var(--MotionBase) var(--MotionEase), opacity var(--MotionFast) var(--MotionEase), transform var(--MotionBase) var(--MotionEase);
}

.Button:not(:disabled):hover {
    box-shadow: inset 0 1px 0 #ffffff0d, 0 4px 12px #00000030;
}

.Button.LinkButton,
.Button.Subtle {
    box-shadow: none;
}

.Button.LinkButton:hover,
.Button.Subtle:hover {
    box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #ec489988;
    box-shadow: 0 0 0 3px #ec489912, 0 2px 6px #00000018;
}

th {
    background: #0000000c;
    font-weight: 500;
}

tbody tr:hover {
    background: #ffffff03;
}

.EmptyState {
    padding: 48px 24px;
}

.EmptyIcon {
    box-shadow: inset 0 1px 0 #ffffff05, 0 6px 16px #00000020;
}

.DialogHeader h2 {
    font-size: 22px;
    font-weight: 500;
    margin-top: 0;
}

.DialogHeader p {
    font-size: 12px;
    line-height: 1.7;
}

.Toast {
    box-shadow: inset 0 1px 0 #ffffff08, 0 8px 20px #00000030, 0 24px 56px #00000030;
}

@media (min-width: 1201px) {
    .OverviewGrid {
        grid-template-columns: minmax(0, 1fr) 292px;
    }
}

@media (max-width: 1200px) and (min-width: 781px) {
    .OverviewGrid {
        grid-template-columns: 1fr;
    }

    .OverviewAside {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 780px) {
    .Topbar {
        height: 64px;
        padding: 0 20px;
    }

    .Page {
        padding: 24px 20px;
    }

    .PageHeader h1 {
        font-size: 28px;
    }

    .PageHeader {
        gap: 16px;
        margin-bottom: 24px;
    }

    .OverviewGrid,
    .OverviewPrimary,
    .OverviewAside {
        gap: 20px;
    }

    .StatValue {
        font-size: 32px;
    }

    .Footer {
        padding: 16px 20px 24px;
    }
}

@media (max-width: 520px) {
    .OverviewAside {
        grid-template-columns: 1fr;
    }

    .PageHeader p {
        max-width: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .AppShell {
        animation: FadeEnter var(--MotionSlow) var(--MotionEase) both;
    }

    .PageContent {
        animation-duration: 360ms;
    }

    .Panel,
    .StatCard {
        animation: SurfaceEnter 440ms var(--MotionEase) both;
    }

    .OverviewPrimary > .Panel:nth-of-type(1) {
        animation-delay: 60ms;
    }

    .OverviewPrimary > .Panel:nth-of-type(2) {
        animation-delay: 120ms;
    }

    .StatCard:nth-child(2) {
        animation-delay: 50ms;
    }

    .StatCard:nth-child(3) {
        animation-delay: 100ms;
    }

    .ChartLine {
        animation-duration: 800ms;
    }
}

.Dropdown {
    min-width: 0;
}

.DropdownTrigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--Border);
    border-radius: 10px;
    background: var(--Raised);
    box-shadow: var(--ControlShadow);
    color: var(--Muted);
    text-align: left;
    font-size: 12px;
    white-space: nowrap;
    transition: background-color var(--MotionFast) var(--MotionEase), color var(--MotionFast) var(--MotionEase), border-color var(--MotionFast) var(--MotionEase), box-shadow var(--MotionBase) var(--MotionEase);
}

.DropdownTrigger:hover,
.DropdownTrigger.Open {
    border-color: #ffffff24;
    color: var(--Text);
    background: #38242b;
}

.DropdownTrigger .Icon {
    width: 14px;
    height: 14px;
    color: var(--Faint);
}

.DropdownTrigger.Open .Icon {
    transform: rotate(180deg);
}

.FormField .DropdownTrigger {
    min-height: 42px;
    background: var(--Main);
}

.PeriodDropdown {
    flex-shrink: 0;
}

.FilterGroup .DropdownTrigger {
    padding: 8px 10px;
    font-size: 12px;
}

.DropdownMenu {
    position: fixed;
    z-index: 100;
    display: grid;
    padding: 4px;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #ffffff20 transparent;
    border: 1px solid #ffffff1a;
    border-radius: 12px;
    background: #2c1b21;
    box-shadow: inset 0 1px 0 #ffffff08, 0 8px 24px #00000040, 0 24px 56px #00000030;
    transform-origin: top;
}

.DropdownMenu.Above {
    transform-origin: bottom;
}

.DropdownMenu.Closing {
    pointer-events: none;
}

.DropdownOption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    color: var(--Muted);
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    transition: background-color var(--MotionFast) var(--MotionEase), color var(--MotionFast) var(--MotionEase);
}

.DropdownOption.Focused {
    background: #ffffff09;
    color: var(--Text);
}

.DropdownOption[aria-selected="true"] {
    color: var(--Accent);
}

.DropdownOption .Icon {
    width: 14px;
    height: 14px;
}

.DateTimeField {
    border: 1px solid var(--Border);
    border-radius: 12px;
    background: var(--Main);
    padding: 12px;
}

.CalendarHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.CalendarHeader strong {
    font-size: 12px;
    font-weight: 500;
}

.CalendarGrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.CalendarWeekday {
    font-size: 11px;
    color: var(--Faint);
    text-align: center;
    padding: 8px 0;
}

.CalendarDay {
    height: 32px;
    border-radius: 8px;
    font-size: 12px;
    background: transparent;
    color: var(--Muted);
    transition: background-color var(--MotionFast) var(--MotionEase), color var(--MotionFast) var(--MotionEase);
}

.CalendarDay:not(:disabled):hover {
    background: #ffffff09;
    color: var(--Text);
}

.CalendarDay.Selected {
    background: var(--Accent);
    color: #28141b;
}

.CalendarTime {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--Border);
}

.CalendarTime > span:first-child {
    flex: 1;
    font-size: 11px;
    color: var(--Faint);
}

.CalendarTime .Dropdown {
    width: 64px;
}

.CalendarTime .DropdownTrigger {
    min-height: 36px;
    padding: 8px;
    gap: 8px;
}

@media (prefers-reduced-motion: no-preference) {
    .DropdownMenu {
        animation: DropdownEnter 180ms var(--MotionEase) both;
    }

    .DropdownMenu.Closing {
        animation: DropdownExit 140ms var(--MotionEase) both;
    }

    .LicenseResults {
        animation: LicenseContentEnter 240ms var(--MotionEase) both;
    }
}

@keyframes DropdownEnter {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: none; }
}

@keyframes DropdownExit {
    from { opacity: 1; translate: none; }
    to { opacity: 0; translate: 0 -4px; }
}

@keyframes LicenseContentEnter {
    from { opacity: 0; translate: 0 4px; }
    to { opacity: 1; translate: none; }
}

.UsageStats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.LineChart {
    position: relative;
}

.ChartCrosshair,
.ChartTooltip {
    pointer-events: none;
}

.ChartCursor {
    stroke: var(--Accent);
    stroke-opacity: 0.45;
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.ChartCursorPoint {
    fill: var(--Main);
    stroke: var(--Accent);
    stroke-width: 2;
}

.ChartCursorPoint.Secondary {
    stroke: #b7a3aa;
}

.ChartTooltip {
    position: absolute;
    z-index: 2;
    width: 180px;
    padding: 12px;
    border: 1px solid #ffffff18;
    border-radius: 10px;
    background: #1f1317f5;
    box-shadow: 0 8px 24px #00000040;
    font-size: 11px;
}

.ChartTooltipDate {
    color: var(--Faint);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--Border);
}

.ChartTooltip > div:not(:first-child),
.ChartTooltip span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ChartTooltip > div:not(:first-child) {
    justify-content: space-between;
    margin-top: 8px;
}

.ChartTooltip span {
    color: var(--Muted);
}

.ChartTooltip strong {
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ChartTooltip i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--Accent);
}

.ChartTooltip i.Secondary {
    background: #b7a3aa;
}

@media (max-width: 1400px) {
    .UsageStats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@font-face {
    font-family: Geist;
    src: url('/api/v1/admin/assets/Geist.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.Button {
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 18px;
}

.Button.Primary {
    color: #fff8fa;
    background: linear-gradient(180deg, #bf6281, #a64867);
    border-color: #eda4bc50;
    box-shadow: inset 0 1px 0 #ffffff20, 0 4px 12px #00000030;
}

.Button.Primary:not(:disabled):hover {
    background: linear-gradient(180deg, #ca6f8d, #b15372);
    border-color: #f8b9ce78;
}

.NavigationItem,
.DropdownTrigger,
.Tab {
    font-weight: 500;
}

.PageHeader h1 {
    font-weight: 600;
}

.BrandName {
    font-weight: 600;
}

.ProductSwitch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid #ffffff0c;
    border-radius: 999px;
    background: #1d1316;
}

.ProductChoice {
    position: relative;
    z-index: 1;
    min-width: 84px;
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 999px;
    background: transparent;
    color: var(--Faint);
    font-size: 12px;
    font-weight: 500;
    transition: color var(--MotionBase) var(--MotionEase);
}

.ProductChoice:hover,
.ProductChoice[aria-pressed="true"] {
    color: var(--Text);
}

.ProductSwitchIndicator {
    position: absolute;
    inset: 4px auto 4px 4px;
    width: calc((100% - 12px) / 2);
    border: 1px solid #ffffff12;
    border-radius: 999px;
    background: linear-gradient(180deg, #3f3136, #2f2327);
    box-shadow: inset 0 1px 0 #ffffff08, 0 2px 4px #00000030;
    transition: transform 360ms var(--MotionEase);
}

.ProductSwitchIndicator.External {
    transform: translateX(calc(100% + 4px));
}

.LicenseKey {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 2px 0;
    background: transparent;
    color: var(--Accent);
    font-size: 11px;
    white-space: nowrap;
    transition: color var(--MotionFast) var(--MotionEase);
}

.LicenseKey:hover {
    color: var(--Text);
}

.LicenseKey .Icon {
    width: 12px;
    height: 12px;
}

.LicenseKeyDetails {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.LicenseKeyDetails .KeyReveal {
    flex: 1;
}

.LicenseKeyDetails .Button {
    flex-shrink: 0;
}

.ReleaseFileInput {
    display: none;
}

.ReleaseDropzone {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
    padding: 32px 24px;
    color: var(--Text);
    border: 1px dashed #ffffff24;
    border-radius: 12px;
    background: var(--Main);
    transition: border-color var(--MotionFast) var(--MotionEase), background-color var(--MotionFast) var(--MotionEase);
}

.ReleaseDropzone:hover,.ReleaseDropzone.Dragging,.ReleaseDropzone.Selected {
    border-color: var(--Accent);
    background: var(--AccentDark);
}

.ReleaseDropzone > .Icon {
    width: 24px;
    height: 24px;
    color: var(--Accent);
}

.ReleaseDropzone strong {
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ReleaseDropzone span,.UploadHint {
    color: var(--Muted);
    font-size: 12px;
}

.UploadHint {
    margin-top: 16px;
}

.DownloadList {
    margin-top: 24px;
}

.ReleaseWorkspace {
    display: grid;
    gap: 24px;
}

.DownloadRow {
    padding: 24px;
    border-top: 1px solid var(--Border);
}

.DownloadHeading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.DownloadFileIcon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: var(--Accent);
    background: var(--AccentDark);
    border: 1px solid var(--Border);
    border-radius: 12px;
}

.DownloadName {
    min-width: 0;
    flex: 1;
}

.DownloadName h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
}

.DownloadName h3 span {
    color: var(--Muted);
    font-size: 12px;
    font-weight: 400;
}

.DownloadName p {
    margin-top: 4px;
    color: var(--Muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.DownloadMetadata {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 16px 0;
    color: var(--Faint);
    font-size: 12px;
}

.DownloadLink {
    display: flex;
    align-items: center;
    gap: 12px;
}

.DownloadLink input {
    min-width: 0;
    width: 100%;
    font-size: 12px;
}

.DownloadLink .Button,.DownloadHeading > .Button {
    flex-shrink: 0;
}

.DownloadChecksum {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    color: var(--Faint);
    font-size: 11px;
}

.DownloadChecksum > span {
    flex-shrink: 0;
}

.DownloadChecksum code {
    min-width: 0;
    overflow-wrap: anywhere;
}

.DownloadChecksum .IconButton {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .DownloadRow {
        padding: 20px 16px;
    }
    .DownloadHeading {
        flex-wrap: wrap;
        gap: 12px;
    }
    .DownloadHeading > .Button {
        margin-left: 56px;
    }
    .DownloadChecksum {
        gap: 8px;
    }
    .LicenseKeyDetails {
        flex-wrap: wrap;
    }
}

.ExternalRuntimeSummary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 24px 24px 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--Border);
}

.ExternalRuntimeSummary > div {
    display: grid;
    gap: 8px;
}

.ExternalRuntimeSummary span,
.ExternalRuntimeSummary small {
    color: var(--Muted);
    font-size: 11px;
    font-weight: 400;
}

.ExternalRuntimeSummary strong {
    font-size: 28px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.PlanGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
    gap: 24px;
    align-items: start;
}

.PlanCard .PanelHeader {
    align-items: start;
}

.PlanCard .PanelHeader p {
    max-width: 36ch;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.PlanBody {
    display: grid;
    gap: 24px;
    padding: 24px;
}

.PlanPrice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-size: 34px;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

.PlanPrice > span {
    font-size: 12px;
    font-weight: 400;
    color: var(--Muted);
}

.PlanAllowance {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-block: 20px;
    border-block: 1px solid var(--Border);
}

.PlanAllowance > .Icon {
    color: var(--Accent);
    width: 22px;
    height: 22px;
}

.PlanAllowance > span {
    display: grid;
    gap: 6px;
}

.PlanAllowance small,.PlanFacts {
    color: var(--Muted);
    font-size: 12px;
}

.PlanFacts,.PlanActions,.ModelListHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.PlanActions {
    justify-content: start;
    flex-wrap: wrap;
    gap: 8px;
}

.MemberUsage {
    display: grid;
    gap: 10px;
    min-width: 120px;
    max-width: 220px;
    font-variant-numeric: tabular-nums;
}

.MemberUsage small {
    color: var(--Faint);
}

.UsageTrack {
    height: 4px;
    background: var(--Raised);
    border-radius: 4px;
    overflow: hidden;
}

.UsageTrack > span {
    display: block;
    height: 100%;
    background: var(--Accent);
    transform-origin: left;
    transition: transform 600ms cubic-bezier(.22,1,.36,1);
}

.ModelList {
    display: grid;
    gap: 12px;
    padding-top: 8px;
}

.ModelListHeading {
    margin-bottom: 4px;
}

.ModelEditor {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) 100px 36px;
    align-items: center;
    gap: 10px;
}

.ModelEditor input {
    width: 100%;
    min-width: 0;
}

.IntegrationResult {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--Accent);
    margin-top: 16px;
    font-size: 12px;
}

.CheckoutReturn {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 32px 24px;
    background: var(--Background);
}

.CheckoutReturnContent {
    display: grid;
    justify-items: center;
    gap: 20px;
    max-width: 440px;
    text-align: center;
    animation: FadeEnter 500ms cubic-bezier(.22,1,.36,1) both;
}

.CheckoutReturnContent > .SocrateLogo {
    width: 54px;
    height: 54px;
}

.CheckoutReturnContent > p {
    color: var(--Muted);
    font-size: 14px;
    line-height: 1.8;
}

.CheckoutReturnStatus {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--Border);
    border-radius: 50%;
    margin-top: 20px;
    background: var(--PanelSurface);
    box-shadow: var(--CardShadow);
    color: var(--Muted);
}

.CheckoutReturnStatus.Paid {
    color: var(--Accent);
}

.CheckoutReturnStatus .Icon {
    width: 26px;
    height: 26px;
}

@media (max-width: 700px) {
    .ModelEditor {
        grid-template-columns: minmax(0,1fr) 90px 36px;
    }
    .ModelEditor input:first-child {
        grid-column: 1 / -1;
    }
    .PlanBody {
        padding: 20px;
    }
}

.ExternalRuntimeSummary small {
    color: var(--Faint);
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .Breadcrumb strong {
        display: none;
    }
}

@media (max-width: 520px) {
    .ExternalStats {
        grid-template-columns: 1fr;
    }

    .HeaderRight {
        gap: 8px;
    }

    .ProductChoice {
        min-width: 76px;
        padding: 6px 10px;
    }
}

.BulkKeys {
    display: block;
    width: 100%;
    min-height: 180px;
    margin-bottom: 20px;
    padding: 16px;
    line-height: 1.9;
    font-size: 14px;
    color: var(--Accent);
    resize: vertical;
}

.DocsPage {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.DocsPage .Notice+.Notice {
    margin-top: 10px;
}

.DocsPage .FieldList+.Notice {
    margin-top: 20px;
}

.DocsSteps {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.DocsStep {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr);
    gap: 16px;
    align-items: start;
}

.DocsStepMark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    border-radius: 999px;
    background: var(--AccentDark);
    border: 1px solid #ec489938;
    color: var(--Accent);
    font-size: 12px;
    font-weight: 600;
}

.DocsStepBody h3 {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--Text);
}

.DocsStepBody>p {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--Muted);
}

.DocsStepBody>.Notice,.DocsStepBody>.DocsBlock {
    margin-top: 14px;
}

.DocsBlock {
    border: 1px solid var(--Border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--Main);
}

.DocsBlockHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    border-bottom: 1px solid var(--SubtleBorder);
    background: #ffffff03;
}

.DocsBlockHead>span {
    font-size: 11px;
    font-weight: 500;
    color: var(--Faint);
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    overflow-wrap: anywhere;
}

.DocsBlock .JsonPreview {
    border: 0;
    border-radius: 0;
    background: none;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
}

.DocsPage code {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--AccentDark);
    color: var(--Accent);
}

@media (max-width: 780px) {
    .DocsStep {
        grid-template-columns: 24px minmax(0,1fr);
        gap: 12px;
    }

    .DocsStepMark {
        height: 24px;
        width: 24px;
        font-size: 11px;
    }
}