:root {
  --ink: #102235;
  --ink-soft: #526276;
  --navy: #0b1728;
  --navy-raised: #12243b;
  --accent: #37d6be;
  --accent-dark: #08796a;
  --surface: #fff;
  --canvas: #f3f6f8;
  --line: #e2e9ee;
  --radius: 18px;
  --shadow: 0 16px 50px rgba(12, 31, 48, .055);
  --content: 1200px;
  --gap: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; line-height: 1.55; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 82px; padding: 0 max(28px, calc((100vw - var(--content)) / 2)); background: var(--navy); display: flex; justify-content: space-between; align-items: center; color: #fff; gap: var(--gap); }
.brand { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 19px; font-weight: 750; letter-spacing: .025em; }
.brand strong { color: var(--accent); }
.brand-mark { width: 38px; height: 38px; border: 2px solid var(--accent); color: var(--accent); border-radius: 11px; display: inline-grid; place-items: center; font-size: 20px; font-weight: 800; transform: rotate(-8deg); }
.topnav { display: flex; align-items: center; gap: 25px; font-size: 14px; color: #cfdae8; }
.topnav a, .nav-link { min-height: 44px; display: inline-flex; align-items: center; }
.topnav a:hover, .nav-link:hover { color: var(--accent); }
.topnav .nav-cta { border: 1px solid rgba(55,214,190,.5); color: var(--accent); border-radius: 9px; padding: 8px 13px; }
.account-email { max-width: 210px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #96a8ba; }
.inline-form { margin: 0; }
.nav-link { border: 0; background: transparent; color: #cfdae8; padding: 0; }
.main-content { flex: 1; width: min(var(--content), calc(100% - 56px)); margin: 0 auto; padding: 46px 0 70px; }
.site-footer { min-height: 76px; padding: 20px max(28px, calc((100vw - var(--content)) / 2)); border-top: 1px solid var(--line); color: #7a8998; display: flex; justify-content: space-between; gap: 20px; align-items: center; font-size: 13px; }
.site-footer a:hover { color: var(--accent-dark); }
.eyebrow, .card-kicker { color: var(--accent-dark); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; margin: 0 0 12px; }
.signal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; box-shadow: 0 0 0 5px rgba(55,214,190,.15); vertical-align: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.14; letter-spacing: -.035em; }
h2 { font-size: 25px; line-height: 1.2; letter-spacing: -.025em; }
h3 { font-size: 20px; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 30px; }
.page-heading h1 { margin: 0 0 9px; }
.page-heading p:last-child { color: var(--ink-soft); margin: 0; }
.page-heading > :last-child { flex-shrink: 0; }
.button { min-height: 46px; padding: 10px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 14px; text-align: center; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--navy); color: #fff; box-shadow: 0 7px 18px rgba(11,23,40,.16); }
.button.primary:hover { background: #183757; }
.button.secondary { background: #fff; border-color: #cfdce4; color: var(--ink); }
.button.secondary:hover { border-color: var(--accent-dark); }
.button.ghost { background: #fff; border-color: var(--line); color: var(--ink-soft); }
.button.small { min-height: 44px; padding: 7px 10px; font-size: 12px; border-radius: 8px; white-space: nowrap; }
.text-link { color: var(--accent-dark); font-size: 14px; font-weight: 700; white-space: nowrap; }
.text-link:hover { text-decoration: underline; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 29px; }
.panel h2 { margin-bottom: 10px; }
.panel h3 { margin-bottom: 16px; }
.muted, .subtle, .hint { color: var(--ink-soft); }
.muted { font-size: 14px; }
.subtle { font-size: 13px; }
.hint { margin: 19px 0 0; font-size: 12px; line-height: 1.6; }
.pill { display: inline-flex; padding: 5px 10px; border-radius: 100px; background: #dff9f4; color: #086f61; font-size: 12px; font-weight: 750; }
.section-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 20px; }
.section-row h2, .section-row .card-kicker { margin-bottom: 0; }
.section-row .card-kicker { margin-bottom: 6px; }
.auth-layout { min-height: min(660px, calc(100vh - 205px)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); align-items: center; gap: clamp(42px, 7vw, 110px); }
.auth-intro { padding: 42px 0; }
.auth-intro h1 { font-size: clamp(46px, 6vw, 78px); color: var(--navy); margin: 23px 0; }
.auth-intro h1 em { color: #139f8c; font-style: normal; }
.auth-intro > p { max-width: 470px; color: var(--ink-soft); font-size: 16px; line-height: 1.8; }
.intro-points { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 50px; color: #6d8193; font-size: 12px; font-weight: 700; letter-spacing: .035em; }
.intro-points span { padding-top: 10px; border-top: 1px solid #c4d8da; min-width: 125px; }
.auth-card { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 75px rgba(13,34,51,.1); border-radius: 22px; padding: clamp(28px, 4vw, 46px); }
.auth-card h2 { font-size: 30px; margin: 0 0 8px; }
.auth-card > .muted { margin-bottom: 30px; }
.form-stack { display: grid; gap: 18px; }
.form-stack label, .copy-field { display: grid; gap: 8px; font-size: 13px; font-weight: 700; }
.form-stack input, .copy-field input { width: 100%; min-height: 48px; border: 1px solid #cbd9e1; border-radius: 9px; padding: 11px 13px; color: var(--ink); background: #fff; outline: none; }
.form-stack input:focus, .copy-field input:focus { border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(28,177,153,.13); }
.form-stack label small { font-weight: 400; color: var(--ink-soft); }
.form-stack .button { margin-top: 6px; width: 100%; }
.form-foot { color: var(--ink-soft); margin: 22px 0 0; font-size: 13px; text-align: center; }
.form-foot a { color: var(--accent-dark); font-weight: 700; }
.dashboard-grid, .billing-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: var(--gap); align-items: start; margin-bottom: var(--gap); }
.billing-grid { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }
.feature-panel { background: linear-gradient(145deg, var(--navy), var(--navy-raised)); color: #fff; min-height: 365px; }
.feature-panel .subtle, .feature-panel p, .feature-panel .hint { color: #b9cada; }
.feature-panel .pill { background: rgba(55,214,190,.13); color: var(--accent); }
.feature-panel h2 { font-size: 32px; margin: 16px 0 11px; }
.feature-panel .button.primary { background: var(--accent); color: #08272a; margin-top: 18px; }
.feature-panel .button.primary:hover { background: #66e4d1; }
.service-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0; }
.service-metrics > div { border-top: 1px solid rgba(255,255,255,.17); padding-top: 13px; display: grid; gap: 4px; }
.service-metrics span { color: #9fb3c4; font-size: 12px; }
.service-metrics strong { font-size: 16px; }
.copy-field { color: #b9cada; }
.copy-field input { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.25); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.steps { list-style: none; display: grid; gap: 22px; padding: 5px 0; margin: 0; }
.steps li { display: flex; gap: 16px; align-items: start; }
.steps li > span { color: var(--accent-dark); font-size: 12px; font-weight: 800; min-width: 32px; }
.steps div { display: grid; gap: 4px; }
.steps small { color: var(--ink-soft); font-size: 12px; }
.table-panel { margin-top: var(--gap); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; min-width: 620px; }
th { padding: 12px; color: #7b8a99; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--line); }
td { padding: 16px 12px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.status { display: inline-flex; padding: 5px 9px; border-radius: 100px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.status.pending, .status.processing { color: #93630a; background: #fff2d7; }
.status.approved { color: #117057; background: #def5e9; }
.status.rejected { color: #a43d40; background: #ffe9e9; }
.row-note, .row-error { display: block; margin-top: 5px; color: var(--ink-soft); max-width: 250px; overflow-wrap: anywhere; }
.row-error { color: #b24245; }
.action-pair { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.action-pair form { margin: 0; }
.empty-state { padding: 26px; background: #f7fafb; border: 1px dashed #cddce2; border-radius: 12px; }
.empty-state strong { display: block; font-size: 16px; margin-bottom: 5px; }
.empty-state p { color: var(--ink-soft); font-size: 13px; margin: 0; }
.alert { padding: 12px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 18px; }
.alert.error { color: #8c2e34; background: #fff0f0; border: 1px solid #f2caca; }
.alert.info { color: #285372; background: #edf7ff; border: 1px solid #cce3f3; }
.alert.success { color: #11674e; background: #e7f8ef; border: 1px solid #bce9cf; }
.plan-panel { min-height: 414px; }
.plan-panel h2 { margin-top: 22px; }
.price { font-size: 39px; font-weight: 800; letter-spacing: -.035em; color: var(--navy); margin: 22px 0; }
.price small { font-size: 13px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.plan-rule { display: flex; justify-content: space-between; padding: 13px 0; border-top: 1px solid var(--line); font-size: 13px; }
.plan-rule span { color: var(--ink-soft); }
.payment-panel .qr-frame { width: min(250px, 100%); min-height: 250px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: #fff; margin: 22px 0; }
.qr-frame img { display: block; max-width: 100%; max-height: 225px; object-fit: contain; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin: 0 0 var(--gap); }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 27px; box-shadow: var(--shadow); display: grid; gap: 4px; }
.stat-card > span { font-size: 13px; color: var(--ink-soft); }
.stat-card strong { font-size: 42px; line-height: 1.2; letter-spacing: -.04em; }
.stat-card small { color: #8a9aa7; }
.node-list { display: grid; }
.node-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.node-row div { display: grid; gap: 2px; }
.node-row small { color: var(--ink-soft); }
.narrow-panel { max-width: 790px; }
.command { background: var(--navy); color: #e9fff9; border-radius: 10px; padding: 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.token-box { display: grid; gap: 8px; margin: 24px 0; }
.token-box span { font-size: 12px; color: var(--ink-soft); }
.token-box code { display: block; background: #f3f7f8; border: 1px solid var(--line); border-radius: 9px; padding: 16px; font-size: 16px; overflow-wrap: anywhere; user-select: all; }
.license-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
@media (max-width: 850px) {
  .auth-layout, .dashboard-grid, .billing-grid { grid-template-columns: 1fr; }
  .auth-layout { gap: 20px; align-items: start; }
  .auth-intro { padding: 14px 0 0; }
  .auth-intro h1 { font-size: 46px; }
  .intro-points { margin-top: 24px; }
  .topnav { gap: 14px; }
  .account-email { display: none; }
}
@media (max-width: 600px) {
  .topbar { height: auto; min-height: 72px; padding: 16px 20px; flex-wrap: wrap; }
  .brand { font-size: 16px; }
  .brand-mark { width: 32px; height: 32px; font-size: 17px; }
  .topnav { width: 100%; justify-content: space-between; font-size: 13px; }
  .main-content { width: calc(100% - 32px); padding: 29px 0 48px; }
  .page-heading { align-items: start; flex-direction: column; gap: 15px; }
  .page-heading h1 { font-size: 33px; }
  .panel { padding: 22px; }
  .auth-intro h1 { font-size: 42px; }
  .auth-card { padding: 27px 23px; }
  .intro-points span { min-width: 94px; font-size: 10px; }
  .service-metrics { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-card { padding: 17px 22px; }
  .stat-card strong { font-size: 30px; }
  .section-row { align-items: start; }
  .section-row .subtle { display: none; }
  .site-footer { padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .button:hover { transform: none; }
}