:root {
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 15px;
  color: #18324a;
  background: #eef4fb;
}
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { margin: 0; }
h1 { font-size: 24px; }
h2 { font-size: 22px; }
.orientation-hint { display: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 10px 28px;
  background: #fff;
  border-bottom: 1px solid #d9e6f5;
}
.topbar strong { font-size: 18px; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
#who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace { max-width: 1600px; margin: auto; padding: 28px; }
.work-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-areas: "order orders" "credits orders";
  align-items: start;
  align-content: start;
  gap: 18px;
}
.card {
  min-width: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid #d9e6f5;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(21, 48, 92, .06);
}
.order-tool { grid-area: order; }
.orders { grid-area: orders; }
.credits { grid-area: credits; }
.balance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0 20px; border: 1px solid #d9e6f5; border-radius: 6px; }
.balance div { padding: 11px; min-width: 0; }
.balance div + div { border-left: 1px solid #d9e6f5; }
.balance span { display: block; color: #6b7f99; font-size: 12px; }
.balance strong { display: block; margin-top: 3px; font-size: 23px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.balance div:first-child strong { color: #2563eb; }
form label { display: block; margin: 16px 0 8px; color: #405a76; }
input, textarea, select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #d6e2f0;
  border-radius: 6px;
  background: #fff;
  color: #18324a;
  font-size: 16px;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: #2563eb; box-shadow: 0 0 0 2px #dbeafe; }
textarea { min-height: 120px; resize: vertical; }
button { border: 0; border-radius: 6px; padding: 10px 14px; font-size: 15px; }
.primary { background: #2563eb; color: #fff; }
.primary:hover { background: #1d4ed8; }
.primary:disabled { opacity: .6; cursor: wait; }
.secondary { background: #fff; color: #2563eb; border: 1px solid #cfe0f5; }
.secondary:hover { background: #f1f6ff; }
.presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.presets button { padding: 9px 3px; background: #fff; color: #2563eb; border: 1px solid #cfe0f5; font-weight: 700; }
.presets button:hover { background: #eaf3ff; }
.create-button { width: 100%; }
.form-message { min-height: 18px; margin: 12px 0 0; font-size: 13px; color: #dc2626; overflow-wrap: anywhere; }
.form-message.ok { color: #16a34a; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-title span { display: block; margin-top: 4px; color: #6b7f99; font-size: 13px; }
.section-title button { flex: none; }
.credits h2 { font-size: 20px; margin-bottom: 14px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
.orders table { min-width: 760px; }
th { padding: 12px; background: #eaf3ff; color: #284966; text-align: left; white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid #edf2f7; white-space: nowrap; font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
.id-cell { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.status { display: inline-block; min-width: 56px; border-radius: 999px; padding: 4px 9px; font-weight: 700; text-align: center; }
.pending, .submitting { background: #fef3c7; color: #92400e; }
.running { background: #dbeafe; color: #1d4ed8; }
.done { background: #dcfce7; color: #16a34a; }
.failed { background: #fee2e2; color: #dc2626; }
.uncertain { background: #fff0e0; color: #a1500b; }
.empty { margin: 0; padding: 18px 0 2px; color: #6b7f99; }
body[data-page="login"], body[data-page="register"] { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 16px; }
.auth-wrap { width: min(420px, 100%); }
.auth-wrap h1 { margin-bottom: 22px; }
.auth-form .primary { width: 100%; margin-top: 14px; }
.auth-link { display: block; margin-top: 18px; text-align: center; }
.admin-workspace { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 18px; }
.admin-workspace form .primary { width: 100%; margin-top: 16px; }
.admin-workspace h2:not(:first-child) { margin-top: 22px; }
.admin-workspace table { min-width: 500px; }
#uncertain-orders { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1100px) and (orientation: landscape) {
  .workspace { padding: 12px; }
  .work-grid { grid-template-columns: minmax(230px, 35%) minmax(0,1fr); gap: 10px; }
  .admin-workspace { grid-template-columns: minmax(230px, 35%) minmax(0,1fr); gap: 10px; }
  .card { padding: 14px; }
  .topbar { min-height: 48px; padding: 8px 12px; }
  .topbar strong { font-size: 16px; }
  h1, h2 { font-size: 19px; }
  input, textarea, select { padding: 8px; font-size: 14px; }
  textarea { min-height: 95px; }
  button { padding: 8px 9px; font-size: 13px; }
  .balance { margin: 12px 0; }
  .balance div { padding: 7px; }
  .balance strong { font-size: 19px; }
  .presets { gap: 4px; }
  .presets button { padding: 7px 1px; }
  th, td { padding: 8px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  body { min-width: 0; overflow-x: hidden; }
  .topbar { min-height: 52px; padding: 8px 12px; gap: 8px; }
  .topbar strong { font-size: 16px; }
  .top-actions { gap: 8px; }
  #who { max-width: 120px; }
  .workspace { padding: 12px; }
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "order" "orders" "credits";
    gap: 12px;
  }
  .admin-workspace { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card { padding: 14px; }
  h1, h2 { font-size: 20px; }
  .balance { margin: 14px 0 16px; }
  .balance strong { font-size: 21px; }
  input, textarea, select { padding: 10px; }
  textarea { min-height: 110px; }
  .orders table, .credits table { min-width: 0; }
  .orders thead, .credits thead { display: none; }
  .orders tbody, .credits tbody { display: grid; gap: 10px; }
  .orders tr, .credits tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid #d9e6f5;
    border-radius: 6px;
  }
  .orders td, .credits td {
    display: block;
    min-width: 0;
    padding: 9px;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .orders td::before, .credits td::before {
    display: block;
    margin-bottom: 4px;
    color: #6b7f99;
    font-size: 12px;
  }
  .orders td:nth-child(1)::before { content: "任务编号"; }
  .orders td:nth-child(2)::before { content: "次数"; }
  .orders td:nth-child(3)::before { content: "进度"; }
  .orders td:nth-child(4)::before { content: "状态"; }
  .orders td:nth-child(5)::before { content: "创建时间"; }
  .orders td:nth-child(6)::before { content: "回放 / 查询"; }
  .orders td:nth-child(5), .orders td:nth-child(6) { grid-column: 1 / -1; }
  .credits td:nth-child(1)::before { content: "时间"; }
  .credits td:nth-child(2)::before { content: "增加次数"; }
  .credits td:nth-child(3)::before { content: "备注"; }
  .credits td:nth-child(3) { grid-column: 1 / -1; }
  .admin-workspace table { min-width: 500px; }
}

/* 8089 light mode and invitation controls. Dark remains the default. */
.theme-toggle { width: 38px; height: 34px; padding: 0; font-size: 19px; line-height: 1; white-space: nowrap; }
.helper-text { margin: 8px 0 0; color: #8ca5a3; font-size: 13px; line-height: 1.6; }
.generated-invite { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 16px; padding: 12px; border: 1px solid #315054; border-radius: 6px; background: #0b1214; }
.generated-invite span { color: #8ca5a3; font-size: 13px; }
.generated-invite strong { overflow-wrap: anywhere; color: #f2fbf8; font-size: 16px; letter-spacing: 1px; }
.generated-invite button { grid-row: 1 / span 2; grid-column: 2; }
.admin-data { grid-column: 1 / -1; }
.auth-help { display: block; width: 100%; min-height: 44px; margin-top: 16px; padding: 10px; border: 1px solid #f2fbf8; border-radius: 6px; background: #f2fbf8; color: #071113; font-size: 15px; font-weight: 700; text-align: center; }
.auth-help:hover { background: #cfd9d6; border-color: #cfd9d6; color: #071113; }
.support-modal[hidden] { display: none; }
.support-modal { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .72); }
.support-panel { position: relative; width: min(360px, 100%); padding: 24px; border: 1px solid #385052; border-radius: 8px; background: #10191c; text-align: center; box-shadow: 0 24px 48px rgba(0, 0, 0, .45); }
.support-panel h2 { padding-right: 24px; font-size: 20px; }
.support-panel img { display: block; width: min(220px, 100%); margin: 18px auto 14px; border-radius: 6px; }
.support-panel p { margin: 8px 0; }
.modal-close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; padding: 0; background: transparent; color: #c8d8d5; font-size: 26px; line-height: 1; }

body[data-theme="light"] { background: #f5f5f5; color: #131313; }
body[data-theme="light"] a { color: #151515; }
body[data-theme="light"] .topbar { background: #fff; border-bottom-color: #d7d7d7; }
body[data-theme="light"] .topbar strong { color: #111; }
body[data-theme="light"] .card, body[data-theme="light"] .support-panel { background: #fff; border-color: #d7d7d7; box-shadow: 0 10px 24px rgba(0, 0, 0, .08); }
body[data-theme="light"] .order-tool, body[data-theme="light"] .orders, body[data-theme="light"] .credits { border-top-color: #111; }
body[data-theme="light"] .balance, body[data-theme="light"] .generated-invite { background: #fafafa; border-color: #d7d7d7; }
body[data-theme="light"] .balance div + div { border-left-color: #d7d7d7; }
body[data-theme="light"] .balance span, body[data-theme="light"] .section-title span, body[data-theme="light"] .empty, body[data-theme="light"] .helper-text, body[data-theme="light"] .generated-invite span { color: #626262; }
body[data-theme="light"] .balance strong, body[data-theme="light"] .generated-invite strong { color: #111; }
body[data-theme="light"] .balance div:first-child strong { color: #111; }
body[data-theme="light"] form label, body[data-theme="light"] th { color: #272727; }
body[data-theme="light"] input, body[data-theme="light"] textarea, body[data-theme="light"] select { border-color: #bdbdbd; background: #fff; color: #111; }
body[data-theme="light"] input::placeholder, body[data-theme="light"] textarea::placeholder { color: #787878; }
body[data-theme="light"] input:focus, body[data-theme="light"] textarea:focus, body[data-theme="light"] select:focus { border-color: #111; box-shadow: 0 0 0 2px rgba(0, 0, 0, .12); }
body[data-theme="light"] .primary { background: #111; color: #fff; }
body[data-theme="light"] .primary:hover { background: #333; }
body[data-theme="light"] .secondary, body[data-theme="light"] .presets button { background: #fff; color: #111; border-color: #bdbdbd; }
body[data-theme="light"] .secondary:hover, body[data-theme="light"] .presets button:hover { background: #eeeeee; }
body[data-theme="light"] th { background: #f1f1f1; border-bottom-color: #d7d7d7; }
body[data-theme="light"] td { border-bottom-color: #e1e1e1; color: #222; }
body[data-theme="light"] tbody tr:hover td { background: #f7f7f7; }
body[data-theme="light"][data-page="login"], body[data-theme="light"][data-page="register"] { background: #ededed; }
body[data-theme="light"][data-page="login"]::before, body[data-theme="light"][data-page="register"]::before { filter: grayscale(1); opacity: .16; }
body[data-theme="light"] .support-modal { background: rgba(0, 0, 0, .38); }
body[data-theme="light"] .modal-close { color: #222; }

@media (max-width: 700px) and (orientation: portrait) {
  .admin-data { grid-column: auto; }
}

/* 8089 visual theme */
:root {
  font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  color: #edf5f2;
  background: #090d0f;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: #090d0f;
  color: #edf5f2;
}
a { color: #58dbd2; }
a:hover { color: #9cefe8; }
.topbar {
  min-height: 64px;
  padding: 10px 32px;
  background: #0c1316;
  border-bottom-color: #26363a;
}
.topbar strong { color: #f4fbf9; font-size: 18px; }
.workspace { max-width: 1560px; }
.card {
  background: #10191c;
  border-color: #26363a;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.order-tool { border-top: 2px solid #21c9bf; }
.orders { border-top: 2px solid #5c92ff; }
.credits { border-top: 2px solid #d9aa53; }
.balance {
  border-color: #2d4143;
  background: #0b1214;
}
.balance div + div { border-left-color: #2d4143; }
.balance span, .section-title span, .empty { color: #8ca5a3; }
.balance strong { color: #f1faf7; }
.balance div:first-child strong { color: #42dbd0; }
form label { color: #bdd0ce; }
input, textarea, select {
  border-color: #2d4042;
  background: #0b1214;
  color: #f0f8f5;
}
input::placeholder, textarea::placeholder { color: #6e8585; }
input:focus, textarea:focus, select:focus {
  border-color: #31d0c5;
  box-shadow: 0 0 0 2px rgba(49, 208, 197, .18);
}
.primary {
  background: #20c5bd;
  color: #061617;
  font-weight: 700;
}
.primary:hover { background: #61d9d1; }
.secondary {
  background: #111d20;
  color: #91e8e0;
  border-color: #315054;
}
.secondary:hover { background: #17292c; }
.presets button {
  background: #111d20;
  color: #8ce2db;
  border-color: #315054;
}
.presets button:hover { background: #183034; }
th {
  background: #0b1316;
  color: #a6c3c0;
  border-bottom: 1px solid #2b3e40;
}
td { border-bottom-color: #233235; color: #dce9e6; }
tbody tr:hover td { background: #142124; }
.pending, .submitting { background: #3c321b; color: #f4c76d; }
.running { background: #173244; color: #83c7ff; }
.done { background: #17372f; color: #76e1be; }
.failed { background: #3b2024; color: #ffafb7; }
.uncertain { background: #3d2b1b; color: #f4c277; }
.form-message { color: #ff9ca8; }
.form-message.ok { color: #70dfb5; }

body[data-page="login"], body[data-page="register"] {
  position: relative;
  isolation: isolate;
  background: #080c0e;
}
body[data-page="login"]::before, body[data-page="register"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #080c0e;
  background-image: url("/assets/delta-force-background.jpg");
  background-repeat: no-repeat;
  background-position: center 4vh;
  background-size: min(680px, 78vw) auto;
  opacity: .34;
}
.auth-wrap {
  width: min(440px, calc(100% - 32px));
  padding: 32px;
  background: rgba(13, 22, 25, .94);
  border-color: #385052;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .46);
}
.auth-wrap h1 {
  margin-bottom: 26px;
  color: #f2fbf8;
  font-size: 28px;
}
.auth-brand {
  margin: 0 0 10px;
  color: #73e4dc;
  font-size: 14px;
  font-weight: 700;
}
.auth-wrap h1::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-top: 12px;
  background: #29cbc1;
}
.auth-form .primary { min-height: 46px; }
.auth-link { color: #65ddd5; }

@media (max-width: 700px) and (orientation: portrait) {
  .topbar { min-height: 56px; padding: 9px 14px; }
  .workspace { padding: 14px; }
  .card { padding: 16px; }
  .orders tr, .credits tr {
    background: #0b1316;
    border-color: #2b4042;
  }
  .orders td::before, .credits td::before { color: #8ba5a3; }
  body[data-page="login"], body[data-page="register"] { padding: 20px 16px; }
  body[data-page="login"]::before, body[data-page="register"]::before {
    background-position: center 18px;
    background-size: min(460px, 88vw) auto;
    opacity: .28;
  }
  .auth-wrap { width: 100%; padding: 28px 22px; }
  .auth-wrap h1 { font-size: 26px; }
}

/* Agent workspace keeps the existing teal identity in both modes. */
body[data-page="app"][data-theme="light"] { background: #e7f3f2; color: #17383b; }
body[data-page="app"][data-theme="light"] a { color: #087f78; }
body[data-page="app"][data-theme="light"] .topbar { background: #f9ffff; border-bottom-color: #b8d9d6; }
body[data-page="app"][data-theme="light"] .card { background: #ffffff; border-color: #c7e0de; box-shadow: 0 10px 24px rgba(19, 90, 86, .10); }
body[data-page="app"][data-theme="light"] .order-tool { border-top-color: #18b9af; }
body[data-page="app"][data-theme="light"] .orders { border-top-color: #4294d5; }
body[data-page="app"][data-theme="light"] .credits { border-top-color: #d39b3f; }
body[data-page="app"][data-theme="light"] .balance { background: #f2fbfa; border-color: #c7e0de; }
body[data-page="app"][data-theme="light"] .balance div + div { border-left-color: #c7e0de; }
body[data-page="app"][data-theme="light"] .balance span,
body[data-page="app"][data-theme="light"] .section-title span,
body[data-page="app"][data-theme="light"] .empty { color: #5d8280; }
body[data-page="app"][data-theme="light"] .balance strong { color: #17383b; }
body[data-page="app"][data-theme="light"] .balance div:first-child strong { color: #078d85; }
body[data-page="app"][data-theme="light"] form label { color: #28595a; }
body[data-page="app"][data-theme="light"] input,
body[data-page="app"][data-theme="light"] textarea,
body[data-page="app"][data-theme="light"] select { background: #ffffff; border-color: #a9cecb; color: #17383b; }
body[data-page="app"][data-theme="light"] input:focus,
body[data-page="app"][data-theme="light"] textarea:focus,
body[data-page="app"][data-theme="light"] select:focus { border-color: #16aca3; box-shadow: 0 0 0 2px rgba(22, 172, 163, .16); }
body[data-page="app"][data-theme="light"] .primary { background: #16aaa2; color: #ffffff; }
body[data-page="app"][data-theme="light"] .primary:hover { background: #078d85; }
body[data-page="app"][data-theme="light"] .secondary,
body[data-page="app"][data-theme="light"] .presets button { background: #f8ffff; color: #087f78; border-color: #9fcfcb; }
body[data-page="app"][data-theme="light"] .secondary:hover,
body[data-page="app"][data-theme="light"] .presets button:hover { background: #dff4f2; }
body[data-page="app"][data-theme="light"] th { background: #e7f6f4; color: #2d6664; border-bottom-color: #c7e0de; }
body[data-page="app"][data-theme="light"] td { color: #244b4d; border-bottom-color: #dcebea; }
body[data-page="app"][data-theme="light"] tbody tr:hover td { background: #f1fbfa; }

@media (max-width: 700px) and (orientation: portrait) {
  body[data-page="app"][data-theme="light"] .orders tr,
  body[data-page="app"][data-theme="light"] .credits tr { background: #ffffff; border-color: #c7e0de; }
  body[data-page="app"][data-theme="light"] .orders td::before,
  body[data-page="app"][data-theme="light"] .credits td::before { color: #5d8280; }
}

/* Owner admin matches the established 8088 light workbench. */
body[data-page="admin"][data-theme="light"] { background: #eef4fb; color: #18324a; }
body[data-page="admin"][data-theme="light"] a { color: #2563eb; }
body[data-page="admin"][data-theme="light"] .topbar { background: #ffffff; border-bottom-color: #d9e6f5; }
body[data-page="admin"][data-theme="light"] .topbar strong { color: #18324a; }
body[data-page="admin"][data-theme="light"] .card { background: #ffffff; border-color: #d9e6f5; border-radius: 14px; box-shadow: 0 8px 22px rgba(21, 48, 92, .06); }
body[data-page="admin"][data-theme="light"] input,
body[data-page="admin"][data-theme="light"] select,
body[data-page="admin"][data-theme="light"] .primary,
body[data-page="admin"][data-theme="light"] .secondary { border-radius: 10px; }
body[data-page="admin"][data-theme="light"] form label { color: #405a76; }
body[data-page="admin"][data-theme="light"] input,
body[data-page="admin"][data-theme="light"] textarea,
body[data-page="admin"][data-theme="light"] select { background: #ffffff; border-color: #d6e2f0; color: #18324a; }
body[data-page="admin"][data-theme="light"] input:focus,
body[data-page="admin"][data-theme="light"] textarea:focus,
body[data-page="admin"][data-theme="light"] select:focus { border-color: #2563eb; box-shadow: 0 0 0 2px #dbeafe; }
body[data-page="admin"][data-theme="light"] .primary { background: #2563eb; color: #ffffff; }
body[data-page="admin"][data-theme="light"] .primary:hover { background: #1d4ed8; }
body[data-page="admin"][data-theme="light"] .secondary { background: #ffffff; color: #2563eb; border-color: #cfe0f5; }
body[data-page="admin"][data-theme="light"] .secondary:hover { background: #f1f6ff; }
body[data-page="admin"][data-theme="light"] th { background: #eaf3ff; color: #284966; border-bottom-color: #d9e6f5; }
body[data-page="admin"][data-theme="light"] td { color: #18324a; border-bottom-color: #edf2f7; }
body[data-page="admin"][data-theme="light"] tbody tr:hover td { background: #f6f9ff; }
body[data-page="admin"][data-theme="light"] .helper-text,
body[data-page="admin"][data-theme="light"] .empty { color: #6b7f99; }
body[data-page="admin"][data-theme="light"] .generated-invite { background: #f7fbff; border-color: #d9e6f5; }
body[data-page="admin"][data-theme="light"] .generated-invite span { color: #6b7f99; }
body[data-page="admin"][data-theme="light"] .generated-invite strong { color: #18324a; }
body[data-page="admin"][data-theme="light"] .agent-delete-menu { position: fixed; z-index: 10; min-width: 150px; padding: 10px 14px; border: 1px solid #fecaca; border-radius: 8px; background: #ffffff; color: #dc2626; box-shadow: 0 10px 24px rgba(21, 48, 92, .16); text-align: left; }
body[data-page="admin"][data-theme="light"] .agent-delete-menu:hover { background: #fff1f2; }
body[data-page="admin"][data-theme="light"] .usage-progress { width: 150px; height: 8px; overflow: hidden; border-radius: 999px; background: #e1ebf8; }
body[data-page="admin"][data-theme="light"] .usage-progress span { display: block; height: 100%; border-radius: inherit; background: #2563eb; }
body[data-page="admin"][data-theme="light"] .usage-progress + small { display: block; margin-top: 6px; color: #6b7f99; font-size: 12px; white-space: nowrap; }
body[data-page="admin"][data-theme="light"] .done { background: #ddf9e7; color: #18a352; }
body[data-page="admin"][data-theme="light"] .running { background: #e3eeff; color: #2f66e3; }
body[data-page="admin"][data-theme="light"] .pending,
body[data-page="admin"][data-theme="light"] .submitting { background: #fff3d7; color: #aa7600; }
body[data-page="admin"][data-theme="light"] .failed { background: #ffe1e5; color: #dc5a69; }

.agent-usage-trigger { cursor: pointer; }
.agent-usage-trigger:focus-visible td { outline: 2px solid #2563eb; outline-offset: -2px; }
.agent-usage-modal[hidden] { display: none; }
.agent-usage-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(19, 37, 58, .34); }
.agent-usage-panel { display: flex; flex-direction: column; width: min(920px, 100%); max-height: calc(100dvh - 32px); overflow: hidden; padding: 18px; border: 1px solid #d9e6f5; border-radius: 8px; background: #ffffff; box-shadow: 0 22px 56px rgba(21, 48, 92, .22); }
.agent-usage-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.agent-usage-heading h2 { margin: 0; color: #18324a; font-size: 20px; }
.agent-usage-close { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #405a76; font-size: 26px; line-height: 1; }
.agent-usage-close:hover { background: #eef4fb; color: #18324a; }
.agent-usage-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.agent-usage-summary div { padding: 10px 12px; border: 1px solid #dce7f3; border-radius: 6px; background: #f6f9fd; }
.agent-usage-summary span { display: block; color: #6b7f99; font-size: 12px; }
.agent-usage-summary strong { display: block; margin-top: 3px; color: #18324a; font-size: 20px; line-height: 1.2; }
.agent-usage-message { min-height: 0; margin: 0 0 8px; color: #6b7f99; font-size: 13px; }
.agent-usage-message[hidden] { display: none; }
.agent-usage-message.error { color: #dc5a69; }
.agent-usage-panel .table-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.agent-usage-table { min-width: 0; table-layout: fixed; }
.agent-usage-table th { position: sticky; top: 0; z-index: 1; }
.agent-usage-table th, .agent-usage-table td { padding: 8px 10px; }
.agent-usage-table th:nth-child(1) { width: 34%; }
.agent-usage-table th:nth-child(2) { width: 22%; }
.agent-usage-table th:nth-child(3) { width: 18%; }
.agent-usage-table th:nth-child(4) { width: 26%; }
.agent-usage-table td { height: 43px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.agent-usage-table td:first-child { white-space: nowrap; }
.agent-usage-table td strong, .agent-usage-table td small { display: block; }
.agent-usage-table td small { margin-top: 3px; color: #6b7f99; font-size: 11px; white-space: nowrap; }
.agent-usage-table td:last-child { white-space: pre-line; line-height: 1.35; }
.agent-usage-pager { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 34px; margin-top: 10px; }
.agent-usage-pager button { width: 32px; height: 32px; padding: 0; border: 1px solid #d2dfed; border-radius: 6px; background: #f6f9fd; color: #284966; font-size: 22px; line-height: 1; }
.agent-usage-pager button:hover:not(:disabled) { border-color: #2563eb; background: #eef4ff; color: #2563eb; }
.agent-usage-pager button:disabled { opacity: .38; cursor: default; }
.agent-usage-pager span { min-width: 54px; color: #405a76; font-size: 13px; text-align: center; }

@media (max-width: 700px) and (orientation: portrait) {
  .agent-usage-modal { padding: 8px; }
  .agent-usage-panel { max-height: calc(100dvh - 16px); padding: 12px; }
  .agent-usage-heading { margin-bottom: 8px; }
  .agent-usage-heading h2 { font-size: 17px; }
  .agent-usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .agent-usage-summary div { padding: 7px 9px; }
  .agent-usage-summary strong { font-size: 17px; }
  .agent-usage-table th, .agent-usage-table td { padding: 7px 5px; }
  .agent-usage-table td { height: 42px; font-size: 11px; }
  .agent-usage-table td small { font-size: 10px; }
}

/* Agent workspace: a calm day surface and a coordinated dark counterpart. */
body[data-page="app"] .workspace { max-width: 1500px; padding: 30px; }
body[data-page="app"] .work-grid { grid-template-columns: minmax(310px, 360px) minmax(0, 1fr); grid-template-areas: "order orders"; gap: 20px; }
body[data-page="app"] .card { padding: 22px; border-radius: 12px; }
body[data-page="app"] .balance { border-radius: 10px; }
body[data-page="app"] .theme-toggle { border-radius: 50%; }
body[data-page="app"][data-theme="light"] { background: #eef4fb; color: #18324a; }
body[data-page="app"][data-theme="light"] a { color: #2563eb; }
body[data-page="app"][data-theme="light"] .topbar { background: #ffffff; border-bottom-color: #d9e6f5; }
body[data-page="app"][data-theme="light"] .topbar strong { color: #18324a; }
body[data-page="app"][data-theme="light"] .card { background: #ffffff; border-color: #d9e6f5; box-shadow: 0 8px 22px rgba(21, 48, 92, .06); }
body[data-page="app"][data-theme="light"] .order-tool { border-top-color: #2563eb; }
body[data-page="app"][data-theme="light"] .orders { border-top: 1px solid #d9e6f5; }
body[data-page="app"][data-theme="light"] .credits { border-top-color: #d9a24c; }
body[data-page="app"][data-theme="light"] .balance { background: #f7fbff; border-color: #d9e6f5; }
body[data-page="app"][data-theme="light"] .balance div + div { border-left-color: #d9e6f5; }
body[data-page="app"][data-theme="light"] .balance span,
body[data-page="app"][data-theme="light"] .section-title span,
body[data-page="app"][data-theme="light"] .empty { color: #6b7f99; }
body[data-page="app"][data-theme="light"] .balance strong { color: #18324a; }
body[data-page="app"][data-theme="light"] .balance div:first-child strong { color: #2563eb; }
body[data-page="app"][data-theme="light"] form label { color: #405a76; }
body[data-page="app"][data-theme="light"] input,
body[data-page="app"][data-theme="light"] textarea,
body[data-page="app"][data-theme="light"] select { background: #ffffff; border-color: #d6e2f0; color: #18324a; }
body[data-page="app"][data-theme="light"] input:focus,
body[data-page="app"][data-theme="light"] textarea:focus,
body[data-page="app"][data-theme="light"] select:focus { border-color: #2563eb; box-shadow: 0 0 0 2px #dbeafe; }
body[data-page="app"][data-theme="light"] .primary { background: #2563eb; color: #ffffff; }
body[data-page="app"][data-theme="light"] .primary:hover { background: #1d4ed8; }
body[data-page="app"][data-theme="light"] .secondary,
body[data-page="app"][data-theme="light"] .presets button { background: #ffffff; color: #2563eb; border-color: #cfe0f5; }
body[data-page="app"][data-theme="light"] .secondary:hover,
body[data-page="app"][data-theme="light"] .presets button:hover { background: #f1f6ff; }
body[data-page="app"][data-theme="light"] th { background: #eaf3ff; color: #284966; border-bottom-color: #d9e6f5; }
body[data-page="app"][data-theme="light"] td { color: #18324a; border-bottom-color: #edf2f7; }
body[data-page="app"][data-theme="light"] tbody tr:hover td { background: #f6f9ff; }
body[data-page="app"][data-theme="light"] .status.done {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #18a352;
}
body[data-page="app"] .orders .recording-link { display: inline-block; font-size: 15px; font-weight: 700; }

body[data-page="app"][data-theme="dark"] { background: #121719; color: #e8f0ee; }
body[data-page="app"][data-theme="dark"] a { color: #77d8cf; }
body[data-page="app"][data-theme="dark"] .topbar { background: #171f22; border-bottom-color: #304044; }
body[data-page="app"][data-theme="dark"] .topbar strong { color: #eef7f4; }
body[data-page="app"][data-theme="dark"] .card { background: #1a2326; border-color: #304044; box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }
body[data-page="app"][data-theme="dark"] .order-tool { border-top-color: #47c7bc; }
body[data-page="app"][data-theme="dark"] .orders { border-top: 1px solid #304044; }
body[data-page="app"][data-theme="dark"] .credits { border-top-color: #e4b466; }
body[data-page="app"][data-theme="dark"] .balance { background: #141c1f; border-color: #34474a; }
body[data-page="app"][data-theme="dark"] .balance div + div { border-left-color: #34474a; }
body[data-page="app"][data-theme="dark"] .balance span,
body[data-page="app"][data-theme="dark"] .section-title span,
body[data-page="app"][data-theme="dark"] .empty { color: #9bb0ae; }
body[data-page="app"][data-theme="dark"] .balance strong { color: #edf7f4; }
body[data-page="app"][data-theme="dark"] .balance div:first-child strong { color: #61d9cf; }
body[data-page="app"][data-theme="dark"] form label { color: #bfd0cd; }
body[data-page="app"][data-theme="dark"] input,
body[data-page="app"][data-theme="dark"] textarea,
body[data-page="app"][data-theme="dark"] select { background: #141c1f; border-color: #394d50; color: #edf7f4; }
body[data-page="app"][data-theme="dark"] input::placeholder,
body[data-page="app"][data-theme="dark"] textarea::placeholder { color: #809593; }
body[data-page="app"][data-theme="dark"] input:focus,
body[data-page="app"][data-theme="dark"] textarea:focus,
body[data-page="app"][data-theme="dark"] select:focus { border-color: #5ad0c6; box-shadow: 0 0 0 2px rgba(90, 208, 198, .18); }
body[data-page="app"][data-theme="dark"] .primary { background: #4ec8be; color: #102220; }
body[data-page="app"][data-theme="dark"] .primary:hover { background: #77dbd2; }
body[data-page="app"][data-theme="dark"] .secondary,
body[data-page="app"][data-theme="dark"] .presets button { background: #202c2f; color: #a9e6df; border-color: #3c5254; }
body[data-page="app"][data-theme="dark"] .secondary:hover,
body[data-page="app"][data-theme="dark"] .presets button:hover { background: #28383b; }
body[data-page="app"][data-theme="dark"] th { background: #162023; color: #b5c9c6; border-bottom-color: #34474a; }
body[data-page="app"][data-theme="dark"] td { color: #deebe8; border-bottom-color: #2c3d40; }
body[data-page="app"][data-theme="dark"] tbody tr:hover td { background: #202c2f; }
body[data-page="app"][data-theme="dark"] .pending,
body[data-page="app"][data-theme="dark"] .submitting { background: #3f321c; color: #f2c979; }
body[data-page="app"][data-theme="dark"] .running { background: #1d3446; color: #97caff; }
body[data-page="app"][data-theme="dark"] .done { background: #1c3b33; color: #83e1bc; }
body[data-page="app"][data-theme="dark"] .failed { background: #402429; color: #ffb3ba; }
body[data-page="app"][data-theme="dark"] .uncertain { background: #49341d; color: #f5cb83; }

@media (max-width: 700px) and (orientation: portrait) {
  body[data-page="app"] .workspace { padding: 14px; }
  body[data-page="app"] .work-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "order" "orders"; gap: 14px; }
  body[data-page="app"] .card { padding: 16px; border-radius: 10px; }
  body[data-page="app"][data-theme="light"] .orders tr,
  body[data-page="app"][data-theme="light"] .credits tr { background: #ffffff; border-color: #d9e6f5; }
  body[data-page="app"][data-theme="light"] .orders td::before,
  body[data-page="app"][data-theme="light"] .credits td::before { color: #6b7f99; }
  body[data-page="app"][data-theme="dark"] .orders tr,
  body[data-page="app"][data-theme="dark"] .credits tr { background: #182225; border-color: #34474a; }
  body[data-page="app"][data-theme="dark"] .orders td::before,
  body[data-page="app"][data-theme="dark"] .credits td::before { color: #9bb0ae; }
}

/* Registration keeps the supplied artwork at a comfortable, distant scale. */
body[data-page="register"]::before {
  background-image: url("/assets/delta-force-register.jpg");
  background-position: center 8vh;
  background-size: min(620px, 54vw) auto;
  opacity: .42;
}

@media (max-width: 700px) and (orientation: portrait) {
  body[data-page="register"]::before {
    background-position: center 7vh;
    background-size: min(440px, 84vw) auto;
    opacity: .36;
  }
}

/* Login uses the supplied key art as a full, restrained backdrop. */
body[data-page="login"]::before {
  background-color: #080d0f;
  background-image: linear-gradient(180deg, rgba(5, 10, 12, .28), rgba(5, 10, 12, .72)), url("/assets/delta-force-register.jpg");
  background-position: center, center 24%;
  background-size: cover, cover;
  opacity: 1;
}
body[data-page="login"] .auth-wrap {
  width: min(452px, calc(100% - 32px));
  padding: 36px;
  border-color: rgba(106, 202, 194, .46);
  background: rgba(8, 18, 20, .84);
  box-shadow: 0 26px 62px rgba(0, 0, 0, .48);
  backdrop-filter: blur(14px) saturate(112%);
}
body[data-page="login"] .auth-wrap h1 { font-size: 30px; }
body[data-page="login"] .auth-form .primary {
  min-height: 50px;
  background: #31c5be;
  color: #071516;
}
body[data-page="login"] .auth-form .primary:hover { background: #55d8d1; }
body[data-page="login"] .auth-link { margin-top: 26px; color: #82e5de; font-weight: 700; }

@media (max-width: 700px) and (orientation: portrait) {
  body[data-page="login"] { padding: 20px 16px; }
  body[data-page="login"]::before { background-position: center, center top; }
  body[data-page="login"] .auth-wrap { width: 100%; padding: 28px 22px; }
  body[data-page="login"] .auth-wrap h1 { font-size: 27px; }
}

/* Unified agent authentication: restrained forest-green mobile style. */
body[data-page="login"],
body[data-page="register"] {
  background: #09170e;
  font-family: system-ui, "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
body[data-page="login"]::before,
body[data-page="register"]::before {
  background-color: #09170e;
  background-image: none;
  opacity: 1;
  filter: none;
}
body[data-page="login"] .auth-wrap,
body[data-page="register"] .auth-wrap {
  width: min(440px, calc(100% - 32px));
  margin: 24px 0;
  padding: 34px;
  border: 1px solid rgba(145, 190, 149, .36);
  border-radius: 8px;
  background: rgba(12, 31, 19, .90);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .42);
  backdrop-filter: blur(14px) saturate(108%);
}
body[data-page="login"] .auth-wrap h1,
body[data-page="register"] .auth-wrap h1 {
  margin-bottom: 24px;
  color: #f1f7ee;
  font-size: 29px;
}
body[data-page="login"] .auth-wrap h1::after,
body[data-page="register"] .auth-wrap h1::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 14px;
  background: #83ae78;
}
body[data-page="login"] .auth-form label,
body[data-page="register"] .auth-form label {
  margin: 18px 0 9px;
  color: #cadbc9;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
body[data-page="login"] .auth-form input,
body[data-page="register"] .auth-form input {
  padding: 13px 14px;
  border-color: rgba(143, 181, 146, .32);
  border-radius: 6px;
  background: rgba(4, 16, 8, .58);
  color: #f2f7ef;
  font-size: 16px;
  line-height: 1.4;
}
body[data-page="login"] .auth-form input::placeholder,
body[data-page="register"] .auth-form input::placeholder { color: #97ad99; }
body[data-page="login"] .auth-form input:focus,
body[data-page="register"] .auth-form input:focus {
  border-color: #8fbc86;
  box-shadow: 0 0 0 2px rgba(143, 188, 134, .16);
}
body[data-page="login"] .auth-form .primary,
body[data-page="register"] .auth-form .primary {
  min-height: 48px;
  margin-top: 20px;
  border-radius: 6px;
  background: #86ad78;
  color: #0a1b0d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
body[data-page="login"] .auth-form .primary:hover,
body[data-page="register"] .auth-form .primary:hover { background: #a3c596; }
body[data-page="login"] .auth-link,
body[data-page="register"] .auth-link { margin-top: 24px; color: #a8d69e; font-weight: 700; }
body[data-page="register"] .auth-help {
  min-height: 50px;
  border-color: #a8d69e;
  border-radius: 6px;
  background: #315d36;
  color: #efffea;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
}
body[data-page="register"] .auth-help:hover { background: #427a49; color: #ffffff; }
body[data-page="register"] .support-panel { border-color: rgba(145, 190, 149, .36); background: #0c1f13; }

@media (max-width: 700px) and (orientation: portrait) {
  body[data-page="login"],
  body[data-page="register"] { padding: 20px 16px; }
  body[data-page="login"]::before,
  body[data-page="register"]::before { background-position: center top; }
  body[data-page="login"] .auth-wrap,
  body[data-page="register"] .auth-wrap { width: 100%; padding: 28px 22px; }
  body[data-page="login"] .auth-wrap h1,
  body[data-page="register"] .auth-wrap h1 { font-size: 27px; }
}

/* Agent authentication uses the supplied artwork as a distant top-only detail. */
body[data-page="login"],
body[data-page="register"] {
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(270px, 28vh, 340px) 16px 48px;
  background: #f1f3f5;
  color: #202b35;
  font-family: system-ui, "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
body[data-page="login"]::before,
body[data-page="register"]::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background-color: #f1f3f5;
  background-image: linear-gradient(180deg, rgba(241, 243, 245, 0) 0%, rgba(241, 243, 245, .3) 38%, #f1f3f5 78%), url("/assets/delta-force-register.jpg");
  background-position: center top, center -138px;
  background-repeat: no-repeat;
  background-size: 100% 470px, min(820px, 68vw) auto;
  opacity: 1;
  filter: none;
}
body[data-page="login"] .auth-wrap,
body[data-page="register"] .auth-wrap {
  width: min(448px, 100%);
  margin: 0 auto;
  padding: 34px;
  border: 1px solid #d5dbe1;
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 54px rgba(28, 38, 48, .15);
  backdrop-filter: blur(10px);
}
body[data-page="login"] .auth-wrap h1,
body[data-page="register"] .auth-wrap h1 {
  margin-bottom: 25px;
  color: #202b35;
  font-size: 29px;
  letter-spacing: 0;
}
body[data-page="login"] .auth-wrap h1::after,
body[data-page="register"] .auth-wrap h1::after {
  width: 38px;
  height: 2px;
  margin-top: 13px;
  background: #778a9a;
}
body[data-page="login"] .auth-form label,
body[data-page="register"] .auth-form label {
  margin: 18px 0 9px;
  color: #4c5b68;
  font-size: 15px;
  font-weight: 650;
}
body[data-page="login"] .auth-form input,
body[data-page="register"] .auth-form input {
  padding: 13px 14px;
  border-color: #d5dce3;
  border-radius: 6px;
  background: #f8fafb;
  color: #202b35;
  font-size: 16px;
}
body[data-page="login"] .auth-form input::placeholder,
body[data-page="register"] .auth-form input::placeholder { color: #99a5af; }
body[data-page="login"] .auth-form input:focus,
body[data-page="register"] .auth-form input:focus {
  border-color: #788d9f;
  box-shadow: 0 0 0 3px rgba(120, 141, 159, .16);
}
body[data-page="login"] .auth-form .primary,
body[data-page="register"] .auth-form .primary {
  min-height: 50px;
  margin-top: 21px;
  border-radius: 6px;
  background: #202b35;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}
body[data-page="login"] .auth-form .primary:hover,
body[data-page="register"] .auth-form .primary:hover { background: #111a22; }
body[data-page="login"] .auth-link,
body[data-page="register"] .auth-link { margin-top: 24px; color: #4d6d85; font-weight: 700; }
body[data-page="register"] .auth-help {
  min-height: 50px;
  border-color: #aebbc5;
  border-radius: 6px;
  background: #eef2f5;
  color: #273542;
  font-size: 17px;
  font-weight: 700;
  box-shadow: none;
}
body[data-page="register"] .auth-help:hover { background: #e2e8ed; color: #111a22; }
body[data-page="register"] .support-panel { border-color: #d5dbe1; background: #ffffff; }

@media (max-width: 700px) and (orientation: portrait) {
  body[data-page="login"],
  body[data-page="register"] { padding: 270px 16px 32px; }
  body[data-page="login"]::before,
  body[data-page="register"]::before {
    background-size: 100% 390px, min(590px, 118vw) auto;
    background-position: center top, center -82px;
  }
  body[data-page="login"] .auth-wrap,
  body[data-page="register"] .auth-wrap { width: 100%; padding: 28px 22px; }
  body[data-page="login"] .auth-wrap h1,
  body[data-page="register"] .auth-wrap h1 { font-size: 27px; }
}

/* Fixed dark glass treatment for agent authentication. */
html:has(body[data-page="login"]),
html:has(body[data-page="register"]) { overflow: hidden; background: #080c10; }
body[data-page="login"],
body[data-page="register"] {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  padding: 20px;
  background: #080c10;
  color: #eff3f6;
}
body[data-page="login"]::before,
body[data-page="register"]::before {
  z-index: 0;
  background-color: #080c10;
  background-image: linear-gradient(180deg, rgba(8, 12, 16, .08) 0%, rgba(8, 12, 16, .42) 34%, #080c10 74%), url("/assets/delta-force-register.jpg");
  background-position: center top, center -132px;
  background-repeat: no-repeat;
  background-size: 100% 470px, min(780px, 60vw) auto;
  opacity: 1;
}
body[data-page="login"] .auth-wrap,
body[data-page="register"] .auth-wrap {
  position: relative;
  z-index: 1;
  width: min(438px, 100%);
  margin: 0;
  padding: 26px 28px;
  border: 1px solid rgba(221, 232, 240, .22);
  border-radius: 8px;
  background: rgba(17, 25, 32, .62);
  box-shadow: 0 24px 58px rgba(0, 0, 0, .42);
  backdrop-filter: blur(18px) saturate(112%);
}
body[data-page="login"] .auth-wrap {
  transform: translateY(58px);
}
body[data-page="login"] .auth-wrap h1,
body[data-page="register"] .auth-wrap h1 {
  margin-bottom: 19px;
  color: #63acef;
  font-size: 27px;
  text-align: center;
}
body[data-page="login"] .auth-wrap h1::after,
body[data-page="register"] .auth-wrap h1::after {
  display: none;
  width: 34px;
  height: 2px;
  margin: 11px auto 0;
  background: #f1a04b;
}
body[data-page="login"] .auth-form label,
body[data-page="register"] .auth-form label {
  margin: 12px 0 7px;
  color: #d3dce3;
  font-size: 14px;
  font-weight: 650;
}
body[data-page="login"] .auth-form input,
body[data-page="register"] .auth-form input {
  min-height: 42px;
  margin-top: 6px;
  padding: 10px 12px;
  border-color: rgba(218, 229, 237, .2);
  border-radius: 6px;
  background: rgba(4, 8, 12, .46);
  color: #f4f7f9;
  font-size: 15px;
}
body[data-page="login"] .auth-form input::placeholder,
body[data-page="register"] .auth-form input::placeholder { color: #aab6bf; }
body[data-page="login"] .auth-form input:focus,
body[data-page="register"] .auth-form input:focus {
  border-color: rgba(210, 224, 233, .68);
  box-shadow: 0 0 0 3px rgba(176, 195, 208, .15);
}
body[data-page="login"] .auth-form .primary,
body[data-page="register"] .auth-form .primary {
  min-height: 46px;
  margin-top: 15px;
  border-radius: 6px;
  background: #dbe5ec;
  color: #16212a;
  font-size: 16px;
  font-weight: 750;
}
body[data-page="login"] .auth-form .primary:hover,
body[data-page="register"] .auth-form .primary:hover { background: #f5f8fa; }
body[data-page="login"] .auth-link,
body[data-page="register"] .auth-link { margin-top: 18px; color: #d6e1e8; font-weight: 700; }
body[data-page="register"] .auth-help {
  min-height: 44px;
  margin-top: 13px;
  border-color: rgba(214, 227, 236, .34);
  border-radius: 6px;
  background: rgba(202, 216, 226, .12);
  color: #edf4f8;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}
body[data-page="register"] .auth-help:hover { background: rgba(222, 233, 240, .22); color: #ffffff; }
body[data-page="register"] .support-panel { border-color: rgba(221, 232, 240, .24); background: #11191f; }
body[data-page="register"] .support-panel h2 { color: #63acef; }
body[data-page="register"] .auth-help { color: #f4aa5c; }

@media (max-width: 700px) and (orientation: portrait) {
  body[data-page="login"],
  body[data-page="register"] { padding: 14px 16px; }
  body[data-page="login"]::before,
  body[data-page="register"]::before {
    background-size: 100% 330px, min(560px, 142vw) auto;
    background-position: center top, center -86px;
  }
  body[data-page="login"] .auth-wrap,
  body[data-page="register"] .auth-wrap { padding: 22px 20px; }
  body[data-page="login"] .auth-wrap { transform: translateY(38px); }
  body[data-page="login"] .auth-wrap h1,
  body[data-page="register"] .auth-wrap h1 { margin-bottom: 16px; font-size: 25px; }
}

@media (max-height: 740px) {
  body[data-page="login"] .auth-wrap,
  body[data-page="register"] .auth-wrap { padding: 18px 20px; }
  body[data-page="login"] .auth-wrap { transform: translateY(24px); }
  body[data-page="login"] .auth-wrap h1,
  body[data-page="register"] .auth-wrap h1 { margin-bottom: 12px; font-size: 23px; }
  body[data-page="login"] .auth-form label,
  body[data-page="register"] .auth-form label { margin-top: 8px; }
  body[data-page="login"] .auth-form input,
  body[data-page="register"] .auth-form input { min-height: 38px; padding: 8px 11px; }
  body[data-page="register"] .auth-help { min-height: 40px; margin-top: 9px; }
  body[data-page="login"] .auth-link,
  body[data-page="register"] .auth-link { margin-top: 12px; }
}