:root {
    color-scheme: dark;
    --bg: #0b1013;
    --sidebar: #0d1317;
    --surface: #11191e;
    --surface-2: #151f25;
    --surface-3: #1a262d;
    --border: #26333a;
    --border-soft: #1e2a30;
    --text: #edf5f2;
    --muted: #82939a;
    --muted-2: #5c6c73;
    --cyan: #31d7ff;
    --cyan-2: #00a8e0;
    --blue: #65a9ff;
    --purple: #aa8cff;
    --amber: #f3bb66;
    --red: #ff6b78;
    --orange: #ff956c;
    --radius: 14px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-size: 14px; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
code { font-family: "SFMono-Regular", Consolas, monospace; }
h1:focus { outline: none; }

.auth-body { min-height: 100vh; background: radial-gradient(circle at 50% 0, rgba(49,215,255,.065), transparent 34%), var(--bg); }.auth-shell { min-height: 100vh; padding: 28px; display: grid; place-items: center; }.auth-card { width: min(420px,100%); padding: 31px; border: 1px solid var(--border); border-radius: 17px; background: linear-gradient(145deg,#121b20,#0e1519); box-shadow: 0 28px 80px rgba(0,0,0,.36); }.auth-card-wide { width: min(620px,100%); }.auth-brand { margin-bottom: 34px; display: flex; align-items: center; gap: 12px; }.auth-brand > div { display: flex; flex-direction: column; gap: 3px; }.auth-brand strong { font-size: 20px; }.auth-brand strong span { color: var(--cyan); }.auth-brand small { color: var(--muted-2); font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; }.auth-copy h1 { margin: 0; font-size: 30px; }.auth-copy > p:last-child { margin: 8px 0 23px; color: var(--muted); font-size: 11px; }.auth-card form { display: grid; gap: 14px; }.auth-card form label { display: grid; gap: 7px; }.auth-card form label > span,.auth-label { color: #71848a; font-size: 8px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }.auth-card input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #2a3940; border-radius: 8px; outline: 0; background: #0d1519; color: var(--text); }.auth-card input:focus { border-color: rgba(49,215,255,.5); box-shadow: 0 0 0 3px rgba(49,215,255,.07); }.auth-card .button { min-height: 42px; display: grid; place-items: center; }.auth-errors { color: var(--red); font-size: 9px; line-height: 1.5; }.auth-errors:empty { display:none; }.auth-footnote { margin: 19px 0 0; color: #53646a; font-size: 8px; text-align: center; }.auth-warning { color: var(--amber); font-size: 10px; line-height: 1.6; }.mfa-setup { margin-bottom: 20px; padding: 16px; display: grid; grid-template-columns: 168px 1fr; align-items: center; gap: 18px; border: 1px solid var(--border-soft); border-radius: 12px; background: #f7fbfc; color: #142127; }.qr-code { width: 168px; height: 168px; display: grid; place-items: center; }.qr-code svg { width: 168px; height: 168px; }.mfa-setup > div:last-child { display: grid; gap: 9px; }.mfa-setup p { margin: 0; color: #5c6c73; font-size: 9px; line-height: 1.5; }.secret-key { padding: 9px; border-radius: 6px; background: #dfe9ec; color: #17252b; font-size: 10px; overflow-wrap: anywhere; }.recovery-code-grid { margin: 18px 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.recovery-code-grid code { padding: 10px; border: 1px solid var(--border-soft); border-radius: 7px; background: #0c1316; color: var(--cyan); text-align: center; }
.admin-shell { min-height: 100vh; padding: 38px clamp(20px,5vw,70px); }.admin-page { width: min(1040px,100%); margin: 0 auto; }.admin-page-header { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }.admin-page-header h1 { margin: 0; font-size: 34px; }.admin-page-header p:last-child { margin: 8px 0 0; color: var(--muted); }.admin-panel { margin-top: 14px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg,#121b20,#0e1519); overflow: hidden; }.admin-panel-heading { padding: 18px; }.admin-panel-heading h2 { margin: 0; font-size: 14px; }.admin-panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }.administrator-row { min-height: 68px; padding: 12px 18px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--border-soft); }.administrator-row > div { display: flex; flex-direction: column; gap: 4px; }.administrator-row strong { font-size: 10px; }.administrator-row small { color: var(--muted); font-size: 8px; }.administrator-row form { margin: 0; }.administrator-row .button { min-width: 78px; }.create-admin-panel { padding-bottom: 18px; }.create-admin-form { padding: 0 18px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 10px; }.create-admin-form label { display: grid; gap: 6px; }.create-admin-form label span { color: var(--muted); font-size: 8px; text-transform: uppercase; }.create-admin-form input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: #0d1519; color: var(--text); }.status-message { padding: 11px 13px; border: 1px solid rgba(49,215,255,.2); border-radius: 8px; background: rgba(49,215,255,.06); color: var(--cyan); font-size: 9px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 226px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 15px 18px; display: flex; flex-direction: column; border-right: 1px solid var(--border-soft); background: linear-gradient(180deg, #0d1418, #0b1115); z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 30px; }
.brand > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.brand strong { font-size: 20px; line-height: 1; letter-spacing: -.6px; }
.brand strong span { color: var(--cyan); }
.brand small { color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: 1.7px; }
.brand-mark { position: relative; width: 33px; height: 35px; display: inline-block; transform: skewY(-9deg); }
.brand-mark > span { position: absolute; left: 0; width: 32px; height: 9px; border: 2px solid var(--cyan); border-radius: 3px; box-shadow: 0 0 16px rgba(49,215,255,.16); }
.brand-mark > span:nth-child(1) { top: 0; }
.brand-mark > span:nth-child(2) { top: 11px; left: 4px; opacity: .78; }
.brand-mark > span:nth-child(3) { top: 22px; left: 8px; opacity: .5; }
.primary-nav { display: flex; flex-direction: column; gap: 5px; }
.primary-nav a { min-height: 42px; padding: 0 11px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 600; transition: .18s ease; }
.primary-nav a:hover { color: var(--text); background: rgba(255,255,255,.035); }
.primary-nav a.active { color: #e4faff; background: rgba(49,215,255,.105); box-shadow: inset 2px 0 0 var(--cyan); }
.primary-nav i { font-style: normal; font-size: 17px; color: #71838a; }
.primary-nav a.active i { color: var(--cyan); }
.primary-nav b, .primary-nav em { min-width: 21px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: #1b292f; color: #8ea0a7; font-size: 10px; font-style: normal; }
.primary-nav em { background: rgba(243,187,102,.14); color: var(--amber); }
.nav-section-label { margin: 27px 11px 9px; color: #4d5c62; font-size: 9px; font-weight: 800; letter-spacing: 1.55px; text-transform: uppercase; }
.primary-nav.secondary a { min-height: 39px; }
.sidebar-spacer { flex: 1; }
.server-card, .user-card { margin: 0 3px; padding: 12px 10px; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--border-soft); }
.server-card div, .user-card div { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 2px; }
.server-card strong, .user-card strong { font-size: 11px; font-weight: 700; }
.server-card small, .user-card small { color: var(--muted-2); font-size: 9px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(49,215,255,.11); }
.pulse-dot.pending { background: var(--amber); box-shadow: 0 0 0 4px rgba(243,187,102,.1); }
.server-menu { color: var(--muted-2); font-size: 11px; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #153c4c, #112b38); color: var(--cyan); font-size: 9px; font-weight: 800; }

.workspace { min-width: 0; }
.topbar { height: 62px; padding: 0 34px; display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid var(--border-soft); background: rgba(11,16,19,.9); position: sticky; top: 0; z-index: 15; backdrop-filter: blur(14px); }
.environment-pill { margin-right: auto; height: 28px; padding: 0 11px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 6px; background: #11191d; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
.environment-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(243,187,102,.5); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #7b8d94; cursor: pointer; font-size: 18px; }
.icon-button:hover { border-color: var(--border); background: var(--surface); color: var(--text); }
.notification { position: relative; }
.notification > span { position: absolute; right: 7px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.clock-block { margin-left: 8px; padding-left: 15px; border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; align-items: flex-end; }
.clock-block strong { font-size: 12px; }
.clock-block small { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .7px; }
.page-content { padding: 34px clamp(24px, 3vw, 46px) 50px; }
.dashboard { max-width: 1550px; margin: 0 auto; }
.page-dashboard { animation: pageEnter .22s ease; }.narrow-dashboard { max-width: 1180px; }@keyframes pageEnter { from { opacity: .2; transform: translateY(4px); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.eyebrow { margin: 0 0 8px !important; color: var(--cyan) !important; font-size: 9px !important; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; }
.page-heading h1 { margin: 0; font-size: clamp(25px, 3vw, 36px); line-height: 1.1; letter-spacing: -1.35px; font-weight: 650; }
.page-heading > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.heading-actions { display: flex; gap: 9px; }
.button { min-height: 37px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: #b9c7c6; cursor: pointer; font-size: 11px; font-weight: 750; transition: .16s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); border-color: #3a4b52; color: white; }
.button.primary { border-color: rgba(49,215,255,.32); background: var(--cyan); color: #031319; box-shadow: 0 8px 24px rgba(0,168,224,.11); }
.button.primary:hover:not(:disabled) { background: #63e2ff; color: #021218; }
.button.secondary { background: #11191e; }
.button:disabled { opacity: .48; cursor: not-allowed; }
.button-icon { margin-right: 5px; font-size: 15px; vertical-align: -1px; }
.notice-banner { margin: -8px 0 20px; min-height: 42px; padding: 8px 10px 8px 13px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(49,215,255,.2); border-radius: 9px; background: rgba(0,168,224,.08); animation: noticeIn .25s ease; }
.notice-banner > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(49,215,255,.16); color: var(--cyan); font-size: 11px; }
.notice-banner p { margin: 0; flex: 1; color: #a9beb9; font-size: 11px; }
.notice-banner button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; }
@keyframes noticeIn { from { opacity: 0; transform: translateY(-5px); } }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.summary-card { position: relative; min-height: 148px; padding: 19px 19px 15px; overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius); background: linear-gradient(145deg, #121a1f, #0f171b); box-shadow: 0 10px 35px rgba(0,0,0,.12); }
a.summary-card { display: block; transition: .18s ease; }a.summary-card:hover { transform: translateY(-2px); border-color: #34454c; box-shadow: 0 16px 42px rgba(0,0,0,.18); }
.summary-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--card-accent); }
.summary-card::after { content: ""; position: absolute; right: -30px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--card-accent); opacity: .035; filter: blur(4px); }
.accent-cyan { --card-accent: var(--cyan); }.accent-blue { --card-accent: var(--blue); }.accent-purple { --card-accent: var(--purple); }.accent-amber { --card-accent: var(--amber); }
.summary-icon { position: absolute; right: 17px; top: 17px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--card-accent) 11%, transparent); color: var(--card-accent); font-size: 16px; }
.summary-label { color: #73858c; font-size: 9px; font-weight: 800; letter-spacing: 1.15px; text-transform: uppercase; }
.summary-value { margin-top: 16px; font-size: 27px; font-weight: 650; letter-spacing: -1px; }
.summary-value span { color: var(--muted-2); font-size: 10px; font-weight: 600; letter-spacing: 0; }
.summary-card > small { color: var(--muted-2); font-size: 9px; }
.mini-bar { width: 72%; height: 3px; margin: 13px 0 7px; border-radius: 3px; background: #253038; overflow: hidden; }.mini-bar i { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }
.trend { margin-top: 20px; color: var(--muted); font-size: 10px; }.trend.positive { color: var(--cyan); }.trend span { color: var(--muted-2); }
.visitor-row { height: 25px; margin-top: 17px; display: flex; align-items: center; }.visitor-row span { width: 23px; height: 23px; margin-right: -5px; border: 2px solid var(--surface); border-radius: 50%; background: linear-gradient(135deg, #324750, #1e3037); }.visitor-row span:nth-child(2){background:linear-gradient(135deg,#5a453c,#302521)}.visitor-row span:nth-child(3){background:linear-gradient(135deg,#3f385a,#27243a)}.visitor-row span:nth-child(4){background:linear-gradient(135deg,#315047,#1d302b)}.visitor-row small { margin-left: 12px; color: var(--muted-2); font-size: 9px; }

.section-block { padding-top: 38px; scroll-margin-top: 70px; }
.section-heading, .panel-heading { margin-bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.section-heading h2, .panel-heading h2 { margin: 0; font-size: 15px; font-weight: 680; letter-spacing: -.2px; }
.section-heading p, .panel-heading p { margin: 5px 0 0; color: var(--muted-2); font-size: 10px; }
.section-heading a, .panel-footer button { border: 0; background: transparent; color: var(--cyan); cursor: pointer; font-size: 10px; font-weight: 700; }
.section-heading a span { margin-left: 4px; }
.empty-state { min-height: 116px; padding: 22px; display: flex; align-items: center; gap: 15px; border: 1px dashed #2a3940; border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,27,32,.72), rgba(13,20,24,.72)); }
.empty-state > div { min-width: 0; flex: 1; }.empty-state h3 { margin: 0 0 6px; font-size: 13px; }.empty-state p { max-width: 680px; margin: 0; color: var(--muted-2); font-size: 9px; line-height: 1.6; }.empty-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 1px solid rgba(49,215,255,.15); border-radius: 10px; background: rgba(49,215,255,.055); color: var(--cyan); font-size: 19px; }
.applications-empty .button { flex: 0 0 auto; }.traffic-empty { min-height: 145px; border: 0; background: transparent; }.catalog-empty { grid-column: 1 / -1; }
.application-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.application-card { position: relative; min-width: 0; padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: linear-gradient(155deg, #121b20, #0f161a); transition: .18s ease; overflow: hidden; }
.application-card:hover { border-color: #33434a; transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0,0,0,.17); }
.application-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(49,215,255,.32), transparent); opacity: .5; }
.application-card.degraded::before { background: linear-gradient(90deg, transparent, var(--amber), transparent); }
.application-card.stopped { opacity: .78; }
.app-card-top { min-height: 48px; display: flex; justify-content: space-between; gap: 8px; }
.app-identity { min-width: 0; display: flex; gap: 10px; }
.app-glyph, .catalog-icon { flex: 0 0 auto; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(49,215,255,.17); border-radius: 10px; background: linear-gradient(135deg, #143643, #102731); color: var(--cyan); font-size: 11px; font-weight: 850; letter-spacing: .4px; }
.app-name-row { display: flex; align-items: center; gap: 7px; }
.app-name-row h3 { max-width: 120px; margin: 1px 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.app-identity a { display: block; max-width: 175px; overflow: hidden; color: #6f838a; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }.app-identity a:hover { color: var(--cyan); }
.plain-menu { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--muted-2); cursor: pointer; letter-spacing: 1px; }
.status-pill { display: inline-flex; align-items: center; min-height: 18px; padding: 0 7px; border-radius: 10px; background: rgba(49,215,255,.1); color: var(--cyan); font-size: 7px; font-weight: 850; letter-spacing: .65px; text-transform: uppercase; }
.status-pill.degraded, .status-pill.pending { background: rgba(243,187,102,.1); color: var(--amber); }.status-pill.stopped { background: rgba(125,142,149,.12); color: #819198; }.status-pill.updating { background: rgba(101,169,255,.12); color: var(--blue); }
.route-strip { margin: 13px 0; height: 31px; padding: 0 9px; display: flex; align-items: center; gap: 7px; border: 1px solid #202d33; border-radius: 6px; background: #0c1316; min-width: 0; }
.route-strip span { color: var(--cyan); font-size: 7px; font-weight: 900; letter-spacing: .8px; }.route-strip strong { min-width: 0; flex: 1; overflow: hidden; color: #82969b; font-size: 8px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }.route-strip i { color: #3d4b51; font-style: normal; }.route-strip code { color: #a6b6b7; font-size: 8px; }
.app-stats { padding: 11px 0 10px; display: grid; grid-template-columns: 1.4fr .75fr .9fr; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.app-stats > div:not(:first-child) { padding-left: 10px; border-left: 1px solid var(--border-soft); }.app-stats span { display: block; margin-bottom: 5px; color: #53636a; font-size: 7px; font-weight: 850; letter-spacing: .75px; }.app-stats strong { color: #aebcbd; font-size: 9px; }.health-value i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px rgba(49,215,255,.5); }.health-value.degraded { color: var(--amber); }.health-value.degraded i { background: var(--amber); box-shadow: 0 0 6px rgba(243,187,102,.5); }.health-value.stopped { color: #718087; }.health-value.stopped i { background: #64757b; box-shadow: none; }
.app-meta-row { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #64767c; font-size: 7.5px; }.lock-icon { color: var(--cyan); font-size: 6px; font-style: normal; }
.update-callout { width: 100%; min-height: 31px; margin: 0 0 10px; padding: 0 9px; display: grid; grid-template-columns: 19px 1fr auto; align-items: center; border: 1px solid rgba(243,187,102,.18); border-radius: 6px; background: rgba(243,187,102,.055); color: var(--amber); cursor: pointer; text-align: left; }.update-callout > span { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 4px; background: rgba(243,187,102,.12); }.update-callout strong { font-size: 8px; }.update-callout em { font-size: 7px; font-style: normal; }
.app-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.app-actions button { min-height: 30px; border: 1px solid #27353b; border-radius: 6px; background: #121c20; color: #7f9197; cursor: pointer; font-size: 8px; font-weight: 700; }.app-actions button:hover:not(:disabled) { border-color: #42555b; color: #dce9e6; }.app-actions button.action-main { color: var(--cyan); }.app-actions button:disabled { opacity: .38; cursor: not-allowed; }
.app-actions a { min-height: 30px; display: grid; place-items: center; border: 1px solid #27353b; border-radius: 6px; background: #121c20; color: #7f9197; font-size: 8px; font-weight: 700; }.app-actions a:hover { border-color: #42555b; color: #dce9e6; }
.application-page-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.page-empty { min-height: 250px; margin-top: 12px; }

.page-stat-strip { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border-soft); border-radius: 12px; background: linear-gradient(145deg,#121b20,#0f161a); overflow: hidden; }.page-stat-strip > div { min-height: 72px; padding: 15px 18px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }.page-stat-strip > div + div { border-left: 1px solid var(--border-soft); }.page-stat-strip span { color: var(--muted-2); font-size: 7.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }.page-stat-strip strong { font-size: 19px; font-weight: 650; }

.panel { border: 1px solid var(--border-soft); border-radius: var(--radius); background: linear-gradient(155deg, #11191e, #0e1519); }
.two-column { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .78fr); gap: 12px; }
.logs-panel { min-width: 0; overflow: hidden; }.panel-heading { margin: 0; padding: 17px 18px 14px; }.panel-heading.compact { padding-bottom: 10px; align-items: center; }
.live-indicator { display: flex; align-items: center; gap: 6px; color: var(--cyan); font-size: 8px; font-weight: 850; letter-spacing: 1px; }.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(49,215,255,.08); animation: pulse 2s infinite; }@keyframes pulse{50%{opacity:.45}}
.log-toolbar { padding: 10px 13px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: rgba(7,12,14,.45); }
.log-toolbar select, .search-field { height: 29px; border: 1px solid #26343a; border-radius: 6px; background: #10181c; color: #899b9f; font-size: 8px; }.log-toolbar select { width: 125px; padding: 0 8px; }
.severity-filter { display: flex; gap: 3px; }.severity-filter button { height: 26px; padding: 0 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #63757b; cursor: pointer; font-size: 7px; font-weight: 800; text-transform: uppercase; }.severity-filter button:hover, .severity-filter button.selected { border-color: #304047; background: #192329; color: #c2cecc; }.severity-filter button.notice.selected { color: var(--cyan); }.severity-filter button.warning.selected { color: var(--amber); }.severity-filter button.alert.selected { color: var(--orange); }.severity-filter button.fault.selected { color: var(--red); }
.search-field { margin-left: auto; width: min(170px, 22%); padding: 0 8px; display: flex; align-items: center; gap: 5px; }.search-field span { color: #53646a; }.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: #b8c6c5; font-size: 8px; }
.log-list { min-height: 274px; }.log-row { min-height: 39px; padding: 0 14px; display: grid; grid-template-columns: 61px 103px 55px minmax(0,1fr); align-items: center; gap: 7px; border-bottom: 1px solid #1b272c; font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; }.log-row:hover { background: rgba(255,255,255,.018); }.log-row time { color: #53646a; }.log-app { overflow: hidden; color: #91a2a5; white-space: nowrap; text-overflow: ellipsis; }.severity-badge { width: fit-content; padding: 3px 5px; border-radius: 3px; background: rgba(49,215,255,.08); color: var(--cyan); font-size: 6.5px; font-weight: 900; letter-spacing: .4px; }.log-row.warning .severity-badge { background: rgba(243,187,102,.09); color: var(--amber); }.log-row.alert .severity-badge { background: rgba(255,149,108,.09); color: var(--orange); }.log-row.fault .severity-badge { background: rgba(255,107,120,.1); color: var(--red); }.log-row p { margin: 0; overflow: hidden; color: #87989c; white-space: nowrap; text-overflow: ellipsis; }.log-row.fault p { color: #bd858a; }.empty-filter { padding: 90px 20px; color: var(--muted-2); text-align: center; font-size: 10px; }
.panel-footer { min-height: 36px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; color: #53646a; font-size: 8px; }.stacked-panels { display: grid; gap: 12px; }.health-panel, .certificate-panel { overflow: hidden; }.gauge-row { padding: 8px 17px 10px; display: flex; align-items: center; gap: 13px; }.donut { --value:23%; width: 51px; height: 51px; display: grid; flex: 0 0 51px; place-items: center; border-radius: 50%; background: conic-gradient(var(--cyan) var(--value), #26343a 0); position: relative; }.donut::after { content:""; position:absolute; inset:5px; border-radius:50%; background:#111a1e; }.donut.memory { --value:41%; background: conic-gradient(var(--purple) var(--value), #26343a 0); }.donut span { z-index:1; font-size:12px; font-weight:750; }.donut small { font-size:7px; color:var(--muted); }.gauge-info { flex:1; }.gauge-info strong { font-size:9px; }.gauge-info small { color:var(--muted-2); font-size:7.5px; }.gauge-line { height:3px; margin:7px 0 5px; border-radius:3px; background:#26343a; overflow:hidden; }.gauge-line i { display:block; height:100%; background:var(--cyan); }.gauge-line.purple i { background:var(--purple); }.server-facts { margin-top:7px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border-soft); }.server-facts span { padding:11px 5px; display:flex; flex-direction:column; align-items:center; gap:4px; }.server-facts span+span { border-left:1px solid var(--border-soft); }.server-facts small { color:#53646a; font-size:6.5px; letter-spacing:.7px; }.server-facts strong { font-size:9px; }
.page-live { min-height: 31px; padding: 0 11px; border: 1px solid rgba(49,215,255,.16); border-radius: 8px; background: rgba(49,215,255,.05); }.log-summary-row { margin-bottom: 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }.log-summary-row button { min-height: 66px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border-soft); border-radius: 10px; background: linear-gradient(145deg,#121b20,#0f161a); color: var(--muted); cursor: pointer; }.log-summary-row button span { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }.log-summary-row button strong { font-size: 18px; color: var(--text); }.log-summary-row button.active { border-color: rgba(49,215,255,.35); background: rgba(49,215,255,.07); color: var(--cyan); }.log-summary-row button.warning.active { border-color: rgba(243,187,102,.35); color: var(--amber); }.log-summary-row button.alert.active { border-color: rgba(255,149,108,.35); color: var(--orange); }.log-summary-row button.fault.active { border-color: rgba(255,107,120,.35); color: var(--red); }.logs-page-panel { min-height: 520px; }.page-log-toolbar { padding: 13px; }.page-log-toolbar select { width: 180px; }.page-log-toolbar .search-field { width: min(430px, 45%); margin-left: 0; }.page-log-toolbar .button { min-height: 29px; margin-left: auto; font-size: 8px; }.page-log-list { min-height: 430px; }.page-log-list .log-row { min-height: 48px; grid-template-columns: 105px 140px 62px minmax(0, 1fr); font-size: 9px; }
.certificate-count { color:var(--cyan); font-size:9px; font-weight:800; }.certificate-row { min-height:49px; padding:7px 16px; display:flex; align-items:center; gap:9px; border-top:1px solid var(--border-soft); }.cert-lock { width:25px; height:25px; display:grid; place-items:center; border-radius:6px; background:rgba(49,215,255,.07); color:var(--cyan); font-size:7px; }.certificate-row div { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }.certificate-row strong { overflow:hidden; font-size:8px; white-space:nowrap; text-overflow:ellipsis; }.certificate-row small { color:var(--muted-2); font-size:7px; }.checkmark { color:var(--cyan); font-size:9px; }
.adapter-empty { min-height: 112px; padding: 17px; display: grid; grid-template-columns: 31px 1fr; align-content: center; column-gap: 10px; border-top: 1px solid var(--border-soft); }.adapter-empty > span { grid-row: 1 / 3; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: rgba(243,187,102,.07); color: var(--amber); }.adapter-empty strong { align-self: end; font-size: 9px; }.adapter-empty p { align-self: start; margin: 3px 0 0; color: var(--muted-2); font-size: 7.5px; line-height: 1.45; }.adapter-empty.small { min-height: 76px; }

.updated-label { color:var(--muted-2); font-size:8px; }.traffic-panel { overflow:hidden; }.traffic-chart { height:168px; padding:15px 18px 23px 41px; position:relative; border-bottom:1px solid var(--border-soft); background:linear-gradient(180deg,rgba(49,215,255,.018),transparent); }.traffic-chart::before { content:""; position:absolute; inset:15px 18px 23px 41px; background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,#1e2a2f 32px); }.traffic-chart svg { position:relative; width:100%; height:100%; overflow:visible; }.chart-area { fill:url(#trafficFill); }.chart-line { fill:none; stroke:var(--cyan); stroke-width:1.7; filter:drop-shadow(0 0 5px rgba(49,215,255,.32)); }.chart-labels { position:absolute; left:10px; top:14px; bottom:22px; display:flex; flex-direction:column; justify-content:space-between; color:#46565d; font-size:7px; }.chart-times { position:absolute; left:41px; right:18px; bottom:7px; display:flex; justify-content:space-between; color:#46565d; font-size:7px; }.ip-table { width:100%; border-collapse:collapse; }.ip-table th { height:34px; padding:0 15px; color:#4f6067; font-size:7px; letter-spacing:.6px; text-align:left; text-transform:uppercase; }.ip-table td { height:43px; padding:0 15px; border-top:1px solid var(--border-soft); color:#7f9297; font-size:8px; }.ip-table code { color:#b2c0c1; }.ip-table strong { color:#aab9b9; }.country-code { width:23px; height:18px; margin-right:7px; display:inline-grid; place-items:center; border-radius:4px; background:#1a262c; color:#76898f; font-size:6.5px; font-weight:800; }.risk-pill { padding:4px 7px; border-radius:9px; background:rgba(49,215,255,.08); color:var(--cyan); font-size:6.5px; font-weight:800; text-transform:uppercase; }.risk-pill.elevated { background:rgba(243,187,102,.08);color:var(--amber); }.risk-pill.high { background:rgba(255,107,120,.09);color:var(--red); }.risk-pill.blocked { background:#252b2e;color:#7a898e; }.block-button { min-width:50px; height:25px; border:1px solid #334248; border-radius:5px; background:transparent; color:#7e9196; cursor:pointer; font-size:7px; }.block-button:hover { border-color:rgba(255,107,120,.38); color:var(--red); }.block-button.unblock { border-color:rgba(49,215,255,.22); color:var(--cyan); }
.traffic-summary-grid .summary-card { min-height: 126px; }.traffic-chart-placeholder { min-height: 280px; display: grid; place-items: center; color: var(--muted-2); }

.catalog-heading { align-items: center; }.catalog-toolbar { display: flex; align-items: center; gap: 11px; }.catalog-toolbar .button { min-height: 30px; padding-inline: 10px; font-size: 8px; }
.catalog-view-label { margin: 21px 0 11px; display: flex; align-items: flex-end; justify-content: space-between; }.catalog-view-label h2 { margin: 0; font-size: 14px; }.catalog-view-label p { margin: 5px 0 0; color: var(--muted-2); font-size: 9px; }.catalog-view-label > span { color: var(--muted-2); font-size: 8px; }
.catalog-pipeline { margin-bottom: 10px; padding: 13px 16px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 13px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(11,17,20,.62); }.catalog-pipeline > i { color: #35464d; font-style: normal; }.pipeline-step { display: flex; align-items: center; gap: 9px; min-width: 0; }.pipeline-step > span { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border: 1px solid #304048; border-radius: 50%; color: #6c7d83; font-size: 8px; font-weight: 850; }.pipeline-step.complete > span { border-color: rgba(49,215,255,.28); background: rgba(49,215,255,.08); color: var(--cyan); }.pipeline-step div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }.pipeline-step strong { font-size: 8.5px; }.pipeline-step small { overflow: hidden; color: var(--muted-2); font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.repository-grid { display: grid; gap: 10px; }.repository-card { min-height: 112px; padding: 15px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; border: 1px solid var(--border-soft); border-radius: 12px; background: linear-gradient(145deg,#121b20,#0f161a); transition: .18s ease; }.repository-card:hover { border-color: #33434a; }.repository-card.hidden { opacity: .72; }.repository-body { min-width: 0; }.repository-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.repository-top h3 { margin: 0 0 3px; font-size: 12px; }.repository-top a { color: #64777d; font-size: 8px; }.repository-top a:hover { color: var(--cyan); }.repository-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }.repo-badge { min-height: 19px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 10px; background: rgba(243,187,102,.08); color: var(--amber); font-size: 6.5px; font-weight: 850; letter-spacing: .35px; text-transform: uppercase; }.repo-badge.approved, .repo-badge.published { background: rgba(49,215,255,.08); color: var(--cyan); }.repo-badge.unsuitable { background: rgba(125,142,149,.1); color: #7d8d92; }.repo-badge.workflow { background: rgba(101,169,255,.09); color: var(--blue); }.repo-badge.missing { background: rgba(255,149,108,.08); color: var(--orange); }.repository-body > p { margin: 9px 0 8px; color: var(--muted); font-size: 8.5px; line-height: 1.5; }.repository-state { display: flex; align-items: center; gap: 9px; color: #65767c; font-size: 7.5px; }.repository-state code { padding-left: 9px; border-left: 1px solid var(--border); color: #60757a; font-size: 7px; }.repository-actions { min-width: 175px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }.repository-actions .button { min-height: 31px; padding-inline: 10px; font-size: 8px; }.text-button { min-height: 30px; padding: 0 7px; border: 0; background: transparent; color: #617278; cursor: pointer; font-size: 8px; }.text-button:hover:not(:disabled) { color: var(--red); }.text-button:disabled { opacity: .45; cursor: not-allowed; }
.repo-badge.flow { background: rgba(170,140,255,.08); color: var(--purple); }.application-deployment-policy { margin-top: 13px; padding: 12px; display: grid; grid-template-columns: minmax(150px,.7fr) minmax(160px,.75fr) minmax(270px,1.2fr); align-items: center; gap: 12px; border: 1px solid #223139; border-radius: 9px; background: rgba(8,14,17,.5); }.policy-heading { display: flex; align-items: center; gap: 8px; }.policy-heading > span { width: 28px; height: 28px; display: grid; flex: 0 0 28px; place-items: center; border-radius: 7px; background: rgba(49,215,255,.07); color: var(--cyan); }.policy-heading > div { display: flex; flex-direction: column; gap: 3px; }.policy-heading strong { font-size: 8.5px; }.policy-heading small { color: var(--muted-2); font-size: 7px; }.application-deployment-policy label { display: flex; flex-direction: column; gap: 5px; }.application-deployment-policy label > span { color: #566970; font-size: 6.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }.application-deployment-policy select { height: 29px; padding: 0 8px; border: 1px solid #2b3a41; border-radius: 6px; background: #10191d; color: #a8b8ba; font-size: 8px; }.compact-flow { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }.compact-flow > span { min-width: 85px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; border: 1px solid rgba(49,215,255,.14); border-radius: 6px; background: rgba(49,215,255,.04); }.compact-flow small { color: var(--cyan); font-size: 5.5px; font-weight: 850; letter-spacing: .5px; }.compact-flow strong { font-size: 7.5px; }.compact-flow i { color: #43555c; font-style: normal; }.compact-flow b { padding: 3px 5px; border-radius: 4px; background: rgba(243,187,102,.08); color: var(--amber); font-size: 5.5px; letter-spacing: .4px; }.application-deployment-policy > p { grid-column: 1 / -1; margin: -3px 0 0; padding-top: 8px; border-top: 1px solid #1d2a30; color: #61747a; font-size: 7px; }
.deployment-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:12px; }.deployment-panel,.github-panel { padding:19px; }.deployment-panel .panel-heading { padding:0 0 13px; }.config-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--border-soft); border-left:1px solid var(--border-soft); }.config-grid > div { min-height:55px; padding:11px 13px; display:flex; flex-direction:column; gap:5px; border-right:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }.config-grid span { color:#53646a; font-size:7px; text-transform:uppercase; letter-spacing:.6px; }.config-grid strong { font-size:9px; }.deployment-note { margin-top:13px; padding:10px; display:flex; gap:8px; border-radius:7px; background:rgba(101,169,255,.05); color:var(--blue); }.deployment-note p { margin:0; color:#718990; font-size:8px; line-height:1.5; }
.deployment-page-panel { padding: 24px; }.deployment-page-panel .config-grid > div { min-height: 72px; padding: 16px; }.deployment-page-panel .config-grid strong { font-size: 11px; }.deployment-options { padding-top: 24px; }
.environment-summary { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--border-soft); border-radius: 12px; background: linear-gradient(145deg,#121b20,#0f161a); overflow: hidden; }.environment-summary > div { min-height: 74px; padding: 15px 18px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }.environment-summary > div + div { border-left: 1px solid var(--border-soft); }.environment-summary span { color: var(--muted-2); font-size: 7px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }.environment-summary strong { font-size: 11px; }.environment-section { padding-top: 28px; }.environment-target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.environment-target-card { position: relative; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 13px; background: linear-gradient(145deg,#121b20,#0f161a); }.environment-target-card::before { content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--cyan); }.environment-target-card.production::before { background:var(--purple); }.target-card-heading { min-height: 77px; padding: 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--border-soft); }.target-role-icon { width: 41px; height: 41px; display: grid; flex: 0 0 41px; place-items: center; border: 1px solid rgba(49,215,255,.18); border-radius: 10px; background: rgba(49,215,255,.06); color: var(--cyan); font-size: 8px; font-weight: 900; letter-spacing: .5px; }.production .target-role-icon { border-color: rgba(170,140,255,.2); background: rgba(170,140,255,.06); color: var(--purple); }.target-card-heading > div { min-width: 0; flex: 1; }.target-card-heading p { margin: 0 0 5px; color: var(--muted-2); font-size: 6.5px; font-weight: 850; letter-spacing: .75px; }.target-card-heading h3 { margin: 0; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }.target-details { display: grid; grid-template-columns: repeat(2,1fr); }.target-details > div { min-height: 59px; padding: 12px 15px; display: flex; flex-direction: column; gap: 5px; border-bottom: 1px solid var(--border-soft); }.target-details > div:nth-child(odd) { border-right: 1px solid var(--border-soft); }.target-details span,.target-domain-example > span { color: #506168; font-size: 6.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }.target-details strong,.target-details code { font-size: 9px; }.target-details code { color: #90a5aa; }.target-domain-example { min-height: 63px; padding: 12px 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px; }.target-domain-example > span { grid-row: 1 / 3; }.target-domain-example strong { color: var(--cyan); font-size: 9px; }.production .target-domain-example strong { color: var(--purple); }.target-domain-example small { color: var(--muted-2); font-size: 7px; }
.deployment-flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.deployment-flow-card { padding: 18px; border: 1px solid var(--border-soft); border-radius: 13px; background: linear-gradient(145deg,#121b20,#0f161a); }.deployment-flow-card.featured { border-color: rgba(49,215,255,.18); }.flow-card-title { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; }.flow-card-title > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: rgba(49,215,255,.07); color: var(--cyan); font-size: 10px; font-weight: 850; }.flow-card-title h3 { margin: 0 0 4px; font-size: 12px; }.flow-card-title p { margin: 0; color: var(--muted-2); font-size: 7.5px; }.flow-card-title em { padding: 4px 7px; border-radius: 9px; background: rgba(125,142,149,.09); color: #84959a; font-size: 6px; font-style: normal; font-weight: 850; letter-spacing: .5px; }.featured .flow-card-title em { background: rgba(49,215,255,.07); color: var(--cyan); }.flow-track { min-height: 66px; margin: 16px 0 13px; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #202e34; border-radius: 9px; background: #0c1316; }.flow-track > div { min-width: 120px; display: flex; flex-direction: column; gap: 4px; text-align: center; }.flow-track span { color: var(--cyan); font-size: 6px; font-weight: 900; letter-spacing: .6px; }.flow-track strong { font-size: 8.5px; }.flow-track i { color: #405159; font-style: normal; }.flow-track b { padding: 4px 6px; border-radius: 4px; background: rgba(243,187,102,.08); color: var(--amber); font-size: 6px; letter-spacing: .5px; }.flow-track .production span { color: var(--purple); }.deployment-flow-card ul { margin: 0; padding-left: 17px; color: #71848a; font-size: 7.5px; line-height: 1.9; }.deployment-flow-card li::marker { color: var(--cyan); }.deployment-profile-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; }.hostname-policy-panel { overflow: hidden; }.hostname-policy-list > div { min-height: 51px; padding: 10px 16px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; border-top: 1px solid var(--border-soft); }.hostname-policy-list span { color: #63757b; font-size: 8px; }.hostname-policy-list code,.hostname-policy-list strong { color: #a9b9bb; font-size: 8px; }.hostname-policy-list em { padding: 3px 6px; border-radius: 7px; background: rgba(243,187,102,.08); color: var(--amber); font-size: 5.5px; font-style: normal; font-weight: 850; letter-spacing: .4px; }.policy-note { margin: 0; padding: 13px 16px; border-top: 1px solid var(--border-soft); color: #5c6f75; font-size: 7.5px; line-height: 1.5; }
.github-panel { position:relative; display:grid; grid-template-columns:47px 1fr; gap:13px; overflow:hidden; }.github-panel::after { content:""; position:absolute; width:180px;height:180px;right:-80px;top:-80px;border-radius:50%;background:var(--purple);opacity:.035; }.github-logo { width:45px;height:45px;display:grid;place-items:center;border:1px solid #303746;border-radius:12px;background:#181923;color:#c2b3ff;font-size:22px; }.github-panel h2 { margin:0; font-size:15px; }.github-panel > div:nth-child(2) > p:last-child { margin:7px 0 0; color:var(--muted); font-size:8.5px; line-height:1.55; }.permission-list { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:12px 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }.permission-list span { color:#86999d;font-size:8px; }.permission-list span::first-letter { color:var(--cyan); }.github-action { grid-column:1/-1; display:flex;align-items:center;justify-content:space-between; }.github-action .button { min-height:31px;font-size:8px; }
.github-page-panel { padding: 27px; grid-template-columns: 55px minmax(0, 1fr) auto; gap: 18px; }.github-page-panel .github-logo { width: 53px; height: 53px; }.github-connection-summary { min-width: 170px; display: grid; grid-template-columns: 1fr; justify-items: end; align-content: center; gap: 4px; }.github-connection-summary strong { margin-top: 7px; font-size: 10px; }.github-connection-summary small { color: var(--muted-2); font-size: 7px; }.github-page-panel .permission-list { grid-column: 1 / -1; padding: 20px 0; gap: 13px; }.github-page-panel .permission-list span { font-size: 9px; }.integration-explainer { grid-column: 1 / -1; padding: 7px 0 13px; }.integration-explainer h3 { margin: 0 0 10px; font-size: 11px; }.integration-explainer ol { margin: 0; padding-left: 18px; color: var(--muted); font-size: 9px; line-height: 2; }.github-page-panel .github-action { padding-top: 16px; border-top: 1px solid var(--border-soft); }.github-page-panel .github-action > span { color: var(--muted-2); font-size: 8px; }

.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.overview-status-panel { overflow: hidden; }.panel-link { color: var(--cyan); font-size: 8px; font-weight: 750; }.readiness-list > div, .activity-list > div { min-height: 59px; padding: 10px 17px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border-soft); }.readiness-icon { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border-radius: 7px; font-size: 11px; }.readiness-icon.ready { background: rgba(49,215,255,.07); color: var(--cyan); }.readiness-icon.pending { background: rgba(243,187,102,.07); color: var(--amber); }.readiness-list div > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }.readiness-list strong { font-size: 9px; }.readiness-list small { color: var(--muted-2); font-size: 7px; }.readiness-list em { font-style: normal; }.activity-list > div { align-items: flex-start; padding-block: 12px; }.activity-list > div > div { min-width: 0; flex: 1; }.activity-list strong { font-size: 8.5px; }.activity-list p { margin: 4px 0 0; overflow: hidden; color: var(--muted-2); font-size: 7.5px; white-space: nowrap; text-overflow: ellipsis; }.activity-list time { color: #46575e; font-size: 7px; }.severity-dot { width: 6px; height: 6px; margin-top: 4px; flex: 0 0 6px; border-radius: 50%; background: var(--cyan); }.severity-dot.warning { background: var(--amber); }.severity-dot.alert { background: var(--orange); }.severity-dot.fault { background: var(--red); }.quick-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.quick-link-card { min-height: 76px; padding: 14px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--border-soft); border-radius: 11px; background: linear-gradient(145deg,#121b20,#0f161a); transition: .18s ease; }.quick-link-card:hover:not(.static) { transform: translateY(-2px); border-color: #35474e; }.quick-link-card > span { width: 32px; height: 32px; display: grid; flex: 0 0 32px; place-items: center; border-radius: 8px; background: rgba(49,215,255,.06); color: var(--cyan); }.quick-link-card > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }.quick-link-card strong { font-size: 9.5px; }.quick-link-card small { color: var(--muted-2); font-size: 7.5px; }.quick-link-card > i { color: var(--cyan); font-style: normal; }.quick-link-card > em { font-style: normal; }
.dashboard-footer { margin-top:30px; padding-top:17px; display:flex; justify-content:space-between; border-top:1px solid var(--border-soft); color:#425158; font-size:7.5px; }.dashboard-footer i { display:inline-block;width:4px;height:4px;margin:0 8px;border-radius:50%;background:var(--cyan);vertical-align:1px; }
.loading-state { min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:var(--muted); }.brand-mark.large { transform:scale(1.35) skewY(-9deg); }.loading-state p { font-size:11px;letter-spacing:.5px; }

#blazor-error-ui { color-scheme:dark; background:#3e2025; bottom:0; box-shadow:0 -1px 4px rgba(0,0,0,.3); display:none; left:0; padding:.7rem 1.25rem; position:fixed; width:100%; z-index:1000; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:.75rem; top:.5rem; }
.blazor-error-boundary { background:#3e2025; padding:1rem; color:white; }
.valid.modified:not([type=checkbox]) { outline:1px solid var(--cyan); }.invalid { outline:1px solid var(--red); }.validation-message { color:var(--red); }

@media (max-width: 1250px) {
    .application-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .repository-card { grid-template-columns: 42px minmax(0, 1fr); }.repository-actions { grid-column: 2; justify-content: flex-start; }
    .application-page-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .application-deployment-policy { grid-template-columns:1fr 1fr; }.compact-flow { grid-column:1/-1; justify-content:flex-start; }
}
@media (max-width: 980px) {
    .app-shell { grid-template-columns:68px minmax(0,1fr); }
    .sidebar { padding-inline:9px; }.brand { padding-inline:8px;justify-content:center; }.brand > span:last-child,.primary-nav a span,.primary-nav a b,.primary-nav a em,.nav-section-label,.server-card div,.server-menu,.user-card div { display:none; }.primary-nav a { grid-template-columns:1fr;padding:0;place-items:center; }.primary-nav i { font-size:18px; }.server-card,.user-card { justify-content:center;padding-inline:0; }.two-column,.deployment-grid,.overview-grid,.deployment-profile-grid { grid-template-columns:1fr; }.environment-summary { grid-template-columns:repeat(2,1fr); }.environment-summary > div:nth-child(3) { border-left:0; border-top:1px solid var(--border-soft); }.environment-summary > div:nth-child(4) { border-top:1px solid var(--border-soft); }
}
@media (max-width: 720px) {
    .topbar { padding:0 16px; }.page-content { padding:24px 15px 40px; }.clock-block { display:none; }.page-heading { align-items:flex-start;flex-direction:column; }.heading-actions { width:100%; }.heading-actions .button { flex:1; }.summary-grid,.application-grid,.quick-links-grid,.environment-target-grid,.deployment-flow-grid { grid-template-columns:1fr; }.page-stat-strip { grid-template-columns:repeat(2,1fr); }.page-stat-strip > div:nth-child(3) { border-left:0; border-top:1px solid var(--border-soft); }.page-stat-strip > div:nth-child(4) { border-top:1px solid var(--border-soft); }.empty-state { align-items:flex-start; flex-wrap:wrap; }.applications-empty .button { margin-left:57px; }.log-summary-row { grid-template-columns:repeat(2,1fr); }.log-toolbar { align-items:stretch;flex-wrap:wrap; }.log-toolbar select { width:100%; }.page-log-toolbar .search-field,.search-field { width:100%;margin-left:0; }.page-log-toolbar .button { width:100%; margin-left:0; }.log-row,.page-log-list .log-row { grid-template-columns:58px 80px 50px minmax(0,1fr); }.catalog-heading { align-items:flex-start; flex-direction:column; }.catalog-toolbar { width:100%; justify-content:space-between; }.catalog-pipeline { grid-template-columns:1fr 1fr; gap:10px; }.catalog-pipeline > i { display:none; }.repository-card { grid-template-columns:38px minmax(0,1fr); align-items:start; }.repository-top { flex-direction:column; }.repository-badges { justify-content:flex-start; }.repository-actions { grid-column:1/-1; flex-wrap:wrap; }.application-deployment-policy { grid-template-columns:1fr; }.compact-flow { grid-column:auto; flex-wrap:wrap; justify-content:flex-start; }.traffic-chart { height:140px; }.ip-table { min-width:650px; }.ip-table-wrap { overflow-x:auto; }.config-grid { grid-template-columns:1fr; }.permission-list { grid-template-columns:1fr; }.github-page-panel { grid-template-columns:53px minmax(0,1fr); }.github-connection-summary { grid-column:1/-1; justify-items:start; }.dashboard-footer { gap:8px; flex-direction:column; }
}