:root {
  color-scheme: dark;
  --bg: #070a12;
  --panel: rgba(15, 21, 36, .96);
  --line: #2b3650;
  --text: #f3f6fc;
  --muted: #8894aa;
  --cyan: #50e3d2;
  --blue: #8290ff;
  --green: #45d8ae;
  --red: #ff7891;
  --warn: #f2bb62;
  --surface-1: #0b101c;
  --surface-2: #111827;
  --surface-3: #182136;
  --stroke-soft: rgba(153, 169, 201, .14);
  --stroke-strong: rgba(153, 169, 201, .28);
  --shadow: 0 22px 60px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .035);
}

* {
  letter-spacing: 0 !important;
  scrollbar-color: #37425d #090d17;
}

html {
  min-height: 100%;
  background: #070a12;
}

body,
.service-page {
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  background-color: #070a12;
  background-image:
    linear-gradient(rgba(129, 145, 187, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 145, 187, .045) 1px, transparent 1px),
    linear-gradient(180deg, #0d1424 0, #090e19 280px, #070a12 760px);
  background-size: 48px 48px, 48px 48px, 100% 100%;
  background-attachment: fixed;
}

body::before {
  display: none;
}

a {
  color: #aeb7ff;
}

h1,
h2,
h3,
strong {
  color: #f6f8fd;
}

.eyebrow {
  color: #9ba6ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 750;
}

.muted,
.footer-note,
.quiet-label {
  color: var(--muted);
}

.auth-card,
.panel,
.service-card {
  border: 1px solid var(--stroke-strong);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(17, 24, 41, .97), rgba(10, 15, 27, .96));
  box-shadow: var(--shadow);
}

.auth-card::before,
.panel::before,
.service-card::before {
  display: block;
  height: 1px;
  opacity: .9;
  background: linear-gradient(90deg, transparent, #8392ff 34%, #50e3d2 72%, transparent);
}

input,
select,
textarea {
  border: 1px solid #35415b;
  border-radius: 7px;
  background: rgba(7, 11, 20, .84);
  color: #eef2fb;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

input::placeholder,
textarea::placeholder {
  color: #647087;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #53617f;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #8392ff;
  box-shadow: 0 0 0 3px rgba(131, 146, 255, .14), inset 0 1px rgba(255, 255, 255, .025);
  outline: none;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #8392ff;
}

.button {
  min-height: 40px;
  border-radius: 7px;
  font-weight: 700;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

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

.button.primary,
.primary {
  border-color: #8995ed;
  background: linear-gradient(110deg, #6674d4, #8071cc);
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(93, 105, 204, .27);
}

.button.primary:hover:not(:disabled),
.primary:hover:not(:disabled) {
  border-color: #9ba6ff;
  background: linear-gradient(110deg, #7583e4, #8c7bd9);
  box-shadow: 0 12px 30px rgba(93, 105, 204, .34);
}

.button.secondary,
.secondary {
  border-color: #3a465f;
  background: #171f2e;
  color: #dce2ef;
}

.button.secondary:hover:not(:disabled),
.secondary:hover:not(:disabled) {
  border-color: #657295;
  background: #202a3d;
}

.button.danger,
.danger {
  border-color: rgba(255, 120, 145, .44);
  background: rgba(255, 120, 145, .09);
  color: #ffb1bf;
}

.button.danger:hover:not(:disabled),
.danger:hover:not(:disabled) {
  border-color: rgba(255, 120, 145, .65);
  background: rgba(255, 120, 145, .14);
}

.notice {
  border: 1px solid rgba(80, 227, 210, .28);
  border-left: 3px solid #50e3d2;
  border-radius: 7px;
  background: rgba(80, 227, 210, .07);
  color: #d6f8f2;
}

.notice.error,
.error {
  border-color: rgba(255, 120, 145, .4);
  border-left-color: #ff7891;
  background: rgba(255, 120, 145, .09);
  color: #ffc0cc;
}

.badge {
  border-color: #3b465f;
  background: #171f2e;
  color: #cbd2e2;
}

.badge.green {
  border-color: rgba(69, 216, 174, .38);
  background: rgba(69, 216, 174, .09);
  color: #89ead0;
}

.badge.red {
  border-color: rgba(255, 120, 145, .4);
  background: rgba(255, 120, 145, .09);
  color: #ffadbc;
}

.service-header,
.topbar {
  border-bottom: 1px solid var(--stroke-soft);
  padding-bottom: 22px;
}

.service-header h1,
.topbar-brand h1 {
  color: #f7f9fd;
  font-weight: 780;
  text-shadow: 0 0 28px rgba(131, 146, 255, .12);
}

.order-meta > span,
.status-block,
.card-status {
  border-color: #35415a;
  border-radius: 999px;
  background: rgba(20, 27, 42, .92);
  color: #bac3d4;
}

.status-dot {
  background: #748096;
}

.status-dot.online {
  background: #45d8ae;
  box-shadow: 0 0 0 3px rgba(69, 216, 174, .14), 0 0 14px rgba(69, 216, 174, .52);
}

.status-dot.error {
  background: #ff7891;
  box-shadow: 0 0 0 3px rgba(255, 120, 145, .13), 0 0 14px rgba(255, 120, 145, .42);
}

.section-head,
.card-head,
.order-card-head {
  border-bottom-color: var(--stroke-soft);
}

.section-head h2,
.card-head h2,
.order-card-head h2,
.section-title h2 {
  font-weight: 720;
}

.order-facts > div,
.runtime-list > div {
  border-color: var(--stroke-soft);
  background: rgba(19, 27, 43, .88);
}

.order-facts dt,
.runtime-list dt,
.setting-list dt {
  color: #818da3;
}

.order-facts dd,
.runtime-list dd,
.setting-list dd {
  color: #eef2fa;
}

.order-divider,
.setting-list > div,
.merged-section + .merged-section,
.operation-tabs {
  border-color: var(--stroke-soft);
}

.operation-tab {
  color: #808ba0;
}

.operation-tab:hover {
  color: #cbd2df;
}

.operation-tab.active {
  color: #f0f2fb;
}

.operation-tab.active::after {
  background: #8392ff;
  box-shadow: 0 0 12px rgba(131, 146, 255, .48);
}

.view-actions .button.active {
  border-color: #8392ff;
  background: rgba(131, 146, 255, .12);
  color: #f0f2ff;
  box-shadow: inset 0 0 16px rgba(131, 146, 255, .06);
}

.media-stage,
.qr-stage {
  border-color: #303b51;
  border-radius: 8px;
  background: #090e18;
  color: #707c92;
}

.media-stage img,
.media-stage canvas,
.qr-stage img {
  border-radius: 5px;
}

.media-stage canvas {
  padding: 8px;
}

.game-screenshot-time {
  border-color: rgba(131, 146, 255, .44);
  border-radius: 6px;
  background: rgba(6, 9, 17, .88);
  color: #f2f4fb;
}

.machine-runtime {
  border-color: #2f3a51;
  background: rgba(10, 16, 28, .78);
}

.runtime-head,
.runtime-message {
  color: #e7ebf5;
}

.runtime-badge {
  border-color: rgba(131, 146, 255, .42);
  background: rgba(131, 146, 255, .09);
  color: #b8c0ff;
}

.runtime-running,
.runtime-claimed,
.runtime-waiting_login {
  border-color: rgba(69, 216, 174, .40);
  background: rgba(69, 216, 174, .08);
  color: #83e6ca;
}

.runtime-alert {
  border-color: rgba(255, 120, 145, .48);
  background: rgba(255, 120, 145, .10);
  color: #ffb3c0;
}

.machine-screenshot {
  border-color: #303b51;
  background: #090e18;
}

.machine-screenshot img {
  background: #050810;
}

.timeline {
  scrollbar-width: thin;
}

.timeline-item {
  border-left-color: #323d53;
}

.timeline-marker {
  border-color: #111827;
  background: #8392ff;
  box-shadow: 0 0 0 3px rgba(131, 146, 255, .11), 0 0 12px rgba(131, 146, 255, .42);
}

.timeline-row strong {
  color: #f0f2f8;
}

.timeline-row time {
  color: #68748b;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.timeline-content p {
  color: #abb4c7;
}

.timeline summary {
  color: #9da9ff;
}

.timeline pre,
pre {
  border-color: #2c364b;
  background: #090e18;
  color: #bec7da;
}

.announcement-modal {
  background: rgba(3, 5, 10, .84);
  backdrop-filter: blur(7px);
}

.announcement-modal-panel,
.media-modal-panel,
.media-popover {
  border-color: #3b4660;
  border-radius: 8px;
  background: #101624;
  box-shadow: 0 28px 84px rgba(0, 0, 0, .58);
}

.announcement-modal-head,
.media-popover-head {
  border-color: var(--stroke-soft);
  color: #f2f4fa;
}

.announcement-modal-head span {
  color: #9da9ff;
}

.media-close,
.dialog-close {
  border-color: #3d4861;
  background: #171f2e;
  color: #c9d0df;
}

.media-close:hover,
.dialog-close:hover {
  border-color: #8392ff;
  background: #20293b;
  color: #ffffff;
}

.media-stage .qr-countdown {
  border-color: rgba(242, 187, 98, .36);
  background: rgba(242, 187, 98, .09);
  color: #f4cb87;
}

.topbar-account {
  color: #9ba6ba;
}

.topbar-account a {
  color: #c1c8ff;
}

.header-overview {
  border-color: #323d53;
  border-radius: 8px;
  background: rgba(12, 18, 31, .88);
}

.header-overview-label {
  background: #181f2f;
  color: #949fb3;
}

.header-metric {
  border-color: #293247;
}

.header-metric small {
  color: #778298;
}

.header-metric strong {
  color: #eff2f8;
}

.side {
  border-bottom: 1px solid var(--stroke-soft);
  padding-bottom: 14px;
}

.side a {
  border-color: #313b50;
  border-radius: 7px;
  background: rgba(17, 23, 37, .92);
  color: #9ea8bb;
}

.side a:hover {
  border-color: #586483;
  background: #192235;
  color: #e5e8f2;
}

.side a.active {
  border-color: #7783de;
  background: #2a3154;
  color: #f3f4ff;
  box-shadow: inset 0 -2px #50e3d2, 0 8px 20px rgba(64, 76, 160, .16);
}

.section-title {
  border-bottom: 1px solid var(--stroke-soft);
  padding-bottom: 14px;
}

.table-wrap {
  border: 1px solid var(--stroke-soft);
  border-radius: 7px;
  background: #0b101a;
}

.table th,
.table td {
  border-color: #252e41;
}

.table th {
  background: #131a29;
  color: #8c97ab;
  font-family: inherit;
  font-weight: 700;
}

.table td {
  color: #ccd2df;
}

.table tr:hover td {
  background: rgba(131, 146, 255, .045);
}

.manage-group,
.agent-create-box,
.manage-row,
.agent-card,
.plan-card,
.api-card,
.bulk-toolbar,
.announcement-box,
.order-create-notice-editor {
  border-color: #2d374c;
  border-radius: 7px;
  background: rgba(12, 18, 30, .88);
}

.manage-row,
.agent-card {
  background: #101725;
}

.record-id,
.machine-password-code {
  color: #a6afff;
}

.agent-total-field strong {
  border-color: rgba(131, 146, 255, .32);
  background: rgba(131, 146, 255, .08);
  color: #eff1ff;
}

.agent-manage-content,
.manage-actions,
.agent-actions,
.agent-quota-overview,
.agent-quota-details,
.generated-links,
.pagination,
.dialog-actions {
  border-color: var(--stroke-soft);
}

.agent-quota-overview span + span {
  border-color: var(--stroke-soft);
}

.agent-quota-overview strong,
.balance-value {
  color: #edf0f8;
}

.bulk-toolbar {
  background: #0f1623;
}

.pagination-meta {
  color: #8994a9;
}

.api-flow {
  border-color: var(--stroke-soft);
  color: #8c97aa;
}

.api-flow b,
.api-method {
  border-color: rgba(80, 227, 210, .36);
  background: rgba(80, 227, 210, .08);
  color: #88e9dd;
}

.api-note {
  border-left-color: #8392ff;
  border-radius: 6px;
  background: rgba(131, 146, 255, .07);
  color: #bcc3d2;
}

.api-note code,
.api-card code,
.api-rules code,
.api-endpoint {
  color: #b1b9ff;
}

.api-card p,
.api-rules p,
.api-rules ul {
  color: #abb4c6;
}

.api-table th,
.api-table td {
  border-color: #2c354a;
}

.api-table th {
  background: #141b29;
  color: #929db1;
}

.api-table td {
  color: #c6ccda;
}

.api-table td:first-child {
  color: #b1b9ff;
}

.api-rules {
  border-color: var(--stroke-soft);
  background: #0b101b;
}

.announcement-box,
.order-create-notice {
  border-color: rgba(242, 187, 98, .30);
  background: rgba(242, 187, 98, .06);
  color: #ded6c5;
}

.announcement-status {
  border-color: rgba(80, 227, 210, .36);
  background: rgba(80, 227, 210, .09);
  color: #8be9de;
}

.admin-dialog {
  border-color: #3b4660;
  border-radius: 8px;
  background: #101624;
  color: var(--text);
  box-shadow: 0 28px 84px rgba(0, 0, 0, .58);
}

.admin-dialog::before {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8392ff, #50e3d2, transparent);
}

.admin-dialog::backdrop {
  background: rgba(3, 5, 10, .82);
  backdrop-filter: blur(7px);
}

.dialog-head {
  border-color: var(--stroke-soft);
}

.dialog-head h2::before {
  color: #8392ff;
}

.time-popover-body {
  border-color: #3a445d;
  border-radius: 7px;
  background: #111725;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
}

@media (max-width: 760px) {
  body,
  .service-page {
    background-size: 36px 36px, 36px 36px, 100% 100%;
  }

  .service-header,
  .topbar {
    padding-bottom: 18px;
  }

  .service-card,
  .panel {
    border-radius: 8px;
  }

  .side {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .side::-webkit-scrollbar {
    display: none;
  }

  .side a {
    flex: 0 0 auto;
  }
}

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