:root {
  color: #17243b;
  background: #f5f7fb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-weight: 400;
  --ink: #17243b;
  --muted: #718096;
  --line: #e6eaf1;
  --blue: #315fe8;
  --blue-dark: #244bc0;
  --green: #16865d;
  --red: #bd3441;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 82% 4%, rgb(94 129 235 / 10%), transparent 28rem),
    radial-gradient(ellipse at 4% 48%, rgb(96 181 204 / 5%), transparent 24rem),
    #f5f7fb;
}

button, input, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid rgb(49 95 232 / 25%);
  outline-offset: 2px;
}

.shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 25px 0 64px; }
.topbar, .topbar-actions, .brand, .secure-badge, .section-heading, .actions, .pagination {
  display: flex;
  align-items: center;
}
.topbar, .section-heading, .pagination { justify-content: space-between; gap: 20px; }
.topbar { min-height: 52px; margin-bottom: 48px; }
.topbar-actions { gap: 16px; }

.brand { gap: 12px; color: inherit; text-decoration: none; }
.brand-mark {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #6b8bf5 4%, #4368e7 48%, #3151c5 100%);
  box-shadow: 0 8px 14px rgb(49 75 174 / 20%), inset 0 1px 1px rgb(255 255 255 / 55%), inset 0 -3px 5px rgb(25 48 137 / 18%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.brand:hover .brand-mark { transform: perspective(100px) rotateY(-12deg) rotateX(7deg) translateY(-2px); box-shadow: 0 12px 19px rgb(49 75 174 / 25%), inset 0 1px 1px rgb(255 255 255 / 55%); }
.brand-mark span { position: absolute; width: 15px; height: 15px; border: 2px solid white; border-radius: 50%; }
.brand-mark span:first-child { transform: translate(-4px, -2px); }
.brand-mark span:last-child { transform: translate(4px, 3px); opacity: .8; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 1.03rem; letter-spacing: -.025em; }
.brand-copy span { color: #8490a4; font-size: .63rem; font-weight: 800; letter-spacing: .14em; }
.secure-badge { gap: 8px; padding: 8px 11px; border: 1px solid #e3e8f0; border-radius: 99px; background: rgb(255 255 255 / 75%); color: #64728a; font-size: .78rem; font-weight: 650; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #a4afbf; }

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 9px; font-size: clamp(1.8rem, 4vw, 2.45rem); letter-spacing: -.055em; line-height: 1.12; }
h2 { margin-bottom: 7px; font-size: 1.17rem; letter-spacing: -.025em; }
.eyebrow { margin-bottom: 9px; color: #71809a; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.eyebrow span { padding: 0 4px; color: #b0b8c5; }
.muted { color: var(--muted); font-size: .89rem; line-height: 1.55; }
.page-heading { position: relative; display: flex; min-height: 162px; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 23px; padding: 21px 25px; overflow: hidden; border: 1px solid rgb(222 230 246 / 90%); border-radius: 17px; background: linear-gradient(112deg, rgb(255 255 255 / 97%) 2%, rgb(250 252 255 / 94%) 56%, rgb(238 244 255 / 94%) 100%); box-shadow: 0 12px 28px rgb(31 55 105 / 5%), inset 0 1px 0 white; }
.page-heading > div:first-child { position: relative; z-index: 2; max-width: 470px; }
.page-heading .muted { margin-bottom: 0; }
.hero-art { position: absolute; top: 50%; right: 190px; width: 250px; height: 150px; transform: translateY(-50%); perspective: 700px; pointer-events: none; }
.hero-sphere { position: absolute; top: 16px; left: 80px; display: grid; width: 115px; height: 115px; place-items: center; border: 1px solid rgb(255 255 255 / 75%); border-radius: 50%; background: radial-gradient(circle at 31% 24%, #fff 0 3%, #cbd9ff 9%, #7697f4 37%, #5474df 64%, #3758bf 100%); box-shadow: inset -12px -14px 23px rgb(36 57 142 / 27%), inset 9px 10px 24px rgb(255 255 255 / 73%), 0 20px 29px rgb(52 83 178 / 22%), 0 4px 8px rgb(52 83 178 / 13%); transform: rotateX(14deg) rotateY(-20deg); animation: sphere-float 6s ease-in-out infinite; }
.hero-sphere::before, .hero-sphere::after, .hero-sphere > span { position: absolute; width: 41px; height: 41px; border: 5px solid rgb(255 255 255 / 88%); border-radius: 50%; box-shadow: 0 2px 6px rgb(43 63 139 / 13%); content: ""; }
.hero-sphere::before { transform: translate(-11px, -6px); }
.hero-sphere::after { transform: translate(10px, 8px); opacity: .8; }
.hero-sphere > span { width: 31px; height: 31px; border-width: 4px; transform: translate(0, 0); opacity: .7; }
.hero-orbit { position: absolute; top: 23px; left: 67px; width: 139px; height: 102px; border: 1px solid rgb(83 111 211 / 25%); border-radius: 50%; transform: rotate(-24deg) rotateX(61deg); }
.hero-orbit-two { top: 29px; left: 61px; width: 153px; height: 91px; border-color: rgb(77 157 199 / 25%); transform: rotate(33deg) rotateX(64deg); }
.hero-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 9px; background: linear-gradient(145deg, rgb(255 255 255 / 95%), rgb(245 248 255 / 86%)); box-shadow: 0 8px 18px rgb(44 62 112 / 10%), inset 0 1px 0 white; color: #536381; font-size: .64rem; font-weight: 750; white-space: nowrap; backdrop-filter: blur(8px); }
.hero-chip i { width: 6px; height: 6px; border-radius: 50%; background: #35ad80; box-shadow: 0 0 0 3px rgb(53 173 128 / 13%); }
.hero-chip-top { top: 14px; right: 4px; transform: rotate(3deg); animation: chip-float 5s ease-in-out infinite; }
.hero-chip-bottom { bottom: 12px; left: 8px; transform: rotate(-3deg); animation: chip-float 5.5s ease-in-out -1s infinite; }
@keyframes sphere-float { 0%, 100% { transform: translateY(0) rotateX(14deg) rotateY(-20deg); } 50% { transform: translateY(-7px) rotateX(17deg) rotateY(-13deg); } }
@keyframes chip-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
.connection-status { display: inline-flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: white; color: #69778d; font-size: .82rem; font-weight: 650; white-space: nowrap; }
.connection-status[data-state="connected"] { border-color: #b7e5d1; background: #f0fbf6; color: #14744f; }
.connection-status[data-state="connected"] .status-dot, .login-footnote .status-dot { background: #21a574; box-shadow: 0 0 0 3px rgb(33 165 116 / 12%); }
.connection-status[data-state="error"] { border-color: #f0c4c6; background: #fff6f6; color: #aa2734; }
.connection-status[data-state="error"] .status-dot { background: var(--red); }

.panel, .notice {
  margin-bottom: 16px;
  border: 1px solid #e7ebf2;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 14px rgb(24 42 79 / 3%), 0 1px 2px rgb(24 42 79 / 3%), inset 0 1px 0 rgb(255 255 255 / 90%);
}
.panel { position: relative; padding: 24px 26px; transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s, border-color .24s; }
.panel:hover { transform: translateY(-2px); border-color: #dce4f2; box-shadow: 0 12px 24px rgb(24 42 79 / 6%), 0 3px 7px rgb(24 42 79 / 3%), inset 0 1px 0 white; }
.notice { display: flex; align-items: flex-start; gap: 13px; padding: 16px 19px; border-color: #f0dfb8; background: #fffaf0; color: #72541a; }
.notice-symbol { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #f7e5b6; color: #80590c; font-weight: 800; }
.notice div { display: grid; gap: 3px; }
.notice strong { font-size: .87rem; }
.notice span:not(.notice-symbol) { color: #88734a; font-size: .82rem; line-height: 1.5; }
.login-panel { max-width: 430px; margin: 9vh auto 0; padding: 34px; }
.login-icon { display: grid; width: 48px; height: 48px; margin-bottom: 25px; place-items: center; border-radius: 14px; background: linear-gradient(145deg, #527af2, #3155cf); color: white; font-size: 1.5rem; font-weight: 750; box-shadow: 0 8px 18px rgb(49 95 232 / 24%); }
.login-panel .eyebrow { margin-bottom: 7px; }
.login-panel h2 { font-size: 1.45rem; }
.login-panel .muted { margin-bottom: 24px; }
.login-panel form { display: grid; gap: 10px; }
.login-footnote { display: flex; align-items: center; gap: 9px; margin: 23px 0 0; padding-top: 17px; border-top: 1px solid #edf0f5; color: #78859a; font-size: .77rem; }
.section-heading { align-items: flex-start; margin-bottom: 20px; }
.section-heading > div:first-child { min-width: 0; }
.section-heading .muted { margin-bottom: 0; }
.result-actions { display: flex; flex: 0 0 auto; gap: 9px; }
.account-identity { display: flex; align-items: center; gap: 12px; margin: 0 0 19px; padding: 13px 15px; border: 1px solid #dfe7fb; border-radius: 10px; background: linear-gradient(105deg, #f8faff, #f3f6ff); }
.identity-icon { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; border: 1px solid #dbe4ff; border-radius: 10px; background: linear-gradient(145deg, #fff, #edf2ff); box-shadow: 0 3px 7px rgb(52 83 165 / 9%), inset 0 1px 0 white; color: #4265ce; font-size: 1.4rem; }
.identity-copy { display: grid; min-width: 0; gap: 2px; }
.identity-copy > span { color: #78869d; font-size: .69rem; }
.identity-copy strong { overflow: hidden; color: #293d68; font-size: .94rem; text-overflow: ellipsis; }
.identity-copy small { color: #8a96aa; font-size: .68rem; }
.identity-badge { margin-left: auto; padding: 5px 8px; border: 1px solid #e0e7f2; border-radius: 99px; background: white; color: #76849a; font-size: .61rem; font-weight: 800; letter-spacing: .07em; white-space: nowrap; }
.account-identity[data-state="connected"] { border-color: #cfe8da; background: linear-gradient(105deg, #f7fcf9, #eff9f3); }
.account-identity[data-state="connected"] .identity-icon { border-color: #d3ebdd; color: #18835a; }
.account-identity[data-state="connected"] .identity-badge { border-color: #cce8d8; background: white; color: #18835a; }
.account-identity[data-state="error"] { border-color: #f0d7d8; background: #fff8f8; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; }
.span-two { grid-column: span 2; }

label { display: block; margin-bottom: 7px; color: #36445b; font-size: .81rem; font-weight: 700; }
.optional { margin-left: 5px; color: #99a3b2; font-size: .7rem; font-weight: 500; }
input, select {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #dce2eb;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: .88rem;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: #a0a9b7; }
input:focus, select:focus { border-color: #6a8aef; outline: 0; box-shadow: 0 0 0 3px rgb(49 95 232 / 11%); }
.field-help { display: block; margin-top: 6px; color: #8995a8; font-size: .73rem; }
.security-note { display: flex; align-items: center; gap: 7px; margin: 17px 0 0; color: #78869c; font-size: .75rem; }
.security-note span { color: #4a70df; font-size: 1rem; }

.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 12px; padding: 9px 14px; border: 1px solid transparent; border-radius: 8px; font-size: .81rem; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 11px rgb(30 49 93 / 10%); }
.button:disabled { cursor: wait; opacity: .6; }
.button-primary { background: linear-gradient(145deg, #4b72ee, #3155d5); color: white; box-shadow: 0 4px 9px rgb(49 95 232 / 20%), inset 0 1px 0 rgb(255 255 255 / 18%), inset 0 -2px 0 rgb(22 46 134 / 15%); }
.button-primary:hover:not(:disabled) { background: var(--blue-dark); }
.button-secondary { border-color: #dce3ed; background: white; color: #34445f; }
.button-secondary:hover:not(:disabled), .button-quiet:hover:not(:disabled) { border-color: #c6d1e1; background: #f7f9fc; }
.button-danger { background: #bd3441; color: white; }
.button-danger:hover:not(:disabled) { background: #a52633; }
.button-quiet { border-color: #e3e8ef; background: #f7f9fc; color: #4d5c74; }
.full { width: 100%; margin-top: 7px; justify-content: space-between; padding-inline: 14px; }
.actions { justify-content: flex-start; flex-wrap: wrap; gap: 14px; margin-top: 21px; }
.actions .muted { margin: 0; font-size: .78rem; }
.button-arrow { font-size: 1rem; }

.account-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #edf0f5; }
.account-stat { min-width: 0; padding: 11px 12px; border: 1px solid #edf0f5; border-radius: 8px; background: #fafbfd; }
.account-stat span { display: block; color: #7d8aa0; font-size: .7rem; }
.account-stat strong { display: block; margin-top: 5px; overflow: hidden; color: #24334d; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 16px; }
.summary-item { min-width: 0; padding: 15px; border: 1px solid #e9edf4; border-radius: 9px; background: #fafbfd; }
.summary-item span { display: block; color: #78869b; font-size: .72rem; }
.summary-item strong { display: block; margin-top: 7px; overflow: hidden; color: #1e2e47; font-size: 1.18rem; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.summary-item:nth-child(2) strong { color: #315fe8; }
.progress-box { display: flex; align-items: center; gap: 10px; margin: 13px 0; padding: 13px 14px; border: 1px solid #e3eafa; border-radius: 8px; background: #f6f8ff; color: #475b91; font-size: .82rem; }
.progress-box[data-state="complete"] { border-color: #cce8da; background: #f3fbf7; color: #337457; }
.progress-box[data-state="error"] { border-color: #f1d0d2; background: #fff7f7; color: #9c3d47; }
.spinner { width: 15px; height: 15px; flex: 0 0 auto; border: 2px solid #cbd6f3; border-top-color: #315fe8; border-radius: 50%; animation: spin .75s linear infinite; }
.progress-box[data-state="complete"] .spinner, .progress-box[data-state="error"] .spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.log-details { margin: 10px 0 14px; color: #6d7b91; font-size: .77rem; }
.log-details summary { width: fit-content; cursor: pointer; }
.logs { max-height: 210px; overflow: auto; margin-top: 9px; padding: 12px; border-radius: 8px; background: #152034; color: #d4dfef; font: .75rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.logs:empty { display: none; }
.table-wrap { width: 100%; overflow-x: auto; margin-top: 15px; border: 1px solid #e8ecf2; border-radius: 9px; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: .8rem; }
th, td { padding: 12px 13px; border-bottom: 1px solid #edf0f4; white-space: nowrap; }
th { background: #f8f9fc; color: #758197; font-size: .67rem; font-weight: 750; letter-spacing: .065em; text-transform: uppercase; }
td { color: #3e4b60; }
td:first-child { max-width: 300px; overflow: hidden; color: #263a5c; font-weight: 650; text-overflow: ellipsis; }
tbody tr:hover { background: #fafbfe; }
tbody tr:last-child td { border-bottom: 0; }
.pagination { justify-content: center; gap: 16px; margin-top: 14px; }
.pagination .muted { min-width: 110px; margin: 0; text-align: center; font-size: .78rem; }
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 33px 16px; border: 1px dashed #dce4ef; border-radius: 9px; color: #8290a4; font-size: .81rem; }
.empty-state strong { color: #33425a; font-size: .95rem; }
.empty-icon { display: grid; width: 34px; height: 34px; margin-bottom: 4px; place-items: center; border-radius: 50%; background: #eaf7f0; color: #16865d; font-size: 1rem; font-weight: 800; }

.danger-panel { border-color: #f0cacc; background: linear-gradient(145deg, #fff, #fffafa); }
.danger-kicker { display: inline-block; margin-bottom: 9px; color: #ad3742; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.danger-panel h2 { color: #822c35; }
.danger-panel > p { color: #745a5e; font-size: .85rem; }
.checkbox-label { display: flex; align-items: center; gap: 9px; margin-top: 16px; color: #6a5660; }
.checkbox-label input { width: 17px; min-height: 17px; accent-color: var(--red); }
.job-badge { padding: 6px 9px; border-radius: 99px; background: #eef2ff; color: #4a61b0; font-size: .7rem; font-weight: 750; }
.job-badge[data-state="complete"] { background: #eaf7f0; color: #167750; }
.job-badge[data-state="failed"] { background: #fff0f0; color: #a72b37; }
.job-result { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.job-stat { padding: 13px; border: 1px solid #e8edf3; border-radius: 8px; background: #fafbfd; }
.job-stat span { display: block; color: #758197; font-size: .7rem; }
.job-stat strong { display: block; margin-top: 5px; color: #263650; font-size: 1.02rem; }
.job-stat[data-state="danger"] strong { color: #b6323e; }

.summary-item, .account-stat, .job-stat { transition: transform .2s, box-shadow .2s, border-color .2s; }
.summary-item:hover, .account-stat:hover, .job-stat:hover { transform: translateY(-2px); border-color: #dce5f6; box-shadow: 0 7px 15px rgb(35 56 105 / 6%); }

.message { padding: 12px 14px; border-radius: 8px; font-size: .84rem; line-height: 1.5; }
.error { border: 1px solid #f1d0d2; background: #fff4f4; color: #9c2431; }
.hidden { display: none !important; }

@media (max-width: 720px) {
  .shell { width: min(100% - 28px, 1120px); padding-top: 15px; }
  .topbar { margin-bottom: 35px; }
  .page-heading { min-height: 170px; align-items: flex-start; flex-direction: column; justify-content: flex-start; gap: 13px; padding: 21px; }
  .hero-art { top: 45px; right: -25px; transform: scale(.74); transform-origin: top right; opacity: .52; }
  .page-heading > div:first-child { max-width: 75%; }
  .panel { padding: 19px; }
  .section-heading { flex-direction: column; gap: 13px; }
  .section-heading > .button { width: 100%; }
  .result-actions { width: 100%; }
  .result-actions .button { flex: 1; }
  .summary-grid, .account-grid, .job-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .shell { width: calc(100% - 22px); }
  .secure-badge { padding: 7px 8px; font-size: .69rem; }
  .topbar-actions { gap: 8px; }
  .brand { gap: 8px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-copy strong { font-size: .94rem; }
  .panel { padding: 16px; }
  .account-identity { gap: 9px; padding: 11px; }
  .identity-badge { padding: 5px 6px; font-size: .55rem; }
  .identity-copy strong { max-width: 190px; }
  .panel:hover { transform: none; }
  .page-heading { min-height: 174px; padding: 18px; }
  .page-heading > div:first-child { max-width: 88%; }
  .hero-art { top: 62px; right: -56px; transform: scale(.62); opacity: .36; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .span-two { grid-column: auto; }
  .summary-grid, .account-grid, .job-result { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .summary-item { padding: 12px; }
  .summary-item strong { font-size: 1rem; }
  .actions { align-items: flex-start; flex-direction: column; }
  .actions > .button { width: 100%; }
  .notice { padding: 13px; }
}

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