/* [project]/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --fx-border-angle: 0deg;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "Segoe UI", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-white: #fff;
    --spacing: .25rem;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .top-1000 {
    top: calc(var(--spacing) * 1000);
  }

  .isolate {
    isolation: isolate;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .lowercase {
    text-transform: lowercase;
  }

  .underline {
    text-decoration-line: underline;
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

.banner-actions {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.range-button {
  color: #eef2ff;
  background: #3730a3;
  border-color: #a5b4fc;
}

.range-button:hover {
  background: #4338ca;
}

.range-intro {
  color: #eef2ff;
  background: #171c3d;
  border-radius: 14px;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
  padding: 26px;
  display: flex;
}

.range-intro h2 {
  margin-bottom: 8px;
}

.range-intro p {
  color: #b6c0e4;
  max-width: 620px;
  margin: 0;
  font-size: 14px;
}

.range-icon {
  color: #a5b4fc;
  border: 1px solid #6366f1;
  border-radius: 12px;
  padding: 16px;
  display: inline-flex;
}

.range-level {
  letter-spacing: 1px;
  color: #a5b4fc;
  margin-left: auto;
  font-size: 12px;
}

@media (max-width: 950px) {
  .range-intro {
    flex-wrap: wrap;
  }

  .range-level {
    margin-left: 0;
  }
}

:root {
  --bg: #f4f6fc;
  --surface: #fff;
  --text: #16203a;
  --muted: #67718c;
  --line: #e2e7f3;
  --accent: #4f46e5;
  --mint: #c4b5fd;
  --sidebar: #141a35;
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

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

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

button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

:where(button, a, input, select, textarea):focus-visible {
  outline-offset: 2px;
  border-radius: 8px;
  outline: 2px solid #6366f18c;
}

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

button {
  border: 0;
}

input, select, textarea {
  color: var(--text);
  background: #fff;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
  min-width: 0;
  padding: 10px 12px;
}

input:focus, select:focus, textarea:focus {
  outline-offset: 2px;
  outline: 2px solid #818cf8;
}

textarea {
  resize: vertical;
  min-height: 84px;
}

button:focus-visible, a:focus-visible {
  outline-offset: 4px;
  outline: 3px solid #818cf8;
}

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

h1 {
  letter-spacing: -.8px;
  margin-bottom: 11px;
  font-size: 30px;
  font-weight: 650;
  line-height: 1.25;
}

h2 {
  letter-spacing: -.35px;
  margin-bottom: 18px;
  font-size: 21px;
  font-weight: 650;
  line-height: 1.35;
}

h3 {
  margin-bottom: 9px;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.45;
}

p {
  margin-bottom: 14px;
}

small {
  font-size: 13px;
}

strong {
  font-weight: 600;
}

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

.inline {
  align-items: center;
  gap: 10px;
  display: flex;
}

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

.stack {
  flex-direction: column;
  gap: 23px;
  display: flex;
}

.section {
  margin-top: 30px;
}

.button {
  white-space: nowrap;
  border: 1px solid #0000;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 17px;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s, transform .15s;
  display: inline-flex;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.primary {
  background: linear-gradient(120deg, var(--accent) 0%, #6d5bd0 55%, var(--accent) 100%);
  color: #fff;
  background-position: 0 0;
  background-size: 180% 100%;
  transition: background-position .5s, transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
  box-shadow: 0 2px 10px #4f46e52e;
}

.primary:hover:not(:disabled) {
  background-position: 95% 0;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px #4f46e54d;
}

.primary:active:not(:disabled) {
  transition-duration: 70ms;
  transform: translateY(0)scale(.97);
  box-shadow: 0 2px 8px #4f46e540;
}

.secondary {
  color: #2b3352;
  background: #fff;
  border-color: #dfe3f2;
  transition: border-color .2s, color .2s, transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}

.secondary:hover:not(:disabled) {
  color: #3f37c9;
  border-color: #a5b4fc;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px #4f46e51a;
}

.secondary:active:not(:disabled) {
  transition-duration: 70ms;
  transform: scale(.97);
}

.secondary:hover:not(:disabled) {
  background: #f1f6f5;
}

.ghost {
  color: #5a6480;
  background: none;
}

.ghost:hover {
  background: #e9f0f1;
}

.danger {
  color: #b23939;
  background: #fff1f1;
  border-color: #f1cccc;
}

.mint {
  background: var(--mint);
  color: #2e1065;
}

.text-link {
  color: var(--accent);
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: gap .2s, color .2s, transform .2s;
  display: inline-flex;
}

.text-link:hover {
  color: #3f37c9;
  gap: 13px;
  transform: translateX(2px);
}

.app-shell {
  min-height: 100vh;
  display: flex;
}

.sidebar {
  background: var(--sidebar);
  color: #a9bbc1;
  z-index: 30;
  flex-direction: column;
  flex-shrink: 0;
  width: 254px;
  padding: 33px 20px 14px;
  display: flex;
  position: fixed;
  inset: 0 auto 0 0;
}

.sidebar > nav {
  scrollbar-width: none;
  flex: 1;
  min-height: 0;
  padding-right: 2px;
  overflow-y: auto;
}

.sidebar > nav::-webkit-scrollbar {
  display: none;
}

.brand {
  color: #f3f8f7;
  letter-spacing: -1px;
  white-space: nowrap;
  align-items: center;
  gap: 11px;
  font-size: 25px;
  font-weight: 650;
  display: flex;
}

.brand-icon {
  color: #a5b4fc;
  background: #262a5e;
  border: 1px solid #4548a3;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  width: 39px;
  height: 42px;
  display: flex;
}

.brand-accent {
  color: #a78bfa;
}

.brand small {
  letter-spacing: 1.35px;
  color: #9aa3c4;
  margin-top: 1px;
  font-size: 8px;
  font-weight: 500;
  display: block;
}

.nav-caption {
  letter-spacing: 1.9px;
  color: #718c94;
  margin: 37px 16px 14px;
  font-size: 10px;
  font-weight: 600;
}

.nav-link {
  border-radius: 7px;
  align-items: center;
  gap: 13px;
  margin: 5px 0;
  padding: 13px 14px;
  font-size: 14px;
  transition: background .2s, transform .2s cubic-bezier(.34, 1.56, .64, 1), color .2s;
  display: flex;
}

.nav-link:hover:not(.active) {
  transform: translateX(3px);
}

.nav-link svg {
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.nav-link:hover svg {
  transform: scale(1.12)rotate(-4deg);
}

.nav-link span {
  flex: 1;
}

.nav-link:hover {
  color: #d8dcf5;
  background: #1a2340;
}

.nav-link.active {
  color: #a5b4fc;
  background: #232a5e;
  border: 1px solid #38408c;
  padding: 12px 13px;
}

.sidebar-bottom {
  margin-top: auto;
  padding-top: 14px;
}

.sidebar-note {
  background: linear-gradient(135deg, #18213f, #141c36);
  border: 1px solid #232c4a;
  border-radius: 10px;
  padding: 17px 15px;
}

.sidebar-note strong {
  color: #d6e7e5;
  font-size: 12px;
}

.sidebar-note .inline {
  color: #a5b4fc;
  gap: 7px;
}

.sidebar-note p {
  color: #9aa3c4;
  margin: 12px 0;
  font-size: 12px;
  line-height: 1.8;
}

.sidebar-note a {
  color: #c7d2fe;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  display: flex;
}

.profile-link {
  border-top: 1px solid #262c47;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 0 6px;
  display: flex;
}

.avatar {
  color: #4f46e5;
  background: #ddd9fb;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
}

.profile-link > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.profile-link strong {
  color: #d8dcf5;
  text-overflow: ellipsis;
  font-size: 12px;
  display: block;
  overflow: hidden;
}

.profile-link small {
  color: #8fa5ad;
  text-overflow: ellipsis;
  font-size: 10px;
  display: block;
  overflow: hidden;
}

.main-shell {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  margin-left: 254px;
  display: flex;
}

.topbar {
  border-bottom: 1px solid var(--line);
  background: #fff;
  justify-content: space-between;
  align-items: center;
  height: 77px;
  padding: 0 40px;
  font-size: 13px;
  display: flex;
}

.topbar > .inline {
  gap: 16px;
}

.environment-label {
  letter-spacing: 1.9px;
  color: #8c999f;
  margin-right: 13px;
  font-size: 9px;
}

.header-login {
  color: var(--accent);
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.main-content {
  flex: 1;
  width: 100%;
  max-width: 1760px;
  margin: auto;
  padding: 54px 58px 64px;
}

.footer {
  border-top: 1px solid var(--line);
  color: #8a989e;
  justify-content: space-between;
  margin: 0 40px;
  padding: 20px 0;
  font-size: 11px;
  display: flex;
}

.footer-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 40px 26px;
}

.footer-legal {
  color: #8a989e;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  display: flex;
}

.footer-partners {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  display: flex;
}

.partner-mark {
  object-fit: contain;
  opacity: .85;
  filter: grayscale(.2);
  width: auto;
  max-width: 170px;
  height: 26px;
}

.partner-mark-text {
  letter-spacing: .2px;
  color: #9fb0b6;
  border: 1px solid var(--line);
  background: #ffffff05;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
}

.page {
  width: 100%;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  min-width: 0;
  padding: 28px;
  box-shadow: 0 1px 2px #10272d0a;
}

.card .data-table {
  margin: 0;
}

.eyebrow {
  letter-spacing: 1.8px;
  color: #7b8d94;
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: 600;
}

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

.page-heading p {
  color: var(--muted);
  max-width: 720px;
  margin: 0;
  font-size: 14px;
}

.welcome-banner {
  color: #fff;
  background: linear-gradient(112deg, #171c3d, #1e2456 62%, #2b2a72);
  border-radius: 15px;
  justify-content: space-between;
  min-height: 264px;
  padding: 31px 35px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.banner-label {
  letter-spacing: 1.6px;
  color: #a5b4fc;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  display: flex;
}

.banner-label > span {
  background: #818cf8;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.welcome-banner h2 {
  letter-spacing: -.5px;
  margin: 15px 0 11px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.35;
}

.welcome-banner h2 span {
  color: #a78bfa;
}

.welcome-banner p {
  color: #b6c0e4;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.8;
}

.welcome-banner .button {
  min-height: 39px;
  padding: 10px 16px;
  font-size: 12px;
}

.banner-mark {
  flex-shrink: 0;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  width: 300px;
  margin-right: 5px;
  display: flex;
  position: relative;
}

.orbit {
  aspect-ratio: 1;
  border: 1px solid #818cf84f;
  border-radius: 50%;
  position: absolute;
  transform: rotate(-25deg);
}

.orbit-one {
  width: 170px;
}

.orbit-two {
  width: 250px;
}

.orbit-three {
  width: 340px;
}

.shield-mark {
  z-index: 1;
  color: #c7d2fe;
  background: linear-gradient(145deg, #4f46e57a, #7c3aed6b);
  border: 1px solid #a5b4fc46;
  border-radius: 27px;
  justify-content: center;
  align-items: center;
  width: 115px;
  height: 128px;
  display: flex;
  transform: rotate(-9deg);
  box-shadow: 0 0 65px #818cf817, inset 0 0 24px #a78bfa12;
}

.shield-mark svg {
  transform: rotate(9deg);
}

.mark-label {
  letter-spacing: 1.7px;
  color: #c7d2fe;
  z-index: 2;
  background: #2a3160;
  border: 1px solid #6b78d680;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 8px;
  position: absolute;
}

.label-one {
  top: 37px;
  left: 21px;
  transform: rotate(-8deg);
}

.label-two {
  top: 99px;
  right: 0;
  transform: rotate(7deg);
}

.label-three {
  bottom: 10px;
  left: 58px;
  transform: rotate(-7deg);
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 34px 0 42px;
  display: grid;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  min-width: 0;
  padding: 27px 28px;
  box-shadow: 0 1px 2px #10272d0a;
}

.stat .between {
  color: #71858c;
  gap: 5px;
  font-size: 12px;
}

.stat svg {
  color: #7d8ac0;
}

.stat > strong {
  letter-spacing: -.9px;
  color: #1f2a43;
  margin: 13px 0 8px;
  font-size: 30px;
  font-weight: 650;
  line-height: 1.2;
  display: block;
}

.stat > small {
  color: #99a4a8;
  font-size: 10px;
}

.section-title {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  display: flex;
}

.section-title h2 {
  margin: 0;
  font-size: 19px;
}

.section-title > a {
  color: #6d7aa8;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

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

.direction-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  flex-direction: column;
  min-width: 0;
  padding: 28px 28px 0;
  transition: transform .18s, box-shadow .18s;
  display: flex;
}

.direction-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px #141c3e10;
}

.direction-icon {
  color: #4f60a5;
  background: #e5f5ef;
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  display: inline-flex;
}

.blue .direction-icon {
  color: #5089bd;
  background: #eaf1fc;
}

.violet .direction-icon {
  color: #8d73be;
  background: #f0ecf8;
}

.amber .direction-icon {
  color: #b47f2e;
  background: #fbf1df;
}

.direction-card.direction-soon {
  background: linear-gradient(#fbfbfe, #f4f5fa);
  border-style: dashed;
  border-color: #d9dcea;
}

.direction-card.direction-soon:hover {
  box-shadow: none;
  transform: none;
}

.direction-card.direction-soon h3, .direction-card.direction-soon p, .direction-card.direction-soon .topic-tags span {
  opacity: .72;
}

.direction-soon-badge {
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #8a6420;
  background: #fbbf2424;
  border: 1px solid #fbbf2466;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  animation: 2.6s ease-in-out infinite soon-pulse;
  display: inline-flex;
}

@keyframes soon-pulse {
  0%, 100% {
    box-shadow: 0 0 #fbbf2440;
  }

  50% {
    box-shadow: 0 0 0 5px #fbbf2400;
  }
}

.direction-number {
  color: #e5e9ec;
  letter-spacing: -1px;
  font-size: 26px;
  font-weight: 500;
}

.direction-card h3 {
  margin: 19px 0 8px;
  font-size: 18px;
}

.direction-card p {
  color: #839198;
  max-width: 230px;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.85;
}

.topic-tags {
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  min-height: 42px;
  margin-top: auto;
  margin-bottom: 20px;
  display: flex;
}

.topic-tags span {
  color: #7b8a91;
  background: #f3f6f7;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 9px;
}

.direction-footer {
  color: #5f6fc5;
  border-top: 1px solid #eef1f3;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.blue .direction-footer {
  color: #5a86b0;
}

.violet .direction-footer {
  color: #9277b6;
}

.dashboard-bottom {
  grid-template-columns: 1.7fr 1fr;
  gap: 21px;
  margin-top: 30px;
  display: grid;
}

.panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  min-width: 0;
  padding: 32px;
  box-shadow: 0 1px 2px #10272d0a;
}

.panel .section-title h2 {
  font-size: 17px;
}

.empty {
  text-align: center;
  color: var(--muted);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 210px;
  padding: 38px 24px;
  display: flex;
}

.empty-icon {
  color: #8a9aec;
  background: #f2f4fb;
  border-radius: 13px;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  display: flex;
}

.empty h3 {
  color: #566079;
  margin-bottom: 7px;
  font-size: 15px;
}

.empty p {
  max-width: 340px;
  margin-bottom: 17px;
  font-size: 13px;
  line-height: 1.8;
}

.empty .text-link {
  font-size: 12px;
}

.learning-card {
  background: linear-gradient(130deg, #edf4f0, #f5f8f5);
  border-color: #dfe9e3;
  flex-direction: column;
  align-items: flex-start;
  padding: 25px 27px;
  display: flex;
}

.small-icon {
  color: #7f8ed8;
  background: #dceae0;
  border: 1px solid #c7d2fe;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 15px;
  display: flex;
}

.learning-card h2 {
  margin-bottom: 10px;
  font-size: 21px;
  line-height: 1.4;
}

.learning-card p {
  color: #8f9ee8;
  margin-bottom: 15px;
  font-size: 12px;
  line-height: 1.9;
}

.learning-card .text-link {
  font-size: 12px;
}

.learning-note {
  color: #90a0ea;
  border-top: 1px solid #dce6de;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-top: 17px;
  font-size: 10px;
  display: flex;
}

.back-link {
  color: #74898b;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  display: inline-flex;
}

.steps {
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  display: grid;
}

.steps > div > span {
  color: #4c5c9e;
  background: #e4f3ed;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 33px;
  height: 33px;
  margin: 12px 0;
  display: flex;
}

.steps p {
  color: var(--muted);
  font-size: 14px;
}

.catalog-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 15px;
  display: flex;
}

.search-box {
  color: #8a999e;
  background: #fff;
  border: 1px solid #dce4e7;
  border-radius: 9px;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  padding: 0 14px;
  display: flex;
}

.search-box input {
  outline-offset: 0;
  background: none;
  border: 0;
  width: 100%;
  padding: 12px 0;
  font-size: 14px;
}

.filter-label {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.catalog-filters {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 23px;
  display: flex;
}

.catalog-filters select, .catalog-toolbar select, .filter-input {
  height: 42px;
  font-size: 13px;
}

.filter-input {
  max-width: 160px;
}

.tabs {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.tabs button {
  color: #7b8a91;
  background: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
}

.tabs button.selected {
  color: #4a5a9a;
  background: #e2eee9;
  font-weight: 600;
}

.catalog-subline {
  margin-bottom: 23px;
  font-size: 12px;
}

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

.scenario-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  padding: 23px;
  display: flex;
}

.scenario-icon {
  color: #6072cc;
  background: #eaf2ef;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 39px;
  height: 39px;
  display: flex;
}

.scenario-card > small {
  color: #8a969c;
  margin-top: 21px;
  font-size: 10px;
}

.scenario-card h3 {
  margin: 6px 0 10px;
  font-size: 18px;
}

.scenario-card h3 a:hover {
  color: var(--accent);
}

.scenario-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.difficulty {
  color: #6b8490;
  background: #f2f4f6;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 10px;
}

.difficulty.beginner {
  color: #566cba;
  background: #ecf7f0;
}

.difficulty.advanced {
  color: #9b6c43;
  background: #fbf0e4;
}

.scenario-meta {
  color: #8a9aa0;
  gap: 15px;
  margin-top: auto;
  padding: 14px 0 18px;
  font-size: 11px;
  display: flex;
}

.scenario-meta > span {
  align-items: center;
  gap: 6px;
  display: flex;
}

.scenario-footer {
  border-top: 1px solid #edf0f2;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 17px;
  display: flex;
}

.scenario-footer > a {
  color: var(--accent);
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.badge {
  color: #6a7e87;
  white-space: nowrap;
  background: #edf1f4;
  border-radius: 5px;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.4;
  display: inline-flex;
}

.status-running, .status-completed, .status-passed, .status-published, .status-active, .status-available {
  color: #5568b0;
  background: #e6f5ed;
}

.status-failed, .status-error, .status-disabled {
  color: #b35555;
  background: #fcecec;
}

.status-creating, .status-stopping, .status-in_progress, .status-pending, .status-draft {
  color: #a98739;
  background: #fbf2dd;
}

.progress-group {
  width: 100%;
  min-width: 90px;
}

.progress-group > .between {
  margin-bottom: 8px;
  font-size: 13px;
}

.progress {
  background: #e8ebf8;
  border-radius: 5px;
  width: 100%;
  height: 6px;
  overflow: hidden;
}

.progress > span {
  background: linear-gradient(90deg, #4f46e5, #8b5cf6);
  border-radius: 5px;
  height: 100%;
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
  display: block;
  position: relative;
}

.progress > span:after {
  content: "";
  background: linear-gradient(100deg, #0000 20%, #ffffff80 50%, #0000 80%);
  animation: 2.8s ease-in-out infinite progress-shimmer;
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}

@keyframes progress-shimmer {
  0% {
    transform: translateX(-100%);
  }

  55% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.detail-grid {
  grid-template-columns: 1fr 330px;
  gap: 23px;
  display: grid;
}

.start-panel {
  align-self: start;
  position: sticky;
  top: 25px;
}

.start-panel h2 {
  margin-top: 17px;
}

.start-panel .button {
  width: 100%;
}

.start-panel > p {
  margin: 18px 0 0;
  font-size: 12px;
}

.check-list {
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.check-list li {
  color: #6d828b;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  display: flex;
}

.check-list svg {
  color: #7d8fe0;
  flex-shrink: 0;
  margin-top: 3px;
}

.details {
  margin: 22px 0;
}

.details > div {
  border-bottom: 1px solid #eef1f2;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  font-size: 13px;
  display: flex;
}

.details dt {
  color: var(--muted);
}

.details dd {
  margin: 0;
  font-weight: 500;
}

.two-columns {
  grid-template-columns: 1fr 1fr;
  gap: 23px;
  display: grid;
}

.plain-list {
  color: #6e818a;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.85;
}

.plain-list li + li {
  margin-top: 9px;
}

.table-wrap {
  padding: 0;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  font-size: 14px;
}

th {
  color: #83929a;
  white-space: nowrap;
  background: #f7f9fa;
  padding: 16px 22px;
  font-size: 11px;
  font-weight: 500;
}

td {
  color: #565f7e;
  border-top: 1px solid #edf1f3;
  padding: 20px 22px;
}

td strong {
  color: #232b47;
}

td code {
  overflow-wrap: anywhere;
  font-size: 11px;
}

.table-subtitle {
  color: #92a0a6;
  margin-top: 4px;
  font-size: 11px;
  display: block;
}

.table-actions {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.table-actions .button {
  min-height: 31px;
  padding: 5px 9px;
  font-size: 11px;
}

.pagination {
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: 13px;
  display: flex;
}

.pagination .button {
  min-height: 34px;
  font-size: 12px;
}

.active-session {
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  display: flex;
}

.active-session > div {
  flex: 1;
}

.profile-panel {
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
  display: flex;
}

.profile-panel h2, .profile-panel h3 {
  margin-bottom: 6px;
}

.profile-panel p {
  color: var(--muted);
  margin-bottom: 8px;
  font-size: 14px;
}

.profile-panel .details {
  margin-left: auto;
}

.avatar.large {
  width: 65px;
  height: 65px;
  font-size: 24px;
}

.profile-settings {
  margin-bottom: 24px;
}

.profile-settings h3 {
  margin-bottom: 18px;
  font-size: 15px;
}

.settings-grid {
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  display: grid;
}

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

.settings-block {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.settings-row {
  gap: 10px;
}

.settings-block .input {
  width: 100%;
}

.field-label {
  color: var(--muted);
  letter-spacing: .3px;
  font-size: 12px;
  font-weight: 600;
}

.form-ok {
  color: #4338ca;
  background: #4f46e514;
  border: 1px solid #4f46e533;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.loading {
  min-height: 200px;
  color: var(--muted);
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  display: flex;
}

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

.error-state {
  color: #a4714d;
  background: #fffbf7;
  border: 1px solid #efdcd0;
  border-radius: 10px;
  align-items: center;
  gap: 15px;
  margin: 18px 0;
  padding: 21px 24px;
  display: flex;
}

.error-state > svg {
  flex-shrink: 0;
}

.error-state > div {
  flex: 1;
}

.error-state strong {
  font-size: 14px;
}

.error-state p {
  margin: 4px 0 0;
  font-size: 13px;
}

.notice {
  color: #7180c0;
  background: #eef5f2;
  border-radius: 8px;
  padding: 15px 18px;
  font-size: 13px;
  line-height: 1.8;
}

.form-error {
  color: #b44d4d;
  overflow-wrap: anywhere;
  margin: 10px 0;
  font-size: 13px;
}

.auth-divider {
  color: var(--muted);
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  font-size: 12px;
  display: flex;
}

.auth-divider:before, .auth-divider:after {
  content: "";
  background: var(--line);
  flex: 1;
  height: 1px;
}

.auth-divider span {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.google-btn {
  color: #1e2437;
  cursor: pointer;
  background: linear-gradient(135deg, #fff 0%, #f4f7fe 55%, #eef4ff 100%);
  border: 1px solid #dfe5ef;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, border-color .2s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px #1018280d;
}

.google-btn:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(100deg, #0000 0%, #ffffffe6 50%, #0000 100%);
  width: 50%;
  height: 100%;
  transition: left .55s;
  position: absolute;
  top: 0;
  left: -80%;
  transform: skewX(-20deg);
}

.google-btn:hover {
  border-color: #b8c6f5;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #6366f129, 0 2px 6px #1018280d;
}

.google-btn:hover:after {
  left: 130%;
}

.google-btn:active {
  transition-duration: 60ms;
  transform: translateY(0)scale(.97);
  box-shadow: 0 1px 3px #1018281f;
}

.google-btn.ready:hover .google-logo {
  animation: .45s google-pop;
}

.google-btn.pending {
  background: linear-gradient(135deg, #fbfcfe 0%, #f3f5f9 100%);
}

@keyframes google-pop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.22)rotate(-8deg);
  }

  100% {
    transform: scale(1);
  }
}

.google-logo {
  flex: none;
  transition: transform .2s;
}

.google-soon-badge {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7a8699;
  background: #eef1f6;
  border: 1px solid #e0e5ec;
  border-radius: 999px;
  margin-left: auto;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
  animation: .6s badge-fade-in;
}

@keyframes badge-fade-in {
  from {
    opacity: 0;
    transform: translateX(6px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.google-notice {
  color: #92400e;
  background: linear-gradient(135deg, #fffbeb, #fef9ec);
  border: 1px solid #fde68a;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.45;
  animation: .35s cubic-bezier(.21, 1.02, .73, 1) notice-in, .5s .35s notice-shake;
  display: flex;
}

.google-notice-dot {
  background: #f59e0b;
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  animation: 1.6s infinite pulse-dot;
}

@keyframes notice-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes notice-shake {
  0%, 100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-5px);
  }

  40% {
    transform: translateX(5px);
  }

  60% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(3px);
  }
}

.action-wrap {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.action-wrap .form-error {
  max-width: 330px;
}

.modal {
  border: 1px solid var(--line);
  width: min(720px, 100vw - 36px);
  max-height: 88vh;
  color: var(--text);
  background: #fff;
  border-radius: 16px;
  margin: auto;
  padding: 27px;
  position: fixed;
  inset: 0;
  overflow: auto;
  box-shadow: 0 25px 100px #0b102340;
}

.modal::backdrop {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #11182f80;
}

.modal > .between {
  margin-bottom: 20px;
}

.modal > .between h2 {
  margin: 0;
}

.modal > p {
  color: var(--muted);
  font-size: 14px;
}

.modal-actions {
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  display: flex;
}

.field {
  color: #5a6480;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}

.field input, .field textarea, .field select {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
}

.form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  display: grid;
}

.span-two {
  grid-column: span 2;
}

.mono {
  font-family: Consolas, Courier New, monospace;
  font-size: 13px !important;
}

.route-tabs {
  border-bottom: 1px solid var(--line);
  gap: 25px;
  margin-bottom: 25px;
  display: flex;
}

.route-tabs a {
  color: var(--muted);
  padding: 12px 0;
  font-size: 14px;
}

.route-tabs a.selected {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

.group-select {
  max-width: 400px;
  margin-bottom: 25px;
}

.group-heading {
  align-items: center;
  gap: 12px;
  margin: 25px 0;
  display: flex;
}

.group-heading h2 {
  margin: 0;
}

.group-heading > span {
  color: var(--muted);
  margin-left: auto;
  font-size: 13px;
}

.stats-grid.compact {
  grid-template-columns: 1fr 1fr;
}

.workspace-heading {
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-bottom: 25px;
  display: flex;
}

.workspace-heading h1 {
  font-size: 26px;
}

.workspace-heading .back-link {
  margin-bottom: 10px;
}

.timer {
  border: 1px solid var(--line);
  white-space: nowrap;
  background: #fff;
  border-radius: 9px;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: Consolas, monospace;
  font-size: 21px;
  display: flex;
}

.timer small {
  color: var(--muted);
  font-family: Segoe UI, sans-serif;
  font-size: 11px;
}

.workspace-grid {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  grid-template-columns: 210px minmax(260px, 1fr) minmax(280px, 1fr);
  min-height: 580px;
  display: grid;
  overflow: hidden;
}

.task-sidebar {
  border-right: 1px solid var(--line);
  background: #f9fbfb;
}

.task-sidebar-heading {
  border-bottom: 1px solid var(--line);
  padding: 23px 18px;
}

.task-sidebar-heading h2 {
  font-size: 16px;
}

.task-nav-item {
  text-align: left;
  color: #6e868f;
  background: none;
  border-bottom: 1px solid #e9efee;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 18px 16px;
  font-size: 12px;
  display: flex;
}

.task-nav-item.selected {
  color: #4338ca;
  background: #e8ebfb;
  border-left: 3px solid #6366f1;
  padding-left: 13px;
}

.task-nav-item svg {
  flex-shrink: 0;
  margin-top: 3px;
}

.task-nav-item small {
  opacity: .75;
  margin-bottom: 4px;
  font-size: 10px;
  display: block;
}

.task-main {
  min-width: 0;
}

.task-content {
  padding: 26px 23px;
}

.task-content h2 {
  margin: 21px 0 14px;
}

.task-content p {
  color: #6c8088;
  font-size: 13px;
  line-height: 1.85;
}

.preserve-lines {
  white-space: pre-line;
}

.task-section {
  margin: 22px 0;
}

.task-section h3 {
  font-size: 14px;
}

.task-section .plain-list {
  padding-left: 18px;
  font-size: 13px;
}

.task-form {
  flex-direction: column;
  gap: 17px;
  display: flex;
}

.task-form .button {
  align-self: flex-start;
  font-size: 12px;
}

.hint-section {
  border-top: 1px solid var(--line);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 25px;
  padding-top: 20px;
  display: flex;
}

.hint-section > small {
  font-size: 10px;
}

.hint-section .button {
  font-size: 12px;
}

.upload-control {
  background: #f5f8f7;
  border-radius: 8px;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  display: flex;
}

.upload-control input {
  font-size: 11px !important;
}

.terminal-panel {
  color: #94b4b9;
  background: #101e35;
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.terminal-header {
  background: #16203a;
  border-bottom: 1px solid #252d49;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 18px 17px;
  font-size: 12px;
  display: flex;
}

.terminal-header > span {
  align-items: center;
  gap: 9px;
  display: flex;
}

.terminal-tabs {
  align-items: center;
  gap: 6px;
  display: flex;
}

.terminal-tabs .button {
  padding: 5px 12px;
  font-size: 11px;
}

.lang-switch {
  color: #cfe3ea;
  cursor: pointer;
  background: #101c33;
  border: 1px solid #252d49;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
}

.lang-switch:focus {
  outline-offset: 1px;
  outline: 2px solid #818cf8;
}

.terminal-empty {
  text-align: center;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 30px 25px;
  display: flex;
}

.terminal-empty > svg {
  color: #557580;
  margin-bottom: 23px;
}

.terminal-empty h3 {
  color: #a7c1c6;
  font-size: 15px;
}

.terminal-empty p {
  color: #78969f;
  font-size: 12px;
  line-height: 1.9;
}

.terminal-panel iframe {
  background: #fff;
  border: 0;
  flex: 1;
  width: 100%;
  min-height: 500px;
}

.workspace-footer {
  color: #6e858b;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 18px 0;
  font-size: 12px;
  display: flex;
}

.result-hero {
  background: #eef1fc;
  border: 1px solid #dfe3fb;
  border-radius: 14px;
  align-items: center;
  gap: 45px;
  margin-bottom: 25px;
  padding: 38px;
  display: flex;
}

.result-hero p {
  color: #8496e4;
  font-size: 14px;
}

.score-ring {
  background: conic-gradient(#6366f1 var(--score), #dfe3f8 0);
  border-radius: 50%;
  flex-shrink: 0;
  width: 170px;
  height: 170px;
  padding: 10px;
}

.score-ring > div {
  background: #e9f5ef;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.score-ring strong {
  color: #4c5c9e;
  font-size: 49px;
  line-height: 1.1;
}

.score-ring span {
  color: #8293de;
  margin-top: 8px;
  font-size: 12px;
}

.result-task {
  border-bottom: 1px solid var(--line);
  padding-bottom: 15px;
  font-size: 14px;
}

.result-task p {
  margin: 8px 0 0;
  font-size: 13px;
}

.auth-page {
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  display: grid;
}

:root {
  --hero-amber: #fbbf24;
  --hero-ink: #0b0f2a;
}

.auth-hero {
  color: #d8dcf5;
  background: linear-gradient(155deg, #0b0f2a 0%, #12173a 48%, #1a1440 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.hero-aurora {
  filter: blur(95px);
  opacity: .5;
  will-change: transform;
  border-radius: 50%;
  position: absolute;
}

.hero-aurora-1 {
  background: radial-gradient(circle at 35% 35%, #6366f173, #4338ca2e 55%, #0000 75%);
  width: 46vw;
  height: 46vw;
  animation: 40s ease-in-out infinite alternate aurora-drift-1;
  top: -16vw;
  left: -12vw;
}

.hero-aurora-2 {
  background: radial-gradient(circle at 60% 40%, #fbbf2438, #d946ef1a 58%, #0000 75%);
  width: 38vw;
  height: 38vw;
  animation: 48s ease-in-out infinite alternate aurora-drift-3;
  bottom: -14vw;
  right: -10vw;
}

.hero-grid {
  background-image: linear-gradient(#818cf80f 1px, #0000 1px), linear-gradient(90deg, #818cf80f 1px, #0000 1px);
  background-size: 44px 44px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, #0000 78%);
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, #0000 78%);
}

.hero-radar {
  background: conic-gradient(#818cf800 0deg, #818cf847 42deg, #fbbf2429 58deg, #818cf800 80deg);
  border-radius: 50%;
  width: 440px;
  height: 440px;
  animation: 6.5s linear infinite hero-radar-spin;
  position: absolute;
  top: -150px;
  right: -150px;
  -webkit-mask: radial-gradient(circle, #0000 26%, #000 27% 60%, #0000 61%);
  mask: radial-gradient(circle, #0000 26%, #000 27% 60%, #0000 61%);
}

@keyframes hero-radar-spin {
  to {
    transform: rotate(360deg);
  }
}

.hero-scan {
  background: linear-gradient(90deg, #0000 5%, #818cf866 45%, #fbbf244d 55%, #0000 95%);
  height: 2px;
  animation: 7.5s ease-in-out infinite hero-scan;
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
}

@keyframes hero-scan {
  0% {
    opacity: 0;
    top: 4%;
  }

  8% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: 96%;
  }
}

.hero-inner {
  z-index: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  height: 100%;
  min-height: 100vh;
  padding: 44px 65px 40px;
  display: flex;
  position: relative;
}

.hero-top {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  display: flex;
}

.auth-hero .brand {
  color: #eef1ff;
}

.auth-hero .brand small {
  color: #8b96c9;
}

.hero-status {
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #a5b4fc;
  background: #6366f11a;
  border: 1px solid #a5b4fc47;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: JetBrains Mono, ui-monospace, monospace;
  font-size: 10.5px;
  display: inline-flex;
}

.hero-status i {
  background: #fbbf24;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 2s ease-in-out infinite hero-status-pulse;
}

@keyframes hero-status-pulse {
  0%, 100% {
    box-shadow: 0 0 #fbbf2480;
  }

  50% {
    box-shadow: 0 0 0 6px #fbbf2400;
  }
}

.hero-body {
  max-width: 560px;
}

.hero-eyebrow {
  letter-spacing: 2.4px;
  color: #fcd34dd9;
  margin-bottom: 20px;
  font-family: JetBrains Mono, ui-monospace, monospace;
  font-size: 10.5px;
}

.hero-title {
  letter-spacing: -2px;
  color: #f4f6ff;
  margin: 0 0 22px;
  font-size: 58px;
  font-weight: 800;
  line-height: 1.16;
}

.hero-title em {
  background: linear-gradient(92deg, #c7d2fe, #fbbf24 130%);
  -webkit-text-fill-color: transparent;
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}

.scramble {
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

.hero-mission {
  color: #aab6dd;
  max-width: 470px;
  margin: 0 0 30px;
  font-size: 15.5px;
  line-height: 1.85;
}

.hero-cta {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  display: flex;
}

.hero-enter {
  color: #fff;
  background: linear-gradient(120deg, #4f46e5 0%, #6d5bd0 55%, #4f46e5 100%) 0 0 / 180% 100%;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-size: 15px;
  font-weight: 700;
  transition: background-position .5s, transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
  animation: 4.5s ease-in-out infinite hero-enter-glow;
  display: inline-flex;
  box-shadow: 0 6px 24px #4f46e561, inset 0 1px #ffffff2e;
}

@keyframes hero-enter-glow {
  0%, 100% {
    box-shadow: 0 6px 24px #4f46e561, inset 0 1px #ffffff2e;
  }

  50% {
    box-shadow: 0 8px 34px #4f46e58c, inset 0 1px #ffffff2e;
  }
}

.hero-enter:hover {
  background-position: 95% 0;
  animation-play-state: paused;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px #4f46e599;
}

.hero-enter:active {
  transition-duration: 70ms;
  transform: translateY(0)scale(.97);
}

.hero-enter-icon {
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
  display: inline-flex;
}

.hero-enter:hover .hero-enter-icon {
  transform: translateX(5px);
}

.hero-start {
  color: #c7d2fe;
  background: #6366f112;
  border: 1px solid #a5b4fc52;
  border-radius: 12px;
  align-items: center;
  padding: 15px 24px;
  font-size: 14.5px;
  font-weight: 600;
  transition: background .25s, border-color .25s, transform .18s cubic-bezier(.34, 1.56, .64, 1);
  display: inline-flex;
}

.hero-start:hover {
  background: #6366f129;
  border-color: #a5b4fc8c;
  transform: translateY(-2px);
}

.hero-start:active {
  transition-duration: 70ms;
  transform: scale(.97);
}

.hero-boot {
  border-left: 2px solid #a5b4fc38;
  flex-direction: column;
  gap: 7px;
  margin-top: 38px;
  padding-left: 15px;
  display: flex;
}

.hero-boot span {
  letter-spacing: .4px;
  color: #7d88bd;
  font-family: JetBrains Mono, ui-monospace, monospace;
  font-size: 11.5px;
}

.hero-foot {
  letter-spacing: 1.4px;
  color: #6b76ab;
  text-transform: uppercase;
  font-size: 10.5px;
}

.hero-rise {
  animation: .8s cubic-bezier(.21, 1.02, .73, 1) backwards rise-in;
}

@media (max-width: 980px) {
  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-hero {
    min-height: 62vh;
  }

  .hero-title {
    font-size: 42px;
  }

  .hero-inner {
    padding: 32px 28px;
  }
}

.auth-form-side {
  background: linear-gradient(#f7f8fd, #f2f4fb);
  flex-direction: column;
  justify-content: space-between;
  gap: 35px;
  padding: 50px 65px;
  display: flex;
}

.auth-form-side > .back-link {
  align-self: flex-start;
}

.auth-form {
  width: 100%;
  max-width: 380px;
  margin: auto;
}

.auth-symbol {
  color: #5a6ec8;
  background: #e4f1eb;
  border-radius: 17px;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  margin-bottom: 23px;
  display: inline-flex;
}

.auth-form h2 {
  margin-bottom: 12px;
  font-size: 30px;
}

.auth-form > p {
  color: #7f8dca;
  font-size: 14px;
  line-height: 1.9;
}

.auth-form > .notice {
  margin: 24px 0;
}

.auth-form > .button {
  width: 100%;
  margin-top: 10px;
}

.auth-security {
  color: #90a0ea;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 17px 0 30px;
  font-size: 10px;
  display: flex;
}

.auth-switch {
  text-align: center;
  color: #8796e2;
  border-top: 1px solid #e1eae5;
  padding-top: 25px;
  font-size: 13px;
}

.auth-switch a, .reset-link {
  color: #576bc0;
  font-weight: 600;
}

.reset-link {
  text-align: center;
  margin: 20px 0;
  font-size: 12px;
  display: block;
}

.auth-form-side > small {
  text-align: center;
  font-size: 11px;
}

.mobile-toggle, .mobile-close, .nav-overlay {
  display: none;
}

.skip-link {
  z-index: 100;
  color: var(--accent);
  background: #fff;
  padding: 10px;
  position: fixed;
  top: -100px;
  left: 20px;
}

.skip-link:focus {
  top: 10px;
}

@media (min-width: 1600px) {
  .main-content {
    padding: 40px 55px;
  }

  .welcome-banner {
    min-height: 300px;
  }

  .welcome-banner h2 {
    font-size: 35px;
  }

  .welcome-banner p {
    font-size: 15px;
  }

  .direction-card {
    padding: 26px 28px 0;
  }

  .direction-card p {
    font-size: 14px;
  }

  .topic-tags span {
    font-size: 11px;
  }

  .direction-footer {
    font-size: 13px;
  }

  .stat .between {
    font-size: 14px;
  }

  .stat > small {
    font-size: 12px;
  }
}

@media (max-width: 1200px) {
  .sidebar {
    width: 224px;
    padding: 28px 16px 0;
  }

  .brand {
    gap: 8px;
    font-size: 22px;
  }

  .brand small {
    letter-spacing: 1px;
    font-size: 7px;
  }

  .main-shell {
    margin-left: 224px;
  }

  .main-content {
    padding: 28px 25px;
  }

  .topbar {
    padding: 0 25px;
  }

  .page-heading h1 {
    font-size: 26px;
  }

  .page-heading > .button {
    display: none;
  }

  .welcome-banner {
    padding: 27px;
  }

  .welcome-banner h2 {
    font-size: 26px;
  }

  .banner-mark {
    width: 225px;
    margin-right: -10px;
  }

  .orbit-three {
    width: 285px;
  }

  .label-two {
    right: -8px;
  }

  .label-one {
    left: 0;
  }

  .label-three {
    left: 30px;
  }

  .direction-card {
    padding: 18px 18px 0;
  }

  .direction-card h3 {
    font-size: 16px;
  }

  .direction-card p {
    font-size: 12px;
  }

  .stats-grid {
    gap: 11px;
  }

  .stat {
    padding: 17px 14px;
  }

  .stat .between {
    font-size: 11px;
  }

  .stat .between svg {
    width: 16px;
  }

  .stat > small {
    font-size: 9px;
  }

  .stat > strong {
    font-size: 26px;
  }

  .dashboard-bottom {
    grid-template-columns: 1.5fr 1fr;
  }

  .workspace-grid {
    grid-template-columns: 190px 1fr;
  }

  .terminal-panel {
    grid-column: span 2;
    min-height: 350px;
  }

  .terminal-panel iframe {
    min-height: 500px;
  }

  .auth-story, .auth-form-side {
    padding: 40px;
  }

  .auth-story h1 {
    font-size: 47px;
  }
}

@media (max-width: 950px) {
  .direction-grid {
    gap: 12px;
  }

  .main-content {
    padding: 25px 20px;
  }

  .banner-mark {
    display: none;
  }

  .welcome-banner {
    min-height: 260px;
  }

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

  .stat .between {
    font-size: 13px;
  }

  .stat > small {
    font-size: 11px;
  }

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

  .direction-card {
    grid-template-columns: 55px 1fr;
    column-gap: 14px;
    padding: 20px;
    display: grid;
  }

  .direction-card > .between {
    grid-row: span 3;
    align-items: flex-start;
  }

  .direction-number {
    display: none;
  }

  .direction-card h3 {
    margin: 0 0 5px;
    font-size: 18px;
  }

  .direction-card p {
    max-width: none;
    margin: 0 0 10px;
  }

  .topic-tags {
    min-height: 0;
    margin: 0;
  }

  .direction-footer {
    grid-column: 2;
    margin-top: 15px;
    padding-bottom: 0;
  }

  .dashboard-bottom {
    grid-template-columns: 1fr;
  }

  .learning-card p {
    max-width: 450px;
  }

  .learning-note {
    margin-top: 20px;
  }

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

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

  .start-panel {
    position: static;
  }

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

  .steps {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .environment-label {
    display: none;
  }

  .auth-story h1 {
    font-size: 40px;
  }

  .auth-story, .auth-form-side {
    padding: 32px;
  }

  .workspace-grid {
    grid-template-columns: 170px 1fr;
  }

  .result-hero {
    gap: 25px;
    padding: 25px;
  }
}

@media (max-width: 720px) {
  .sidebar {
    visibility: hidden;
    width: 254px;
    transition: transform .2s;
    transform: translateX(-100%);
  }

  .sidebar.is-open {
    visibility: visible;
    transform: translateX(0);
  }

  .main-shell {
    margin-left: 0;
  }

  .mobile-toggle {
    padding: 5px;
    display: inline-flex;
  }

  .mobile-close {
    color: #c3cdf5;
    background: none;
    padding: 3px;
    display: block;
  }

  .sidebar-top {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .nav-overlay {
    z-index: 25;
    background: #0e1a3380;
    display: block;
    position: fixed;
    inset: 0;
  }

  .topbar {
    height: 63px;
    padding: 0 18px;
  }

  .topbar > .inline {
    gap: 9px;
  }

  .main-content {
    padding: 25px 18px;
  }

  .page-heading {
    margin-bottom: 23px;
  }

  .page-heading h1 {
    font-size: 25px;
  }

  .page-heading p {
    font-size: 13px;
  }

  .eyebrow {
    font-size: 9px;
  }

  .welcome-banner {
    min-height: 270px;
    padding: 25px;
  }

  .welcome-banner h2 {
    font-size: 25px;
  }

  .welcome-banner p {
    font-size: 12px;
  }

  .desktop-break {
    display: none;
  }

  .stats-grid {
    gap: 10px;
    margin: 17px 0 26px;
  }

  .stat > strong {
    font-size: 28px;
  }

  .stat .between {
    font-size: 11px;
  }

  .stat > small {
    font-size: 10px;
  }

  .section-title h2 {
    max-width: 240px;
    font-size: 17px;
  }

  .section-title > a {
    font-size: 11px;
  }

  .panel {
    padding: 21px;
  }

  .table-wrap {
    padding: 0;
  }

  .footer {
    margin: 0 18px;
    font-size: 10px;
  }

  .direction-grid {
    gap: 13px;
  }

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

  .catalog-subline {
    flex-direction: column;
    align-items: flex-start;
  }

  .tabs button {
    padding: 7px 11px;
    font-size: 12px;
  }

  .catalog-filters {
    gap: 7px;
  }

  .catalog-filters select {
    max-width: 180px;
  }

  .error-state {
    flex-wrap: wrap;
    padding: 18px;
  }

  .error-state > .button {
    margin-left: 34px;
  }

  .detail-grid {
    gap: 17px;
  }

  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-story {
    padding: 26px;
  }

  .auth-story > div:not(.brand), .auth-story > small {
    display: none;
  }

  .auth-story {
    gap: 0;
  }

  .auth-story .brand {
    font-size: 25px;
  }

  .auth-form-side {
    min-height: calc(100vh - 94px);
    padding: 27px;
  }

  .workspace-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .workspace-heading h1 {
    font-size: 23px;
  }

  .timer {
    font-size: 19px;
  }

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

  .task-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .task-sidebar nav {
    display: flex;
    overflow: auto;
  }

  .task-nav-item {
    border-bottom: 0;
    width: auto;
    min-width: 160px;
  }

  .task-nav-item.selected {
    border-bottom: 3px solid #6366f1;
    border-left: 0;
    padding-left: 16px;
  }

  .task-sidebar-heading {
    padding: 16px;
  }

  .task-sidebar-heading h2 {
    margin-bottom: 9px;
  }

  .terminal-panel {
    grid-column: 1;
  }

  .task-content {
    padding: 23px;
  }

  .workspace-footer {
    flex-wrap: wrap;
  }

  .result-hero {
    text-align: center;
    flex-direction: column;
  }

  .result-hero h2 {
    font-size: 23px;
  }

  .result-hero p br {
    display: none;
  }

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

  .span-two {
    grid-column: 1;
  }

  .modal {
    padding: 22px;
  }

  .modal-actions, .group-heading {
    flex-wrap: wrap;
  }

  .group-heading > span {
    margin-left: 0;
  }

  .active-session {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-panel .details {
    width: 100%;
    margin-left: 0;
  }

  .pagination {
    gap: 10px;
  }

  .pagination > .inline {
    gap: 7px;
  }

  .filter-input {
    flex: 1;
    max-width: none;
  }

  .catalog-toolbar > .button {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

.range-terminal {
  color: #d7e0f4;
  background: #0b1020;
  flex-direction: column;
  height: 100vh;
  font-size: 14px;
  display: flex;
}

.range-terminal-header {
  background: #111831;
  border-bottom: 1px solid #232c4d;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
  display: flex;
}

.range-terminal-body {
  flex: 1;
  padding: 16px;
  line-height: 1.5;
  overflow-y: auto;
}

.term-prompt {
  color: #818cf8;
  font-weight: 600;
}

.term-err {
  color: #fca5a5;
}

.term-input-row {
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.term-input-row input {
  color: #d7e0f4;
  font: inherit;
  background: none;
  border: none;
  outline: none;
  flex: 1;
}

@media (max-width: 640px) {
  .range-terminal {
    font-size: 13px;
  }
}

.arena-card {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.arena-timer {
  color: #dc2626;
  font-weight: 700;
}

.arena-teams {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.arena-topology svg text {
  -webkit-user-select: none;
  user-select: none;
}

.arena-vs {
  color: var(--muted);
  font-weight: 800;
}

.team-chip {
  border: 1px solid var(--line);
  background: #f2f5f6;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  display: flex;
}

.team-chip.mine {
  outline: 2px solid var(--accent);
}

.team-red {
  border-color: #ef444466;
}

.team-blue {
  border-color: #3b82f666;
}

.team-role {
  letter-spacing: .06em;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
}

.team-red .team-role {
  color: #dc2626;
  background: #ef444426;
}

.team-blue .team-role {
  color: #60a5fa;
  background: #3b82f626;
}

.team-name {
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
}

.team-score {
  font-size: 16px;
  font-weight: 800;
}

.arena-goals {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}

.arena-goal-block {
  border: 1px solid var(--line);
  background: #f2f5f6;
  border-radius: 12px;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  display: flex;
}

.arena-goal-block h4 {
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 4px;
  font-size: 13px;
}

.arena-goal-block h4.red-t {
  color: #dc2626;
}

.arena-goal-block h4.blue-t {
  color: #60a5fa;
}

.goal-row {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  display: flex;
}

.goal-row.ok {
  color: var(--text);
}

.goal-row .goal-mark {
  width: 16px;
  font-weight: 800;
}

.goal-row.ok .goal-mark {
  color: #4f46e5;
}

.goal-row.pend .goal-mark {
  color: #d97706;
}

.arena-workspace {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.arena-frame {
  border: 1px solid var(--line);
  background: #000;
  border-radius: 12px;
  width: 100%;
  height: 520px;
}

.arena-submit, .arena-staff {
  border-top: 1px dashed var(--line);
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  display: flex;
}

.chip-select {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #f2f5f6;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  display: inline-flex;
}

.chip-select.on {
  border-color: var(--accent);
  background: #38bdf81a;
}

.chip-select input {
  display: none;
}

.course-list {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.course-card {
  padding: 0;
  overflow: hidden;
}

.course-card-head {
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--text);
  background: none;
  border: none;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  display: flex;
}

.course-card-head:hover {
  background: #f2f5f6;
}

.course-icon {
  width: 44px;
  height: 44px;
  color: var(--accent);
  background: #38bdf81f;
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.course-meta h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.course-meta p {
  color: var(--muted);
  margin: 0 0 6px;
  font-size: 14px;
}

.chev {
  color: var(--muted);
  margin-left: auto;
  transition: transform .15s;
}

.chev.open {
  transform: rotate(90deg);
}

.course-detail {
  border-top: 1px solid var(--line);
  background: #f2f5f6;
  padding: 18px;
}

.module-block {
  margin-bottom: 14px;
}

.module-title {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 0 8px;
  font-size: 14px;
}

.lesson-rows {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.lesson-row {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  display: flex;
}

.lesson-row:hover {
  border-color: var(--accent);
}

.lesson-play {
  color: var(--accent);
  flex-shrink: 0;
}

.lesson-xp {
  color: #d97706;
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 12.5px;
  display: inline-flex;
}

.lesson-card {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.lesson-title {
  margin: 0;
  font-size: 19px;
}

.lesson-theory p {
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.65;
}

.lesson-theory .theory-text {
  color: #37415c;
  background: #f4f5fa;
  border: 1px solid #e4e7f2;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  overflow-x: auto;
}

.term-row {
  background: #6366f10f;
  border-left: 3px solid #818cf8;
  border-radius: 6px;
  margin-bottom: 6px;
  padding: 8px 12px;
  font-size: 14px;
}

.term-row strong {
  color: #4338ca;
}

.term-row span {
  color: #4a5470;
}

.lesson-pre {
  color: #d7e0f4;
  background: #0b1020;
  border-radius: 10px;
  padding: 14px;
  font-size: 13px;
  overflow-x: auto;
}

.quiz-block {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.quiz-q {
  margin: 0 0 6px;
  font-weight: 600;
}

.quiz-opt {
  border: 1px solid var(--line);
  cursor: pointer;
  border-radius: 10px;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.quiz-opt:hover {
  border-color: var(--accent);
}

.quiz-opt input {
  margin-top: 3px;
}

.lesson-input {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.lesson-lab {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.lesson-done {
  background: #4f46e50f;
  border-color: #4f46e5;
}

.lesson-done .inline {
  color: #4f46e5;
}

.rank-medal {
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-weight: 800;
  display: inline-flex;
}

.rank-1 {
  color: #f59e0b;
  background: #fbbf2426;
}

.rank-2 {
  color: #94a3b8;
  background: #94a3b826;
}

.rank-3 {
  color: #d97706;
  background: #d9770626;
}

.rank-num {
  color: var(--muted);
  font-weight: 700;
}

.level-chip {
  color: var(--accent);
  background: #38bdf81f;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12.5px;
  font-weight: 800;
}

.feedback {
  border-radius: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
}

.feedback.ok {
  color: #3f37c9;
  background: #4f46e51a;
  border: 1px solid #4f46e559;
}

.feedback.fail {
  color: #b91c1c;
  background: #dc262614;
  border: 1px solid #dc26264d;
}

.feedback.pending {
  color: #b45309;
  background: #d977061a;
  border: 1px solid #d9770659;
}

.feedback.inline {
  align-items: center;
  margin-top: 0;
  display: inline-flex;
}

.spin {
  animation: 1s linear infinite spin;
}

.field {
  color: var(--muted);
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  display: flex;
}

.library-groups {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.library-group-title {
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  display: flex;
}

.library-items {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  display: grid;
}

.library-item {
  border: 1px solid var(--line);
  color: inherit;
  background: #f7f9fa;
  border-radius: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  text-decoration: none;
  position: relative;
}

.library-item:hover {
  border-color: var(--accent);
  background: #eef4ff;
}

.library-item-title {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
}

.badge-muted {
  color: #2563eb;
  background: #3b82f61f;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
}

.library-item-link {
  opacity: .5;
  position: absolute;
  top: 12px;
  right: 12px;
}

.library-cheats {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  display: grid;
}

.cheat {
  border: 1px solid var(--line);
  background: #f7f9fa;
  border-radius: 12px;
  padding: 10px 14px;
}

.cheat summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
}

.cheat-pre {
  color: #d7e3f4;
  white-space: pre;
  background: #0f172a;
  border-radius: 10px;
  margin: 10px 0 2px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
}

.tunnel-banner {
  background: #3b82f614;
  border-bottom: 1px solid #3b82f640;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  font-size: 12.5px;
  display: flex;
}

.tunnel-label {
  color: #1d4ed8;
  font-weight: 700;
}

.tunnel-url {
  color: #2563eb;
  word-break: break-all;
  text-decoration: underline;
}

.tunnel-copy {
  cursor: pointer;
  color: #1d4ed8;
  background: #fff;
  border: 1px solid #3b82f666;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 10px;
  font-size: 11px;
  display: inline-flex;
}

.tunnel-copy:hover {
  background: #eef4ff;
}

.tourney-chip {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  font: inherit;
  border-radius: 12px;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  display: flex;
}

.tourney-chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.tourney-chip[data-active="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px #4f46e52e;
}

.tourney-name {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}

.tourney-meta {
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}

.tourney-chip-status {
  color: var(--accent);
  background: #4f46e51f;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.tourney-chip-status[data-status="LIVE"] {
  color: #a16207;
  background: #d99e0a26;
}

.tourney-chip-status[data-status="FINISHED"] {
  color: #71818b;
  background: #eef1f3;
}

.tourney-detail {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.tourney-teams {
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  display: grid;
}

@media (max-width: 720px) {
  .tourney-teams {
    grid-template-columns: 1fr;
  }

  .tourney-score {
    order: -1;
    justify-content: center;
  }
}

.tourney-team {
  border: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 12px;
  padding: 14px 16px;
}

.tourney-score {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 8px;
  font-size: 30px;
  font-weight: 700;
  display: flex;
}

.tourney-score span:first-child {
  color: #c0392b;
}

.tourney-score span:last-child {
  color: #2563eb;
}

.tourney-score .colon {
  color: var(--muted);
  font-size: 18px;
  font-weight: 400;
}

.tourney-players li {
  list-style: outside;
}

.tourney-match-status {
  color: var(--muted);
  font-size: 11px;
}

.tourney-match-row {
  border-bottom: 1px dashed var(--line);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  display: flex;
}

.tourney-match-row:last-child {
  border-bottom: none;
}

.tourney-winner {
  color: var(--accent);
  background: #4f46e51a;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
}

.tourney-winner.tie {
  color: var(--muted);
  background: #eef1f3;
}

.tourney-in-match {
  color: #a16207;
  background: #d99e0a26;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
}

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

.cyberscore-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.cyberscore-head .panel-title {
  margin: 2px 0 6px;
  font-size: 20px;
}

.cyberscore-head .panel-sub {
  color: var(--muted, #667085);
  max-width: 520px;
  margin: 0;
  font-size: 13.5px;
}

.cyberscore-total {
  text-align: right;
  flex-shrink: 0;
}

.cyberscore-value {
  letter-spacing: -1px;
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}

.cyberscore-max {
  color: var(--muted, #667085);
  -webkit-text-fill-color: var(--muted, #667085);
  font-size: 15px;
  font-weight: 600;
}

.cyberscore-level {
  color: #414d68;
  background: #eef2f6;
  border-radius: 999px;
  margin-top: 7px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.cyberscore-level.level-low {
  color: #b42318;
  background: #fee4e2;
}

.cyberscore-level.level-moderate {
  color: #b54708;
  background: #fef0c7;
}

.cyberscore-level.level-high {
  color: #3730a3;
  background: #e0e7ff;
}

.cyberscore-level.level-expert {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
}

.cyberscore-dims {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 22px;
  display: grid;
}

.cyberscore-dim-top {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  display: flex;
}

.cyberscore-dim-name {
  color: var(--muted, #414d68);
  font-size: 13px;
  font-weight: 600;
}

.cyberscore-dim-val {
  font-size: 15px;
  font-weight: 800;
}

.cyberscore-dim-val.none {
  color: #98a2b3;
  font-size: 11.5px;
  font-weight: 600;
}

.cs-bar {
  background: #eef2f6;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.cs-bar-fill {
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  border-radius: 999px;
  height: 100%;
  transition: width .5s;
}

.cyberscore-recs {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.cyberscore-rec {
  color: #2c3550;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 10px;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 14px;
  font-size: 13px;
  display: flex;
}

.cyberscore-rec svg {
  color: #4f46e5;
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .cyberscore-head {
    flex-direction: column;
  }

  .cyberscore-total {
    text-align: left;
  }
}

.lab-queue {
  color: #312e81;
  background: #f4f5ff;
  border: 1px solid #dfe3fb;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 12px 18px;
  font-size: 13.5px;
  display: flex;
}

.lab-queue.full {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

.lab-queue-dot {
  background: #4f46e5;
  border-radius: 50%;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  animation: 2s infinite pulse-dot;
}

.lab-queue.full .lab-queue-dot {
  background: #f59e0b;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .45;
  }
}

.lab-queue em {
  color: #667085;
  font-size: 12.5px;
  font-style: normal;
}

.ttl-warning {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
}

.workspace-lab-actions {
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  display: flex;
}

.lab-paused-hint {
  color: #667085;
  font-size: 12.5px;
}

.citizen-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  display: grid;
}

.citizen-card {
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.citizen-card:hover {
  border-color: #98a6ff;
  box-shadow: 0 4px 16px #0f172a0f;
}

.citizen-card h3 {
  margin: 0;
  font-size: 16px;
}

.citizen-card p {
  color: #667085;
  flex: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.citizen-card-head {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.citizen-dur {
  color: #98a2b3;
  font-size: 12px;
}

.citizen-start {
  color: #444ce7;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
}

.citizen-player {
  max-width: 760px;
  margin: 0 auto;
}

.citizen-video {
  background: #0d1130;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  margin: 16px 0 6px;
  animation: .6s cubic-bezier(.21, 1.02, .73, 1) backwards rise-in;
  overflow: hidden;
}

.citizen-video-head {
  background: linear-gradient(90deg, #10142e, #171c3f);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  display: flex;
}

.citizen-video-badge {
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c7d2fe;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.citizen-video-badge svg {
  color: #818cf8;
}

.citizen-video-link {
  color: #a5b4fc;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s;
  display: inline-flex;
}

.citizen-video-link:hover {
  color: #fff;
}

.citizen-video-frame {
  padding-top: 56.25%;
  position: relative;
}

.citizen-video-frame iframe {
  border: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.citizen-task-head {
  align-items: center;
  gap: 14px;
  margin: 18px 0 12px;
  display: flex;
}

.citizen-task-head h3 {
  letter-spacing: -.3px;
  margin: 0;
  font-size: 17px;
}

.citizen-task-icon {
  background: linear-gradient(140deg, #eef2ff, #e0e7ff 60%, #ede9fe);
  border: 1px solid #dfe3fb;
  border-radius: 14px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 26px;
  animation: .5s cubic-bezier(.34, 1.56, .64, 1) both task-icon-pop;
  display: flex;
  box-shadow: 0 3px 12px #4f46e51a;
}

@keyframes task-icon-pop {
  from {
    opacity: 0;
    transform: scale(.4)rotate(-8deg);
  }

  to {
    opacity: 1;
    transform: scale(1)rotate(0);
  }
}

.citizen-task-meta {
  min-width: 0;
}

.citizen-task-tag {
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #4f46e5;
  background: #4f46e514;
  border: 1px solid #4f46e52e;
  border-radius: 999px;
  margin-bottom: 5px;
  padding: 3px 9px;
  font-family: JetBrains Mono, ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  animation: .5s backwards rise-in;
  display: inline-block;
}

.citizen-situation {
  color: #2c3550;
  background: #f9fafb;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.6;
}

.citizen-options {
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  display: flex;
}

.citizen-option {
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1.5px solid #e4e7ec;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14px;
  line-height: 1.45;
  transition: border-color .12s, background .12s;
}

.citizen-option:hover:not(:disabled) {
  background: #f5f6ff;
  border-color: #98a6ff;
}

.citizen-option.correct {
  background: #eef2ff;
  border-color: #6366f1;
}

.citizen-option.wrong {
  background: #fef3f2;
  border-color: #f04438;
}

.citizen-option.dim {
  opacity: .55;
}

.citizen-option:disabled {
  cursor: default;
}

.citizen-feedback {
  border-radius: 10px;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 15px;
  font-size: 13.5px;
  line-height: 1.5;
  display: flex;
}

.citizen-feedback.ok {
  color: #3730a3;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}

.citizen-feedback.bad {
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
}

.citizen-feedback svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.citizen-result {
  text-align: center;
  padding: 30px 10px;
}

.citizen-result svg {
  color: #4f46e5;
}

.citizen-result h3 {
  margin: 12px 0 4px;
}

body {
  background-color: #0000;
  background-image: radial-gradient(1100px 520px at 88% -8%, #fbbf241a, #0000 60%), radial-gradient(1200px 500px at 85% -10%, #6366f11a, #0000 60%), radial-gradient(900px 420px at -10% 30%, #8b5cf614, #0000 55%), linear-gradient(#f5f7fd 0%, #f6f7fc 40%, #f1f3fb 100%);
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat;
  background-size: auto, auto, auto, auto;
  background-attachment: fixed;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box, border-box;
}

.bgfx {
  z-index: 0;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.bgfx-digital {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.bgfx-aurora {
  filter: blur(110px);
  opacity: .3;
  will-change: transform, filter;
  border-radius: 50%;
  position: absolute;
}

.bgfx-aurora-1 {
  background: radial-gradient(circle at 30% 30%, #a5b4fc80, #6366f129 55%, #0000 75%);
  width: 52vw;
  height: 52vw;
  animation: 44s ease-in-out infinite alternate aurora-drift-1, 60s ease-in-out infinite alternate aurora-hue;
  top: -18vw;
  left: -12vw;
}

.bgfx-aurora-2 {
  background: radial-gradient(circle at 60% 40%, #fcd34d4d, #fb923c1a 55%, #0000 75%);
  width: 44vw;
  height: 44vw;
  animation: 52s ease-in-out infinite alternate aurora-drift-2, 75s ease-in-out infinite alternate-reverse aurora-hue;
  top: 20vh;
  right: -16vw;
}

.bgfx-aurora-3 {
  background: radial-gradient(circle, #e879f947, #a78bfa24 55%, #0000 75%);
  width: 40vw;
  height: 40vw;
  animation: 58s ease-in-out infinite alternate aurora-drift-3, 90s ease-in-out infinite alternate aurora-hue;
  bottom: -16vw;
  left: 30vw;
}

@keyframes aurora-drift-1 {
  0% {
    transform: translate(0)scale(1);
  }

  50% {
    transform: translate(6vw, 4vh)scale(1.12);
  }

  100% {
    transform: translate(-4vw, 8vh)scale(.94);
  }
}

@keyframes aurora-drift-2 {
  0% {
    transform: translate(0)scale(1);
  }

  50% {
    transform: translate(-7vw, -5vh)scale(1.08);
  }

  100% {
    transform: translate(4vw, -9vh)scale(.92);
  }
}

@keyframes aurora-drift-3 {
  0% {
    transform: translate(0)scale(1);
  }

  50% {
    transform: translate(5vw, -6vh)scale(1.15);
  }

  100% {
    transform: translate(-6vw, -3vh)scale(.9);
  }
}

@keyframes aurora-hue {
  0% {
    filter: blur(110px) hue-rotate();
  }

  100% {
    filter: blur(110px) hue-rotate(28deg);
  }
}

.bgfx-grid {
  background-image: linear-gradient(#4f46e509 1px, #0000 1px), linear-gradient(90deg, #4f46e509 1px, #0000 1px);
  background-size: 44px 44px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0, #000 0%, #0000 75%);
  mask-image: radial-gradient(90% 70% at 50% 0, #000 0%, #0000 75%);
}

.bgfx-particle {
  will-change: transform;
  animation-name: particle-float;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  position: absolute;
  bottom: -12px;
}

.bgfx-particle:before {
  content: "";
  background: radial-gradient(circle at 35% 35%, #a5b4fce6, #8b5cf680);
  border-radius: 50%;
  animation: 3.6s ease-in-out infinite particle-twinkle;
  position: absolute;
  inset: 0;
  box-shadow: 0 0 7px #8b5cf673;
}

@keyframes particle-float {
  0% {
    transform: translate(0);
  }

  100% {
    transform: translate(var(--drift, 20px), -108vh);
  }
}

@keyframes particle-twinkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .35;
    transform: scale(.72);
  }
}

.bgfx-glow-line {
  background: linear-gradient(90deg, #0000, #6366f180 30%, #38bdf880 55%, #c084fc73 75%, #0000) 0 0 / 200% 100%;
  height: 2px;
  animation: 14s linear infinite glow-sweep, 7s ease-in-out infinite glow-breathe;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

@keyframes glow-sweep {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes glow-breathe {
  0%, 100% {
    opacity: .75;
  }

  50% {
    opacity: .35;
  }
}

.bgfx + * {
  z-index: 1;
  position: relative;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel, .stat, .card, .citizen-card, .cyberscore-card {
  animation: .55s cubic-bezier(.21, 1.02, .73, 1) backwards rise-in;
}

.section > .panel:nth-child(2), .stats-grid > .stat:nth-child(2), .citizen-grid > .citizen-card:nth-child(2) {
  animation-delay: 60ms;
}

.section > .panel:nth-child(3), .stats-grid > .stat:nth-child(3), .citizen-grid > .citizen-card:nth-child(3) {
  animation-delay: .12s;
}

.section > .panel:nth-child(4), .stats-grid > .stat:nth-child(4), .citizen-grid > .citizen-card:nth-child(4) {
  animation-delay: .18s;
}

.section > .panel:nth-child(5), .stats-grid > .stat:nth-child(5), .citizen-grid > .citizen-card:nth-child(5) {
  animation-delay: .24s;
}

.section > .panel:nth-child(6), .stats-grid > .stat:nth-child(6), .citizen-grid > .citizen-card:nth-child(6) {
  animation-delay: .3s;
}

.panel {
  transition: transform .22s, box-shadow .25s, border-color .2s;
}

.panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px #1e1b4b14, 0 0 0 1px #8b5cf638;
}

.stat {
  transition: transform .2s, box-shadow .25s;
}

.stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #1e1b4b14;
}

.page-heading h1 {
  background: linear-gradient(92deg, #3b4380 0%, #4d5fc0 40%, #6d5bb8 75%, #8a5aa8 100%);
  -webkit-text-fill-color: transparent;
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}

button.primary, .button.primary {
  position: relative;
  overflow: hidden;
}

button.primary:after, .button.primary:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(100deg, #0000, #ffffff59, #0000);
  width: 45%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -75%;
  transform: skewX(-20deg);
}

button.primary:hover:after, .button.primary:hover:after {
  left: 135%;
}

::selection {
  color: #26215c;
  background: #c7d2fe8c;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  border: 2px solid var(--bg);
  background: #c7cdec;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a5aee6;
}

.nav-link {
  position: relative;
}

.nav-link-text {
  flex: 1;
  min-width: 0;
}

.navfx {
  opacity: 0;
  pointer-events: none;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  transition: opacity .18s;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: scale(.8);
}

.nav-link:hover .navfx {
  opacity: 1;
  transition: opacity .18s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
  transform: scale(1);
}

.nav-link:hover .nav-link-chev {
  opacity: 0;
}

.nav-link-chev {
  transition: opacity .15s;
}

.navfx .ring {
  fill: none;
  stroke: #a5b4fc8c;
}

.navfx [transform-box] {
  transform-box: fill-box;
}

.navfx-swords .sw line {
  stroke: #a5b4fc;
}

.navfx-swords .sw-r line {
  stroke: #67e8f9;
}

.navfx-swords .sw {
  opacity: 0;
}

.navfx-swords .spark {
  fill: #fbbf24;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.nav-link:hover .navfx-swords .sw-l {
  animation: .42s cubic-bezier(.34, 1.56, .64, 1) forwards fx-sword-l;
}

.nav-link:hover .navfx-swords .sw-r {
  animation: .42s cubic-bezier(.34, 1.56, .64, 1) 60ms forwards fx-sword-r;
}

.nav-link:hover .navfx-swords .spark {
  animation: .5s .32s forwards fx-spark;
}

@keyframes fx-sword-l {
  0% {
    opacity: 0;
    transform: translate(-14px, 14px)rotate(-38deg);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate(0)rotate(0);
  }
}

@keyframes fx-sword-r {
  0% {
    opacity: 0;
    transform: translate(14px, 14px)rotate(38deg);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate(0)rotate(0);
  }
}

@keyframes fx-spark {
  0% {
    opacity: 0;
    transform: scale(0)rotate(0);
  }

  40% {
    opacity: 1;
    transform: scale(1.35)rotate(28deg);
  }

  100% {
    opacity: 0;
    transform: scale(.6)rotate(60deg);
  }
}

.navfx-radar .sweep {
  transform-box: fill-box;
  transform-origin: center;
  fill: #6366f152;
}

.navfx-radar .blip {
  fill: #67e8f9;
  opacity: .2;
}

.nav-link:hover .navfx-radar .sweep {
  animation: 1.5s linear infinite fx-radar-sweep;
}

.nav-link:hover .navfx-radar .blip {
  animation: 1.5s .5s infinite fx-radar-blip;
}

@keyframes fx-radar-sweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fx-radar-blip {
  0%, 100% {
    opacity: .15;
  }

  30% {
    opacity: 1;
  }
}

.navfx-book .cover {
  fill: none;
  stroke: #a5b4fc;
  stroke-width: 1.6px;
}

.navfx-book .flip path {
  fill: #a5b4fc40;
  stroke: #a5b4fc;
  stroke-width: 1.2px;
  transform-box: fill-box;
  transform-origin: 0;
}

.navfx-book line {
  stroke: #a5b4fc80;
}

.nav-link:hover .navfx-book .flip path {
  animation: 1.1s ease-in-out infinite fx-page-flip;
}

@keyframes fx-page-flip {
  0% {
    opacity: .9;
    transform: scaleX(1);
  }

  45% {
    opacity: .5;
    transform: scaleX(.08);
  }

  55% {
    opacity: .5;
    transform: scaleX(.08);
  }

  100% {
    opacity: .9;
    transform: scaleX(1);
  }
}

.navfx-shield .shield-path {
  fill: #6366f11a;
  stroke: #a5b4fc;
}

.navfx-shield .scan {
  stroke: #67e8f9;
  opacity: 0;
}

.nav-link:hover .navfx-shield .scan {
  animation: 1.2s ease-in-out infinite fx-shield-scan;
}

@keyframes fx-shield-scan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(13px);
  }
}

.navfx-trophy .cup {
  fill: none;
  stroke: #fcd34d;
}

.navfx-trophy .shine {
  stroke: #ffffffd9;
  opacity: 0;
  transform-box: fill-box;
}

.nav-link:hover .navfx-trophy {
  filter: drop-shadow(0 0 5px #fcd34d8c);
}

.nav-link:hover .navfx-trophy .shine {
  animation: 1.1s .2s infinite fx-trophy-shine;
}

@keyframes fx-trophy-shine {
  0% {
    opacity: 0;
    transform: translateX(-12px);
  }

  35% {
    opacity: .9;
  }

  100% {
    opacity: 0;
    transform: translateX(12px);
  }
}

.navfx-compass .needle {
  fill: #67e8f9;
  transform-box: fill-box;
  transform-origin: center;
}

.nav-link:hover .navfx-compass .needle {
  animation: .9s cubic-bezier(.22, 1, .36, 1) forwards fx-compass-spin;
}

@keyframes fx-compass-spin {
  0% {
    transform: rotate(-150deg);
  }

  70% {
    transform: rotate(18deg);
  }

  100% {
    transform: rotate(0);
  }
}

.navfx-check .tick {
  fill: none;
  stroke: #a5b4fc;
  stroke-dasharray: 22;
  stroke-dashoffset: 22px;
}

.nav-link:hover .navfx-check .tick {
  animation: .55s ease-out 50ms forwards fx-check-draw;
}

@keyframes fx-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.navfx-chart .bar {
  fill: #a5b4fc;
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
}

.navfx-chart .b3 {
  fill: #67e8f9;
}

.nav-link:hover .navfx-chart .b1 {
  animation: .5s cubic-bezier(.34, 1.56, .64, 1) forwards fx-bar;
}

.nav-link:hover .navfx-chart .b2 {
  animation: .5s cubic-bezier(.34, 1.56, .64, 1) 80ms forwards fx-bar;
}

.nav-link:hover .navfx-chart .b3 {
  animation: .5s cubic-bezier(.34, 1.56, .64, 1) .16s forwards fx-bar;
}

@keyframes fx-bar {
  to {
    transform: scaleY(1);
  }
}

.navfx-clock .hands line {
  stroke: #a5b4fc;
}

.navfx-clock .hands {
  transform-box: fill-box;
  transform-origin: center;
}

.nav-link:hover .navfx-clock .hands {
  animation: .8s cubic-bezier(.22, 1, .36, 1) forwards fx-clock-rewind;
}

@keyframes fx-clock-rewind {
  to {
    transform: rotate(-360deg);
  }
}

.navfx-pulse .dot {
  fill: #a5b4fc;
}

.navfx-pulse .ping {
  fill: none;
  stroke: #a5b4fc;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.nav-link:hover .navfx-pulse .p1 {
  animation: 1.4s ease-out infinite fx-ping;
}

.nav-link:hover .navfx-pulse .p2 {
  animation: 1.4s ease-out .7s infinite fx-ping;
}

@keyframes fx-ping {
  0% {
    opacity: .9;
    transform: scale(.4);
  }

  100% {
    opacity: 0;
    transform: scale(3);
  }
}

.topbar-title {
  animation: .4s cubic-bezier(.22, 1, .36, 1) both topbar-in;
  display: inline-block;
}

@keyframes topbar-in {
  from {
    opacity: 0;
    transform: translateX(8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.page-heading h1 {
  display: inline-block;
  position: relative;
}

.page-heading h1:after {
  content: "";
  transform-origin: 0;
  background: linear-gradient(90deg, #6366f1, #a78bfa);
  border-radius: 3px;
  width: 64px;
  height: 3px;
  animation: .65s cubic-bezier(.22, 1, .36, 1) .25s backwards underline-draw;
  position: absolute;
  bottom: -9px;
  left: 2px;
}

@keyframes underline-draw {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.sidebar > nav > .nav-link {
  animation: .45s cubic-bezier(.21, 1.02, .73, 1) backwards rise-in;
}

.sidebar > nav > .nav-link:first-child {
  animation-delay: 20ms;
}

.sidebar > nav > .nav-link:nth-child(2) {
  animation-delay: 60ms;
}

.sidebar > nav > .nav-link:nth-child(3) {
  animation-delay: .1s;
}

.sidebar > nav > .nav-link:nth-child(4) {
  animation-delay: .14s;
}

.sidebar > nav > .nav-link:nth-child(5) {
  animation-delay: .18s;
}

.sidebar > nav > .nav-link:nth-child(6) {
  animation-delay: .22s;
}

.sidebar > nav > .nav-link:nth-child(7) {
  animation-delay: .26s;
}

.sidebar > nav > .nav-link:nth-child(8) {
  animation-delay: .3s;
}

.sidebar > nav > .nav-link:nth-child(9) {
  animation-delay: .34s;
}

.sidebar > nav > .nav-link:nth-child(10) {
  animation-delay: .38s;
}

.sidebar > nav > .nav-link:nth-child(11) {
  animation-delay: .42s;
}

@media (prefers-reduced-motion: reduce) {
  .bgfx-aurora, .bgfx-particle, .bgfx-particle:before, .bgfx-glow-line, .panel, .stat, .card, .citizen-card, .cyberscore-card, .google-notice, .google-btn:after, .primary, .secondary, button.primary:after, .button.primary:after, .nav-link, .text-link, .fx-spot, .fx-ripple, .page-transition, .progress > span:after, .badge.status-running:before, .bgfx-ring, .cyberscore-card, .hero-aurora, .hero-radar, .hero-scan, .hero-enter, .hero-status i, .hero-rise, .navfx, .navfx *, .tr-word {
    transition: none !important;
    animation: none !important;
  }

  .tr-word {
    transform: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

.tr-mask {
  vertical-align: bottom;
  margin-bottom: -.12em;
  padding-bottom: .12em;
  display: inline-block;
  overflow: hidden;
}

.tr-word {
  animation: .72s cubic-bezier(.22, 1, .36, 1) forwards tr-up;
  animation-delay: calc(var(--d, 0s) + var(--i, 0) * var(--step, 50ms));
  will-change: transform;
  display: inline-block;
  transform: translateY(118%);
}

@keyframes tr-up {
  to {
    transform: translateY(0);
  }
}

.fx-spot {
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  width: 600px;
  height: 600px;
  position: fixed;
  top: 0;
  left: 0;
}

.fx-spot-glow {
  background: radial-gradient(circle, #6366f113, #8b5cf60a 45%, #0000 68%);
  border-radius: 50%;
  position: absolute;
  inset: 0;
}

.fx-ripple {
  pointer-events: none;
  background: #fff6;
  border-radius: 50%;
  animation: .62s ease-out forwards fx-ripple;
  position: absolute;
  transform: scale(0);
}

.secondary .fx-ripple {
  background: #4f46e524;
}

@keyframes fx-ripple {
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}

.cyberscore-card, .citizen-card {
  transform-style: preserve-3d;
  will-change: transform;
}

@property --fx-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.cyberscore-card {
  background: linear-gradient(#fdfdff, #fdfdff) padding-box,
    conic-gradient(from var(--fx-border-angle), #a5b4fc, #67e8f9, #e9d5ff, #a5b4fc) border-box;
  border: 1.5px solid #0000;
  animation: .55s cubic-bezier(.21, 1.02, .73, 1) backwards rise-in, 7s linear infinite fx-border-spin;
  position: relative;
}

@keyframes fx-border-spin {
  to {
    --fx-border-angle: 360deg;
  }
}

.page-transition {
  animation: .5s cubic-bezier(.22, 1, .36, 1) both page-in;
}

@keyframes page-in {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(12px)scale(.996);
  }

  to {
    opacity: 1;
    filter: blur();
    transform: translateY(0)scale(1);
  }
}

.badge {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.badge.status-running:before {
  content: "";
  background: #4f46e5;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1.8s ease-in-out infinite status-pulse;
}

@keyframes status-pulse {
  0%, 100% {
    box-shadow: 0 0 #4f46e573;
  }

  50% {
    box-shadow: 0 0 0 5px #4f46e500;
  }
}

.bgfx-ring {
  pointer-events: none;
  border: 1px dashed #6366f124;
  border-radius: 50%;
  position: absolute;
}

.bgfx-ring-1 {
  width: 46vw;
  height: 46vw;
  animation: 90s linear infinite ring-rotate;
  top: -14vw;
  right: -10vw;
}

.bgfx-ring-2 {
  border-color: #8b5cf61f;
  width: 30vw;
  height: 30vw;
  animation: 120s linear infinite reverse ring-rotate;
  bottom: -8vw;
  left: -6vw;
}

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

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

/*# sourceMappingURL=src_app_globals_162hn9o.css.map*/