:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #091016;
  color: #ecf4f6;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: radial-gradient(circle at 20% -10%, #173d4d 0, transparent 35rem), #091016; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; padding: 26px 0 72px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 40px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 11px; color: #071116; font-size: 1.2rem; font-weight: 900; background: linear-gradient(135deg, #66dcc2, #73a8ff); }
.brand strong, .brand small { display: block; }.brand strong { font-size: 1.02rem; letter-spacing: .01em; }.brand small { margin-top: 1px; color: #8ba1a7; font-size: .72rem; }
.hidden { display: none !important; }
.login-view { display: grid; min-height: calc(100vh - 140px); place-items: center; }
.login-card { width: min(620px, 100%); padding: 50px; border: 1px solid rgba(159, 209, 220, .16); border-radius: 24px; background: linear-gradient(135deg, rgba(31, 65, 75, .84), rgba(14, 23, 30, .97)); box-shadow: 0 28px 90px rgba(0, 0, 0, .34); }
.registration-card { width: min(510px, 100%); }.registration-card > .button { margin-top: 8px; }.registration-success p:not(.eyebrow) { color: #a5bbc0; line-height: 1.6; }.registration-success .button { margin-top: 12px; }
.eyebrow { margin: 0 0 10px; color: #67d4ba; font-size: .7rem; font-weight: 800; letter-spacing: .16em; }.login-card h1, .hero h1 { max-width: 680px; margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.055em; line-height: 1.05; }.login-card > p:not(.eyebrow), .hero > div > p:last-child, .section-heading p { max-width: 660px; color: #a5bbc0; line-height: 1.65; }
.button { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; font-weight: 700; text-decoration: none; transition: .17s ease; }.button.primary { color: #081114; background: linear-gradient(135deg, #62d8ba, #79acff); }.button.primary:hover { transform: translateY(-1px); filter: brightness(1.07); }.button.secondary { border-color: rgba(174, 213, 218, .18); color: #d2e1e4; background: rgba(255,255,255,.04); }.button.secondary:hover { border-color: rgba(134, 211, 196, .55); background: rgba(83, 164, 150, .12); }.button.danger { border-color: rgba(255, 139, 129, .35); color: #ffb7b0; background: rgba(150, 48, 45, .11); }.button.small { min-height: 33px; padding: 0 11px; font-size: .8rem; }.button:disabled { cursor: wait; opacity: .55; transform: none; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 32px 0 36px; }.hero .button { flex: none; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; margin-bottom: 46px; border: 1px solid rgba(155, 207, 218, .13); border-radius: 15px; background: rgba(155, 207, 218, .13); }.summary-grid article { min-width: 0; padding: 20px 24px; background: rgba(12, 22, 29, .78); }.summary-grid span { display: block; overflow: hidden; color: #e5f5f2; font-size: 1.2rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.summary-grid small { display: block; margin-top: 5px; color: #8fa8ae; font-size: .77rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }.section-heading h2, .section-heading h3 { margin: 0; font-size: 1.25rem; }.section-heading h3 { font-size: 1rem; }.section-heading p { margin: 7px 0 0; font-size: .87rem; }
.applications { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }.application-card, .empty-state { padding: 21px; border: 1px solid rgba(168, 215, 222, .14); border-radius: 14px; background: rgba(17, 29, 37, .84); }.application-head { display: flex; align-items: flex-start; gap: 11px; }.application-icon { display: grid; width: 35px; height: 35px; flex: none; place-items: center; border-radius: 10px; color: #071114; font-size: .9rem; font-weight: 900; background: linear-gradient(145deg, #67d5bc, #6689dc); }.application-head h3 { margin: 1px 0 4px; font-size: 1rem; }.application-description { min-height: 1.25em; margin: 0; color: #93a8ad; font-size: .78rem; }.chip { margin-left: auto; padding: 4px 7px; border: 1px solid rgba(104, 216, 188, .24); border-radius: 999px; color: #87e2ca; font-size: .63rem; font-weight: 700; white-space: nowrap; }.application-details { display: grid; gap: 10px; margin: 19px 0; }.application-details div { min-width: 0; }.application-details small { display: block; margin-bottom: 4px; color: #779198; font-size: .6rem; font-weight: 800; letter-spacing: .08em; }.application-details code { display: block; overflow: hidden; color: #cae5e4; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }.application-actions { display: flex; gap: 8px; }.application-actions .button { min-height: 34px; font-size: .73rem; }.empty-state { grid-column: 1 / -1; display: grid; gap: 5px; min-height: 140px; place-content: center; text-align: center; }.empty-state strong { color: #d9efef; }.empty-state span { color: #8ba4a9; font-size: .85rem; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin: -22px 0 46px; }.admin-card { padding: 21px; border: 1px solid rgba(168, 215, 222, .14); border-radius: 14px; background: rgba(17, 29, 37, .84); }.section-heading.compact { margin-bottom: 8px; }.section-heading.compact p { font-size: .78rem; }.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }.info-message { min-height: 1.1em; margin: 13px 0 0; color: #8ce0ca; font-size: .8rem; }.request-list { display: grid; gap: 8px; }.request-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid rgba(168, 215, 222, .1); border-radius: 9px; background: rgba(255,255,255,.02); }.request-row strong, .request-row small { display: block; }.request-row strong { font-size: .83rem; }.request-row small, .muted-text { color: #91a7ac; font-size: .72rem; }.request-row > div:last-child { display: flex; gap: 6px; }.invitation-result { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 11px; border: 1px solid rgba(100, 214, 187, .3); border-radius: 9px; background: rgba(95, 202, 177, .08); }.invitation-result code { flex: 1; overflow: hidden; color: #d2f0e7; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }.template-list { display: grid; gap: 8px; margin: 0 0 18px; }.template-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; border: 1px solid rgba(168, 215, 222, .12); border-radius: 9px; }.template-item strong, .template-item small { display: block; }.template-item strong { font-size: .84rem; }.template-item small { margin-top: 3px; color: #8ce0ca; font-size: .68rem; }.checkbox-label { display: flex; align-items: center; grid-template-columns: auto 1fr; gap: 9px; }.checkbox-label input { width: auto; }
.providers-section { margin: 0 0 46px; }.providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }.provider-card { padding: 20px; border: 1px solid rgba(168, 215, 222, .14); border-radius: 14px; background: rgba(17, 29, 37, .84); }.provider-card header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.provider-card h3 { margin: 0; font-size: 1rem; }.provider-card p { margin: 5px 0 0; color: #8fa8ae; font-size: .73rem; }.provider-status { display: inline-flex; margin-top: 14px; padding: 4px 7px; border-radius: 999px; color: #e3b9a5; font-size: .67rem; font-weight: 800; background: rgba(204, 116, 76, .12); }.provider-status.ready { color: #8ce0ca; background: rgba(80, 196, 159, .12); }.provider-models { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }.provider-models code { padding: 4px 6px; border: 1px solid rgba(168, 215, 222, .12); border-radius: 5px; color: #bcd5d8; font-size: .66rem; background: rgba(255,255,255,.025); }.provider-card .inline-actions { margin-top: 13px; }
.policy-editor { margin: 18px 0; padding: 14px; border: 1px solid rgba(104, 216, 188, .22); border-radius: 10px; }.policy-editor legend { padding: 0 6px; color: #8ce0ca; font-size: .8rem; font-weight: 800; }.policy-editor > p { margin: 0 0 10px; color: #94aeb3; font-size: .75rem; line-height: 1.45; }.policy-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; }.policy-switches label { margin: 3px 0; }.route-creator { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; align-items: end; }.route-creator .button { align-self: end; margin: 15px 0; }.policy-routes { display: grid; gap: 6px; margin: 4px 0 10px; }.policy-route { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; border: 1px solid rgba(168, 215, 222, .11); border-radius: 7px; background: rgba(255,255,255,.02); }.policy-route code { color: #cbe9e5; font-size: .72rem; }.advanced-settings { margin: 15px 0; padding: 0 2px; color: #93aaaf; font-size: .78rem; }.advanced-settings summary { cursor: pointer; }.template-users-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(168, 215, 222, .12); }.template-users { display: grid; gap: 8px; }.template-user { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 240px); align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(168, 215, 222, .1); border-radius: 8px; }.template-user strong, .template-user small { display: block; }.template-user strong { font-size: .8rem; }.template-user small { margin-top: 3px; color: #8fa8ae; font-size: .68rem; }
.account-name { margin-right: 9px; color: #b4c6ca; font-size: .8rem; }
dialog { width: min(650px, calc(100% - 28px)); max-height: min(860px, calc(100vh - 28px)); overflow: auto; padding: 0; border: 1px solid rgba(144, 208, 214, .25); border-radius: 16px; color: #eaf6f7; background: #102027; box-shadow: 0 30px 110px rgba(0, 0, 0, .65); }dialog::backdrop { background: rgba(0, 0, 0, .68); backdrop-filter: blur(3px); }dialog > form, dialog > div { padding: 25px; }.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 21px; }.dialog-heading h2 { margin: 0; font-size: 1.25rem; }.icon-button { width: 31px; height: 31px; border: 0; border-radius: 8px; color: #bad0d3; font-size: 1.45rem; line-height: 1; background: transparent; }.icon-button:hover { background: rgba(255,255,255,.07); }label { display: grid; gap: 7px; margin: 15px 0; color: #c8dbdd; font-size: .8rem; font-weight: 700; }input, textarea, select { width: 100%; padding: 10px 11px; border: 1px solid rgba(168, 214, 219, .2); border-radius: 8px; outline: none; color: #eaf3f4; background: #0b171d; }textarea { resize: vertical; }input:focus, textarea:focus, select:focus { border-color: #69d6bd; box-shadow: 0 0 0 3px rgba(103, 214, 190, .11); }label small, .muted { color: #839ca2; font-size: .7rem; font-weight: 500; }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 23px; }.error-message { min-height: 1.1em; margin: 14px 0 0; color: #ffaaa2; font-size: .82rem; }.dialog-copy { margin: -4px 0 20px; color: #9db5b9; line-height: 1.5; }.integration-values { display: grid; gap: 10px; margin: 0; }.integration-values > div { padding: 11px; border: 1px solid rgba(162, 210, 214, .12); border-radius: 9px; background: rgba(255,255,255,.025); }.integration-values dt { margin-bottom: 6px; color: #91aaae; font-size: .65rem; font-weight: 800; letter-spacing: .06em; }.integration-values dd { display: flex; align-items: center; gap: 8px; margin: 0; }.integration-values code { flex: 1; overflow: hidden; color: #d2f0e7; font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }.copy-value { flex: none; padding: 4px 7px; border: 1px solid rgba(119, 212, 190, .3); border-radius: 6px; color: #92e4cf; font-size: .67rem; background: transparent; }
@media (max-width: 720px) { .shell { width: min(100% - 28px, 1180px); }.topbar { padding-bottom: 22px; }.hero { align-items: start; flex-direction: column; padding-top: 18px; }.summary-grid, .applications, .admin-grid, .providers, .policy-switches, .route-creator { grid-template-columns: 1fr; }.admin-grid { margin-top: -20px; }.summary-grid article { padding: 16px 18px; }.login-card { padding: 31px 24px; }.application-card { padding: 17px; }.account-name { display: none; }.template-user { grid-template-columns: 1fr; } }