@charset "UTF-8";
:root {
  --bg: #030303;
  --panel: #0c0c0f;
  --panel-soft: #111115;
  --line: #ffffff16;
  --line-strong: #ffffff29;
  --text: #fff;
  --muted: #c6c6ce;
  --faint: #9c9ca9;
  --red: #ff132f;
  --red-soft: #ff132f24;
  --green: #75f5b0;
  --amber: #ffd080;
}
html {
  background: #030303;
}
body {
  background:
    radial-gradient(ellipse at 100% 10%, #8a001922, transparent 45%),
    radial-gradient(ellipse at 0 75%, #b4001720, transparent 43%), #030303;
}
.sidebar {
  background: linear-gradient(150deg, #111114, #040404 65%);
  border-right-color: #ffffff1e;
}
.brand img {
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 3px 9px #ff132f24);
}
.brand span {
  color: #fff;
}
.brand small,
.sidebar-caption,
.build-label {
  color: #aaaab4;
}
.side-link {
  color: #b9b9c4;
}
.side-link.active {
  background: linear-gradient(100deg, #ce001f36, #9a001010);
  color: #fff;
  border-color: #ff17362e;
  box-shadow: inset 3px 0 #ff1736;
}
.side-link.active svg {
  color: #ff2946;
}
.topbar {
  background: #060607ee;
  border-bottom-color: #ffffff1d;
  box-shadow: 0 7px 25px #0005;
}
.breadcrumb strong {
  color: #fff;
}
.topbar .user-avatar,
.avatar {
  background: linear-gradient(140deg, #3d0c17, #08080a 78%);
  color: #fff;
  border-color: #ed24453b;
}
.btn {
  font-weight: 600;
  color: #fff;
}
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #ff233e 0%, #db001f 46%, #990014 100%);
  border-color: #ff72854a;
  box-shadow:
    inset 0 1px #ffffff4d,
    0 5px 24px #f000242c;
}
.btn-primary:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    170deg,
    #ffffff26 0%,
    #ffffff06 40%,
    transparent 41%
  );
}
.btn-primary:hover {
  background: linear-gradient(165deg, #ff4960, #ec0023 45%, #b40020);
  box-shadow:
    inset 0 1px #ffffff65,
    0 8px 25px #e000303d;
}
.btn-ghost {
  background: linear-gradient(165deg, #252529, #0c0c10 58%);
  border-color: #ffffff24;
  box-shadow: inset 0 1px #ffffff12;
}
.btn-ghost:hover {
  background: linear-gradient(165deg, #303035, #121216);
  border-color: #ff496044;
}
.btn-danger {
  color: #ff7187;
  background: #25040d;
  border-color: #ff17363b;
}
.hero {
  background: #0b0003;
  border-color: #ff29462b;
  box-shadow:
    inset 0 1px #ffffff12,
    0 10px 35px #0008;
}
.hero-image {
  opacity: 1;
  filter: contrast(1.08) saturate(1.2);
}
.hero:before {
  background:
    linear-gradient(90deg, #030304f2 0%, #080003bb 42%, #15000610 80%),
    linear-gradient(0deg, #080003bd, transparent 80%);
}
.hero h2 {
  color: #fff;
  font-weight: 650;
}
.hero h2 span {
  color: #fff;
}
.hero p {
  color: #d9d3db;
}
.hero-kicker {
  color: #fff;
  background: #9c001c45;
  border-color: #ff36555c;
}
.hero-kicker svg {
  color: #ff415c;
}
.panel,
.stat-card,
.resource-card,
.settings-card,
.category-card,
.quick-action {
  background: linear-gradient(155deg, #1d1d21 0%, #0b0b0e 43%, #08080a 100%);
  border-color: #ffffff1f;
  box-shadow:
    inset 0 1px #ffffff14,
    0 10px 26px #0005;
}
.stat-card.emphasis {
  background: linear-gradient(145deg, #3b0010, #140006 55%, #080509);
  border-color: #ff224238;
}
.stat-value {
  color: #fff;
  font-weight: 600;
}
.stat-top,
.stat-foot,
.task-meta,
.card-info dt,
.card-identity p,
.page-heading p {
  color: #bdbdc8;
}
.stat-top svg,
.quick-icon,
.category-icon {
  color: #ff3654;
}
.quick-icon,
.category-icon {
  background: linear-gradient(145deg, #59031777, #25000a99);
  border-color: #ff254d29;
}
.resource-card.selected {
  border-color: #ff2946;
  box-shadow:
    inset 0 0 0 1px #ff29461c,
    0 10px 26px #0006;
}
.resource-card h3,
.settings-card h3,
.section-bar h2,
.category-card strong {
  color: #fff;
  font-weight: 600;
}
.resource-card:hover,
.category-card:hover {
  border-color: #ff294655;
}
.tag {
  color: #ededf3;
  background: #ffffff0a;
  border-color: #ffffff19;
}
.status.green {
  color: #8dffbf;
  background: #0a2919;
  border-color: #37885633;
}
.status.amber {
  color: #ffd996;
  background: #2a1b0b;
  border-color: #be914a2b;
}
.status.red {
  color: #ff879d;
  background: #30040f;
  border-color: #ff274434;
}
.status.blue {
  color: #fff;
  background: #5c001a;
  border-color: #ff45624d;
}
.task-progress-label {
  color: #c1bdca;
}
.progress-track {
  background: #ffffff10;
}
.progress-track span {
  background: linear-gradient(90deg, #c10020, #ff3959);
  box-shadow: 0 0 10px #ff173640;
}
.task-result {
  color: #d9d5dd;
}
.modal {
  background: linear-gradient(145deg, #242428, #09090c 80%);
  border-color: #ffffff2b;
  box-shadow: 0 30px 130px #000c;
}
.modal::backdrop {
  background: #000a;
  backdrop-filter: blur(8px);
}
input,
select,
textarea {
  background-color: #08080b !important;
  color: #fff;
  border-color: #ffffff25 !important;
}
.form-field > span,
.form-field > label {
  color: #efedf3;
}
.form-field > small,
.choice small,
.step-label {
  color: #b5b0c0;
}
.check-list {
  background: #09090d;
}
.choice {
  background: linear-gradient(155deg, #202024, #101014);
  border-color: #ffffff20;
}
.choice.selected {
  background: linear-gradient(155deg, #430214, #160008);
  border-color: #ff2348;
}
.info-box {
  background: #111115;
  border-color: #ffffff1b;
  color: #d5d1db;
}
.info-box.warning {
  background: #2b0a11;
  border-color: #fa1c3c40;
  color: #ffd6df;
}
.search {
  background: #08080b;
}
.table-wrap {
  background: #09090b;
  border-color: #ffffff20;
}
th {
  color: #d4cfdb;
  background: #17171b;
}
td {
  border-color: #ffffff10;
}
.bottom-nav {
  background: linear-gradient(170deg, #19191c, #050506);
  border-top-color: #ffffff28;
  box-shadow: 0 -7px 30px #0008;
}
.bottom-link.active {
  background: linear-gradient(0deg, #9e001a33, transparent);
  color: #ff4b66;
}
.bottom-link {
  color: #c4becd;
}
.more-item {
  background: linear-gradient(155deg, #1e1e22, #09090c);
  border-color: #ffffff20;
}
.more-item > svg {
  color: #ff3e5c;
}
.fog-a {
  background: radial-gradient(ellipse, #d400353d, transparent 64%);
  opacity: 0.37;
}
.fog-b {
  background: radial-gradient(ellipse, #ff003124, transparent 65%);
  opacity: 0.28;
}
.dust {
  opacity: 0.65;
  background-image:
    radial-gradient(1px 1px at 12% 20%, #fff9, transparent),
    radial-gradient(1.5px 1.5px at 75% 70%, #ff274a99, transparent),
    radial-gradient(1px 1px at 45% 90%, #fff5, transparent),
    radial-gradient(1px 1px at 86% 20%, #fa163a99, transparent);
}
.watermark {
  color: #ff173605;
}
.workspace-footer {
  color: #a7a1ae;
}
#splash {
  background: #030303;
  perspective: 1200px;
  transform-style: preserve-3d;
  transform-origin: 100% 50%;
  isolation: isolate;
}
.splash-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, #0006, transparent 25%, #0002 70%),
    url("splash-room.jpg") center 62% / cover;
  z-index: -3;
}
.splash-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 46%, #fb003413, transparent 52%);
  z-index: -2;
}
.splash-orbit {
  position: absolute;
  width: min(74vw, 440px);
  aspect-ratio: 1;
  border: 1px solid #fb173527;
  border-radius: 50%;
  box-shadow:
    inset 0 0 35px #ff00100a,
    0 0 30px #ff00100b;
  transform: rotateX(66deg) translateY(180px);
  z-index: -1;
}
.splash-orbit:after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid #ffffff10;
  border-radius: inherit;
}
.splash-content {
  width: min(320px, 85vw);
  z-index: 2;
  transform: translateY(-8px);
}
.emblem-stage {
  width: 260px;
  height: 292px;
  margin: 0 auto 7px;
  mask-image: none;
  -webkit-mask-image: none;
  overflow: visible;
}
.emblem-stage svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: none;
  filter: drop-shadow(0 12px 9px #000b) drop-shadow(0 0 26px #ff003124);
  overflow: visible;
}
.emblem-stage svg path,
.emblem-stage svg circle,
.emblem-stage svg rect,
.emblem-stage svg use {
  stroke-linejoin: round;
  stroke-linecap: round;
}
.splash-name {
  color: #fff;
  font-size: 21px;
  letter-spacing: 5px;
  font-weight: 750;
  text-shadow: 0 2px 10px #000;
}
.splash-name span {
  color: #ff2447;
  font-size: 12px;
  letter-spacing: 6px;
  font-weight: 650;
  margin-top: 7px;
}
.splash-subtitle {
  color: #e1dce5;
  font-size: 8px;
  letter-spacing: 1.8px;
  margin-top: 20px;
}
.loading-line {
  height: 3px;
  margin: 28px 12px 0;
  background: #ffffff16;
  box-shadow: none;
  border: 0;
}
.loading-line > div {
  animation: none;
  background: linear-gradient(90deg, #b90021, #ff1d44 55%, #fff);
  box-shadow: 0 0 12px #ff2447a6;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
}
.loading-meta {
  margin: 10px 12px 0;
  color: #d7cad9;
  font-size: 9px;
}
.splash-fold-edge {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(
    0deg,
    transparent,
    #ff284c,
    #fff,
    #ff284c,
    transparent
  );
  opacity: 0;
  box-shadow:
    0 0 34px #ff0037,
    0 0 90px #ff003744;
  pointer-events: none;
}
.splash-playing .gs-logo-shield {
  transform-origin: 160px 230px;
  animation: shield-assemble 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.splash-playing .gs-logo-crown {
  transform-origin: 160px 112px;
  animation: crown-assemble 0.65s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.splash-playing .gs-logo-g {
  animation: letter-g-assemble 0.55s 0.5s cubic-bezier(0.15, 0.8, 0.2, 1) both;
}
.splash-playing .gs-logo-s {
  animation: letter-s-assemble 0.55s 0.5s cubic-bezier(0.15, 0.8, 0.2, 1) both;
}
.splash-playing .gs-logo-reflection {
  animation: metal-reflection 0.45s 1.04s ease-out both;
}
.splash-playing .loading-line > div {
  animation: loading-v2 1.55s cubic-bezier(0.2, 0.5, 0.4, 1) both;
}
.splash-exit {
  animation: splash-fold-v2 0.45s cubic-bezier(0.65, 0, 0.8, 0.5) both;
}
.splash-exit .splash-fold-edge {
  opacity: 1;
}
.splash-exit .splash-content {
  animation: splash-content-fold 0.45s ease-in both;
}
#splash-smoke {
  position: fixed;
  inset: 0;
  z-index: 1001;
  pointer-events: none;
  overflow: hidden;
}
.smoke-curl {
  position: absolute;
  top: -10%;
  left: -20%;
  width: 75%;
  height: 130%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 55%, #b6a4b448, transparent 50%),
    radial-gradient(ellipse at 20% 25%, #b6083545, transparent 52%);
  filter: url("#smoke-displace") blur(11px);
  border-radius: 45%;
}
.smoke-curl:nth-child(2) {
  left: 10%;
  top: 0;
  width: 70%;
  height: 110%;
  background:
    radial-gradient(ellipse at 40% 40%, #fff3, transparent 46%),
    radial-gradient(ellipse at 45% 60%, #ff0c3844, transparent 52%);
}
.smoke-curl:nth-child(3) {
  left: 35%;
  width: 60%;
  background: radial-gradient(ellipse at 45% 45%, #d2becf44, transparent 48%);
}
.smoke-curl:nth-child(4) {
  left: 65%;
  width: 60%;
  background: radial-gradient(ellipse at 45% 45%, #ff153632, transparent 50%);
}
.smoke-playing .smoke-curl {
  animation: smoke-curl-v2 1s ease-out both;
}
.smoke-playing .smoke-curl:nth-child(2) {
  animation-delay: 0.06s;
}
.smoke-playing .smoke-curl:nth-child(3) {
  animation-delay: 0.1s;
}
.smoke-playing .smoke-curl:nth-child(4) {
  animation-delay: 0.14s;
}
.smoke-sparks {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 22% 44%, #fff, transparent),
    radial-gradient(2px 2px at 65% 65%, #ff3759, transparent),
    radial-gradient(1px 1px at 70% 30%, #fff, transparent);
  background-size:
    230px 250px,
    190px 280px,
    310px 220px;
  opacity: 0;
}
.smoke-playing .smoke-sparks {
  animation: exit-sparks 0.7s ease-out both;
}
@keyframes shield-assemble {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.75);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes crown-assemble {
  from {
    opacity: 0;
    transform: translateY(-72px) rotate(-8deg) scale(0.88);
  }
  70% {
    opacity: 1;
    transform: translateY(4px) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes letter-g-assemble {
  from {
    opacity: 0;
    transform: translateX(-72px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes letter-s-assemble {
  from {
    opacity: 0;
    transform: translateX(72px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes metal-reflection {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(480px);
  }
}
@keyframes loading-v2 {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes splash-fold-v2 {
  0% {
    transform: perspective(1200px) rotateY(0) translateX(0);
    opacity: 1;
  }
  42% {
    transform: perspective(1200px) rotateY(-24deg) translateX(15%);
    opacity: 1;
  }
  100% {
    transform: perspective(1200px) rotateY(-83deg) translateX(105%) scaleX(0.18);
    opacity: 0;
  }
}
@keyframes splash-content-fold {
  to {
    opacity: 0.25;
    transform: translateX(22%) rotateY(-12deg) scaleX(0.8);
  }
}
@keyframes smoke-curl-v2 {
  0% {
    opacity: 0;
    transform: translateX(-15%) scale(0.5) rotate(-8deg);
  }
  20% {
    opacity: 0.75;
  }
  65% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
    transform: translateX(115%) scale(1.7) rotate(12deg);
  }
}
@keyframes exit-sparks {
  0% {
    opacity: 0;
    transform: translateX(-20%);
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateX(70%) translateY(-5%);
  }
}
@media (max-width: 600px) {
  .bottom-link {
    font-size: 10px;
  }
  .splash-content {
    width: 285px;
  }
  .emblem-stage {
    width: 240px;
    height: 270px;
  }
  .splash-name {
    font-size: 20px;
  }
  .hero h2 {
    font-size: 29px;
  }
  .resource-card .avatar {
    background: linear-gradient(145deg, #500b20, #08080a);
  }
  .hero-image {
    opacity: 1;
  }
  .hero:before {
    background:
      linear-gradient(90deg, #030304f0 0%, #080003b0 50%, #15000613 100%),
      linear-gradient(0deg, #080003af, transparent 80%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash-playing .gs-logo-shield,
  .splash-playing .gs-logo-crown,
  .splash-playing .gs-logo-g,
  .splash-playing .gs-logo-s,
  .splash-playing .gs-logo-reflection {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .splash-exit {
    animation: none !important;
    opacity: 0;
  }
  .splash-exit .splash-content {
    animation: none;
  }
  .smoke-playing .smoke-curl,
  .smoke-playing .smoke-sparks {
    animation: none !important;
    display: none;
  }
  .splash-orbit {
    display: none;
  }
}
.login-qr-card {
  display: grid;
  place-items: center;
  min-height: 270px;
  max-width: 270px;
  margin: 10px auto 17px;
  padding: 15px;
  background: #fff;
  border-radius: 16px;
  color: #161616;
  box-shadow:
    0 0 0 1px #fff4,
    0 14px 50px #0007;
}
.login-qr-card img {
  width: 240px;
  height: 240px;
  max-width: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.login-help {
  color: #c5c0ce;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  margin: 15px 0;
}
.login-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.login-actions .btn {
  flex: 1;
}
.login-placeholder,
.login-complete {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 28px 12px;
  text-align: center;
}
.login-placeholder p,
.login-complete p {
  font-size: 12px;
  color: #c5c0ce;
  line-height: 1.7;
}
.login-placeholder > svg,
.login-complete > svg {
  width: 42px;
  height: 42px;
  color: #ff375b;
}
.login-complete > svg {
  color: #89ffb9;
}
.login-spinner {
  width: 34px;
  height: 34px;
  border: 2px solid #ffffff16;
  border-top-color: #ff2946;
  border-radius: 50%;
  animation: login-rotate 0.7s linear infinite;
}
@keyframes login-rotate {
  to {
    transform: rotate(360deg);
  }
}