:root {
  color-scheme: dark;
  --bg: #0a0a0c;
  --panel: #111113;
  --border: #26262b;
  --muted: #93939d;
  --text: #ededf0;
  --accent: #6666f4;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    14px/1.55 Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  outline-offset: 4px;
}
button {
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #1b1b20;
  color: var(--text);
  padding: 11px 17px;
  font-weight: 600;
}
button:hover {
  background: #272730;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.primary:hover {
  background: #7979ff;
}
.danger {
  color: #ff9898;
}
a {
  color: #aaaaff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font:
    700 25px/1.3 Georgia,
    serif;
}
h2 {
  font-size: 18px;
  letter-spacing: -0.4px;
}
h3 {
  font-size: 15px;
}
p {
  color: var(--muted);
  margin-top: 5px;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 260px;
  background: #0e0e11;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.brand {
  height: 80px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  font-size: 17px;
  font-weight: 750;
  border-bottom: 1px solid var(--border);
}
.mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: #6464ed;
  color: white;
  border-radius: 8px;
  transform: rotate(-8deg);
  font-size: 20px;
}
.server {
  margin: 22px 18px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 650;
}
.server img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
nav {
  padding: 0 18px;
  display: grid;
  gap: 7px;
}
nav button {
  border: 0;
  text-align: left;
  background: none;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  gap: 14px;
  align-items: center;
}
nav button span {
  font-size: 18px;
  width: 20px;
  text-align: center;
}
nav button.active {
  background: #202024;
  color: white;
  box-shadow: inset 3px 0 #cda85f;
}
.user {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user small {
  display: block;
  color: var(--muted);
}
.user button {
  padding: 7px 10px;
  font-size: 12px;
}
.main {
  margin-left: 260px;
}
.topbar {
  height: 80px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 38px;
}
.topbar .status {
  margin-left: auto;
  color: #91d9b4;
  font-size: 12px;
}
.mobile {
  display: none;
}
.content {
  max-width: 1270px;
  padding: 38px 46px 105px;
}
.card {
  background: linear-gradient(135deg, #151518, #101013);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: 0 1px 0 #ffffff09 inset;
}
.card > p {
  margin-bottom: 22px;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}
.field:last-child {
  margin-bottom: 0;
}
label {
  font-weight: 600;
}
.hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
input,
textarea,
select {
  width: 100%;
  background: #17171b;
  border: 1px solid #303036;
  border-radius: 9px;
  color: var(--text);
  padding: 11px 12px;
}
textarea {
  min-height: 100px;
  resize: vertical;
}
input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}
input[type="color"] {
  height: 44px;
  padding: 5px;
}
.toggle {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.toggle:last-child {
  border: 0;
}
.toggle input {
  flex-shrink: 0;
}
.savebar {
  position: fixed;
  bottom: 0;
  left: 260px;
  right: 0;
  background: #0c0c0eef;
  border-top: 1px solid var(--border);
  padding: 16px 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(16px);
}
.savebar small {
  color: var(--muted);
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.between {
  justify-content: space-between;
}
.preview {
  background: #2b2d31;
  border-radius: 12px;
  padding: 24px;
}
.embed {
  background: #232428;
  border-left: 4px solid var(--accent);
  padding: 20px;
  border-radius: 4px;
  margin-top: 16px;
  white-space: pre-wrap;
}
.preview .row {
  margin-top: 18px;
  flex-wrap: wrap;
}
.preview button {
  background: #41434a;
}
.eyebrow {
  letter-spacing: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #b2a4fc;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.statgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.stat {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.stat strong {
  display: block;
  font-size: 29px;
  margin-top: 8px;
  letter-spacing: -1px;
}
.stat span {
  color: var(--muted);
  font-size: 12px;
}
.tablewrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
td,
th {
  padding: 15px 12px;
  border-bottom: 1px solid var(--border);
}
td button {
  padding: 7px 10px;
  font-size: 12px;
}
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  background: #313137;
  color: #bbb;
}
.badge.open {
  background: #183429;
  color: #91d9b4;
}
.empty {
  text-align: center;
  padding: 65px 20px;
  color: var(--muted);
}
.empty .symbol {
  font-size: 30px;
  color: #666;
  margin-bottom: 15px;
}
.empty h2 {
  color: var(--text);
}
.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}
.toolbar input {
  flex: 1;
}
.toolbar select {
  width: 160px;
}
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 20%, #24213a 0, transparent 55%);
}
.loginbox {
  max-width: 490px;
  padding: 45px;
  width: 100%;
  text-align: center;
}
.loginbox .mark {
  margin: 0 auto 25px;
  width: 48px;
  height: 48px;
  font-size: 30px;
}
.loginbox h1 {
  font-size: 40px;
}
.loginbox p {
  margin: 20px 0 28px;
  line-height: 1.8;
}
.loginbox code {
  background: #292733;
  color: #d8d4ff;
  border: 1px solid #413c58;
  border-radius: 6px;
  padding: 3px 7px;
}
.loginbox .primary {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 9px;
  color: white;
}
.loginbox small {
  display: block;
  color: var(--muted);
  margin-top: 30px;
}
.loading {
  padding: 80px;
  text-align: center;
  color: var(--muted);
}
#toast {
  position: fixed;
  right: 24px;
  top: 22px;
  max-width: 420px;
  background: #292935;
  border: 1px solid #52526e;
  border-radius: 10px;
  padding: 14px 20px;
  z-index: 100;
  box-shadow: 0 8px 40px #0008;
  display: none;
}
.message {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.message .body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 8px;
}
.message small {
  color: var(--muted);
}
.ticketdetails {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.typehead {
  margin-bottom: 20px;
}
.roles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.role {
  padding: 12px;
  background: #19191d;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  gap: 12px;
}
.foot {
  color: #60606b;
  font-size: 12px;
  margin-top: 30px;
}
.bar {
  height: 8px;
  background: #27272e;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.bar i {
  display: block;
  height: 100%;
  background: #7771ec;
}
.muted {
  color: var(--muted);
}
@media (max-width: 1000px) {
  .sidebar {
    width: 220px;
  }
  .main {
    margin-left: 220px;
  }
  .savebar {
    left: 220px;
  }
  .content {
    padding: 26px 24px 105px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .statgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .sidebar {
    display: none;
    width: 260px;
    z-index: 30;
  }
  .sidebar.shown {
    display: flex;
    box-shadow: 0 0 0 100vw #0009;
  }
  .main {
    margin-left: 0;
  }
  .savebar {
    left: 0;
    padding: 14px 20px;
  }
  .topbar {
    padding: 0 20px;
  }
  .content {
    padding: 22px 16px 105px;
  }
  .mobile {
    display: block;
    padding: 7px 10px;
  }
  .roles {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 20px;
  }
  .statgrid {
    gap: 10px;
  }
  .topbar .status {
    font-size: 0;
  }
  .topbar .status:first-letter {
    font-size: 12px;
  }
  .loginbox {
    padding: 28px;
  }
  .savebar small {
    max-width: 50%;
  }
}
/* Crucible workspace refinement */
:root {
  --accent: #6d65f5;
  --panel: #111115;
  --border: #25252d;
  --muted: #9797a6;
}
body {
  background: #0b0b0f;
}
.sidebar {
  background: linear-gradient(170deg, #111116, #0b0b10);
}
.content {
  max-width: 1400px;
}
.card {
  border-radius: 15px;
  background: linear-gradient(125deg, #16161c, #111115);
  box-shadow:
    0 1px 0 #ffffff06 inset,
    0 8px 35px #00000012;
}
.topbar {
  background: #0b0b10ee;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
}
.brand {
  letter-spacing: -0.6px;
}
.brand.plain {
  border: 0;
  padding: 0;
  height: auto;
}
nav button {
  padding: 12px 16px;
}
nav button.active {
  background: #25232e;
  box-shadow: inset 3px 0 #bc9c60;
}
nav button.active span {
  color: #d9bd85;
}
.server {
  background: #15151b;
}
.pageintro {
  margin-bottom: 30px;
}
.pageintro h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.8px;
}
.pageintro p {
  margin-top: 8px;
}
.notice {
  padding: 14px 18px;
  background: #191825;
  border: 1px solid #353044;
  border-radius: 9px;
  color: #b1aabd;
  font-size: 12px;
  line-height: 1.8;
  margin-top: 18px;
}
.sectionheading {
  margin: 28px 0 18px;
}
.appfields {
  margin-top: 22px;
}
.badge.pending {
  background: #393021;
  color: #e9c888;
}
.badge.reviewing {
  background: #302a50;
  color: #bcb0ff;
}
.badge.accepted {
  background: #193a2b;
  color: #90dcac;
}
.badge.declined {
  background: #3d222c;
  color: #f0a4b7;
}
.answers {
  margin-top: 20px;
  padding: 0 20px;
  background: #111118;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.answers p {
  color: #c5c5d0;
}
.ticketdetails {
  line-height: 1.8;
}
.login {
  background:
    radial-gradient(ellipse at 12% 25%, #30254a55, transparent 65%), #0c0b11;
}
.loginlayout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 100px;
  max-width: 1200px;
  padding: 60px 55px;
  align-items: center;
}
.loginhero .brand {
  margin-bottom: 100px;
}
.loginhero h1 {
  font:
    500 76px/1.05 Georgia,
    serif;
  letter-spacing: -3px;
  margin: 22px 0;
}
.loginhero h1 em {
  color: #aca2ff;
  font-weight: 400;
}
.loginhero > p {
  font-size: 17px;
  line-height: 1.9;
}
.loginhero .foot {
  margin-top: 90px;
  letter-spacing: 2px;
}
.loginfeatures {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 35px;
  font-size: 12px;
  color: #c0bbd0;
}
.loginbox {
  background: #17151e;
  border: 1px solid #302c3a;
  border-radius: 22px;
  text-align: left;
  padding: 38px;
  box-shadow: 0 30px 100px #0004;
}
.loginbox h2 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.7px;
}
.loginbox p {
  font-size: 14px;
}
.loginbox small {
  font-size: 11px;
}
.wide {
  width: 100%;
  text-align: center;
  display: block;
}
.divider {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #777382;
  font-size: 11px;
  margin: 28px 0 15px;
}
.divider:before,
.divider:after {
  content: "";
  height: 1px;
  flex: 1;
  background: #34303d;
}
.connectioncode {
  padding: 15px 12px;
  background: #0c0b11;
  border: 1px solid #413758;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.connectioncode code {
  font-size: 13px;
  background: none;
  padding: 0;
  border: 0;
}
.connectioncode button {
  padding: 5px 9px;
  font-size: 11px;
}
.portal {
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #29213755, transparent 65%);
}
.portalnav {
  padding: 26px 5%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.portalcontent {
  max-width: 1050px;
  margin: auto;
  padding: 55px 30px;
}
.portalcontent h1 {
  font-size: 38px;
  letter-spacing: -1px;
}
.applicationchoice {
  padding: 30px;
}
.applicationchoice p {
  min-height: 70px;
}
.choiceicon {
  width: 48px;
  height: 48px;
  background: #30284a;
  color: #c4b6ff;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 28px;
  margin-bottom: 22px;
}
.applicationheading {
  margin: 35px 0 28px;
}
.identity {
  display: flex;
  gap: 15px;
  align-items: center;
  border: 1px solid #28523b;
  background: #15291e;
  border-radius: 12px;
  padding: 17px 22px;
  margin-bottom: 25px;
}
.identitycheck {
  width: 30px;
  height: 30px;
  background: #315f43;
  border-radius: 50%;
  color: #b7f7ca;
  display: grid;
  place-items: center;
}
.question {
  margin-bottom: 32px;
}
.question small {
  font-size: 11px;
  color: #9c90ba;
  margin-right: 8px;
}
.question em {
  color: #bda4ff;
}
.question textarea {
  margin-top: 8px;
  line-height: 1.8;
}
.submitted {
  text-align: center;
  padding: 65px 35px;
}
.submitted .identitycheck {
  margin: 0 auto 25px;
  width: 50px;
  height: 50px;
  font-size: 24px;
}
.submitted p {
  max-width: 500px;
  margin: 20px auto 30px;
}
.error {
  color: #f0a4b7;
}
.stat {
  background: linear-gradient(135deg, #1d192b, #13121b);
  border-color: #322d40;
}
.stat strong {
  font-size: 32px;
}
.stat:first-child {
  background: linear-gradient(135deg, #29213d, #17121f);
}
.toolbar input {
  background: #15151b;
}
.card .row > button {
  white-space: nowrap;
}
.tablewrap td:first-child {
  max-width: 300px;
  overflow-wrap: anywhere;
}
.savebar .primary {
  box-shadow: 0 4px 22px #6d65f533;
}
.preview {
  background: #292732;
}
.preview .embed {
  background: #201e27;
}
.plain .mark {
  margin-right: 8px;
}
@media (max-width: 950px) {
  .loginlayout {
    gap: 35px;
    padding: 40px 25px;
  }
  .loginhero h1 {
    font-size: 58px;
  }
  .loginfeatures {
    display: grid;
    gap: 12px;
  }
  .loginhero .brand {
    margin-bottom: 60px;
  }
  .loginhero .foot {
    margin-top: 50px;
  }
}
@media (max-width: 700px) {
  .loginlayout {
    display: block;
    padding: 24px;
    max-width: 550px;
  }
  .loginhero {
    margin-bottom: 30px;
  }
  .loginhero .brand {
    margin-bottom: 35px;
  }
  .loginhero h1 {
    font-size: 44px;
    letter-spacing: -1px;
  }
  .loginhero > p,
  .loginfeatures,
  .loginhero .foot {
    display: none;
  }
  .loginbox {
    max-width: none;
    padding: 26px;
  }
  .portalnav {
    padding: 20px;
    gap: 15px;
  }
  .portalnav .brand {
    font-size: 13px;
  }
  .portalnav .row > span {
    display: none;
  }
  .portalcontent {
    padding: 35px 18px;
  }
  .portalcontent h1 {
    font-size: 29px;
  }
  .connectioncode {
    flex-wrap: wrap;
  }
  .pageintro h2 {
    font-size: 23px;
  }
  .applicationchoice p {
    min-height: 0;
    margin-bottom: 25px;
  }
}
/* Crucible v3: blue identity, focused workspace, responsive controls. */
:root {
  --bg: #080d17;
  --panel: #111a29;
  --border: #243147;
  --muted: #96a7c0;
  --text: #edf3fd;
  --accent: #428cf5;
}
body {
  background:
    radial-gradient(ellipse at 80% 0, #14264166, transparent 55%), var(--bg);
}
h1,
h2,
h3 {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
h1 {
  font-size: 23px;
  letter-spacing: -0.65px;
}
h2 {
  letter-spacing: -0.65px;
}
a {
  color: #8cbcff;
}
.primary {
  background: #397fe8;
  border-color: #5295f4;
  box-shadow: 0 2px 10px #1c68d322;
}
.primary:hover {
  background: #4d94fa;
}
button {
  background: #162237;
  border-color: #2b3b54;
  transition:
    background 0.15s,
    transform 0.15s;
}
button:hover {
  background: #223452;
}
button:disabled {
  cursor: not-allowed;
}
input,
textarea,
select {
  background: #0c1422;
  border-color: #2a3a52;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #72aafa;
  outline: 2px solid #72aafa22;
}
textarea {
  resize: vertical;
}
.sidebar {
  background: #0b1220;
  width: 264px;
}
.brand {
  height: 88px;
  letter-spacing: -0.4px;
}
.brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: none;
}
.brand.plain {
  padding: 0;
}
.server {
  background: #121e30;
  border-color: #253754;
  margin: 20px 16px;
  padding: 14px;
}
.server img {
  width: 30px;
  height: 30px;
}
nav {
  padding: 0 14px;
  gap: 4px;
}
nav button {
  padding: 12px 15px;
  border-radius: 9px;
}
nav button.active {
  background: #183257;
  color: #b7d6ff;
  box-shadow: inset 3px 0 #74b0ff;
}
nav button:hover {
  background: #14243a;
}
.main {
  margin-left: 264px;
}
.content {
  max-width: 1480px;
  margin: 0 auto;
  padding: 32px 38px 105px;
}
.topbar {
  background: #0b1220b3;
  height: 88px;
  padding: 0 38px;
  position: sticky;
  top: 0;
  backdrop-filter: blur(16px);
  z-index: 5;
}
.toplink {
  margin-left: auto;
  font-size: 12px;
}
.topbar .status {
  margin-left: 0;
  padding: 6px 10px;
  border: 1px solid #2c493f;
  border-radius: 20px;
  background: #17352b55;
  white-space: nowrap;
}
.card {
  background: linear-gradient(130deg, #121e30, #0e1725);
  border-color: #23334b;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 8px 30px #0000000d;
}
.pageintro h2 {
  font-size: 29px;
}
.pageintro {
  margin-bottom: 26px;
}
.eyebrow {
  color: #82b8ff;
  font-size: 10px;
  letter-spacing: 2px;
}
.notice {
  background: #132740;
  border: 1px solid #29466a;
  color: #bfd3ee;
}
.stat {
  background: #111c2e;
  border-color: #273750;
  border-radius: 14px;
  padding: 20px;
}
.stat strong {
  font-size: 31px;
  font-weight: 650;
  color: #e6efff;
}
.stat span {
  color: #9aacc5;
  font-size: 12px;
}
.statgrid {
  gap: 16px;
}
.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.profile > span {
  min-width: 0;
}
.profile b {
  display: block;
  font-size: 12px;
  max-width: 122px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.role-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 650;
  color: #91c1ff !important;
  letter-spacing: 0.4px;
}
.user {
  padding: 16px 14px;
  gap: 8px;
}
.user button {
  padding: 7px;
  font-size: 10px;
}
.portal-profile .profile b {
  max-width: 180px;
}
.identity .role-badge {
  margin-left: 10px;
}
.overview-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 34px 38px;
  margin-bottom: 26px;
  border: 1px solid #2c4667;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at right, #20497977, transparent 70%),
    linear-gradient(120deg, #142b48, #101c2e);
  overflow: hidden;
}
.overview-hero h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  margin: 9px 0;
  font-weight: 650;
  line-height: 1.2;
}
.overview-hero p {
  font-size: 14px;
  color: #b1c5df;
}
.hero-logo {
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 8px 30px #4486e330);
}
.count {
  background: #ffffff24;
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 6px;
}
.overview-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}
.overview-grid .card {
  min-width: 0;
}
.chart {
  height: 175px;
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-top: 24px;
}
.chart-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.chart-day b {
  font-size: 13px;
}
.chart-day small {
  color: var(--muted);
}
.chart-day meter {
  width: 100%;
  height: 85px;
  appearance: none;
  background: #15243b;
  border-radius: 6px;
  overflow: hidden;
}
.chart-day meter::-webkit-meter-bar {
  background: #15243b;
  border: 0;
  height: 85px;
}
.chart-day meter::-webkit-meter-optimum-value {
  background: linear-gradient(90deg, #255db1, #72b4ff);
}
.attention > button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: left;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  font-size: 12px;
}
.availability {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: capitalize;
  font-size: 12px;
  padding: 6px 0;
}
.availability b {
  margin-left: auto;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #77d7ae;
}
.dot.off {
  background: #b28383;
}
.activity {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #23334b;
}
.activity:last-child {
  border: 0;
}
.activity b {
  font-size: 12px;
  text-transform: capitalize;
}
.activity p {
  font-size: 11px;
}
.activity small {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
  text-align: right;
}
.activity-icon {
  background: #1c3454;
  color: #93c3ff;
  width: 28px;
  height: 28px;
  text-align: center;
  border-radius: 7px;
  line-height: 28px;
}
.health-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.health-line b {
  color: #8bd6b3;
}
#applicationSettings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 8px;
}
#applicationSettings .card {
  min-width: 0;
}
#applicationSettings h2 {
  font-size: 18px;
}
#applicationSettings .row.between {
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}
.form-editor {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 15px;
}
.form-editor summary {
  cursor: pointer;
  color: #adcfff;
  font-weight: 600;
  font-size: 12px;
  padding: 5px 0;
}
.form-editor[open] > summary {
  margin-bottom: 20px;
}
.form-editor .grid {
  grid-template-columns: 1fr;
}
.roles {
  gap: 6px;
}
.role {
  background: #142339;
  border-color: #2a3d56;
}
.form-editor textarea {
  width: 100%;
}
.badge {
  border-radius: 6px;
}
.badge.open,
.badge.accepted {
  background: #1e443944;
  color: #89dcb7;
}
.badge.closed,
.badge.declined {
  background: #4c283744;
  color: #e8a1ab;
}
.badge.pending {
  background: #66502644;
  color: #e3c68c;
}
.badge.reviewing {
  background: #1d416844;
  color: #98c6ff;
}
.savebar {
  background: #0c1523f2;
  border-color: #293c55;
  left: 264px;
}
.preview {
  background: #142034;
}
.embed {
  border-color: #6ba6fb;
  background: #101b2d;
}
.tablewrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
}
th {
  background: #122138;
  color: #93a9c7;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 10px;
}
td {
  border-color: #203049;
  font-size: 12px;
}
tr:hover td {
  background: #18304d44;
}
td button {
  padding: 7px 12px;
}
#toast {
  background: #19304c;
  border: 1px solid #42668f;
  box-shadow: 0 8px 30px #0005;
  max-width: min(440px, calc(100vw - 30px));
  z-index: 100;
}
.login {
  background:
    radial-gradient(ellipse at 10% 20%, #1a3b6577, transparent 60%), #080f1b;
}
.loginhero {
  background: linear-gradient(145deg, #122845, #0c1729);
}
.loginhero h1 {
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 650;
  letter-spacing: -3px;
}
.loginhero h1 em {
  font-style: normal;
  color: #88bbff;
}
.loginbox {
  background: #101d30;
  border-color: #29405d;
}
.loginfeatures span {
  border-color: #2e4768;
  background: #16304c;
}
.connectioncode {
  background: #0a1423;
  border-color: #294264;
}
.portal {
  background:
    radial-gradient(ellipse at 50% 0, #18386255, transparent 55%), #090f1b;
  min-height: 100vh;
}
.portalnav {
  border-color: #263a52;
  background: #0d192bcc;
}
.portalcontent {
  max-width: 1050px;
}
.applicationchoice {
  position: relative;
  border-top: 2px solid #579cf5;
}
.choiceicon {
  background: #19395d;
  color: #9ac9ff;
}
.applicationheading h1 {
  font-family: Inter, system-ui, sans-serif;
  letter-spacing: -1px;
}
.identity {
  background: #142a40;
  border-color: #2b4867;
}
.question > span:first-child small {
  color: #83b7ff;
}
.submitted h1 {
  font-family: Inter, system-ui, sans-serif;
}
@media (min-width: 1700px) {
  .content {
    max-width: 1500px;
  }
}
@media (max-width: 1100px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .hero-logo {
    width: 85px;
    height: 85px;
  }
  .content {
    padding: 25px 25px 100px;
  }
  #applicationSettings {
    grid-template-columns: 1fr;
  }
  .toplink {
    display: none;
  }
  .topbar .status {
    margin-left: auto;
  }
}
@media (max-width: 800px) {
  .sidebar {
    width: 264px;
    z-index: 20;
    overflow: auto;
  }
  .main {
    margin-left: 0;
  }
  .savebar {
    left: 0;
  }
  .mobile {
    display: block;
  }
  .topbar {
    padding: 0 18px;
    height: 70px;
  }
  .content {
    padding: 22px 16px 105px;
  }
  .overview-hero {
    padding: 25px 22px;
  }
  .hero-logo {
    display: none;
  }
  .overview-hero .row {
    flex-wrap: wrap;
  }
  .overview-hero .primary {
    font-size: 12px;
  }
  .statgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .overview-grid {
    gap: 0;
  }
  .chart {
    gap: 8px;
  }
  .card {
    padding: 20px;
  }
  .portalnav {
    padding: 14px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .portalnav .brand {
    font-size: 14px;
  }
  .portal-profile .avatar {
    display: none;
  }
  .portal-profile .profile b {
    max-width: 95px;
  }
  .portalcontent {
    padding: 25px 16px;
  }
  .applicationheading h1 {
    font-size: 29px;
  }
  .loginhero h1 {
    letter-spacing: -2px;
  }
  .savebar small {
    max-width: 55%;
    font-size: 10px;
  }
  .savebar {
    padding: 12px 16px;
  }
  .form-editor .row {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
/* Crucible workspace, version 4 */
:root {
  --bg: #090d14;
  --panel: #111721;
  --border: #253040;
  --muted: #96a4b8;
  --text: #edf3ff;
  --accent: #438df5;
  color-scheme: dark;
}
body {
  background: var(--bg);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 14px;
  color: var(--text);
}
h1,
h2,
h3 {
  font-family: inherit;
}
h1 {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -1px;
}
h2 {
  font-size: 19px;
  font-weight: 620;
  letter-spacing: -0.5px;
}
p {
  line-height: 1.65;
}
button,
a,
input,
select,
textarea {
  transition:
    background 0.16s,
    border-color 0.16s,
    box-shadow 0.16s;
}
button {
  background: #1a2331;
  border-color: #2d3a4e;
  border-radius: 8px;
  padding: 10px 15px;
}
button:hover {
  background: #243249;
  border-color: #456087;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid #8fbaff;
}
button:disabled {
  cursor: not-allowed;
}
.primary {
  background: #387fe5;
  border-color: #5097fb;
  color: #fff;
  box-shadow: 0 2px 9px #03142d55;
}
.primary:hover {
  background: #4a91f7;
  border-color: #83b6ff;
}
.danger {
  color: #ff9b9f;
  border-color: #71404b;
}
a {
  color: #88b9ff;
}
input,
textarea,
select {
  background: #0d131d;
  border-color: #2b384c;
  border-radius: 8px;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #5c9bfa;
  box-shadow: 0 0 0 3px #428cf51c;
}
.hint {
  color: #9aa9be;
}
.eyebrow {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.7px;
  color: #77aaf1;
}
em {
  color: #f9919b;
  font-style: normal;
}
.sidebar {
  width: 246px;
  background: #0d121b;
  border-color: #222c3b;
}
.main {
  margin-left: 246px;
}
.brand {
  height: 84px;
  font-size: 16px;
  padding: 22px;
  letter-spacing: -0.4px;
  border-color: #222c3b;
}
.brand-logo {
  width: 35px;
  height: 35px;
  border-radius: 9px;
}
.server {
  margin: 22px 16px;
  padding: 13px;
  background: #151e2b;
  border-color: #2a3749;
  font-size: 12px;
}
.server img {
  width: 28px;
  height: 28px;
}
nav {
  gap: 5px;
  padding: 0 13px;
}
nav button {
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 7px;
  gap: 12px;
}
nav button.active {
  background: #192d48;
  box-shadow: inset 3px 0 #5b9dff;
  color: #bad5ff;
}
nav button:hover {
  background: #172130;
}
.user {
  padding: 16px 13px;
  border-color: #222c3b;
  gap: 5px;
}
.profile b {
  max-width: 115px;
  font-size: 12px;
}
.role-badge {
  color: #91bbf6;
  background: #162b44;
  border: 1px solid #2b4767;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.3px;
}
.avatar {
  width: 33px;
  height: 33px;
}
.user button {
  font-size: 10px;
  padding: 6px 8px;
}
.topbar {
  height: 84px;
  padding: 0 38px;
  background: #0d131c;
  border-color: #222c3b;
}
.topbar h1 {
  font-size: 19px;
  letter-spacing: -0.5px;
}
.topbar .status {
  border: 1px solid #25453e;
  background: #102820;
  color: #80d9bb;
  border-radius: 30px;
  padding: 5px 11px;
}
.toplink {
  color: #9cacbf;
  font-size: 12px;
  margin-left: auto;
}
.content {
  max-width: 1480px;
  padding: 32px 38px 108px;
  margin: 0 auto;
}
.card {
  background: #111923;
  border-color: #283344;
  border-radius: 12px;
  box-shadow: 0 2px 10px #00000010;
  padding: 25px;
}
.grid {
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card h2 {
  margin-bottom: 6px;
}
.card .row.between {
  gap: 12px;
  flex-wrap: wrap;
}
.pageintro {
  margin-bottom: 26px;
}
.pageintro h2 {
  font-size: 25px;
}
.overview-hero {
  padding: 34px 36px;
  margin-bottom: 24px;
  background:
    radial-gradient(ellipse at 100% 20%, #224b8133, transparent 70%), #111c2b;
  border: 1px solid #2c4462;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.overview-hero:after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  right: -95px;
  bottom: -170px;
  border: 40px solid #3f80d518;
  border-radius: 50%;
  pointer-events: none;
}
.overview-hero h2 {
  font-size: 30px;
  letter-spacing: -1px;
  line-height: 1.25;
}
.overview-hero p {
  color: #a2b5d0;
  margin-top: 12px;
}
.hero-logo {
  width: 100px;
  height: 100px;
  opacity: 0.95;
}
.overview-hero .eyebrow {
  color: #8abaff;
}
.overview-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
}
.statgrid {
  gap: 16px;
  margin-bottom: 24px;
}
.stat {
  background: #111923;
  border-color: #283344;
  border-radius: 10px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
.stat:after {
  content: "";
  position: absolute;
  right: 0;
  top: 18px;
  height: 35px;
  width: 3px;
  background: #568deb;
}
.stat:nth-child(2):after {
  background: #55caaa;
}
.stat:nth-child(3):after {
  background: #e4b165;
}
.stat:nth-child(4):after {
  background: #a18aec;
}
.stat strong {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 12px;
}
.stat span {
  font-size: 12px;
  color: #a5b2c5;
}
.chart {
  height: 145px;
  display: flex;
  gap: 14px;
  margin: 24px 0 0;
  align-items: end;
}
.chart-day {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  gap: 9px;
}
.chart-day b {
  font-size: 12px;
  color: #a0b6d6;
}
.chart-day small {
  color: #8294ad;
  font-size: 11px;
}
.chart-day meter {
  width: 100%;
  height: 16px;
  border: 0;
  border-radius: 4px;
}
.chart-day meter::-webkit-meter-bar {
  background: #1e2b3e;
  border: 0;
}
.chart-day meter::-webkit-meter-optimum-value {
  background: linear-gradient(90deg, #3978d4, #7bb4ff);
  border-radius: 3px;
}
.attention button {
  background: #151f2e;
  border-color: #2b3c51;
  border-radius: 8px;
}
.notice {
  background: #152335;
  border: 1px solid #30465f;
  color: #b8cbe3;
  border-radius: 9px;
  padding: 16px;
  font-size: 12px;
}
.notice p {
  color: #b8cbe3;
}
.availability {
  font-size: 12px;
}
.health-line {
  border-color: #263244;
  padding: 16px 0;
}
.health-line b {
  font-size: 12px;
  color: #8ddac0;
}
.activity {
  border-color: #253344;
}
.activity-icon {
  background: #192d47;
  color: #8dbbfb;
}
.activity small {
  color: #90a2b9;
  font-size: 10px;
}
.activity b {
  font-size: 12px;
}
.activity p {
  font-size: 11px;
}
.badge {
  background: #1a293c;
  color: #b4cae8;
  border-radius: 5px;
  border: 1px solid #30455f;
  font-size: 10px;
  letter-spacing: 0.25px;
}
.badge.open {
  background: #112d28;
  color: #85dbc2;
  border-color: #285348;
}
.badge.closed {
  background: #29232a;
  color: #c4aab6;
  border-color: #483744;
}
.role {
  border-color: #2d3a4e;
  background: #141e2d;
}
.tablewrap {
  border: 1px solid #273548;
  border-radius: 10px;
}
th {
  background: #162131;
  color: #92a7c5;
}
td,
th {
  padding: 15px 16px;
  border-color: #273346;
}
tbody tr:hover {
  background: #182335;
}
.empty {
  padding: 38px;
  text-align: center;
  border: 1px dashed #30445d;
  border-radius: 10px;
  color: #94a8c4;
}
.savebar {
  left: 246px;
  background: #0d141fee;
  border-color: #2c3b4e;
  padding: 15px 38px;
  z-index: 10;
}
.form-editor {
  border-color: #2d3a4d;
}
.form-editor > summary {
  font-size: 12px;
  color: #a8c8f5;
  padding: 15px 0;
}
.form-editor .appfields {
  margin: 18px 0;
}
.question-editor {
  border: 1px solid #2b3a50;
  background: #0f1824;
  border-radius: 8px;
  padding: 0 15px;
  margin-top: 10px;
}
.question-editor summary {
  padding: 13px 0;
  font-size: 12px;
  cursor: pointer;
}
.question-editor[open] summary {
  margin-bottom: 14px;
  border-bottom: 1px solid #293b54;
}
.question-editor .field {
  font-size: 12px;
}
.question-editor .grid {
  gap: 12px;
}
.question-editor .badge {
  margin-right: 8px;
}
.question-editor .row {
  font-size: 12px;
}
.question-editor textarea {
  min-height: 70px;
}
#applicationSettings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
#applicationSettings .card {
  align-self: start;
}
#applicationSettings h2 {
  font-size: 17px;
}
#applicationSettings .row button {
  font-size: 11px;
}
.preview button:nth-child(1) {
  background: #5865f2;
}
.preview button:nth-child(2) {
  background: #da373c;
}
.preview button:nth-child(3) {
  background: #248046;
}
.portal {
  background:
    radial-gradient(ellipse at 80% 0, #244f8533, transparent 45%), #0a1019;
}
.portalnav {
  background: #0d1622ee;
  border-color: #29394e;
  padding: 14px 5%;
  backdrop-filter: blur(16px);
}
.portalcontent {
  max-width: 1200px;
  padding: 44px 32px 80px;
}
.portalcontent h1 {
  font-size: 38px;
  letter-spacing: -1.5px;
  line-height: 1.2;
}
.portal .pageintro {
  margin-bottom: 28px;
}
.portal-profile .profile b {
  max-width: 180px;
}
.applicationchoice {
  border-top: 1px solid #31435d;
  padding: 29px;
  position: relative;
  background: linear-gradient(130deg, #142135, #111923);
  overflow: hidden;
}
.applicationchoice:after {
  content: "";
  position: absolute;
  right: -20px;
  top: -40px;
  width: 130px;
  height: 130px;
  border: 25px solid #5595f00c;
  transform: rotate(30deg);
  pointer-events: none;
}
.applicationchoice:nth-last-child(1) {
  background: linear-gradient(130deg, #142923, #111923);
  border-color: #2f4c42;
}
.applicationchoice .choiceicon {
  background: #1b3455;
  border: 1px solid #33527b;
  border-radius: 12px;
  color: #9ac3ff;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 23px;
  margin-bottom: 22px;
}
.applicationchoice h2 {
  font-size: 22px;
}
.applicationchoice p {
  min-height: 46px;
  margin-bottom: 27px;
}
.eligibility {
  grid-column: 1/-1;
  margin-bottom: 2px;
  padding: 17px 20px;
  border: 1px solid #3c4b61;
  border-radius: 9px;
  background: #152031;
}
.eligibility.eligible {
  border-color: #254c40;
  background: #10251f;
}
.eligibility.eligible span {
  color: #96dec3;
  font-size: 12px;
  font-weight: 650;
}
.eligibility p {
  font-size: 12px;
  margin-top: 3px;
}
.applicationheading {
  margin: 24px 0 30px;
}
.application-layout {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.application-guide {
  position: sticky;
  top: 24px;
}
.application-guide .identity {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #111e2d;
  border-color: #2b4059;
}
.application-guide .identity p {
  font-size: 11px;
}
.steps {
  padding: 0;
  list-style: none;
  margin: 26px 0;
}
.steps li {
  display: flex;
  gap: 15px;
  padding: 13px 10px;
  align-items: center;
  color: #7f91a9;
  position: relative;
}
.steps li > span {
  border: 1px solid #32415a;
  background: #111b29;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.steps li b {
  font-size: 13px;
}
.steps li small {
  display: block;
  font-size: 11px;
  margin-top: 2px;
}
.steps li.current {
  color: #c8dfff;
}
.steps li.current > span {
  background: #316ec7;
  border-color: #649ce8;
  color: white;
  box-shadow: 0 0 0 4px #387fdf19;
}
.steps li.complete > span {
  background: #13322c;
  color: #85d9bd;
  border-color: #316855;
}
.reviewer-note {
  border-top: 1px solid #293a51;
  padding: 20px 10px;
  font-size: 12px;
}
.reviewer-note p {
  font-size: 12px;
}
.application-body .card {
  padding: 32px;
  margin-bottom: 20px;
}
.step-heading {
  border-bottom: 1px solid #293a50;
  padding-bottom: 22px;
  margin-bottom: 27px;
}
.step-heading h2 {
  font-size: 24px;
}
.step-heading p {
  font-size: 13px;
}
.question {
  margin-bottom: 28px;
  gap: 10px;
}
.question > span:first-child {
  font-size: 13px;
  color: #e2ebfa;
  line-height: 1.5;
}
.character-count {
  text-align: right;
  color: #8096b3;
  font-size: 10px;
  font-weight: 400;
}
.question textarea {
  min-height: 115px;
  font-size: 13px;
  line-height: 1.6;
}
.check-question {
  display: flex;
  gap: 15px;
  align-items: start;
  border: 1px solid #2d405a;
  border-radius: 9px;
  background: #152235;
  padding: 20px;
  margin-bottom: 16px;
  font-size: 13px;
  cursor: pointer;
}
.check-question:has(input:checked) {
  background: #132e29;
  border-color: #387360;
}
.check-question input {
  flex: 0 0 18px;
  accent-color: #4ea68c;
  margin-top: 3px;
}
.check-question small {
  display: block;
  color: #94a9c4;
  font-weight: 400;
  font-size: 11px;
  margin-top: 8px;
}
.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.privacy-note {
  text-align: center;
  margin: 17px 0;
}
.answer-summary {
  padding: 17px 0;
  border-bottom: 1px solid #27384c;
}
.answer-summary h3 {
  font-size: 12px;
  color: #99b6da;
}
.answer-summary p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #e0e9f7;
  font-size: 13px;
  margin-top: 9px;
}
.textbutton {
  background: none;
  border: 0;
  padding: 0;
  color: #9cb8dd;
}
.submitted {
  max-width: 720px;
  margin: 70px auto;
  text-align: center;
  padding: 50px;
}
.submitted h1 {
  font-size: 34px;
}
.submitted p {
  margin: 18px 0 28px;
}
.submitted button {
  margin: 10px;
}
.login {
  background:
    radial-gradient(ellipse at 15% 50%, #1b427050, transparent 60%), #080e17;
}
.loginlayout {
  border: 1px solid #2d4260;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 100px #0005;
}
.loginhero {
  background: linear-gradient(145deg, #142945, #0e192a);
  padding: 50px;
}
.loginhero h1 {
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -3px;
  line-height: 1.08;
}
.loginhero h1 em {
  color: #7fb3fa;
}
.loginbox {
  background: #111c2b;
  border: 0;
  border-radius: 0;
  padding: 48px;
}
.loginbox h2 {
  font-size: 29px;
  line-height: 1.2;
  letter-spacing: -1px;
}
.loginbox p {
  margin: 17px 0 24px;
}
.loginfeatures span {
  border-color: #334d6d;
  background: #182e48;
}
.login .brand {
  padding: 0;
  margin-bottom: 58px;
}
.connectioncode {
  border-color: #34567e;
  background: #0d1827;
}
.connectioncode code {
  font-size: 13px;
}
.connectioncode button {
  font-size: 11px;
  padding: 8px;
}
.loginbox .notice {
  font-size: 12px;
}
.loginbox .hint {
  font-size: 12px;
}
.loginbox .divider {
  color: #738ba9;
}
#toast {
  border: 1px solid #3b597d;
  border-radius: 10px;
  background: #17283d;
  color: #e4efff;
  box-shadow: 0 8px 40px #0008;
  z-index: 100;
}
@media (min-width: 1700px) {
  .content {
    max-width: 1550px;
    padding-top: 42px;
  }
  .overview-hero {
    padding: 42px;
  }
  .portalcontent {
    padding-top: 60px;
  }
}
@media (max-width: 1150px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .content {
    padding: 26px 24px 100px;
  }
  #applicationSettings {
    grid-template-columns: 1fr;
  }
  .application-layout {
    grid-template-columns: 215px minmax(0, 1fr);
    gap: 24px;
  }
  .topbar {
    padding: 0 24px;
  }
  .hero-logo {
    width: 75px;
    height: 75px;
  }
}
@media (max-width: 800px) {
  .sidebar {
    width: 246px;
    overflow: auto;
    z-index: 30;
  }
  .main {
    margin-left: 0;
  }
  .savebar {
    left: 0;
    padding: 13px 16px;
  }
  .topbar {
    height: 70px;
    padding: 0 16px;
    gap: 13px;
  }
  .topbar h1 {
    font-size: 17px;
  }
  .topbar .status {
    font-size: 10px;
    padding: 5px 8px;
  }
  .mobile {
    display: block;
  }
  .toplink {
    display: none;
  }
  .content {
    padding: 23px 16px 105px;
  }
  .overview-hero {
    padding: 25px 22px;
  }
  .overview-hero h2 {
    font-size: 27px;
  }
  .hero-logo {
    display: none;
  }
  .statgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .stat {
    padding: 17px;
  }
  .stat strong {
    font-size: 27px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 20px;
  }
  .overview-grid {
    gap: 0;
  }
  .portalnav {
    padding: 14px 16px;
  }
  .portalcontent {
    padding: 28px 16px 60px;
  }
  .portalcontent h1 {
    font-size: 30px;
    letter-spacing: -1px;
  }
  .application-layout {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .application-guide {
    position: static;
  }
  .application-guide .identity {
    display: none;
  }
  .reviewer-note {
    display: none;
  }
  .steps {
    display: flex;
    margin: 0 0 20px;
    gap: 8px;
  }
  .steps li {
    flex: 1;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    text-align: center;
  }
  .steps li small {
    display: none;
  }
  .steps li b {
    font-size: 10px;
  }
  .steps li > span {
    width: 26px;
    height: 26px;
  }
  .application-body .card {
    padding: 22px;
  }
  .wizard-actions .hint {
    display: none;
  }
  .applicationheading {
    margin: 24px 0 18px;
  }
  .loginlayout {
    border-radius: 0;
    border: 0;
  }
  .loginhero {
    padding: 32px;
  }
  .loginbox {
    padding: 32px;
  }
  .login .brand {
    margin-bottom: 30px;
  }
  .loginbox h2 {
    font-size: 26px;
  }
  .submitted {
    padding: 30px 20px;
    margin: 25px 0;
  }
  .savebar small {
    max-width: 50%;
  }
  .portal-profile .profile b {
    max-width: 105px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.request-chart {
  margin: 24px 0 0;
}
.request-chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
}
.chart-grid {
  stroke: #283a52;
  stroke-dasharray: 4 6;
  stroke-width: 1;
}
.chart-bar {
  fill: #579af6;
}
.chart-value {
  fill: #c2d6f2;
  font-size: 11px;
  font-family: inherit;
}
.chart-label {
  fill: #8ea4c2;
  font-size: 11px;
  font-family: inherit;
}
.stat:first-child {
  background: #111923;
}
.question-actions {
  padding: 0 0 17px;
  flex-wrap: wrap;
}
.question-actions button {
  font-size: 11px;
  padding: 7px 10px;
}
.question-actions .danger {
  margin-left: auto;
}
.portalnav .portal-profile {
  display: inline-flex;
}
.portalnav .portal-profile span,
.portalnav .portal-profile small {
  display: initial;
}
.portalnav .profile {
  display: flex;
}
.portalnav .profile > span {
  display: flex;
  flex-direction: column;
}
.portalnav .profile .role-badge {
  align-self: flex-start;
}
.overview-grid .card {
  min-height: 0;
}
.health-line ~ .sectionheading {
  margin-top: 20px;
}
@media (max-width: 800px) {
  .portalnav {
    gap: 10px;
  }
  .portalnav .brand {
    font-size: 13px;
  }
  .portalnav .portal-profile .profile b {
    font-size: 11px;
    max-width: 85px;
  }
  .portalnav .portal-profile .role-badge {
    font-size: 9px;
  }
  .portalnav > .row {
    margin-left: auto;
  }
  .portalnav button {
    padding: 7px 9px;
    font-size: 11px;
  }
}
@media(max-width:800px){.portalnav .row>.portal-profile{display:inline-flex}}
/* Refined Crucible visual system — inspired by the supplied Krypton reference. */
:root{--bg:#0b0f15;--panel:#121820;--border:#27313d;--text:#f0f4f8;--muted:#9aa9ba;--accent:#a2bfde}
body{background:radial-gradient(ellipse at 85% 0%,#506b8b12,transparent 38%),var(--bg);letter-spacing:-.12px;-webkit-font-smoothing:antialiased}
button{font-weight:560;border-color:#303b49;background:#1a222d;box-shadow:none;border-radius:10px;padding:11px 17px}button:hover{background:#222f3f;border-color:#50627a;transform:translateY(-1px)}button:active{transform:translateY(0)}button:disabled{transform:none}.primary{color:#0a1624;background:#a7c4e3;border-color:#a7c4e3;box-shadow:0 4px 18px #729bc01a}.primary:hover{background:#c0d8ee;border-color:#c0d8ee;color:#081421}.danger{color:#ffacb2;border-color:#644049;background:#2c1c24}.danger:hover{background:#40242d}a{color:#b0cbed}h1,h2,h3{font-weight:620}h1{letter-spacing:-1.4px}h2{letter-spacing:-.6px}.eyebrow{font-size:10px;letter-spacing:2px;color:#9ebcde}.hint{color:#9baabd}.card{background:linear-gradient(140deg,#161d27,#111720);border-color:#283340;border-radius:16px;box-shadow:0 1px 0 #ffffff03 inset}.card>p{color:#9cabbc}input,textarea,select{background:#0f151e;border-color:#2c3848;border-radius:10px;padding:12px 14px}input:focus,textarea:focus,select:focus{border-color:#8badcf;box-shadow:0 0 0 3px #95b9e013}input[type=checkbox]{accent-color:#8eb6de}.role-badge{background:#253346;color:#c9def3;border-color:#384d67;border-radius:5px;font-weight:550}
.sidebar{background:#0e131be8;border-right:1px solid #26303c;backdrop-filter:blur(16px);width:240px}.main{margin-left:240px}.brand{font-size:16px;letter-spacing:-.4px;height:84px;border:0}.brand-logo{width:34px;height:34px}.server{border:1px solid #303c4b;border-radius:12px;background:#161e29;margin:8px 16px 26px;font-size:12px}.sidebar nav{gap:5px}.sidebar nav button{border-radius:8px;padding:11px 15px;font-size:12px;letter-spacing:0;color:#9aabbd}.sidebar nav button.active{background:#23344b;color:#cee3f8;box-shadow:none;border:1px solid #344f70;padding:10px 14px}.sidebar nav button.active span{color:#bad8f6}.sidebar nav button:hover{background:#1a2636;transform:none}.sidebar nav button span{color:#8197af;font-size:16px}.user{background:#101721;border-color:#273442;padding:17px 14px}.user .profile b{font-weight:600}.user .profile small{margin-top:3px}.topbar{background:#0d131bb3;border-color:#252e3a;height:84px;backdrop-filter:blur(18px);padding:0 38px}.topbar h1{font-size:18px;letter-spacing:-.4px}.topbar .status{font-size:10px;font-weight:550;border-color:#2b453f;background:#14251f;color:#a6d9c4}.toplink{font-size:11px;color:#a4b7cd}.content{max-width:1450px;padding:38px 40px 115px}.overview-hero{background:radial-gradient(ellipse at 90% 50%,#607fa52a,transparent 65%),linear-gradient(120deg,#182332,#111924);border-color:#344458;border-radius:22px;padding:44px;margin-bottom:26px}.overview-hero h2{font-size:clamp(27px,2.4vw,42px);letter-spacing:-1.5px;font-weight:630;max-width:820px}.overview-hero p{font-size:14px;color:#aabbd0;max-width:620px;line-height:1.8}.overview-hero .sectionheading{margin-top:28px}.overview-hero button{border-radius:30px;font-size:12px;padding:12px 21px}.overview-hero .eyebrow{color:#a9c5e5;letter-spacing:2.2px;margin-bottom:20px}.hero-logo{width:85px;height:85px;filter:drop-shadow(0 0 40px #93b8e033);margin:0 8px 0 24px}.overview-hero:after{border-color:#7b9cb50a;width:360px;height:360px;right:-150px;bottom:-260px;border-width:65px}.statgrid{gap:17px;margin-bottom:28px}.stat,.stat:first-child{border-radius:14px;background:linear-gradient(130deg,#151e2b,#121922);border:1px solid #2b3747;padding:22px 24px}.stat:after{height:5px;width:5px;right:22px;top:24px;border-radius:50%;background:#9cbce2}.stat strong{font-size:34px;letter-spacing:-1.4px;font-weight:560;margin-top:16px}.stat span{font-size:11px;color:#a6b5c9}.overview-grid{gap:26px}.overview-grid>.card{padding:27px}.overview-grid h2{font-size:19px;margin-top:2px}.chart-bar{fill:#99bce3}.chart-grid{stroke:#2a3b4e}.chart-label{fill:#a6b9cd}.chart-value{fill:#d3e4f7}.attention>button{background:#182433;border:1px solid #2c3d53;padding:15px;border-radius:11px;font-size:12px;margin:13px 0}.attention>button>b{color:#bcd6f2}.attention .notice{background:#12221f;border-color:#29463e}.notice{border-radius:12px;background:#18283a;border-color:#344c67;line-height:1.7}.health-line{padding:14px 0;border-color:#2a3748}.health-line b{font-size:11px}.activity-icon{background:#25364c;border:1px solid #344c68;border-radius:9px;color:#b8d3f1}.activity{padding:17px 0;border-color:#293644}.activity b{text-transform:none;font-weight:550}.activity p{color:#8fa4be}.badge{border-radius:30px;padding:4px 10px;font-size:10px;font-weight:550;letter-spacing:.1px}.badge.open,.badge.accepted{background:#163027;border-color:#315846;color:#a9dfc0}.badge.closed,.badge.declined{background:#2c232b;border-color:#513747;color:#dfa6be}.pageintro h2{font-size:29px;letter-spacing:-1px}.pageintro p{font-size:13px;color:#9fafc3}.tablewrap{border-radius:12px;border-color:#2d3b4f}th{background:#192332;font-size:10px;padding:15px 18px;letter-spacing:1.1px}td{font-size:12px;padding:17px 18px;border-color:#26384d}.tablewrap td button{font-size:11px;padding:7px 12px}.empty{background:#101a27;border-color:#31445e;padding:42px}.empty h2{font-size:19px}.empty p{font-size:12px}.savebar{left:240px;background:#101823ed;border-color:#314259;padding:14px 38px}.savebar button{border-radius:25px;font-size:12px;padding:10px 20px}.savebar small{font-size:11px}.form-editor>summary{color:#b9d1ef}.question-editor{background:#131f2e;border-color:#304057}.question-editor summary{line-height:1.6}.question-actions button{border-radius:7px}.field label,.field>span:first-child{font-weight:550}.role{background:#192436;border-color:#33475f;font-size:12px}.toggle p{font-size:12px}.toggle input{margin-top:9px}
.portal{background:radial-gradient(ellipse at 75% 0,#576f9526,transparent 45%),#0c1119}.portalnav{background:#0e151de6;border-color:#2a3442;max-width:none;padding:14px max(24px,calc((100vw - 1180px)/2));min-height:80px}.portalnav .brand{font-size:16px}.portalnav button{border-radius:30px}.portalnav .profile .role-badge{border-radius:5px}.portalcontent{max-width:1180px;padding:58px 30px 95px}.portal .pageintro{max-width:740px;margin:0 auto 38px;text-align:center}.portal .pageintro h1{font-size:clamp(31px,4vw,49px);letter-spacing:-1.9px;line-height:1.17}.portal .pageintro p{font-size:14px;margin-top:17px}.portal .pageintro .eyebrow{margin-bottom:20px}.eligibility{padding:17px 23px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 7px}.eligibility.eligible{background:#13251f;border-color:#305244}.eligibility.eligible>span{color:#a7dfc1;font-size:12px}.eligibility.eligible>p{color:#91b5a5;font-size:11px;margin:0}.applicationchoice{padding:32px;border-radius:19px;background:radial-gradient(ellipse at 100% 0,#627fa529,transparent 70%),#141e2a;border:1px solid #354962;min-height:290px;transition:transform .2s,border-color .2s}.applicationchoice:hover{transform:translateY(-4px);border-color:#6687b1}.applicationchoice:nth-last-child(1){background:radial-gradient(ellipse at 100% 0,#51897622,transparent 70%),#141e25;border-color:#354f46}.applicationchoice h2{font-size:23px;letter-spacing:-.7px}.applicationchoice .choiceicon{width:48px;height:48px;background:#253953;border:1px solid #466182;border-radius:13px;color:#c3ddf7;margin-bottom:24px}.applicationchoice p{font-size:13px;max-width:390px;line-height:1.7}.applicationchoice button{border-radius:25px;min-width:100px}.applicationchoice .row{gap:13px;flex-wrap:wrap}.applicationheading{margin:30px 0 35px}.applicationheading h1{font-size:39px;letter-spacing:-1.4px}.applicationheading p{font-size:14px;margin-top:13px}.application-layout{gap:35px}.application-guide .identity{background:#172232;border-color:#344961;border-radius:13px}.application-guide .identity .badge{font-size:10px}.application-body .card{background:linear-gradient(135deg,#151f2c,#111923);border-color:#2d3e54;border-radius:18px;padding:35px}.step-heading{margin-bottom:30px;border-color:#2d4058;padding-bottom:26px}.step-heading h2{font-size:27px;letter-spacing:-.9px}.steps li.current{color:#d4e7fa}.steps li.current>span{background:#abc8e7;color:#102039;border-color:#bdd7f1;box-shadow:0 0 0 4px #7f9fc31a}.steps li.complete>span{background:#1d3c32;border-color:#406b57;color:#b4dfc6}.steps li b{font-weight:560}.reviewer-note{border-color:#2c3e55}.reviewer-note b{font-weight:600}.question textarea{min-height:125px;background:#101925}.question>span:first-child{font-size:13px;line-height:1.6}.check-question{background:#19293d;border-color:#39516e;border-radius:12px;padding:22px}.check-question:has(input:checked){background:#19372d;border-color:#4b8067}.wizard-actions .primary{border-radius:30px;min-width:155px}.wizard-actions>button{font-size:12px}.answer-summary{border-color:#2d4057}.answer-summary h3{color:#adc9eb}.answer-summary p{color:#e1eaf6}.submitted{border-radius:24px;padding:55px}.submitted h1{font-size:37px;letter-spacing:-1.4px}.submitted .identitycheck{background:#214639;color:#b1e4c4}.submitted button{border-radius:25px}
.login{background:radial-gradient(ellipse at 50% 10%,#546f982a,transparent 50%),#0b1017;min-height:100vh;padding:40px 24px}.loginlayout{display:grid;grid-template-columns:1fr;max-width:1080px;gap:0;margin:0 auto;background:transparent;box-shadow:none;border:0;border-radius:0}.loginhero{padding:12px 30px 30px;background:transparent;text-align:center}.loginhero .brand{justify-content:center;height:auto;border:0;margin:0 0 52px;font-size:18px}.loginhero h1{font-size:clamp(46px,6vw,75px);line-height:1.03;letter-spacing:-3.6px;max-width:760px;margin:16px auto 22px}.loginhero h1 em{color:#a6c2e0}.loginhero>p{font-size:16px;line-height:1.7;color:#9eb0c7}.loginhero .eyebrow{color:#91aecf}.loginfeatures{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:25px 0 0}.loginfeatures span{background:#182332;border:1px solid #2d3d53;border-radius:30px;font-size:11px;padding:8px 14px;color:#b0c5df}.loginhero .foot{display:none}.loginbox{padding:30px 35px;background:linear-gradient(140deg,#192536,#121d2b);border:1px solid #354961;border-radius:19px;width:min(100%,470px);margin:0 auto 45px;box-shadow:0 20px 65px #00000022}.loginbox h2{font-size:25px;letter-spacing:-.7px}.loginbox p{font-size:12px;margin:12px 0 22px;color:#a5b8ce}.loginbox .primary{border-radius:30px;padding:13px 22px}.loginbox .divider{font-size:10px;margin:22px 0 12px}.loginbox small{font-size:10px;color:#8fa4bd}.loginbox .connectioncode{background:#0d1724;border-color:#3e5a7b;border-radius:10px}.loginbox code{color:#c3dcfa}.loginbox .wide{display:block;text-align:center}.loginbox .eyebrow{font-size:9px;margin-bottom:13px}
@media(min-width:1700px){.content{max-width:1500px;padding:42px 44px 115px}.overview-hero{padding:46px}.portalcontent{padding-top:68px}}
@media(max-width:1150px){.content{padding:29px 25px 110px}.overview-hero{padding:32px}.overview-hero h2{font-size:30px}.overview-grid{gap:22px}.application-layout{grid-template-columns:210px minmax(0,1fr);gap:24px}.application-body .card{padding:26px}}
@media(max-width:800px){.main{margin-left:0}.sidebar{width:240px;z-index:30}.savebar{left:0;padding:13px 16px}.topbar{height:70px;padding:0 16px}.topbar h1{font-size:17px}.content{padding:23px 16px 105px}.overview-hero{padding:27px 22px;border-radius:18px}.overview-hero h2{font-size:29px;letter-spacing:-1px}.overview-hero p{font-size:12px}.overview-hero .eyebrow{font-size:8px;letter-spacing:1.5px}.overview-hero .row{gap:10px}.overview-hero button{font-size:11px;padding:10px 14px}.statgrid{gap:12px}.stat,.stat:first-child{padding:18px;border-radius:12px}.stat strong{font-size:29px}.stat span{font-size:10px}.stat:after{right:15px;top:21px}.overview-grid .card{padding:22px}.overview-grid{gap:0}.card{border-radius:13px}.pageintro h2{font-size:25px}.portalnav{padding:13px 16px;gap:8px;flex-wrap:wrap}.portalnav .brand{font-size:13px}.portalnav .brand-logo{width:27px;height:27px}.portalnav .row>.portal-profile{display:inline-flex}.portalnav>.row{gap:9px;margin-left:auto}.portalnav .profile b{font-size:10px;max-width:75px}.portalnav button{font-size:10px;padding:7px 10px}.portalcontent{padding:36px 16px 70px}.portal .pageintro{text-align:left;margin:0 0 28px}.portal .pageintro h1{font-size:34px;letter-spacing:-1.4px}.portal .pageintro p{font-size:13px;line-height:1.8}.eligibility{padding:16px 18px;gap:5px}.applicationchoice{padding:27px;min-height:270px;border-radius:16px}.applicationchoice h2{font-size:21px}.applicationheading h1{font-size:31px}.application-layout{grid-template-columns:1fr;gap:14px}.application-body .card{padding:24px 20px}.step-heading h2{font-size:24px}.steps li b{font-size:10px}.wizard-actions .primary{min-width:135px;padding:11px 17px}.check-question{padding:18px;gap:12px}.login{padding:27px 16px}.loginhero{padding:0 6px 27px}.loginhero .brand{margin-bottom:40px;font-size:16px}.loginhero h1{font-size:49px;letter-spacing:-2.5px}.loginhero>p{font-size:13px}.loginhero .eyebrow{font-size:9px}.loginfeatures{gap:7px}.loginfeatures span{font-size:9px;padding:7px 10px}.loginbox{padding:27px 24px;border-radius:16px}.loginbox h2{font-size:24px}.loginbox p{font-size:12px}.submitted{padding:35px 24px}.submitted h1{font-size:29px}}
@media(prefers-reduced-motion:reduce){button:hover,.applicationchoice:hover{transform:none}*{transition:none!important}}